fix: styling for icon button and field label (#1761)

strapi · Jul 25, 2024 · 60dd5ee · 60dd5ee
1 parent 6972656
commit 60dd5ee
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/.changeset/quick-pans-occur.md b/.changeset/quick-pans-occur.md
@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: icon button default size updated to small
diff --git a/docs/stories/04-components/IconButton.mdx b/docs/stories/04-components/IconButton.mdx
@@ -45,9 +45,9 @@ variants available. However, `tertiary` is considered the default.
 
 <Canvas of={IconButtonStories.Disabled} />
 
-### Small Size
+### Medium Size
 
-<Canvas of={IconButtonStories.SizeSmall} />
+<Canvas of={IconButtonStories.SizeMedium} />
 
 ### Large Size
 

diff --git a/docs/stories/04-components/IconButton.stories.tsx b/docs/stories/04-components/IconButton.stories.tsx
@@ -27,7 +27,6 @@ const meta: Meta<IconButtonArgs> = {
     disabled: false,
     label: 'More actions',
     onClick: fn(),
-    size: 'M',
     variant: 'tertiary',
   },
   argTypes: {
@@ -94,22 +93,22 @@ export const Disabled = {
   name: 'disabled',
 } satisfies Story;
 
-export const SizeSmall = {
+export const SizeMedium = {
   args: {
-    size: 'S',
+    size: 'M',
   },
   parameters: {
     docs: {
       source: {
         code: outdent`
-          <IconButton size="S" label="More actions">
+          <IconButton size="M" label="More actions">
             <More />
           </IconButton>
         `,
       },
     },
   },
-  name: 'size small',
+  name: 'size medium',
 } satisfies Story;
 
 export const SizeLarge = {

diff --git a/packages/design-system/src/components/Field/Field.tsx b/packages/design-system/src/components/Field/Field.tsx
@@ -90,6 +90,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ children, action
       id={`${id}-label`}
       htmlFor={id}
       tag="label"
+      ellipsis
     >
       {children}
       {required && (

diff --git a/packages/design-system/src/components/IconButton/IconButton.tsx b/packages/design-system/src/components/IconButton/IconButton.tsx
@@ -33,7 +33,7 @@ const IconButton = forwardRef(
       children,
       disabled = false,
       onClick,
-      size = 'M',
+      size = 'S',
       variant = 'tertiary',
       withTooltip = true,
       ...restProps
@@ -81,8 +81,8 @@ const IconButtonWrapper = styled<FlexComponent<'button'>>(Flex)<IconButtonWrappe
     switch (props.$size) {
       case 'S': {
         return css`
-          padding-block: 0.6rem;
-          padding-inline: 0.6rem;
+          padding-block: 0.7rem;
+          padding-inline: 0.7rem;
         `;
       }
       case 'M': {