min width based on sizes

appsmithorg · Nov 12, 2024 · 9d2bac7 · 9d2bac7
1 parent eb2004c
commit 9d2bac7
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/app/client/packages/design-system/ads/src/Button/Button.styles.tsx b/app/client/packages/design-system/ads/src/Button/Button.styles.tsx
@@ -29,6 +29,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
         ? "var(--ads-v2-spaces-2)"
         : "var(--ads-v2-spaces-2) var(--ads-v2-spaces-3)"};
       --button-gap: var(--ads-v2-spaces-2);
+      --button-min-width: 60px;
     `,
     md: css`
       --button-font-weight: 600;
@@ -37,6 +38,7 @@ const getSizes = (size: ButtonSizes, isIconButton?: boolean) => {
         ? "var(--ads-v2-spaces-3)"
         : "var(--ads-v2-spaces-3) var(--ads-v2-spaces-4)"};
       --button-gap: var(--ads-v2-spaces-3);
+      --button-min-width: 80px;
     `,
   };
 
@@ -175,6 +177,8 @@ export const ButtonContent = styled.div<{
   box-sizing: border-box;
   padding: var(--button-padding);
   border-radius: inherit;
+  min-width: ${({ isIconButton }) =>
+    isIconButton ? "unset" : "var(--button-min-width)"};
 
   & > .${ButtonContentChildrenClassName} {
     display: flex;
@@ -229,7 +233,8 @@ export const StyledButton = styled.button<{
     padding: 0;
     box-sizing: border-box;
     overflow: hidden;
-    min-width: ${({ isIconButton }) => (isIconButton ? "unset" : "60px")};
+    min-width: ${({ isIconButton }) =>
+      isIconButton ? "unset" : "fit-content"};
 
     /* button disabled style */
     &[data-disabled="true"] {