@workday/canvas-kit-preview-react 8.0.0-alpha.116-next.1 → 8.0.0-alpha.123-next.3

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/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/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;