@workday/canvas-kit-docs 5.3.0 → 5.3.4

package/dist/es6/lib/specs.js

@@ -4579,7 +4579,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "it",
-                "name": "should not have tabindex=-1 on the first tab"
+                "name": "should not have tabindex on the first tab"
               },
               {
                 "type": "it",
@@ -4633,7 +4633,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the second tab"
+                        "name": "should not have tabindex on the second tab"
                       },
                       {
                         "type": "it",
@@ -4681,7 +4681,7 @@ module.exports = {specifications: [
                             "children": [
                               {
                                 "type": "it",
-                                "name": "should not have tabindex=-1 on the first tab"
+                                "name": "should not have tabindex on the first tab"
                               },
                               {
                                 "type": "it",
@@ -4707,7 +4707,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the last tab"
+                        "name": "should not have tabindex on the last tab"
                       },
                       {
                         "type": "it",
@@ -4731,7 +4731,7 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the first tab"
+                        "name": "should not have tabindex on the first tab"
                       },
                       {
                         "type": "it",
@@ -4745,7 +4745,7 @@ module.exports = {specifications: [
           },
           {
             "type": "describe",
-            "name": "given the [Components/Containers/Tabs/React, Named Tabs] story is rendered",
+            "name": "given the [Components/Containers/Tabs/React, Named Keys] story is rendered",
             "children": [
               {
                 "type": "it",
@@ -4769,7 +4769,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "it",
-                "name": "should not have tabindex=-1 on the first tab"
+                "name": "should not have tabindex on the first tab"
               },
               {
                 "type": "it",
@@ -4823,7 +4823,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the second tab"
+                        "name": "should not have tabindex on the second tab"
                       },
                       {
                         "type": "it",
@@ -4871,7 +4871,7 @@ module.exports = {specifications: [
                             "children": [
                               {
                                 "type": "it",
-                                "name": "should not have tabindex=-1 on the first tab"
+                                "name": "should not have tabindex on the first tab"
                               },
                               {
                                 "type": "it",
@@ -4897,7 +4897,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the last tab"
+                        "name": "should not have tabindex on the last tab"
                       },
                       {
                         "type": "it",
@@ -4921,7 +4921,7 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the first tab"
+                        "name": "should not have tabindex on the first tab"
                       },
                       {
                         "type": "it",
@@ -4937,20 +4937,6 @@ module.exports = {specifications: [
             "type": "describe",
             "name": "given the [Components/Containers/Tabs/React, DisabledTab] story is rendered",
             "children": [
-              {
-                "type": "describe",
-                "name": "when the Disabled Tab is clicked",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should not set \"[aria-selected=true]\" on the Disabled Tab"
-                  },
-                  {
-                    "type": "it",
-                    "name": "should leave the first tab selected"
-                  }
-                ]
-              },
               {
                 "type": "describe",
                 "name": "when the first tab is active and focused",
@@ -4961,21 +4947,7 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "it",
-                        "name": "should focus on the Disabled Tab"
-                      },
-                      {
-                        "type": "describe",
-                        "name": "when the enter key is pressed",
-                        "children": [
-                          {
-                            "type": "it",
-                            "name": "should not set \"[aria-selected=true]\" on the Disabled Tab"
-                          },
-                          {
-                            "type": "it",
-                            "name": "should leave the first tab selected"
-                          }
-                        ]
+                        "name": "should skip over the second tab and focus on the third tab"
                       }
                     ]
                   }
@@ -5013,7 +4985,7 @@ module.exports = {specifications: [
                 "children": [
                   {
                     "type": "describe",
-                    "name": "then the Delete key is pressed",
+                    "name": "then the Backspace/Delete key is pressed",
                     "children": [
                       {
                         "type": "it",
@@ -5037,7 +5009,7 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "describe",
-                        "name": "then the Delete key is pressed",
+                        "name": "then the Backspace/Delete key is pressed",
                         "children": [
                           {
                             "type": "it",
@@ -5057,7 +5029,7 @@ module.exports = {specifications: [
                           },
                           {
                             "type": "describe",
-                            "name": "then the Delete key is pressed again",
+                            "name": "then the Backspace/Delete key is pressed again",
                             "children": [
                               {
                                 "type": "it",
@@ -5075,7 +5047,7 @@ module.exports = {specifications: [
                     "children": [
                       {
                         "type": "describe",
-                        "name": "then the Delete key is pressed",
+                        "name": "then the Backspace/Delete key is pressed",
                         "children": [
                           {
                             "type": "it",
@@ -5129,7 +5101,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the second tab"
+                        "name": "should not have tabindex on the second tab"
                       },
                       {
                         "type": "it",
@@ -5161,7 +5133,7 @@ module.exports = {specifications: [
                       },
                       {
                         "type": "it",
-                        "name": "should not have tabindex=-1 on the last tab"
+                        "name": "should not have tabindex on the last tab"
                       },
                       {
                         "type": "it",
@@ -5172,58 +5144,6 @@ module.exports = {specifications: [
                 ]
               }
             ]
-          },
-          {
-            "type": "describe",
-            "name": "when [Components/Containers/Tabs/React, OverflowTabs] story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should pass axe checks"
-              },
-              {
-                "type": "it",
-                "name": "should not show the \"More\" button"
-              },
-              {
-                "type": "describe",
-                "name": "when tab list container is only 500px wide",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should pass axe checks"
-                  },
-                  {
-                    "type": "it",
-                    "name": "should show the \"More\" button"
-                  },
-                  {
-                    "type": "describe",
-                    "name": "when the \"More\" button is clicked",
-                    "children": [
-                      {
-                        "type": "it",
-                        "name": "should show the Tab overflow menu"
-                      },
-                      {
-                        "type": "describe",
-                        "name": "when the \"Sixth Tab\" is clicked",
-                        "children": [
-                          {
-                            "type": "it",
-                            "name": "should select the Sixth Tab"
-                          },
-                          {
-                            "type": "it",
-                            "name": "should move focus back to the \"More\" button"
-                          }
-                        ]
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
           }
         ]
       }
@@ -5497,140 +5417,6 @@ module.exports = {specifications: [
       }
     ]
   },
-  {
-    "type": "file",
-    "name": "TextInputLabs.spec.ts",
-    "children": [
-      {
-        "type": "describe",
-        "name": "TextInput",
-        "children": [
-          {
-            "type": "describe",
-            "name": "given the 'Basic' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              },
-              {
-                "type": "describe",
-                "name": "when clicked",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should be focused"
-                  }
-                ]
-              },
-              {
-                "type": "describe",
-                "name": "when text is entered",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should reflect the text typed"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the 'Alert' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              },
-              {
-                "type": "describe",
-                "name": "when clicked",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should be focused"
-                  }
-                ]
-              },
-              {
-                "type": "describe",
-                "name": "when text is entered",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should reflect the text typed"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the 'Error' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              },
-              {
-                "type": "describe",
-                "name": "when clicked",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should be focused"
-                  }
-                ]
-              },
-              {
-                "type": "describe",
-                "name": "when text is entered",
-                "children": [
-                  {
-                    "type": "it",
-                    "name": "should reflect the text typed"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the 'Disabled' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              },
-              {
-                "type": "it",
-                "name": "should be disabled"
-              }
-            ]
-          },
-          {
-            "type": "describe",
-            "name": "given the 'Placeholder' story is rendered",
-            "children": [
-              {
-                "type": "it",
-                "name": "should not have any axe errors"
-              },
-              {
-                "type": "it",
-                "name": "should render a placeholder text"
-              },
-              {
-                "type": "it",
-                "name": "should reflect the text typed"
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "type": "file",
     "name": "Toast.spec.ts",

package/dist/mdx/COMPOUND_COMPONENTS.mdx

@@ -78,8 +78,8 @@ const Tabs = ({children, model, ...config}) => {
 
 ## Subcomponents
 
-A subcomponent typically follows ARIA roles. For the `Tabs` example, these are the `tablist`, `tab`,
-and `tabpanel` roles. A subcomponent provides direct access to semantic or key elements of a
+A subcomponent typically follows ARIA roles. For the `Tabs` example, these are the `tablist`,
+`tab`, and `tabpanel` roles. A subcomponent provides direct access to semantic or key elements of a
 compound component. In the `IconButton` example, the icon is not semantic and might be hidden from
 screen readers while the `IconButton.Text` content is instead used for a tooltip and as the
 accessible name while being visibly hidden.
@@ -175,35 +175,35 @@ Components that directly wrap an element (most of them) will have the following
 
 Compound components are also made up of [models](#models) that accept [guards](#guards) to
 conditionally prevent state changes and [callbacks](#callbacks) to attach listeners. For example, in
-our Tabs component clicking a Tab will select that tab. The `Tabs` container component will accept a
-`shouldSelect` and a `onSelect` for the event called `select`.
+our Tabs component clicking a Tab will activate that tab. The `Tabs` container component will accept
+a `shouldActivate` and a `onActivate` for the event called `activate`.
 
 ```tsx
 const MyComponent = () => {
-  // `data` is all event data from the `select` event
+  // `data` is all event data from the `activate` event
 
   // `state` is the current state of the `Tabs` component
-  const shouldSelect = ({data, state}) => {
-    // for some reason, we only want to allow selection the 'first' tab
-    // Clicking on the first tab will select it, but clicking on the
+  const shouldActivate = ({data, state}) => {
+    // for some reason, we only want to allow activation the 'first' tab
+    // Clicking on the first tab will activate it, but clicking on the
     // second tab will do nothing
     return data.tab === 'first' ? true : false;
 
     // returning true allows the event to trigger a state change and will
-    // also call the `onSelect` callback
+    // also call the `onActivate` callback
   };
 
   // `prevState` is the previous state of the model. Callbacks are called _before_ state has resolved.
   // This means the passed state hasn't updated yet. It also means it is safe to call `setState` without
   // triggering extra renders. `setState` calls will add to React's batching system before a state changes
   // are flushed and render functions are called.
-  const onSelect = ({data, prevState}) => {
-    // called any time the `select` event is triggered
-    console.log('onSelect', data, prevState);
+  const onActivate = ({data, prevState}) => {
+    // called any time the `activate` event is triggered
+    console.log('onActivate', data, prevState);
   };
 
   return (
-    <Tabs shouldSelect={shouldSelect} onSelect={onSelect}>
+    <Tabs shouldActivate={shouldActivate} onActivate={onActivate}>
       <Tabs.List>
         <Tabs.Item name="first">First</Tabs.Item>
         <Tabs.Item name="second">Second</Tabs.Item>
@@ -324,20 +324,20 @@ const useEllipsisTooltipModel = (config = {}) => {
 
 Models are meant to be composable. For example, a `TabsModel` uses a `CursorModel` (which itself
 uses `ListModel`) and a `ListModel` for a list of panels. `TabsModel` also keeps track of which tab
-is currently selected. This might look like the following:
+is currently active. This might look like the following:
 
 ```ts
 const useTabsModel = (config = {}) => {
   // id is used for ARIA attributes
   const id = useUniqueId(config.id);
-  const [selectedTab, setSelectedTab] = React.useState('');
+  const [activeTab, setActiveTab] = React.useState('');
   const cursor = useCursorModel(config);
   const panels = useListModel(config);
 
   const state = {
     ...cursor.state, // extend the CursorModel state
     id,
-    selectedTab,
+    activeTab,
     panels: panels.state.items, // we only care about
   };
 
@@ -346,12 +346,12 @@ const useTabsModel = (config = {}) => {
     registerPanel: panels.events.registerItem,
     unregisterPanel: panels.events.unregisterItem,
 
-    select(data) {
-      if (config.shouldSelect?.({data, prevState: state}) === false) {
+    activate(data) {
+      if (config.shouldActivate?.({data, prevState: state}) === false) {
         return;
       }
-      setSelectedTab(data.tab);
-      config.onSelect?.({data, prevState: state});
+      setActiveTab(data.tab);
+      config.onActivate?.({data, prevState: state});
     },
   };
 
@@ -362,11 +362,10 @@ const useTabsModel = (config = {}) => {
 Model composition allows for components to share functionality with other components. In the Tabs
 example, `ListModel` is in charge of maintaining a list of tab elements. The `CursorModel` is in
 charge of maintaining a current cursor position of the tab list. The `Tabs.List` component uses the
-cursor to allow keyboard navigation of the tabs. The `TabsModel` also maintains the currently
-selected tab to ensure the correct `TabPanel` is visible. The `TabsModel` is also using a
-`ListModel` to maintain a list of tab panels. The `TabsModel` is in charge of composing all this and
-providing data and events to the `Tabs` compound component - coordination state between
-subcomponents.
+cursor to allow keyboard navigation of the tabs. The `TabsModel` also maintains the currently active
+tab to ensure the correct `TabPanel` is visible. The `TabsModel` is also using a `ListModel` to
+maintain a list of tab panels. The `TabsModel` is in charge of composing all this and providing data
+and events to the `Tabs` compound component - coordination state between subcomponents.
 
 Many other components like `Select`, `Breadcrumbs`, or dropdown menus can also use the `ListModel`
 and/or the `CursorModel`. These models could be thought of as abstract models where they do not
@@ -464,11 +463,11 @@ const TabList = ({children, ...elemProps}) => {
 
 A container component can either accept model configuration _or_ a model. Passing model
 configuration allows for simpler model configuration of guards, callbacks, or any other model
-configuration. The following example provides an `onSelect` callback that fetches some data from the
-server:
+configuration. The following example provides an `onActivate` callback that fetches some data from
+the server:
 
 ```tsx
-<Tabs onSelect={({data}) => fetch('/api/selectTab' + data.id)}>...</Tabs>
+<Tabs onActivate={({data}) => fetch('/api/activate' + data.id)}>...</Tabs>
 ```
 
 If you need direct access to a model's state or events, you can hoist the model into your component
@@ -480,15 +479,15 @@ look like this:
 const MyTabs = () => {
   const model = useTabsModel({
     // we can still load data from the server
-    onSelect: ({data}) => fetch('/api/selectTab' + data.id),
+    onActivate: ({data}) => fetch('/api/activate' + data.id),
   });
 
   return (
     <>
       <Tabs model={model}>...</Tabs>
-      // direct access to the model's state Currently selected tab: {model.state.selectedTab}
+      // direct access to the model's state Currently selected tab: {model.state.activeTab}
       // Now we can send events directly to the model
-      <button onClick={() => model.events.select({tab: 'third'})}>Select third tab</button>
+      <button onClick={() => model.events.activate({tab: 'third'})}>Activate third tab</button>
     </>
   );
 };

package/dist/mdx/react/button/button/Button.mdx

@@ -7,11 +7,8 @@ import {
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Primary from './examples/Primary';
-import PrimaryInverse from './examples/PrimaryInverse';
 import Secondary from './examples/Secondary';
-import SecondaryInverse from './examples/SecondaryInverse';
 import Tertiary from './examples/Tertiary';
-import TertiaryInverse from './examples/TertiaryInverse';
 import Delete from './examples/Delete';
 
 
@@ -38,17 +35,8 @@ Primary Buttons are high emphasis. Use once per screen to draw attention to the
 action. Multiple primary buttons make it confusing for the user to understand what action they
 should take. Not all screens require a Primary Button.
 
-Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
-
 <ExampleCodeBlock code={Primary} />
 
-Primary Buttons also have an `inverse` variant. While it looks similar to the default Secondary
-Button, the default outline as well as the hover and focus states are different. Use this variant
-when you need to place a Primary Button on a dark or colorful background such as `blueberry400`.
-
-<ExampleCodeBlock code={PrimaryInverse} />
-
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -61,16 +49,10 @@ Secondary Buttons have a medium level of emphasis. Use them for non-critical act
 Buttons can be used on most pages without restrictions and work well for multiple actions of equal
 weight. They can be used in conjunction with a Primary Button or independently.
 
-Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+Use the `inverse` variants on dark or colorful backgrounds.
 
 <ExampleCodeBlock code={Secondary} />
 
-Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
-a dark or colorful background such as `blueberry400`.
-
-<ExampleCodeBlock code={SecondaryInverse} />
-
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.
@@ -84,17 +66,10 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+Use the `inverse` variants on dark or colorful backgrounds.
 
 <ExampleCodeBlock code={Tertiary} />
 
-Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
-a dark or colorful background such as `blueberry400`.
-
-<ExampleCodeBlock code={TertiaryInverse} />
-
-
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.

package/dist/mdx/react/button/button/examples/Primary.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => (
-  <HStack spacing="s" padding="s">
-    <PrimaryButton>Primary</PrimaryButton>
-    <PrimaryButton icon={plusIcon} iconPosition="right">
-      Primary
-    </PrimaryButton>
-  </HStack>
-);
+export default () => <PrimaryButton>Click Me</PrimaryButton>;

package/dist/mdx/react/button/button/examples/Secondary.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
 
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => (
-  <HStack spacing="s" padding="s">
-    <SecondaryButton>Secondary</SecondaryButton>
-    <SecondaryButton icon={plusIcon} iconPosition="right">
-      Secondary
-    </SecondaryButton>
-  </HStack>
-);
+export default () => <SecondaryButton>Click Me</SecondaryButton>;

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
 
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
-import {HStack} from '@workday/canvas-kit-labs-react/layout';
-import {plusIcon} from '@workday/canvas-system-icons-web';
 
-export default () => (
-  <HStack spacing="s" padding="s">
-    <TertiaryButton>Tertiary</TertiaryButton>
-    <TertiaryButton icon={plusIcon} iconPosition="right">
-      Tertiary
-    </TertiaryButton>
-  </HStack>
-);
+export default () => <TertiaryButton>Click Me</TertiaryButton>;

package/dist/mdx/react/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost