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

package/header/lib/Header.tsx

@@ -2,13 +2,9 @@ import * as React from 'react';
 import {css} from '@emotion/core';
 import styled from '@emotion/styled';
 import {borderRadius, space, type} from '@workday/canvas-kit-react/tokens';
-import {DeprecatedDubLogoTitle, DeprecatedWorkdayLogoTitle} from './parts';
-import {deprecatedHeaderThemes} from './shared/themes';
-import {
-  DeprecatedHeaderHeight,
-  DeprecatedHeaderTheme,
-  DeprecatedHeaderVariant,
-} from './shared/types';
+import {DubLogoTitle, WorkdayLogoTitle} from './parts';
+import {themes} from './shared/themes';
+import {HeaderHeight, HeaderTheme, HeaderVariant} from './shared/types';
 import {Hyperlink, IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {justifyIcon} from '@workday/canvas-system-icons-web';
@@ -21,14 +17,14 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   menuToggle?: React.ReactNode;
   /**
    * The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
-   * @default DeprecatedHeaderTheme.White
+   * @default HeaderTheme.White
    */
-  themeColor?: DeprecatedHeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The variant of the Header. Accepts `Dub` (small) or `Full` (large).
-   * @default DeprecatedHeaderVariant.Dub
+   * @default HeaderVariant.Dub
    */
-  variant?: DeprecatedHeaderVariant;
+  variant?: HeaderVariant;
   /**
    * The text of the Header title. Not used if `brand` is provided.
    */
@@ -51,7 +47,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onMenuClick?: (e: React.MouseEvent) => void;
   /**
-   * The React element to render in the left slot of the Header. This is typically a SearchForm component.
+   * The React element to render in the left slot of the Header. This is typically a SearchBar component.
    */
   leftSlot?: React.ReactElement;
   /**
@@ -75,13 +71,10 @@ const HeaderShell = styled('div')<PickRequired<HeaderProps, 'themeColor', 'varia
   },
   ({variant, themeColor}) => ({
     // Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
-    height:
-      variant === DeprecatedHeaderVariant.Full
-        ? DeprecatedHeaderHeight.Large
-        : DeprecatedHeaderHeight.Small,
-    background: deprecatedHeaderThemes[themeColor].background,
-    ...deprecatedHeaderThemes[themeColor].depth,
-    color: deprecatedHeaderThemes[themeColor].color,
+    height: variant === HeaderVariant.Full ? HeaderHeight.Large : HeaderHeight.Small,
+    background: themes[themeColor].background,
+    ...themes[themeColor].depth,
+    color: themes[themeColor].color,
   })
 );
 
@@ -105,7 +98,7 @@ const BrandLink = styled(Hyperlink)({
 });
 
 const navStyle = ({themeColor}: PickRequired<HeaderProps, 'themeColor', 'css'>) => {
-  const theme = deprecatedHeaderThemes[themeColor];
+  const theme = themes[themeColor];
 
   return css({
     nav: {
@@ -218,31 +211,24 @@ class Brand extends React.Component<
   Pick<HeaderProps, 'variant' | 'brand' | 'title' | 'themeColor'>
 > {
   render() {
-    const {
-      variant = DeprecatedHeaderVariant.Dub,
-      brand,
-      themeColor = DeprecatedHeaderTheme.White,
-      title,
-    } = this.props;
+    const {variant = HeaderVariant.Dub, brand, themeColor = HeaderTheme.White, title} = this.props;
 
     switch (variant) {
-      case DeprecatedHeaderVariant.Global: {
+      case HeaderVariant.Global: {
         return <span>{brand}</span>;
       }
-      case DeprecatedHeaderVariant.Full: {
+      case HeaderVariant.Full: {
         return (
           <span>
-            {brand || (
-              <DeprecatedWorkdayLogoTitle title={title ? title : ''} themeColor={themeColor} />
-            )}
+            {brand || <WorkdayLogoTitle title={title ? title : ''} themeColor={themeColor} />}
           </span>
         );
       }
-      // DeprecatedHeaderVariant.Dub is default
+      // HeaderVariant.Dub is default
       default: {
         return (
           <span>
-            {brand || <DeprecatedDubLogoTitle title={title ? title : ''} themeColor={themeColor} />}
+            {brand || <DubLogoTitle title={title ? title : ''} themeColor={themeColor} />}
           </span>
         );
       }
@@ -254,7 +240,7 @@ class MenuIconButton extends React.Component<
   Pick<HeaderProps, 'themeColor' | 'menuToggle' | 'onMenuClick'>
 > {
   render() {
-    const {themeColor = DeprecatedHeaderTheme.White, menuToggle, onMenuClick} = this.props;
+    const {themeColor = HeaderTheme.White, menuToggle, onMenuClick} = this.props;
     if (menuToggle) {
       const menuToggleElement = menuToggle as React.ReactElement<any>;
       const onClick = menuToggleElement.props.onClick
@@ -269,7 +255,7 @@ class MenuIconButton extends React.Component<
 
     return (
       <IconButton
-        variant={themeColor === DeprecatedHeaderTheme.White ? 'circle' : 'inverse'}
+        variant={themeColor === HeaderTheme.White ? 'circle' : 'inverse'}
         icon={justifyIcon}
         className={'canvas-header--menu-icon'}
         aria-label="Open Menu"
@@ -279,26 +265,9 @@ class MenuIconButton extends React.Component<
   }
 }
 
-/**
- * ### Deprecated 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 Header extends React.Component<HeaderProps, {}> {
-  static Theme = DeprecatedHeaderTheme;
-  static Variant = DeprecatedHeaderVariant;
-
-  componentDidMount() {
-    console.warn(
-      `Header 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
-      `
-    );
-  }
+  static Theme = HeaderTheme;
+  static Variant = HeaderVariant;
 
   /**
    * Helper that recursively maps ReactNodes to their theme-based equivalent.
@@ -324,8 +293,7 @@ export default class Header extends React.Component<HeaderProps, {}> {
       const propsChildren = (child as React.ReactElement<Props>).props.children;
       const singleChild =
         React.Children.count(propsChildren) === 1 && (propsChildren as React.ReactElement<any>);
-      const iconButtonVariant =
-        this.props.themeColor === DeprecatedHeaderTheme.White ? 'circle' : 'inverse';
+      const iconButtonVariant = this.props.themeColor === HeaderTheme.White ? 'circle' : 'inverse';
 
       // Convert old method of SystemIcon into IconButton. If SystemIcon is within a link, make sure it's passed through
       if (child.type === 'a' && singleChild && singleChild.type === SystemIcon) {
@@ -371,8 +339,8 @@ export default class Header extends React.Component<HeaderProps, {}> {
   render() {
     const {
       menuToggle,
-      themeColor = DeprecatedHeaderTheme.White,
-      variant = DeprecatedHeaderVariant.Dub,
+      themeColor = HeaderTheme.White,
+      variant = HeaderVariant.Dub,
       centeredNav,
       title,
       brand,

package/header/lib/parts/DubLogoTitle.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
-import {DeprecatedHeaderHeight, DeprecatedHeaderTheme} from '../shared/types';
+import {HeaderHeight, HeaderTheme} from '../shared/types';
 import chroma from 'chroma-js';
 import {dubLogoWhite, dubLogoBlue} from '@workday/canvas-kit-react/common';
 
 export type DubTitleProps = {
   /**
    * The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
-   * @default DeprecatedHeaderTheme.White
+   * @default HeaderTheme.White
    */
-  themeColor?: DeprecatedHeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The text of the DubLogoTitle. Not used if `brand` is provided.
    */
@@ -29,7 +29,7 @@ const Lockup = styled('div')<DubTitleProps>(
   {
     display: 'flex',
     alignItems: 'center',
-    height: DeprecatedHeaderHeight.Small,
+    height: HeaderHeight.Small,
     paddingLeft: space.m,
   },
   ({bgColor}) => ({
@@ -47,10 +47,9 @@ const Title = styled('h3')<DubTitleProps>(
     whiteSpace: 'nowrap',
   },
   ({themeColor}) => ({
-    color:
-      themeColor === DeprecatedHeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
+    color: themeColor === HeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
     borderLeft: `1px solid ${
-      themeColor === DeprecatedHeaderTheme.White
+      themeColor === HeaderTheme.White
         ? colors.soap400
         : chroma(colors.frenchVanilla100)
             .alpha(0.3)
@@ -63,32 +62,16 @@ const DubLogo = styled('div')<DubTitleProps>({
   lineHeight: 0,
 });
 
-/**
- * ### Deprecated Dub Logo Title
- *
- * 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 class DeprecatedDubLogoTitle extends React.Component<DubTitleProps> {
-  componentDidMount() {
-    console.warn(
-      `DubLogoTitle 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 class DubLogoTitle extends React.Component<DubTitleProps> {
   render() {
-    const {themeColor = DeprecatedHeaderTheme.White, title} = this.props;
+    const {themeColor = HeaderTheme.White, title} = this.props;
     return (
       <LockupContainer>
         <Lockup {...this.props}>
           <DubLogo
             {...this.props}
             dangerouslySetInnerHTML={{
-              __html: themeColor === DeprecatedHeaderTheme.White ? dubLogoBlue : dubLogoWhite,
+              __html: themeColor === HeaderTheme.White ? dubLogoBlue : dubLogoWhite,
             }}
           />
           {title && <Title {...this.props}>{title}</Title>}

package/{search-form/lib/SearchForm.tsx → header/lib/parts/SearchBar.tsx}

@@ -8,26 +8,27 @@ import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-
 import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
-import {SearchThemeAttributes, searchThemes, SearchTheme} from './themes';
+import {SearchThemeAttributes, searchThemes} from '../shared/themes';
+import {SearchTheme} from '../shared/types';
 import chroma from 'chroma-js';
 import uuid from 'uuid/v4';
 
-export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
+export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
   /**
-   * The function called when the SearchForm form is submitted. The current input value is passed to the callback function.
+   * The function called when the SearchBar form is submitted. The current input value is passed to the callback function.
    */
   onSubmit: React.FormEventHandler<HTMLFormElement>;
   /**
-   * If true, collapse the SearchForm text input into a toggle icon. Useful for responsive layouts.
+   * If true, collapse the SearchBar text input into a toggle icon. Useful for responsive layouts.
    * @default false
    */
   isCollapsed?: boolean;
   /**
-   * The function called when the SearchForm text input changes.
+   * The function called when the SearchBar text input changes.
    */
   onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
   /**
-   * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
+   * The autocomplete items of the SearchBar. This array of menu items is shown under the search bar.
    */
   autocompleteItems?: React.ReactElement<MenuItemProps>[];
   /**
@@ -35,57 +36,57 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
    */
   searchTheme?: SearchTheme | SearchThemeAttributes;
   /**
-   * The placeholder text of the SearchForm text input.
+   * The placeholder text of the SearchBar text input.
    * @default Search
    */
   placeholder?: string;
   /**
-   * The initial value of the SearchForm text input.
+   * The initial value of the SearchBar text input.
    */
   initialValue?: string;
   /**
-   * If true, right-align the SearchForm. If false, the text input should grow to left-align the SearchForm.
+   * If true, right-align the SearchBar. If false, the text input should grow to left-align the SearchBar.
    * @default false
    */
   rightAlign?: boolean;
   /**
-   * The screenreader label text for the SearchForm text input.
+   * The screenreader label text for the SearchBar text input.
    * @default Search
    */
   inputLabel?: string;
   /**
-   * The screenreader label text for the SearchForm submit button.
+   * The screenreader label text for the SearchBar submit button.
    * @default Search
    */
   submitAriaLabel?: string;
   /**
-   * The screenreader label text for the SearchForm clear button.
+   * The screenreader label text for the SearchBar clear button.
    * @default Reset Search Form
    */
   clearButtonAriaLabel?: string;
   /**
-   * The screenreader label text for the button to open the collapsed SearchForm.
+   * The screenreader label text for the button to open the collapsed SearchBar.
    * @default Open Search
    */
   openButtonAriaLabel?: string;
   /**
-   * The screenreader label text for the button to close the open SearchForm.
+   * The screenreader label text for the button to close the open SearchBar.
    * @default Cancel
    */
   closeButtonAriaLabel?: string;
   /**
-   * If true, render the SearchForm with a button to clear the text input.
+   * If true, render the SearchBar with a button to clear the text input.
    * @default true
    */
   showClearButton?: boolean;
   /**
-   * Height of the Search Form in pixels
-   * @default 40
+   * Height of the Search Bar in pixels
+   * @default: 40
    */
   height?: number;
 }
 
-export interface SearchFormState {
+export interface SearchBarState {
   showForm: boolean;
   searchQuery: string;
   isFocused: boolean;
@@ -109,8 +110,8 @@ const formCollapsedBackground = colors.frenchVanilla100;
 const maxWidth = 480;
 const minWidth = 120;
 
-const StyledSearchForm = styled('form')<
-  Pick<SearchFormProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchFormState, 'showForm'>
+const SearchForm = styled('form')<
+  Pick<SearchBarProps, 'isCollapsed' | 'rightAlign' | 'grow'> & Pick<SearchBarState, 'showForm'>
 >(
   {
     position: 'relative',
@@ -147,7 +148,7 @@ const StyledSearchForm = styled('form')<
   }
 );
 
-const SearchContainer = styled('div')<Pick<SearchFormProps, 'height'>>(
+const SearchContainer = styled('div')<Pick<SearchBarProps, 'height'>>(
   {
     position: `relative`,
     display: 'flex',
@@ -165,7 +166,7 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
+const SearchIcon = styled(IconButton)<Pick<SearchBarProps, 'isCollapsed'> & {isHidden: boolean}>(
   ({isCollapsed, isHidden}) => {
     const collapsedSize = 40;
     const size = 32;
@@ -198,7 +199,7 @@ const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {is
 );
 
 const CloseButton = styled(IconButton)<
-  Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
+  Pick<SearchBarProps, 'isCollapsed'> & Pick<SearchBarState, 'showForm'>
 >(({isCollapsed, showForm}) => {
   const collapseStyles: CSSObject =
     isCollapsed && showForm
@@ -221,7 +222,7 @@ const CloseButton = styled(IconButton)<
 });
 
 const SearchField = styled(FormField)<
-  Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchFormState, 'showForm'>
+  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & Pick<SearchBarState, 'showForm'>
 >(({isCollapsed, showForm, grow, height}) => {
   return {
     display: (isCollapsed && showForm) || !isCollapsed ? 'inline-block' : 'none',
@@ -236,7 +237,7 @@ const SearchField = styled(FormField)<
 });
 
 const SearchInput = styled(TextInput)<
-  Pick<SearchFormProps, 'isCollapsed' | 'grow' | 'height'> & {
+  Pick<SearchBarProps, 'isCollapsed' | 'grow' | 'height'> & {
     inputColors: ReturnType<typeof getInputColors>;
   }
 >(({isCollapsed, inputColors, grow, height}) => {
@@ -288,14 +289,14 @@ const SearchInput = styled(TextInput)<
   };
 });
 
-export class SearchForm extends React.Component<SearchFormProps, SearchFormState> {
+export class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
   static Theme = SearchTheme;
 
   private inputRef = React.createRef<HTMLInputElement>();
   private openRef = React.createRef<HTMLButtonElement>();
   private labelId = uuid();
 
-  state: Readonly<SearchFormState> = {
+  state: Readonly<SearchBarState> = {
     showForm: false,
     searchQuery: '',
     isFocused: false,
@@ -351,7 +352,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
     }
   };
 
-  componentDidUpdate(prevProps: SearchFormProps, prevState: SearchFormState) {
+  componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState) {
     const showFormToggled = this.state.showForm !== prevState.showForm;
     if (showFormToggled) {
       if (this.state.showForm) {
@@ -412,7 +413,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
     } = this.props;
 
     return (
-      <StyledSearchForm
+      <SearchForm
         role="search"
         action="."
         rightAlign={rightAlign}
@@ -485,7 +486,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
             type="button"
           />
         </SearchContainer>
-      </StyledSearchForm>
+      </SearchForm>
     );
   }
 }

package/header/lib/parts/WorkdayLogoTitle.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {
-  DeprecatedHeaderHeight,
-  DeprecatedHeaderTheme,
-  DeprecatedHeaderVariant,
-} from '../shared/types';
+import {HeaderHeight, HeaderTheme, HeaderVariant} from '../shared/types';
 import {miniWdayLogoBlue, wdayLogoWhite, wdayLogoBlue} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 import chroma from 'chroma-js';
@@ -12,9 +8,9 @@ import chroma from 'chroma-js';
 export type WorkdayLogoTitleProps = {
   /**
    * The theme of the WorkdayLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
-   * @default DeprecatedHeaderTheme.White
+   * @default HeaderTheme.White
    */
-  themeColor?: DeprecatedHeaderTheme;
+  themeColor?: HeaderTheme;
   /**
    * The text of the WorkdayLogoTitle. Not used if `brand` is provided.
    * @default ''
@@ -23,7 +19,7 @@ export type WorkdayLogoTitleProps = {
   /**
    * The variant of the WorkdayLogoTitle.
    */
-  variant?: DeprecatedHeaderVariant;
+  variant?: HeaderVariant;
 };
 
 const LockupContainer = styled('div')({
@@ -37,10 +33,7 @@ const Lockup = styled('div')<WorkdayLogoTitleProps>(
     justifyContent: 'center',
   },
   ({variant}) => ({
-    height:
-      variant === DeprecatedHeaderVariant.Global
-        ? DeprecatedHeaderHeight.Small
-        : DeprecatedHeaderHeight.Large,
+    height: variant === HeaderVariant.Global ? HeaderHeight.Small : HeaderHeight.Large,
   })
 );
 
@@ -56,10 +49,9 @@ const Title = styled('h3')<WorkdayLogoTitleProps>(
     display: 'initial',
   },
   ({themeColor}) => ({
-    color:
-      themeColor === DeprecatedHeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
+    color: themeColor === HeaderTheme.White ? colors.blueberry500 : colors.frenchVanilla100,
     borderLeft: `1px solid ${
-      themeColor === DeprecatedHeaderTheme.White
+      themeColor === HeaderTheme.White
         ? colors.soap400
         : chroma(colors.soap400)
             .alpha(0.4)
@@ -73,30 +65,9 @@ const WorkdayLogo = styled('span')<WorkdayLogoTitleProps>({
   lineHeight: 0,
 });
 
-/**
- * ### Deprecated Workday Logo Title
- *
- * 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 class DeprecatedWorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
-  componentDidMount() {
-    console.warn(
-      `WorkdayLogoTitle 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 class WorkdayLogoTitle extends React.Component<WorkdayLogoTitleProps> {
   public render() {
-    const {
-      themeColor = DeprecatedHeaderTheme.White,
-      title = '',
-      variant,
-      ...elemProps
-    } = this.props;
+    const {themeColor = HeaderTheme.White, title = '', variant, ...elemProps} = this.props;
 
     return (
       <LockupContainer>
@@ -105,8 +76,8 @@ export class DeprecatedWorkdayLogoTitle extends React.Component<WorkdayLogoTitle
             {...this.props}
             dangerouslySetInnerHTML={{
               __html:
-                themeColor === DeprecatedHeaderTheme.White
-                  ? variant === DeprecatedHeaderVariant.Global
+                themeColor === HeaderTheme.White
+                  ? variant === HeaderVariant.Global
                     ? miniWdayLogoBlue
                     : wdayLogoBlue
                   : wdayLogoWhite,

package/header/lib/parts/index.ts

@@ -1,2 +1,3 @@
-export {DeprecatedDubLogoTitle} from './DubLogoTitle';
-export {DeprecatedWorkdayLogoTitle} from './WorkdayLogoTitle';
+export {DubLogoTitle} from './DubLogoTitle';
+export {SearchBar, SearchBarProps} from './SearchBar';
+export {WorkdayLogoTitle} from './WorkdayLogoTitle';