Icon button changes (#2758)

* feat(recolouring): icon button changes * feat(recolouring): add changesets --------- Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com>
commercetools · Mar 22, 2024 · e694890 · e694890
1 parent bfc3902
commit e694890
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 4 deletions.
diff --git a/.changeset/two-colts-build.md b/.changeset/two-colts-build.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/icon-button': major
+'@commercetools-uikit/design-system': minor
+---
+
+This change removes borders and background color from the icon button when in default or disabled state in the new theme
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -196,6 +196,11 @@
   --background-color-for-button-when-active: hsl(232, 18%, 95%);
   --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
   --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-icon-button-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    95%
+  );
   --background-color-for-input: #fff;
   --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
   --background-color-for-input-when-disabled: hsl(232, 18%, 95%);

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -184,6 +184,7 @@
   "--background-color-for-button-when-active": "hsl(232, 18%, 95%)",
   "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)",
   "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
+  "--background-color-for-icon-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
   "--background-color-for-input": "#fff",
   "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
   "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)",

diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css
@@ -196,6 +196,11 @@
   --background-color-for-button-when-active: hsl(232, 18%, 95%);
   --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
   --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-icon-button-when-disabled: hsl(
+    195,
+    35.2941176471%,
+    95%
+  );
   --background-color-for-input: #fff;
   --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
   --background-color-for-input-when-disabled: hsl(232, 18%, 95%);

diff --git a/design-system/materials/custom-properties_recolouring.css b/design-system/materials/custom-properties_recolouring.css
@@ -196,6 +196,7 @@
   --background-color-for-button-when-active: hsl(243, 100%, 93%);
   --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
   --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
+  --background-color-for-icon-button-when-disabled: transparent;
   --background-color-for-input: #fff;
   --background-color-for-input-when-selected: hsl(244, 100%, 97%);
   --background-color-for-input-when-disabled: hsl(232, 18%, 95%);

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -397,6 +397,8 @@ variants:
 componentGroups:
   button:
     description: 'Button elements'
+  icon-button:
+    description: 'Icon button elements'
   input:
     description: 'Input elements'
   localized-input-label:
@@ -445,6 +447,8 @@ decisionGroupsByTheme:
           choice: color-neutral-98
         background-color-for-button-when-disabled:
           choice: color-accent-95
+        background-color-for-icon-button-when-disabled:
+          choice: color-accent-95
         background-color-for-input:
           choice: color-surface
         background-color-for-input-when-selected:
@@ -703,6 +707,8 @@ decisionGroupsByTheme:
           choice: color-primary-90
         background-color-for-button-when-hovered:
           choice: color-primary-95
+        background-color-for-icon-button-when-disabled:
+          choice: 'color-transparent'
         background-color-for-button-as-primary:
           choice: color-primary
         background-color-for-button-as-primary-when-hovered:

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -195,6 +195,7 @@ export const themes = {
     backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
     backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
     backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
+    backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
     backgroundColorForInput: '#fff',
     backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
     backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)',
@@ -360,6 +361,7 @@ export const themes = {
     borderColorForTag: 'hsl(243, 100%, 93%)',
     backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
     backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
+    backgroundColorForIconButtonWhenDisabled: 'transparent',
     backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
     backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
     backgroundColorForButtonAsPrimaryAsDefaultWhenHovered:
@@ -613,6 +615,8 @@ const designTokens = {
     'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
   backgroundColorForButtonWhenDisabled:
     'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
+  backgroundColorForIconButtonWhenDisabled:
+    'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
   backgroundColorForInput: 'var(--background-color-for-input, #fff)',
   backgroundColorForInputWhenSelected:
     'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',

diff --git a/packages/components/buttons/icon-button/src/icon-button.styles.ts b/packages/components/buttons/icon-button/src/icon-button.styles.ts
@@ -84,7 +84,7 @@ const getBaseStyles = (
     return css`
       &,
       &:hover {
-        background-color: ${designTokens.backgroundColorForButtonWhenDisabled};
+        background-color: ${designTokens.backgroundColorForIconButtonWhenDisabled};
         border-color: ${designTokens.colorSurface};
         color: ${designTokens.colorNeutral60};
         box-shadow: none;
@@ -98,7 +98,6 @@ const getBaseStyles = (
         background-color: ${designTokens.backgroundColorForButtonWhenHovered};
         box-shadow: ${designTokens.shadow0};
       }
-      ${isActive ? '&,' : ''}
       &:active {
         background-color: ${designTokens.backgroundColorForButtonWhenActive};
         box-shadow: ${designTokens.shadow0};

diff --git a/packages/components/buttons/icon-button/src/icon-button.tsx b/packages/components/buttons/icon-button/src/icon-button.tsx
@@ -7,7 +7,7 @@ import {
   cloneElement,
 } from 'react';
 import { css } from '@emotion/react';
-import { designTokens } from '@commercetools-uikit/design-system';
+import { designTokens, useTheme } from '@commercetools-uikit/design-system';
 import { filterInvalidAttributes, warning } from '@commercetools-uikit/utils';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import {
@@ -90,6 +90,7 @@ const defaultProps: Pick<
 const IconButton = <TStringOrComponent extends ElementType = 'button'>(
   props: TIconButtonProps<TStringOrComponent>
 ) => {
+  const { themedValue } = useTheme();
   warning(
     !(props.theme !== 'default' && !props.isToggleButton),
     `Invalid prop \`theme\` supplied to \`IconButton\`. Only toggle buttons may have a theme.`
@@ -118,7 +119,10 @@ const IconButton = <TStringOrComponent extends ElementType = 'button'>(
           display: flex;
           align-items: center;
           justify-content: center;
-          border: 1px solid ${designTokens.borderColorForButtonAsSecondary};
+          border: ${themedValue(
+            `1px solid ${designTokens.borderColorForButtonAsSecondary}`,
+            'none'
+          )};
           background-color: ${designTokens.colorSurface};
           box-shadow: ${designTokens.shadow0};
           color: ${designTokens.fontColorForButtonAsSecondary};