chore: Merge master into prerelease/minor [skip release]

Workday · Nov 30, 2023 · 50d9920 · 50d9920
2 parents 7292930 + ef23997
commit 50d9920
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 12 deletions.
diff --git a/cypress/integration/Button.spec.ts b/cypress/integration/Button.spec.ts
@@ -15,9 +15,7 @@ describe('Button', () => {
     });
 
     it('should render the correct text', () => {
-      cy.findAllByRole('button', {name: 'Primary'})
-        .first()
-        .should('contain', 'Primary');
+      cy.findAllByRole('button', {name: 'Primary'}).first().should('contain', 'Primary');
     });
   });
 
@@ -31,7 +29,7 @@ describe('Button', () => {
     });
 
     it('should render the correct text', () => {
-      cy.findByRole('button', {name: 'Click Me'}).should('contain', 'Click Me');
+      cy.findAllByRole('button', {name: 'Delete'}).first().should('contain', 'Delete');
     });
   });
 });
diff --git a/modules/react/button/lib/DeleteButton.tsx b/modules/react/button/lib/DeleteButton.tsx
@@ -19,26 +19,31 @@ const deleteStyles = createStyles({
   [buttonVars.default.border]: 'transparent',
   [buttonVars.default.borderRadius]: cssVar(system.shape.round, '62.5rem'),
   [buttonVars.default.label]: cssVar(brand.error.accent, '#ffffff'),
+  [buttonVars.default.icon]: cssVar(brand.error.accent, '#ffffff'),
   '&:hover, &.hover': {
     [buttonVars.hover.background]: cssVar(brand.error.dark, '#a31b12'),
     [buttonVars.hover.border]: 'transparent',
     [buttonVars.hover.label]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.hover.icon]: cssVar(brand.error.accent, '#ffffff'),
   },
   '&:focus-visible, &.focus': {
     [buttonVars.focus.background]: cssVar(brand.error.base, '#de2e21'),
     [buttonVars.focus.border]: 'transparent',
     [buttonVars.focus.label]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.focus.icon]: cssVar(brand.error.accent, '#ffffff'),
     [buttonVars.focus.boxShadowInner]: cssVar(base.frenchVanilla100, '#ffffff'),
     [buttonVars.focus.boxShadowOuter]: cssVar(brand.common.focusOutline, '#0875e1'),
   },
   '&:active, &.active': {
     [buttonVars.active.background]: cssVar(brand.error.darkest, 'rgba(128,22,14,1)'),
     [buttonVars.active.border]: 'transparent',
     [buttonVars.active.label]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.active.icon]: cssVar(brand.error.accent, '#ffffff'),
   },
   '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
     [buttonVars.disabled.background]: cssVar(brand.error.light, '#fcc9c5'),
     [buttonVars.disabled.label]: cssVar(brand.error.accent, '#ffffff'),
+    [buttonVars.disabled.icon]: cssVar(brand.error.accent, '#ffffff'),
     opacity: 1,
   },
 });

diff --git a/modules/react/button/stories/button/examples/Delete.tsx b/modules/react/button/stories/button/examples/Delete.tsx
@@ -1,5 +1,18 @@
 import React from 'react';
 
 import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {trashIcon} from '@workday/canvas-system-icons-web';
 
-export const Delete = () => <DeleteButton>Click Me</DeleteButton>;
+export const Delete = () => (
+  <Flex gap="s" padding="s">
+    <DeleteButton>Delete</DeleteButton>
+    <DeleteButton icon={trashIcon} iconPosition="start">
+      Delete
+    </DeleteButton>
+    <DeleteButton icon={trashIcon} iconPosition="end">
+      Delete
+    </DeleteButton>
+    <DeleteButton icon={trashIcon} />
+  </Flex>
+);
diff --git a/modules/react/button/stories/visual-testing/stories_DeleteButton.tsx b/modules/react/button/stories/visual-testing/stories_DeleteButton.tsx
@@ -7,6 +7,7 @@ import {
 } from '@workday/canvas-kit-react/testing';
 import {withSnapshotsEnabled, customColorTheme} from '../../../../../utils/storybook';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
+import {trashIcon} from '@workday/canvas-system-icons-web';
 import {Container, stateTableColumnProps} from './utils';
 
 export default withSnapshotsEnabled({
@@ -17,13 +18,27 @@ export default withSnapshotsEnabled({
 export const DeleteButtonStates = (props: {theme?: PartialEmotionCanvasTheme}) => (
   <StaticStates theme={props.theme}>
     <ComponentStatesTable
-      rowProps={permutateProps({
-        size: [
-          {value: 'small', label: 'Small'},
-          {value: 'medium', label: 'Medium'},
-          {value: 'large', label: 'Large'},
-        ],
-      })}
+      rowProps={permutateProps(
+        {
+          size: [
+            {value: 'extraSmall', label: 'Extra Small'},
+            {value: 'small', label: 'Small'},
+            {value: 'medium', label: 'Medium'},
+            {value: 'large', label: 'Large'},
+          ],
+          icon: [
+            {value: undefined, label: ''},
+            {value: trashIcon, label: ''},
+          ],
+          iconPosition: [
+            {value: undefined, label: ''},
+            {value: 'start', label: '& Left Icon'},
+            {value: 'end', label: '& Right Icon'},
+          ],
+        },
+        // Filter out permutations where `iconPosition` is provided and not `icon`, and vice versa
+        props => (props.iconPosition && props.icon) || (!props.icon && !props.iconPosition)
+      )}
       columnProps={stateTableColumnProps}
     >
       {props => (