@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

package/drawer/lib/DrawerHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {xIcon} from '@workday/canvas-system-icons-web';
 
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -69,7 +69,7 @@ const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
   })
 );
 
-const CloseButton = styled(IconButton)({
+const CloseButton = styled(TertiaryButton)({
   margin: '-8px', // for inverse and plain button, we always want this margin
 });
 
@@ -93,7 +93,7 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
         </HeaderTitle>
         {onClose && closeIconAriaLabel && (
           <CloseButton
-            variant={inverse ? 'inverse' : 'plain'}
+            variant={inverse ? 'inverse' : undefined}
             onClick={onClose}
             aria-label={closeIconAriaLabel}
             icon={xIcon}

package/index.ts

@@ -1,6 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './header';
-export * from './layout';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "7.0.0-alpha.0-next.5+b69254c7",
+  "version": "7.0.0-alpha.78-next.6+400ffc0b",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,17 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.5+b69254c7",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.5+b69254c7",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.78-next.6+400ffc0b",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.78-next.6+400ffc0b",
     "@workday/canvas-system-icons-web": "1.0.41",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
   },
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "b69254c752dc3fcc508e3b93164f8f7a83b005bb"
+  "gitHead": "400ffc0b29c2762180758d9b7c1bdc0562cb01e4"
 }

package/search-form/lib/SearchForm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} 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';
@@ -82,6 +82,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
    * @default 40
    */
   height?: number;
+  /**
+   * If true, allow onSubmit being called when input value is empty.
+   * @default false
+   */
+  allowEmptyStringSearch?: boolean;
 }
 
 export interface SearchFormState {
@@ -164,39 +169,22 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
-  ({isCollapsed, isHidden}) => {
-    const collapsedSize = 40;
-    const size = 32;
-    const collapseStyles: CSSObject = isCollapsed
-      ? {
-          minWidth: collapsedSize,
-          width: collapsedSize,
-          minHeight: collapsedSize,
-          height: collapsedSize,
-        }
-      : {
-          minWidth: size,
-          width: size,
-          minHeight: size,
-          height: size,
-        };
-
-    return {
-      position: `absolute`,
-      margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      padding: 0,
-      zIndex: 3,
-      display: isHidden ? 'none' : 'flex',
-      ...collapseStyles,
-    };
-  }
-);
+const SearchIcon = styled(TertiaryButton)<
+  Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
+>(({isCollapsed, isHidden}) => {
+  return {
+    position: `absolute`,
+    margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    padding: 0,
+    zIndex: 3,
+    display: isHidden ? 'none' : 'flex',
+  };
+});
 
-const CloseButton = styled(IconButton)<
+const CloseButton = styled(TertiaryButton)<
   Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
 >(({isCollapsed, showForm}) => {
   const collapseStyles: CSSObject =
@@ -320,18 +308,18 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
     return getInputColors(theme, this.state.isFocused);
   };
 
-  getIconButtonType = (): IconButtonProps['variant'] => {
+  getIconButtonType = (): TertiaryButtonProps['variant'] => {
     let background = this.getThemeColors().background || `#fff`;
     if (this.props.isCollapsed && this.state.showForm) {
       background = formCollapsedBackground;
     }
     const isDarkBackground = chroma(background as string).get('lab.l') < 70;
-    return isDarkBackground ? 'inverse' : 'plain';
+    return isDarkBackground ? 'inverse' : undefined;
   };
 
   handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
-    if (this.state.searchQuery.trim()) {
+    if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
       this.props.onSubmit(event);
     } else {
       this.focusInput();
@@ -407,6 +395,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
       initialValue,
       searchTheme,
       rightAlign,
+      allowEmptyStringSearch = false,
       ...elemProps
     } = this.props;
 
@@ -479,7 +468,6 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
             aria-label={closeButtonAriaLabel}
             icon={xIcon}
             isCollapsed={isCollapsed}
-            variant="plain"
             showForm={this.state.showForm}
             onClick={this.closeCollapsedSearch}
             type="button"

package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { TextInputProps } from '@workday/canvas-kit-react/text-input';
 export interface ComboBoxMenuItemGroup {
     header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
      */
     initialValue?: string;
     /**
-     * The variant of the Combobox clear button.
-     * @default IconButton.Variant.Plain
+     * The variant of the Combobox clear button. The default is a TertiaryButton
      */
-    clearButtonVariant?: IconButtonProps['variant'];
+    clearButtonVariant?: TertiaryButtonProps['variant'];
     /**
      * If true, render the Combobox with a button to clear the text input.
      * @default false

package/ts3.5/dist/commonjs/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/index.d.ts

@@ -1,7 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './header';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { SearchTheme, SearchThemeAttributes } from './themes';
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
      * @default 40
      */
     height?: number;
+    /**
+     * If true, allow onSubmit being called when input value is empty.
+     * @default false
+     */
+    allowEmptyStringSearch?: boolean;
 }
 export interface SearchFormState {
     showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
     state: Readonly<SearchFormState>;
     private getTheme;
     private getThemeColors;
-    getIconButtonType: () => IconButtonProps['variant'];
+    getIconButtonType: () => TertiaryButtonProps['variant'];
     handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     openCollapsedSearch: () => void;
     closeCollapsedSearch: () => void;

package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { TextInputProps } from '@workday/canvas-kit-react/text-input';
 export interface ComboBoxMenuItemGroup {
     header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
      */
     initialValue?: string;
     /**
-     * The variant of the Combobox clear button.
-     * @default IconButton.Variant.Plain
+     * The variant of the Combobox clear button. The default is a TertiaryButton
      */
-    clearButtonVariant?: IconButtonProps['variant'];
+    clearButtonVariant?: TertiaryButtonProps['variant'];
     /**
      * If true, render the Combobox with a button to clear the text input.
      * @default false

package/ts3.5/dist/es6/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/index.d.ts

@@ -1,7 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './header';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { SearchTheme, SearchThemeAttributes } from './themes';
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
      * @default 40
      */
     height?: number;
+    /**
+     * If true, allow onSubmit being called when input value is empty.
+     * @default false
+     */
+    allowEmptyStringSearch?: boolean;
 }
 export interface SearchFormState {
     showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
     state: Readonly<SearchFormState>;
     private getTheme;
     private getThemeColors;
-    getIconButtonType: () => IconButtonProps['variant'];
+    getIconButtonType: () => TertiaryButtonProps['variant'];
     handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     openCollapsedSearch: () => void;
     closeCollapsedSearch: () => void;

package/common/lib/Box.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
-
-// style props
-import {border, BorderStyleProps} from './utils/border';
-import {color, ColorStyleProps} from './utils/color';
-import {depth, DepthStyleProps} from './utils/depth';
-import {flexItem, FlexItemStyleProps} from './utils/flexItem';
-import {layout, LayoutStyleProps} from './utils/layout';
-import {other, OtherStyleProps} from './utils/other';
-import {position, PositionStyleProps} from './utils/position';
-import {space, SpaceStyleProps} from './utils/space';
-
-export type BoxProps = BorderStyleProps &
-  ColorStyleProps &
-  DepthStyleProps &
-  FlexItemStyleProps &
-  LayoutStyleProps &
-  OtherStyleProps &
-  PositionStyleProps &
-  SpaceStyleProps & {
-    children?: React.ReactNode;
-  };
-
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-
-const shouldForwardProp = (prop: string) => {
-  return isPropValid(prop) && !omittedProps.includes(prop);
-};
-
-// Meant to be used with elements. The `shouldForwardProps` will remove all style props
-const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
-
-// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  other,
-  position,
-  space
-);
-
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-export const Box = createComponent('div')({
-  displayName: 'Box',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
-    const BoxComponent = useConstant(() =>
-      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
-    );
-
-    return (
-      <BoxComponent as={Element} ref={ref} {...elemProps}>
-        {children}
-      </BoxComponent>
-    );
-  },
-});