Updated Button Styles (#940)

minio · Aug 22, 2024 · 0676aa0 · 0676aa0
1 parent 11c868c
commit 0676aa0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -34,6 +34,24 @@ const Template: Story<ButtonProps> = (args) => (
   <StoryThemeProvider>
     <GlobalStyles />
     <Button {...args} onClick={() => alert("You clicked me!")} />
+    <br />
+    <Button id={"random_btn1"} variant={args.variant}>
+      Content
+    </Button>{" "}
+    -- CHILDREN BUTTON
+    <Button id={"random_btn2"} label={"Content"} variant={args.variant} /> --
+    LABEL BUTTON
+    <Button id={"random_btn1"} icon={<TestIcon />} variant={args.variant}>
+      Content
+    </Button>{" "}
+    -- CHILDREN BUTTON (W/Icon)
+    <Button
+      id={"random_btn2"}
+      label={"Content"}
+      icon={<TestIcon />}
+      variant={args.variant}
+    />{" "}
+    -- LABEL BUTTON (W/Icon)
   </StoryThemeProvider>
 );
 
@@ -66,7 +84,7 @@ Secondary.args = {
   variant: "destructive",
 };
 export const DestructiveBare = Template.bind({});
-Secondary.args = {
+DestructiveBare.args = {
   disabled: false,
   label: "Destructive Bare",
   variant: "destructive-bare",

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -69,7 +69,22 @@ const CustomButton = styled.button<
 
     const withLabel = compact ? "4px 12px" : "8px 16px";
 
-    let paddingValue = !label || label === "" ? notLabel : withLabel;
+    let paddingValue =
+      (!label || label === "") && parentChildren === null
+        ? notLabel
+        : withLabel;
+
+    if (variant.endsWith("-ghost") && !icon) {
+      paddingValue = compact ? "4px 0" : "8px 0";
+    }
+
+    console.log(
+      !label || label === "",
+      parentChildren !== null,
+      label,
+      parentChildren,
+      paddingValue,
+    );
 
     if (inButtonGroup) {
       paddingValue =
@@ -81,8 +96,9 @@ const CustomButton = styled.button<
       cursor: "pointer",
       height: compact ? 28 : 36,
       fontFamily: "'Geist', sans-serif",
-      fontWeight: compact ? "normal" : "600",
+      fontWeight: "normal",
       fontSize: 14,
+      lineHeight: "20px",
       display: "flex",
       flexDirection: "row",
       alignItems: "center",

diff --git a/src/global/themes.ts b/src/global/themes.ts
@@ -286,7 +286,7 @@ export const lightTheme: ThemeDefinitionProps = {
         background: `linear-gradient(180deg, ${themeColors["Color/Base/Royal/5"].lightMode} 0%, ${themeColors["Color/Base/Royal/6"].lightMode} 100%)`,
         iconColor:
           themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
-        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px -2px 3px 0px #0B2CA2 inset`,
+        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset`,
       },
       disabled: {
         border: themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode,
@@ -302,7 +302,7 @@ export const lightTheme: ThemeDefinitionProps = {
         background: `linear-gradient(180deg, ${themeColors["Color/Base/Royal/6"].lightMode} 0%, ${themeColors["Color/Base/Royal/7"].lightMode} 100%)`,
         iconColor:
           themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
-        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px -2px 3px 0px #0B2CA2 inset`,
+        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset`,
       },
       pressed: {
         border: themeColors["Color/Brand/Primary/colorPrimaryBorder"].lightMode,
@@ -358,7 +358,7 @@ export const lightTheme: ThemeDefinitionProps = {
         background: `linear-gradient(180deg, ${themeColors["Color/Base/Sunset/5"].lightMode} 0%, ${themeColors["Color/Base/Sunset/6"].lightMode} 100%)`,
         iconColor:
           themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
-        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px -2px 3px 0px #981701 inset`,
+        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset`,
       },
       disabled: {
         border: themeColors["Color/Neutral/Bg/colorBgDisabled"].lightMode,
@@ -374,7 +374,7 @@ export const lightTheme: ThemeDefinitionProps = {
         background: `linear-gradient(180deg, ${themeColors["Color/Base/Sunset/6"].lightMode} 0%, ${themeColors["Color/Base/Sunset/7"].lightMode} 100%)`,
         iconColor:
           themeColors["Color/Neutral/Text/colorTextLightSolid"].lightMode,
-        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px -2px 3px 0px #981701 inset`,
+        shadow: `0px 1px 0px 0px rgba(255, 255, 255, 0.25) inset`,
       },
       pressed: {
         border: themeColors["Color/Brand/Error/colorPrimaryBorder"].lightMode,