From b556f2322e5be1ebdc1890fbed16620b5f0c5432 Mon Sep 17 00:00:00 2001 From: James Fan Date: Wed, 6 Oct 2021 17:16:20 -0700 Subject: [PATCH 1/8] docs(radio): Fix examples to follow case guidance --- modules/react/radio/stories/examples/Alert.tsx | 6 +++--- modules/react/radio/stories/examples/Basic.tsx | 6 +++--- modules/react/radio/stories/examples/Disabled.tsx | 6 +++--- modules/react/radio/stories/examples/Error.tsx | 6 +++--- modules/react/radio/stories/examples/LabelPosition.tsx | 6 +++--- modules/react/radio/stories/examples/NoValue.tsx | 6 +++--- modules/react/radio/stories/examples/RefForwarding.tsx | 6 +++--- modules/react/radio/stories/examples/Required.tsx | 6 +++--- 8 files changed, 24 insertions(+), 24 deletions(-) diff --git a/modules/react/radio/stories/examples/Alert.tsx b/modules/react/radio/stories/examples/Alert.tsx index 6e017eb16c..b59a50289e 100644 --- a/modules/react/radio/stories/examples/Alert.tsx +++ b/modules/react/radio/stories/examples/Alert.tsx @@ -14,13 +14,13 @@ export const Alert = () => { error={FormField.ErrorType.Alert} hintId="hint-alert" hintText="Deep Dish is no longer available. Please select a different crust." - label="Choose your pizza crust" + label="Choose Your Pizza Crust" useFieldset={true} > - + - + diff --git a/modules/react/radio/stories/examples/Basic.tsx b/modules/react/radio/stories/examples/Basic.tsx index acbc64f41f..f55542f5a3 100644 --- a/modules/react/radio/stories/examples/Basic.tsx +++ b/modules/react/radio/stories/examples/Basic.tsx @@ -10,11 +10,11 @@ export const Basic = () => { }; return ( - + - + - + diff --git a/modules/react/radio/stories/examples/Disabled.tsx b/modules/react/radio/stories/examples/Disabled.tsx index 463137ba99..1a9b32d37f 100644 --- a/modules/react/radio/stories/examples/Disabled.tsx +++ b/modules/react/radio/stories/examples/Disabled.tsx @@ -10,11 +10,11 @@ export const Disabled = () => { }; return ( - + - + - + diff --git a/modules/react/radio/stories/examples/Error.tsx b/modules/react/radio/stories/examples/Error.tsx index 37b51dd837..8754b772a5 100644 --- a/modules/react/radio/stories/examples/Error.tsx +++ b/modules/react/radio/stories/examples/Error.tsx @@ -14,13 +14,13 @@ export const Error = () => { error={FormField.ErrorType.Error} hintId="hint-error" hintText="Deep Dish is no longer available. Please select a different crust." - label="Choose your pizza crust" + label="Choose Your Pizza Crust" useFieldset={true} > - + - + diff --git a/modules/react/radio/stories/examples/LabelPosition.tsx b/modules/react/radio/stories/examples/LabelPosition.tsx index dddebdf971..76ef0fa231 100644 --- a/modules/react/radio/stories/examples/LabelPosition.tsx +++ b/modules/react/radio/stories/examples/LabelPosition.tsx @@ -11,14 +11,14 @@ export const LabelPosition = () => { return ( - + - + diff --git a/modules/react/radio/stories/examples/NoValue.tsx b/modules/react/radio/stories/examples/NoValue.tsx index 86d095c939..5ff5839ddb 100644 --- a/modules/react/radio/stories/examples/NoValue.tsx +++ b/modules/react/radio/stories/examples/NoValue.tsx @@ -12,11 +12,11 @@ export const NoValue = () => { return ( <> - + - + - + diff --git a/modules/react/radio/stories/examples/RefForwarding.tsx b/modules/react/radio/stories/examples/RefForwarding.tsx index 04dbacc8da..8829e54384 100644 --- a/modules/react/radio/stories/examples/RefForwarding.tsx +++ b/modules/react/radio/stories/examples/RefForwarding.tsx @@ -17,11 +17,11 @@ export const RefForwarding = () => { return ( <> - + - + - + diff --git a/modules/react/radio/stories/examples/Required.tsx b/modules/react/radio/stories/examples/Required.tsx index 35c4c58198..0bb9e3d0ee 100644 --- a/modules/react/radio/stories/examples/Required.tsx +++ b/modules/react/radio/stories/examples/Required.tsx @@ -10,11 +10,11 @@ export const Required = () => { }; return ( - + - + - + From d50fb4236b1a8045fd4f91dd7f94aa837f29c1f3 Mon Sep 17 00:00:00 2001 From: James Fan Date: Wed, 6 Oct 2021 17:31:24 -0700 Subject: [PATCH 2/8] docs: Fix Props headings --- modules/react/toast/stories/toast.stories.mdx | 18 +----------------- .../react/tooltip/stories/Tooltip.stories.mdx | 2 +- 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/modules/react/toast/stories/toast.stories.mdx b/modules/react/toast/stories/toast.stories.mdx index 439f4b05a5..ef0f6cf3f1 100644 --- a/modules/react/toast/stories/toast.stories.mdx +++ b/modules/react/toast/stories/toast.stories.mdx @@ -32,52 +32,36 @@ Below are examples we expect will work for most use cases. Note that all example they are an important signifier to communicate meaning. For this reason, Toast notifications should always include an icon. ---- - #### Complete Example with Popper We use Popper to position Toast. Here's an example of how to use them together. ---- - #### Success ---- - #### Error ---- - #### WithCloseButton ---- - #### With an Action Link ---- - #### With an Action Link and CloseIcon ---- - #### With RTL ---- - -## Component Props +## Props diff --git a/modules/react/tooltip/stories/Tooltip.stories.mdx b/modules/react/tooltip/stories/Tooltip.stories.mdx index 18be4ed393..cbc60a51c9 100644 --- a/modules/react/tooltip/stories/Tooltip.stories.mdx +++ b/modules/react/tooltip/stories/Tooltip.stories.mdx @@ -171,7 +171,7 @@ example uses those parts directly while being functionally equivalent to the ori -## Properties +## Props From 4b6bab5355ec5e680198f67fea6c1615c0f1c9ab Mon Sep 17 00:00:00 2001 From: James Fan Date: Wed, 6 Oct 2021 17:37:52 -0700 Subject: [PATCH 3/8] fix(menu): Remove unnecessary title attributes in examples --- modules/preview-react/menu/stories/examples/Icons.tsx | 2 +- modules/preview-react/menu/stories/examples/ManyItems.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/preview-react/menu/stories/examples/Icons.tsx b/modules/preview-react/menu/stories/examples/Icons.tsx index 049162cae3..e37324cdf9 100644 --- a/modules/preview-react/menu/stories/examples/Icons.tsx +++ b/modules/preview-react/menu/stories/examples/Icons.tsx @@ -10,7 +10,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu'; export const Icons = () => { return ( - + First Item Second Item (with a really really really long label) diff --git a/modules/preview-react/menu/stories/examples/ManyItems.tsx b/modules/preview-react/menu/stories/examples/ManyItems.tsx index 3ef49d4c8a..900fd4f530 100644 --- a/modules/preview-react/menu/stories/examples/ManyItems.tsx +++ b/modules/preview-react/menu/stories/examples/ManyItems.tsx @@ -4,7 +4,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu'; export const ManyItems = () => { return ( - + {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen' .split(' ') .map(item => { From d317e3cf63f962d921eb129674f22059f187eff0 Mon Sep 17 00:00:00 2001 From: James Fan Date: Wed, 6 Oct 2021 17:43:33 -0700 Subject: [PATCH 4/8] docs: Standardize RTL example headings --- .../preview-react/breadcrumbs/stories/Breadcrumbs.stories.mdx | 2 +- modules/react/tabs/stories/Tabs.stories.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/modules/preview-react/breadcrumbs/stories/Breadcrumbs.stories.mdx b/modules/preview-react/breadcrumbs/stories/Breadcrumbs.stories.mdx index a217e07087..098c96e448 100644 --- a/modules/preview-react/breadcrumbs/stories/Breadcrumbs.stories.mdx +++ b/modules/preview-react/breadcrumbs/stories/Breadcrumbs.stories.mdx @@ -48,7 +48,7 @@ you'll need to add `buttonAriaLabel` to `Breadcrumbs.CollapsibleList`. -### Right-to-Left Example +### Right-to-Left (RTL) Breadcrumbs has bidirectional support out of the box. That means outside of setting the content direction in your application's Canvas theme, you don't need to do anything else to make it work. diff --git a/modules/react/tabs/stories/Tabs.stories.mdx b/modules/react/tabs/stories/Tabs.stories.mdx index 3103653958..6f9570a766 100644 --- a/modules/react/tabs/stories/Tabs.stories.mdx +++ b/modules/react/tabs/stories/Tabs.stories.mdx @@ -60,7 +60,7 @@ trigger an event to change the active tab. -### Right-to-Left +### Right-to-Left (RTL) `Tabs` supports right-to-left through the theme of the `CanvasProvider`. From 18cec767c76faa90b1b2cf75df4b91225c338109 Mon Sep 17 00:00:00 2001 From: James Fan Date: Wed, 6 Oct 2021 18:19:45 -0700 Subject: [PATCH 5/8] docs: Sync Pagination and Tabs docs --- .../pagination/stories/pagination.stories.mdx | 8 ++- modules/react/tabs/stories/Tabs.stories.mdx | 67 ++++++++++--------- .../tabs/stories/examples/HoistedModel.tsx | 2 +- 3 files changed, 42 insertions(+), 35 deletions(-) diff --git a/modules/react/pagination/stories/pagination.stories.mdx b/modules/react/pagination/stories/pagination.stories.mdx index 20d7d671c7..e9e1e35503 100644 --- a/modules/react/pagination/stories/pagination.stories.mdx +++ b/modules/react/pagination/stories/pagination.stories.mdx @@ -23,8 +23,10 @@ import { # Canvas Kit Pagination `Pagination` is a -[compound component](/getting-started/for-developers/resources/compound-components/) for handling -navigation between pages in a range. +[compound component](/getting-started/for-developers/resources/compound-components/) that allows +users to navigate between pages in a range. + +[> Workday Design Reference](https://design.workday.com/components/navigation/pagination) ## Installation @@ -81,7 +83,7 @@ the range. ### Right-to-Left (RTL) -This example shows how the component supports right-to-left languages. +`Pagination` supports right-to-left languages when specified in the `CanvasProvider` `theme`. diff --git a/modules/react/tabs/stories/Tabs.stories.mdx b/modules/react/tabs/stories/Tabs.stories.mdx index 6f9570a766..eea0eeba5b 100644 --- a/modules/react/tabs/stories/Tabs.stories.mdx +++ b/modules/react/tabs/stories/Tabs.stories.mdx @@ -20,8 +20,8 @@ import { # Canvas Kit Tabs `Tabs` is a [compound component](/getting-started/for-developers/resources/compound-components/) -which can be composed in a variety of different ways. It follows the -[W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel). +that allows users to navigate between related views of content while remaining in context of the +page. [> Workday Design Reference](https://design.workday.com/components/navigation/tabs) @@ -35,8 +35,11 @@ yarn add @workday/canvas-kit-react ### Basic Example -`Tabs` includes a container `Tabs` component and the following subcomponents: `Tabs.List`, -`Tabs.Item` and `Tabs.Panel`. +`Tabs` includes a container `Tabs` component and the following subcomponents which can be composed +in a variety of ways: `Tabs.List`, `Tabs.Item` and `Tabs.Panel`. It follows the +[W3 Tabs specification](https://www.w3.org/TR/wai-aria-practices/#tabpanel). + +In this example, we set up a basic `Tabs` component with five tabs. @@ -44,8 +47,9 @@ yarn add @workday/canvas-kit-react By default, `Tabs` will create and use its own [model](#model) internally. Alternatively, you may configure your own model with `useTabsModel` and pass it to `Tabs` via the `model` prop. This -pattern is referred to as hoisting the model and provides direct access to its `state` and `events` -outside of the `Tabs` component. +pattern is referred to as +[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model) +and provides direct access to its `state` and `events` outside of the `Tabs` component. In this example, we set up external observation of the model state and create an external button to trigger an event to change the active tab. @@ -62,7 +66,7 @@ trigger an event to change the active tab. ### Right-to-Left (RTL) -`Tabs` supports right-to-left through the theme of the `CanvasProvider`. +`Tabs` supports right-to-left languages when specified in the `CanvasProvider` `theme`. @@ -94,9 +98,9 @@ from the `contents` object. ### Dynamic Tabs The `Tabs.Item` component takes in an optional `index` property if you want to specify the position -of a tab. If not defined, by default it will append tabs to the end. For example, if your tabs are -stored as an array in the state that can be added to along with a fixed tab that should remain at -the end. +of a tab. If not defined, by default it will append tabs to the end. In this example, our tabs are +stored as an array in the state, and we have a fixed tab at the end that can add new tabs to that +array. @@ -107,22 +111,24 @@ the end. #### Usage `Tabs` is a container component that is responsible for creating a `TabsModel` and sharing it with -its children using React context. It does not represent a real element. +its subcomponents using React context. It does not represent a real element. ```tsx -// Configuration - console.log('Activated tab', data.tab)}>{/* Subcomponents */}; + console.log('Activated tab', data.tab)}> + {/* Child components */} + +``` -// OR +Alternatively, you may pass in a model using the hoisted model pattern. -// Hoisted model +```tsx const model = useTabsModel({ onActivate({data}) { console.log('Activated Tab', data.tab); }, }); -{/* Subcomponents */}; +{/* Child components */}; ``` #### Props @@ -136,8 +142,7 @@ Note that if you pass in a `model` configured with `useTabsModel`, configuration #### Usage -`Tabs.List` is a `div` element with a `role=tablist`. It is a container for `Tabs.Item` -subcomponents. +`Tabs.List` is a `
` element. It is a container for `Tabs.Item` subcomponents. ```tsx {/* Tabs.Items */} @@ -145,7 +150,7 @@ subcomponents. #### Props -Undocumented props are spread to the underlying `div` element. +Undocumented props are spread to the underlying `
` element. @@ -153,9 +158,9 @@ Undocumented props are spread to the underlying `div` element. #### Usage -`Tabs.Item` is a `button` element with a `role=tab`. Each `Tabs.Item` is associated with a -`Tabs.Panel` either by a `name` attribute or by the position in the list. If a `name` is provided, -it must match the name passed to the corresponding `Tabs.Panel` component. +`Tabs.Item` is a `