@workday/canvas-kit-preview-react 7.0.0-alpha.106-next.2 → 7.0.0-alpha.129-next.3

package/menu/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "7.0.0-alpha.106-next.2+ab2883e3",
+  "version": "7.0.0-alpha.129-next.3+f4cdec5a",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "types": "dist/es6/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "http://github.com/Workday/canvas-kit/tree/master/modules/canvas-kit-preview-react"
+    "url": "https://github.com/workday/canvas-kit.git",
+    "directory": "modules/preview-react"
   },
   "files": [
     "*/package.json",
@@ -40,20 +41,20 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^17.0 || ^18.0"
   },
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.106-next.2+ab2883e3",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/design-assets-types": "^0.2.4"
+    "@workday/design-assets-types": "^0.2.8"
   },
   "devDependencies": {
     "@workday/canvas-accent-icons-web": "^3.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.106-next.2+ab2883e3",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
     "formik": "^2.2.9",
     "yup": "^0.31.1"
   },
-  "gitHead": "ab2883e3305013c8a9048ea7b67d4012659c2516"
+  "gitHead": "f4cdec5aa17c18b03695a3c99417e384fd9aecdc"
 }

package/pill/lib/Pill.tsx

@@ -92,6 +92,7 @@ const getRemovablePillColors = (disabled?: boolean) => {
       icon: colors.licorice200,
       background: colors.soap300,
       label: colors.blackPepper400,
+
       focusRing: focusRing({
         width: 0,
         innerColor: 'transparent',
@@ -124,7 +125,6 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
   {
     ...pillBaseStyles,
     '&:focus': {
-      borderColor: colors.blueberry400,
       'span[data-count="ck-pill-count"]': {
         borderTop: `1px solid ${colors.blueberry400}`,
         borderBottom: `1px solid ${colors.blueberry400}`,
@@ -146,12 +146,18 @@ const StyledBasePill = styled(BaseButton.as('button'))<StyledType & PillProps>(
       },
     }),
   },
+  ({variant}) => ({
+    '&:focus': {
+      borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+    },
+  }),
   boxStyleFn
 );
 
-const StyledNonInteractivePill = styled(StyledBasePill)({
+const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
   cursor: 'default',
   overflow: 'revert', // override BaseButton overflow styles so the click target exists outside the pill for removable
+  position: 'relative',
 });
 
 export const Pill = createContainer('button')({
@@ -171,6 +177,7 @@ export const Pill = createContainer('button')({
           maxWidth={model.state.maxWidth}
           as={Element !== 'button' ? Element : 'span'}
           border={`1px solid ${colors.licorice200}`}
+          id={model.state.id}
           {...elemProps}
         >
           <PillLabel>{elemProps.children}</PillLabel>
@@ -201,6 +208,7 @@ export const Pill = createContainer('button')({
         <StyledNonInteractivePill
           colors={getRemovablePillColors(model.state.disabled)}
           as={Element !== 'button' ? Element : 'span'}
+          variant={variant}
           {...elemProps}
         >
           <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">

package/pill/lib/PillAvatar.tsx

@@ -17,6 +17,7 @@ export const PillAvatar = createSubcomponent('button')({
       style={{opacity: model.state.disabled ? '.7' : '1'}}
       as="div"
       size={18}
+      altText={undefined}
       {...elemProps}
       disabled={model.state.disabled}
     >

package/pill/lib/PillIcon.tsx

@@ -25,6 +25,8 @@ export const PillIcon = createSubcomponent('span')({
       display="flex"
       as={Element}
       size={20}
+      role="img"
+      aria-label="add"
       icon={icon || plusIcon}
       {...elemProps}
     />

package/pill/lib/PillIconButton.tsx

@@ -6,7 +6,7 @@ import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
 import {usePillModel} from './usePillModel';
 import {xSmallIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {BaseButton} from '@workday/canvas-kit-react/button';
 
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
@@ -15,6 +15,11 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
    * @default `xSmallIcon`
    */
   icon?: CanvasSystemIcon;
+  /**
+   * The aria label for the removable icon
+   * @default 'remove'
+   */
+  'aria-label'?: string;
 }
 
 const getIconColors = () => {
@@ -33,9 +38,7 @@ const getIconColors = () => {
       icon: colors.licorice500,
 
       focusRing: focusRing({
-        width: 0,
         innerColor: 'transparent',
-        outerColor: 'transparent',
       }),
     },
     disabled: {
@@ -45,51 +48,52 @@ const getIconColors = () => {
   };
 };
 
-const StyledFocusTarget = styled('span')<StyledType & PillIconButtonProps>({
-  height: 20,
-  position: 'absolute',
-  right: '5px',
-  left: space.xxxs,
-  margin: 0,
-  borderRadius: borderRadius.m,
-  '&:focus': {
-    outline: 'none',
-    ...focusRing({
-      outerColor: colors.blueberry400,
-      innerColor: 'transparent',
-      separation: 0,
-      width: 2,
-      inset: 'inner',
-    }),
-  },
-});
-
 const StyledIconButton = styled(BaseButton)<StyledType & PillIconButtonProps>({
-  marginInlineEnd: '-14px !important', // visually pull in the pill to the right size
-  paddingInlineEnd: space.xxxs, // add 4px padding outside the pill for click target
-  marginInlineStart: `-${space.xxs} !important`, // visually create space between label and the button
+  marginInlineEnd: '-7px', // visually pull in the pill to the right size
+  marginInlineStart: `-2px`, // visually create space between label and the button
+  overflow: 'visible',
+  '::after': {
+    content: '""',
+    height: space.l,
+    width: space.l,
+    position: 'absolute',
+    left: '-7px',
+    bottom: '-7px',
+    margin: 0,
+    pointerEvents: 'all',
+    cursor: 'pointer',
+  },
 });
 
 export const PillIconButton = createSubcomponent('button')({
   modelHook: usePillModel,
 })<PillIconButtonProps>(
-  ({size, icon = xSmallIcon, maxWidth, children, ...elemProps}, Element, model) => {
+  (
+    {size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps},
+    Element,
+    model
+  ) => {
     return (
       <StyledIconButton
         borderRadius="s"
-        height={space.l}
-        width={space.l}
+        height={20}
+        width={20}
         padding="zero"
         disabled={model.state.disabled}
         colors={getIconColors()}
-        tabIndex={-1}
+        aria-labelledby={`removable-${model.state.id} label-${model.state.id}`}
         as={Element}
         position="relative"
         {...elemProps}
       >
-        {/* We made the clickable element in this case the button larger, and have the span be the visible focus area */}
-        <StyledFocusTarget aria-hidden="true" tabIndex={model.state.disabled ? -1 : 0} />
-        <SystemIcon icon={icon} size={24} />
+        <SystemIcon
+          aria-label={ariaLabel}
+          id={`removable-${model.state.id}`}
+          icon={icon}
+          size={space.m}
+          aria-hidden // This works for Chrome but not needed in Safari
+          role="img"
+        />
       </StyledIconButton>
     );
   }

package/pill/lib/PillLabel.tsx

@@ -26,6 +26,7 @@ export const PillLabel = createSubcomponent('span')({
         color={model.state.disabled ? colors.licorice100 : 'inherit'}
         maxWidth={model.state.maxWidth}
         as={Element}
+        id={`label-${model.state.id}`}
         {...elemProps}
       >
         {elemProps.children}

package/pill/lib/usePillModel.tsx

@@ -1,4 +1,4 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
 export const usePillModel = createModelHook({
   defaultConfig: {
@@ -11,10 +11,17 @@ export const usePillModel = createModelHook({
      * Use to disable a pill.
      */
     disabled: false,
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: '',
   },
 })(config => {
+  const id = useUniqueId(config.id);
   const state = {
     ...config,
+    id,
   };
 
   return {state, events: {}};

package/pill/package.json

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

package/select/README.md

@@ -34,7 +34,7 @@ fully accessible (see below).
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
+import {Select} from '@workday/canvas-kit-preview-react/select';
 
 function Example() {
   const options = [
@@ -58,8 +58,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = [
@@ -89,8 +89,8 @@ function Example() {
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 
 function Example() {
   const options = ['California', 'Florida', 'New York', 'Pennsylvania', 'Texas'];
@@ -117,8 +117,8 @@ used to customize how each option is rendered.
 
 ```tsx
 import * as React from 'react';
-import Select from '@workday/canvas-kit-preview-react/select';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import {colors, typeColors} from '@workday/canvas-kit-react/tokens';
 import {
   activityStreamIcon,

package/select/index.ts

@@ -1,7 +1,4 @@
-import Select from './lib/Select';
 
-export default Select;
-export {Select};
 export * from './lib/Select';
 
 export {

package/select/lib/Select.tsx

@@ -7,7 +7,7 @@ import {
   generateUniqueId,
 } from '@workday/canvas-kit-react/common';
 import {menuAnimationDuration} from './SelectMenu';
-import SelectBase, {CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
+import {SelectBase, CoreSelectBaseProps, Option, NormalizedOption} from './SelectBase';
 import {MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
 
@@ -587,5 +587,3 @@ export const Select = createComponent('button')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectBase.tsx

@@ -20,8 +20,8 @@ import {
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+import {SelectMenu} from './SelectMenu';
+import {SelectOption} from './SelectOption';
 import {scrollIntoViewIfNeeded} from './scrolling';
 import {MenuPlacement, MenuVisibility} from './types';
 import {getCorrectedIndexByValue} from './utils';
@@ -288,7 +288,7 @@ const defaultRenderSelected: RenderSelectedFunction = option => {
   return option.label;
 };
 
-const SelectBase = ({
+export const SelectBase = ({
   'aria-labelledby': ariaLabelledBy,
   'aria-required': ariaRequired,
   as,
@@ -475,5 +475,3 @@ const SelectBase = ({
     </SelectWrapper>
   );
 };
-
-export default SelectBase;

package/select/lib/SelectMenu.tsx

@@ -223,7 +223,7 @@ const generatePopperOptions = (
   };
 };
 
-const SelectMenu = ({
+export const SelectMenu = ({
   buttonRef,
   children,
   error,
@@ -294,5 +294,3 @@ const SelectMenu = ({
     </Popper>
   );
 };
-
-export default SelectMenu;

package/select/lib/SelectOption.tsx

@@ -105,7 +105,7 @@ const Option = styled('li')<SelectOptionProps>(
   })
 );
 
-const SelectOption = ({
+export const SelectOption = ({
   children,
   focused = false,
   interactive = true,
@@ -126,5 +126,3 @@ const SelectOption = ({
     </Option>
   );
 };
-
-export default SelectOption;

package/select/package.json

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

package/side-panel/index.ts

@@ -1,6 +1,2 @@
-import SidePanel from './lib/SidePanel';
-
-export default SidePanel;
-export {SidePanel};
 export * from './lib/hooks';
 export * from './lib/SidePanel';

package/side-panel/lib/SidePanel.tsx

@@ -110,7 +110,7 @@ export const SidePanelContext = React.createContext({
   origin: 'left',
 });
 
-const SidePanel = ({
+export const SidePanel = ({
   as = 'section',
   children,
   collapsedWidth = 64,
@@ -267,4 +267,3 @@ const ToggleButton = ({
 };
 
 SidePanel.ToggleButton = ToggleButton;
-export default SidePanel;

package/side-panel/package.json

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

package/text-area/package.json

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

package/text-input/package.json

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