@workday/canvas-kit-labs-react 5.3.0-next.3 → 5.3.0-next.32

package/dist/es6/search-form/lib/SearchForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchForm.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/SearchForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAA2B,MAAM,kCAAkC,CAAC;AAM1F,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAgB,WAAW,EAAC,MAAM,UAAU,CAAC;AAG1E,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAChG;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC/E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAsB;IAErC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAI9B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,eAAe;IAWzE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAmGP"}

package/dist/es6/{header/lib/parts/SearchBar.js → search-form/lib/SearchForm.js}

@@ -35,16 +35,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
-import { styled } from '@workday/canvas-kit-react/common';
+import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
 import { IconButton } from '@workday/canvas-kit-react/button';
 import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
 import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
 import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
 import { TextInput } from '@workday/canvas-kit-react/text-input';
-import { searchThemes } from '../shared/themes';
-import { SearchTheme } from '../shared/types';
+import { searchThemes, SearchTheme } from './themes';
 import chroma from 'chroma-js';
-import uuid from 'uuid/v4';
 function getInputColors(theme, isFocused) {
     return {
         background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
@@ -59,7 +57,7 @@ function getInputColors(theme, isFocused) {
 var formCollapsedBackground = colors.frenchVanilla100;
 var maxWidth = 480;
 var minWidth = 120;
-var SearchForm = styled('form')({
+var StyledSearchForm = styled('form')({
     position: 'relative',
     flex: "1 1 auto",
     display: 'flex',
@@ -186,13 +184,13 @@ var SearchInput = styled(TextInput)(function (_a) {
             },
         } }, collapseStyles);
 });
-var SearchBar = /** @class */ (function (_super) {
-    __extends(SearchBar, _super);
-    function SearchBar() {
+var SearchForm = /** @class */ (function (_super) {
+    __extends(SearchForm, _super);
+    function SearchForm() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.inputRef = React.createRef();
         _this.openRef = React.createRef();
-        _this.labelId = uuid();
+        _this.labelId = generateUniqueId();
         _this.state = {
             showForm: false,
             searchQuery: '',
@@ -269,7 +267,7 @@ var SearchBar = /** @class */ (function (_super) {
         };
         return _this;
     }
-    SearchBar.prototype.componentDidUpdate = function (prevProps, prevState) {
+    SearchForm.prototype.componentDidUpdate = function (prevProps, prevState) {
         var showFormToggled = this.state.showForm !== prevState.showForm;
         if (showFormToggled) {
             if (this.state.showForm) {
@@ -280,18 +278,18 @@ var SearchBar = /** @class */ (function (_super) {
             }
         }
     };
-    SearchBar.prototype.render = function () {
+    SearchForm.prototype.render = function () {
         var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
-        return (React.createElement(SearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
+        return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
             React.createElement(SearchContainer, { height: height },
                 React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
                 React.createElement(SearchIcon, { "aria-label": openButtonAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", isHidden: !isCollapsed || (!!isCollapsed && this.state.showForm) }),
                 React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
                     React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
-                        React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search" }))),
+                        React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
                 React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
     };
-    SearchBar.Theme = SearchTheme;
-    return SearchBar;
+    SearchForm.Theme = SearchTheme;
+    return SearchForm;
 }(React.Component));
-export { SearchBar };
+export { SearchForm };

package/dist/es6/search-form/lib/themes.d.ts

@@ -0,0 +1,21 @@
+export declare enum SearchTheme {
+    Light = 0,
+    Dark = 1,
+    Transparent = 2
+}
+export interface SearchThemeAttributes {
+    background?: string;
+    backgroundFocus?: string;
+    backgroundHover?: string;
+    color?: string;
+    colorFocus?: string;
+    placeholderColor?: string;
+    placeholderColorFocus?: string;
+    boxShadow?: string | string[];
+    boxShadowFocus?: string | string[];
+}
+export interface SearchThemes {
+    [key: string]: SearchThemeAttributes;
+}
+export declare const searchThemes: SearchThemes;
+//# sourceMappingURL=themes.d.ts.map

package/dist/es6/search-form/lib/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../search-form/lib/themes.ts"],"names":[],"mappings":"AAGA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AACD,MAAM,WAAW,qBAAqB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACpC;AAED,MAAM,WAAW,YAAY;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG,qBAAqB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,EAAE,YA6B1B,CAAC"}

package/dist/es6/search-form/lib/themes.js

@@ -0,0 +1,39 @@
+var _a;
+import { focusRing } from '@workday/canvas-kit-react/common';
+import { colors } from '@workday/canvas-kit-react/tokens';
+export var SearchTheme;
+(function (SearchTheme) {
+    SearchTheme[SearchTheme["Light"] = 0] = "Light";
+    SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
+    SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
+})(SearchTheme || (SearchTheme = {}));
+export var searchThemes = (_a = {},
+    _a[SearchTheme.Transparent] = {
+        background: 'rgba(0, 0, 0, 0)',
+        backgroundFocus: 'rgba(0, 0, 0, 0)',
+        color: colors.blackPepper300,
+        colorFocus: colors.blackPepper300,
+        placeholderColor: colors.licorice300,
+        placeholderColorFocus: colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: 'none',
+    },
+    _a[SearchTheme.Light] = {
+        background: colors.soap200,
+        backgroundFocus: colors.soap200,
+        backgroundHover: colors.soap300,
+        color: colors.blackPepper300,
+        placeholderColor: colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: focusRing().boxShadow,
+    },
+    _a[SearchTheme.Dark] = {
+        background: 'rgba(0, 0, 0, 0.2)',
+        backgroundFocus: colors.frenchVanilla100,
+        color: colors.frenchVanilla100,
+        colorFocus: colors.blackPepper300,
+        placeholderColor: colors.frenchVanilla100,
+        placeholderColorFocus: colors.licorice300,
+        boxShadow: 'none',
+    },
+    _a);

package/header/README.md

@@ -1,4 +1,4 @@
-# Canvas Kit Labs React Header
+# Canvas Kit Labs React Header (Deprecated)
 
 <a href="https://github.com/Workday/canvas-kit/tree/master/modules/labs-react/README.md">
   <img src="https://img.shields.io/badge/LABS-alpha-orange" alt="LABS: Alpha" />
@@ -8,10 +8,6 @@ A set of components to create headers for various Workday applications and sites
 
 For a full suite of examples, have a look at the [Header Stories](./stories.tsx).
 
-## Coming Soon
-
-- Mobile Expanded Nav
-
 ## Installation
 
 ```sh
@@ -26,13 +22,13 @@ This component renders a responsive, Canvas-style header.
 
 ```tsx
 import * as React from 'react';
-import {Header} from '@workday/canvas-kit-labs-react/header';
+import {DeprecatedHeader} from '@workday/canvas-kit-labs-react/header';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {notificationsIcon} from '@workday/canvas-system-icons-web';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
-<Header title="Header" brandUrl="#">
+<DeprecatedHeader title="Header" brandUrl="#">
   <nav>
     <ul>
       <li className="current">
@@ -62,7 +58,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
     altText="Profile"
   />
   <PrimaryButton>Sign Up</PrimaryButton>
-</Header>;
+</DeprecatedHeader>;
 ```
 
 ## Special Children
@@ -88,18 +84,18 @@ _Deprecated (but supported) - please use `IconButton` instead._
 
 ## Static Properties
 
-#### `Theme: HeaderTheme`
+#### `Theme: DeprecatedHeaderTheme`
 
 ```tsx
-<Header title="Blue Header" themeColor={Header.Theme.Blue} />
+<DeprecatedHeader title="Blue Header" themeColor={DeprecatedHeader.Theme.Blue} />
 ```
 
 ---
 
-#### `Variant: HeaderVariant`
+#### `Variant: DeprecatedHeaderVariant`
 
 ```tsx
-<Header title="Marketing Header" variant={Header.Variant.Full} />
+<DeprecatedHeader title="Marketing Header" variant={DeprecatedHeader.Variant.Full} />
 ```
 
 ## Component Props
@@ -118,7 +114,7 @@ Default: `''`
 
 ---
 
-#### `themeColor: HeaderTheme`
+#### `themeColor: DeprecatedHeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent).
 
@@ -128,11 +124,11 @@ Default: `''`
 | Blue        | Dark blue gradient background with white text, white system icons.                               |
 | Transparent | Transparent background (intended for dark-colored overlays) with white text, white system icons. |
 
-Default: `HeaderTheme.White`
+Default: `DeprecatedHeaderTheme.White`
 
 ---
 
-#### `variant: HeaderVariant`
+#### `variant: DeprecatedHeaderVariant`
 
 > Specifies the variation of the header.
 
@@ -141,7 +137,7 @@ Default: `HeaderTheme.White`
 | Dub     | "Dub" headers have a singular "Dub" logo and a title, separated by a equivalent-height divider. It is shorter in height (64px) than the "Full" variant.                                                |
 | Full    | "Full" headers have the full Workday logo and an optional title at minimum, separated by an equivalent-height divider (when a title is defined). It is taller in height (80px) than the "Dub" variant. |
 
-Default: `HeaderVariant.Dub`
+Default: `DeprecatedHeaderVariant.Dub`
 
 ---
 
@@ -156,7 +152,7 @@ Default: `HeaderVariant.Dub`
 > If specified, this replaces the contents of the Dub logo and title. Used for replacing Dub + title
 > with a `contained lockup` and/or for adding custon design elements next to the Dub + title lockup.
 
-Default: `DubLogoTitle` (for "Dub" variants) or `WorkdayLogoTitle` (for "Full" variants)
+Default: `DeprecatedDubLogoTitle` (for "Dub" variants) or `DeprecatedWorkdayLogoTitle` (for "Full" variants)
 
 ---
 
@@ -183,7 +179,7 @@ Default: `DubLogoTitle` (for "Dub" variants) or `WorkdayLogoTitle` (for "Full" v
 
 > A React element for the left of the header, this is typically a search bar component
 
-# Global Header
+# Global Header (Deprecated)
 
 The Global Header (or App Header) is used for Workday applications.
 
@@ -191,12 +187,13 @@ The Global Header (or App Header) is used for Workday applications.
 
 ```tsx
 import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {GlobalHeader, DubLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {DeprecatedGlobalHeader, DeprecatedDubLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
 import {Avatar} from '@workday/canvas-kit-react/avatar';
 import {IconButton} from '@workday/canvas-kit-react/button';
 import {notificationsIcon, inboxIcon} from '@workday/canvas-system-icons-web';
 
-const HeaderBrand = () => <DubLogoTitle themeColor={Header.Theme.White} />
+const HeaderBrand = () => <DeprecatedDubLogoTitle themeColor={Header.Theme.White} />
 const HeaderAvatar = () => <Avatar onClick={handleMenuClick} url="https://my.cdn.amazonaws.com/assets/avatar_pic.png" />
 const handleSearchSubmit = event => {
   const query = (event.target as HTMLFormElement).getElementsByTagName('input')[0].value;
@@ -205,15 +202,15 @@ const handleSearchSubmit = event => {
 const openMenu = e => console.log("Menu opened")
 
 /**
- * In this instance, the right-most child will be an Avatar component, when the GlobalHeader
+ * In this instance, the right-most child will be an Avatar component, when the DeprecatedGlobalHeader
  * shrinks below the specified breakpoint (720 in this case), the children get replaced by a menuToggle.
- * For most GlobalHeader implementations, the menuToggle is also the Avatar component.
+ * For most DeprecatedGlobalHeader implementations, the menuToggle is also the Avatar component.
  */
-<GlobalHeader
+<DeprecatedGlobalHeader
   brand={<HeaderBrand />}
   menuToggle={<HeaderAvatar />}
   onMenuClick={openMenu}
-  leftSlot={<SearchBar
+  leftSlot={<SearchForm
     isCollapsed={false}
     grow={true}
     onSubmit={handleSearchSubmit}
@@ -223,7 +220,7 @@ const openMenu = e => console.log("Menu opened")
   <IconButton icon={notificationsIcon} variant={IconButton.Variant.Circle} />
   <IconButton icon={inboxIcon} variant={IconButton.Variant.Circle} />
   <HeaderAvatar />
-</GlobalHeader>
+</DeprecatedGlobalHeader>
 ```
 
 ## Static Properties
@@ -243,13 +240,13 @@ const openMenu = e => console.log("Menu opened")
 > If specified, this replaces the contents of the Dub logo and title. Used for replacing Dub + title
 > with a branded element and/or for adding custon design elements next to the Dub + title lockup.
 
-Default: `<DubLogoTitle />`
+Default: `<DeprecatedDubLogoTitle />`
 
 #### `menuToggle: React.ReactNode`
 
 > _Note: This `menuToggle` slot only appears when the screen size shrinks below the `breakpoint`._
 >
-> For most `GlobalHeader` implementations, this is generally the same as the users' `Avatar`. If not
+> For most `DeprecatedGlobalHeader` implementations, this is generally the same as the users' `Avatar`. If not
 > specified, `menuToggle` defaults to a "hamburger" menu icon or "justify" icon.
 
 Default: `justifyIcon` from `@workday/canvas-system-icons-web`
@@ -258,7 +255,7 @@ Default: `justifyIcon` from `@workday/canvas-system-icons-web`
 
 > A click handler for when the user clicks the `menuToggle` element.
 
-Default: `<DubLogoTitle />`
+Default: `<DeprecatedDubLogoTitle />`
 
 #### `leftSlot: React.ReactElement`
 
@@ -270,7 +267,7 @@ Default: `<DubLogoTitle />`
 
 # "Dub" Logo and Title
 
-_Intended to be used in conjunction with the `Header` component_
+_Intended to be used in conjunction with the `DeprecatedHeader` component_
 
 A component that encapsulates the 'Dub' logo and a title (we call this the contained lockup). This
 is used whenever you want to override the contained lockup that comes default with a header, or if
@@ -280,11 +277,11 @@ background color of the contained lockup
 ## Usage
 
 ```tsx
-import {Header, DubLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {DeprecatedHeader, DeprecatedDubLogoTitle} from '@workday/canvas-kit-labs-react/header';
 import {colors} from '@workday/canvas-kit-react/tokens';
 
-<Header
-  brand={<DubLogoTitle title="This title will show up instead" bgColor={colors.blueberry600} />}
+<DeprecatedHeader
+  brand={<DeprecatedDubLogoTitle title="This title will show up instead" bgColor={colors.blueberry600} />}
 />;
 ```
 
@@ -304,11 +301,11 @@ Default: `''`
 
 ### Optional
 
-#### `themeColor: HeaderTheme`
+#### `themeColor: DeprecatedHeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent).
 
-Default: `HeaderTheme.White`
+Default: `DeprecatedHeaderTheme.White`
 
 ---
 
@@ -320,7 +317,7 @@ Default: `'none'`
 
 # Workday Logo and Title
 
-_Intended to be used in conjunction with the `Header` component_
+_Intended to be used in conjunction with the `DeprecatedHeader` component_
 
 A component that contains the full Workday logo and a title. This is used whenever you want to
 override the contained lockup that comes default with a header, or if you want to add more elements
@@ -329,9 +326,9 @@ next to the title with custom components or markup.
 ## Usage
 
 ```tsx
-import {Header, WorkdayLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {DeprecatedHeader, DeprecatedWorkdayLogoTitle} from '@workday/canvas-kit-labs-react/header';
 
-<Header brand={<WorkdayLogoTitle title="Display Title" />} />;
+<DeprecatedHeader brand={<DeprecatedWorkdayLogoTitle title="Display Title" />} />;
 ```
 
 ## Static Properties
@@ -346,12 +343,12 @@ import {Header, WorkdayLogoTitle} from '@workday/canvas-kit-labs-react/header';
 
 ### Optional
 
-#### `themeColor: HeaderTheme`
+#### `themeColor: DeprecatedHeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent). See the
-> [`themeColor`](#themecolor-headertheme) prop on the `Header` component.
+> [`themeColor`](#themecolor-headertheme) prop on the `DeprecatedHeader` component.
 
-Default: `HeaderTheme.White`
+Default: `DeprecatedHeaderTheme.White`
 
 ---
 
@@ -360,144 +357,3 @@ Default: `HeaderTheme.White`
 > The title displayed on the header next to the logo.
 
 Default `''`
-
-# Search Bar
-
-_Intended to be used in conjunction with the `Header` component_
-
-A component that contains a search bar with autocomplete functionality.
-
-## Usage
-
-```tsx
-import {SearchBar} from '@workday/canvas-kit-labs-react/header';
-import {MenuItem} from '@workday/canvas-kit-labs-react/menu';
-
-const handleInputChange = event => console.log('Adjust menu items here');
-const handleSearchSubmit = event => {
-  const query = (event.target as HTMLFormElement).getElementsByTagName('input')[0].value;
-  console.log('Submitted query: ', query);
-};
-
-<SearchBar
-  autocompleteItems={[<MenuItem>Item 1</MenuItem>]}
-  isCollapsed={false}
-  onInputChange={this.autocompleteCallback}
-  placeholder={`Search with Autocomplete`}
-  grow={true}
-  searchTheme={SearchBar.Theme.Dark}
-  onSubmit={handleSearchSubmit}
-/>;
-```
-
-## Static Properties
-
-> None
-
-## Component Props
-
-### Required
-
-#### `onSubmit: React.FormEventHandler<HTMLFormElement>`
-
-> An function that gets called and passed the current input value when the search form is submitted.
-
-### Optional
-
-#### `isCollapsed: boolean`
-
-> True if the search input should be collapsed into a toggle icon (for responsive).
-
----
-
-#### `onInputChange: React.ChangeEventHandler<HTMLInputElement>`
-
-> Callback to listen when the TextInput changes. This is usually used to update the autocomplete
-> items.
-
----
-
-#### `autocompleteItems: React.ReactElement<MenuItemProps>[]`
-
-> An array of MenuItems to show under the search bar.
-
----
-
-#### `searchTheme?: SearchTheme | SearchThemeAttributes`
-
-> The theme of the header the search input is being rendered in. There are 3 build in themes, but
-> the styles are customizable via SearchThemeAttributes.
-
-| Theme       | Description                                                                                              |
-| ----------- | -------------------------------------------------------------------------------------------------------- |
-| Light       | White background with dark-colored text, blue focus ring.                                                |
-| Dark        | Dark semi transparent background with white text. Inverts on focus.                                      |
-| Transparent | Transparent background (intended for light-colored header) with dark text. Also used in collapsed state. |
-
-Default: `SearchTheme.Light`
-
----
-
-#### `placeholder: string`
-
-> Placeholder for search input.
-
-Default: `'Search'`
-
----
-
-#### `initialValue: string;`
-
-> Initial value to set the input to.
-
----
-
-#### `rightAlign: boolean;`
-
-> False if the search input should grow to left align it. True if it should right align.
-
----
-
-#### `inputLabel: string`
-
-> Screenreader label for text input.
-
-Default: `'Search'`
-
----
-
-#### `submitLabel: string`
-
-> Screenreader label for submit button
-
-Default: `'Search'`
-
----
-
-#### `clearButtonAriaLabel: string`
-
-> Screenreader Label for clear button
-
----
-
-#### `openButtonLabel: string`
-
-> Screenreader Label to open collapsed search bar
-
-Default: `'Open Search'`
-
----
-
-#### `closeButtonLabel: string`
-
-> Screenreader Label to close collapsed search bar
-
-Default: `'Cancel'`
-
----
-
-#### `showClearButton: string`
-
-> Show button to clear input field
-
-Default: `true`

package/header/index.ts

@@ -1,9 +1,9 @@
-import Header from './lib/Header';
-import GlobalHeader from './lib/GlobalHeader';
+import DeprecatedHeader from './lib/Header';
+import DeprecatedGlobalHeader from './lib/GlobalHeader';
 
-export default Header;
-export {Header};
-export {GlobalHeader};
+export default DeprecatedHeader;
+export {DeprecatedHeader};
+export {DeprecatedGlobalHeader};
 export * from './lib/parts';
 export * from './lib/shared/themes';
 export * from './lib/shared/types';

package/header/lib/GlobalHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Header from './Header';
-import {HeaderVariant} from './shared/types';
-import {DubLogoTitle} from './parts';
+import DeprecatedHeader from './Header';
+import {DeprecatedHeaderVariant} from './shared/types';
+import {DeprecatedDubLogoTitle} from './parts';
 
 export interface GlobalHeaderProps {
   /**
@@ -23,15 +23,32 @@ export interface GlobalHeaderProps {
    */
   isCollapsed?: boolean;
   /**
-   * The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
+   * The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
    */
   leftSlot?: React.ReactElement;
 }
 
-export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
+/**
+ * ### Deprecated Global Header
+ *
+ * As of Canvas Kit v6, this component is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v7. Please see the
+ * [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
+ * for more information.
+ */
+export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
+  componentDidMount() {
+    console.warn(
+      `GlobalHeader is being deprecated and will be removed in Canvas Kit V7.\n
+      For more information, please see the V6 migration guide:\n
+      https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page
+      `
+    );
+  }
+
   public render() {
     const {
-      brand = <DubLogoTitle />,
+      brand = <DeprecatedDubLogoTitle />,
       menuToggle,
       onMenuClick,
       isCollapsed,
@@ -40,17 +57,17 @@ export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
       ...elemProps
     } = this.props;
     return (
-      <Header
+      <DeprecatedHeader
         brand={brand}
         menuToggle={menuToggle}
         leftSlot={leftSlot}
         onMenuClick={onMenuClick}
-        variant={HeaderVariant.Global}
+        variant={DeprecatedHeaderVariant.Global}
         isCollapsed={isCollapsed}
         {...elemProps}
       >
         {children}
-      </Header>
+      </DeprecatedHeader>
     );
   }
 }