@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/action-bar/lib/ActionBar.tsx

@@ -13,11 +13,55 @@ export interface ActionBarProps {
   children: React.ReactNode;
 }
 
+/**
+ * `ActionBar` is a container component that is responsible for creating an {@link ActionBarModel}
+ * and sharing it with its subcomponents using React context. It does not represent a real element.
+ *
+ * ```tsx
+ * <ActionBar items={[]}>{Child components}</ActionBar>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useActionBarModel({
+ *   items: [],
+ * });
+ *
+ * <ActionBar model={model}>{Child components}</ActionBar>;
+ * ```
+ */
 export const ActionBar = createContainer()({
   displayName: 'ActionBar',
   modelHook: useActionBarModel,
   subComponents: {
+    /**
+     * `ActionBar.List` is a {@link Flex} element. It is a container for
+     * {@link ActionBarItem ActionBar.Item} subcomponents. To render an overflow button for
+     * ActionBar with overflow behavior `overflowButton` prop with overflow button component as a
+     * value should be passed.
+     *
+     * ```tsx
+     * // without overflow
+     * <ActionBar.List>{ActionBar.Items}</ActionBar.List>
+     *
+     * // with overflow
+     * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions"/>}>
+     *   {ActionBar.Items}
+     * </ActionBar.List>
+     * ```
+     */
     List: ActionBarList,
+    /**
+     * `ActionBar.Item` is a `button` element, by default it's a `SecondaryButton` unless an `as`
+     * prop is passed.
+     *
+     * ```tsx
+     * <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
+     *   First Action
+     * </ActionBar.Item>
+     * ```
+     */
     Item: ActionBarItem,
     OverflowButton: ActionBarOverflowButton,
     /**

package/action-bar/lib/ActionBarList.tsx

@@ -4,17 +4,17 @@ import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
 import {
   createSubcomponent,
   ExtractProps,
+  getTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
 
 import {useActionBarModel} from './useActionBarModel';
 
-// Use `Partial` here to make `spacing` optional
 export interface ActionBarListProps<T = any>
-  extends Omit<Partial<ExtractProps<typeof HStack, never>>, 'children'> {
+  extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
   /**
    * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
    * List will determine how and when the item will be rendered.
@@ -36,14 +36,17 @@ export interface ActionBarListProps<T = any>
   overflowButton?: React.ReactNode;
 }
 
-const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    padding: space.s,
-    '> *': {
-      flex: 1,
+const ResponsiveList = styled(Flex)<ActionBarListProps & StyledType>(({theme}) => {
+  const {canvas: canvasTheme} = getTheme(theme);
+  return {
+    [canvasTheme.breakpoints.down('s')]: {
+      padding: space.s,
+      '> *': {
+        flex: 1,
+      },
     },
-  },
-}));
+  };
+});
 
 export const useActionBarList = useOverflowListMeasure;
 
@@ -53,9 +56,9 @@ export const ActionBarList = createSubcomponent('div')({
   elemPropsHook: useActionBarList,
 })<ActionBarListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
   return (
-    <ResponsiveHStack
+    <ResponsiveList
       as={Element}
-      spacing="s"
+      gap="s"
       depth={1}
       background={commonColors.background}
       borderTop={`solid 1px ${colors.soap400}`}
@@ -68,6 +71,6 @@ export const ActionBarList = createSubcomponent('div')({
     >
       {useListRenderItems(model, children)}
       {overflowButton}
-    </ResponsiveHStack>
+    </ResponsiveList>
   );
 });

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -5,9 +5,9 @@ import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {
   createElemPropsHook,
   composeHooks,
-  subModelHook,
   createSubcomponent,
   StyledType,
+  createSubModelElemPropsHook,
 } from '@workday/canvas-kit-react/common';
 import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 
@@ -28,7 +28,7 @@ export const useActionBarOverflowButton = composeHooks(
     'aria-haspopup': true,
   })),
   useOverflowListTarget,
-  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
+  createSubModelElemPropsHook(useActionBarModel)(m => m.menu, useMenuTarget)
 );
 
 export const ActionBarOverflowButton = createSubcomponent('button')({

package/action-bar/lib/useActionBarModel.tsx

@@ -19,6 +19,12 @@ export const useActionBarModel = createModelHook({
      */
     orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
     menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+    /**
+     * The maximum number of actions that can be visible.
+     * Must be greater than 1 and less than items.length.
+     * @default 3
+     */
+    maximumVisible: 3,
   },
   requiredConfig: useOverflowListModel.requiredConfig,
 })(config => {
@@ -38,9 +44,20 @@ export const useActionBarModel = createModelHook({
   let nonInteractiveIds = model.state.nonInteractiveIds;
   const totalSize = model.state.items.length;
 
-  // Only show a maximum of 3 buttons
-  if (totalSize - hiddenIds.length >= 3) {
-    hiddenIds = items.slice(3, totalSize).map(getId);
+  console.log(config.maximumVisible);
+
+  // Only show maximumVisible buttons
+  const maximumVisible: number =
+    !config.maximumVisible || config.maximumVisible < 1
+      ? 3 // should fallback to default value
+      : config.maximumVisible > totalSize
+      ? totalSize
+      : config.maximumVisible;
+
+  console.log('maximumVisible', maximumVisible);
+
+  if (totalSize - hiddenIds.length >= maximumVisible) {
+    hiddenIds = items.slice(maximumVisible, totalSize).map(getId);
   }
 
   // Always show the first button and make sure it is interactive

package/banner/lib/Banner.tsx

@@ -36,13 +36,69 @@ const styles: CSSProperties = {
   ...hideMouseFocus,
 };
 
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
 export const Banner = createContainer('button')({
   displayName: 'Banner',
   modelHook: useBannerModel,
   elemPropsHook: useBanner,
   subComponents: {
+    /**
+     * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+     * exclamationCircleIcon when the model's hasError is true.
+     *
+     * ```tsx
+     * <Banner.Icon />
+     * ```
+     */
     Icon: BannerIcon,
+    /**
+     * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+     * the aria-describedby on the top level `<button>`.
+     *
+     * ```tsx
+     * <Banner.Label>3 Warnings</Banner.Label>
+     * ```
+     */
     Label: BannerLabel,
+    /**
+     * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+     * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+     * when the model's `isSticky` prop is set to true.
+     *
+     * ```tsx
+     * <Banner.ActionText>Custom call to action</Banner.ActionText>
+     * ```
+     */
     ActionText: BannerActionText,
   },
 })<BannerProps>(({children, ...elemProps}, Element, model) => {

package/banner/lib/BannerIcon.tsx

@@ -14,7 +14,6 @@ import {useBannerIcon, useBannerModel} from './hooks';
 export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
   /**
    * Icon to show next to label
-   * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
    */
   icon?: CanvasSystemIcon;
 }

package/banner/lib/hooks/index.ts

@@ -1,6 +1,8 @@
+import {getPaletteColors} from './useThemedPalette';
 export * from './useBannerModel';
 export * from './useThemedPalette';
 export * from './useBannerIcon';
 export * from './useBannerLabel';
 export * from './useBannerActionText';
 export * from './useBanner';
+export {getPaletteColors};

package/banner/lib/hooks/useThemedPalette.ts

@@ -27,10 +27,10 @@ const getPaletteColorsFromTheme = (
   };
 };
 
-export function getPaletteColors(
+export const getPaletteColors = (
   type: paletteSelection,
   theme: EmotionCanvasTheme
-): BackgroundColors {
+): BackgroundColors => {
   const palette = theme.canvas.palette[type];
 
   switch (type) {
@@ -44,7 +44,7 @@ export function getPaletteColors(
       return getPaletteColorsFromTheme(palette);
     }
   }
-}
+};
 
 export const useThemedPalette = (type: paletteSelection) => {
   const theme = useTheme();

package/breadcrumbs/lib/Breadcrumbs.tsx

@@ -23,14 +23,10 @@ export interface BreadcrumbsProps {
 }
 
 /**
- * ## Breadcrumbs
- * ---
- * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs#examples)
+ * `Breadcrumbs` is a container component that is responsible for creating a
+ * {@link BreadcrumbsModel} and sharing it with its subcomponents using React context. It also
+ * renders `nav` element, and `aria-label` attribute must be provided for this element.
  *
- * A compound component that allows users to keep track and maintain awareness
- * of their location as they navigate through pages, folders, files, etc.
- *
- * @example
  * ```tsx
  * <Breadcrumbs aria-label="Breadcrumbs">
  *   <Breadcrumbs.List>
@@ -46,29 +42,65 @@ export interface BreadcrumbsProps {
  *   <Breadcrumbs.List>
  * </Breadcrumbs>
  * ```
+ *
+ * You may pass {@link BreadcrumbsModelConfig} directly to the `Breadcrumbs` component.
+ *
+ * ```tsx
+ * <Breadcrumbs items={[]} aria-label="Breadcrumbs">
+ *   {Child components}
+ * </Breadcrumbs>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBreadcrumbsModel({
+ *   items: [],
+ * });
+ *
+ * <Breadcrumbs model={model} aria-label="Breadcrumbs">
+ *   {Child components}
+ * </Breadcrumbs>;
+ * ```
+ *
+ * Note that if you pass in a `model` configured with {@link useBreadcrumbsModel}, configuration
+ * props passed to `Breadcrumbs` will be ignored. `aria-label` attribute must be provided for `nav`
+ * element.
  */
 export const Breadcrumbs = createContainer('nav')({
   displayName: 'Breadcrumbs',
   modelHook: useBreadcrumbsModel,
   subComponents: {
     /**
-     * ### Breadcrumbs List
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbslist)
+     * `Breadcrumbs.List` is a `Flex` component rendered as a `<ul>` element. It is a container for
+     * `Breadcrumbs.Item` subcomponents. It also renders overflow button if `overflowButton` prop
+     * has been passed;
+     *
+     * ```tsx
+     * // without overflow
+     * <Breadcrumbs.List>{Breadcrumbs.Items}</Breadcrumbs.List>
+     * ```
      *
-     * The nav list containing `Breadcrumbs.Item` components and overflow button.
+     * ```tsx
+     * // with overflow
+     * <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
+     *   {Breadcrumbs.Items}
+     * </Breadcrumbs.List>
+     * ```
+     *
+     * `Breadcrumbs.List` accepts a `overflowButton` prop allowing to pass specific overflow button.
+     * Breadcrumbs.List with overflow behavior should contain `overflowButton` component with
+     * `aria-label` to render overflow button.
      */
     List: BreadcrumbsList,
     /**
-     * ### Breadcrumbs Item
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsitem)
+     * `Breadcrumbs.Item` is a {@link Flex} component rendered as an `<li>` element. It is a
+     * container for the `Breadcrumbs.Link` subcomponent which provides correct overflow behavior
+     * across all items.
      *
-     * List items in `Breadcrumbs.List`.
-     * By default, this item is truncated with a tooltip at `350px`,
-     * but that can be customized with the `maxWidth` prop.
+     * List items in {@link BreadcrumbsList Breadcrumbs.List}. By default, this item is truncated
+     * with a tooltip at `350px`, but that can be customized with the `maxWidth` prop.
      *
-     * @example
      * ```tsx
      * <Breadcrumbs.Item maxWidth={200}>
      *   <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
@@ -77,36 +109,17 @@ export const Breadcrumbs = createContainer('nav')({
      */
     Item: BreadcrumbsItem,
     /**
-     * ### Breadcrumbs Overflow Button
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsoverflowbutton)
-     *
-     * The toggle button for the Breadcrumbs Menu.
-     * This button is rendered in the `Breadcrumbs.List` when `overflowButtonProps` passed
-     * and becomes visible when the list overflows. `overflowButtonProps must contain at least `aria-label`.
-     * If you need to pass other props to it, you can do so by adding it to `overflowButtonProps` passed to the List.
-     *
-     * @example
-     * ```tsx
-     * <Breadcrumbs.List
-     *   overflowButtonProps={{
-     *     'aria-label': 'More links',
-     *     onClick={handleOverflowButtonClick}
-     *   }}
-     * >
-     * ```
+     * `Breadcrumbs.Link` is a styled `<a>` element that also renders a tooltip if the text is
+     * truncated. The built-in truncation and tooltip functionality provides an easy-to-use,
+     * accessible feature for managing the length of link text. The `maxWidth` is set to `350px` by
+     * default and can be adjusted as needed. Note that tooltips will only render when text is
+     * truncated
      */
-    OverflowButton: BreadcrumbsOverflowButton,
+    Link: BreadcrumbsLink,
     /**
-     * ### Breadcrumbs Current Item
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbscurrentitem)
-     *
-     * The last element in the list of `Breadcrumbs.Item`s.
-     * By default, this item is truncated with a tooltip at `350px`,
-     * But that can be customized with the `maxWidth` prop.
+     * The last element in the list of `Breadcrumbs.Item`s. By default, this item is truncated with
+     * a tooltip at `350px`, But that can be customized with the `maxWidth` prop.
      *
-     * @example
      * ```tsx
      * <Breadcrumbs.CurrentItem maxWidth={200}>
      *   Current Item Text
@@ -115,21 +128,28 @@ export const Breadcrumbs = createContainer('nav')({
      */
     CurrentItem: BreadcrumbsCurrentItem,
     /**
-     * ### Breadcrumbs Link
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbslink)
+     * The toggle button for the Breadcrumbs Menu. This button is rendered in the
+     * {@link BreadcrumbsList Breadcrumbs.List} when `overflowButtonProps` passed and becomes
+     * visible when the list overflows. `overflowButtonProps must contain at least `aria-label`. If
+     * you need to pass other props to it, you can do so by adding it to `overflowButtonProps`
+     * passed to the List.
      *
-     * The hyperlink element in each `Breadcrumbs.Item`.
+     * ```tsx
+     * <Breadcrumbs.List
+     *   overflowButtonProps={{
+     *     'aria-label': 'More links',
+     *     onClick={handleOverflowButtonClick}
+     *   }}
+     * >
+     * ```
      */
-    Link: BreadcrumbsLink,
+    OverflowButton: BreadcrumbsOverflowButton,
     /**
-     * ### Breadcrumbs Menu
-     * ---
-     * [View Developer Docs](https://canvas.workdaydesign.com/components/navigation/breadcrumbs/#breadcrumbsmenu)
+     * The `Breadcrumbs.Menu` uses the {@link Menu} component under the hood. The overflow menu for
+     * Breadcrumbs. If there isn't enough room to render all links, it will automatically overflow
+     * items into this menu.
      *
-     * The overflow menu for Breadcrumbs. If there isn't enough room to render all links,
-     * it will automatically overflow items into this menu.
-     * @example
+     * ```tsx
      * <Breadcrumbs.Menu.Popper>
      *   <Breadcrumbs.Menu.Card>
      *     <Breadcrumbs.Menu.List>
@@ -137,6 +157,7 @@ export const Breadcrumbs = createContainer('nav')({
      *     </Breadcrumbs.Menu.List>
      *   </Breadcrumbs.Menu.Card>
      * </Breadcrumbs.Menu.Popper>
+     * ```
      */
     Menu: BreadcrumbsMenu,
   },

package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import {
-  styled,
   createElemPropsHook,
   useLocalRef,
   composeHooks,
   createSubcomponent,
-  StyledType,
-  ellipsisStyles,
   useForkRef,
 } from '@workday/canvas-kit-react/common';
 import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
@@ -21,18 +18,6 @@ export interface BreadcrumbsCurrentItemProps extends TextProps {
   tooltipProps?: OverflowTooltipProps;
 }
 
-const ListItem = styled(Text.as('li'))<BreadcrumbsCurrentItemProps & StyledType>(
-  {
-    alignItems: 'center',
-    flexDirection: 'column',
-  },
-  ({maxWidth}: BreadcrumbsCurrentItemProps) => ({
-    maxWidth,
-    display: 'inline-block',
-    ...ellipsisStyles,
-  })
-);
-
 export const useBreadcrumbsItem = composeHooks(
   createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any, elemProps) => {
     const {localRef} = useLocalRef(useForkRef(ref));
@@ -61,15 +46,19 @@ export const BreadcrumbsCurrentItem = createSubcomponent('li')({
   ({children, tooltipProps = {}, maxWidth = '350px', ...elemProps}, Element) => {
     return (
       <OverflowTooltip {...tooltipProps}>
-        <ListItem
+        <Text
           as={Element}
           typeLevel="subtext.large"
-          maxWidth={maxWidth}
           fontWeight="medium"
+          display="inline-block"
+          maxWidth={maxWidth}
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          overflow="hidden"
           {...elemProps}
         >
           {children}
-        </ListItem>
+        </Text>
       </OverflowTooltip>
     );
   }

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -35,11 +35,10 @@ export interface BreadcrumbsItemProps extends FlexProps {
 
 export const useBreadcrumbsItem = composeHooks(
   useOverflowListItemMeasure,
-  useListItemRegister,
   createElemPropsHook(useBreadcrumbsModel)(
     (
       {state},
-      _?: React.Ref<HTMLElement>,
+      _,
       elemProps: {
         'data-id'?: string;
         item?: {id: string};
@@ -52,7 +51,8 @@ export const useBreadcrumbsItem = composeHooks(
         disabled: undefined,
       };
     }
-  )
+  ),
+  useListItemRegister
 );
 
 export const BreadcrumbsItem = createSubcomponent('li')({

package/breadcrumbs/lib/BreadcrumbsList.tsx

@@ -6,9 +6,8 @@ import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-re
 import {space} from '@workday/canvas-kit-react/tokens';
 import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
 
-// Use `Partial` here to make `spacing` optional
 export interface BreadcrumbsListProps<T = any>
-  extends Omit<Partial<ExtractProps<typeof Flex, never>>, 'children'> {
+  extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
   overflowButton?: React.ReactNode;
   /**
    * If items are passed to a `BreadcrumbsModel`, the child of `Breadcrumbs.List` should be a render prop. The

package/button/lib/BaseButton.tsx

@@ -12,7 +12,8 @@ import {
   EmotionCanvasTheme,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {BoxProps, boxStyleFn} from '@workday/canvas-kit-react/layout';
+import {SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {boxStyleFn} from '@workday/canvas-kit-react/layout';
 import {borderRadius, space, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
 
 import {ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes} from './types';
@@ -20,13 +21,14 @@ import {ButtonColors, ButtonSizes, IconPositions, TertiaryButtonSizes} from './t
 import {CSSObject} from '@emotion/styled';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
-export interface ButtonContainerProps extends BoxProps, GrowthBehavior {
+export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBehavior {
+  /**
+   * Override default colors of a button. The default will depend on the button type
+   */
   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;
   /**
@@ -294,7 +296,7 @@ export const BaseButton = createComponent('button')({
   displayName: 'Button',
   Component: ({children, ...elemProps}: ButtonContainerProps, ref, Element) => {
     return (
-      <ButtonContainer as={Element} ref={ref} {...elemProps}>
+      <ButtonContainer as={Element} ref={ref} type="button" {...elemProps}>
         {children}
       </ButtonContainer>
     );

package/button/lib/DeleteButton.tsx

@@ -12,7 +12,6 @@ import {
 export interface DeleteButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
   /**
    * The size of the Button.
-   * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
   children?: React.ReactNode;
@@ -42,6 +41,11 @@ const getDeleteButtonColors = ({
   },
 });
 
+/**
+ * Use sparingly for destructive actions that will result in data loss, can’t be undone, or will
+ * have significant consequences. They commonly appear in confirmation dialogs as the final
+ * confirmation before deleting.
+ */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
   Component: (

package/button/lib/ExternalHyperlink.tsx

@@ -34,18 +34,17 @@ const StyledSystemIcon = styled(SystemIcon)<StyledType>({
   marginLeft: '2px',
 });
 
+/**
+ * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
+ * link on a dark or colorful background such as `blueberry400`.
+ */
 export const ExternalHyperlink = createComponent('a')({
   displayName: 'ExternalHyperlink',
   Component: (
-    {
-      children,
-      variant,
-      iconLabel = 'Opens link in new window',
-      ...elemProps
-    }: ExternalHyperlinkProps,
+    {children, iconLabel = 'Opens link in new window', ...elemProps}: ExternalHyperlinkProps,
     ref
   ) => (
-    <Anchor ref={ref} target="_blank" rel="noreferrer" variant={variant} {...elemProps}>
+    <Anchor ref={ref} target="_blank" rel="noreferrer" {...elemProps}>
       <span>{children}</span>
       <StyledSystemIcon
         icon={extLinkIcon}

package/button/lib/Hyperlink.tsx

@@ -66,10 +66,14 @@ const Anchor = styled('a')<HyperlinkProps & StyledType>(
   anchorVariants
 );
 
+/**
+ * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
+ * on the current page.
+ */
 export const Hyperlink = createComponent('a')({
   displayName: 'Hyperlink',
-  Component: ({variant, href, children, ...elemProps}: HyperlinkProps, ref, Element) => (
-    <Anchor ref={ref} as={Element} variant={variant} href={href} {...elemProps}>
+  Component: ({children, ...elemProps}: HyperlinkProps, ref, Element) => (
+    <Anchor ref={ref} as={Element} {...elemProps}>
       {children}
     </Anchor>
   ),