@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/breadcrumbs/lib/Breadcrumbs.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {BreadcrumbsList} from './BreadcrumbsList';
+import {BreadcrumbsOverflowButton} from './BreadcrumbsOverflowButton';
+import {BreadcrumbsItem} from './BreadcrumbsItem';
+import {BreadcrumbsLink} from './BreadcrumbsLink';
+import {BreadcrumbsCurrentItem} from './BreadcrumbsCurrentItem';
+import {BreadcrumbsMenu} from './BreadcrumbsMenu';
+
+export interface BreadcrumbsProps {
+  /**
+   * The accessibility label for the nav element.
+   * It's required to be provided by a11y guidance.
+   *
+   */
+  'aria-label': string;
+  /**
+   * The contents of the Breadcrumbs. Can be `Breadcrumbs` children or any valid elements.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * `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.
+ *
+ * ```tsx
+ * <Breadcrumbs aria-label="Breadcrumbs">
+ *   <Breadcrumbs.List>
+ *     <Breadcrumbs.Item>
+ *       <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
+ *     <Breadcrumbs.Item>
+ *     <Breadcrumbs.Item>
+ *       <Breadcrumbs.Link href="/docs/components">Components</Breadcrumbs.Link>
+ *     <Breadcrumbs.Item>
+ *     <Breadcrumbs.CurrentItem>
+ *       <Breadcrumbs.Link href="/docs/components/breadcrumbs">Breadcrumbs</Breadcrumbs.Link>
+ *     <Breadcrumbs.CurrentItem>
+ *   <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` 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>
+     * ```
+     *
+     * ```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` 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 {@link BreadcrumbsList Breadcrumbs.List}. By default, this item is truncated
+     * with a tooltip at `350px`, but that can be customized with the `maxWidth` prop.
+     *
+     * ```tsx
+     * <Breadcrumbs.Item maxWidth={200}>
+     *   <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
+     * </Breadcrumbs.Item>
+     * ```
+     */
+    Item: BreadcrumbsItem,
+    /**
+     * `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
+     */
+    Link: BreadcrumbsLink,
+    /**
+     * 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.
+     *
+     * ```tsx
+     * <Breadcrumbs.CurrentItem maxWidth={200}>
+     *   Current Item Text
+     * </Breadcrumbs.CurrentItem>
+     * ```
+     */
+    CurrentItem: BreadcrumbsCurrentItem,
+    /**
+     * 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.
+     *
+     * ```tsx
+     * <Breadcrumbs.List
+     *   overflowButtonProps={{
+     *     'aria-label': 'More links',
+     *     onClick={handleOverflowButtonClick}
+     *   }}
+     * >
+     * ```
+     */
+    OverflowButton: BreadcrumbsOverflowButton,
+    /**
+     * 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.
+     *
+     * ```tsx
+     * <Breadcrumbs.Menu.Popper>
+     *   <Breadcrumbs.Menu.Card>
+     *     <Breadcrumbs.Menu.List>
+     *       {(item: MyActionItem) => <Breadcrumbs.Menu.Item>{item.text}</Breadcrumbs.Menu.Item>}
+     *     </Breadcrumbs.Menu.List>
+     *   </Breadcrumbs.Menu.Card>
+     * </Breadcrumbs.Menu.Popper>
+     * ```
+     */
+    Menu: BreadcrumbsMenu,
+  },
+})<BreadcrumbsProps>(({children, ...elemProps}, _, model) => {
+  return (
+    <Menu model={model.menu}>
+      <nav role="navigation" {...elemProps}>
+        {children}
+      </nav>
+    </Menu>
+  );
+});

package/breadcrumbs/lib/BreadcrumbsCurrentItem.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  createElemPropsHook,
+  useLocalRef,
+  composeHooks,
+  createSubcomponent,
+  useForkRef,
+} from '@workday/canvas-kit-react/common';
+import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {
+  useListItemRegister,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {Text, TextProps} from '@workday/canvas-kit-react/text';
+
+export interface BreadcrumbsCurrentItemProps extends TextProps {
+  tooltipProps?: OverflowTooltipProps;
+}
+
+export const useBreadcrumbsItem = composeHooks(
+  createElemPropsHook(useBreadcrumbsModel)((_model: any, ref: any, elemProps) => {
+    const {localRef} = useLocalRef(useForkRef(ref));
+    let shouldShowTooltip = false;
+    const refCurrent = localRef.current;
+
+    if (refCurrent) {
+      const {scrollWidth, clientWidth} = refCurrent as {scrollWidth: number; clientWidth: number};
+      shouldShowTooltip = scrollWidth > clientWidth;
+    }
+
+    return {
+      tabIndex: shouldShowTooltip ? 0 : undefined,
+      ref: localRef,
+    };
+  }),
+  useOverflowListItemMeasure,
+  useListItemRegister
+);
+
+export const BreadcrumbsCurrentItem = createSubcomponent('li')({
+  displayName: 'Breadcrumbs.Item',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useBreadcrumbsItem,
+})<BreadcrumbsCurrentItemProps>(
+  ({children, tooltipProps = {}, maxWidth = '350px', ...elemProps}, Element) => {
+    return (
+      <OverflowTooltip {...tooltipProps}>
+        <Text
+          as={Element}
+          typeLevel="subtext.large"
+          fontWeight="medium"
+          display="inline-block"
+          maxWidth={maxWidth}
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          overflow="hidden"
+          {...elemProps}
+        >
+          {children}
+        </Text>
+      </OverflowTooltip>
+    );
+  }
+);

package/breadcrumbs/lib/BreadcrumbsItem.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  composeHooks,
+  createSubcomponent,
+  createElemPropsHook,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {
+  useListItemRegister,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {BreadcrumbsLink} from './BreadcrumbsLink';
+
+export interface BreadcrumbsItemProps extends FlexProps {
+  /**
+   * The contents of the action item. This will be the accessible name of the action for screen readers.
+   *
+   * ```tsx
+   * <Breadcrumbs.Item>First Action</Breadcrumbs.Item>
+   * ```
+   */
+  children: React.ReactNode;
+  /**
+   * The identifier of the action. This identifier will be used for correct overflow behavior.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the Item when it was initialized.
+   */
+  'data-id'?: string;
+}
+
+export const useBreadcrumbsItem = composeHooks(
+  useOverflowListItemMeasure,
+  createElemPropsHook(useBreadcrumbsModel)(
+    (
+      {state},
+      _,
+      elemProps: {
+        'data-id'?: string;
+        item?: {id: string};
+      } = {}
+    ) => {
+      const [localId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
+
+      return {
+        inert: state.nonInteractiveIds.includes(localId) ? '' : undefined,
+        disabled: undefined,
+      };
+    }
+  ),
+  useListItemRegister
+);
+
+export const BreadcrumbsItem = createSubcomponent('li')({
+  displayName: 'Breadcrumbs.Item',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useBreadcrumbsItem,
+  subComponents: {
+    Link: BreadcrumbsLink,
+  },
+})<BreadcrumbsItemProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Flex as={Element} alignItems="center" whiteSpace="nowrap" {...elemProps}>
+      {children}
+      <SystemIcon
+        icon={chevronRightSmallIcon}
+        color={colors.licorice200}
+        colorHover={colors.licorice200}
+        size={20}
+        height={space.l}
+        width={space.l}
+        shouldMirror={useIsRTL()}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        aria-hidden
+      />
+    </Flex>
+  );
+});

package/breadcrumbs/lib/BreadcrumbsLink.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {styled, createComponent, ellipsisStyles} from '@workday/canvas-kit-react/common';
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {type} from '@workday/canvas-kit-react/tokens';
+
+export interface BreadcrumbsLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * The href url of the anchor tag
+   */
+  href: string;
+  /**
+   * The max-width of the link text
+   *
+   * @default 350px
+   */
+  maxWidth?: number;
+  tooltipProps?: OverflowTooltipProps | {};
+}
+
+type StyledLinkProps = Pick<BreadcrumbsLinkProps, 'maxWidth' | 'href'>;
+
+const {color, ...subtextLargeStyles} = type.levels.subtext.large;
+
+const StyledLink = styled(Hyperlink)(
+  {
+    ...subtextLargeStyles,
+  },
+  ({maxWidth}: StyledLinkProps) => ({
+    maxWidth,
+    ...ellipsisStyles,
+  })
+);
+
+export const BreadcrumbsLink = createComponent('a')({
+  displayName: 'Breadcrumbs.Link',
+  Component: ({
+    maxWidth = 350,
+    href,
+    tooltipProps = {},
+    children,
+    ...props
+  }: BreadcrumbsLinkProps) => {
+    return (
+      <OverflowTooltip {...tooltipProps}>
+        <StyledLink maxWidth={maxWidth} href={href} role="link" {...props}>
+          {children}
+        </StyledLink>
+      </OverflowTooltip>
+    );
+  },
+});

package/breadcrumbs/lib/BreadcrumbsList.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {space} from '@workday/canvas-kit-react/tokens';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+
+export interface BreadcrumbsListProps<T = any>
+  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
+   * List will determine how and when the item will be rendered.
+   *
+   * @example
+   * <Breadcrumbs.List>
+   *   {(item) => <Breadcrumbs.Item key={item.id} name={item.name}>{item.text}</Breadcrumbs.Item>}
+   * </Breadcrumbs.List>
+   */
+  children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
+}
+
+export const BreadcrumbsList = createSubcomponent('ul')({
+  displayName: 'Breadcrumbs.List',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useOverflowListMeasure,
+})<BreadcrumbsListProps>(({overflowButton, children, ...elemProps}, Element, model) => {
+  const items = useListRenderItems(model, children) as [];
+  const splitIndex = items.length - 2;
+
+  return (
+    <Flex
+      as={Element}
+      padding="zero"
+      margin="zero"
+      display="inline-flex"
+      alignItems="center"
+      minHeight={space.xl}
+      listStyle="none"
+      role="list"
+      width="100%"
+      {...elemProps}
+    >
+      {items.length ? items.slice(0, splitIndex) : items}
+      {overflowButton}
+      {items.length ? items.slice(splitIndex, items.length) : null}
+    </Flex>
+  );
+});

package/breadcrumbs/lib/BreadcrumbsMenu.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {createContainer, createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {Menu, useMenuModel} from '@workday/canvas-kit-react/menu';
+
+export const BreadcrumbsMenuItem = createComponent('a')({
+  displayName: 'Breadcrumbs.Menu.Item',
+  Component: (props: ExtractProps<typeof Menu.Item, never>, ref, Element) => {
+    return <Menu.Item as={Element} style={{textDecoration: 'none'}} {...props} ref={ref} />;
+  },
+});
+
+export const BreadcrumbsMenu = createContainer()({
+  displayName: 'Breadcrumbs.Menu',
+  modelHook: useMenuModel,
+  subComponents: {
+    Card: (elemProps: ExtractProps<typeof Menu.Card, never>) => (
+      <Menu.Card width={280} maxWidth={280} maxHeight={296} {...elemProps} />
+    ),
+    List: Menu.List,
+    Item: BreadcrumbsMenuItem,
+    Divider: Menu.Divider,
+    Target: Menu.Target,
+    TargetContext: Menu.TargetContext,
+    Popper: Menu.Popper,
+  },
+})<ExtractProps<typeof Menu>>(({children}) => {
+  return <>{children}</>;
+});

package/breadcrumbs/lib/BreadcrumbsOverflowButton.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import {chevronRightSmallIcon, relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {
+  composeHooks,
+  createElemPropsHook,
+  createSubcomponent,
+  subModelHook,
+  useIsRTL,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useBreadcrumbsModel} from './hooks/useBreadcrumbsModel';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
+
+export interface BreadcrumbsOverflowButtonProps extends TertiaryButtonProps {
+  'aria-label': string;
+  /**
+   * style prop applies styles to the whole Flex component,
+   * `useOverflowListTarget` automatically adds hidden styles if list doesn't have items to hide
+   * style prop passed through `overflowButtonProps` from `Breadcrumbs.List` will ignore
+   */
+  style?: FlexProps;
+}
+
+export const useBreadcrumbsOverflowButton = composeHooks(
+  createElemPropsHook(useBreadcrumbsModel)(() => ({
+    'aria-haspopup': true,
+    'aria-controls': 'menu',
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useBreadcrumbsModel>) => m.menu, useMenuTarget)
+);
+
+export const BreadcrumbsOverflowButton = createSubcomponent('button')({
+  displayName: 'Breadcrumbs.OverflowButton',
+  modelHook: useBreadcrumbsModel,
+  elemPropsHook: useBreadcrumbsOverflowButton,
+})<BreadcrumbsOverflowButtonProps>(({style, ...elemProps}, Element) => {
+  return (
+    <Flex alignItems="center" {...style}>
+      <TertiaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />
+      <SystemIcon
+        icon={chevronRightSmallIcon}
+        color={colors.licorice200}
+        colorHover={colors.licorice200}
+        size={20}
+        height={space.l}
+        width={space.l}
+        shouldMirror={useIsRTL()}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
+        aria-hidden
+      />
+    </Flex>
+  );
+});

package/breadcrumbs/lib/hooks/useBreadcrumbsModel.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+import {reorganizeHiddenItems} from './utils';
+
+export const useBreadcrumbsModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `Breadcrumbs` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default Breadcrumbs component only handles rendering of the link group in a horizontal
+     * orientation, but the subcomponents could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const items = config.items;
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      shouldVirtualize: false,
+    })
+  );
+
+  let hiddenIds = model.state.hiddenIds;
+  let nonInteractiveIds = model.state.nonInteractiveIds;
+  hiddenIds = reorganizeHiddenItems(items, hiddenIds, getId);
+  nonInteractiveIds = hiddenIds;
+
+  const state = {
+    ...model.state,
+    hiddenIds,
+    nonInteractiveIds,
+    orientation: config.orientation || 'horizontal',
+  };
+
+  const overflowItems = React.useMemo(
+    () => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]
+  );
+
+  const events = {
+    ...model.events,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `breadcrumbs-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/breadcrumbs/lib/hooks/utils/index.ts

@@ -0,0 +1,22 @@
+export const reorganizeHiddenItems = (
+  items: {id: string}[],
+  hiddenIds: string[],
+  getId: (item: {id: string}) => string
+): string[] => {
+  let updatedHiddenIds = hiddenIds;
+  const totalSize = items.length;
+  const itemSpace = totalSize - hiddenIds.length;
+
+  if (itemSpace <= 2) {
+    // Keep only last items if there is place for two or less items
+    updatedHiddenIds = items.slice(0, totalSize - 1).map(getId);
+  } else if (itemSpace === 3) {
+    // Always keep first and last item if there is place for 3 items
+    updatedHiddenIds = items.slice(1, totalSize - 1).map(getId);
+  } else if (itemSpace > 3 && itemSpace < totalSize) {
+    // Always keep first and 2 last items if there is place for 4 items
+    updatedHiddenIds = items.slice(1, totalSize - 2).map(getId);
+  }
+
+  return updatedHiddenIds;
+};

package/breadcrumbs/package.json

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

package/button/index.ts

@@ -9,6 +9,12 @@ export {
 export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton';
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
-export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
+export {
+  BaseButton,
+  ButtonContainerProps,
+  BaseButtonProps,
+  getMinWidthStyles,
+  getPaddingStyles,
+} from './lib/BaseButton';
 export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';