fix icon sizes

gear-tech · Jan 17, 2025 · d08132e · d08132e
1 parent e0317a0
commit d08132e
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 35 deletions.
diff --git a/utils/vara-ui/src/components/alert/alert.module.scss b/utils/vara-ui/src/components/alert/alert.module.scss
@@ -37,14 +37,7 @@
 }
 
 .button {
-  @include lightDark(color, #000, #fff);
-
   margin-left: auto;
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
 }
 
 .body {

diff --git a/utils/vara-ui/src/components/alert/alert.tsx b/utils/vara-ui/src/components/alert/alert.tsx
@@ -49,7 +49,9 @@ function Alert({ alert, close }: Props) {
         <SVG className={styles.icon} />
         <h2 className={styles.title}>{title || type}</h2>
 
-        {isClosed && <Button icon={CrossSVG} color="transparent" className={styles.button} onClick={close} />}
+        {isClosed && (
+          <Button icon={CrossSVG} color="transparent" size="medium" className={styles.button} onClick={close} />
+        )}
       </header>
 
       <div className={styles.body}>{content}</div>

diff --git a/utils/vara-ui/src/components/button/button.module.scss b/utils/vara-ui/src/components/button/button.module.scss
@@ -15,7 +15,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .button {
@@ -26,7 +26,7 @@
 
   font-size: var(--font-size, 16px);
   font-weight: 600;
-  line-height: 1;
+  line-height: var(--icon-size);
   color: var(--color, #000);
 
   background-color: var(--background-color, transparent);
@@ -67,8 +67,8 @@
 }
 
 .icon {
-  width: 1em;
-  height: 1em;
+  width: var(--icon-size);
+  height: var(--icon-size);
 
   &,
   * {
@@ -191,7 +191,7 @@
 }
 
 .transparent {
-  --spinner-size: 16px;
+  --padding: 0 !important; // overriding size classes
 
   @include darkMode() {
     --color: #fff;
@@ -203,52 +203,57 @@
   }
 
   &:not(.loading):disabled {
-    --background-color: transparent;
+    @include lightDark(--background-color, transparent, transparent);
   }
 }
 
 .x-small {
   --padding: 8px 16px;
   --spinner-size: 20px;
+  --icon-size: 16px;
 
   &.noText {
     --padding: 8px;
   }
 }
 
 .small {
-  --padding: 12px 24px;
+  --padding: 10px 24px;
   --spinner-size: 20px;
+  --icon-size: 20px;
 
   &.noText {
-    --padding: 12px;
+    --padding: 10px;
   }
 }
 
 .medium {
-  --padding: 14px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 20px;
 
   &.noText {
-    --padding: 14px;
+    --padding: 12px;
   }
 }
 
 .default {
-  --padding: 16px 24px;
+  --padding: 12px 24px;
   --spinner-size: 24px;
+  --icon-size: 24px;
 
   &.noText {
-    --padding: 16px;
+    --padding: 12px;
   }
 }
 
 .x-large {
-  --padding: 17px 28px;
+  --padding: 14px 28px;
   --spinner-size: 24px;
   --font-size: 18px;
+  --icon-size: 24px;
 
   &.noText {
-    --padding: 17px;
+    --padding: 14px;
   }
 }
diff --git a/utils/vara-ui/src/components/button/button.stories.tsx b/utils/vara-ui/src/components/button/button.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<Type> = {
   title: 'Button',
   component: Button,
   args: {
-    children: 'Click me!',
+    text: 'Click me!',
     color: 'primary',
     size: 'default',
     disabled: false,
@@ -25,11 +25,11 @@ const meta: Meta<Type> = {
     noWrap: { control: 'boolean' },
     size: {
       options: ['x-small', 'small', 'medium', 'default', 'x-large'],
-      control: { type: 'select' },
+      control: { type: 'radio' },
     },
     color: {
       options: ['primary', 'plain', 'contrast', 'grey', 'border', 'transparent', 'danger'],
-      control: { type: 'select' },
+      control: { type: 'radio' },
     },
   },
 };
@@ -41,10 +41,13 @@ const Transparent: Story = { args: { color: 'transparent' } };
 const Contrast: Story = { args: { color: 'contrast' } };
 const Blend: Story = { args: { color: 'plain' } };
 const Danger: Story = { args: { color: 'danger' } };
-const NoText: Story = { args: { color: 'primary', children: undefined, icon: CrossSVG } };
-const WithChildrenAndIcons: Story = {
+const Icon: Story = { args: { color: 'primary', text: undefined, icon: CrossSVG } };
+const IconAndText: Story = { args: { color: 'primary', icon: CrossSVG } };
+
+const Children: Story = {
   args: {
     color: 'primary',
+    text: undefined,
     children: (
       <>
         <CrossSVG />
@@ -56,4 +59,4 @@ const WithChildrenAndIcons: Story = {
 };
 
 export default meta;
-export { Default, Border, Grey, Transparent, Contrast, Blend, Danger, NoText, WithChildrenAndIcons };
+export { Default, Border, Grey, Transparent, Contrast, Blend, Danger, Icon, IconAndText, Children };
diff --git a/utils/vara-ui/src/components/button/button.tsx b/utils/vara-ui/src/components/button/button.tsx
@@ -53,7 +53,7 @@ const Button = forwardRef<HTMLButtonElement, Props>((props, ref) => {
       className={cx(
         styles.button,
         styles[color],
-        color !== 'transparent' && styles[size],
+        styles[size],
         isLoading && styles.loading,
         !text && !children && styles.noText,
         block && styles.block,

diff --git a/utils/vara-ui/src/components/modal/modal.module.scss b/utils/vara-ui/src/components/modal/modal.module.scss
@@ -145,11 +145,6 @@
   }
 }
 
-.button svg {
-  width: 20px;
-  height: 20px;
-}
-
 .body,
 .footer {
   @include lightDark(color, #000, rgba(246, 246, 246, 0.8));

diff --git a/utils/vara-ui/src/components/modal/modal.tsx b/utils/vara-ui/src/components/modal/modal.tsx
@@ -70,7 +70,7 @@ const Modal = ({ heading, close, children, className, headerAddon, footer, maxWi
             {headerAddon}
           </div>
 
-          <Button icon={CrossSVG} color="transparent" onClick={close} className={styles.button} />
+          <Button icon={CrossSVG} color="transparent" size="medium" onClick={close} />
         </header>
 
         {children && (