@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/button/lib/IconButton.tsx

@@ -1,279 +0,0 @@
-import * as React from 'react';
-import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {
-  focusRing,
-  useTheme,
-  Themeable,
-  EmotionCanvasTheme,
-  createComponent,
-} from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {ButtonColors} from './types';
-import {ButtonContainer} from './parts';
-
-export interface IconButtonProps extends Themeable {
-  /**
-   * The accessibility label to indicate the action triggered by clicking the IconButton. This is optional because there are
-   * instances where an Icon Button might already have an `aria-labelledby`. In a case where an `aria-labelledby` is provided
-   * it will take precedence over the `aria-label` as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
-   * We highly encourage consumers to either provide an `aria-label` OR an `aria-labelledby`
-   */
-  'aria-label'?: string;
-  /**
-   * The type of the IconButton.
-   * @default 'circle'
-   */
-  variant?:
-    | 'square'
-    | 'squareFilled'
-    | 'plain'
-    | 'circle'
-    | 'circleFilled'
-    | 'inverse'
-    | 'inverseFilled';
-  /**
-   * The size of the IconButton.
-   * @default 'medium'
-   */
-  size?: 'small' | 'medium';
-  /**
-   * The toggled state of the button. If defined as a boolean, then it manages the toggled state: on (`true`) or off (`false`).
-   * @default undefined
-   */
-  toggled?: boolean;
-  /**
-   * The icon of the IconButton.
-   */
-  icon?: CanvasSystemIcon;
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
-   */
-  shouldMirrorIcon?: boolean;
-  /**
-   * The function called when the IconButton toggled state changes.
-   */
-  onToggleChange?: (toggled: boolean | undefined) => void;
-  value?: string | string[] | number;
-  children?: React.ReactNode;
-}
-
-export const IconButton = createComponent('button')({
-  displayName: 'IconButton',
-  Component: (
-    {
-      // TODO: Fix useTheme and make it a real hook
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      theme = useTheme(),
-      variant = 'circle',
-      size = 'medium',
-      onToggleChange,
-      icon,
-      shouldMirrorIcon = false,
-      toggled,
-      children,
-      ...elemProps
-    }: IconButtonProps,
-    ref,
-    Element
-  ) => {
-    const isInitialMount = React.useRef(true);
-
-    // Only call onToggleChange on update - not on first mount
-    React.useEffect(() => {
-      if (isInitialMount.current) {
-        isInitialMount.current = false;
-      } else {
-        if (toggled && typeof onToggleChange === 'function') {
-          onToggleChange(toggled);
-        }
-      }
-    }, [toggled, onToggleChange]);
-
-    const containerStyles = {
-      padding: 0,
-      margin: variant === 'plain' ? '-8px' : undefined,
-      minWidth: size === 'small' ? space.l : space.xl, // min-width is set so buttons don't collapse in IE11
-      width: size === 'small' ? space.l : space.xl,
-      height: size === 'small' ? space.l : space.xl,
-      ...getIconButtonBorderRadius(variant),
-      ['& .wd-icon']: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        width: size === 'small' ? '20px' : undefined,
-        height: size === 'small' ? '20px' : undefined,
-      },
-    };
-
-    return (
-      <ButtonContainer
-        ref={ref}
-        as={Element}
-        colors={getIconButtonColors(variant, theme, toggled)}
-        size={size}
-        fillIcon={toggled}
-        extraStyles={containerStyles}
-        aria-pressed={toggled}
-        {...elemProps}
-      >
-        {icon ? <SystemIcon icon={icon} shouldMirror={shouldMirrorIcon} /> : children}
-      </ButtonContainer>
-    );
-  },
-});
-
-const getIconButtonBorderRadius = (variant: IconButtonProps['variant']) => {
-  switch (variant) {
-    case 'square':
-    case 'squareFilled':
-      return {borderRadius: borderRadius.m};
-    default:
-      return {borderRadius: borderRadius.circle};
-  }
-};
-
-const getIconButtonColors = (
-  variant: IconButtonProps['variant'],
-  theme: EmotionCanvasTheme,
-  toggled?: boolean
-): ButtonColors => {
-  const {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  } = theme;
-
-  switch (variant) {
-    case 'square':
-    case 'circle':
-    default:
-      return {
-        default: {
-          background: toggled ? themePrimary.main : undefined,
-          icon: toggled ? themePrimary.contrast : colors.licorice200,
-        },
-        hover: {
-          background: toggled ? themePrimary.dark : colors.soap300,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        active: {
-          background: toggled ? themePrimary.dark : colors.soap500,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        focus: {
-          background: toggled ? themePrimary.main : undefined,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        disabled: {
-          background: toggled ? themePrimary.lightest : 'transparent',
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'squareFilled':
-    case 'circleFilled':
-      return {
-        default: {
-          background: toggled ? themePrimary.main : colors.soap200,
-          icon: toggled ? themePrimary.contrast : colors.licorice200,
-        },
-        hover: {
-          background: toggled ? themePrimary.dark : colors.soap400,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        active: {
-          background: toggled ? themePrimary.dark : colors.soap500,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        focus: {
-          background: toggled ? themePrimary.main : colors.soap200,
-          icon: toggled ? themePrimary.contrast : colors.licorice500,
-        },
-        disabled: {
-          background: toggled ? themePrimary.lightest : colors.soap100,
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'plain':
-      return {
-        default: {
-          icon: toggled ? themePrimary.main : colors.licorice200,
-        },
-        hover: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-        },
-        active: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-        },
-        focus: {
-          icon: toggled ? themePrimary.main : colors.licorice500,
-          focusRing: focusRing({}, theme),
-        },
-        disabled: {
-          icon: toggled ? themePrimary.light : colors.soap600,
-        },
-      };
-    case 'inverse':
-      return {
-        default: {
-          background: toggled ? themePrimary.contrast : undefined,
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        hover: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        active: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.3)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        focus: {
-          background: toggled ? themePrimary.contrast : undefined,
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-          focusRing: focusRing(
-            {
-              separation: 2,
-              innerColor: 'currentColor',
-              outerColor: themePrimary.contrast,
-            },
-            theme
-          ),
-        },
-        disabled: {
-          background: toggled ? 'rgba(255,255,255,0.75)' : 'transparent',
-          icon: toggled ? themePrimary.main : 'rgba(255, 255, 255, 0.75)',
-        },
-      };
-    case 'inverseFilled':
-      return {
-        default: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        hover: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.3)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        active: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.4)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-        },
-        focus: {
-          background: toggled ? themePrimary.contrast : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : themePrimary.contrast,
-          focusRing: focusRing(
-            {
-              separation: 2,
-              innerColor: 'currentColor',
-              outerColor: themePrimary.contrast,
-            },
-            theme
-          ),
-        },
-        disabled: {
-          background: toggled ? 'rgba(255,255,255,0.75)' : 'rgba(0, 0, 0, 0.2)',
-          icon: toggled ? themePrimary.main : 'rgba(255, 255, 255, 0.75)',
-        },
-      };
-  }
-};

package/button/lib/parts/ButtonContainer.tsx

@@ -1,246 +0,0 @@
-import * as React from 'react';
-import isPropValid from '@emotion/is-prop-valid';
-import {CSSObject} from '@emotion/styled';
-import {borderRadius, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
-import {
-  GrowthBehavior,
-  mouseFocusBehavior,
-  focusRing,
-  styled,
-  EmotionCanvasTheme,
-} from '@workday/canvas-kit-react/common';
-import {ButtonColors, ButtonSizes} from '../types';
-import {buttonLabelDataClassName} from './ButtonLabelData';
-
-export interface ButtonContainerProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    GrowthBehavior {
-  colors?: ButtonColors;
-  /**
-   * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-   * If no size is provided, it will default to `medium`.
-   *
-   * @default 'medium'
-   */
-  size?: ButtonSizes;
-  /**
-   * The ref to the button that the styled component renders.
-   */
-  ref?: React.Ref<HTMLButtonElement>;
-  /**
-   * Whether the icon should received filled (colored background layer) or regular styles.
-   * Corresponds to `toggled` in IconButton
-   */
-  fillIcon?: boolean;
-  /**
-   * Any extra styles necessary for a given parent component.
-   * This avoids using the inline `style` attribute when the shape needs to be customized (e.g. for IconButton)
-   */
-  extraStyles?: CSSObject;
-}
-
-function getIconColorSelectors(
-  {
-    canvas: {
-      palette: {primary: themePrimary},
-    },
-  }: EmotionCanvasTheme,
-  color: string,
-  fill?: boolean
-): CSSObject {
-  return {
-    '&:focus span, &:hover span, & span': {
-      '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
-        fill: color,
-      },
-      '.wd-icon-background': {
-        fill: fill ? color : undefined,
-      },
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: fill
-          ? color === themePrimary.contrast
-            ? themePrimary.main
-            : themePrimary.contrast
-          : color,
-      },
-    },
-  };
-}
-
-export const ButtonContainer = styled('button', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<ButtonContainerProps>(
-  {
-    ...type.levels.subtext.large,
-    fontWeight: type.properties.fontWeights.bold,
-    lineHeight: 'normal',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    background: 'none',
-    borderRadius: borderRadius.circle,
-    boxShadow: 'none',
-    position: 'relative',
-    cursor: 'pointer',
-    outline: 'none',
-    verticalAlign: 'middle',
-    border: '1px solid transparent',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    WebkitFontSmoothing: 'antialiased',
-    MozOsxFontSmoothing: 'grayscale',
-
-    transition:
-      'box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear',
-
-    // Makes the "down" state of the button happens faster than the hover state, so it animates in correctly.
-    '&:hover:active': {transitionDuration: '40ms'},
-
-    '&:disabled, &:disabled:active': {cursor: 'default', boxShadow: 'none'},
-
-    '& > *:first-of-type': {
-      marginLeft: 0,
-    },
-
-    '& > *:last-of-type': {
-      marginRight: 0,
-    },
-  },
-  ({size}) => {
-    switch (size) {
-      case 'large':
-        return {
-          ...type.levels.body.small,
-          fontWeight: type.properties.fontWeights.bold,
-          minWidth: '112px',
-          height: '48px',
-          padding: `0 ${space.l}`,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxs / 2}px`,
-          },
-        };
-      case 'medium':
-      default:
-        return {
-          minWidth: '96px',
-          height: space.xl,
-          padding: `0 ${space.m}`,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxs / 2}px`,
-          },
-        };
-      case 'small':
-        return {
-          minWidth: '80px',
-          height: space.l,
-          padding: `0 ${space.s}`,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxxs / 2}px`,
-          },
-        };
-      case 'extraSmall':
-        return {
-          ...type.levels.subtext.medium,
-          fontWeight: type.properties.fontWeights.bold,
-          height: space.m,
-          padding: `0 ${space.xs}`,
-          '& > * ': {
-            margin: `0 ${spaceNumbers.xxxs / 2}px`,
-          },
-        };
-    }
-  },
-  ({grow}) => grow && {width: '100%', maxWidth: '100%'},
-  ({colors, fillIcon, theme}) => {
-    if (!colors) {
-      return;
-    }
-    const baseStyles = {
-      backgroundColor: colors.default.background,
-      borderColor: colors.default.border,
-      color: colors.default.label,
-      ...(colors.default.icon && {
-        '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
-          transition: 'fill 120ms ease-in',
-        },
-        ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
-      }),
-      ...(colors.default.labelData && {
-        ['.' + buttonLabelDataClassName]: {
-          color: colors.default.labelData,
-        },
-      }),
-    };
-
-    const hoverStyles = {
-      '&:hover': {
-        backgroundColor: colors.hover.background,
-        borderColor: colors.hover.border,
-        color: colors.hover.label,
-        ...(colors.hover.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            transition: 'color 120ms ease-in',
-            color: colors.hover.labelData,
-          },
-        }),
-        ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
-      },
-    };
-
-    const activeStyles = {
-      '&:active, &:focus:active, &:hover:active': {
-        backgroundColor: colors.active.background,
-        borderColor: colors.active.border,
-        color: colors.active.label,
-        ...(colors.active.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.active.labelData,
-          },
-        }),
-        ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
-      },
-    };
-
-    return {
-      ...baseStyles,
-      '&:focus': {
-        backgroundColor: colors.focus.background,
-        borderColor: colors.focus.border,
-        color: colors.focus.label,
-        ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
-        ...(colors.focus.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.focus.labelData,
-          },
-        }),
-        ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
-      },
-
-      ...activeStyles,
-      ...hoverStyles,
-      '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
-        backgroundColor: colors.disabled.background,
-        borderColor: colors.disabled.border,
-        color: colors.disabled.label,
-        ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
-        ...(colors.disabled.labelData && {
-          ['.' + buttonLabelDataClassName]: {
-            color: colors.disabled.labelData,
-          },
-        }),
-      },
-      ...mouseFocusBehavior({
-        '&:focus': {
-          ...baseStyles,
-          outline: 'none',
-          boxShadow: 'none',
-          animation: 'none',
-          ...hoverStyles,
-          ...activeStyles,
-        },
-      }),
-    };
-  },
-  ({extraStyles}) => extraStyles
-);

package/button/lib/parts/ButtonLabelData.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import {styled} from '@workday/canvas-kit-react/common';
-
-export const buttonLabelDataClassName = 'button-label-data';
-
-const Container = styled('span')({
-  position: 'relative', // Fixes an IE issue with text within button moving on click
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  fontWeight: 400,
-});
-
-export const ButtonLabelData = (props: any) => (
-  <Container className={buttonLabelDataClassName} {...props} />
-);

package/dist/commonjs/button/lib/IconButton.d.ts

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { Themeable } from '@workday/canvas-kit-react/common';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface IconButtonProps extends Themeable {
-    /**
-     * The accessibility label to indicate the action triggered by clicking the IconButton. This is optional because there are
-     * instances where an Icon Button might already have an `aria-labelledby`. In a case where an `aria-labelledby` is provided
-     * it will take precedence over the `aria-label` as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
-     * We highly encourage consumers to either provide an `aria-label` OR an `aria-labelledby`
-     */
-    'aria-label'?: string;
-    /**
-     * The type of the IconButton.
-     * @default 'circle'
-     */
-    variant?: 'square' | 'squareFilled' | 'plain' | 'circle' | 'circleFilled' | 'inverse' | 'inverseFilled';
-    /**
-     * The size of the IconButton.
-     * @default 'medium'
-     */
-    size?: 'small' | 'medium';
-    /**
-     * The toggled state of the button. If defined as a boolean, then it manages the toggled state: on (`true`) or off (`false`).
-     * @default undefined
-     */
-    toggled?: boolean;
-    /**
-     * The icon of the IconButton.
-     */
-    icon?: CanvasSystemIcon;
-    /**
-     * If set to `true`, transform the icon's x-axis to mirror the graphic
-     * @default false
-     */
-    shouldMirrorIcon?: boolean;
-    /**
-     * The function called when the IconButton toggled state changes.
-     */
-    onToggleChange?: (toggled: boolean | undefined) => void;
-    value?: string | string[] | number;
-    children?: React.ReactNode;
-}
-export declare const IconButton: import("../../common").ElementComponent<"button", IconButtonProps>;
-//# sourceMappingURL=IconButton.d.ts.map

package/dist/commonjs/button/lib/IconButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EACJ,QAAQ,GACR,cAAc,GACd,OAAO,GACP,QAAQ,GACR,cAAc,GACd,SAAS,GACT,eAAe,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,oEA8DrB,CAAC"}