fix: colors of <Icon> not rendering correctly when it has no inline c…

…olor prop set
supabase · Jan 6, 2021 · fb6dde4 · fb6dde4
1 parent 7e5574d
commit fb6dde4
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -121,7 +121,7 @@
   @apply outline-none ring;
 }
 
-.sbui-btn-primary:hover svg {
+/* .sbui-btn-primary:hover svg {
   @apply text-gray-500;
 }
 .sbui-btn-secondary:hover svg {
@@ -135,7 +135,7 @@
 }
 .sbui-btn-ghost:hover svg {
   @apply bg-brand-300;
-}
+} */
 
 .sbui-btn--with-icon {
   /* @apply pl-10; */

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -15,7 +15,7 @@ export const withBlock = (args) => <Button {...args}>Button text</Button>
 export const withOnlyIcon = (args) => <Button {...args}/>
 export const withOnlyLoading = (args) => <Button {...args}/>
 
-const icon = <Icon className={''} type={"Package"}/>
+const icon = <Icon type={"Package"}/>
 
 withIcon.args = {
   type: 'primary',

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -7,7 +7,6 @@ interface Props {
   type?: string,
   color?: string,
   strokeWidth?: number,
-  stroke?:string,
 }
 
 function Icon({
@@ -16,15 +15,14 @@ function Icon({
   type,
   color,
   strokeWidth,
-  stroke,
   ...props
 }: Props) {
   // @ts-ignore
   const FeatherIcon = Icons[type]
 
   return (
     <FeatherIcon
-      stroke={stroke ? stroke : color ? color : 'currentColor'}
+      color={color ? color : 'currentColor'}
       className={`${className}`}
       strokeWidth={strokeWidth}
       size={size}

diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
@@ -25,7 +25,7 @@ export const textArea = (args :any) => <Input.TextArea {...args} />
 
 export const textAreaWithLimit = (args :any) => <Input.TextArea {...args} />
 
-const icon : any = <Icon stroke={'#666666'} className={''} type={"Package"}/>
+const icon : any = <Icon type={"Package"}/>
 
 Default.args = {
   placeholder: 'Type text here ...',

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -65,7 +65,7 @@ export const withDescription = (args: any) => (
 )
 
 const data = ['England', 'Wales', 'Scotland', 'Ireland']
-const icon = <Icon stroke={'#666666'} type={'Book'} />
+const icon = <Icon  type={'Book'} />
 
 Default.args = {
   disabled: false,

diff --git a/src/lib/Layout/InputIconContainer.css b/src/lib/Layout/InputIconContainer.css
@@ -1,3 +1,6 @@
 .sbui-input-icon-container {
   @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
+  /* set the default color of the icon */
+  @apply text-gray-600;
+  @apply dark:text-white;
 }