Add new sizes for icon buttons (#2830)

* chore: introduce new sizes for Icons, Buttons & IconButtons --------- Co-authored-by: Ddouglasz <douglas.egiemeh@gmail.com> Co-authored-by: Michael Salzmann <michael.salzmann@commercetools.com> Co-authored-by: Carlos Cortizas <97907068+CarlosCortizasCT@users.noreply.github.com>
commercetools · Jun 17, 2024 · f09213e · f09213e
1 parent ec50c29
commit f09213e
Show file tree

Hide file tree

Showing 181 changed files with 2,429 additions and 498 deletions.
diff --git a/.changeset/empty-coins-lick.md b/.changeset/empty-coins-lick.md
@@ -0,0 +1,12 @@
+---
+'@commercetools-uikit/secondary-icon-button': patch
+'@commercetools-uikit/secondary-button': patch
+'@commercetools-uikit/primary-button': patch
+'@commercetools-uikit/rich-text-utils': patch
+'@commercetools-uikit/checkbox-input': patch
+'@commercetools-uikit/icon-button': patch
+'@commercetools-uikit/icons': patch
+'@commercetools-uikit/design-system': patch
+---
+
+Introduced new sizes and size-names for icons, buttons & IconButtons ('small', 'medium' & 'big' got deprecated in favor of numeric size tokens: '10', '20', etc.)
diff --git a/design-system/materials/custom-properties.css b/design-system/materials/custom-properties.css
@@ -229,6 +229,10 @@
   --height-for-button-as-big: 40px;
   --height-for-button-as-small: 16px;
   --height-for-button-as-medium: 32px;
+  --height-for-button-as-40: 40px;
+  --height-for-button-as-30: 32px;
+  --height-for-button-as-20: 24px;
+  --height-for-button-as-10: 16px;
   --height-for-input: 40px;
   --height-for-input-as-small: 32px;
   --shadow-for-input: none;

diff --git a/design-system/materials/custom-properties.json b/design-system/materials/custom-properties.json
@@ -209,6 +209,10 @@
   "--height-for-button-as-big": "40px",
   "--height-for-button-as-small": "16px",
   "--height-for-button-as-medium": "32px",
+  "--height-for-button-as-40": "40px",
+  "--height-for-button-as-30": "32px",
+  "--height-for-button-as-20": "24px",
+  "--height-for-button-as-10": "16px",
   "--height-for-input": "40px",
   "--height-for-input-as-small": "32px",
   "--shadow-for-input": "none",

diff --git a/design-system/materials/custom-properties_default.css b/design-system/materials/custom-properties_default.css
@@ -229,6 +229,10 @@
   --height-for-button-as-big: 40px;
   --height-for-button-as-small: 16px;
   --height-for-button-as-medium: 32px;
+  --height-for-button-as-40: 40px;
+  --height-for-button-as-30: 32px;
+  --height-for-button-as-20: 24px;
+  --height-for-button-as-10: 16px;
   --height-for-input: 40px;
   --height-for-input-as-small: 32px;
   --shadow-for-input: none;

diff --git a/design-system/materials/internals/definition.yaml b/design-system/materials/internals/definition.yaml
@@ -300,6 +300,14 @@ variants:
     description: 'To differentiate component big size'
   secondary:
     description: 'To differentiate component secondary type'
+  '10':
+    description: 'To differentiate component small size'
+  '20':
+    description: 'To differentiate component medium size'
+  '30':
+    description: 'To differentiate component between big and medium size'
+  '40':
+    description: 'To differentiate component big size'
 
 componentGroups:
   button:
@@ -391,6 +399,14 @@ decisionGroupsByTheme:
           choice: '16px'
         height-for-button-as-medium:
           choice: '32px'
+        height-for-button-as-40:
+          choice: '40px'
+        height-for-button-as-30:
+          choice: '32px'
+        height-for-button-as-20:
+          choice: '24px'
+        height-for-button-as-10:
+          choice: '16px'
         height-for-input:
           choice: '40px'
         # This is a temporary one to be able to remove the legay 'size-height-for-input'

diff --git a/design-system/src/design-tokens.ts b/design-system/src/design-tokens.ts
@@ -220,6 +220,10 @@ export const themes = {
     heightForButtonAsBig: '40px',
     heightForButtonAsSmall: '16px',
     heightForButtonAsMedium: '32px',
+    heightForButtonAs40: '40px',
+    heightForButtonAs30: '32px',
+    heightForButtonAs20: '24px',
+    heightForButtonAs10: '16px',
     heightForInput: '40px',
     heightForInputAsSmall: '32px',
     shadowForInput: 'none',
@@ -477,6 +481,10 @@ const designTokens = {
   heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
   heightForButtonAsSmall: 'var(--height-for-button-as-small, 16px)',
   heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
+  heightForButtonAs40: 'var(--height-for-button-as-40, 40px)',
+  heightForButtonAs30: 'var(--height-for-button-as-30, 32px)',
+  heightForButtonAs20: 'var(--height-for-button-as-20, 24px)',
+  heightForButtonAs10: 'var(--height-for-button-as-10, 16px)',
   heightForInput: 'var(--height-for-input, 40px)',
   heightForInputAsSmall: 'var(--height-for-input-as-small, 32px)',
   shadowForInput: 'var(--shadow-for-input, none)',

diff --git a/packages/calendar-utils/src/calendar-header/calendar-header.tsx b/packages/calendar-utils/src/calendar-header/calendar-header.tsx
@@ -57,7 +57,7 @@ const CalendarHeader = (props: TCalendarHeader) => {
             label="show prev month"
             onClick={props.onPrevMonthClick}
             icon={<AngleLeftIcon />}
-            size="medium"
+            size="30"
           />
         </Tooltip>
         <Tooltip
@@ -68,7 +68,7 @@ const CalendarHeader = (props: TCalendarHeader) => {
             label="show today"
             onClick={props.onTodayClick}
             icon={<CircleIcon />}
-            size="medium"
+            size="30"
           />
         </Tooltip>
         <Tooltip
@@ -79,7 +79,7 @@ const CalendarHeader = (props: TCalendarHeader) => {
             label="show next month"
             onClick={props.onNextMonthClick}
             icon={<AngleRightIcon />}
-            size="medium"
+            size="30"
           />
         </Tooltip>
         <Text.Body as="span" fontWeight="bold">
@@ -95,7 +95,7 @@ const CalendarHeader = (props: TCalendarHeader) => {
             label="show prev year"
             onClick={props.onPrevYearClick}
             icon={<AngleLeftIcon />}
-            size="medium"
+            size="30"
           />
         </Tooltip>
         <Text.Body fontWeight="bold">{props.yearLabel}</Text.Body>
@@ -107,7 +107,7 @@ const CalendarHeader = (props: TCalendarHeader) => {
             label="show next year"
             onClick={props.onNextYearClick}
             icon={<AngleRightIcon />}
-            size="medium"
+            size="30"
           />
         </Tooltip>
       </Inline>

diff --git a/packages/components/buttons/icon-button/README.md b/packages/components/buttons/icon-button/README.md
@@ -58,7 +58,7 @@ export default Example;
 | `onClick`        | `Function`<br/>[See signature.](#signature-onClick)               |          |             | Handler when the button is clicked                                                                                                                                                                                                                                       |
 | `shape`          | `union`<br/>Possible values:<br/>`'round' , 'square'`             |          | `'round'`   | @deprecated This prop is only used in the old theme. For the new theme this prop will not be taken into account and `square` is used by default                                                                                                                          |
 | `theme`          | `union`<br/>Possible values:<br/>`'default' , 'primary' , 'info'` |          | `'default'` | The component may have a theme only if `isToggleButton` is `true`                                                                                                                                                                                                        |
-| `size`           | `union`<br/>Possible values:<br/>`'small' , 'medium' , 'big'`     |          | `'big'`     | Indicates the size of the icon.                                                                                                                                                                                                                                          |
+| `size`           | `union`<br/>Possible values:<br/>`TLegacySizes , TSizes`          |          | `'40'`      | Indicates the size of the icon. Available sizes are '10', '20', '30', '40'.                                                                                                                                                                                              |
 
 ## Signatures
 

diff --git a/packages/components/buttons/icon-button/src/icon-button.story.js b/packages/components/buttons/icon-button/src/icon-button.story.js
@@ -29,7 +29,7 @@ storiesOf('Components|Buttons', module)
             to={to}
             type={select('type', ['submit', 'reset', 'button'], 'button')}
             shape={select('shape', ['round', 'square'], 'round')}
-            size={select('size', ['big', 'medium', 'small'], 'big')}
+            size={select('size', ['10', '20', '30', '40'], '40')}
             theme={select('theme', ['primary', 'info', 'default'], 'default')}
             icon={createElement(icons[select('icon', iconNames, iconNames[0])])}
             onClick={action('onClick')}

diff --git a/packages/components/buttons/icon-button/src/icon-button.styles.ts b/packages/components/buttons/icon-button/src/icon-button.styles.ts
@@ -38,10 +38,14 @@ const getShapeStyles = (
     case 'square':
       switch (size) {
         case 'small':
+        case '10':
+        case '20':
           return css`
             border-radius: ${designTokens.borderRadius2};
           `;
         case 'medium':
+        case '30':
+        case '40':
         case 'big':
           return css`
             border-radius: ${designTokens.borderRadius4};
@@ -57,18 +61,38 @@ const getSizeStyles = (size: TIconButtonProps['size']) => {
   switch (size) {
     case 'small':
       return css`
-        height: ${designTokens.heightForButtonAsSmall};
-        width: ${designTokens.heightForButtonAsSmall};
+        height: ${designTokens.heightForButtonAs10};
+        width: ${designTokens.heightForButtonAs10};
       `;
     case 'medium':
       return css`
-        height: ${designTokens.heightForButtonAsMedium};
-        width: ${designTokens.heightForButtonAsMedium};
+        height: ${designTokens.heightForButtonAs30};
+        width: ${designTokens.heightForButtonAs30};
       `;
     case 'big':
       return css`
-        height: ${designTokens.heightForButtonAsBig};
-        width: ${designTokens.heightForButtonAsBig};
+        height: ${designTokens.heightForButtonAs40};
+        width: ${designTokens.heightForButtonAs40};
+      `;
+    case '10':
+      return css`
+        height: ${designTokens.heightForButtonAs10};
+        width: ${designTokens.heightForButtonAs10};
+      `;
+    case '20':
+      return css`
+        height: ${designTokens.heightForButtonAs20};
+        width: ${designTokens.heightForButtonAs20};
+      `;
+    case '30':
+      return css`
+        height: ${designTokens.heightForButtonAs30};
+        width: ${designTokens.heightForButtonAs30};
+      `;
+    case '40':
+      return css`
+        height: ${designTokens.heightForButtonAs40};
+        width: ${designTokens.heightForButtonAs40};
       `;
     default:
       return css``;

diff --git a/packages/components/buttons/icon-button/src/icon-button.tsx b/packages/components/buttons/icon-button/src/icon-button.tsx
@@ -8,7 +8,11 @@ import {
 } from 'react';
 import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
-import { filterInvalidAttributes, warning } from '@commercetools-uikit/utils';
+import {
+  filterInvalidAttributes,
+  useWarning,
+  warning,
+} from '@commercetools-uikit/utils';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import {
   getShapeStyles,
@@ -18,6 +22,25 @@ import {
   getHoverStyles,
 } from './icon-button.styles';
 
+/**
+ * @deprecated Use sizes from `TSizes` instead.
+ */
+type TLegacySizes = 'small' | 'medium' | 'big';
+
+/**
+ * Available sizes for the IconButton.
+ */
+type TSizes = '10' | '20' | '30' | '40';
+
+/**
+ * Mapping of legacy sizes to new sizes.
+ */
+const sizeMapping: Record<TLegacySizes, TSizes> = {
+  small: '10',
+  medium: '30',
+  big: '40',
+};
+
 export type TIconButtonProps<
   TStringOrComponent extends ElementType = 'button'
 > = {
@@ -67,9 +90,9 @@ export type TIconButtonProps<
    */
   theme?: 'default' | 'primary' | 'info';
   /**
-   * Indicates the size of the icon.
+   * Indicates the size of the icon. Available sizes are '10', '20', '30', '40'.
    */
-  size?: 'small' | 'medium' | 'big';
+  size?: TLegacySizes | TSizes;
 } & /**
  * Include any props derived from the React component passed to the `as` prop.
  * For example, given `as={Link}`, all props of the `<Link>` component are allowed to be
@@ -82,7 +105,7 @@ const defaultProps: Pick<
 > = {
   type: 'button',
   theme: 'default',
-  size: 'big',
+  size: '40',
   shape: 'round',
   isToggleButton: false,
 };
@@ -95,6 +118,15 @@ const IconButton = <TStringOrComponent extends ElementType = 'button'>(
     `Invalid prop \`theme\` supplied to \`IconButton\`. Only toggle buttons may have a theme.`
   );
 
+  useWarning(
+    !Boolean(Object.keys(sizeMapping).indexOf(props.size) > -1),
+    `IconButton '${
+      props.size
+    }' value for 'size' property has been deprecated in favor of '${
+      sizeMapping[props.size as TLegacySizes]
+    }' Please update that value when using this component`
+  );
+
   const buttonAttributes = {
     'data-track-component': 'IconButton',
     ...filterInvalidAttributes(props),

diff --git a/packages/components/buttons/icon-button/src/icon-button.visualroute.jsx b/packages/components/buttons/icon-button/src/icon-button.visualroute.jsx
@@ -143,5 +143,45 @@ export const component = () => (
         theme="info"
       />
     </Spec>
+
+    <Spec label="sizes - when '10'">
+      <IconButton
+        icon={<InformationIcon />}
+        shape="square"
+        size="10"
+        label="A label text"
+        onClick={() => {}}
+      />
+    </Spec>
+
+    <Spec label="sizes - when '20'">
+      <IconButton
+        icon={<InformationIcon />}
+        shape="square"
+        size="20"
+        label="A label text"
+        onClick={() => {}}
+      />
+    </Spec>
+
+    <Spec label="sizes - when '30'">
+      <IconButton
+        icon={<InformationIcon />}
+        shape="square"
+        size="40"
+        label="A label text"
+        onClick={() => {}}
+      />
+    </Spec>
+
+    <Spec label="sizes - when '40'">
+      <IconButton
+        icon={<InformationIcon />}
+        shape="square"
+        size="40"
+        label="A label text"
+        onClick={() => {}}
+      />
+    </Spec>
   </Suite>
 );
diff --git a/packages/components/buttons/primary-button/README.md b/packages/components/buttons/primary-button/README.md
@@ -57,7 +57,7 @@ export default Example;
 | `isToggled`      | `boolean`                                                            |          |             | Tells when the button should present a toggled state. It does not have any effect when `isToggleButton` is `false`.                                                                                                                                                         |
 | `isDisabled`     | `boolean`                                                            |          |             | Tells when the button should present a disabled state.                                                                                                                                                                                                                      |
 | `onClick`        | `Function`<br/>[See signature.](#signature-onClick)                  |          |             | Handler when the button is clicked.&#xA;<br />&#xA;Required when `as` is `undefined`                                                                                                                                                                                        |
-| `size`           | `union`<br/>Possible values:<br/>`'small' , 'medium' , 'big'`        |          | `'big'`     | Indicates the size of the button.&#xA;<br />&#xA;`small` value has been deprecated. Please use `medium` value instead as a replacement.                                                                                                                                     |
+| `size`           | `union`<br/>Possible values:<br/>`TLegacySizes , TSizes`             |          | `'20'`      | Sets the size of the button.&#xA;<br />&#xA;`small`, `medium`, and `big` are deprecated. Use `10`, `20`, instead.                                                                                                                                                           |
 | `tone`           | `union`<br/>Possible values:<br/>`'urgent' , 'primary' , 'critical'` |          | `'primary'` | Indicates the color scheme of the button.                                                                                                                                                                                                                                   |
 
 ## Signatures

diff --git a/packages/components/buttons/primary-button/src/primary-button.story.js b/packages/components/buttons/primary-button/src/primary-button.story.js
@@ -24,7 +24,7 @@ storiesOf('Components|Buttons', module)
         <PrimaryButton
           type={select('type', ['submit', 'reset', 'button'], 'button')}
           tone={select('tone', ['urgent', 'primary', 'critical'], 'primary')}
-          size={select('size', ['medium', 'big'], 'big')}
+          size={select('size', ['10', '20'], '20')}
           {...(selectedIcon
             ? { iconLeft: createElement(icons[selectedIcon]) }
             : {})}

diff --git a/packages/components/buttons/primary-button/src/primary-button.styles.ts b/packages/components/buttons/primary-button/src/primary-button.styles.ts
@@ -6,15 +6,16 @@ import type { TPrimaryButtonProps } from './primary-button';
 const getSizeStyles = (size: TPrimaryButtonProps['size']) => {
   switch (size) {
     // rendering the same style for now to not introduce a breaking change
+    case '10':
     case 'small':
     case 'medium':
       return css`
-        height: ${designTokens.heightForButtonAsMedium};
+        height: ${designTokens.heightForButtonAs30};
       `;
-
+    case '20':
     case 'big':
       return css`
-        height: ${designTokens.heightForButtonAsBig};
+        height: ${designTokens.heightForButtonAs40};
       `;
 
     default: