@workday/canvas-kit-docs 5.2.7 → 5.3.0-next.9

package/dist/commonjs/lib/specs.js

@@ -5417,6 +5417,140 @@ 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/es6/lib/specs.js

@@ -5417,6 +5417,140 @@ 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/6.0-MIGRATION-GUIDE.mdx

@@ -0,0 +1,296 @@
+# Canvas Kit 6.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v6. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions about the update.
+
+- [Codemod](#codemod)
+- [Component Deprecations](#component-deprecations)
+  - [Cookie Banner](#cookie-banner)
+  - [Header & Global Header](#header--global-header)
+  - [Page Header](#page-header)
+- [Component Migrations](#component-migrations)
+  - [Search Bar](#search-bar)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with a majority of the breaking changes in the migration
+from Canvas Kit v5 to v6:
+
+```sh
+> npx @workday/canvas-kit-codemod v6 [path]
+```
+
+> Note: This codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` extensions. You may need to make
+> some manual changes in other file types (`.json`, `.mdx`, `.md`, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as it's resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+**Breaking changes accounted for by this codemod will be marked with a 🤖.**
+
+**Please verify all changes made by the codemod. As a safety precaution, we recommend committing the
+changes from the codemod as a single isolated commit (separate from other changes) so you can
+rollback more easily if necessary.**
+
+[Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
+encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
+help us maintain additional codemod transforms to make future migrations easier.
+
+## Component Deprecations
+
+### Deprecation Types
+
+There are two types of deprecations: soft and hard.
+
+#### Soft Deprecation
+
+A soft-deprecated component is still available with its full functionality, but it will have been
+renamed with a prefix to indicate its soft-deprecated status. It will also include a console warning
+to announce its deprecation. This warning will only be triggered on the component's initial render.
+
+Soft-deprecated types and utilities will also be renamed but generally will not trigger a console
+warning.
+
+#### Hard Deprecation
+
+A hard-deprecated component or package is no longer available. You will need to follow the method
+prescribed in our migration guide to update your application. Please reach out to our team directly
+if you need additional help.
+
+### Cookie Banner
+
+We are [soft deprecating](#soft-deprecation) `CookieBanner`. It has been renamed to
+`DeprecatedCookieBanner`. Similarly, `CookieBannerProps` has been renamed to
+`DeprecatedCookieBannerProps`. You may continue to use this component exactly as you did in v5, but
+note that we plan to [hard-deprecate](#hard-deprecation) it in Canvas Kit v7.
+
+🤖 The codemod will rename `CookieBanner` and `CookieBannerProps` to their deprecated names:
+
+```tsx
+// v5
+import CookieBanner, {CookieBannerProps} from '@workday/canvas-kit-react/cookie-banner';
+
+export const CustomCookieBanner = (props: CookieBannerProps) => {
+  return <CookieBanner notice={CookieBanner.DefaultNotice} {...props} />;
+};
+
+// v6
+import DeprecatedCookieBanner, {
+  DeprecatedCookieBannerProps,
+} from '@workday/canvas-kit-react/cookie-banner';
+
+export const CustomCookieBanner = (props: DeprecatedCookieBannerProps) => {
+  return <DeprecatedCookieBanner notice={DeprecatedCookieBanner.DefaultNotice} {...props} />;
+};
+```
+
+```tsx
+// v5
+import {CookieBanner, CookieBannerProps} from '@workday/canvas-kit-react';
+
+interface CustomCookieBannerProps extends CookieBannerProps {
+  // custom page header props
+}
+
+export const CustomCookieBanner = (props: CustomCookieBannerProps) => {
+  return <CookieBanner notice={CookieBanner.DefaultNotice} {...props} />;
+};
+
+// v6
+import {DeprecatedCookieBanner, DeprecatedCookieBannerProps} from '@workday/canvas-kit-react';
+
+interface CustomCookieBannerProps extends DeprecatedCookieBannerProps {
+  // custom page header props
+}
+
+export const CustomCookieBanner = (props: CustomCookieBannerProps) => {
+  return <DeprecatedCookieBanner notice={DeprecatedCookieBanner.DefaultNotice} {...props} />;
+};
+```
+
+### Header & Global Header
+
+We are [soft deprecating](#soft-deprecation) `Header` and `GlobalHeader` and their related exports.
+They has been renamed to `DeprecatedHeader` and `DeprecatedGlobalHeader`, respectively. You may
+continue to use these components exactly as you did in v5, but note that we plan to
+[hard-deprecate](#hard-deprecation) this package in Canvas Kit v7.
+
+> Note: `SearchBar` is not being deprecated but will instead move to its own dedictated package. You
+> can read more [here](#search-bar).
+
+🤖 The codemod will handle all these changes automatically:
+
+- Rename import specifiers
+  - `DubLogoTitle` becomes `DeprecatedDubLogoTitle`
+  - `GlobalHeader` becomes `DeprecatedGlobalHeader`
+  - `Header` becomes `DeprecatedHeader`
+  - `HeaderHeight` becomes `DeprecatedHeaderHeight`
+  - `HeaderTheme` becomes `DeprecatedHeaderTheme`
+  - `HeaderVariant` becomes `DeprecatedHeaderVariant`
+  - `ThemeAttributes` becomes `DeprecatedHeaderThemeAttributes`
+  - `Themes` becomes `DeprecatedHeaderThemes`
+  - `WorkdayLogoTitle` becomes `DeprecatedWorkdayLogoTitle`
+  - `themes` becomes `deprecatedHeaderThemes`
+- Rename JSX identifiers
+  - `<DubLogoTitle>` becomes `<DeprecatedDubLogoTitle>`
+  - `<GlobalHeader>` becomes `<DeprecatedGlobalHeader>`
+  - `<Header>` becomes `<DeprecatedHeader>`
+  - `<WorkdayLogoTitle>` becomes `<DeprecatedWorkdayLogoTitle>`
+- Rename type references and interface declarations
+  - `type CustomHeaderHeight = HeaderHeight;` becomes
+    `type CustomHeaderHeight = DeprecatedHeaderHeight;`
+  - `type CustomHeaderTheme = HeaderTheme;` becomes
+    `type CustomHeaderTheme = DeprecatedHeaderTheme;`
+  - `type CustomHeaderVariant = HeaderVariant;` becomes
+    `type CustomHeaderVariant = DeprecatedHeaderVariant;`
+  - `type CustomThemeAttributes = ThemeAttributes;` becomes
+    `type CustomThemeAttributes = DeprecatedHeaderThemeAttributes;`
+  - `type CustomThemes = Themes;` becomes `type CustomThemes = DeprecatedHeaderThemes;`
+- Rename member expressions
+  - `HeaderHeight.Small` becomes `DeprecatedHeaderHeight.Small`
+  - `HeaderTheme.White` becomes `DeprecatedHeaderTheme.White`
+  - `HeaderVariant.Full` becomes `DeprecatedHeaderVariant.Full`
+  - `themes.Blue` becomes `deprecatedHeaderThemes.Blue`
+  - `Header.Variant.Global` becomes `DeprecatedHeader.Variant.Global`
+
+```tsx
+// v5
+import Header, {DubLogoTitle, GlobalHeader} from '@workday/canvas-kit-labs-react/header';
+
+const CustomGlobalHeader = props => {
+  return (
+    <GlobalHeader
+      brand={
+        <a href="#">
+          <DubLogoTitle themeColor={Header.Theme.White} />
+        </a>
+      }
+      {...props}
+    />
+  );
+};
+
+// v6
+import DeprecatedHeader, {
+  DeprecatedDubLogoTitle,
+  DeprecatedGlobalHeader,
+} from '@workday/canvas-kit-labs-react/header';
+
+const CustomGlobalHeader = props => {
+  return (
+    <DeprecatedGlobalHeader
+      brand={
+        <a href="#">
+          <DeprecatedDubLogoTitle themeColor={DeprecatedHeader.Theme.White} />
+        </a>
+      }
+      {...props}
+    />
+  );
+};
+```
+
+### Page Header
+
+We are [soft-deprecating](#soft-deprecation) `PageHeader`. It has been renamed to
+`DeprecatedPageHeader`. Similarly, `PageHeaderProps` has been renamed to
+`DeprecatedPageHeaderProps`. You may continue to use this component exactly as you did in v5, but
+note that we plan to [hard-deprecate](#hard-deprecation) it in Canvas Kit v7.
+
+🤖 The codemod will rename `PageHeader` and `PageHeaderProps` to their deprecated names:
+
+```tsx
+// v5
+import PageHeader, {PageHeaderProps} from '@workday/canvas-kit-react/page-header';
+
+export const CustomPageHeader = (props: PageHeaderProps) => {
+  return <PageHeader {...props} />;
+};
+
+// v6
+import DeprecatedPageHeader, {
+  DeprecatedPageHeaderProps,
+} from '@workday/canvas-kit-react/page-header';
+
+export const CustomPageHeader = (props: DeprecatedPageHeaderProps) => {
+  return <DeprecatedPageHeader {...props} />;
+};
+```
+
+```tsx
+// v5
+import {PageHeader, PageHeaderProps} from '@workday/canvas-kit-react';
+
+interface CustomPageHeaderProps extends PageHeaderProps {
+  // custom page header props
+}
+
+export const CustomPageHeader = (props: CustomPageHeaderProps) => {
+  return <PageHeader {...props} />;
+};
+
+// v6
+import {DeprecatedPageHeader, DeprecatedPageHeaderProps} from '@workday/canvas-kit-react';
+
+interface CustomPageHeaderProps extends DeprecatedPageHeaderProps {
+  // custom page header props
+}
+
+export const CustomPageHeader = (props: CustomPageHeaderProps) => {
+  return <DeprecatedPageHeader {...props} />;
+};
+```
+
+## Component Migrations
+
+### Search Bar
+
+`SeachBar` is being renamed to `SearchForm` and is moving out of
+`@workday/canvas-kit-labs-react/header` into its own dedicated package,
+`@workday/canvas-kit-labs-react/search-form`. The component has not been modified and you may
+continue to use this component exactly as you did in v5.
+
+🤖 The codemod will handle all these changes automatically:
+
+- Rename import sources
+  - `@workday/canvas-kit-labs-react/header` becomes `@workday/canvas-kit-labs-react/search-form`
+- Rename import specifiers
+  - `SearchBar` becomes `SearchForm`
+  - `SearchBarProps` becomes `SearchFormProps`
+  - `SearchBarState` becomes `SearchFormState`
+- Rename JSX identifiers
+  - `<SearchBar>` becomes `<SearchForm>`
+- Rename type references and interface declarations
+  - `type CustomSearchProps = SearchBarProps;` becomes `type CustomSearchProps = SearchFormProps;`
+  - `interface CustomSearchProps extends SearchBarProps` becomes
+    `interface CustomSearchProps extends SearchFormProps`
+
+```tsx
+// v5
+import {
+  SearchBar,
+  SearchBarProps,
+  SearchBarState,
+  SearchThemeAttributes,
+  SearchTheme,
+} from '@workday/canvas-kit-labs-react/header';
+
+const CustomSearchForm = (props: SearchFormProps) => {
+  return <SearchForm searchTheme={SearchTheme.Dark} {...props} />;
+};
+
+// v6
+import {
+  SearchForm,
+  SearchFormProps,
+  SearchFormState,
+  SearchThemeAttributes,
+  SearchTheme,
+} from '@workday/canvas-kit-labs-react/search-form';
+
+const CustomSearchForm = (props: SearchFormProps) => {
+  return <SearchForm searchTheme={SearchTheme.Dark} {...props} />;
+};
+```

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -0,0 +1,64 @@
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+// examples
+import Basic from './examples/Basic';
+import CustomTheme from './examples/CustomTheme';
+import Grow from './examples/Grow';
+import RTL from './examples/RTL';
+import Theming from './examples/Theming';
+import ThemeAttributes from './examples/PropTables.splitProps';
+
+
+# Canvas Kit Search Form
+
+`SearchForm` is a search form that contains a `Combobox` for rendering search results. It's
+primarily intended to be used within a `Header`.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-labs-react
+```
+
+## Usage
+
+### Basic Example
+
+You will most likely use `SearchForm` within the context of a `Header` component, but it's helpful
+to see its functionality as a standalone component. Below is a basic example that filters results
+based on search input.
+
+<ExampleCodeBlock code={Basic} />
+
+### Grow
+
+If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to
+`true`.
+
+<ExampleCodeBlock code={Grow} />
+
+### Theming
+
+`SearchForm` can be themed to use one of the preset `SearchThemes`: `Light`, `Dark`, or
+`Transparent`. Below is an example of `SearchForm` using the `Dark` theme.
+
+<ExampleCodeBlock code={Theming} />
+
+You can also provide more specific theming values by providing specific `SearchThemeAttributes`.
+
+<ExampleCodeBlock code={CustomTheme} />
+
+Below is a table of attributes that can be supplied to `SearchForm`:
+
+<ArgsTable of={ThemeAttributes} />
+
+
+### RTL (Right-To-Left)
+
+`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
+additional configuration.
+
+<ExampleCodeBlock code={RTL} />
+
+## Props
+
+<ArgsTable of={SearchForm} />

package/dist/mdx/labs-react/search-form/examples/Basic.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {MenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
+
+const initialWineList = [
+  'Beaujolais',
+  'Bordeaux',
+  'Cabernet Sauvignon',
+  'Champagne',
+  'Chardonnay',
+  'Chianti',
+  'Malbec',
+  'Merlot',
+  'Pinot Grigio',
+  'Pinot Gris',
+  'Pinot Noir',
+  'Primitivo',
+  'Prosecco',
+  'Riesling',
+  'Rioja',
+  'Rosé',
+  'Sauvignon Blanc',
+  'Syrah',
+  'Zinfandel',
+];
+
+export default () => {
+  const [wineList, setWineList] = React.useState(initialWineList);
+  // Tracking the input value for onSubmit
+  const [searchInput, setSearchInput] = React.useState('');
+  const menuItems = wineList.map(wine => <MenuItem key={wine}>{wine}</MenuItem>);
+
+  const filterMenuItems = e => {
+    setSearchInput(e.target.value);
+    const formattedValue = e.target.value.toLowerCase();
+
+    // Reset the list if the input is cleared
+    if (!formattedValue.length) {
+      setWineList(initialWineList);
+    } else {
+      const filteredItems = wineList.filter(wine => wine.toLowerCase().startsWith(formattedValue));
+      setWineList(filteredItems);
+    }
+  };
+
+  const handleSubmit = () => {
+    // We don't need to prevent the default event because SearchForm handles that internally
+    console.log(`Searching for: ${searchInput}`);
+  };
+
+  return (
+    <Flex minHeight={200} alignItems="flex-start" padding="xs">
+      <SearchForm
+        autocompleteItems={menuItems}
+        onInputChange={filterMenuItems}
+        onSubmit={handleSubmit}
+      />
+    </Flex>
+  );
+};