@workday/canvas-kit-docs 12.0.0-alpha.846-next.0 → 12.0.0-alpha.855-next.0

package/dist/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -39,10 +39,11 @@ A note to the reader:
 - [Codemod](#codemod)
 - [Deprecations](#deprecations)
 - [Removals](#removals)
+  - [InputIconContainer](#inputiconcontainer)
   - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
-  - [Popup, Dialog and Modal](#popup-dialog-and-modal)
-  - [Toast](#toast)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Text Area](#text-area)
 - [Style Utility Updates](#style-utility-updates)
   - [createStencil](#createstencil)
 - [Troubleshooting](#troubleshooting)
@@ -56,8 +57,8 @@ A note to the reader:
 In v12, all the components listed in this guide have started using our new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
-In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
-variables are defined. For more information on installing and using, please reference our tokens
+In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and
+the variables are defined. For more information on installing and using, please reference our tokens
 [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
 ## Deprecations
@@ -67,13 +68,24 @@ in a future major release. This signals consumers to migrate to a more stable al
 deprecated code is removed.
 
 ## Removals
-Removals are deletions from our codebase and you can no longer consume this component. We've either promoted or replaced a component or utility.
+
+Removals are deletions from our codebase and you can no longer consume this component. We've either
+promoted or replaced a component or utility.
 
 ### Select (Preview)
 
 **PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
 
-We've removed the `Select` component that was in Preview. Please use the compound [`Select` component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+We've removed the `Select` component that was in Preview. Please use the compound
+[Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+
+### InputIconContainer
+
+**PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
+
+We've removed `InputIconContainer` from Main. Please use
+[InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons)
+from Main instead.
 
 ---
 
@@ -81,6 +93,9 @@ We've removed the `Select` component that was in Preview. Please use the compoun
 
 ### Styling API and CSS Tokens
 
+**PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
+[#2795](https://github.com/Workday/canvas-kit/pull/2795)
+
 Several components have been refactored to use our new
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
 [styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
@@ -88,24 +103,32 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 
 The following components are affected:
 
-- `Popup`
 - `Dialog`
 - `Modal`
+- `Popup`
+- `TextArea`
+- `TextInput`
 - `Toast`
 
 > **Note:** These components also support our new `cs` prop for styling. Learn more about styling
 > with `cs` in our
 > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
 
-### Popup, Dialog and Modal
+### Text Area
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
 
-### Toast
+`TextAreaResizeDirection` is no longer a TypeScript enum, but a JavaScript object. This change does
+not effect runtime at all, but may cause TypeScript errors if you use `TextAreaResizeDirection` as a
+type.
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+```tsx
+// v11
+interface MyProps { resize?: TextAreaResizeDirection }
 
-## Style Utility Updates
+// 12 type ValueOf<T> = T[keyof T]; interface MyProps { resize?:
+ValueOf<typeof TextAreaResizeDirection> }
+```
 
 ## Troubleshooting
 

package/dist/mdx/react/_examples/AriaLiveRegions.mdx

@@ -1,9 +1,8 @@
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
-import FilterListWithLiveStatus from './examples/common/FilterListWithLiveStatus';
-import VisibleLiveRegion from './examples/common/VisibleLiveRegion';
-import HiddenLiveRegion from './examples/common/HiddenLiveRegion';
-import TextInputWithLiveError from './examples/common/TextInputWithLiveError';
-import IconButtonsWithLiveBadges from './examples/common/IconButtonsWithLiveBadges';
+import FilterListWithLiveStatus from './examples/AriaLiveRegions/FilterListWithLiveStatus';
+import VisibleLiveRegion from './examples/AriaLiveRegions/VisibleLiveRegion';
+import HiddenLiveRegion from './examples/AriaLiveRegions/HiddenLiveRegion';
+import TextInputWithLiveError from './examples/AriaLiveRegions/TextInputWithLiveError';
 
 
 # ARIA Live Regions
@@ -56,7 +55,7 @@ experience when moving the keyboard focus to a new element on screen isn't feasi
 
 In this example, a live region is applied to a short UI text describing the number of items shown in
 the list. As you type characters into the input, listen for the screen reader to automatically
-describe how many items in the list or shown.
+describe how many items in the list are shown.
 
 <ExampleCodeBlock code={FilterListWithLiveStatus} />
 
@@ -72,4 +71,9 @@ of error conditions. As forms increase in complexity, live regions on each error
 increasingly distracting and disruptive to the experience, especially if users are trying to first
 understand the information that is required of them to complete the task.
 
+**Note:** The `<AriaLiveRegion>` component is used inside of the `Hint` to ensure the live
+region remains in the browser DOM at all times. The `Hint` is only rendered in the DOM when it
+contains content, so it will not work reliably as a live region for screen readers using the
+`as={AriaLiveRegion}` prop.
+
 <ExampleCodeBlock code={TextInputWithLiveError} />

package/dist/mdx/react/_examples/examples/{common → AriaLiveRegions}/FilterListWithLiveStatus.tsx

@@ -1,10 +1,12 @@
 import React, {useState} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {BodyText, Heading} from '@workday/canvas-kit-react/text';
+
 import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {BodyText, Heading} from '@workday/canvas-kit-react/text';
 import {Flex} from '@workday/canvas-kit-react/layout';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system, base} from '@workday/canvas-tokens-web';
-import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {createStyles, cssVar, px2rem} from '@workday/canvas-kit-styling';
 
 const fruits = [
   'Apples',
@@ -23,13 +25,19 @@ const liveRegionStyle = createStyles({
   padding: system.space.x2,
 });
 
-const listStyles = {paddingLeft: '0px'};
+const listStyles = createStyles({
+  paddingLeft: system.space.zero,
+});
 
 const listItemStyles = createStyles({
   listStyle: 'none',
   paddingLeft: system.space.zero,
 });
 
+const flexStyles = createStyles({
+  gap: system.space.x4,
+});
+
 let filteredFruits = fruits;
 
 export default () => {
@@ -41,7 +49,7 @@ export default () => {
 
   return (
     <>
-      <Flex gap="1rem">
+      <Flex cs={flexStyles}>
         <Heading size="small">Fruits</Heading>
         <AriaLiveRegion>
           <BodyText size="small" cs={liveRegionStyle}>
@@ -49,11 +57,11 @@ export default () => {
           </BodyText>
         </AriaLiveRegion>
       </Flex>
-      <TextInput orientation="vertical">
-        <TextInput.Label>Filter Items:</TextInput.Label>
-        <TextInput.Field value={filter} onChange={handleFilter} />
-      </TextInput>
-      <ul style={listStyles}>
+      <FormField>
+        <FormField.Label>Filter Items:</FormField.Label>
+        <FormField.Input as={TextInput} value={filter} onChange={handleFilter} />
+      </FormField>
+      <ul className={listStyles}>
         {filteredFruits.map(i => (
           <BodyText size="small" as="li" cs={listItemStyles} key={i}>
             {i}

package/dist/mdx/react/_examples/examples/AriaLiveRegions/HiddenLiveRegion.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import {AccessibleHide, AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+let liveRegionStr = '';
+
+const flexStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <Flex as="form" aria-label="Hidden Live Region" onSubmit={handleSendMessage} cs={flexStyles}>
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+      <AriaLiveRegion>
+        <Text as={AccessibleHide}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/TextInputWithLiveError.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const hintStyles = createStyles({
+  height: system.space.x6,
+});
+export default () => {
+  const errMsg = 'Error: First name is required.';
+  const [hasError, setHasError] = React.useState('no');
+  const inputRef = React.useRef(null);
+  const handleBlur = e => setHasError(e.target.value.trim().length === 0 ? 'error' : 'no');
+  const handleSubmit = () => hasError && changeFocus(inputRef.current);
+
+  return (
+    <>
+      <FormField error={hasError === 'error' ? 'error' : undefined} isRequired={true}>
+        <FormField.Label>First Name:</FormField.Label>
+        <FormField.Input as={TextInput} onBlur={handleBlur} ref={inputRef} />
+        <FormField.Hint cs={hintStyles}>
+          <AriaLiveRegion>{hasError === 'error' && errMsg}</AriaLiveRegion>
+        </FormField.Hint>
+      </FormField>
+      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
+    </>
+  );
+};

package/dist/mdx/react/_examples/examples/AriaLiveRegions/VisibleLiveRegion.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {AriaLiveRegion} from '@workday/canvas-kit-react/common';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Text} from '@workday/canvas-kit-react/text';
+import {TextInput} from '@workday/canvas-kit-react/text-input';
+import {system, base} from '@workday/canvas-tokens-web';
+import {createStyles, px2rem, calc} from '@workday/canvas-kit-styling';
+
+const liveRegionStyle = createStyles({
+  border: `${px2rem(1)} solid ${system.color.border.caution.default}`,
+  backgroundColor: system.color.bg.caution.default,
+  padding: system.space.x4,
+  display: 'block',
+  marginBlockStart: system.space.x4,
+  marginBlockEnd: system.space.x4,
+  width: calc.multiply(system.space.x16, 7),
+});
+
+const flexGapStyles = createStyles({
+  gap: system.space.x4,
+  alignItems: 'center',
+});
+
+let liveRegionStr = 'This is an ARIA Live Region!';
+
+export default () => {
+  const [message, setMessage] = React.useState('');
+
+  function handleChange(e) {
+    setMessage(e.target.value);
+  }
+
+  function handleSendMessage(e) {
+    e.preventDefault();
+    liveRegionStr = message;
+    setMessage('');
+  }
+
+  return (
+    <>
+      <AriaLiveRegion>
+        <Text cs={liveRegionStyle}>{liveRegionStr}</Text>
+      </AriaLiveRegion>
+      <Flex
+        as="form"
+        aria-label="Visible Live Region"
+        onSubmit={handleSendMessage}
+        cs={flexGapStyles}
+      >
+        <FormField>
+          <FormField.Label>Type your message:</FormField.Label>
+          <FormField.Input as={TextInput} onChange={handleChange} value={message} />
+        </FormField>
+        <PrimaryButton type="submit">Send Message</PrimaryButton>
+      </Flex>
+    </>
+  );
+};

package/dist/mdx/react/popup/Popup.mdx

@@ -10,6 +10,7 @@ import FocusRedirect from './examples/FocusRedirect';
 import FocusTrap from './examples/FocusTrap';
 import RTL from './examples/RTL';
 import CustomTarget from './examples/CustomTarget';
+import ExternalWindow from './examples/ExternalWindow';
 import FullScreen from './examples/FullScreen';
 
 
@@ -159,6 +160,16 @@ the popup's stack context when entering/exiting fullscreen.
 
 <ExampleCodeBlock code={FullScreen} />
 
+### Opening an External Window
+
+A popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent
+is replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle
+of the extenal window. Be sure to connect the `unload` event of both the parent `window` and the
+external child `window` to the lifecycle of the Popup model to prevent memory leaks or zombie
+windows.
+
+<ExampleCodeBlock code={ExternalWindow} />
+
 ### RTL
 
 The Popup component automatically handles right-to-left rendering.
@@ -170,8 +181,8 @@ The Popup component automatically handles right-to-left rendering.
 ## Component API
 
 <>
-<SymbolDoc name="Popper" fileName="/react/" />
-<SymbolDoc name="Popup" fileName="/react/" />
+  <SymbolDoc name="Popper" fileName="/react/" />
+  <SymbolDoc name="Popup" fileName="/react/" />
 </>
 
 ## Hooks

package/dist/mdx/react/popup/examples/ExternalWindow.tsx

@@ -0,0 +1,176 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {system} from '@workday/canvas-tokens-web';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {infoIcon} from '@workday/canvas-system-icons-web';
+
+import {
+  CanvasProvider,
+  ContentDirection,
+  createSubcomponent,
+  PartialEmotionCanvasTheme,
+  useMount,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+export interface ExternalWindowPortalProps {
+  /**
+   * Child components of WindowPortal
+   */
+  children: React.ReactNode;
+  /**
+   * Callback to close the popup
+   */
+  onWindowClose?: () => void;
+  /**
+   * Width of the popup window
+   */
+  width?: number;
+  /**
+   * Height of the popup window
+   */
+  height?: number;
+  /**
+   * The name of the popup window. If another popup opens with the same name, that instance will
+   * be reused. Use caution with setting this value
+   */
+  target?: string;
+}
+
+async function copyAssets(sourceDoc: Document, targetDoc: Document) {
+  for (const font of (sourceDoc as any).fonts.values()) {
+    (targetDoc as any).fonts.add(font);
+
+    font.load();
+  }
+
+  await (targetDoc as any).fonts.ready;
+
+  // The current ES lib version doesn't include iterable interfaces, so we cast as an iterable
+  for (const styleSheet of sourceDoc.styleSheets as StyleSheetList & Iterable<CSSStyleSheet>) {
+    if (styleSheet.cssRules) {
+      // text based styles
+      const styleEl = targetDoc.createElement('style');
+      for (const cssRule of styleSheet.cssRules as CSSRuleList & Iterable<CSSRule>) {
+        styleEl.appendChild(targetDoc.createTextNode(cssRule.cssText));
+      }
+      targetDoc.head.appendChild(styleEl);
+    } else if (styleSheet.href) {
+      // link based styles
+      const linkEl = targetDoc.createElement('link');
+
+      linkEl.rel = 'stylesheet';
+      linkEl.href = styleSheet.href;
+      targetDoc.head.appendChild(linkEl);
+    }
+  }
+}
+
+const ExternalWindowPortal = ({
+  children,
+  width = 300,
+  height = 500,
+  target = '',
+  onWindowClose,
+}: ExternalWindowPortalProps) => {
+  const [portalElement, setPortalElement] = React.useState<HTMLDivElement | null>(null);
+
+  useMount(() => {
+    const newWindow = window.open(
+      '', // url
+      target,
+      `width=${width},height=${height},left=100,top=100,popup=true`
+    );
+
+    if (newWindow) {
+      // copy fonts and styles
+      copyAssets(document, newWindow.document);
+
+      const element = newWindow.document.createElement('div');
+      newWindow.document.body.appendChild(element);
+      setPortalElement(element);
+    } else {
+      onWindowClose();
+    }
+
+    const closeWindow = event => {
+      onWindowClose();
+    };
+
+    window.addEventListener('unload', closeWindow);
+    newWindow?.addEventListener('unload', closeWindow);
+
+    return () => {
+      window.removeEventListener('unload', closeWindow);
+      newWindow?.removeEventListener('unload', closeWindow);
+      newWindow?.close();
+    };
+  });
+
+  if (!portalElement) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(<CanvasProvider>{children}</CanvasProvider>, portalElement);
+};
+
+const PopupExternalWindow = createSubcomponent()({
+  displayName: 'Popup.ExternalWindow',
+  modelHook: usePopupModel,
+})<ExternalWindowPortalProps>(({children, ...elemProps}, Element, model) => {
+  if (model.state.visibility === 'visible') {
+    return (
+      <ExternalWindowPortal onWindowClose={model.events.hide} {...elemProps}>
+        {children}
+      </ExternalWindowPortal>
+    );
+  }
+
+  return null;
+});
+
+export default () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      // Switch to `ContentDirection.RTL` to change direction
+      direction: ContentDirection.LTR,
+    },
+  });
+
+  const model = usePopupModel();
+
+  return (
+    <CanvasProvider theme={canvasTheme}>
+      <>
+        <main className={mainContentStyles}>
+          <p>Popup that opens a new Operating System Window</p>
+          <Popup model={model}>
+            <Tooltip title="Open External Window Tooltip">
+              <Popup.Target>Open External Window</Popup.Target>
+            </Tooltip>
+            <PopupExternalWindow>
+              <p>External Window Contents! Mouse over the info icon to get a tooltip</p>
+              <Flex gap="s">
+                <Tooltip title="More information">
+                  <SecondaryButton icon={infoIcon} />
+                </Tooltip>
+                <Popup.CloseButton>Close Window</Popup.CloseButton>
+              </Flex>
+            </PopupExternalWindow>
+          </Popup>
+          <p>Popup visibility: {model.state.visibility}</p>
+        </main>
+      </>
+    </CanvasProvider>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.846-next.0",
+  "version": "12.0.0-alpha.855-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,13 +44,13 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.846-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.846-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.846-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.846-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.855-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.855-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.855-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.855-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
-    "markdown-to-jsx": "^6.10.3",
+    "markdown-to-jsx": "^7.2.0",
     "ts-node": "^10.9.1"
   },
   "devDependencies": {
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "92573a5cb42a250072618c814c0bc78edaf0480a"
+  "gitHead": "9bf5667e2a94b160d69cb88c2e053d29760a34a9"
 }

package/dist/mdx/react/_examples/examples/common/HiddenLiveRegion.tsx

@@ -1,30 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {AriaLiveRegion, AccessibleHide} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {system} from '@workday/canvas-tokens-web';
-
-export default () => {
-  const [message, setMessage] = useState('This is an ARIA Live Region!');
-  const inputRef = useRef();
-  function handleSendMessage() {
-    setMessage(inputRef.current.value);
-    inputRef.current.value = '';
-  }
-
-  return (
-    <>
-      <Flex gap={`var(${system.space.x4})`} alignItems="flex-end">
-        <TextInput orientation="vertical">
-          <TextInput.Label>Type your message:</TextInput.Label>
-          <TextInput.Field ref={inputRef} />
-        </TextInput>
-        <PrimaryButton onClick={handleSendMessage}>Send Message</PrimaryButton>
-      </Flex>
-      <AriaLiveRegion>
-        <AccessibleHide>{message}</AccessibleHide>
-      </AriaLiveRegion>
-    </>
-  );
-};

package/dist/mdx/react/_examples/examples/common/TextInputWithLiveError.tsx

@@ -1,25 +0,0 @@
-import React, {useState, useRef} from 'react';
-import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {AriaLiveRegion, changeFocus} from '@workday/canvas-kit-react/common';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-
-export default () => {
-  const errMsg = 'Error: First name is required.';
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef();
-  const handleBlur = e => setHasError(e.target.value.trim().length === 0);
-  const handleSubmit = () => hasError && changeFocus(inputRef.current);
-
-  return (
-    <>
-      <TextInput orientation="vertical" hasError={hasError} isRequired={true}>
-        <TextInput.Label>First Name:</TextInput.Label>
-        <TextInput.Field onBlur={handleBlur} ref={inputRef} />
-        <TextInput.Hint height={'16px'}>
-          <AriaLiveRegion>{hasError && errMsg}</AriaLiveRegion>
-        </TextInput.Hint>
-      </TextInput>
-      <PrimaryButton onClick={handleSubmit}>Continue</PrimaryButton>
-    </>
-  );
-};