fix(Button): re-introduce active style as long as tailwind pseudo-cla…

…ss does not work
uzh-bf · Oct 2, 2023 · cfc7235 · cfc7235
1 parent 3981dd9
commit cfc7235
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/Button.stories.tsx b/src/Button.stories.tsx
@@ -25,10 +25,22 @@ export const Default = () => (
 )
 
 export const Active = () => (
-  <Button active>
-    <Button.Icon>{ExampleIcon}</Button.Icon>
-    <Button.Label>Test-Text</Button.Label>
-  </Button>
+  <div className="flex flex-col gap-4">
+    <Button active className={{ root: 'w-max' }}>
+      <Button.Icon>{ExampleIcon}</Button.Icon>
+      <Button.Label>Test-Text</Button.Label>
+    </Button>
+    <Button
+      active
+      className={{
+        root: 'w-max',
+        active: 'bg-red-300 hover:bg-red-400 hover:text-black',
+      }}
+    >
+      <Button.Icon>{ExampleIcon}</Button.Icon>
+      <Button.Label>Custom Active Style</Button.Label>
+    </Button>
+  </div>
 )
 
 export const Disabled = () => (

diff --git a/src/Button.tsx b/src/Button.tsx
@@ -14,6 +14,7 @@ export interface ButtonProps {
   className?: {
     override?: string
     root?: string
+    active?: string
   }
   data?: {
     cy?: string
@@ -63,7 +64,9 @@ export function Button({
         : 'cursor-default'
       : !basic &&
           `hover:bg-primary-20 hover:border-primary-40 hover:text-primary hover:fill-primary`,
-    !basic && active && 'bg-primary-20 border-primary-40',
+    !basic &&
+      active &&
+      twMerge('bg-primary-20 border-primary-40', className?.active),
     className?.root
   )