Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Button CustomStyles Examples Cleanup #2918

Merged
merged 5 commits into from
Oct 23, 2024
Merged

chore: Button CustomStyles Examples Cleanup #2918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1441082
chore: Updated CustomStyles button example
josh-bagwell Sep 11, 2024
c61de61
Merge branch 'master' into custom-styles-button-update-24-09
mannycarrera4 Oct 21, 2024
6fac4a9
Merge branch 'master' into custom-styles-button-update-24-09
mannycarrera4 Oct 21, 2024
cb07a41
Merge branch 'master' into custom-styles-button-update-24-09
mannycarrera4 Oct 22, 2024
548179b
Update modules/react/button/stories/button/examples/CustomStyles.tsx
mannycarrera4 Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions modules/react/button/stories/button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -40,3 +41,6 @@ export const TertiaryInverse = {
export const Delete = {
render: DeleteExample,
};
export const CustomStyles = {
render: CustomStylesExample,
};
48 changes: 40 additions & 8 deletions modules/react/button/stories/button/examples/CustomStyles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
mannycarrera4 marked this conversation as resolved.
Show resolved Hide resolved
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 = {
Expand All @@ -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>
Expand Down
Loading