@fluentui/react-button 1.0.0-beta.8 → 9.0.0-alpha.100

package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js

@@ -1,132 +0,0 @@
-"use strict";
-var _a, _b, _c;
-Object.defineProperty(exports, "__esModule", { value: true });
-var style_utilities_1 = require("@fluentui/style-utilities");
-var react_theme_provider_1 = require("@fluentui/react-theme-provider");
-exports.useToggleButtonClasses = react_theme_provider_1.makeVariantClasses({
-    name: 'ToggleButton',
-    prefix: '--button',
-    styles: {
-        // When checked is applied, apply the right tokens to the right css properties.
-        _checked: (_a = {
-                background: 'var(--button-checked-background)',
-                color: 'var(--button-checked-contentColor)',
-                '.ms-Button-icon': {
-                    color: 'var(--button-checked-iconColor)',
-                }
-            },
-            _a[style_utilities_1.EdgeChromiumHighContrastSelector] = {
-                background: 'var(--button-highContrast-checked-background)',
-                color: 'var(--button-highContrast-checked-contentColor)',
-                '.ms-Button-icon': {
-                    color: 'var(--button-highContrast-checked-iconColor)',
-                },
-            },
-            _a[':hover'] = (_b = {
-                    background: 'var(--button-checkedHovered-background)',
-                    color: 'var(--button-checkedHovered-contentColor)',
-                    '.ms-Button-icon': {
-                        color: 'var(--button-checkedHovered-iconColor)',
-                    }
-                },
-                _b[style_utilities_1.EdgeChromiumHighContrastSelector] = {
-                    background: 'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',
-                    color: 'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',
-                    '.ms-Button-icon': {
-                        color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',
-                    },
-                },
-                _b),
-            _a[':active'] = (_c = {
-                    background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',
-                    color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',
-                    '.ms-Button-icon': {
-                        color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',
-                    }
-                },
-                _c[style_utilities_1.EdgeChromiumHighContrastSelector] = {
-                    background: 'var(--button-highContrast-checkedPressed-background, ' +
-                        'var(--button-highContrast-checkedHovered-background, ' +
-                        'var(--button-highContrast-checked-background)))',
-                    color: 'var(--button-highContrast-checked--pressed-contentColor, ' +
-                        'var(--button-highContrast-checked--hovered-contentColor, ' +
-                        'var(--button-highContrast-checked-contentColor)))',
-                    '.ms-Button-icon': {
-                        color: 'var(--button-highContrast-checkedPressed-iconColor, ' +
-                            'var(--button-highContrast-checkedHovered-iconColor, ' +
-                            '--button-highContrast-checked-iconColor)))',
-                    },
-                },
-                _c),
-            _a),
-    },
-    variants: function (theme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        var palette = theme.palette, semanticColors = theme.semanticColors;
-        return {
-            root: {
-                checked: {
-                    background: (_a = semanticColors) === null || _a === void 0 ? void 0 : _a.buttonBackgroundPressed,
-                    contentColor: (_b = semanticColors) === null || _b === void 0 ? void 0 : _b.buttonTextChecked,
-                },
-                checkedHovered: {
-                    background: (_c = semanticColors) === null || _c === void 0 ? void 0 : _c.buttonBackgroundPressed,
-                    contentColor: (_d = semanticColors) === null || _d === void 0 ? void 0 : _d.buttonTextCheckedHovered,
-                },
-                highContrast: {
-                    checked: {
-                        background: 'Window',
-                        contentColor: 'Highlight',
-                        iconColor: 'Highlight',
-                    },
-                },
-            },
-            primary: {
-                checked: {
-                    background: 'var(--color-brand-checked-background)',
-                    contentColor: 'var(--color-brand-checked-contentColor)',
-                },
-                checkedHovered: {
-                    background: 'var(--color-brand-checkedHovered-background)',
-                    contentColor: 'var(--color-brand-checkedHovered-contentColor)',
-                },
-                checkedPressed: {
-                    background: 'var(--color-brand-checkedPressed-background)',
-                    contentColor: 'var(--color-brand-checkedPressed-contentColor)',
-                },
-                highContrast: {
-                    checked: {
-                        background: 'Highlight',
-                        contentColor: 'Window',
-                        iconColor: 'Window',
-                    },
-                },
-            },
-            ghost: {
-                checked: {
-                    background: (_e = palette) === null || _e === void 0 ? void 0 : _e.neutralLight,
-                    contentColor: (_f = palette) === null || _f === void 0 ? void 0 : _f.neutralDark,
-                    iconColor: (_g = palette) === null || _g === void 0 ? void 0 : _g.themeDark,
-                },
-                checkedHovered: {
-                    background: (_h = palette) === null || _h === void 0 ? void 0 : _h.neutralQuaternaryAlt,
-                    contentColor: (_j = palette) === null || _j === void 0 ? void 0 : _j.neutralDark,
-                    iconColor: (_k = palette) === null || _k === void 0 ? void 0 : _k.themeDark,
-                },
-            },
-            transparent: {
-                checked: {
-                    background: 'transparent',
-                    contentColor: (_l = palette) === null || _l === void 0 ? void 0 : _l.themePrimary,
-                    iconColor: (_m = palette) === null || _m === void 0 ? void 0 : _m.themePrimary,
-                },
-                checkedHovered: {
-                    background: 'transparent',
-                    contentColor: (_o = palette) === null || _o === void 0 ? void 0 : _o.black,
-                    iconColor: (_p = palette) === null || _p === void 0 ? void 0 : _p.themeDarker,
-                },
-            },
-        };
-    },
-});
-//# sourceMappingURL=useToggleButtonClasses.js.map

package/lib-commonjs/components/ToggleButton/useToggleButtonClasses.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToggleButtonClasses.js","sourceRoot":"../src/","sources":["components/ToggleButton/useToggleButtonClasses.tsx"],"names":[],"mappings":"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","sourcesContent":["import { EdgeChromiumHighContrastSelector } from '@fluentui/style-utilities';\nimport { makeVariantClasses, Theme } from '@fluentui/react-theme-provider';\nimport { ToggleButtonState, ToggleButtonVariants } from './ToggleButton.types';\n\nexport const useToggleButtonClasses = makeVariantClasses<ToggleButtonState, ToggleButtonVariants>({\n  name: 'ToggleButton',\n  prefix: '--button',\n\n  styles: {\n    // When checked is applied, apply the right tokens to the right css properties.\n    _checked: {\n      background: 'var(--button-checked-background)',\n      color: 'var(--button-checked-contentColor)',\n      '.ms-Button-icon': {\n        color: 'var(--button-checked-iconColor)',\n      },\n\n      [EdgeChromiumHighContrastSelector]: {\n        background: 'var(--button-highContrast-checked-background)',\n        color: 'var(--button-highContrast-checked-contentColor)',\n        '.ms-Button-icon': {\n          color: 'var(--button-highContrast-checked-iconColor)',\n        },\n      },\n\n      ':hover': {\n        background: 'var(--button-checkedHovered-background)',\n        color: 'var(--button-checkedHovered-contentColor)',\n        '.ms-Button-icon': {\n          color: 'var(--button-checkedHovered-iconColor)',\n        },\n\n        [EdgeChromiumHighContrastSelector]: {\n          background:\n            'var(--button-highContrast-checkedHovered-background, var(--button-highContrast-checked-background))',\n          color:\n            'var(--button-highContrast-checkedHovered-contentColor, var(--button-highContrast-checked-contentColor))',\n          '.ms-Button-icon': {\n            color: 'var(--button-highContrast-checkedHovered-iconColor, var(--button-highContrast-checked-iconColor))',\n          },\n        },\n      },\n\n      ':active': {\n        background: 'var(--button-checkedPressed-background, var(--button-checkedHovered-background))',\n        color: 'var(--button-checkedPressed-contentColor, var(--button-checkedHovered-contentColor))',\n        '.ms-Button-icon': {\n          color: 'var(--button-checkedPressed-iconColor, var(--button-checkedHovered-iconColor))',\n        },\n\n        [EdgeChromiumHighContrastSelector]: {\n          background:\n            'var(--button-highContrast-checkedPressed-background, ' +\n            'var(--button-highContrast-checkedHovered-background, ' +\n            'var(--button-highContrast-checked-background)))',\n          color:\n            'var(--button-highContrast-checked--pressed-contentColor, ' +\n            'var(--button-highContrast-checked--hovered-contentColor, ' +\n            'var(--button-highContrast-checked-contentColor)))',\n          '.ms-Button-icon': {\n            color:\n              'var(--button-highContrast-checkedPressed-iconColor, ' +\n              'var(--button-highContrast-checkedHovered-iconColor, ' +\n              '--button-highContrast-checked-iconColor)))',\n          },\n        },\n      },\n    },\n  },\n\n  variants: (theme: Theme): ToggleButtonVariants => {\n    const { palette, semanticColors } = theme;\n\n    return {\n      root: {\n        checked: {\n          background: semanticColors?.buttonBackgroundPressed,\n          contentColor: semanticColors?.buttonTextChecked,\n        },\n\n        checkedHovered: {\n          background: semanticColors?.buttonBackgroundPressed,\n          contentColor: semanticColors?.buttonTextCheckedHovered,\n        },\n\n        highContrast: {\n          checked: {\n            background: 'Window',\n            contentColor: 'Highlight',\n            iconColor: 'Highlight',\n          },\n        },\n      },\n\n      primary: {\n        checked: {\n          background: 'var(--color-brand-checked-background)',\n          contentColor: 'var(--color-brand-checked-contentColor)',\n        },\n\n        checkedHovered: {\n          background: 'var(--color-brand-checkedHovered-background)',\n          contentColor: 'var(--color-brand-checkedHovered-contentColor)',\n        },\n\n        checkedPressed: {\n          background: 'var(--color-brand-checkedPressed-background)',\n          contentColor: 'var(--color-brand-checkedPressed-contentColor)',\n        },\n\n        highContrast: {\n          checked: {\n            background: 'Highlight',\n            contentColor: 'Window',\n            iconColor: 'Window',\n          },\n        },\n      },\n\n      ghost: {\n        checked: {\n          background: palette?.neutralLight,\n          contentColor: palette?.neutralDark,\n          iconColor: palette?.themeDark,\n        },\n\n        checkedHovered: {\n          background: palette?.neutralQuaternaryAlt,\n          contentColor: palette?.neutralDark,\n          iconColor: palette?.themeDark,\n        },\n      },\n\n      transparent: {\n        checked: {\n          background: 'transparent',\n          contentColor: palette?.themePrimary,\n          iconColor: palette?.themePrimary,\n        },\n\n        checkedHovered: {\n          background: 'transparent',\n          contentColor: palette?.black,\n          iconColor: palette?.themeDarker,\n        },\n      },\n    };\n  },\n});\n"]}

package/lib-commonjs/utils/tempTypes.d.ts

@@ -1,33 +0,0 @@
-/**
- * NOTE! THIS FILE IS TEMPORARY AND SHOULD BE DELETED ONCE IT HAS MOVED TO `@fluentui/react-compose`.
- */
-import * as React from 'react';
-export declare type ComponentClasses<TClasses, TState> = Partial<TClasses> | ((state: TState) => Partial<TClasses>);
-export interface ComponentProps {
-    as?: React.ElementType;
-    className?: string;
-}
-export declare type ShorthandValue<TProps> = string | boolean | number | null | undefined | TProps | JSX.Element;
-export declare type ComposeRender<TProps, TOptions> = (props: TProps, ref?: React.RefObject<HTMLElement>, options?: TOptions) => JSX.Element;
-export declare type ClassDictionary = any;
-export declare type GenericDictionary = Record<string, any>;
-export interface ComposeOptions<TProps, TSlots, TSlotProps, TStatics> {
-    render: ComposeRender<TProps, ComposeOptions<TProps, TSlots, TSlotProps, TStatics>>;
-    defaultProps: TProps;
-    classes: ClassDictionary;
-    stylesheet: string;
-    slots: {
-        [key in keyof TSlots]?: TSlots[key] | null;
-    };
-    slotProps: TSlotProps;
-    statics: TStatics;
-}
-export declare type ComposedComponent<TProps = {}, TOptions = ComposeOptions<any, any, any, any>> = React.ForwardRefExoticComponent<TProps> & {
-    options: TOptions;
-    parent: ComposedComponent;
-} & ComposeStandardStatics;
-export interface ComposeStandardStatics {
-    displayName?: string;
-    mappedProp?: string;
-    stylesheets?: string[];
-}

package/lib-commonjs/utils/tempTypes.js

@@ -1,6 +0,0 @@
-"use strict";
-/**
- * NOTE! THIS FILE IS TEMPORARY AND SHOULD BE DELETED ONCE IT HAS MOVED TO `@fluentui/react-compose`.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=tempTypes.js.map

package/lib-commonjs/utils/tempTypes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tempTypes.js","sourceRoot":"../src/","sources":["utils/tempTypes.ts"],"names":[],"mappings":";AAAA;;GAEG","sourcesContent":["/**\n * NOTE! THIS FILE IS TEMPORARY AND SHOULD BE DELETED ONCE IT HAS MOVED TO `@fluentui/react-compose`.\n */\n\nimport * as React from 'react';\n\nexport type ComponentClasses<TClasses, TState> = Partial<TClasses> | ((state: TState) => Partial<TClasses>);\n\nexport interface ComponentProps {\n  // Removing these props:\n  // design - use style or className instead\n\n  as?: React.ElementType;\n\n  className?: string;\n}\n\nexport type ShorthandValue<TProps> = string | boolean | number | null | undefined | TProps | JSX.Element;\n\nexport type ComposeRender<TProps, TOptions> = (\n  props: TProps,\n  ref?: React.RefObject<HTMLElement>,\n  options?: TOptions,\n) => JSX.Element;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ClassDictionary = any;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type GenericDictionary = Record<string, any>;\n\nexport interface ComposeOptions<TProps, TSlots, TSlotProps, TStatics> {\n  render: ComposeRender<TProps, ComposeOptions<TProps, TSlots, TSlotProps, TStatics>>;\n  defaultProps: TProps;\n  classes: ClassDictionary;\n  stylesheet: string;\n  slots: { [key in keyof TSlots]?: TSlots[key] | null };\n  slotProps: TSlotProps;\n  statics: TStatics;\n}\n\nexport type ComposedComponent<\n  TProps = {},\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOptions = ComposeOptions<any, any, any, any>\n> = React.ForwardRefExoticComponent<TProps> & {\n  options: TOptions;\n  parent: ComposedComponent;\n} & ComposeStandardStatics;\n\nexport interface ComposeStandardStatics {\n  displayName?: string;\n  mappedProp?: string;\n  stylesheets?: string[];\n}\n"]}

package/lib-commonjs/version.d.ts

@@ -1 +0,0 @@
-export {};

package/lib-commonjs/version.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// Do not modify this file; it is generated as part of publish.
-// The checked in version is a placeholder only and will not be updated.
-var set_version_1 = require("@fluentui/set-version");
-set_version_1.setVersion('@fluentui/react-button', '1.0.0-beta.8');
-//# sourceMappingURL=version.js.map

package/lib-commonjs/version.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"version.js","sourceRoot":"../src/","sources":["version.ts"],"names":[],"mappings":";;AAAA,+DAA+D;AAC/D,wEAAwE;AACxE,qDAAmD;AACnD,wBAAU,CAAC,wBAAwB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/react-button', '1.0.0-beta.8');"]}

package/src/components/Button/Button.types.ts

@@ -1,166 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ColorTokens, RecursivePartial, SizeValue, FontTokens } from '@fluentui/theme';
-
-/**
- * {@docCategory Button}
- */
-export type ButtonProps = ComponentProps &
-  React.HTMLAttributes<HTMLElement> & {
-    /**
-     * Shorthand icon. A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
-     */
-    icon?: ShorthandProps;
-
-    /**
-     * Shorthand loader content within the button.
-     */
-    loader?: ShorthandProps;
-
-    /**
-     * Shorthand children content within the button.
-     */
-    content?: ShorthandProps;
-
-    /**
-     * Defines the href to navigate to. If applied, will render the button as an anchor
-     * element by default, unless `as` specifies otherwise. Note that specifying an href
-     * and a non-anchor as the render type will prevent the Button from behaving like a
-     * hyperlink and opening the href on click.
-     */
-    href?: string;
-
-    /**
-     * Defines the target window to open the href in. Only is applied if the button renders
-     * as an anchor tag, which is the default behavior if href is provided.
-     */
-    target?: string;
-
-    /** A button can appear circular. */
-    circular?: boolean;
-
-    /** A button can show that it cannot be interacted with. */
-    disabled?: boolean;
-
-    /** A button can fill the width of its container. */
-    block?: boolean;
-
-    /** A button can contain only an icon. */
-    iconOnly?: boolean;
-
-    /** An icon button can format its icon to appear before or after its content. */
-    iconPosition?: 'before' | 'after';
-
-    /** A button that inherits its background and has a subtle appearance. */
-    inverted?: boolean;
-
-    /** Opt in to a named variant which can be supplied by a theme. */
-    variant?: string;
-
-    /** A button can show a loading indicator. */
-    loading?: boolean;
-
-    /**
-     * Called after a user clicks the button.
-     * @param event - React's original SyntheticEvent.
-     * @param data - All props.
-     */
-    // onClick?: ComponentEventHandler<ButtonProps>;
-
-    /**
-     * Called after a user focuses the button.
-     * @param event - React's original SyntheticEvent.
-     * @param data - All props.
-     */
-    // onFocus?: ComponentEventHandler<ButtonProps>;
-
-    /** A button can emphasize that it represents the primary action. */
-    primary?: boolean;
-
-    /** A button can emphasize that it represents an alternative action. */
-    secondary?: boolean;
-
-    /** A button can blend into its background to become less emphasized. */
-    ghost?: boolean;
-
-    /** A button can have no background styling and just be emphasized through its content styling. */
-    transparent?: boolean;
-
-    /** A button can be sized. */
-    size?: SizeValue;
-
-    // TODO: Deprecate or rename to textOnly for alignment with iconOnly?
-    /** A button can be formatted to show only text in order to indicate a less-pronounced action. */
-    // text?: boolean;
-
-    tokens?: RecursivePartial<ButtonTokens>;
-  };
-
-/**
- * {@docCategory Button}
- */
-export interface ButtonState extends ButtonProps {
-  buttonRef?: React.RefObject<HTMLButtonElement>;
-}
-
-/**
- * {@docCategory Button}
- */
-export type ButtonTokens = ColorTokens &
-  FontTokens & {
-    /* sizing */
-    paddingLeft?: string;
-    paddingRight?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    margin?: string;
-    height?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    minHeight?: string;
-    contentGap?: string;
-    iconSize?: string;
-    borderRadius?: string;
-    borderTopLeftRadius?: string;
-    borderTopRightRadius?: string;
-    borderBottomLeftRadius?: string;
-    borderBottomRightRadius?: string;
-    borderWidth?: string;
-    boxShadow?: string;
-    width?: string;
-
-    forcedColorAdjust?: string;
-
-    transform?: string;
-    transition?: string;
-
-    size?: {
-      smallest?: string;
-      smaller?: string;
-      small?: string;
-      regular?: string;
-      large?: string;
-      larger?: string;
-      largest?: string;
-    };
-
-    pressed?: {
-      transform?: string;
-      transition?: string;
-    };
-  };
-
-/**
- * {@docCategory Button}
- */
-export type ButtonVariants<TTokens = ButtonTokens> = {
-  root?: TTokens;
-  block?: TTokens;
-  circular?: TTokens;
-  iconOnly?: TTokens;
-  ghost?: TTokens;
-  primary?: TTokens;
-  transparent?: TTokens;
-};

package/src/components/CompoundButton/CompoundButton.types.ts

@@ -1,37 +0,0 @@
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonProps extends ButtonProps {
-  /**
-   * Second line of text that describes the action this button takes.
-   */
-  secondaryContent?: ShorthandProps;
-
-  /**
-   * Container that wraps the children and secondaryContent slots.
-   */
-  contentContainer?: ShorthandProps;
-}
-
-/**
- * {@docCategory Button}
- */
-export interface CompoundButtonState extends CompoundButtonProps {}
-
-/**
- * {@docCategory Button}
- */
-export type CompoundButtonTokens = ButtonTokens & {
-  secondaryContentColor?: string;
-  secondaryContentFontSize?: string;
-  secondaryContentFontWeight?: string;
-  secondaryContentGap?: string;
-};
-
-/**
- * {@docCategory Button}
- */
-export type CompoundButtonVariants = ButtonVariants<CompoundButtonTokens>;

package/src/components/MenuButton/MenuButton.types.ts

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonState, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-
-/**
- * {@docCategory Button}
- */
-export type MinimalMenuProps = {
-  hidden?: boolean;
-  onDismiss?: () => void;
-  target?: React.Ref<HTMLElement | undefined>;
-};
-
-/**
- * {@docCategory Button}
- */
-export type MenuButtonProps = Omit<ButtonProps, 'iconPosition' | 'loader'> & {
-  /**
-   * Menu that is displayed when the button is pressed.
-   */
-  menu?: ShorthandProps;
-
-  /**
-   * Menu icon that indicates that this button has a menu that can be expanded.
-   */
-  menuIcon?: ShorthandProps;
-
-  /**
-   * Defines the inital expanded state of the MenuButton. Use this if you want the MenuButton to maintain its own state.
-   * Mutually exclusive with `expanded`.
-   * @defaultvalue false
-   */
-  defaultExpanded?: boolean;
-
-  /**
-   * Defines whether the MenuButton is in an expanded state. Use this if you wish to have the expanded state of the
-   * MenuButton be controlled. Mutually exclusive with `defaultExpanded`.
-   * @defaultvalue defaultExpanded
-   */
-  expanded?: boolean;
-
-  /**
-   * Defines a callback that runs after the MenuButton's contextual menu has been dismissed.
-   */
-  onMenuDismiss?: () => void;
-};
-
-export interface MenuButtonState extends Omit<MenuButtonProps, 'menu'>, Omit<ButtonState, 'iconPosition' | 'loader'> {
-  menu?: React.PropsWithChildren<MinimalMenuProps>;
-}
-
-/**
- * {@docCategory Button}
- */
-export type MenuButtonTokens = ButtonTokens & {
-  menuIconColor?: string;
-  menuIconSize?: string;
-};
-
-/**
- * {@docCategory Button}
- */
-export type MenuButtonVariants = ButtonVariants<MenuButtonTokens>;

package/src/components/SplitButton/SplitButton.types.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-compose/lib/next/index';
-import { ButtonProps, ButtonVariants } from '../Button/Button.types';
-import { MenuButtonProps, MenuButtonState, MenuButtonTokens } from '../MenuButton/MenuButton.types';
-
-/**
- * {@docCategory Button}
- */
-export interface SplitButtonProps extends ButtonProps, MenuButtonProps {
-  /**
-   * Button to perform primary action in SplitButton.
-   */
-  button?: ShorthandProps;
-
-  /**
-   * Divider that separates the primary action button and the menu button parts of the SplitButton
-   */
-  divider?: ShorthandProps;
-
-  /**
-   * Button that opens menu with secondary actions in SplitButton.
-   */
-  menuButton?: ShorthandProps;
-}
-
-export interface SplitButtonState extends Omit<SplitButtonProps, 'menu'>, MenuButtonState {
-  menuButtonRef?: React.RefObject<HTMLButtonElement>;
-}
-
-/**
- * {@docCategory Button}
- */
-export type SplitButtonTokens = MenuButtonTokens & {
-  dividerColor?: string;
-  dividerThickness?: string;
-};
-
-/**
- * {@docCategory Button}
- */
-export type SplitButtonVariants = ButtonVariants<SplitButtonTokens>;

package/src/components/ToggleButton/ToggleButton.types.ts

@@ -1,29 +0,0 @@
-import { ButtonProps, ButtonTokens, ButtonVariants } from '../Button/Button.types';
-
-/**
- * {@docCategory Button}
- */
-export interface ToggleButtonProps extends ButtonProps {
-  /**
-   * Defines the controlled checked state of the `ToggleButton`.
-   * Mutually exclusive to `defaultChecked`.
-   * This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the
-   * correct value based on handling `onClick` events and re-rendering.
-   */
-  checked?: boolean;
-
-  /**
-   * Defines whether the `ToggleButton` is inititally in a checked state or not when rendered.
-   * Mutually exclusive to `checked`.
-   */
-  defaultChecked?: boolean;
-}
-
-/**
- * {@docCategory Button}
- */
-export interface ToggleButtonState extends ToggleButtonProps {}
-
-export type ToggleButtonTokens = ButtonTokens;
-
-export type ToggleButtonVariants = ButtonVariants<ToggleButtonTokens>;