diff --git a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx index ef54b99e5e..149a291112 100644 --- a/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/11.0-UPGRADE-GUIDE.mdx @@ -19,6 +19,11 @@ any questions. - [Label Text](#label-text) - [Text Area (Preview)](#text-area-preview) - [Text Input (Preview)](#text-input-preview) +- [Removals](#removals) + - [Status Indicator model](#status-indicator-model) + - [statusIndicatorColors](#statusIndicatorColors) + - [useStatusIndicator](#useStatusIndicator) + - [useStatusIndicatorIcon](#useStatusIndicatorIcon) - [Component Style Updates](#component-style-updates) - [Component Updates](#component-updates) - [Buttons](#buttons) @@ -31,6 +36,7 @@ any questions. - [Loading Dots](#loading-dots) - [Radio (Preview)](#radio-preview) - [Select](#select) + - [Status Indicator (Preview)](#status-indicator-preview) - [Switch](#switch) - [Table (Preview)](#table-preview) - [Text](#text) @@ -219,6 +225,22 @@ instead. --- +## Removals + +### Status Indicator model + +**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: +- `useStatusIndicatorModel` +- `useStatusIndicator` +- `statusIndicatorColors` +- `useStatusIndicatorIcon`. + +Since there was no usage of these by our consumers, there should be no breaking changes. + +--- + ## Component Style Updates These changes are to address discrepancies that were found between Canvas Kit Design Specs and @@ -263,7 +285,7 @@ See below: licorice100 - + DeleteButton disabled @@ -434,13 +456,16 @@ See below: **PR:** [#2666](https://github.com/Workday/canvas-kit/pull/2666) -`PrimaryButton`, `SecondaryButton`, `TertiaryButton` and `DeleteButton` have been refactored to use our +`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. +> +> The `border` color for `SecondaryButton` on the `focus` state is now `transparent` and may cause a +> small visual difference in visual tests. ### Card @@ -729,6 +754,22 @@ identically as it did in previous versions. [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 component now supports the `cs` prop, but otherwise the API has not changed. It should behave +identically as it did in previous versions. + +### Status Indicator (Preview) + +**PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620 + +`StatusIndicator` now uses +[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and +our +[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api). +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. ### Switch @@ -763,22 +804,6 @@ longer extends the `Box` component, however, it still supports Emotion `styled` Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since they extend the `Text` component. These changes do not affect the components API. -### StatusIndicator (Preview) - -**PR:** [#2620] https://github.com/Workday/canvas-kit/pull/2620 - -`StatusIndicator` now uses -[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and -our -[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api). -The component now supports the `cs` prop, but otherwise the API has not changed. It should behave -identically as it did in previous versions. - -- statusIndicatorColors has been deprecated and will be removed in a future version as a part of - implementation of stencils and new tokens -- useStatusIndicatorIcon has been deprecated and will be removed in a future version as a part of - implementation of stencils and new tokens - ## Style Utility Updates ### `createStencil` @@ -828,6 +853,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" - +changes in [Preview](#preview) and [Main](#main). import { opacity } from +"@workday/canvas-tokens-web/dist/es6/system" diff --git a/modules/preview-react/status-indicator/index.ts b/modules/preview-react/status-indicator/index.ts index 3a78a44611..cec6fcf8a0 100644 --- a/modules/preview-react/status-indicator/index.ts +++ b/modules/preview-react/status-indicator/index.ts @@ -1,2 +1 @@ -export * from './lib/StatusIndicator'; -export * from './lib/hooks/useStatusIndicatorModel'; +export {StatusIndicator, StatusIndicatorProps, StatusIndicatorVariant} from './lib/StatusIndicator'; diff --git a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx index d8f55a87f1..5c5e5b1943 100644 --- a/modules/preview-react/status-indicator/lib/StatusIndicator.tsx +++ b/modules/preview-react/status-indicator/lib/StatusIndicator.tsx @@ -1,15 +1,28 @@ import React from 'react'; -import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common'; +import {ExtractProps, createComponent} from '@workday/canvas-kit-react/common'; +import {createStencil, px2rem} from '@workday/canvas-kit-styling'; +import {system} from '@workday/canvas-tokens-web'; import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout'; import {systemIconStencil} from '@workday/canvas-kit-react/icon'; import {StatusIndicatorIcon} from './StatusIndicatorIcon'; import {StatusIndicatorLabel} from './StatusIndicatorLabel'; -import {useStatusIndicatorModel} from './hooks'; -import {createStencil, px2rem} from '@workday/canvas-kit-styling'; -import {base, system} from '@workday/canvas-tokens-web'; + +export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent'; export interface StatusIndicatorProps extends ExtractProps { + /** + * Defines the emphasis of the `StatusIndicator`. + * `high` emphasis will create more contrast between the background and text colors. + * `low` emphasis will create less contrast between the background and text colors. + * @default 'low' + */ + emphasis?: 'high' | 'low'; + /** + * Defines the color of the `StatusIndicator`. + * @default 'gray' + */ + variant?: StatusIndicatorVariant; /** * Children of the `StatusIndicator`. Can contain a `StatusIndicator.Label` and optionally a `StatusIndicator.Icon`. */ @@ -29,82 +42,77 @@ const statusIndicatorStencil = createStencil({ modifiers: { gray: { high: { - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.licorice300, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.static.gray.default, }, low: { - color: base.licorice400, - [systemIconStencil.vars.color]: base.licorice400, - background: base.soap300, + color: system.color.static.gray.strong, + [systemIconStencil.vars.color]: system.color.static.gray.strong, + background: system.color.static.gray.soft, }, }, orange: { high: { - color: base.licorice500, - [systemIconStencil.vars.color]: base.licorice500, - background: base.cantaloupe400, + color: system.color.static.gray.stronger, + [systemIconStencil.vars.color]: system.color.static.gray.stronger, + background: system.color.static.orange.default, }, low: { - color: base.toastedMarshmallow600, - [systemIconStencil.vars.color]: base.toastedMarshmallow600, - background: base.cantaloupe100, + color: system.color.static.gold.stronger, + [systemIconStencil.vars.color]: system.color.static.gold.stronger, + background: system.color.static.orange.soft, }, }, blue: { high: { - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.blueberry400, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.static.blue.default, }, low: { - color: base.blueberry500, - [systemIconStencil.vars.color]: base.blueberry500, - background: base.blueberry100, + color: system.color.static.blue.strong, + [systemIconStencil.vars.color]: system.color.static.blue.strong, + background: system.color.static.blue.soft, }, }, green: { high: { - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.greenApple600, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.static.green.strong, }, low: { - color: base.greenApple600, - [systemIconStencil.vars.color]: base.greenApple600, - background: base.greenApple100, + color: system.color.static.green.strong, + [systemIconStencil.vars.color]: system.color.static.green.strong, + background: system.color.static.green.soft, }, }, red: { high: { - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.cinnamon500, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.static.red.default, }, low: { - color: base.cinnamon600, - [systemIconStencil.vars.color]: base.cinnamon600, - background: base.cinnamon100, + color: system.color.static.red.strong, + [systemIconStencil.vars.color]: system.color.static.red.strong, + background: system.color.static.red.soft, }, }, transparent: { high: { - opacity: 0.85, - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.blackPepper600, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.bg.translucent, }, low: { - opacity: 0.85, - color: base.frenchVanilla100, - [systemIconStencil.vars.color]: base.frenchVanilla100, - background: base.blackPepper600, + color: system.color.static.white, + [systemIconStencil.vars.color]: system.color.static.white, + background: system.color.bg.translucent, }, }, }, - defaultModifiers: { - gray: 'low', - }, }); /** @@ -117,9 +125,8 @@ const statusIndicatorStencil = createStencil({ * * ``` */ -export const StatusIndicator = createContainer('div')({ +export const StatusIndicator = createComponent('div')({ displayName: 'StatusIndicator', - modelHook: useStatusIndicatorModel, subComponents: { /** * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its @@ -140,15 +147,15 @@ export const StatusIndicator = createContainer('div')({ */ Icon: StatusIndicatorIcon, }, -})(({children, ...elemProps}, Element, model) => { - return ( - - {children} - - ); + Component: ( + {emphasis = 'low', variant = 'gray', children, ...elemProps}: StatusIndicatorProps, + ref, + Element + ) => { + return ( + + {children} + + ); + }, }); diff --git a/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx b/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx index d03ea6b0de..f30db4c2c1 100644 --- a/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx +++ b/modules/preview-react/status-indicator/lib/StatusIndicatorIcon.tsx @@ -1,97 +1,13 @@ import React from 'react'; -import {createComponent, createElemPropsHook} from '@workday/canvas-kit-react/common'; -import {colors} from '@workday/canvas-kit-react/tokens'; - +import {createComponent} from '@workday/canvas-kit-react/common'; import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon'; -import {useStatusIndicatorModel} from './hooks'; export interface StatusIndicatorIconProps extends SystemIconProps {} -/** - * ### ⚠️ We've deprecated `statusIndicatorColors` for StatusIndicator because it's now directly handeled by Style Utility. ⚠️ - * Please consider using [`StatusIndicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead. - * @deprecated - */ -export const statusIndicatorColors = { - gray: { - high: { - text: colors.frenchVanilla100, - background: colors.licorice300, - }, - low: { - text: colors.licorice400, - background: colors.soap300, - }, - }, - orange: { - high: { - text: colors.licorice500, - background: colors.cantaloupe400, - }, - low: { - text: colors.toastedMarshmallow600, - background: colors.cantaloupe100, - }, - }, - blue: { - high: { - text: colors.frenchVanilla100, - background: colors.blueberry400, - }, - low: { - text: colors.blueberry500, - background: colors.blueberry100, - }, - }, - green: { - high: { - text: colors.frenchVanilla100, - background: colors.greenApple600, - }, - low: { - text: colors.greenApple600, - background: colors.greenApple100, - }, - }, - red: { - high: { - text: colors.frenchVanilla100, - background: colors.cinnamon500, - }, - low: { - text: colors.cinnamon600, - background: colors.cinnamon100, - }, - }, - transparent: { - high: { - text: colors.frenchVanilla100, - background: colors.blackPepper600, - }, - low: { - text: colors.frenchVanilla100, - background: colors.blackPepper600, - }, - }, -}; - -/** - * ### ⚠️ We've deprecated `useStatusIndicatorIcon` for StatusIndicatorIcon because it's now directly handeled by Style Utility. ⚠️ - * Please consider using [`StatusIndicatorIcon`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--icon) instead. - * @deprecated - */ -export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({state}) => { - const colors = statusIndicatorColors[state.variant][state.emphasis]; - return { - color: colors.text, - colorHover: colors.text, - }; -}); - export const StatusIndicatorIcon = createComponent('span')({ displayName: 'StatusIndicatorIcon', Component: (elemProps: SystemIconProps, ref, Element) => { - return ; + return ; }, }); diff --git a/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx b/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx index 8df3ee42c6..2948c66b37 100644 --- a/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx +++ b/modules/preview-react/status-indicator/lib/StatusIndicatorLabel.tsx @@ -1,27 +1,31 @@ import React from 'react'; import {createComponent} from '@workday/canvas-kit-react/common'; -import {TextProps} from '@workday/canvas-kit-react/text'; -import {createStyles} from '@workday/canvas-kit-styling'; +import {TextProps, textStencil} from '@workday/canvas-kit-react/text'; +import {createStencil} from '@workday/canvas-kit-styling'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; import {system} from '@workday/canvas-tokens-web'; export interface StatusIndicatorLabelProps extends TextProps {} -const labelStyles = createStyles({ - ...system.type.subtext.large, - whiteSpace: 'nowrap', - overflow: 'hidden', - textOverflow: 'ellipsis', - fontWeight: system.fontWeight.bold, - textTransform: 'capitalize', +const statusIndicatorLabelStencil = createStencil({ + extends: textStencil, + base: { + fontWeight: system.fontWeight.bold, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + textTransform: 'capitalize', + color: 'inherit', + }, + defaultModifiers: {typeLevel: 'subtext.large'}, }); export const StatusIndicatorLabel = createComponent('span')({ displayName: 'StatusIndicator.Label', Component: ({children, ...elemProps}: StatusIndicatorLabelProps, ref, Element) => { return ( - + {children} ); diff --git a/modules/preview-react/status-indicator/lib/hooks/index.ts b/modules/preview-react/status-indicator/lib/hooks/index.ts deleted file mode 100644 index 698efcf1e5..0000000000 --- a/modules/preview-react/status-indicator/lib/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './useStatusIndicatorModel'; diff --git a/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx b/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx deleted file mode 100644 index 040349b314..0000000000 --- a/modules/preview-react/status-indicator/lib/hooks/useStatusIndicatorModel.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import {createModelHook} from '@workday/canvas-kit-react/common'; - -export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent'; - -export type StatusIndicatorEmphasis = 'high' | 'low'; - -export const useStatusIndicatorModel = createModelHook({ - defaultConfig: { - /** - * Defines the emphasis of the `StatusIndicator`. - * `high` emphasis will create more contrast between the background and text colors. - * `low` emphasis will create less contrast between the background and text colors. - * @default 'low' - */ - - emphasis: 'low' as StatusIndicatorEmphasis, - /** - * Defines the color of the `StatusIndicator`. - * @default 'gray' - */ - variant: 'gray' as StatusIndicatorVariant, - }, -})(config => { - const state = { - ...config, - }; - - return {state, events: {}}; -}); diff --git a/modules/react/loading-dots/lib/LoadingDots.tsx b/modules/react/loading-dots/lib/LoadingDots.tsx index 6ad4662beb..03953df3e8 100644 --- a/modules/react/loading-dots/lib/LoadingDots.tsx +++ b/modules/react/loading-dots/lib/LoadingDots.tsx @@ -47,7 +47,7 @@ const singleLoadingDotStencil = createStencil({ /** * The actual loading dot div. */ -const LoadingAnimationDot = () =>
; +const LoadingAnimationDot = () =>
; /** * A simple container for the loading dots.