fix <Button /> icon only colors (#616)

* f: adds compound variants for missing cases * f: changeset
status-im · Oct 15, 2024 · e9979fd · e9979fd
1 parent f1fa827
commit e9979fd
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/.changeset/famous-news-fry.md b/.changeset/famous-news-fry.md
@@ -0,0 +1,5 @@
+---
+'@status-im/components': patch
+---
+
+updates icon color for missing compound variants
diff --git a/packages/components/src/button/button.stories.tsx b/packages/components/src/button/button.stories.tsx
@@ -1,3 +1,7 @@
+import { Fragment } from 'react'
+
+import { PlaceholderIcon } from '@status-im/icons/20'
+
 import { Button } from './button'
 
 import type { Meta, StoryObj } from '@storybook/react'
@@ -51,7 +55,22 @@ const meta: Meta<
       ).map(variant => (
         <div key={variant} className="flex items-center gap-4">
           {(['40', '32', '24'] as const).map(size => (
-            <Button key={size} {...args} variant={variant} size={size} />
+            <Fragment key={size}>
+              <Button {...args} variant={variant} size={size} />
+              {/* With icon */}
+              <Button
+                {...args}
+                size={size}
+                variant={variant}
+                iconBefore={<PlaceholderIcon />}
+              />
+              <Button
+                aria-label="Button with icon only"
+                size={size}
+                variant={variant}
+                icon={<PlaceholderIcon />}
+              />
+            </Fragment>
           ))}
         </div>
       ))}

diff --git a/packages/components/src/button/button.tsx b/packages/components/src/button/button.tsx
@@ -193,11 +193,41 @@ const iconStyles = cva({
       placement: 'after',
       className: '-mr-0.5',
     },
+    {
+      variant: 'grey',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
     {
       variant: 'outline',
       iconOnly: true,
       className: '!text-neutral-100 dark:!text-white-100',
     },
+    {
+      variant: 'darkGrey',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
+    {
+      variant: 'ghost',
+      iconOnly: true,
+      className: '!text-neutral-100 dark:!text-white-100',
+    },
+    {
+      variant: 'primary',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
+    {
+      variant: 'positive',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
+    {
+      variant: 'danger',
+      iconOnly: true,
+      className: '!text-white-100',
+    },
   ],
 })