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

package/radio/lib/Radio.tsx

@@ -8,7 +8,8 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
+import {
+  canvas,
   borderRadius,
   colors,
   inputColors,
@@ -48,6 +49,7 @@ export interface RadioProps extends Themeable {
    * The value of the Radio button.
    */
   value?: string;
+  variant?: 'inverse' | undefined;
 }
 
 const radioBorderRadius = 9;
@@ -77,16 +79,20 @@ const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   width: radioWidth,
 });
 
-const RadioRipple = styled('span')<Pick<RadioProps, 'disabled'>>({
-  borderRadius: borderRadius.circle,
-  boxShadow: `0 0 0 0 ${colors.soap200}`,
-  height: radioHeight,
-  transition: 'box-shadow 150ms ease-out',
-  width: radioWidth,
-  position: 'absolute',
-  pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
-  zIndex: -1,
-});
+const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
+  {
+    borderRadius: borderRadius.circle,
+    boxShadow: `0 0 0 0 ${colors.soap200}`,
+    height: radioHeight,
+    transition: 'box-shadow 150ms ease-out',
+    width: radioWidth,
+    position: 'absolute',
+    pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
+  },
+  ({variant}) => ({
+    opacity: variant === 'inverse' ? '0.4' : '1',
+  })
+);
 
 const RadioInput = styled('input')<RadioProps & StyledType>(
   {
@@ -105,6 +111,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {
@@ -134,34 +141,68 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // input (which is visually hidden)
     '&:hover ~ div:first-of-type': {
       backgroundColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.frenchVanilla100
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.background
         : 'white',
       borderColor: checked
-        ? themePrimary.main
+        ? variant === 'inverse'
+          ? colors.soap300
+          : themePrimary.main
         : disabled
         ? inputColors.disabled.border
+        : variant === 'inverse'
+        ? colors.soap300
         : inputColors.hoverBorder,
       borderWidth: '1px',
     },
     '&:focus, &focus:hover': {
       '& ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : themeFocusOutline,
         borderWidth: '2px',
+        borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline,
+        boxShadow: 'none',
+        ...focusRing({
+          width: variant === 'inverse' ? 2 : 0,
+          separation: 0,
+          animate: false,
+          innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+        }),
       },
     },
     '&:checked:focus ~ div:first-of-type': {
-      ...focusRing({separation: 2, outerColor: themeFocusOutline}),
+      ...focusRing({
+        separation: 2,
+        width: 2,
+        innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+        outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+      }),
+      borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
+      borderWidth: '2px',
     },
     ...mouseFocusBehavior({
       '&:focus ~ div:first-of-type': {
-        ...focusRing({width: 0, outerColor: themeFocusOutline}),
+        ...focusRing({
+          width: 0,
+          outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        }),
         borderWidth: '1px',
-        borderColor: checked ? themePrimary.main : inputColors.border,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : inputColors.border,
       },
       '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-        borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+        borderColor: checked
+          ? variant === 'inverse'
+            ? colors.soap300
+            : themePrimary.main
+          : variant === 'inverse'
+          ? colors.soap300
+          : inputColors.hoverBorder,
       },
     }),
   })
@@ -187,6 +228,7 @@ const RadioBackground = styled('div')<RadioProps>(
   ({
     checked,
     disabled,
+    variant,
     theme: {
       canvas: {
         palette: {primary: themePrimary},
@@ -194,19 +236,26 @@ const RadioBackground = styled('div')<RadioProps>(
     },
   }) => ({
     borderColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.soap300
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.border
+      : variant === 'inverse'
+      ? colors.soap300
       : inputColors.border,
     backgroundColor: checked
-      ? themePrimary.main
+      ? variant === 'inverse'
+        ? colors.frenchVanilla100
+        : themePrimary.main
       : disabled
       ? inputColors.disabled.background
       : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
   })
 );
 
-const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
+const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   {
     borderRadius: radioBorderRadius,
     display: 'flex',
@@ -216,8 +265,11 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
   },
-  ({theme}) => ({
-    backgroundColor: theme.canvas.palette.primary.contrast,
+  ({theme, variant}) => ({
+    backgroundColor:
+      variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
   }),
   ({checked}) => ({
     opacity: checked ? 1 : 0,
@@ -225,18 +277,35 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean}>(
+const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
   {
     ...canvas.type.levels.subtext.large,
     paddingLeft: radioLabelDistance,
   },
-  ({disabled}) => (disabled ? {color: inputColors.disabled.text} : {cursor: 'pointer'})
+  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
+  ({disabled, variant}) =>
+    disabled
+      ? {
+          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+          opacity: variant === 'inverse' ? '.4' : '1',
+        }
+      : {cursor: 'pointer'}
 );
 
 export const Radio = createComponent('input')({
   displayName: 'Radio',
   Component: (
-    {checked = false, id, label = '', disabled, name, onChange, value, ...elemProps}: RadioProps,
+    {
+      checked = false,
+      id,
+      label = '',
+      disabled,
+      name,
+      onChange,
+      value,
+      variant,
+      ...elemProps
+    }: RadioProps,
     ref,
     Element
   ) => {
@@ -255,15 +324,16 @@ export const Radio = createComponent('input')({
             type="radio"
             value={value}
             aria-checked={checked}
+            variant={variant}
             {...elemProps}
           />
-          <RadioRipple />
-          <RadioBackground checked={checked} disabled={disabled}>
-            <RadioCheck checked={checked} />
+          <RadioRipple variant={variant} />
+          <RadioBackground checked={checked} disabled={disabled} variant={variant}>
+            <RadioCheck checked={checked} variant={variant} />
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled}>
+          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
             {label}
           </RadioLabel>
         )}
@@ -271,5 +341,3 @@ export const Radio = createComponent('input')({
     );
   },
 });
-
-export default Radio;

package/radio/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Radio, {RadioProps} from './Radio';
+import {Radio, RadioProps} from './Radio';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {
   ErrorType,
@@ -117,4 +117,4 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 
 RadioGroup.ErrorType = ErrorType;
 
-export default RadioGroup;
+export {RadioGroup};

package/segmented-control/index.ts

@@ -1,5 +1 @@
-import SegmentedControl from './lib/SegmentedControl';
-
-export default SegmentedControl;
-export {SegmentedControl};
 export * from './lib/SegmentedControl';

package/segmented-control/lib/SegmentedControl.tsx

@@ -78,5 +78,3 @@ export const SegmentedControl = createComponent('div')({
     Button: SegmentedControlButton,
   },
 });
-
-export default SegmentedControl;

package/select/index.ts

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

package/select/lib/Select.tsx

@@ -18,7 +18,7 @@ import {
 } from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import SelectOption from './SelectOption';
+import {SelectOption} from './SelectOption';
 
 export interface SelectProps extends Themeable, GrowthBehavior {
   /**
@@ -147,5 +147,3 @@ export const Select = createComponent('select')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectOption.tsx

@@ -20,7 +20,7 @@ export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOption
   disabled?: boolean;
 }
 
-export default class SelectOption extends React.Component<SelectOptionProps> {
+export class SelectOption extends React.Component<SelectOptionProps> {
   public render() {
     const {disabled = false, value, label, ...elemProps} = this.props;
 

package/side-panel/README.md

@@ -16,7 +16,7 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import SidePanel from '@workday/canvas-kit-react/side-panel';
+import {SidePanel} from '@workday/canvas-kit-react/side-panel';
 
 interface SidePanelState {
   open: boolean;

package/side-panel/index.ts

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

package/side-panel/lib/SidePanel.tsx

@@ -167,7 +167,7 @@ const SidePanelFooter = styled('div')<Pick<SidePanelProps, 'open' | 'openWidth'>
   })
 );
 
-export default class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
+export class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
   static OpenDirection = SidePanelOpenDirection;
   static BackgroundColor = SidePanelBackgroundColor;
 

package/status-indicator/index.ts

@@ -1,5 +1 @@
-import StatusIndicator from './lib/StatusIndicator';
-
-export default StatusIndicator;
-export {StatusIndicator};
 export * from './lib/StatusIndicator';

package/status-indicator/lib/StatusIndicator.tsx

@@ -146,7 +146,7 @@ const StatusLabel = styled('span')({
   textOverflow: 'ellipsis',
 });
 
-export default class StatusIndicator extends React.Component<StatusIndicatorProps> {
+export class StatusIndicator extends React.Component<StatusIndicatorProps> {
   public static Type = StatusIndicatorType;
   public static Emphasis = StatusIndicatorEmphasis;
 

package/switch/index.ts

@@ -1,5 +1 @@
-import Switch from './lib/Switch';
-
-export default Switch;
-export {Switch};
 export * from './lib/Switch';

package/switch/lib/Switch.tsx

@@ -193,5 +193,3 @@ export const Switch = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Switch;

package/table/index.ts

@@ -1,7 +1,2 @@
-import Table from './lib/Table';
-import TableRow from './lib/TableRow';
-
-export default Table;
-export {Table, TableRow};
 export * from './lib/Table';
 export * from './lib/TableRow';

package/table/lib/Table.tsx

@@ -16,7 +16,7 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
   },
 });
 
-export default class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
+export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
   public render() {
     const {children, ...elemProps} = this.props;
 

package/table/lib/TableRow.tsx

@@ -192,7 +192,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
   }
 );
 
-const TableRow = createComponent('tr')({
+export const TableRow = createComponent('tr')({
   displayName: 'TableRow',
   Component: (
     {state, header, children, ...elemProps}: TableRowProps & StyledType,
@@ -209,5 +209,3 @@ const TableRow = createComponent('tr')({
     State: TableRowState,
   },
 });
-
-export default TableRow;

package/tabs/lib/TabsItem.tsx

@@ -12,6 +12,7 @@ import {
   ellipsisStyles,
   EllipsisText,
   createSubcomponent,
+  useModalityType,
 } from '@workday/canvas-kit-react/common';
 import {Box, StackProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
@@ -91,7 +92,6 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     backgroundColor: 'transparent',
     flex: '0 0 auto',
     alignItems: 'center',
-    maxWidth: '280px',
     padding: `${space.xs} ${space.s}`,
     height: 52,
     boxSizing: 'border-box',
@@ -201,10 +201,11 @@ export const TabsItem = createSubcomponent('button')({
     Icon: SystemIcon,
     Text: EllipsisText,
   },
-})<TabsItemProps>(({children, ...elemProps}, Element, model) => {
+})<TabsItemProps>(({children, ...elemProps}, Element) => {
+  const modality = useModalityType();
   return (
     <OverflowTooltip>
-      <StyledTabItem as={Element} {...elemProps}>
+      <StyledTabItem as={Element} maxWidth={modality === 'touch' ? undefined : 280} {...elemProps}>
         {children}
       </StyledTabItem>
     </OverflowTooltip>

package/tabs/lib/TabsList.tsx

@@ -6,6 +6,9 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  useModalityType,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
 import {Stack} from '@workday/canvas-kit-react/layout';
 import {
@@ -34,28 +37,44 @@ export interface TabListProps<T = any>
 
 export const useTabsList = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
-    return {role: 'tablist'};
+    const modality = useModalityType();
+    return {role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined};
   }),
   useOverflowListMeasure,
   useListResetCursorOnBlur
 );
 
+const StyledStack = styled(Stack)<StyledType>({
+  '::after': {
+    content: '""',
+    position: 'sticky',
+    height: 52,
+    minWidth: 30,
+    background: `linear-gradient(to right,rgba(255,255,255,0),white);`,
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    pointerEvents: 'none',
+  },
+});
+
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
   modelHook: useTabsModel,
   elemPropsHook: useTabsList,
 })<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
+  const modality = useModalityType();
   return (
-    <Stack
+    <StyledStack
       as={Element}
       position="relative"
       borderBottom={`1px solid ${commonColors.divider}`}
-      paddingX="m"
+      paddingX={modality === 'touch' ? 'zero' : 'm'}
       spacing="xxxs"
       {...elemProps}
     >
       {useListRenderItems(model, children)}
       {overflowButton}
-    </Stack>
+    </StyledStack>
   );
 });

package/tabs/lib/useTabsModel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
 import {
   defaultGetId,
   useListModel,
@@ -35,11 +35,13 @@ export const useTabsModel = createModelHook({
 })(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
   const getId = config.getId || defaultGetId;
+  const modality = useModalityType();
 
   const items = config.items;
 
   const model = useOverflowListModel(
     useOverflowListModel.mergeConfig(config, {
+      shouldCalculateOverflow: modality !== 'touch',
       orientation: config.orientation || 'horizontal',
       items,
       onRegisterItem(data) {

package/text-area/index.ts

@@ -1,5 +1 @@
-import TextArea from './lib/TextArea';
-
-export default TextArea;
-export {TextArea};
 export * from './lib/TextArea';

package/text-area/lib/TextArea.tsx

@@ -107,5 +107,3 @@ export const TextArea = createComponent('textarea')({
     ResizeDirection: TextAreaResizeDirection,
   },
 });
-
-export default TextArea;

package/text-input/index.ts

@@ -1,7 +1,3 @@
-import InputIconContainer from './lib/InputIconContainer';
-import TextInput from './lib/TextInput';
 
-export default TextInput;
-export {InputIconContainer, TextInput};
 export * from './lib/InputIconContainer';
 export * from './lib/TextInput';

package/text-input/lib/InputIconContainer.tsx

@@ -19,7 +19,7 @@ const IconContainer = styled('div')({
   right: space.xxs,
 });
 
-const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
+export const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
   InputIconContainerProps
 >> = ({grow, children, icon}) => (
   <Container grow={grow}>
@@ -27,5 +27,3 @@ const InputIconContainer: React.FunctionComponent<React.PropsWithChildren<
     {icon && <IconContainer>{icon}</IconContainer>}
   </Container>
 );
-
-export default InputIconContainer;

package/text-input/lib/TextInput.tsx

@@ -95,5 +95,3 @@ export const TextInput = createComponent('input')({
     ErrorType,
   },
 });
-
-export default TextInput;

package/toast/index.ts

@@ -1,5 +1 @@
-import {Toast} from './lib/Toast';
-
-export default Toast;
-export {Toast};
 export * from './lib/Toast';

package/tokens/index.ts

@@ -33,7 +33,7 @@ import {type,
 } from './lib/type';
 import {CSSProperties} from './lib/types';
 
-const canvas = {
+export const canvas = {
   buttonColors,
   chartingColorOffsets,
   chartingColors,
@@ -67,7 +67,6 @@ export {
   CanvasDepthValues,
   CSSProperties,
 };
-export default canvas;
 
 export type {
   CanvasBorderRadius,

package/tokens/lib/radius.ts

@@ -28,5 +28,3 @@ export const borderRadius: CanvasBorderRadius = {
   l: '8px',
   circle: '999px',
 };
-
-export default borderRadius;

package/tooltip/index.ts

@@ -1,6 +1,3 @@
-import {Tooltip} from './lib/Tooltip';
-
-export default Tooltip;
 export * from './lib/Tooltip';
 export * from './lib/OverflowTooltip';
 export * from './lib/TooltipContainer';