@workday/canvas-kit-docs 5.3.0-next.11 → 5.3.0-next.18

package/dist/mdx/6.0-MIGRATION-GUIDE.mdx

@@ -11,6 +11,30 @@ any questions about the update.
   - [Page Header](#page-header)
 - [Component Migrations](#component-migrations)
   - [Search Bar](#search-bar)
+- [Name Updates](#name-updates)
+  - [Depth Tokens](#depth-tokens)
+- [Theme Breakpoint Updates](#theme-breakpoint-updates)
+  - [Action Bar](#action-bar)
+- [Tabs Component](#tabs-component)
+- [Button Updates](#button-updates)
+  - [Primary Button](#primary-button)
+    - [Primary Disabled](#primary-disabled)
+    - [Primary Large](#primary-large)
+    - [Primary Medium](#primary-medium)
+    - [Primary Small](#primary-small)
+    - [Primary Extra Small](#primary-extra-small)
+  - [Secondary Button](#secondary-button)
+    - [Secondary Disabled](#secondary-disabled)
+    - [Secondary Large](#secondary-large)
+    - [Secondary Medium](#secondary-medium)
+    - [Secondary Small](#secondary-small)
+    - [Secondary Extra Small](#secondary-extra-small)
+  - [Tertiary Button](#tertiary-button)
+    - [Tertiary Default](#tertiary-default)
+    - [Tertiary Disabled](#tertiary-disabled)
+    - [Tertiary Medium](#tertiary-medium)
+    - [Tertiary Small](#tertiary-small)
+    - [Tertiary Extra Small](#tertiary-extra-small)
 
 ## Codemod
 
@@ -293,4 +317,238 @@ import {
 const CustomSearchForm = (props: SearchFormProps) => {
   return <SearchForm searchTheme={SearchTheme.Dark} {...props} />;
 };
-```
+```
+
+## Name Updates
+
+### Depth Tokens
+
+The `CanvasDepthValue` type has been renamed to `CanvasDepthValues` to be more consistent with our
+other token type names, such as `CanvasBorderRadiusValues`, `CanvasSpaceValues`, and
+`CanvasSpaceNumberValues`.
+
+🤖 The codemod will handle this rename transformation automatically:
+
+```ts
+// v5
+import {CanvasDepthValue} from '@workday/canvas-kit-react/tokens';
+
+type CustomDepthValues = CanvasDepthValue;
+interface OtherCustomDepthValues extends CanvasDepthValue {}
+
+// v6
+import {CanvasDepthValues} from '@workday/canvas-kit-react/tokens';
+
+type CustomDepthValues = CanvasDepthValues;
+interface OtherCustomDepthValues extends CanvasDepthValues {}
+```
+
+## Theme Breakpoint Updates
+
+Our default theme breakpoints have been updated to match the viewport ranges described in our design
+guidelines. We also updated `ActionBar`'s media query to align with this change. Those changes are
+described in [the section below](#action-bar). If you are using these default breakpoints, you will
+need to do visual regression testing to ensure there are no adverse effects to your application's
+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          |
+
+Also for reference, these are our viewport ranges:
+
+- `small` (`320px` - `767px`) Used for mobile-sized screens
+- `medium` (`768px` - `1023px`) Used for tablet-sized screens
+- `large` - (`1024px` - `1439px`) Used for laptop and small desktop screens
+- `extra-large` (`≥1440px`) Used for very large screens
+
+### Action Bar
+
+`ActionBar` was updated to use the new breakpoint values. It previously had two media queries with
+`max-width: 575px`. They now use `max-width: 767.5px` – the upper limit of the `small` range. This
+will have two effects for this component:
+
+- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than `768px` wide
+  - This was previously happening only on viewports less than `576px` wide
+- Button order will be reversed on all viewports less than `768px` wide
+  - This was previously happening only on viewports less than `576px` wide
+
+These changes in behavior are intentional and expected.
+
+## Tabs Component
+
+The Tabs API changed to support a responsive layout
+([#1325](https://github.com/Workday/canvas-kit/pull/1325)). The model API was updated to support
+more generic behaviors to allow for other components to support responsive layouts using the same
+models and behaviors. The most notable changes were concerning the state and events around tab
+selection. The verb "select" was chosen to more accurately reflect selection for more component
+types. Also selection of lists (which Tabs is based on) can support single or multiple selection.
+Selection is now stored on state as an array of selected keys.
+
+```tsx
+// v5
+const model = useTabsModel({
+  shouldActivate,
+  onActivate,
+});
+
+console.log('Selected tab', model.state.activeTab);
+model.events.activate({tab: tabName});
+
+// v6
+const model = useTabsModel({
+  shouldSelect,
+  onSelect,
+});
+
+console.log('Selected tab', model.state.selectedKey[0]);
+model.events.select({id: tabName});
+```
+
+The Tabs component can now handle responsive containers, but the support is not automatic. You must
+use the dynamic API and provide an overflow menu subcomponent. The dynamic API doesn't know the
+shape of your object, so render props must be used to instruct React how to render each item.
+
+```tsx
+// Use `useState` because React will give the same reference each render
+const [items] = React.useState([
+  {id: 'first', text: 'First Tab', contents: 'First Tab Content'},
+  {id: 'second', text: 'Second Tab', contents: 'Second Tab Content'},
+]);
+
+return (
+  <Tabs items={items}>
+    <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+      {item => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+    </Tabs.List>
+    <Tabs.Menu.Popper>
+      <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+        <Tabs.Menu.List>
+          {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+        </Tabs.Menu.List>
+      </Tabs.Menu.Card>
+    </Tabs.Menu.Popper>
+  </Tabs>
+);
+```
+
+## Button Updates
+
+All button updates for V6 are limited to our Primary, Secondary, and Tertiary buttons. Most of the
+button updates are small visual adjustments:
+
+- We tightened up tighten the spacing for visual balance and added our new type hierarchy.
+- We adjusted icon sizes for uniformity:
+  - `large`: `24px` x `24px`
+  - `medium`: `20px` x `20px`
+  - `small`: `20px` x `20px`
+  - `extraSmall`: `18px` x `18px`
+- We also adjusted the opacity for their disabled state so they behave more appropriately on varied
+  / dark backgrounds.
+
+These changes are automatic when you upgrade and do not require any manual updates in your codebase.
+However, they will likely cause any automated visual regression tests to fail, and you will need to
+update your tests accordingly. We do not expect these minor adjustments to create significant layout
+shifts in your UI. But, as with any visual update, you will want to review your UI to ensure there
+are no adverse effects.
+
+We also added some net-new features:
+
+- All buttons have a new `extraSmall` size.
+- Icons are now supported for all sizes.
+- `PrimaryButton` has a new `inverse` variant.
+
+All these changes are described in detail by button type in the sections below.
+
+### Primary Button
+
+#### Primary Disabled State
+
+Previously the button's disabled state had a `blueberry200` background, but it now uses the default
+`blueberry400` and sets the entire button to 40% opacity. This creates more consistency for the
+disabled states across all our buttons.
+
+#### Primary Large
+
+The padding for large `PrimaryButton`s has been slightly adjusted for more visual balance and to
+take up a bit less layout space. Specifically we:
+
+- decreased the space between the button icon and text from `12px` to `8px`
+- decreased the space between the button container and the icon from `28px` to `24px`
+
+#### Primary Medium
+
+The icon size for medium `PrimaryButton`s has been decreased from `24px` to `20px`, but the overall
+height of the button will remain the same.
+
+#### Primary Small
+
+We now support icons for small `PrimaryButton`s. The icons are `20px` x `20px`.
+
+#### Primary Extra Small
+
+We added a new size, `extraSmall` to our `PrimaryButton`s. These are particularly helpful for use
+cases where you have dense UI or tight layout constraints such as tables.
+
+### Secondary Button
+
+#### Secondary Large
+
+The padding for large `SecondaryButton`s has been slightly adjusted for more visual balance and to
+take up a bit less layout space. Specifically we:
+
+- decreased the space between the button icon and text from `12px` to `8px`
+- decreased the space between the button container and the icon from `28px` to `24px`
+
+#### Secondary Medium
+
+The icon size for medium `SecondaryButton`s has been decreased from `24px` to `20px`, but the
+overall height of the button will remain the same.
+
+#### Secondary Small
+
+We now support icons for small `SecondaryButton`s. The icons are `20px` x `20px`.
+
+#### Secondary Extra Small
+
+We added a new size, `extraSmall` to our `SecondaryButton`s. These are particularly helpful for use
+cases where you have dense UI or tight layout constraints such as tables.
+
+### Tertiary Button
+
+#### Tertiary Default
+
+We added an underline to the button text for all states to help distinguish it from the
+`SecondaryButton` and create more visual consistency.
+
+#### Tertiary Disabled
+
+As with our other buttons, we updated the disabled state to set the entire button to 40% opacity.
+They were previously using our light theme color at 50% opacity for icons and text.
+
+#### Tertiary Medium
+
+The medium `TertiaryButton` now uses our new type hierarchy and adjusted the padding, but the
+overall size of the button will stay the same. Specifically, we:
+
+- decreased the space between the button icon and text from `8px` to `4px`
+
+#### Tertiary Small
+
+The small `TertiaryButton` now uses our new type hierarchy and adjusted the padding, but the overall
+size of the button will stay the same. Specifically, we:
+
+- decreased the space between the button icon and text from `8px` to `4px`
+- increased the container padding outside the button text when an icon is present from `8px` to
+  `12px`
+
+#### Tertiary Extra Small
+
+We added a new size, `extraSmall` to our `TertiaryButton`s. These are particularly helpful for use
+cases where you have dense UI or tight layout constraints such as tables.

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 activate that tab. The `Tabs` container component will accept
-a `shouldActivate` and a `onActivate` for the event called `activate`.
+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`.
 
 ```tsx
 const MyComponent = () => {
-  // `data` is all event data from the `activate` event
+  // `data` is all event data from the `select` event
 
   // `state` is the current state of the `Tabs` component
-  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
+  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
     // 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 `onActivate` callback
+    // also call the `onSelect` 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 onActivate = ({data, prevState}) => {
-    // called any time the `activate` event is triggered
-    console.log('onActivate', data, prevState);
+  const onSelect = ({data, prevState}) => {
+    // called any time the `select` event is triggered
+    console.log('onSelect', data, prevState);
   };
 
   return (
-    <Tabs shouldActivate={shouldActivate} onActivate={onActivate}>
+    <Tabs shouldSelect={shouldSelect} onSelect={onSelect}>
       <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 active. This might look like the following:
+is currently selected. This might look like the following:
 
 ```ts
 const useTabsModel = (config = {}) => {
   // id is used for ARIA attributes
   const id = useUniqueId(config.id);
-  const [activeTab, setActiveTab] = React.useState('');
+  const [selectedTab, setSelectedTab] = React.useState('');
   const cursor = useCursorModel(config);
   const panels = useListModel(config);
 
   const state = {
     ...cursor.state, // extend the CursorModel state
     id,
-    activeTab,
+    selectedTab,
     panels: panels.state.items, // we only care about
   };
 
@@ -346,12 +346,12 @@ const useTabsModel = (config = {}) => {
     registerPanel: panels.events.registerItem,
     unregisterPanel: panels.events.unregisterItem,
 
-    activate(data) {
-      if (config.shouldActivate?.({data, prevState: state}) === false) {
+    select(data) {
+      if (config.shouldSelect?.({data, prevState: state}) === false) {
         return;
       }
-      setActiveTab(data.tab);
-      config.onActivate?.({data, prevState: state});
+      setSelectedTab(data.tab);
+      config.onSelect?.({data, prevState: state});
     },
   };
 
@@ -362,10 +362,11 @@ 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 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.
+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.
 
 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
@@ -463,11 +464,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 `onActivate` callback that fetches some data from
-the server:
+configuration. The following example provides an `onSelect` callback that fetches some data from the
+server:
 
 ```tsx
-<Tabs onActivate={({data}) => fetch('/api/activate' + data.id)}>...</Tabs>
+<Tabs onSelect={({data}) => fetch('/api/selectTab' + data.id)}>...</Tabs>
 ```
 
 If you need direct access to a model's state or events, you can hoist the model into your component
@@ -479,15 +480,15 @@ look like this:
 const MyTabs = () => {
   const model = useTabsModel({
     // we can still load data from the server
-    onActivate: ({data}) => fetch('/api/activate' + data.id),
+    onSelect: ({data}) => fetch('/api/selectTab' + data.id),
   });
 
   return (
     <>
       <Tabs model={model}>...</Tabs>
-      // direct access to the model's state Currently selected tab: {model.state.activeTab}
+      // direct access to the model's state Currently selected tab: {model.state.selectedTab}
       // Now we can send events directly to the model
-      <button onClick={() => model.events.activate({tab: 'third'})}>Activate third tab</button>
+      <button onClick={() => model.events.select({tab: 'third'})}>Select third tab</button>
     </>
   );
 };

package/dist/mdx/preview-react/breadcrumbs/Breadcrumbs.mdx

@@ -46,7 +46,7 @@ you'll need to add `buttonAriaLabel` to `Breadcrumbs.CollapsibleList`.
 
 <ExampleCodeBlock code={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.

package/dist/mdx/preview-react/form-field/FormField.mdx

@@ -0,0 +1,27 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+
+import Custom from './examples/Custom';
+
+
+# Canvas Kit Form Field
+
+FormField allows users to wrap input components to make them accessible. You usually won't want to
+use FormField directly but instead should use the specific component you need, e.g. `TextInput`.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Customizing With Behavior Hooks Example
+
+If you need full customization you can use the form field behavior hooks to build your own solution.
+It is also easy it work with custom components or third party libraries and get the CKR
+accessibility guarantees by using the `as` prop.
+
+<ExampleCodeBlock code={Custom} />

package/dist/mdx/preview-react/form-field/examples/Custom.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  useFormFieldHint,
+  useFormFieldInput,
+  useFormFieldLabel,
+  useFormFieldModel,
+  useFormFieldOrientation,
+  FormFieldModelContext,
+} from '@workday/canvas-kit-preview-react/form-field';
+import {useModelContext} from '@workday/canvas-kit-react/common';
+import {Stack} from '@workday/canvas-kit-labs-react/layout';
+
+const Label = ({model, children}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldLabel(localModel);
+
+  return (
+    <label {...props}>
+      {children}
+      {model.state.isRequired ? '*' : ''}
+    </label>
+  );
+};
+
+const Hint = ({model, children}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldHint(localModel);
+
+  return <span {...props}>{children}</span>;
+};
+
+const Input = ({model, ...elementProps}) => {
+  const localModel = useModelContext(FormFieldModelContext, model);
+  const props = useFormFieldInput(localModel, elementProps);
+
+  return <input type="text" required={model.state.isRequired ? true : false} {...props} />;
+};
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const model = useFormFieldModel({isRequired: true});
+
+  const layoutProps = useFormFieldOrientation('vertical')
+
+  return (
+    <Stack {...layoutProps}>
+      <Label model={model}>My Custom Field</Label>
+      <Input model={model} value={value} onChange={handleChange} />
+      <Hint model={model}>You can be anything</Hint>
+    </Stack>
+  );
+};

package/dist/mdx/preview-react/menu/examples/Icons.tsx

@@ -10,7 +10,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Title">
+    <Menu>
       <MenuItem icon={uploadCloudIcon}>First Item</MenuItem>
       <MenuItem icon={setupIcon}>Second Item (with a really really really long label)</MenuItem>
       <MenuItem isDisabled icon={uploadCloudIcon} secondaryIcon={taskContactIcon}>

package/dist/mdx/preview-react/menu/examples/ManyItems.tsx

@@ -4,7 +4,7 @@ import {Menu, MenuItem} from '@workday/canvas-kit-preview-react/menu';
 
 export default () => {
   return (
-    <Menu title="Menu Titles">
+    <Menu>
       {'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen'
         .split(' ')
         .map(item => {

package/dist/mdx/preview-react/text-area/TextArea.mdx

@@ -0,0 +1,122 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
+
+import Alert from './examples/Alert';
+import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import Error from './examples/Error';
+import Grow from './examples/Grow';
+import LabelPositionVertical from './examples/LabelPositionVertical';
+import LabelPositionHorizontal from './examples/LabelPositionHorizontal';
+import HiddenLabel from './examples/HiddenLabel';
+import Placeholder from './examples/Placeholder';
+import RefForwarding from './examples/RefForwarding';
+import Required from './examples/Required';
+import ResizeConstraints from './examples/ResizeConstraints';
+
+
+# Canvas Kit Text Area
+
+TextArea's allow users to enter and edit multiple lines of text.
+
+[> Workday Design Reference](https://design.workday.com/components/inputs/text-area)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Basic Example
+
+<ExampleCodeBlock code={Basic} />
+
+### Disabled
+
+Use `TextArea.Field`'s `disabled` prop to prevent users from interacting with the field.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Placeholder
+
+Use `TextArea.Field`'s `placeholder` prop to display a sample of its expected format or value before
+a value has been provided.
+
+<ExampleCodeBlock code={Placeholder} />
+
+### Required
+
+Use `TextArea.Field`'s `isRequired` prop (or use with the `useTextAreaModel` hook) to indicate that
+the field is required. This will also add a red asterisk to `TextArea.Label`.
+
+<ExampleCodeBlock code={Required} />
+
+### Ref Forwarding
+
+`TextArea` supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html). It will forward
+`ref` to its underlying `<textarea>` element.
+
+<ExampleCodeBlock code={RefForwarding} />
+
+### Resize Constraints
+
+Use the `resize` css attribute to restrict resizing of it to certain dimensions.
+
+<ExampleCodeBlock code={ResizeConstraints} />
+
+### Grow
+
+There are lots of ways to accomplish this. The `TextArea.Field` extends from Box so it is easy to
+extend full width, e.g. setting width prop to 100%, or you can set the `alignItems` prop to
+`stretch` on `TextArea`, etc.
+
+<ExampleCodeBlock code={Grow} />
+
+### Label Position
+
+Use the `orientation` property to set `TextArea.Label`'s position. You can override the default
+spacing using the `spacing` prop. Below are examples of both positions:
+
+#### Horizontal
+
+<ExampleCodeBlock code={LabelPositionHorizontal} />
+
+#### Vertical
+
+<ExampleCodeBlock code={LabelPositionVertical} />
+
+### Visually Hiding The Label
+
+If your label is just for screen reader users you can use the `accessibleHide` utility class from
+`@workday/canvas-kit-react/common`. You will likely want to set the `spacing` prop on `TextArea` to
+`zero`.
+
+<ExampleCodeBlock code={HiddenLabel} />
+
+### Error States
+
+Use the `hasError` property from `useTextAreaModel` to set the `TextArea` to the Error state. If you
+have an accompanying hint you can use the `TextArea.Hint` subcomponent.
+
+<ExampleCodeBlock code={Error} />
+
+### Other Visual States
+
+Use the `useThemedRing` hook to change the visual state of the `<textarea>` element.
+
+#### Alert
+
+<ExampleCodeBlock code={Alert} />
+
+## Props
+
+Undocumented props are spread to the underlying `<textarea>` element.
+
+<ArgsTable of={TextArea} />
+
+## Specifications
+
+<Specifications file="TextAreaPreview.spec.ts" name="Text Area" />