diff --git a/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx index 91becc7639..4b0401e340 100644 --- a/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/10.0-UPGRADE-GUIDE.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + # Canvas Kit 10.0 Upgrade Guide @@ -160,6 +162,8 @@ updated on a 1:1 basis. None of the base values have changed, only the unit. The table below shows what each token value is, what it corresponds to, and what the new `rem` value is in `px`: + + {` | px Value | rem Value | space Token | | -------- | --------- | ----------- | | 0 | 0 | zero | @@ -172,17 +176,23 @@ is in `px`: | 40px | 2.5rem | xl | | 64px | 4rem | xxl | | 80px | 5rem | xxxl | +`} + You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default browser font size hasn't been updated, the value will be `16`). For example: + + {` | Equation | rem Value | | ----------- | --------- | -| `16px/16px` | `1rem` | -| `32px/16px` | `2rem` | -| `8px/16px` | `0.5rem` | +| \`16px/16px\` | \`1rem\` | +| \`32px/16px\` | \`2rem\` | +| \`8px/16px\` | \`0.5rem\` | +`} + #### Why Did We Make This Change? @@ -271,7 +281,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field'; - +; ``` ```tsx @@ -292,7 +302,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field'; - +; ``` Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how diff --git a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx index 66196b770b..ab7a2dbb51 100644 --- a/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx @@ -50,6 +50,7 @@ A note to the reader: - [Search Form](#search-form) - [Select](#select) - [Text Area](#text-area) + - [Text Input](#text-input) - [Troubleshooting](#troubleshooting) - [Glossary](#glossary) - [Main](#main) @@ -248,7 +249,8 @@ The following changes have been made to the API: **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865), [#2881](https://github.com/Workday/canvas-kit/pull/2881), -[#2934](https://github.com/Workday/canvas-kit/pull/2934) +[#2934](https://github.com/Workday/canvas-kit/pull/2934), +[2973](https://github.com/Workday/canvas-kit/pull/2973) We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been made to provide more flexibility and better explicit components when using inputs. @@ -296,6 +298,7 @@ an example of how to **update** your code to match the new compound component AP labelPosition={FormField.LabelPosition.Left} useFieldSet={true} required={true} + inputId='input-id' hintId="hint-alert" hintText="Please enter a valid email." label="Email" @@ -306,9 +309,10 @@ an example of how to **update** your code to match the new compound component AP // v12 Newly promoted FormField from Preview to Main Email @@ -318,6 +322,34 @@ an example of how to **update** your code to match the new compound component AP ``` +- `FormField.LabelPosition.Hidden` is no longer valid. If you still want to hide the label, use the + prop `isHidden`. + +```tsx +// v11 FormField in Main + + +; + +// v12 Newly promoted FormField from Preview to Main + +//... + + + Search + + + +; +``` + **Noticeable changes:** - `error` prop takes in the following values: `"error" | "alert"`. @@ -334,6 +366,10 @@ an example of how to **update** your code to match the new compound component AP - `label` is no longer a valid prop. Use `FormField.Label` sub component to render your label text. - Instead of rendering an input, ensure you use `FormField.Input` with the `as` prop. This ensures proper error handling and aria attributes for accessibility. +- `inputId` is no longer a valid prop. Use `id` if you want a custom `id`, otherwise, the component + will handle generating a unique id to associate each element for accessibility. +- `isHidden` has been added as a prop to `FormField.Label` in cases where you want to hide the label + while still meeting accessibility standards. 🤖 The codemod will handle the change of `orientation="horizontal"` to `orientation="horizontalStart"` if you're using the string literal values. It will also handle @@ -401,8 +437,7 @@ pass the interface that the `as` prop is pointing to. **PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934), `SearchForm` is now using the newly promoted `FormField` component. `SearchForm` now uses `labelId` -to set the appropiate aria attributes and `id` on the underlying input element. There should be no -visual breaking changes and the API remains the same. +to set the appropiate aria attributes and `id` on the underlying input element. ### Select @@ -474,6 +509,66 @@ interface MyProps { } ``` +`Themeable` has been removed from `TextAreaProps`. If you wish to theme `TextArea`, use our +`CanvasProvider` with the `theme` object. + +```tsx +const theme: PartialEmotionCanvasTheme = { + canvas: { + palette: { + common: { + focusOutline: 'pink', + }, + primary: { + main: 'green', + light: 'lightgreen', + }, + }, + }, +}; + +//... + + + + Contact + + +; +``` + +### Text Input + +**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825) + +`Themeable` has been removed from `TextInputProps`. If you wish to theme `TextInput`, use our +`CanvasProvider` with the `theme` object. + +```tsx +const theme: PartialEmotionCanvasTheme = { + canvas: { + palette: { + common: { + focusOutline: 'pink', + }, + primary: { + main: 'green', + light: 'lightgreen', + }, + }, + }, +}; + +//... + + + + Contact + + +; +``` + ## Troubleshooting ### My Styles Seem Broken? diff --git a/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx index 091610a29c..27943dd368 100644 --- a/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + # Canvas Kit 5.0 Upgrade Guide @@ -122,56 +124,51 @@ updated as you expect. tokens in `@workday/canvas-kit-labs-react-core`, but some are using the Legacy type in `@workday/canvas-kit-react-core`. - | Beta Type (px) | Responsive Type (rem) | - | --------------- | ----------------------------------------- | - | `brand1` (56px) | `levels.title.large` ( 3.5rem \ 56px) | - | `brand2` (48px) | `levels.title.medium` ( 3rem \ 48px) | - | `h1` (40px) | `levels.title.small` ( 2.5rem \ 40px) | - | `h2` (32px) | `levels.heading.large` ( 2rem \ 32px) | - | `h3` (24px) | `levels.heading.small` ( 1.5rem \ 24px) | - | `h4` (20px) | `levels.body.large` ( 1.25rem \ 20px) | - | `h5` (20px) | `levels.body.large` ( 1.25rem \ 20px) | - | `body` (16px) | `levels.body.small` ( 1rem \ 16px) | - | `body2` (14px) | `levels.subtext.large` ( 0.875rem \ 14px) | - | `small` (13px) | `levels.subtext.medium` ( 0.75rem \ 12px) | - - | Legacy Type (px) | Responsive Type (rem) | - | ----------------- | ---------------------------------------- | - | `dataViz1` (56px) | `levels.title.large` (3.5rem \ 56px) | - | `dataViz2` (34px) | `levels.heading.large` (2rem \ 32px) | - | `h1` (28px) | `levels.heading.medium` (1.75rem \ 28px) | - | `h2` (24px) | `levels.heading.small` (1.5rem \ 24px) | - | `h3` (20px) | `levels.body.large` (1.25rem,) \ 20px | - | `h4` (16px) | `levels.body.small` (1rem \ 16px) | - | `h5` (16px) | `levels.body.small` (1rem \ 16px) | - | `body` (14px) | `levels.subtext.large` (0.875rem \ 14px) | - | `body2` (13px) | `levels.subtext.medium` (0.75rem \ 12px) | - | `small` (12px) | `levels.subtext.medium` (0.75rem \ 12px) | +{` +| Legacy Type (px) | Responsive Type (rem) | +| ----------------- | ---------------------------------------- | +| \`dataViz1\` (56px) | \`levels.title.large\` (3.5rem \ 56px) | +| \`dataViz2\` (34px) | \`levels.heading.large\` (2rem \ 32px) | +| \`h1\` (28px) | \`levels.heading.medium\` (1.75rem \ 28px) | +| \`h2\` (24px) | \`levels.heading.small\` (1.5rem \ 24px) | +| \`h3\` (20px) | \`levels.body.large\` (1.25rem,) \ 20px | +| \`h4\` (16px) | \`levels.body.small\` (1rem \ 16px) | +| \`h5\` (16px) | \`levels.body.small\` (1rem \ 16px) | +| \`body\` (14px) | \`levels.subtext.large\` (0.875rem \ 14px) | +| \`body2\` (13px) | \`levels.subtext.medium\` (0.75rem \ 12px) | +| \`small\` (12px) | \`levels.subtext.medium\` (0.75rem \ 12px) | +`} - 🤖 Property Updates All `fontFamily`, `fontSize`, and `fontWeight` property updates are handled by the codemod. - | CSS Property | Corresponding Token | Notes | + + {`| CSS Property | Corresponding Token | Notes | | ------------ | ------------------------------ | --------------------------------------------------------------- | - | `fontFamily` | `type.properties.fontFamilies` | `default` (Roboto) and `monospace` (Roboto Mono) are available | - | `fontSize` | `type.properties.fontSizes` | please consult the type hierarchies above to map values | - | `fontWeight` | `type.properties.fontWeights` | `regular` (400), `medium` (500), and `bold` (700) are available | + | \`fontFamily\` | \`type.properties.fontFamilies\` | \`default\` (Roboto) and \`monospace\` (Roboto Mono) are available | + | \`fontSize\` | \`type.properties.fontSizes\` | please consult the type hierarchies above to map values | + | \`fontWeight\` | \`type.properties.fontWeights\` | \`regular\` (400), \`medium\` (500), and \`bold\` (700) are available |`} + - 🤖 Variant Updates All `variant` updates _except `link`_ are handled by the codemod. Please see the [variants](#variants) section below for more information. - | Variant | Transformation | Notes | - | ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- | - | `type.variant.error` | `type.variants.error` | name change only | - | `type.variant.hint` | `type.variants.hint` | name change only | - | `type.variant.inverse` | `type.variants.inverse` | name change only | - | `type.variant.button` | `{fontWeight: type.properties.fontWeights.bold}` | variant deprecated, use type properties | - | `type.variant.caps` | `{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties | - | `type.variant.label` | `{fontWeight: type.properties.fontWeights.medium}` | variant deprecated, use type properties | - | `type.variant.mono` | `{fontFamily: type.properties.fontFamilies.monospace}` | variant deprecated, use type properties | + + {` +| Variant | Transformation | Notes | +| ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- | +| \`type.variant.error\` | \`type.variants.error\` | name change only | +| \`type.variant.hint\` | \`type.variants.hint\` | name change only | +| \`type.variant.inverse\` | \`type.variants.inverse\` | name change only | +| \`type.variant.button\` | \`{fontWeight: type.properties.fontWeights.bold}\` | variant deprecated, use type properties | +| \`type.variant.caps\` | \`{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties | +| \`type.variant.label\` | \`{fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties | +| \`type.variant.mono\` | \`{fontFamily: type.properties.fontFamilies.monospace}\` | variant deprecated, use type properties | +`} + #### Manual Updates @@ -639,14 +636,20 @@ types (which were too generic) and their JSDoc hints. The following table describes each update: + +{` | Before | After | Change Description | | --------------------- | ------------------------- | -------------------------------- | -| `spacing` | `space` | name change only | -| `spacingNumbers` | `spaceNumbers` | name change only | -| `CanvasSpacing` | `CanvasSpace` | name change and improved types\* | -| `CanvasSpacingValue` | `CanvasSpaceValues` | name change only | -| `CanvasSpacingNumber` | `CanvasSpaceNumbers` | name change and improved types\* | -| `n/a` | `CanvasSpaceNumberValues` | new type! | +| \`spacing\` | \`space\` | name change only | +| \`spacingNumbers\` | \`spaceNumbers\` | name change only | +| \`CanvasSpacing\` | \`CanvasSpace\` | name change and improved types\* | +| \`CanvasSpacingValue\` | \`CanvasSpaceValues\` | name change only | +| \`CanvasSpacingNumber\` | \`CanvasSpaceNumbers\` | name change and improved types\* | +| \`n/a\` | \`CanvasSpaceNumberValues\` | new type! | + +`} + + \* Before, the types were too generic and not very useful. They now better reflect the values they represent. @@ -1199,14 +1202,18 @@ Pass a `css` prop or a styled button instead to have a custom styled button. You If you were using `usePopup` before, here's a list of equivalent APIs: + + {` | Before | After | | ----------------------------------------------------------------------- | ------------------------------------- | -| `const { popperProps, targetProps, closePopup, stackRef } = usePopup()` | `const model = usePopupModel()` | -| `popperProps.open` | `model.state.visibility !== 'hidden'` | -| `closePopup()` | `model.events.hide()` | -| `stackRef` or `popperProps.ref` | `model.state.stackRef` | -| `popperProps.anchorElement` | `model.state.targetRef.current` | -| `targetProps.onClick` | `usePopupTarget(model).onClick` | +| \`const { popperProps, targetProps, closePopup, stackRef } = usePopup()\` | \`const model = usePopupModel()\` | +| \`popperProps.open\` | \`model.state.visibility !== 'hidden'\` | +| \`closePopup()\` | \`model.events.hide()\` | +| \`stackRef\` or \`popperProps.ref\` | \`model.state.stackRef\` | +| \`popperProps.anchorElement\` | \`model.state.targetRef.current\` | +| \`targetProps.onClick\` | \`usePopupTarget(model).onClick\` | +`} + #### New Focus Management @@ -1281,11 +1288,16 @@ model and behaviors, the following is equivalent: `Popup.Card` uses `Card`, which is now using `Box`. Consequently, the following props have changed: + +{` | Before | After | | ------------------------------ | ------------------------------------------ | -| `padding={Popup.Padding.zero}` | `padding="zero"` or `padding={space.zero}` | -| `depth={depth[0]}` | `depth={0}` | -| `popupRef={ref}` | `ref={ref}` | +| \`padding={Popup.Padding.zero}\` | \`padding="zero"\` or \`padding={space.zero}\` | +| \`depth={depth[0]}\` | \`depth={0}\` | +| \`popupRef={ref}\` | \`ref={ref}\` | +`} + + #### Transitioning diff --git a/modules/docs/mdx/6.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/6.0-UPGRADE-GUIDE.mdx index ee9ae999a9..d8542d04ca 100644 --- a/modules/docs/mdx/6.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/6.0-UPGRADE-GUIDE.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + # Canvas Kit 6.0 Upgrade Guide @@ -367,13 +369,17 @@ layout. If you have questions about this testing, please reach out to our team. Below is a reference table for the V5 and V6 breakpoint values. + + {` | Breakpoint Name | V5 Value (px) | V6 Value (px) | | --------------- | ------------- | ------------- | -| `zero` | 0 | 0 | -| `s` | 600 | 320 | -| `m` | 900 | 768 | -| `l` | 1280 | 1024 | -| `xl` | 1920 | 1440 | +| \`zero\` | 0 | 0 | +| \`s\` | 600 | 320 | +| \`m\` | 900 | 768 | +| \`l\` | 1280 | 1024 | +| \`xl\` | 1920 | 1440 | +`} + Also for reference, these are our viewport ranges: diff --git a/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx index ae05ab139f..02224a54f8 100644 --- a/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + # Canvas Kit 7.0 Upgrade Guide @@ -561,15 +563,19 @@ To consolidate Button APIs, we've removed `IconButton` in favor of `SecondaryBut `TertiaryButton`. The following table shows how `IconButton` variants in v6 map to their corresponding buttons in v7. -| v6 `IconButton` variant | v7 button (and variant, if necessary) | + + {` +| v6 \`IconButton\` variant | v7 button (and variant, if necessary) | | -------------------------- | ---------------------------------------- | -| `circle` (default variant) | `TertiaryButton` | -| `circleFilled` | `SecondaryButton` | -| `inverse` | `TertiaryButton` with `inverse` variant | -| `inverseFilled` | `SecondaryButton` with `inverse` variant | -| `plain` | Unsupported | -| `square` | Unsupported | -| `squareFilled` | Unsupported | +| \`circle\` (default variant) | \`TertiaryButton\` | +| \`circleFilled\` | \`SecondaryButton\` | +| \`inverse\` | \`TertiaryButton\` with \`inverse\` variant | +| \`inverseFilled\` | \`SecondaryButton\` with \`inverse\` variant | +| \`plain\` | Unsupported | +| \`square\` | Unsupported | +| \`squareFilled\` | Unsupported | +`} + > Note: See below for more information about how to manually migrate from > [unsupported v6 variants](#unsupported-iconbutton-variants). diff --git a/modules/docs/mdx/MAINTAINING.mdx b/modules/docs/mdx/MAINTAINING.mdx index 15e303d4a1..2c531f1246 100644 --- a/modules/docs/mdx/MAINTAINING.mdx +++ b/modules/docs/mdx/MAINTAINING.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + # Maintaining Canvas Kit @@ -50,13 +52,17 @@ runs on `support`, `master`, and `prerelease/minor` branches. Forward merges for starts with `chore: Release`, and that's how the forward merge workflow identifies them. Forward merges will run on every merge to `prerelease/minor` regardless of the commit message. + + {` | Run Forward Merge? | Branch | Commit Message | | ------------------ | ------------------ | --------------------------------------- | -| ✅ | `support` | `chore: Release v6.8.14 [skip release]` | -| ⛔️ | `support` | `fix: Remove unused props` | -| ✅ | `master` | `chore: Release v7.3.0 [skip release]` | -| ⛔️ | `master` | `fix: Update Popup types` | -| ✅ | `prerelease/minor` | `feat: Add new Layout components` | +| ✅ | \`support\` | \`chore: Release v6.8.14 [skip release]\` | +| ⛔️ | \`support\` | \`fix: Remove unused props\` | +| ✅ | \`master\` | \`chore: Release v7.3.0 [skip release]\` | +| ⛔️ | \`master\` | \`fix: Update Popup types\` | +| ✅ | \`prerelease/minor\` | \`feat: Add new Layout components\` | +`} + If the forward merge workflow fails and cannot automatically merge the update to the next branch, it will generate a PR with instructions on how to handle the forward merge manually. For a more @@ -266,9 +272,9 @@ We use codemods to reduce friction for consumers as they make changes and do upg accompany major version releases since v5, and can also be released in minor releases if users want to apply some changes sooner. -> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7. With -these updates has come some formatting issues after running our codemods. We recommend running a -formatter to address the format issues that have been introduced in v12.** +> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7. +> With these updates has come some formatting issues after running our codemods. We recommend +> running a formatter to address the format issues that have been introduced in v12.** ### Add a New Codemod diff --git a/modules/preview-react/menu/stories/Menu.mdx b/modules/preview-react/menu/stories/Menu.mdx index ea793c2304..1f27484113 100644 --- a/modules/preview-react/menu/stories/Menu.mdx +++ b/modules/preview-react/menu/stories/Menu.mdx @@ -1,4 +1,7 @@ +import {Markdown} from '@storybook/blocks'; + import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs'; +import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'; import * as MenuStories from './Menu.stories'; import {Basic} from './examples/Basic'; @@ -50,15 +53,19 @@ closing the `DeprecatedMenu`. using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated actions. + + {` | Key | Action | | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `Enter` or `Space` | Activates the menu item and then closes the menu | -| `Escape` | Closes the menu | -| `Up Arrow` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item | -| `Down Arrow` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item | -| `Home` | Moves focus to the first menu item | -| `End` | Moves focus to the last menu item | -| `A-Z / a-z` | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move | +| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu | +| \`Escape\` | Closes the menu | +| \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item | +| \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item | +| \`Home\` | Moves focus to the first menu item | +| \`End\` | Moves focus to the last menu item | +| \`A-Z / a-z\` | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move | +`} + Note that although `DeprecatedMenu` includes support for keyboard shortcuts for the menu itself, you'll need to add your own keyboard handling and aria attributes to the triggering button. diff --git a/modules/react/form-field/lib/FormFieldLabel.tsx b/modules/react/form-field/lib/FormFieldLabel.tsx index 93eda43168..9fb55a74c9 100644 --- a/modules/react/form-field/lib/FormFieldLabel.tsx +++ b/modules/react/form-field/lib/FormFieldLabel.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common'; +import {createSubcomponent, ExtractProps, accessibleHide} from '@workday/canvas-kit-react/common'; import {createStencil, px2rem} from '@workday/canvas-kit-styling'; import {Text, textStencil} from '@workday/canvas-kit-react/text'; import {FlexProps, mergeStyles} from '@workday/canvas-kit-react/layout'; @@ -15,6 +15,10 @@ export interface FormFieldLabelProps * The text of the label. */ children: React.ReactNode; + /** + * When true, will apply `accessibleHide` to the label. This is useful in cases where you still need accessibility but don't want to show the label, like a search input. + */ + isHidden?: boolean; } export const formFieldLabelStencil = createStencil({ @@ -57,6 +61,11 @@ export const formFieldLabelStencil = createStencil({ width: '100%', }, }, + isHidden: { + true: { + ...accessibleHide, + }, + }, }, defaultModifiers: { typeLevel: 'subtext.large', @@ -68,21 +77,26 @@ export const FormFieldLabel = createSubcomponent('label')({ displayName: 'FormField.Label', modelHook: useFormFieldModel, elemPropsHook: useFormFieldLabel, -})(({children, typeLevel, variant, ...elemProps}, Element, model) => { - return ( - - {children} - - ); -}); +})( + ({children, typeLevel, variant, isHidden, ...elemProps}, Element, model) => { + return ( + + {children} + + ); + } +); diff --git a/modules/react/form-field/stories/FormField.mdx b/modules/react/form-field/stories/FormField.mdx index fffbf0af2b..38d201cb08 100644 --- a/modules/react/form-field/stories/FormField.mdx +++ b/modules/react/form-field/stories/FormField.mdx @@ -5,6 +5,7 @@ import {Basic} from './examples/Basic'; import {Alert} from './examples/Alert'; import {Error} from './examples/Error'; import {Disabled} from './examples/Disabled'; +import {HiddenLabel} from './examples/HiddenLabel'; import {LabelPositionHorizontalStart} from './examples/LabelPositionHorizontalStart'; import {LabelPositionHorizontalEnd} from './examples/LabelPositionHorizontalEnd'; import {RefForwarding} from './examples/RefForwarding'; @@ -186,6 +187,13 @@ Form Field should allow you to use it with all `inputs` including `Select`, `Tex +### Hidden Label + +In cases where you want to hide the label while still meeting accessibility standards, you can add +`isHidden` on the ``. This prop will visually hide the label. + + + ### Themed Errors You can theme your error rings by wrapping an input in a `CanvasProvider` and defining diff --git a/modules/react/form-field/stories/FormField.stories.ts b/modules/react/form-field/stories/FormField.stories.ts index baf9e03f27..c53d7a9667 100644 --- a/modules/react/form-field/stories/FormField.stories.ts +++ b/modules/react/form-field/stories/FormField.stories.ts @@ -6,6 +6,7 @@ import {Basic as BasicExample} from './examples/Basic'; import {Alert as AlertExample} from './examples/Alert'; import {Error as ErrorExample} from './examples/Error'; import {Disabled as DisabledExample} from './examples/Disabled'; +import {HiddenLabel as HiddenLabelExample} from './examples/HiddenLabel'; import {LabelPositionHorizontalStart as LabelPositionHorizontalStartExample} from './examples/LabelPositionHorizontalStart'; import {LabelPositionHorizontalEnd as LabelPositionHorizontalEndExample} from './examples/LabelPositionHorizontalEnd'; import {RefForwarding as RefForwardingExample} from './examples/RefForwarding'; @@ -77,3 +78,7 @@ export const ThemedError: Story = { export const GroupedInputs: Story = { render: GroupedInputsExample, }; + +export const HiddenLabel: Story = { + render: HiddenLabelExample, +}; diff --git a/modules/react/form-field/stories/examples/HiddenLabel.tsx b/modules/react/form-field/stories/examples/HiddenLabel.tsx new file mode 100644 index 0000000000..79dee5387f --- /dev/null +++ b/modules/react/form-field/stories/examples/HiddenLabel.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {FormField} from '@workday/canvas-kit-react/form-field'; +import {Flex} from '@workday/canvas-kit-react/layout'; +import {TextInput, InputGroup} from '@workday/canvas-kit-react/text-input'; +import {SystemIcon} from '@workday/canvas-kit-react/icon'; +import {searchIcon} from '@workday/canvas-system-icons-web'; + +export const HiddenLabel = () => { + const [value, setValue] = React.useState(''); + + const handleChange = (event: React.ChangeEvent) => { + setValue(event.target.value); + }; + + return ( + + + Search + + + + + + + + + + + ); +}; diff --git a/modules/react/menu/stories/Menu.mdx b/modules/react/menu/stories/Menu.mdx index bb1d0dccb1..fe62c50af6 100644 --- a/modules/react/menu/stories/Menu.mdx +++ b/modules/react/menu/stories/Menu.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs'; import {Basic} from './examples/Basic'; import {ContextMenu} from './examples/ContextMenu'; @@ -35,14 +37,18 @@ model which composes a list model and a popup model and sets up accessibility fe [Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/) using roving tabindex. Below is table of supported keyboard shortcuts and associated actions. + + {` | Key | Action | | ------------------ | ------------------------------------------------------------------------------------------------------------ | -| `Enter` or `Space` | Activates the menu item and then closes the menu | -| `Escape` | Closes the menu | -| `Up Arrow` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item | -| `Down Arrow` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item | -| `Home` | Moves focus to the first menu item | -| `End` | Moves focus to the last menu item | +| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu | +| \`Escape\` | Closes the menu | +| \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item | +| \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item | +| \`Home\` | Moves focus to the first menu item | +| \`End\` | Moves focus to the last menu item | +`} + ### Context Menu diff --git a/modules/react/status-indicator/stories/StatusIndicator.mdx b/modules/react/status-indicator/stories/StatusIndicator.mdx index 4fb63b6169..5dc60eb2fc 100644 --- a/modules/react/status-indicator/stories/StatusIndicator.mdx +++ b/modules/react/status-indicator/stories/StatusIndicator.mdx @@ -1,3 +1,5 @@ +import {Markdown} from '@storybook/blocks'; + import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs'; import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator'; @@ -39,14 +41,18 @@ yarn add @workday/canvas-kit-react Note that the `type` prop is required (there is no default value). `type` accepts the following values: + + {` | Type | Suggested Purpose | | ---------------------------------- | ---------------------------------------------------------------------------------------------- | -| `StatusIndicator.Type.Gray` | Basic, general status. No action required. | -| `StatusIndicator.Type.Orange` | Signifies alerts, that a user must take action, or that something requires attention. | -| `StatusIndicator.Type.Blue` | Signifies an item in progress, an update, or a current status. | -| `StatusIndicator.Type.Green` | Signifies success, completion, or celebration. | -| `StatusIndicator.Type.Red` | Signifies an error or issue, or removal or destruction. | -| `StatusIndicator.Type.Transparent` | General status and related information intended for use on top of imagery, video, or graphics. | +| \`StatusIndicator.Type.Gray\` | Basic, general status. No action required. | +| \`StatusIndicator.Type.Orange\` | Signifies alerts, that a user must take action, or that something requires attention. | +| \`StatusIndicator.Type.Blue\` | Signifies an item in progress, an update, or a current status. | +| \`StatusIndicator.Type.Green\` | Signifies success, completion, or celebration. | +| \`StatusIndicator.Type.Red\` | Signifies an error or issue, or removal or destruction. | +| \`StatusIndicator.Type.Transparent\` | General status and related information intended for use on top of imagery, video, or graphics. | +`} + ### Emphasis