@workday/canvas-kit-labs-react 5.3.0 → 5.3.4

package/dist/es6/header/lib/shared/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/themes.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,aAAa,EACd,MAAM,kCAAkC,CAAC;AAI1C;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,sBAAsB;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,+BAA+B,CAAC;CAChD;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,EAAE,sBA4CpC,CAAC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/themes.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,aAAa,EACd,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,MAAM;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,MA4CpB,CAAC;AAEF,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/header/lib/shared/themes.js

@@ -1,17 +1,10 @@
-var _a;
+var _a, _b;
+import { focusRing } from '@workday/canvas-kit-react/common';
 import { colors, gradients, iconColors, depth, } from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
-import { DeprecatedHeaderTheme } from './types';
-/**
- * ### Deprecated Header Themes
- *
- * As of Canvas Kit v6, this theme object is being soft-deprecated along with the rest of the labs/header package.
- * 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 var deprecatedHeaderThemes = (_a = {},
-    _a[DeprecatedHeaderTheme.White] = {
+import { HeaderTheme, SearchTheme } from './types';
+export var themes = (_a = {},
+    _a[HeaderTheme.White] = {
         color: colors.blackPepper400,
         background: colors.frenchVanilla100,
         depth: depth['1'],
@@ -24,7 +17,7 @@ export var deprecatedHeaderThemes = (_a = {},
         currentLinkColor: colors.blueberry500,
         chipColor: colors.blueberry400,
     },
-    _a[DeprecatedHeaderTheme.Blue] = {
+    _a[HeaderTheme.Blue] = {
         color: colors.frenchVanilla100,
         background: gradients.blueberry,
         depth: depth['3'],
@@ -39,7 +32,7 @@ export var deprecatedHeaderThemes = (_a = {},
         currentLinkColor: colors.frenchVanilla100,
         chipColor: colors.frenchVanilla100,
     },
-    _a[DeprecatedHeaderTheme.Transparent] = {
+    _a[HeaderTheme.Transparent] = {
         color: colors.frenchVanilla100,
         background: 'transparent',
         depth: { boxShadow: 'none' },
@@ -55,3 +48,33 @@ export var deprecatedHeaderThemes = (_a = {},
         chipColor: colors.frenchVanilla100,
     },
     _a);
+export var searchThemes = (_b = {},
+    _b[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',
+    },
+    _b[SearchTheme.Light] = {
+        background: colors.soap200,
+        backgroundFocus: colors.soap200,
+        backgroundHover: colors.soap300,
+        color: colors.blackPepper300,
+        placeholderColor: colors.licorice300,
+        boxShadow: 'none',
+        boxShadowFocus: focusRing().boxShadow,
+    },
+    _b[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',
+    },
+    _b);

package/dist/es6/header/lib/shared/types.d.ts

@@ -1,15 +1,20 @@
-export declare enum DeprecatedHeaderTheme {
+export declare enum HeaderTheme {
     White = 0,
     Blue = 1,
     Transparent = 2
 }
-export declare enum DeprecatedHeaderVariant {
+export declare enum HeaderVariant {
     Dub = 0,
     Full = 1,
     Global = 2
 }
-export declare enum DeprecatedHeaderHeight {
+export declare enum HeaderHeight {
     Small = "64px",
     Large = "80px"
 }
+export declare enum SearchTheme {
+    Light = 0,
+    Dark = 1,
+    Transparent = 2
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/es6/header/lib/shared/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/types.tsx"],"names":[],"mappings":"AAAA,oBAAY,qBAAqB;IAC/B,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AAED,oBAAY,uBAAuB;IACjC,GAAG,IAAA;IACH,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,oBAAY,sBAAsB;IAChC,KAAK,SAAS;IACd,KAAK,SAAS;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../header/lib/shared/types.tsx"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ;AAED,oBAAY,aAAa;IACvB,GAAG,IAAA;IACH,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,oBAAY,YAAY;IACtB,KAAK,SAAS;IACd,KAAK,SAAS;CACf;AAED,oBAAY,WAAW;IACrB,KAAK,IAAA;IACL,IAAI,IAAA;IACJ,WAAW,IAAA;CACZ"}

package/dist/es6/header/lib/shared/types.js

@@ -1,17 +1,23 @@
-export var DeprecatedHeaderTheme;
-(function (DeprecatedHeaderTheme) {
-    DeprecatedHeaderTheme[DeprecatedHeaderTheme["White"] = 0] = "White";
-    DeprecatedHeaderTheme[DeprecatedHeaderTheme["Blue"] = 1] = "Blue";
-    DeprecatedHeaderTheme[DeprecatedHeaderTheme["Transparent"] = 2] = "Transparent";
-})(DeprecatedHeaderTheme || (DeprecatedHeaderTheme = {}));
-export var DeprecatedHeaderVariant;
-(function (DeprecatedHeaderVariant) {
-    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Dub"] = 0] = "Dub";
-    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Full"] = 1] = "Full";
-    DeprecatedHeaderVariant[DeprecatedHeaderVariant["Global"] = 2] = "Global";
-})(DeprecatedHeaderVariant || (DeprecatedHeaderVariant = {}));
-export var DeprecatedHeaderHeight;
-(function (DeprecatedHeaderHeight) {
-    DeprecatedHeaderHeight["Small"] = "64px";
-    DeprecatedHeaderHeight["Large"] = "80px";
-})(DeprecatedHeaderHeight || (DeprecatedHeaderHeight = {}));
+export var HeaderTheme;
+(function (HeaderTheme) {
+    HeaderTheme[HeaderTheme["White"] = 0] = "White";
+    HeaderTheme[HeaderTheme["Blue"] = 1] = "Blue";
+    HeaderTheme[HeaderTheme["Transparent"] = 2] = "Transparent";
+})(HeaderTheme || (HeaderTheme = {}));
+export var HeaderVariant;
+(function (HeaderVariant) {
+    HeaderVariant[HeaderVariant["Dub"] = 0] = "Dub";
+    HeaderVariant[HeaderVariant["Full"] = 1] = "Full";
+    HeaderVariant[HeaderVariant["Global"] = 2] = "Global";
+})(HeaderVariant || (HeaderVariant = {}));
+export var HeaderHeight;
+(function (HeaderHeight) {
+    HeaderHeight["Small"] = "64px";
+    HeaderHeight["Large"] = "80px";
+})(HeaderHeight || (HeaderHeight = {}));
+export var SearchTheme;
+(function (SearchTheme) {
+    SearchTheme[SearchTheme["Light"] = 0] = "Light";
+    SearchTheme[SearchTheme["Dark"] = 1] = "Dark";
+    SearchTheme[SearchTheme["Transparent"] = 2] = "Transparent";
+})(SearchTheme || (SearchTheme = {}));

package/dist/es6/index.d.ts

@@ -3,6 +3,4 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
-export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/es6/index.js

@@ -3,5 +3,3 @@ export * from './common';
 export * from './drawer';
 export * from './header';
 export * from './layout';
-export * from './text-input';
-export * from './search-form';

package/dist/es6/layout/lib/utils/getValidChildren.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>[];
 //# sourceMappingURL=getValidChildren.d.ts.map

package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,oJAIzD"}
+{"version":3,"file":"getValidChildren.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/getValidChildren.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,oNAIzD"}

package/header/README.md

@@ -1,4 +1,4 @@
-# Canvas Kit Labs React Header (Deprecated)
+# Canvas Kit Labs React Header
 
 <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,6 +8,10 @@ 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
@@ -22,13 +26,13 @@ This component renders a responsive, Canvas-style header.
 
 ```tsx
 import * as React from 'react';
-import {DeprecatedHeader} from '@workday/canvas-kit-labs-react/header';
+import {Header} 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';
 
-<DeprecatedHeader title="Header" brandUrl="#">
+<Header title="Header" brandUrl="#">
   <nav>
     <ul>
       <li className="current">
@@ -58,7 +62,7 @@ import {PrimaryButton} from '@workday/canvas-kit-react/button';
     altText="Profile"
   />
   <PrimaryButton>Sign Up</PrimaryButton>
-</DeprecatedHeader>;
+</Header>;
 ```
 
 ## Special Children
@@ -84,18 +88,18 @@ _Deprecated (but supported) - please use `IconButton` instead._
 
 ## Static Properties
 
-#### `Theme: DeprecatedHeaderTheme`
+#### `Theme: HeaderTheme`
 
 ```tsx
-<DeprecatedHeader title="Blue Header" themeColor={DeprecatedHeader.Theme.Blue} />
+<Header title="Blue Header" themeColor={Header.Theme.Blue} />
 ```
 
 ---
 
-#### `Variant: DeprecatedHeaderVariant`
+#### `Variant: HeaderVariant`
 
 ```tsx
-<DeprecatedHeader title="Marketing Header" variant={DeprecatedHeader.Variant.Full} />
+<Header title="Marketing Header" variant={Header.Variant.Full} />
 ```
 
 ## Component Props
@@ -114,7 +118,7 @@ Default: `''`
 
 ---
 
-#### `themeColor: DeprecatedHeaderTheme`
+#### `themeColor: HeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent).
 
@@ -124,11 +128,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: `DeprecatedHeaderTheme.White`
+Default: `HeaderTheme.White`
 
 ---
 
-#### `variant: DeprecatedHeaderVariant`
+#### `variant: HeaderVariant`
 
 > Specifies the variation of the header.
 
@@ -137,7 +141,7 @@ Default: `DeprecatedHeaderTheme.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: `DeprecatedHeaderVariant.Dub`
+Default: `HeaderVariant.Dub`
 
 ---
 
@@ -152,7 +156,7 @@ Default: `DeprecatedHeaderVariant.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: `DeprecatedDubLogoTitle` (for "Dub" variants) or `DeprecatedWorkdayLogoTitle` (for "Full" variants)
+Default: `DubLogoTitle` (for "Dub" variants) or `WorkdayLogoTitle` (for "Full" variants)
 
 ---
 
@@ -179,7 +183,7 @@ Default: `DeprecatedDubLogoTitle` (for "Dub" variants) or `DeprecatedWorkdayLogo
 
 > A React element for the left of the header, this is typically a search bar component
 
-# Global Header (Deprecated)
+# Global Header
 
 The Global Header (or App Header) is used for Workday applications.
 
@@ -187,13 +191,12 @@ The Global Header (or App Header) is used for Workday applications.
 
 ```tsx
 import {Avatar} from '@workday/canvas-kit-react/avatar';
-import {DeprecatedGlobalHeader, DeprecatedDubLogoTitle} from '@workday/canvas-kit-labs-react/header';
-import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
+import {GlobalHeader, DubLogoTitle} from '@workday/canvas-kit-labs-react/header';
 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 = () => <DeprecatedDubLogoTitle themeColor={Header.Theme.White} />
+const HeaderBrand = () => <DubLogoTitle 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;
@@ -202,15 +205,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 DeprecatedGlobalHeader
+ * In this instance, the right-most child will be an Avatar component, when the GlobalHeader
  * shrinks below the specified breakpoint (720 in this case), the children get replaced by a menuToggle.
- * For most DeprecatedGlobalHeader implementations, the menuToggle is also the Avatar component.
+ * For most GlobalHeader implementations, the menuToggle is also the Avatar component.
  */
-<DeprecatedGlobalHeader
+<GlobalHeader
   brand={<HeaderBrand />}
   menuToggle={<HeaderAvatar />}
   onMenuClick={openMenu}
-  leftSlot={<SearchForm
+  leftSlot={<SearchBar
     isCollapsed={false}
     grow={true}
     onSubmit={handleSearchSubmit}
@@ -220,7 +223,7 @@ const openMenu = e => console.log("Menu opened")
   <IconButton icon={notificationsIcon} variant={IconButton.Variant.Circle} />
   <IconButton icon={inboxIcon} variant={IconButton.Variant.Circle} />
   <HeaderAvatar />
-</DeprecatedGlobalHeader>
+</GlobalHeader>
 ```
 
 ## Static Properties
@@ -240,13 +243,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: `<DeprecatedDubLogoTitle />`
+Default: `<DubLogoTitle />`
 
 #### `menuToggle: React.ReactNode`
 
 > _Note: This `menuToggle` slot only appears when the screen size shrinks below the `breakpoint`._
 >
-> For most `DeprecatedGlobalHeader` implementations, this is generally the same as the users' `Avatar`. If not
+> For most `GlobalHeader` 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`
@@ -255,7 +258,7 @@ Default: `justifyIcon` from `@workday/canvas-system-icons-web`
 
 > A click handler for when the user clicks the `menuToggle` element.
 
-Default: `<DeprecatedDubLogoTitle />`
+Default: `<DubLogoTitle />`
 
 #### `leftSlot: React.ReactElement`
 
@@ -267,7 +270,7 @@ Default: `<DeprecatedDubLogoTitle />`
 
 # "Dub" Logo and Title
 
-_Intended to be used in conjunction with the `DeprecatedHeader` component_
+_Intended to be used in conjunction with the `Header` 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
@@ -277,11 +280,11 @@ background color of the contained lockup
 ## Usage
 
 ```tsx
-import {DeprecatedHeader, DeprecatedDubLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {Header, DubLogoTitle} from '@workday/canvas-kit-labs-react/header';
 import {colors} from '@workday/canvas-kit-react/tokens';
 
-<DeprecatedHeader
-  brand={<DeprecatedDubLogoTitle title="This title will show up instead" bgColor={colors.blueberry600} />}
+<Header
+  brand={<DubLogoTitle title="This title will show up instead" bgColor={colors.blueberry600} />}
 />;
 ```
 
@@ -301,11 +304,11 @@ Default: `''`
 
 ### Optional
 
-#### `themeColor: DeprecatedHeaderTheme`
+#### `themeColor: HeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent).
 
-Default: `DeprecatedHeaderTheme.White`
+Default: `HeaderTheme.White`
 
 ---
 
@@ -317,7 +320,7 @@ Default: `'none'`
 
 # Workday Logo and Title
 
-_Intended to be used in conjunction with the `DeprecatedHeader` component_
+_Intended to be used in conjunction with the `Header` 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
@@ -326,9 +329,9 @@ next to the title with custom components or markup.
 ## Usage
 
 ```tsx
-import {DeprecatedHeader, DeprecatedWorkdayLogoTitle} from '@workday/canvas-kit-labs-react/header';
+import {Header, WorkdayLogoTitle} from '@workday/canvas-kit-labs-react/header';
 
-<DeprecatedHeader brand={<DeprecatedWorkdayLogoTitle title="Display Title" />} />;
+<Header brand={<WorkdayLogoTitle title="Display Title" />} />;
 ```
 
 ## Static Properties
@@ -343,12 +346,12 @@ import {DeprecatedHeader, DeprecatedWorkdayLogoTitle} from '@workday/canvas-kit-
 
 ### Optional
 
-#### `themeColor: DeprecatedHeaderTheme`
+#### `themeColor: HeaderTheme`
 
 > The theme of the header (White, Blue, or Transparent). See the
-> [`themeColor`](#themecolor-headertheme) prop on the `DeprecatedHeader` component.
+> [`themeColor`](#themecolor-headertheme) prop on the `Header` component.
 
-Default: `DeprecatedHeaderTheme.White`
+Default: `HeaderTheme.White`
 
 ---
 
@@ -357,3 +360,144 @@ Default: `DeprecatedHeaderTheme.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 DeprecatedHeader from './lib/Header';
-import DeprecatedGlobalHeader from './lib/GlobalHeader';
+import Header from './lib/Header';
+import GlobalHeader from './lib/GlobalHeader';
 
-export default DeprecatedHeader;
-export {DeprecatedHeader};
-export {DeprecatedGlobalHeader};
+export default Header;
+export {Header};
+export {GlobalHeader};
 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 DeprecatedHeader from './Header';
-import {DeprecatedHeaderVariant} from './shared/types';
-import {DeprecatedDubLogoTitle} from './parts';
+import Header from './Header';
+import {HeaderVariant} from './shared/types';
+import {DubLogoTitle} from './parts';
 
 export interface GlobalHeaderProps {
   /**
@@ -23,32 +23,15 @@ export interface GlobalHeaderProps {
    */
   isCollapsed?: boolean;
   /**
-   * The React element to render in the left slot of the GlobalHeader. This is typically a SearchForm component.
+   * The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
    */
   leftSlot?: React.ReactElement;
 }
 
-/**
- * ### 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
-      `
-    );
-  }
-
+export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
   public render() {
     const {
-      brand = <DeprecatedDubLogoTitle />,
+      brand = <DubLogoTitle />,
       menuToggle,
       onMenuClick,
       isCollapsed,
@@ -57,17 +40,17 @@ export default class DeprecatedGlobalHeader extends React.Component<GlobalHeader
       ...elemProps
     } = this.props;
     return (
-      <DeprecatedHeader
+      <Header
         brand={brand}
         menuToggle={menuToggle}
         leftSlot={leftSlot}
         onMenuClick={onMenuClick}
-        variant={DeprecatedHeaderVariant.Global}
+        variant={HeaderVariant.Global}
         isCollapsed={isCollapsed}
         {...elemProps}
       >
         {children}
-      </DeprecatedHeader>
+      </Header>
     );
   }
 }