From 12c9d8cfc8c89b69653aaf9d661c07363d81def3 Mon Sep 17 00:00:00 2001
From: Josh <44883293+josh-bagwell@users.noreply.github.com>
Date: Wed, 23 Oct 2024 11:40:44 -0600
Subject: [PATCH] chore: Button CustomStyles Examples Cleanup (#2918)

Fixes: #2917

Updating the CustomStyles Button example to cleanup the style overrides.

[category:Documentation]

Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com>
---
 .../button/stories/button/Button.stories.tsx  |  4 ++
 .../stories/button/examples/CustomStyles.tsx  | 48 +++++++++++++++----
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/modules/react/button/stories/button/Button.stories.tsx b/modules/react/button/stories/button/Button.stories.tsx
index 099069ee69..a863207de8 100644
--- a/modules/react/button/stories/button/Button.stories.tsx
+++ b/modules/react/button/stories/button/Button.stories.tsx
@@ -8,6 +8,7 @@ import {SecondaryInverse as SecondaryInverseExample} from './examples/SecondaryI
 import {Tertiary as TertiaryExample} from './examples/Tertiary';
 import {TertiaryInverse as TertiaryInverseExample} from './examples/TertiaryInverse';
 import {Delete as DeleteExample} from './examples/Delete';
+import {CustomStyles as CustomStylesExample} from './examples/CustomStyles';
 
 export default {
   title: 'Components/Buttons',
@@ -40,3 +41,6 @@ export const TertiaryInverse = {
 export const Delete = {
   render: DeleteExample,
 };
+export const CustomStyles = {
+  render: CustomStylesExample,
+};
diff --git a/modules/react/button/stories/button/examples/CustomStyles.tsx b/modules/react/button/stories/button/examples/CustomStyles.tsx
index 9c50ce1a83..a566a9115d 100644
--- a/modules/react/button/stories/button/examples/CustomStyles.tsx
+++ b/modules/react/button/stories/button/examples/CustomStyles.tsx
@@ -8,6 +8,11 @@ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
 import {createStencil, createStyles, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
+const customContainer = createStyles({
+  gap: system.space.x4,
+  maxWidth: 'max-content',
+});
+
 const myButtonStencil = createStencil({
   base: {
     [buttonStencil.vars.background]: system.color.static.green.soft,
@@ -19,11 +24,13 @@ const myButtonStencil = createStencil({
       [buttonStencil.vars.background]: system.color.static.green.strong,
       [buttonStencil.vars.boxShadowInner]: system.color.static.green.soft,
       [buttonStencil.vars.boxShadowOuter]: system.color.static.green.strong,
+      [systemIconStencil.vars.color]: system.color.icon.inverse,
     },
     '&:hover': {
       [buttonStencil.vars.background]: system.color.static.green.default,
       border: `${px2rem(3)} dotted ${system.color.static.green.strong}`,
       [systemIconStencil.vars.color]: system.color.static.green.strong,
+      [systemIconStencil.vars.color]: system.color.icon.inverse,
     },
     '&:active': {
       [buttonStencil.vars.background]: system.color.static.green.strong,
@@ -44,6 +51,29 @@ const MyCustomButton = createComponent('button')({
 const myCustomStyles = createStyles({
   padding: system.space.x4,
   textTransform: 'uppercase',
+  [buttonStencil.vars.background]: system.color.static.gray.soft,
+  [buttonStencil.vars.label]: system.color.static.gray.strong,
+  [systemIconStencil.vars.color]: system.color.static.gray.strong,
+  [buttonStencil.vars.borderRadius]: system.shape.x2,
+  [buttonStencil.vars.border]: system.color.static.gray.stronger,
+  '&:focus-visible': {
+    [buttonStencil.vars.background]: system.color.static.gray.strong,
+    [buttonStencil.vars.boxShadowInner]: system.color.static.gray.soft,
+    [buttonStencil.vars.boxShadowOuter]: system.color.static.gray.strong,
+    [systemIconStencil.vars.color]: system.color.icon.inverse,
+  },
+  '&:hover': {
+    [buttonStencil.vars.background]: system.color.static.gray.default,
+    [buttonStencil.vars.border]: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,
+    [systemIconStencil.vars.color]: system.color.static.gray.strong,
+    [systemIconStencil.vars.color]: system.color.icon.inverse,
+    border: `${px2rem(3)} dotted ${system.color.static.gray.strong}`,
+  },
+  '&:active': {
+    [buttonStencil.vars.background]: system.color.static.gray.strong,
+    [buttonStencil.vars.label]: system.color.fg.inverse,
+    [systemIconStencil.vars.color]: system.color.fg.inverse,
+  },
 });
 
 const customColors = {
@@ -52,25 +82,27 @@ const customColors = {
     icon: system.color.static.orange.strong,
     label: system.color.static.orange.strong,
   },
+  focus: {
+    background: system.color.static.orange.strong,
+    boxShadowInner: system.color.static.orange.soft,
+    boxShadowOuter: system.color.static.orange.strong,
+  },
   hover: {
     background: system.color.static.orange.default,
-    icon: system.color.static.orange.strong,
+    icon: system.color.icon.inverse,
   },
   active: {
     background: system.color.static.orange.strong,
   },
-  focus: {
-    background: system.color.static.orange.strong,
-    boxShadowInner: system.color.static.orange.soft,
-    boxShadowOuter: system.color.static.orange.strong,
-  },
   disabled: {},
 };
 
 export const CustomStyles = () => (
-  <Grid cs={{gap: px2rem(4), gridTemplateColumns: 'repeat(3, 1fr)', alignItems: 'center'}}>
+  <Grid cs={customContainer}>
     <MyCustomButton icon={plusIcon}>Styling Override Via Stencil Variables</MyCustomButton>
-    <PrimaryButton cs={myCustomStyles}>Style Override Via Create Styles</PrimaryButton>
+    <MyCustomButton icon={plusIcon} cs={myCustomStyles}>
+      Style Override Via Create Styles
+    </MyCustomButton>
     <PrimaryButton icon={plusIcon} colors={customColors}>
       Styling Override Via Colors Prop
     </PrimaryButton>