@workday/canvas-kit-docs 14.0.0-alpha.1230-next.0 → 14.0.0-alpha.1234-next.0

package/dist/mdx/styling/mdx/CustomizingStyles.mdx

@@ -11,9 +11,9 @@ here are the following options:
 
 ### Using `createStyles` with `cs` prop
 
-Use `createStyles` in tandem with `cs` prop when you're overriding static styles and making small modifications to an
-existing Canvas Kit component like padding, color and flex properties. Take our `Text` component as
-an example.
+Use `createStyles` in tandem with `cs` prop when you're overriding static styles and making small
+modifications to an existing Canvas Kit component like padding, color and flex properties. Take our
+`Text` component as an example.
 
 ```tsx
 import {createStyles} from '@Workday/canvas-kit-styling';
@@ -45,8 +45,8 @@ const uppercaseTextStyles = createStyles({
 <Text className={uppercaseTextStyles}>My uppercased text</Text>;
 ```
 
-If you need to dynamically apply styles based on some state or prop, use [Stencils](#stencils) instead.
-
+If you need to dynamically apply styles based on some state or prop, use [Stencils](#stencils)
+instead.
 
 ## Stencils
 
@@ -54,8 +54,8 @@ Stencils can be useful when applying dynamic styles or building your own reusabl
 
 ### Extending Stencils
 
-[Stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-stencil) help you
-organize the styling of reusable components into base styles, modifiers, and variables. The
+[Stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs)
+help you organize the styling of reusable components into base styles, modifiers, and variables. The
 organization makes it more natural to produce static and clean CSS with optional extraction into CSS
 files.
 
@@ -175,5 +175,5 @@ const NavIcon = ({
 ```
 
 Another example of Stencil extension and customization is our
-[CustomButton](https://workday.github.io/canvas-kit/?path=/story/components-buttons--custom-styles)
+[CustomButton](https://workday.github.io/canvas-kit/?path=/story/components-buttons--docs#custom-styles)
 example. This example highlights the power of inheritance that you get from extending stencils.

package/dist/mdx/styling/mdx/Overview.mdx

@@ -17,7 +17,7 @@ static parsing process for build time. This system offers several key benefits:
 
 The motivation behind this custom styling solution stems from the need to move beyond IE11 support
 and implement performance improvements using static styling methods. For more details, refer to the
-[Why Canvas Kit Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs)
+[Why Canvas Kit Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-why-canvas-styling--docs)
 section.
 
 ## Overview
@@ -326,7 +326,9 @@ together and applies `className` and `style` attributes to a React element.
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>
-    For a more in depth overview, please view our <Hyperlink href="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs"> Create Styles </Hyperlink> docs.
+    For a more in depth overview, please view our [Create
+    Styles](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs)
+    docs.
   </InformationHighlight.Body>
 </InformationHighlight>
 
@@ -396,6 +398,8 @@ const ThemedCard = ({isDarkTheme, headerColor, elemProps}) => {
   <InformationHighlight.Icon />
   <InformationHighlight.Heading>Information</InformationHighlight.Heading>
   <InformationHighlight.Body>
-    For a more in depth overview, please view our <Hyperlink href="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs">Create Stencil</Hyperlink> docs.
+    For a more in depth overview, please view our [Create
+    Stencil](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs)
+    docs.
   </InformationHighlight.Body>
 </InformationHighlight>

package/dist/mdx/tokens/TokenMigrationFinal.mdx

@@ -196,6 +196,6 @@ After completing the token migration:
 ## Resources
 
 - [Canvas Tokens Documentation](https://canvas.workday.com/styles/tokens/)
-- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/features-styling-welcome--page)
+- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)
 - [Token Migration Discussion](https://github.com/Workday/canvas-tokens/discussions/77)
 - [Canvas Kit GitHub Repository](https://github.com/Workday/canvas-kit)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1230-next.0",
+  "version": "14.0.0-alpha.1234-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1230-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1230-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1234-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1234-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1234-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1234-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8080313203652737f30e578bb2ef8d4225948d6b"
+  "gitHead": "782f4efdb11b1729f0a706c900be60cfe1910391"
 }

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

@@ -1,136 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
-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';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
-
-# Canvas Kit Text Area <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `TextArea` in Preview has been deprecated and will be removed in a future major version. Please
-    use `TextArea` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs">
-    Text Area Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-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 `gap` 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 `gap` 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} />
-
-## Component API
-
-<SymbolDoc name="TextArea" fileName="/preview-react/" />
-
-## Specifications
-
-<Specifications file="TextAreaPreview.spec.ts" name="Text Area" />

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {useThemedRing} from '@workday/canvas-kit-react/common';
-import {space, colors} from '@workday/canvas-kit-react/tokens';
-import {Text} from '@workday/canvas-kit-react/text';
-
-export default () => {
-  const [value, setValue] = React.useState('Hello');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value.slice(0, 10));
-  };
-
-  const alertStyles = useThemedRing(
-    value.length < 3 ? 'success' : value.length < 7 ? 'alert' : 'error'
-  );
-
-  const hintColor =
-    value.length < 3
-      ? colors.greenApple600
-      : value.length < 7
-      ? colors.blackPepper300
-      : colors.cinnamon500;
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Add a comment</TextArea.Label>
-      <TextArea.Field cs={alertStyles} onChange={handleChange} value={value} />
-      <TextArea.Hint paddingTop={space.xxs}>
-        <strong>Character Limit: </strong>
-        <Text color={hintColor}>{10 - value.length} Left</Text>
-      </TextArea.Hint>
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Basic.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Disabled.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field disabled onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Error.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {space} from '@workday/canvas-kit-react/tokens';
-
-export default () => {
-  const [value, setValue] = React.useState('four');
-  const [hint, setHint] = React.useState('');
-  const [hasError, setHasError] = React.useState(false);
-
-  const validateInput = (value: string) => {
-    const stringLength = value.length;
-    if (stringLength !== 3) {
-      setHasError(true);
-      const hintStart = 'Word length must be';
-      setHint(stringLength < 3 ? `${hintStart} greater than 2` : `${hintStart} less than 4`);
-    } else {
-      setHasError(false);
-      setHint('');
-    }
-  };
-
-  React.useEffect(() => {
-    validateInput(value);
-    // Only run on load
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    validateInput(event.target.value);
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea error={hasError ? 'error' : undefined} orientation="vertical">
-      <TextArea.Label>A three letter word</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-      <TextArea.Hint paddingTop={space.xxs}>{hint}</TextArea.Hint>
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Grow.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical" alignItems="stretch">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/HiddenLabel.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {accessibleHide, styled} from '@workday/canvas-kit-react/common';
-
-const StyledTextAreaLabel = styled(TextArea.Label)({
-  ...accessibleHide,
-});
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical" gap="zero">
-      <StyledTextAreaLabel>Email</StyledTextAreaLabel>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/LabelPositionHorizontal.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="horizontalStart">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/LabelPositionVertical.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical" gap="xxxs">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Placeholder.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field placeholder="Let us know how we did!" onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/RefForwarding.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import {changeFocus} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-  const ref = React.useRef(null);
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  const handleClick = () => {
-    changeFocus(ref.current);
-  };
-
-  return (
-    <Flex gap="xxxs" alignItems="flex-start" flexDirection="column">
-      <TextArea orientation="vertical">
-        <TextArea.Label>Leave a review</TextArea.Label>
-        <TextArea.Field onChange={handleChange} value={value} ref={ref} />
-      </TextArea>
-      <SecondaryButton onClick={handleClick}>Focus Text Area</SecondaryButton>
-    </Flex>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/Required.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea isRequired={true} orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <TextArea.Field onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};

package/dist/mdx/preview-react/text-area/examples/ResizeConstraints.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {styled} from '@workday/canvas-kit-react/common';
-
-const StyledField = styled(TextArea.Field)({
-  resize: 'vertical',
-});
-
-export default () => {
-  const [value, setValue] = React.useState('');
-
-  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setValue(event.target.value);
-  };
-
-  return (
-    <TextArea orientation="vertical">
-      <TextArea.Label>Leave a review</TextArea.Label>
-      <StyledField onChange={handleChange} value={value} />
-    </TextArea>
-  );
-};