From d6f6fb3561eb04c34f1a6b43531f4c717140618d Mon Sep 17 00:00:00 2001 From: Alan B Smith Date: Fri, 3 May 2024 11:36:34 -0600 Subject: [PATCH] chore: Update CountBadge to use system color tokens (#2709) Resolves: #2708 [category:Components] Release Note: We moved the `default` variant styles into the base styles. This makes the CSS classes a little nicer to use. --- modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx | 18 ++++++++++++- modules/react/badge/lib/CountBadge.tsx | 27 ++++++++----------- .../react/badge/stories/examples/Basic.tsx | 3 +++ .../badge/stories/examples/CustomLimit.tsx | 4 +++ .../stories/examples/NotificationBadge.tsx | 4 +++ 5 files changed, 39 insertions(+), 17 deletions(-) diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx index b5d8788927..251a70cb1f 100644 --- a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx @@ -231,7 +231,9 @@ instead. **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2700) -As part of the refactor, we've removed the following exports that were primarily used to style the component: +As part of the refactor, we've removed the following exports that were primarily used to style the +component: + - `useStatusIndicatorModel` - `useStatusIndicator` - `statusIndicatorColors` @@ -507,6 +509,19 @@ our new The component API has not been changed, and it should behave identically as it did in previous versions. +We also removed the `default` variant and consolidated those styles into the badge's base styles. +This will not be a breaking change for most users. However, if you have a `CountBadge` with an +explicit `default` variant, you'll see a TypeScript error. To resolve this, simply remove the +variant prop. + +```tsx +// Before (v10) + + +// After (v11) + +``` + ### Form Field (Preview) **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472) @@ -767,6 +782,7 @@ our The component now supports the `cs` prop, but otherwise the API has not been changed. > #### Visual Breaking Change +> > Opacity applied to the whole container has been removed for transparent variant and replace by > translucent color. By this change opacity has been changed from `0.85` to `0.84`, so there is > possibility of the small visual change. diff --git a/modules/react/badge/lib/CountBadge.tsx b/modules/react/badge/lib/CountBadge.tsx index 38a47af8f1..6765427eab 100644 --- a/modules/react/badge/lib/CountBadge.tsx +++ b/modules/react/badge/lib/CountBadge.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {createComponent} from '@workday/canvas-kit-react/common'; import {handleCsProp, CSProps, createStencil, px2rem, keyframes} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; +import {system} from '@workday/canvas-tokens-web'; const grow = keyframes({ from: { @@ -28,17 +28,18 @@ export interface CountBadgeProps extends CSProps { limit?: number; /** * Sets the variant of the Count Badge - * - * @default 'default' */ - variant?: 'default' | 'inverse'; + variant?: 'inverse'; } +// .cnvs-count-badge const countBadgeStencil = createStencil({ base: { alignItems: 'center', animation: `${grow} 0.2s ease`, + background: system.color.static.red.default, borderRadius: system.shape.round, + color: system.color.text.inverse, display: 'inline-flex', fontFamily: system.fontFamily.default, fontSize: system.fontSize.subtext.medium, @@ -48,18 +49,16 @@ const countBadgeStencil = createStencil({ lineHeight: px2rem(20), minWidth: px2rem(20), padding: `0 ${px2rem(6.5)}`, + textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`, }, modifiers: { variant: { - default: { - background: base.cinnamon500, - color: base.frenchVanilla100, - textShadow: `0 0 ${px2rem(1)} rgba(0,0,0, 0.35)`, - }, + // .cnvs-count-badge--variant-inverse inverse: { - background: base.frenchVanilla100, + background: system.color.bg.default, boxShadow: `0 ${px2rem(1)} ${px2rem(2)} rgba(0,0,0, 0.25)`, - color: base.blueberry400, + color: system.color.text.primary.default, + textShadow: 'none', }, }, }, @@ -70,11 +69,7 @@ const countBadgeStencil = createStencil({ */ export const CountBadge = createComponent('span')({ displayName: 'NewCountBadge', - Component: ( - {count = 0, limit = 1000, variant = 'default', ...elemProps}: CountBadgeProps, - ref, - Element - ) => { + Component: ({count = 0, limit = 1000, variant, ...elemProps}: CountBadgeProps, ref, Element) => { const formattedCount = count < limit ? `${count}` : `${limit - 1}+`; return ( diff --git a/modules/react/badge/stories/examples/Basic.tsx b/modules/react/badge/stories/examples/Basic.tsx index 59d63f552a..3f010cb2fb 100644 --- a/modules/react/badge/stories/examples/Basic.tsx +++ b/modules/react/badge/stories/examples/Basic.tsx @@ -4,16 +4,19 @@ import {createStyles} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; const containerStyles = createStyles({ + boxSizing: 'border-box', display: 'flex', flexDirection: 'column', }); const defaultBackground = createStyles({ + boxSizing: 'border-box', backgroundColor: base.frenchVanilla100, padding: system.space.x4, }); const inverseBackground = createStyles({ + boxSizing: 'border-box', backgroundColor: base.blueberry400, padding: system.space.x4, }); diff --git a/modules/react/badge/stories/examples/CustomLimit.tsx b/modules/react/badge/stories/examples/CustomLimit.tsx index a16fc6e032..2af0d29021 100644 --- a/modules/react/badge/stories/examples/CustomLimit.tsx +++ b/modules/react/badge/stories/examples/CustomLimit.tsx @@ -6,12 +6,14 @@ import {createStyles, cssVar} from '@workday/canvas-kit-styling'; import {base, system} from '@workday/canvas-tokens-web'; const columnStyles = createStyles({ + boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: system.space.x4, }); const controls = createStyles({ + boxSizing: 'border-box', borderBottom: `solid 1px ${cssVar(base.soap400)}`, display: 'flex', gap: system.space.x1, @@ -19,11 +21,13 @@ const controls = createStyles({ }); const defaultBackground = createStyles({ + boxSizing: 'border-box', backgroundColor: base.frenchVanilla100, padding: system.space.x4, }); const inverseBackground = createStyles({ + boxSizing: 'border-box', backgroundColor: base.blueberry400, padding: system.space.x4, }); diff --git a/modules/react/badge/stories/examples/NotificationBadge.tsx b/modules/react/badge/stories/examples/NotificationBadge.tsx index f1f158c5c0..6a6cda7ad8 100644 --- a/modules/react/badge/stories/examples/NotificationBadge.tsx +++ b/modules/react/badge/stories/examples/NotificationBadge.tsx @@ -11,12 +11,14 @@ function negate(value: string, fallback?: string) { } const container = createStyles({ + boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: system.space.x4, }); const controls = createStyles({ + boxSizing: 'border-box', borderBottom: `solid 1px ${cssVar(base.soap400)}`, display: 'flex', gap: system.space.x1, @@ -24,10 +26,12 @@ const controls = createStyles({ }); const notificationContainerStyles = createStyles({ + boxSizing: 'border-box', position: 'relative', }); const countBadgeStyles = createStyles({ + boxSizing: 'border-box', position: 'absolute', top: negate(system.space.x4), insetInlineEnd: negate(system.space.x1),