Merge pull request #24156 from storybookjs/norbert/improve-svg-recolo…

…ration UI: Remove override path fill when path has a fill attribute (cherry picked from commit 72400c6)
storybookjs · Sep 15, 2023 · 0801147 · 0801147
1 parent e6f3982
commit 0801147
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 12 deletions.
diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx
@@ -167,7 +167,7 @@ const ButtonWrapper = styled.button<{
           boxShadow: `${color} 0 0 0 1px inset`,
           color,
 
-          'svg path': {
+          'svg path:not([fill])': {
             fill: color,
           },
 
@@ -205,7 +205,7 @@ const ButtonWrapper = styled.button<{
           boxShadow: `${color} 0 0 0 1px inset`,
           color,
 
-          'svg path': {
+          'svg path:not([fill])': {
             fill: color,
           },
 

diff --git a/code/ui/components/src/components/tooltip/ListItem.stories.tsx b/code/ui/components/src/components/tooltip/ListItem.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import ListItem from './ListItem';
 import { Icons } from '../icon/icon';
 
@@ -51,6 +51,93 @@ export const ActiveIcon = {
     right: <Icons icon="eye" />,
   },
 };
+export const ActiveIconLeft = {
+  args: {
+    title: 'Active icon',
+    active: true,
+    left: <Icons icon="eye" />,
+  },
+};
+export const ActiveIconLeftColored = {
+  args: {
+    title: 'Active icon',
+    active: true,
+    left: (
+      <Fragment>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-label="Chrome"
+        >
+          <path
+            d="M5.06982 9.68493L7.99484 4.63927L14.5786 4.62406C14.5252 4.52043 14.4696 4.41742 14.4109 4.31532C12.372 0.768556 7.84405 -0.453864 4.29726 1.58495C3.24614 2.1892 2.39921 3.01211 1.78076 3.96327L5.06982 9.68493Z"
+            fill="#DB4437"
+          />
+          <path
+            d="M10.9276 9.68457L5.09539 9.6743L1.79036 3.98022C1.72727 4.07822 1.66591 4.17795 1.60682 4.27985C-0.445348 7.81892 0.759985 12.3515 4.29905 14.4037C5.34791 15.0118 6.48403 15.3338 7.617 15.3939L10.9276 9.68457Z"
+            fill="#0F9D58"
+          />
+          <path
+            d="M7.98649 4.61194L10.9032 9.66241L7.63525 15.3778C7.75167 15.3833 7.86871 15.3863 7.98649 15.3863C12.0775 15.3863 15.3939 12.0699 15.3939 7.97893C15.3939 6.76648 15.1025 5.62211 14.5861 4.61194L7.98649 4.61194Z"
+            fill="#FFCD40"
+          />
+          <path
+            d="M8.01367 4.6366V6.40005L14.613 4.6366H8.01367Z"
+            fill="url(#paint0_radial_466_21161)"
+          />
+          <path
+            d="M1.78198 4.00098L6.60102 8.8192L5.09764 9.687L1.78198 4.00098Z"
+            fill="url(#paint1_radial_466_21161)"
+          />
+          <path
+            d="M7.6626 15.4017L9.42689 8.81921L10.9303 9.68702L7.6626 15.4017Z"
+            fill="url(#paint2_radial_466_21161)"
+          />
+          <ellipse cx="8.01347" cy="8.00358" rx="3.36699" ry="3.36699" fill="#F1F1F1" />
+          <ellipse cx="8.01367" cy="8.00354" rx="2.69361" ry="2.6936" fill="#4285F4" />
+          <defs>
+            <radialGradient
+              id="paint0_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(7.69229 4.63226) scale(7.07721 1.89116)"
+            >
+              <stop stopColor="#3E2723" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#3E2723" stopOpacity="0.01" />
+            </radialGradient>
+            <radialGradient
+              id="paint1_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(1.77445 4.00677) scale(6.56938 7.75127)"
+            >
+              <stop stopColor="#3E2723" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#3E2723" stopOpacity="0.01" />
+            </radialGradient>
+            <radialGradient
+              id="paint2_radial_466_21161"
+              cx="0"
+              cy="0"
+              r="1"
+              gradientUnits="userSpaceOnUse"
+              gradientTransform="translate(8.00025 8.01489) scale(7.39644 14.8995)"
+            >
+              <stop stopColor="#263238" stopOpacity="0.2" />
+              <stop offset="1" stopColor="#263238" stopOpacity="0.01" />
+            </radialGradient>
+          </defs>
+        </svg>
+      </Fragment>
+    ),
+  },
+};
 
 export const WPositions = {
   args: {

diff --git a/code/ui/components/src/components/tooltip/ListItem.tsx b/code/ui/components/src/components/tooltip/ListItem.tsx
@@ -107,7 +107,7 @@ const Left = styled.span<LeftProps>(
           '& svg': {
             opacity: 1,
           },
-          '& svg path': {
+          '& svg path:not([fill])': {
             fill: theme.color.secondary,
           },
         }

diff --git a/code/ui/components/src/components/typography/link/link.tsx b/code/ui/components/src/components/typography/link/link.tsx
@@ -73,13 +73,13 @@ const A = styled.a<LinkStylesProps>(
     '&:hover, &:focus': {
       cursor: 'pointer',
       color: darken(0.07, theme.color.secondary),
-      'svg path': {
+      'svg path:not([fill])': {
         fill: darken(0.07, theme.color.secondary),
       },
     },
     '&:active': {
       color: darken(0.1, theme.color.secondary),
-      'svg path': {
+      'svg path:not([fill])': {
         fill: darken(0.1, theme.color.secondary),
       },
     },
@@ -110,20 +110,20 @@ const A = styled.a<LinkStylesProps>(
     return colors
       ? {
           color: colors[0],
-          'svg path': {
+          'svg path:not([fill])': {
             fill: colors[0],
           },
 
           '&:hover': {
             color: colors[1],
-            'svg path': {
+            'svg path:not([fill])': {
               fill: colors[1],
             },
           },
 
           '&:active': {
             color: colors[2],
-            'svg path': {
+            'svg path:not([fill])': {
               fill: colors[2],
             },
           },
@@ -145,20 +145,20 @@ const A = styled.a<LinkStylesProps>(
     inverse
       ? {
           color: theme.color.lightest,
-          'svg path': {
+          ':not([fill])': {
             fill: theme.color.lightest,
           },
 
           '&:hover': {
             color: theme.color.lighter,
-            'svg path': {
+            'svg path:not([fill])': {
               fill: theme.color.lighter,
             },
           },
 
           '&:active': {
             color: theme.color.light,
-            'svg path': {
+            'svg path:not([fill])': {
               fill: theme.color.light,
             },
           },