chore: Button CustomStyles Examples Cleanup (#2918)

Fixes: #2917 Updating the CustomStyles Button example to cleanup the style overrides. [category:Documentation] Co-authored-by: @mannycarrera4 <[email protected]>
Workday · Oct 23, 2024 · 12c9d8c · 12c9d8c
1 parent e4a1d12
commit 12c9d8c
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git 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
@@ -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>