chore(button)!: Refactor button to use system tokens (#2666)

Fixes: #2402 - Refactor Button styles to use `system` tokens and remove `base` tokens. - Refactor Button styles to utilize stencils [category:Components] Release Note: Updated Buttons to use new `system` tokens. ### BREAKING CHANGES **Visual Breaking Change** - There may be a small visual change to `SecondaryButton` when the `border` for the `focus` state was updated from `soap400` to `transparent`.
Workday · Apr 17, 2024 · 54f26ac · 54f26ac
1 parent 6ccdc31
commit 54f26ac
Show file tree

Hide file tree

Showing 11 changed files with 865 additions and 630 deletions.
diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx
@@ -20,8 +20,8 @@ any questions.
   - [Text Area (Preview)](#text-area-preview)
   - [Text Input (Preview)](#text-input-preview)
 - [Component Style Updates](#component-style-updates)
-- [Component Token Updates](#component-token-updates)
 - [Component Updates](#component-updates)
+  - [Buttons](#buttons)
   - [Card](#card)
   - [Checkbox](#checkbox)
   - [Combobox](#combobox)
@@ -243,14 +243,6 @@ See below:
     </Table.Row>
   </Table.Head>
   <Table.Body>
-    <Table.Row>
-      <Table.Cell>Table (Header)</Table.Cell>
-      <Table.Cell />
-      <Table.Cell />
-      <Table.Cell>borderColor</Table.Cell>
-      <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
-      <Table.Cell backgroundColor="soap500">soap500</Table.Cell>
-    </Table.Row>
     <Table.Row>
       <Table.Cell>Checkbox</Table.Cell>
       <Table.Cell />
@@ -270,6 +262,22 @@ See below:
       <Table.Cell color="frenchVanilla100" backgroundColor="licorice100">
         licorice100
       </Table.Cell>
+    </Table.Row>
+		<Table.Row>
+      <Table.Cell>DeleteButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>backgroundColor</Table.Cell>
+      <Table.Cell backgroundColor={cssVar(brand.error.light)}>error.light</Table.Cell>
+      <Table.Cell backgroundColor="rgba(222,46,33,0.4)">error.base</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>DeleteButton</Table.Cell>
+      <Table.Cell />
+      <Table.Cell>disabled</Table.Cell>
+      <Table.Cell>opacity</Table.Cell>
+      <Table.Cell>1</Table.Cell>
+      <Table.Cell>0.4</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>Radio</Table.Cell>
@@ -285,7 +293,19 @@ See below:
       <Table.Cell>SecondaryButton</Table.Cell>
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
-      <Table.Cell>color</Table.Cell>
+      <Table.Cell>border</Table.Cell>
+      <Table.Cell color="blackPepper400" backgroundColor="soap400">
+        soap400
+      </Table.Cell>
+      <Table.Cell color="blackPepper400" backgroundColor="transparent">
+        transparent
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>SecondaryButton</Table.Cell>
+      <Table.Cell>Inverse</Table.Cell>
+      <Table.Cell>focus</Table.Cell>
+      <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
       <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
         blackPepper500
       </Table.Cell>
@@ -297,7 +317,7 @@ See below:
       <Table.Cell>SecondaryButton</Table.Cell>
       <Table.Cell>Inverse</Table.Cell>
       <Table.Cell>focus</Table.Cell>
-      <Table.Cell>boxShdaow (Inner Color)</Table.Cell>
+      <Table.Cell>color</Table.Cell>
       <Table.Cell color="frenchVanilla100" backgroundColor="blackPepper500">
         blackPepper500
       </Table.Cell>
@@ -317,6 +337,14 @@ See below:
         blackPepper400
       </Table.Cell>
     </Table.Row>
+    <Table.Row>
+      <Table.Cell>Table (Header)</Table.Cell>
+      <Table.Cell />
+      <Table.Cell />
+      <Table.Cell>borderColor</Table.Cell>
+      <Table.Cell backgroundColor="soap400">soap400</Table.Cell>
+      <Table.Cell backgroundColor="soap500">soap500</Table.Cell>
+    </Table.Row>
     <Table.Row>
       <Table.Cell>TertiaryButton</Table.Cell>
       <Table.Cell />
@@ -378,23 +406,7 @@ See below:
       </Table.Cell>
     </Table.Row>
     <Table.Row>
-      <Table.Cell>DeleteButton</Table.Cell>
-      <Table.Cell />
-      <Table.Cell>disabled</Table.Cell>
-      <Table.Cell>backgroundColor</Table.Cell>
-      <Table.Cell backgroundColor={cssVar(brand.error.light)}>error.light</Table.Cell>
-      <Table.Cell backgroundColor="rgba(222,46,33,0.4)">error.base</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>DeleteButton</Table.Cell>
-      <Table.Cell />
-      <Table.Cell>disabled</Table.Cell>
-      <Table.Cell>opacity</Table.Cell>
-      <Table.Cell>1</Table.Cell>
-      <Table.Cell>0.4</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>TextInput</Table.Cell>
+      <Table.Cell>TextArea</Table.Cell>
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
@@ -404,7 +416,7 @@ See below:
       </Table.Cell>
     </Table.Row>
     <Table.Row>
-      <Table.Cell>TextArea</Table.Cell>
+      <Table.Cell>TextInput</Table.Cell>
       <Table.Cell />
       <Table.Cell>disabled</Table.Cell>
       <Table.Cell>borderColor</Table.Cell>
@@ -416,13 +428,19 @@ See below:
   </Table.Body>
 </Table>
 
-### Component Token Updates
+## Component Updates
 
-The following components have been updated to use our [new system tokens](insert link).
+### Buttons
 
-- Text
+**PR:** [#2666](https://github.com/Workday/canvas-kit/pull/2666)
 
-## Component Updates
+`PrimaryButton`, `SecondaryButton`, `TertiaryButton` and `DeleteButton` have been refactored to use our
+[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api)
+and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). The
+components now support the `cs` prop, but otherwise the API has not changed.
+
+> #### Visual Breaking Change
+> The `border` color for `SecondaryButton` on the `focus` state is now `transparent` and may cause a small visual difference in visual tests.
 
 ### Card
 
@@ -811,3 +829,5 @@ experimental code and is analagous to code in alpha.
 Breaking changes can be deployed to Labs at any time without triggering a major version update and
 may not be subject to the same rigor in communcation and migration strategies reserved for breaking
 changes in [Preview](#preview) and [Main](#main).
+import { opacity } from "@workday/canvas-tokens-web/dist/es6/system"
+
diff --git a/modules/preview-react/pill/lib/Pill.tsx b/modules/preview-react/pill/lib/Pill.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {CSSObject} from '@emotion/react';
 
-import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
+import {BaseButton, buttonColorPropVars} from '@workday/canvas-kit-react/button';
 import {
   createContainer,
   focusRing,
@@ -11,7 +11,7 @@ import {
 } from '@workday/canvas-kit-react/common';
 import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
-import {handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
 
 import {usePillModel} from './usePillModel';
 
@@ -65,50 +65,50 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
         },
       },
     }),
-    [buttonVars.default.background]: colors.soap300,
-    [buttonVars.default.border]: colors.licorice200,
-    [buttonVars.default.label]: colors.blackPepper400,
+    [buttonColorPropVars.default.background]: colors.soap300,
+    [buttonColorPropVars.default.border]: colors.licorice200,
+    [buttonColorPropVars.default.label]: colors.blackPepper400,
     [systemIconStencil.vars.color]: colors.licorice200,
     button: {
       [systemIconStencil.vars.color]: colors.licorice200,
     },
     '&:focus-visible, &.focus': {
-      [buttonVars.focus.background]: colors.soap300,
-      [buttonVars.focus.border]: colors.blueberry400,
-      [buttonVars.focus.label]: colors.blackPepper400,
+      [buttonColorPropVars.focus.background]: colors.soap300,
+      [buttonColorPropVars.focus.border]: colors.blueberry400,
+      [buttonColorPropVars.focus.label]: colors.blackPepper400,
       [systemIconStencil.vars.color]: colors.licorice500,
       button: {
         [systemIconStencil.vars.color]: colors.licorice500,
       },
       'span[data-count="ck-pill-count"]': {
-        borderTop: `1px solid ${colors.blueberry400}`,
-        borderBottom: `1px solid ${colors.blueberry400}`,
-        borderRight: `1px solid ${colors.blueberry400}`,
+        borderTop: `${px2rem(1)} solid ${colors.blueberry400}`,
+        borderBottom: `${px2rem(1)} solid ${colors.blueberry400}`,
+        borderRight: `${px2rem(1)} solid ${colors.blueberry400}`,
       },
     },
     '&:hover, &.hover': {
-      [buttonVars.hover.background]: colors.soap400,
-      [buttonVars.hover.border]: colors.licorice400,
-      [buttonVars.hover.label]: colors.blackPepper400,
+      [buttonColorPropVars.hover.background]: colors.soap400,
+      [buttonColorPropVars.hover.border]: colors.licorice400,
+      [buttonColorPropVars.hover.label]: colors.blackPepper400,
       [systemIconStencil.vars.color]: colors.licorice500,
       button: {
         [systemIconStencil.vars.color]: colors.licorice500,
       },
     },
     '&:active, &.active': {
-      [buttonVars.active.background]: colors.soap500,
-      [buttonVars.active.border]: colors.licorice500,
-      [buttonVars.active.label]: colors.blackPepper400,
+      [buttonColorPropVars.active.background]: colors.soap500,
+      [buttonColorPropVars.active.border]: colors.licorice500,
+      [buttonColorPropVars.active.label]: colors.blackPepper400,
       [systemIconStencil.vars.color]: colors.licorice500,
       button: {
         [systemIconStencil.vars.color]: colors.licorice500,
       },
     },
     '&:disabled, &.disabled': {
-      [buttonVars.disabled.background]: colors.soap100,
-      [buttonVars.disabled.border]: colors.licorice100,
-      [buttonVars.disabled.label]: colors.licorice100,
-      [buttonVars.disabled.opacity]: '1',
+      [buttonColorPropVars.disabled.background]: colors.soap100,
+      [buttonColorPropVars.disabled.border]: colors.licorice100,
+      [buttonColorPropVars.disabled.label]: colors.licorice100,
+      [buttonColorPropVars.disabled.opacity]: '1',
       [systemIconStencil.vars.color]: colors.licorice100,
       button: {
         [systemIconStencil.vars.color]: colors.licorice100,
@@ -132,32 +132,32 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
 );
 
 const StyledNonInteractivePill = styled(StyledBasePill)<StyledType & CSProps>({
-  [buttonVars.default.background]: colors.soap300,
-  [buttonVars.default.border]: colors.licorice200,
-  [buttonVars.default.label]: colors.blackPepper400,
+  [buttonColorPropVars.default.background]: colors.soap300,
+  [buttonColorPropVars.default.border]: colors.licorice200,
+  [buttonColorPropVars.default.label]: colors.blackPepper400,
 
   '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: colors.soap300,
-    [buttonVars.focus.border]: colors.licorice200,
-    [buttonVars.focus.label]: colors.blackPepper400,
+    [buttonColorPropVars.focus.background]: colors.soap300,
+    [buttonColorPropVars.focus.border]: colors.licorice200,
+    [buttonColorPropVars.focus.label]: colors.blackPepper400,
   },
 
   '&:hover, &.hover': {
-    [buttonVars.hover.background]: colors.soap300,
-    [buttonVars.hover.border]: colors.licorice200,
-    [buttonVars.hover.label]: colors.blackPepper400,
+    [buttonColorPropVars.hover.background]: colors.soap300,
+    [buttonColorPropVars.hover.border]: colors.licorice200,
+    [buttonColorPropVars.hover.label]: colors.blackPepper400,
   },
 
   '&:active, &.active': {
-    [buttonVars.active.background]: colors.soap500,
-    [buttonVars.active.border]: colors.licorice500,
-    [buttonVars.active.label]: colors.blackPepper400,
+    [buttonColorPropVars.active.background]: colors.soap500,
+    [buttonColorPropVars.active.border]: colors.licorice500,
+    [buttonColorPropVars.active.label]: colors.blackPepper400,
   },
 
   '&:disabled, &.disabled': {
-    [buttonVars.disabled.background]: colors.soap100,
-    [buttonVars.disabled.label]: colors.licorice100,
-    [buttonVars.disabled.border]: colors.licorice100,
+    [buttonColorPropVars.disabled.background]: colors.soap100,
+    [buttonColorPropVars.disabled.label]: colors.licorice100,
+    [buttonColorPropVars.disabled.border]: colors.licorice100,
   },
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
@@ -172,12 +172,12 @@ const StyledNonInteractivePill = styled(StyledBasePill)<StyledType & CSProps>({
 });
 
 const StyledReadOnlyPill = styled(StyledNonInteractivePill)<StyledType>({
-  [buttonVars.default.background]: 'transparent',
-  [buttonVars.hover.background]: 'transparent',
-  [buttonVars.focus.background]: 'transparent',
-  [buttonVars.active.background]: 'transparent',
-  [buttonVars.disabled.background]: 'transparent',
-  border: `1px solid ${colors.licorice200}`,
+  [buttonColorPropVars.default.background]: 'transparent',
+  [buttonColorPropVars.hover.background]: 'transparent',
+  [buttonColorPropVars.focus.background]: 'transparent',
+  [buttonColorPropVars.active.background]: 'transparent',
+  [buttonColorPropVars.disabled.background]: 'transparent',
+  border: `${px2rem(1)} solid ${colors.licorice200}`,
 });
 
 /**

diff --git a/modules/preview-react/pill/lib/PillIconButton.tsx b/modules/preview-react/pill/lib/PillIconButton.tsx
@@ -7,7 +7,7 @@ import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {BaseButton, buttonVars} from '@workday/canvas-kit-react/button';
+import {BaseButton, buttonColorPropVars} from '@workday/canvas-kit-react/button';
 
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
   /**
@@ -41,32 +41,32 @@ const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
       innerColor: 'transparent',
     }),
   },
-  [buttonVars.default.background]: colors.soap300,
-  [buttonVars.default.border]: 'transparent',
-  [buttonVars.default.label]: colors.blackPepper400,
+  [buttonColorPropVars.default.background]: colors.soap300,
+  [buttonColorPropVars.default.border]: 'transparent',
+  [buttonColorPropVars.default.label]: colors.blackPepper400,
 
   '&:focus-visible, &.focus': {
-    [buttonVars.focus.background]: colors.soap300,
-    [buttonVars.focus.border]: 'transparent',
-    [buttonVars.focus.label]: colors.blackPepper400,
+    [buttonColorPropVars.focus.background]: colors.soap300,
+    [buttonColorPropVars.focus.border]: 'transparent',
+    [buttonColorPropVars.focus.label]: colors.blackPepper400,
   },
 
   '&:hover, &.hover': {
-    [buttonVars.hover.background]: colors.soap300,
-    [buttonVars.hover.border]: 'transparent',
-    [buttonVars.hover.label]: colors.blackPepper400,
+    [buttonColorPropVars.hover.background]: colors.soap300,
+    [buttonColorPropVars.hover.border]: 'transparent',
+    [buttonColorPropVars.hover.label]: colors.blackPepper400,
   },
 
   '&:active, &.active': {
-    [buttonVars.active.background]: colors.soap500,
-    [buttonVars.active.border]: 'transparent',
-    [buttonVars.active.label]: colors.blackPepper400,
+    [buttonColorPropVars.active.background]: colors.soap500,
+    [buttonColorPropVars.active.border]: 'transparent',
+    [buttonColorPropVars.active.label]: colors.blackPepper400,
   },
 
   '&:disabled, &.disabled': {
-    [buttonVars.disabled.background]: colors.soap100,
-    [buttonVars.disabled.label]: colors.licorice100,
-    [buttonVars.disabled.border]: 'transparent',
+    [buttonColorPropVars.disabled.background]: colors.soap100,
+    [buttonColorPropVars.disabled.label]: colors.licorice100,
+    [buttonColorPropVars.disabled.border]: 'transparent',
     [systemIconStencil.vars.color]: colors.licorice100,
   },
 });