@workday/canvas-kit-labs-react 7.1.4 → 7.2.0-427-next.2

package/expandable/lib/ExpandableIcon.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {chevronUpIcon, chevronDownIcon} from '@workday/canvas-system-icons-web';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {useExpandableIcon} from './hooks/useExpandableIcon';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {IconPositions} from '@workday/canvas-kit-react/button';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+import {useExpandableModel} from './hooks/useExpandableModel';
+
+export interface ExpandableIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+  /**
+   * Icon to display from `@workday/canvas-accent-icons-web`
+   * @default chevronUpIcon
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Button icon positions can either be `start` or `end`.
+   * If no value is provided, it defaults to `start`.
+   * @default 'start'
+   */
+  iconPosition?: IconPositions;
+}
+
+const StyledEndIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+  {
+    marginLeft: 'auto',
+  },
+  ({visible}) => ({
+    transform: !visible ? 'rotate(-180deg)' : undefined,
+    padding: !visible
+      ? `${space.xxxs} ${space.xs} ${space.xxxs} ${space.xxxs}`
+      : `${space.xxxs} ${space.xxxs} ${space.xxxs} ${space.xs}`,
+  })
+);
+
+const StyledStartIcon = styled(SystemIcon)<{visible: boolean} & StyledType>(
+  {
+    margin: `0 ${space.xxs} 0 0`,
+    padding: space.xxxs,
+  },
+  ({visible}) => ({
+    transform: !visible ? 'rotate(-90deg)' : undefined,
+  })
+);
+
+export const ExpandableIcon = createSubcomponent('span')({
+  modelHook: useExpandableModel,
+  elemPropsHook: useExpandableIcon,
+})<ExpandableIconProps>(({icon, visible, iconPosition = 'start', ...elementProps}, Element) =>
+  iconPosition === 'end' ? (
+    <StyledEndIcon
+      as={Element}
+      fill={colors.licorice200}
+      icon={icon || chevronUpIcon}
+      visible={visible}
+      {...elementProps}
+    />
+  ) : (
+    <StyledStartIcon
+      as={Element}
+      fill={colors.licorice200}
+      icon={icon || chevronDownIcon}
+      visible={visible}
+      {...elementProps}
+    />
+  )
+);

package/expandable/lib/ExpandableTarget.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  focusRing,
+  hideMouseFocus,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+import {useExpandableTarget} from './hooks/useExpandableTarget';
+import {useExpandableModel} from './hooks/useExpandableModel';
+
+export interface ExpandableTargetProps extends ExtractProps<typeof Flex, never> {
+  /**
+   * Children of the `Expandable.Target`. Should contain `Target.Title`, an optional `Target.Avatar`
+   * and `Target.Icon` with an `iconPosition` prop that takes a value of either `start` or `end`.
+   * `Target.Icon` with `start` is meant to be placed before the `Target.Title` and `Target.Icon`
+   * `end` should be placed after.
+   */
+  children: React.ReactNode;
+  /**
+   * This specifies the semantic heading level that will wrap the `Expandable.Target`'s button. If not
+   * defined, then nothing will wrap the button.
+   */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+const StyledButton = styled(Flex.as('button'))<StyledType>({
+  cursor: 'pointer',
+  '&:focus': {
+    ...focusRing(),
+  },
+  '&:hover': {
+    background: colors.soap300,
+  },
+  ...hideMouseFocus,
+});
+
+const Heading = styled('h1')<StyledType>({
+  margin: 0,
+});
+
+export const ExpandableTarget = createSubcomponent('button')({
+  modelHook: useExpandableModel,
+  elemPropsHook: useExpandableTarget,
+})<ExpandableTargetProps>(({children, headingLevel, ...elementProps}, Element) => {
+  const button = (
+    <StyledButton
+      as={Element}
+      background="none"
+      border="none"
+      borderRadius="m"
+      flexDirection="row"
+      padding="xxs"
+      width="100%"
+      {...elementProps}
+    >
+      {children}
+    </StyledButton>
+  );
+
+  return !!headingLevel ? <Heading as={headingLevel}>{button}</Heading> : button;
+});

package/expandable/lib/ExpandableTitle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {colors, space, type} from '@workday/canvas-kit-react/tokens';
+
+export interface ExpandableTitleProps extends ExtractProps<typeof Box, never> {
+  /**
+   * Children of the `Expandable.Title`. This should contain a string for the title
+   */
+  children: React.ReactNode;
+}
+
+export const ExpandableTitle = createComponent('div')({
+  displayName: 'Expandable.Title',
+  Component: ({children, ...elemProps}: ExpandableTitleProps, ref, Element) => {
+    return (
+      <Box
+        as={Element}
+        ref={ref}
+        {...type.levels.body.medium}
+        fontWeight={type.properties.fontWeights.bold}
+        color={colors.blackPepper400}
+        padding={`2px ${space.zero} 2px`}
+        textAlign="left"
+        {...elemProps}
+      >
+        {children}
+      </Box>
+    );
+  },
+});

package/expandable/lib/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from './useExpandableContent';
+export * from './useExpandableIcon';
+export * from './useExpandableModel';
+export * from './useExpandableTarget';

package/expandable/lib/hooks/useExpandableContent.ts

@@ -0,0 +1,9 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useExpandableModel} from './useExpandableModel';
+
+export const useExpandableContent = createElemPropsHook(useExpandableModel)(({state}) => {
+  return {
+    style: state.visibility !== 'hidden' ? {} : {display: 'none'},
+    id: state.id,
+  };
+});

package/expandable/lib/hooks/useExpandableIcon.ts

@@ -0,0 +1,8 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useExpandableModel} from './useExpandableModel';
+
+export const useExpandableIcon = createElemPropsHook(useExpandableModel)(({state}) => {
+  return {
+    visible: state.visibility !== 'hidden',
+  };
+});

package/expandable/lib/hooks/useExpandableModel.tsx

@@ -0,0 +1,20 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {useDisclosureModel} from '@workday/canvas-kit-react/disclosure';
+
+/**
+ * The `ExpandableModel` extends the `DisclosureModel`
+ */
+export const useExpandableModel = createModelHook({
+  defaultConfig: {
+    ...useDisclosureModel.defaultConfig,
+  },
+})(config => {
+  const disclosure = useDisclosureModel(config);
+  const state = {
+    ...disclosure.state,
+  };
+  const events = {
+    ...disclosure.events,
+  };
+  return {state, events};
+});

package/expandable/lib/hooks/useExpandableTarget.ts

@@ -0,0 +1,16 @@
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useExpandableModel} from './useExpandableModel';
+
+export const useExpandableTarget = createElemPropsHook(useExpandableModel)(({state, events}) => {
+  return {
+    'aria-controls': state.id,
+    'aria-expanded': state.visibility !== 'hidden',
+    onClick: (event: React.MouseEvent) => {
+      if (state.visibility !== 'hidden') {
+        events.hide(event);
+      } else {
+        events.show(event);
+      }
+    },
+  };
+});

package/expandable/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/expandable",
+  "module": "../dist/es6/expandable",
+  "sideEffects": false,
+  "types": "../dist/es6/expandable"
+}

package/index.ts

@@ -1,4 +1,3 @@
 export * from './combobox';
-export * from './common';
-export * from './drawer';
+export * from './expandable';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "7.1.4",
+  "version": "7.2.0-427-next.2+2c79134a",
   "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",
@@ -41,14 +41,14 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": ">=16.14"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-preview-react": "^7.1.4",
-    "@workday/canvas-kit-react": "^7.1.4",
+    "@workday/canvas-kit-react": "^7.2.0-427-next.2+2c79134a",
     "@workday/canvas-system-icons-web": "^3.0.0",
+    "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
@@ -56,5 +56,5 @@
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "6c20e6b9755afa86a865f4e90c24a4a52ea9e481"
+  "gitHead": "2c79134aa48ef0efde9cdf883b529b8157337a28"
 }

package/search-form/lib/SearchForm.tsx

@@ -7,7 +7,6 @@ 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 {MenuItemProps} from '@workday/canvas-kit-preview-react/menu';
 import {searchThemes, SearchTheme, SearchThemeAttributes} from './themes';
 import chroma from 'chroma-js';
 
@@ -28,7 +27,7 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
   /**
    * The autocomplete items of the SearchForm. This array of menu items is shown under the search bar.
    */
-  autocompleteItems?: React.ReactElement<MenuItemProps>[];
+  autocompleteItems?: React.ReactElement<any>[];
   /**
    * The theme of the header the search input is being rendered in.
    */
@@ -87,6 +86,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
    * @default false
    */
   allowEmptyStringSearch?: boolean;
+  /**
+   * Sets the `id` for the label
+   * @default unique identifier
+   */
+  labelId?: string;
 }
 
 export interface SearchFormState {
@@ -118,7 +122,7 @@ const StyledSearchForm = styled('form')<
 >(
   {
     position: 'relative',
-    flex: `1 1 auto`, // Instead of just flex-grow: 1 for IE11, see https://github.com/philipwalton/flexbugs#flexbug-1
+    flexGrow: 1,
     display: 'flex',
     alignItems: 'center',
     marginLeft: space.m,
@@ -161,7 +165,6 @@ const SearchContainer = styled('div')<Pick<SearchFormProps, 'height'>>(
   },
   ({height}) => ({
     minHeight: height,
-    height: height, // Needed to keep IE11 vertically centered
   })
 );
 
@@ -230,7 +233,6 @@ const SearchInput = styled(TextInput)<
   const collapseStyles: CSSObject = isCollapsed
     ? {
         fontSize: '20px',
-        lineHeight: '20px', // For ie11, line-height needs to match font-size
         paddingLeft: spaceNumbers.xl + spaceNumbers.s,
         paddingRight: spaceNumbers.xl + spaceNumbers.s,
         maxWidth: 'none',
@@ -248,7 +250,6 @@ const SearchInput = styled(TextInput)<
       };
   return {
     fontSize: '14px',
-    lineHeight: '14px', // For ie11, line-height needs to match font-size
     boxShadow: inputColors.boxShadow,
     color: inputColors.color,
     border: 'none',
@@ -280,7 +281,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
 
   private inputRef = React.createRef<HTMLInputElement>();
   private openRef = React.createRef<HTMLButtonElement>();
-  private labelId = generateUniqueId();
+  private defaultLabelId = generateUniqueId();
 
   state: Readonly<SearchFormState> = {
     showForm: false,
@@ -385,6 +386,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
       submitAriaLabel = 'Search',
       openButtonAriaLabel = 'Open Search',
       closeButtonAriaLabel = 'Cancel',
+      labelId = this.defaultLabelId,
       showClearButton = true,
       height = 40,
       grow,
@@ -405,7 +407,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
         action="."
         rightAlign={rightAlign}
         grow={grow}
-        aria-labelledby={this.labelId}
+        aria-labelledby={labelId}
         isCollapsed={isCollapsed}
         onSubmit={this.handleSubmit}
         showForm={this.state.showForm}
@@ -432,8 +434,8 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
           />
           <SearchField
             grow={grow}
-            id={this.labelId}
-            inputId={`input-${this.labelId}`}
+            id={labelId}
+            inputId={`input-${labelId}`}
             label={inputLabel}
             labelPosition={FormFieldLabelPosition.Hidden}
             useFieldset={false}
@@ -450,7 +452,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
               onBlur={this.handleBlur}
               showClearButton={!isCollapsed && showClearButton}
               clearButtonAriaLabel={clearButtonAriaLabel}
-              labelId={this.labelId}
+              labelId={labelId}
             >
               <SearchInput
                 ref={this.inputRef}

package/search-form/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/search-form",
   "module": "../dist/es6/search-form",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/search-form"
 }

package/common/lib/storybook-utils/ComponentStatesTable.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-import {PropCombination, Props} from './propTypes';
-
-/**
- * A helper to generate a table of all possible states for component visual testing.
- */
-export interface ComponentStatesTableProps {
-  /**
-   * The props that will be passed to the component when it is rendered and the corresponding
-   * row label for that permutation. It is encouraged to use the result of permutateProps()
-   * rather than passing in a list so we don't miss any combinations.
-   */
-  rowProps: PropCombination[];
-  /**
-   * The props that will be passed to the component when it is rendered and the corresponding
-   * column label for that permutation. It is encouraged to use the result of permutateProps()
-   * rather than passing in a list so we don't miss any combinations.
-   */
-  columnProps: PropCombination[];
-  /**
-   * The render function called to render the component in each cell of the table. This gives you
-   * the ability to add extra styling or markup (a blue background for an inverse variant, for example).
-   */
-  children(props: Props): React.ReactNode;
-}
-
-const Table = styled('table')({
-  width: '100%',
-  thead: {
-    textAlign: 'left',
-    paddingBottom: 16,
-  },
-  'td, th': {
-    minWidth: 100,
-    paddingBottom: 16,
-    paddingRight: 16,
-    textAlign: 'left',
-  },
-});
-
-export const ComponentStatesTable = ({
-  rowProps,
-  columnProps,
-  children,
-}: ComponentStatesTableProps) => {
-  return (
-    <Table>
-      <thead>
-        <tr>
-          <th>Variants</th>
-          {columnProps.map(col => (
-            <th key={`component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`}>
-              {col.label}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {rowProps.map(row => {
-          return (
-            <tr key={row.label.toLowerCase().replace(' ', '-')}>
-              <td>{row.label}</td>
-              {columnProps.map(col => {
-                return (
-                  <td key={col.label.toLowerCase().replace(' ', '-')}>
-                    {children({
-                      ...row.props,
-                      ...col.props,
-                    })}
-                  </td>
-                );
-              })}
-            </tr>
-          );
-        })}
-      </tbody>
-    </Table>
-  );
-};

package/common/lib/storybook-utils/permutateProps.ts

@@ -1,47 +0,0 @@
-import {PropCombination, PropDeclaration, Props, PropsDeclaration} from './propTypes';
-
-export const permutateProps = (
-  allProps: PropsDeclaration,
-  filter?: (props: Props) => boolean,
-  remainingProps: string[] = Object.keys(allProps),
-  values: {[key: string]: PropDeclaration} = {}
-): PropCombination[] => {
-  // When there are no more props to combine with, return result
-  const prop = remainingProps[0];
-  if (!prop) {
-    const props: Props = {};
-    Object.keys(values).forEach(prop => {
-      props[prop] = values?.[prop]?.value;
-    });
-
-    if (filter && !filter(props)) {
-      return [];
-    }
-
-    const label = Object.keys(values)
-      .map(prop => values?.[prop]?.label)
-      .join(' ');
-
-    return [
-      {
-        label,
-        props,
-      },
-    ];
-  }
-  const possiblePropValues = allProps[prop];
-
-  const permutations = possiblePropValues?.map((value: PropDeclaration) => {
-    const newValues = {...values}; // Required so we don't overwrite previous references
-    newValues[prop] = value;
-
-    return permutateProps(
-      allProps,
-      filter,
-      remainingProps!.slice(1, remainingProps!.length),
-      newValues
-    );
-  });
-
-  return (permutations as any).flat();
-};

package/common/lib/storybook-utils/propTypes.ts

@@ -1,15 +0,0 @@
-export type PropDeclaration = {
-  value: any;
-  label: string;
-};
-
-export type PropsDeclaration = {[key: string]: PropDeclaration[]};
-
-export type Props = {
-  [key: string]: any;
-};
-
-export type PropCombination = {
-  label: string;
-  props: Props;
-};

package/common/lib/theming/useThemedRing.ts

@@ -1,82 +0,0 @@
-import {useThemeRTL} from './useThemeRTL';
-import {CanvasThemePalette, EmotionCanvasTheme} from '@workday/canvas-kit-react/common';
-import {colors, CSSProperties, inputColors, statusColors} from '@workday/canvas-kit-react/tokens';
-import chroma from 'chroma-js';
-
-type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
-interface ContrastColors {
-  outer?: string;
-  inner?: string;
-}
-
-const isAccessible = (foreground: string, background: string = colors.frenchVanilla100) => {
-  return chroma.contrast(foreground, background) >= 3;
-};
-
-const getPaletteColorsFromTheme = (
-  palette: CanvasThemePalette,
-  fallbackColors?: ContrastColors
-): ContrastColors => {
-  return {
-    outer: isAccessible(palette.main)
-      ? palette.main
-      : isAccessible(palette.darkest)
-      ? palette.darkest
-      : fallbackColors?.outer,
-    inner: fallbackColors?.inner ? fallbackColors.inner : palette.main,
-  };
-};
-
-export function getPaletteColors(
-  type: paletteSelection,
-  theme: EmotionCanvasTheme
-): ContrastColors {
-  const palette = theme.canvas.palette[type];
-
-  switch (type) {
-    case 'error': {
-      return getPaletteColorsFromTheme(palette, {outer: inputColors.error.border});
-    }
-    case 'alert': {
-      return getPaletteColorsFromTheme(palette, {outer: colors.cantaloupe600});
-    }
-    case 'success': {
-      return getPaletteColorsFromTheme(palette, {
-        outer: colors.greenApple600,
-        // The theme default for success.main is set to the darkest GreenApple
-        // For our default ring, we need to override it so the inner ring is a bit lighter
-        inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
-      });
-    }
-    default: {
-      return getPaletteColorsFromTheme(palette);
-    }
-  }
-}
-
-export const useThemedRing = (type: paletteSelection): CSSProperties => {
-  const {themeRTL, theme} = useThemeRTL();
-
-  const paletteColors = getPaletteColors(type, theme);
-  if (!(paletteColors?.outer || paletteColors?.inner)) {
-    return {};
-  }
-  const errorBoxShadow = `inset 0 0 0 ${paletteColors.outer === paletteColors.inner ? 1 : 2}px ${
-    paletteColors.inner
-  }`;
-
-  return themeRTL({
-    borderColor: paletteColors.outer,
-    transition: '100ms box-shadow',
-    boxShadow: errorBoxShadow,
-    '&:hover, &:disabled': {
-      borderColor: paletteColors.outer,
-    },
-    '&:focus:not([disabled])': {
-      borderColor: paletteColors.outer,
-      boxShadow: `${errorBoxShadow},
-        0 0 0 2px ${colors.frenchVanilla100},
-        0 0 0 4px ${theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder}`,
-    },
-  });
-};

package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import { PropCombination, Props } from './propTypes';
-/**
- * A helper to generate a table of all possible states for component visual testing.
- */
-export interface ComponentStatesTableProps {
-    /**
-     * The props that will be passed to the component when it is rendered and the corresponding
-     * row label for that permutation. It is encouraged to use the result of permutateProps()
-     * rather than passing in a list so we don't miss any combinations.
-     */
-    rowProps: PropCombination[];
-    /**
-     * The props that will be passed to the component when it is rendered and the corresponding
-     * column label for that permutation. It is encouraged to use the result of permutateProps()
-     * rather than passing in a list so we don't miss any combinations.
-     */
-    columnProps: PropCombination[];
-    /**
-     * The render function called to render the component in each cell of the table. This gives you
-     * the ability to add extra styling or markup (a blue background for an inverse variant, for example).
-     */
-    children(props: Props): React.ReactNode;
-}
-export declare const ComponentStatesTable: ({ rowProps, columnProps, children, }: ComponentStatesTableProps) => JSX.Element;
-//# sourceMappingURL=ComponentStatesTable.d.ts.map

package/dist/commonjs/common/lib/storybook-utils/ComponentStatesTable.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentStatesTable.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/ComponentStatesTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,eAAe,EAAE,KAAK,EAAC,MAAM,aAAa,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,eAAe,EAAE,CAAC;IAC5B;;;;OAIG;IACH,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC;CACzC;AAgBD,eAAO,MAAM,oBAAoB,yCAI9B,yBAAyB,gBAkC3B,CAAC"}