fix(buttons): disabled IconButton background color (#1009)

zendeskgarden · Feb 3, 2021 · d103cb1 · d103cb1
1 parent e5cd252
commit d103cb1
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 15 deletions.
diff --git a/packages/buttons/.size-snapshot.json b/packages/buttons/.size-snapshot.json
@@ -19,21 +19,21 @@
     }
   },
   "index.cjs.js": {
-    "bundled": 26657,
-    "minified": 19124,
-    "gzipped": 4667
+    "bundled": 26948,
+    "minified": 19312,
+    "gzipped": 4706
   },
   "index.esm.js": {
-    "bundled": 24697,
-    "minified": 17421,
-    "gzipped": 4514,
+    "bundled": 24988,
+    "minified": 17609,
+    "gzipped": 4554,
     "treeshaked": {
       "rollup": {
-        "code": 13702,
+        "code": 13815,
         "import_statements": 358
       },
       "webpack": {
-        "code": 15598
+        "code": 15711
       }
     }
   }

diff --git a/packages/buttons/src/styled/StyledButton.ts b/packages/buttons/src/styled/StyledButton.ts
@@ -30,6 +30,10 @@ const getBorderRadius = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) =
   return props.theme.borderRadii.md;
 };
 
+const getDisabledBackgroundColor = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
+  return getColor('neutralHue', 200, props.theme);
+};
+
 export const getHeight = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
   if (props.size === SIZE.SMALL) {
     return `${props.theme.space.base * 8}px`;
@@ -61,7 +65,7 @@ const colorStyles = (
   const baseColor = getColor(hue, shade, props.theme);
   const hoverColor = getColor(hue, shade + 100, props.theme);
   const activeColor = getColor(hue, shade + 200, props.theme);
-  const disabledBackgroundColor = getColor(hue, shade - 400, props.theme);
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
   const disabledForegroundColor = getColor(hue, shade - 200, props.theme);
   const boxShadowColor =
     props.focusInset && (props.isPrimary || props.isSelected)
@@ -154,10 +158,14 @@ const colorStyles = (
   return retVal;
 };
 
+/**
+ * 1. Icon button override.
+ */
 const groupStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
   const isPrimary = props.isPrimary;
   const rtl = props.theme.rtl;
   const lightBorderColor = props.theme.colors.background;
+  const disabledBackgroundColor = getDisabledBackgroundColor(props);
 
   return css`
     position: relative;
@@ -179,6 +187,7 @@ const groupStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
       border-bottom-width: 0;
       border-right-color: ${lightBorderColor};
       border-left-color: ${lightBorderColor};
+      background-color: ${!isPrimary && disabledBackgroundColor}; /* [1] */
     }
 
     /* stylelint-disable property-no-unknown, property-case */

diff --git a/packages/buttons/src/styled/StyledButtonGroup.spec.tsx b/packages/buttons/src/styled/StyledButtonGroup.spec.tsx
@@ -9,6 +9,8 @@ import React from 'react';
 import { render, renderRtl } from 'garden-test-utils';
 import { StyledButtonGroup } from './StyledButtonGroup';
 import { StyledButton } from './StyledButton';
+import { StyledIconButton } from './StyledIconButton';
+import { PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledButtonGroup', () => {
   it('renders the expected element', () => {
@@ -36,11 +38,20 @@ describe('StyledButtonGroup', () => {
       </StyledButtonGroup>
     );
 
-    /* stylelint-disable */
     expect(getByTestId('group-button')).toHaveStyleRule('position', 'relative', {
-      modifier: (`
-        ${StyledButtonGroup} &
-      ` as unknown) as string
+      modifier: `${StyledButtonGroup} &`
+    });
+  });
+
+  it('renders expected disabled icon button styling', () => {
+    const { getByTestId } = render(
+      <StyledButtonGroup>
+        <StyledIconButton data-test-id="group-button">test</StyledIconButton>
+      </StyledButtonGroup>
+    );
+
+    expect(getByTestId('group-button')).toHaveStyleRule('background-color', PALETTE.grey[200], {
+      modifier: `${StyledButtonGroup} &:disabled`
     });
   });
 });
diff --git a/packages/buttons/src/styled/StyledIconButton.spec.tsx b/packages/buttons/src/styled/StyledIconButton.spec.tsx
@@ -31,6 +31,24 @@ describe('StyledIconButton', () => {
     expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[600]);
   });
 
+  describe('disabled', () => {
+    it('renders expected styling', () => {
+      const { container } = render(<StyledIconButton disabled />);
+
+      expect(container.firstChild).toHaveStyleRule('background-color', 'transparent', {
+        modifier: ':disabled'
+      });
+    });
+
+    it('renders expected primary styling', () => {
+      const { container } = render(<StyledIconButton disabled isPrimary />);
+
+      expect(container.firstChild).toHaveStyleRule('background-color', PALETTE.grey[200], {
+        modifier: ':disabled'
+      });
+    });
+  });
+
   describe('Sizes', () => {
     it('renders small styling if provided', () => {
       const { container } = render(<StyledIconButton size="small" />);

diff --git a/packages/buttons/src/styled/StyledIconButton.ts b/packages/buttons/src/styled/StyledIconButton.ts
@@ -43,6 +43,10 @@ const iconButtonStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>)
     min-width: ${width};
 
     ${props.isBasic && !(props.isPrimary || props.disabled) && iconColorStyles(props)};
+
+    &:disabled {
+      background-color: ${!props.isPrimary && 'transparent'};
+    }
   `;
 };
 
@@ -62,10 +66,10 @@ const iconStyles = (props: IStyledButtonProps & ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledIconButton = styled(StyledButton).attrs(() => ({
+export const StyledIconButton = styled(StyledButton as 'button').attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-}))`
+})<IStyledButtonProps>`
   ${props => iconButtonStyles(props)};
 
   & ${StyledIcon} {