Update textColor on button for over and active states only if provide…

…d a custom color (#367) chore(baseline): update lost-pixel baselines (#368)
vimeo · Sep 29, 2023 · ed83363 · ed83363
1 parent f20362f
commit ed83363
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/lost-pixel/baseline/components-button-examples--growth-cta.png b/lost-pixel/baseline/components-button-examples--growth-cta.png
diff --git a/src/components/Button/Button.story.tsx b/src/components/Button/Button.story.tsx
@@ -15,6 +15,7 @@ export default {
     href: { control: { disable: true } },
     icon: { control: { disable: true } },
     target: { control: { disable: true } },
+    color: { control: 'color', type: 'color' },
     children: {
       control: {
         type: 'text',

diff --git a/src/components/Button/Button.style.ts b/src/components/Button/Button.style.ts
@@ -252,8 +252,12 @@ function buttonVariants({
   const borderColor = color;
 
   const contrastText = textColor || a11yColor(color);
-  const contrastTextHover = textColor || a11yColor(hoverColor);
-  const contrastTextActive = textColor || a11yColor(activeColor);
+  const contrastTextHover = customColor
+    ? readableColor(hoverColor)
+    : a11yColor(hoverColor);
+  const contrastTextActive = customColor
+    ? readableColor(activeColor)
+    : a11yColor(activeColor);
 
   switch (variant) {
     case 'outline':

diff --git a/src/components/Button/examples/Growth.story.tsx b/src/components/Button/examples/Growth.story.tsx
@@ -19,7 +19,7 @@ export function GrowthCTA({ args }) {
       <Button
         size="xl"
         icon={<Pencil />}
-        color={{ color: '#E0FF2B', textColor: 'blue' }}
+        color={{ color: '#E0FF2B' }}
       >
         Create videos
       </Button>