Merge pull request #378 from belltalion/fix-button-css

Author: belltalion

.changeset/mean-comics-kick.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix button css

libs/extractor/src/snapshots/extractor__tests__optimize_multi_css_value_1.snap.new

@@ -0,0 +1,37 @@
+---
+source: libs/extractor/src/lib.rs
+assertion_line: 7082
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr##\"import { jsx as o, jsxs as s } from \"react/jsx-runtime\";\nimport { Button as y, Box as p, Center as F,css as f } from \"@devup-ui/react\";\nimport { clsx as E } from \"clsx\";\nconst g = f({\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\"\n});\n\"##,\nExtractOption\n{\n    package: \"@devup-ui/react\".to_string(), css_dir:\n    \"@devup-ui/react\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "overflow",
+                value: "hidden",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "text-overflow",
+                value: "ellipsis",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "white-space",
+                value: "nowrap",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport { jsx as o, jsxs as s } from \"react/jsx-runtime\";\nimport { clsx as E } from \"clsx\";\nconst g = \"a-a a-b a-c\";\n",
+}

packages/components/src/components/Button/index.tsx

@@ -5,7 +5,6 @@ import {
   css,
   type DevupThemeTypography,
 } from '@devup-ui/react'
-import { clsx } from 'clsx'
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: 'primary' | 'default'
@@ -24,12 +23,6 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   ellipsis?: boolean
 }
 
-const buttonTextEllipsis = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-})
-
 export function Button({
   variant = 'default',
   type = 'button',
@@ -247,7 +240,15 @@ export function Button({
           </Center>
         )}
         <Box
-          className={clsx(ellipsis && buttonTextEllipsis)}
+          className={
+            ellipsis
+              ? css({
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                })
+              : undefined
+          }
           lineHeight="1.2"
           minH="1.2em"
           transform={!!icon && 'translateX(8px)'}