refactor(button): Remove unnecessary styles

Workday · Feb 20, 2020 · 4f6202b · 4f6202b
1 parent 9a8b28b
commit 4f6202b
Showing 1 changed file with 5 additions and 14 deletions.
diff --git a/modules/_labs/button/react/lib/parts/ButtonContainer.tsx b/modules/_labs/button/react/lib/parts/ButtonContainer.tsx
@@ -142,7 +142,7 @@ export const ButtonContainer = styled('button', {
     };
 
     const hoverStyles = {
-      ':hover': {
+      '&:hover': {
         backgroundColor: colors.hover.background,
         borderColor: colors.hover.border,
         color: colors.hover.label,
@@ -157,7 +157,7 @@ export const ButtonContainer = styled('button', {
     };
 
     const activeStyles = {
-      ':active, :focus:active, :hover:active': {
+      '&:active, &:focus:active, &:hover:active': {
         backgroundColor: colors.active.background,
         borderColor: colors.active.border,
         color: colors.active.label,
@@ -172,10 +172,11 @@ export const ButtonContainer = styled('button', {
 
     return {
       ...baseStyles,
-      ':focus': {
+      '&:focus': {
         backgroundColor: colors.focus.background,
         borderColor: colors.focus.border,
         color: colors.focus.label,
+        ...(colors.focus.focusRing || focusRing(2, 2)),
         ...(colors.focus.labelData && {
           ['.' + buttonLabelDataClassName]: {
             color: colors.focus.labelData,
@@ -186,7 +187,7 @@ export const ButtonContainer = styled('button', {
 
       ...activeStyles,
       ...hoverStyles,
-      ':disabled, :active:disabled, :focus:disabled, :hover:disabled': {
+      '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
         backgroundColor: colors.disabled.background,
         borderColor: colors.disabled.border,
         color: colors.disabled.label,
@@ -197,16 +198,6 @@ export const ButtonContainer = styled('button', {
           },
         }),
       },
-      '&:not([disabled])': {
-        '&:focus': {
-          borderColor: colors.focus.border,
-          ...(colors.focus.focusRing || focusRing(2, 2)),
-        },
-        '&:active': {
-          borderColor: colors.active.border,
-          ...(colors.focus.focusRing || focusRing(2, 2)),
-        },
-      },
       ...mouseFocusBehavior({
         '&:focus': {
           ...baseStyles,