chore!: remove size from inputs (#1718)

strapi · May 8, 2024 · 981d6d0 · 981d6d0
1 parent dd79369
commit 981d6d0
Show file tree

Hide file tree

Showing 40 changed files with 161 additions and 414 deletions.
diff --git a/.changeset/modern-garlics-drop.md b/.changeset/modern-garlics-drop.md
@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: remove size from inputs
+
+`size` was used to give our inputs a fixed size, this would not have worked with different writing directions or be very responsive. Instead, we use logical padding values.
diff --git a/.changeset/ninety-spoons-grab.md b/.changeset/ninety-spoons-grab.md
@@ -0,0 +1,7 @@
+---
+'@strapi/design-system': major
+---
+
+chore!: all XXSize & XXVariant types are now singular
+
+This is consistent across the codebase.
diff --git a/docs/stories/Inputs/DatePicker.mdx b/docs/stories/Inputs/DatePicker.mdx
@@ -57,12 +57,6 @@ If you want to enforce a locale, you can pass it as a prop. This will override t
 
 <Canvas of={DatePickerStories.Locale} />
 
-### Input size
-
-As with most inputs, we offer the ability to change the `size`.
-
-<Canvas of={DatePickerStories.Sizing} />
-
 ### DatePicker field
 
 DatePicker wrapped with [`Field`](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Field)

diff --git a/docs/stories/Inputs/DatePicker.stories.tsx b/docs/stories/Inputs/DatePicker.stories.tsx
@@ -127,29 +127,6 @@ export const Locale = {
   },
 } satisfies Story;
 
-export const Sizing = {
-  args: {
-    ...Locale.args,
-    size: 'S',
-  },
-
-  name: 'sizing',
-  parameters: {
-    docs: {
-      source: {
-        code: outdent`
-        <DatePicker
-          value={value}
-          onChange={handleChange}
-          onClear={handleClear}
-          size='S'
-        />
-        `,
-      },
-    },
-  },
-} satisfies Story;
-
 export const WithField = {
   render: ({ error, hint, label, ...props }) => {
     return (

diff --git a/docs/stories/Inputs/NumberInput.mdx b/docs/stories/Inputs/NumberInput.mdx
@@ -43,12 +43,6 @@ import { NumberInput } from '@strapi/design-system';
 
 <Canvas of={NumberInputStories.Locale} />
 
-### Size S
-
-`NumberInput` can be displayed in a smaller size.
-
-<Canvas of={NumberInputStories.SizeS} />
-
 ### Disabled
 
 <Canvas of={NumberInputStories.Disabled} />

diff --git a/docs/stories/Inputs/NumberInput.stories.tsx b/docs/stories/Inputs/NumberInput.stories.tsx
@@ -93,34 +93,10 @@ export const Locale = {
   name: 'locale',
 } satisfies Story;
 
-export const SizeS = {
-  ...Template,
-  args: {
-    ...Locale.args,
-    size: 'S',
-  },
-
-  parameters: {
-    docs: {
-      source: {
-        code: outdent`
-        <NumberInput
-          placeholder="Price(Eur)"
-          name="price"
-          value={3.14159265359}
-          locale="fr"
-          size="S"
-        />`,
-      },
-    },
-  },
-  name: 'size S',
-} satisfies Story;
-
 export const Disabled = {
   ...Template,
   args: {
-    ...SizeS.args,
+    ...Base.args,
     disabled: true,
   },
 
@@ -133,7 +109,6 @@ export const Disabled = {
           name="price"
           value={3.14159265359}
           locale="fr"
-          size="S"
           disabled
         />`,
       },

diff --git a/docs/stories/Inputs/TextInput.mdx b/docs/stories/Inputs/TextInput.mdx
@@ -37,12 +37,6 @@ import { TextInput } from '@strapi/design-system';
 
 <Canvas of={TextInputStories.Base} />
 
-### Size S
-
-`TextInput` can be displayed with a smaller size.
-
-<Canvas of={TextInputStories.SizeS} />
-
 ### Passwords
 
 Password TextInputs are specific. They offer the possibility to have unreadable content. By clicking on the eye icon on

diff --git a/docs/stories/Inputs/TextInput.stories.tsx b/docs/stories/Inputs/TextInput.stories.tsx
@@ -36,20 +36,10 @@ export const Base = {
   name: 'base',
 } satisfies Story;
 
-export const SizeS = {
-  ...Template,
-  args: {
-    ...Base.args,
-    size: 'S',
-  },
-
-  name: 'size S',
-} satisfies Story;
-
 export const Password = {
   ...Template,
   args: {
-    ...SizeS.args,
+    ...Base.args,
     value: 'admin1234',
     type: 'password',
   },

diff --git a/docs/stories/Inputs/TimePicker.mdx b/docs/stories/Inputs/TimePicker.mdx
@@ -46,12 +46,6 @@ The pre-determined list of options for the Time Picker can be modified by changi
 
 <Canvas of={TimePickerStories.Steps} />
 
-### Input size
-
-As with most inputs, we offer the ability to change the `size`.
-
-<Canvas of={TimePickerStories.Sizing} />
-
 ### TimePicker field
 
 TimePicker wrapped with [`Field`](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Field)

diff --git a/docs/stories/Inputs/TimePicker.stories.tsx b/docs/stories/Inputs/TimePicker.stories.tsx
@@ -78,31 +78,6 @@ export const Steps = {
   name: 'steps',
 } satisfies Story;
 
-export const Sizing = {
-  ...Template,
-  args: {
-    ...Steps.args,
-    size: 'S',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: outdent`
-        <TimePicker
-          label="Lunchtime"
-          value={value}
-          onChange={handleChange}
-          onClear={handleClear}
-          size='S'
-        />
-        `,
-      },
-    },
-  },
-
-  name: 'sizing',
-} satisfies Story;
-
 export const WithField = {
   render: ({ error, hint, label, ...props }) => {
     return (

diff --git a/docs/stories/Inputs/Toggle.mdx b/docs/stories/Inputs/Toggle.mdx
@@ -36,12 +36,6 @@ import { Toggle } from '@strapi/design-system';
 
 <Canvas of={ToggleStories.Base} />
 
-### Size S
-
-Toggle input with `small` size.
-
-<Canvas of={ToggleStories.SizeS} />
-
 ### ToggleInput field
 
 ToggleInput wrapped with [`Field`](https://github.com/strapi/design-system/tree/main/packages/design-system/src/Field)

diff --git a/docs/stories/Inputs/Toggle.stories.tsx b/docs/stories/Inputs/Toggle.stories.tsx
@@ -47,30 +47,6 @@ export const Base = {
   name: 'base',
 } satisfies Story;
 
-export const SizeS = {
-  ...Template,
-  args: {
-    ...Base.args,
-    size: 'S',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: outdent`
-        <ToggleInput
-          onLabel="True"
-          offLabel="False"
-          checked={checked}
-          onChange={handleChange}
-          size='S'
-        />
-        `,
-      },
-    },
-  },
-  name: 'size S',
-} satisfies Story;
-
 export const WithField = {
   render: ({ hint, error, label, ...props }) => {
     const [, updateArgs] = useArgs();

diff --git a/docs/stories/Searchbar.stories.tsx b/docs/stories/Searchbar.stories.tsx
@@ -48,7 +48,6 @@ export const SizeS = {
           onChange={(e) => setValue(e.target.value)}
           clearLabel="Clearing the plugin search"
           placeholder="e.g: strapi-plugin-abcd"
-          size="S"
         >
           Searching for a plugin
         </Searchbar>

diff --git a/packages/design-system/src/components/Badge/Badge.tsx b/packages/design-system/src/components/Badge/Badge.tsx
@@ -1,26 +1,24 @@
-import { styled, type DefaultTheme } from 'styled-components';
+import { css, styled, type DefaultTheme } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 import { Typography } from '../Typography';
 
-const Base = styled<FlexComponent>(Flex)<{ $size: BadgeSize }>`
-  border-radius: ${({ theme, $size }) => ($size === 'S' ? '2px' : theme.borderRadius)};
-  height: ${({ $size, theme }) => theme.sizes.badge[$size]};
-`;
+type BadgeSize = 'S' | 'M';
 
-export type BadgeSize = 'S' | 'M';
-
-export interface BadgeProps extends FlexProps {
+interface BadgeProps extends FlexProps {
   /**
    * If `true`, it changes the `backgroundColor` to `primary200` and the `textColor` to `primary600`
    */
   active?: boolean;
   backgroundColor?: keyof DefaultTheme['colors'];
+  /**
+   * @default 'M'
+   */
   size?: BadgeSize;
   textColor?: keyof DefaultTheme['colors'];
 }
 
-export const Badge = ({
+const Badge = ({
   active = false,
   size = 'M',
   textColor = 'neutral600',
@@ -43,9 +41,29 @@ export const Badge = ({
       $size={size}
       {...props}
     >
-      <Typography variant="sigma" textColor={active ? 'primary600' : textColor}>
+      <Typography variant="sigma" textColor={active ? 'primary600' : textColor} lineHeight="1rem">
         {children}
       </Typography>
     </Base>
   );
 };
+
+const Base = styled<FlexComponent>(Flex)<{ $size: BadgeSize }>`
+  border-radius: ${({ theme, $size }) => ($size === 'S' ? '2px' : theme.borderRadius)};
+  ${({ $size, theme }) => {
+    if ($size === 'S') {
+      return css`
+        padding-block: 0.3rem;
+        padding-inline ${theme.spaces[1]}
+      `;
+    }
+
+    return css`
+      padding-block: 0.7rem;
+      padding-inline ${theme.spaces[2]}
+    `;
+  }};
+`;
+
+export { Badge };
+export type { BadgeProps, BadgeSize };
diff --git a/packages/design-system/src/components/BaseCheckbox/BaseCheckbox.test.tsx b/packages/design-system/src/components/BaseCheckbox/BaseCheckbox.test.tsx
@@ -0,0 +1,11 @@
+import { screen, render } from '@test/utils';
+
+import { BaseCheckbox } from './BaseCheckbox';
+
+describe('BaseCheckbox', () => {
+  it('should render a checkbox element and use the aria-label', () => {
+    render(<BaseCheckbox aria-label="test" />);
+    expect(screen.getByLabelText('test')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'test' })).toBeInTheDocument();
+  });
+});
diff --git a/packages/design-system/src/components/BaseCheckbox/BaseCheckbox.tsx b/packages/design-system/src/components/BaseCheckbox/BaseCheckbox.tsx
@@ -7,9 +7,6 @@ import { Box } from '../Box';
 
 import checkmarkIconDisabled from './assets/checkmark-black.svg';
 import checkmarkIcon from './assets/checkmark.svg';
-import { getCheckboxSize } from './utils';
-
-type BaseCheckboxSize = 'S' | 'M';
 
 interface BaseCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'> {
   /**
@@ -25,17 +22,13 @@ interface BaseCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
    * `(value: Bool) => {}`
    */
   onValueChange?: (isChecked: boolean) => void;
-  /**
-   * Set the size of the checkbox
-   */
-  size?: BaseCheckboxSize;
   value?: boolean;
 }
 
 type CheckboxElement = HTMLInputElement;
 
 const BaseCheckbox = React.forwardRef<CheckboxElement, BaseCheckboxProps>(
-  ({ indeterminate = false, size = 'M', name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
+  ({ indeterminate = false, name, value = false, onValueChange, ...inputProps }, forwardedRef) => {
     const checkboxRef = React.useRef<HTMLInputElement>(null!);
 
     const composedRefs = useComposedRefs(checkboxRef, forwardedRef);
@@ -57,7 +50,6 @@ const BaseCheckbox = React.forwardRef<CheckboxElement, BaseCheckboxProps>(
     return (
       <Box>
         <CheckboxInput
-          $size={size}
           checked={value}
           onChange={handleValueChange}
           type="checkbox"
@@ -72,13 +64,12 @@ const BaseCheckbox = React.forwardRef<CheckboxElement, BaseCheckboxProps>(
 
 BaseCheckbox.displayName = 'BaseCheckbox';
 
-const CheckboxInput = styled.input<{ $size: BaseCheckboxSize }>`
-  height: ${getCheckboxSize};
-  min-width: ${getCheckboxSize};
+const CheckboxInput = styled.input`
+  min-width: 1.8rem;
+  height: 1.8rem;
   margin: 0;
   border-radius: ${({ theme }) => theme.borderRadius};
   border: 1px solid ${({ theme }) => theme.colors.neutral300};
-  -webkit-appearance: none;
   background-color: ${({ theme }) => theme.colors.neutral0};
   cursor: pointer;
 
@@ -136,4 +127,4 @@ const CheckboxInput = styled.input<{ $size: BaseCheckboxSize }>`
 `;
 
 export { BaseCheckbox };
-export type { BaseCheckboxProps, BaseCheckboxSize, CheckboxElement };
+export type { BaseCheckboxProps, CheckboxElement };
diff --git a/packages/design-system/src/components/BaseCheckbox/utils.ts b/packages/design-system/src/components/BaseCheckbox/utils.ts