fix: button height variations

Author: abelflopes

packages/components/base/src/button/index.tsx

@@ -27,7 +27,7 @@ export interface ButtonProps<T extends HTMLTag = "button">
   /** Controls the button's size, affecting padding and overall dimensions.
    * @default "m"
    */
-  size?: "s" | "m" | "l" | "xs";
+  size?: "xs" | "s" | "m" | "l" | "xl";
   /** Icon element to be displayed within the button.
    * Can be any valid React node (SVG, icon component, etc).
    */

packages/components/base/src/button/styles/_variables.scss

@@ -105,25 +105,25 @@ $button-skins: (
   ),
 );
 $button-sizes: (
+  xl: (
+    height: theme.get-spacing(7),
+    padding-x: theme.get-spacing(3),
+  ),
   l: (
-    padding-y: theme.get-spacing(2),
+    height: theme.get-spacing(5),
     padding-x: theme.get-spacing(3),
-    padding-icon: theme.get-spacing(1.5),
   ),
   m: (
     // align with input height
-    padding-y: theme.get-spacing(0.563),
+    height: theme.get-spacing(4),
     padding-x: theme.get-spacing(2),
-    padding-icon: theme.get-spacing(1),
   ),
   s: (
-    padding-y: theme.get-spacing(0.25),
+    height: theme.get-spacing(3),
     padding-x: theme.get-spacing(1.25),
-    padding-icon: theme.get-spacing(0.66),
   ),
   xs: (
-    padding-y: theme.get-spacing(0.063),
+    height: theme.get-spacing(2.5),
     padding-x: theme.get-spacing(1),
-    padding-icon: theme.get-spacing(0.5),
   ),
 );

packages/components/base/src/button/styles/index.module.scss

@@ -15,7 +15,8 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  padding: scss-utils.get-css-var(button, padding-y) scss-utils.get-css-var(button, padding-x);
+  min-height: scss-utils.get-css-var(button, height);
+  padding: 0 scss-utils.get-css-var(button, padding-x);
   border-width: 1px;
   border-style: solid;
   border-color: scss-utils.get-css-var(button, border-color);
@@ -75,28 +76,17 @@
       padding-x,
       scss-utils.map-get-strict($props, padding-x)
     );
-    @include scss-utils.define-css-var(
-      button,
-      padding-y,
-      scss-utils.map-get-strict($props, padding-y)
-    );
+    @include scss-utils.define-css-var(button, height, scss-utils.map-get-strict($props, height));
 
     &.icon-only {
-      @include scss-utils.define-css-var(
-        button,
-        padding-x,
-        scss-utils.map-get-strict($props, padding-icon)
-      );
-      @include scss-utils.define-css-var(
-        button,
-        padding-y,
-        scss-utils.map-get-strict($props, padding-icon)
-      );
+      @include scss-utils.define-css-var(button, padding-x, 0);
     }
   }
 }
 
 .size-xs {
+  @include text.text-variation(small);
+
   &.icon-only {
     // icon size
     > * {

packages/docs/stories/src/generic-button.stories.tsx

@@ -88,11 +88,25 @@ export const Disabled: Story = {
 export const AllButtonVariations: Story = {
   decorators: [
     (): React.ReactElement =>
-      generateAllVariations<ButtonProps>(Button, {
-        skin: ["primary", "secondary", "negative"],
-        skinVariation: ["default", "bordered", "muted", "ghost"],
-        size: ["l", "m", "s", "xs"],
-        children: [sentenceCase(faker.lorem.words({ min: 1, max: 2 }))],
-      }),
+      generateAllVariations<ButtonProps>(
+        Button,
+        {
+          children: [sentenceCase(faker.lorem.word()), undefined],
+          icon: [
+            undefined,
+            <Icon>
+              <IconClose />
+            </Icon>,
+          ],
+          skin: ["primary", "secondary", "negative"],
+          skinVariation: ["default", "bordered", "muted", "ghost"],
+          size: ["xl", "l", "m", "s", "xs"],
+        },
+        {
+          colSize: 2,
+          align: "centered",
+          filter: (props) => !!props.children || !!props.icon,
+        },
+      ),
   ],
 };

packages/docs/stories/src/utils/generate-all-variations.tsx

@@ -13,6 +13,7 @@ export const generateAllVariations = <T extends object>(
   render: (props: T) => React.ReactNode,
   data: PropsMap<T>,
   options?: {
+    filter?: (props: T) => boolean;
     align?: GridProps["align"];
     colSize?: GridColumnProps["size"];
   },
@@ -34,19 +35,21 @@ export const generateAllVariations = <T extends object>(
       <Divider />
 
       <Grid align={options?.align ?? "end"}>
-        {generateDescribedCombinations<T>(data).map(({ combination, description }) => (
-          <Grid.Column key={description} size={options?.colSize ?? 3} title={description}>
-            {render(combination)}
+        {generateDescribedCombinations<T>(data)
+          .filter((i) => options?.filter?.(i.combination) ?? true)
+          .map(({ combination, description }) => (
+            <Grid.Column key={description} size={options?.colSize ?? 3} title={description}>
+              {render(combination)}
 
-            {showInfo ? (
-              <>
-                <br />
-                <br />
-                <Snippet>{description}</Snippet>
-              </>
-            ) : null}
-          </Grid.Column>
-        ))}
+              {showInfo ? (
+                <>
+                  <br />
+                  <br />
+                  <Snippet>{description}</Snippet>
+                </>
+              ) : null}
+            </Grid.Column>
+          ))}
       </Grid>
     </>
   );