diff --git a/apps/vr-tests-react-components/src/stories/Button.stories.tsx b/apps/vr-tests-react-components/src/stories/Button.stories.tsx index 87a60be745751e..68be66eb1cd8b0 100644 --- a/apps/vr-tests-react-components/src/stories/Button.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Button.stories.tsx @@ -152,58 +152,6 @@ storiesOf('Button Converged', module) includeRtl: true, }); -storiesOf('Button Block Converged', module) - .addDecorator(story => {story()}) - .addStory( - 'Default', - () => ( - - ), - { includeRtl: true }, - ) - .addStory('Circular', () => ( - - )) - .addStory('Outline', () => ( - - )) - .addStory('Primary', () => ( - - )) - .addStory('Subtle', () => ( - - )) - .addStory('Transparent', () => ( - - )) - .addStory('Disabled', () => ( - - )) - .addStory('Size small', () => ( - - )) - .addStory('Size large', () => ( - - )); - storiesOf('CompoundButton Converged', module) .addDecorator(story => ( {story()}) - .addStory( - 'Default', - () => ( - - Hello, world - - ), - { includeRtl: true }, - ) - .addStory('Circular', () => ( - - Hello, world - - )) - .addStory('Outline', () => ( - - Hello, world - - )) - .addStory('Primary', () => ( - - Hello, world - - )) - .addStory('Subtle', () => ( - - Hello, world - - )) - .addStory('Transparent', () => ( - - Hello, world - - )) - .addStory('Disabled', () => ( - - Hello, world - - )) - .addStory('Size small', () => ( - - Hello, world - - )) - .addStory('Size large', () => ( - - Hello, world - - )); - storiesOf('ToggleButton Converged', module) .addDecorator(story => {story()}) .addStory('Default', () => Hello, world, { @@ -469,78 +365,6 @@ storiesOf('ToggleButton Converged', module) )); -storiesOf('ToggleButton Block Converged', module) - .addDecorator(story => {story()}) - .addStory( - 'Default', - () => ( - - Hello, world - - ), - { includeRtl: true }, - ) - .addStory('Circular', () => ( - - Hello, world - - )) - .addStory('Outline', () => ( - - Hello, world - - )) - .addStory('Primary', () => ( - - Hello, world - - )) - .addStory('Subtle', () => ( - - Hello, world - - )) - .addStory('Transparent', () => ( - - Hello, world - - )) - .addStory('Disabled', () => ( - - Hello, world - - )) - .addStory('Size small', () => ( - - Hello, world - - )) - .addStory('Size large', () => ( - - Hello, world - - )) - .addStory('Checked', () => ( - - Hello, world - - )) - .addStory('Primary Checked', () => ( - - Hello, world - - )) - .addStory('Subtle Checked', () => ( - - Hello, world - - )) - .addStory('Transparent Checked', () => ( - - Hello, world - - )); - storiesOf('MenuButton Converged', module) .addDecorator(story => {story()}) .addStory('Default', () => Hello, world, { includeRtl: true }) @@ -611,55 +435,3 @@ storiesOf('MenuButton Converged', module) )) .addStory('Icon only', () => ) .addStory('Circular and icon only', () => ); - -storiesOf('MenuButton Block Converged', module) - .addDecorator(story => {story()}) - .addStory( - 'Default', - () => ( - - Hello, world - - ), - { includeRtl: true }, - ) - .addStory('Circular', () => ( - - Hello, world - - )) - .addStory('Outline', () => ( - - Hello, world - - )) - .addStory('Primary', () => ( - - Hello, world - - )) - .addStory('Subtle', () => ( - - Hello, world - - )) - .addStory('Transparent', () => ( - - Hello, world - - )) - .addStory('Disabled', () => ( - - Hello, world - - )) - .addStory('Size small', () => ( - - Hello, world - - )) - .addStory('Size large', () => ( - - Hello, world - - )); diff --git a/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json b/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json new file mode 100644 index 00000000000000..6557ae8cb6ac24 --- /dev/null +++ b/change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Removing deprecated block prop from all button components.", + "packageName": "@fluentui/react-button", + "email": "Humberto.Morimoto@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md index 58f6cabb2edb25..c098a7c86e472e 100644 --- a/packages/react-components/react-button/etc/react-button.api.md +++ b/packages/react-components/react-button/etc/react-button.api.md @@ -24,7 +24,6 @@ export const buttonClassNames: SlotClassNames; // @public (undocumented) export type ButtonProps = ComponentProps & { appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'; - block?: boolean; disabledFocusable?: boolean; disabled?: boolean; iconPosition?: 'before' | 'after'; @@ -39,7 +38,7 @@ export type ButtonSlots = { }; // @public (undocumented) -export type ButtonState = ComponentState & Required> & { +export type ButtonState = ComponentState & Required> & { iconOnly: boolean; }; @@ -53,7 +52,7 @@ export const compoundButtonClassName: string; export const compoundButtonClassNames: SlotClassNames; // @public (undocumented) -export type CompoundButtonProps = ComponentProps> & Pick; +export type CompoundButtonProps = ComponentProps> & Pick; // @public (undocumented) export type CompoundButtonSlots = ButtonSlots & { @@ -74,7 +73,7 @@ export const menuButtonClassName: string; export const menuButtonClassNames: SlotClassNames; // @public (undocumented) -export type MenuButtonProps = ComponentProps & Pick; +export type MenuButtonProps = ComponentProps & Pick; // @public (undocumented) export type MenuButtonSlots = ButtonSlots & { diff --git a/packages/react-components/react-button/src/components/Button/Button.types.ts b/packages/react-components/react-button/src/components/Button/Button.types.ts index 91dbfb92c8ee22..5b078d8c14c9c1 100644 --- a/packages/react-components/react-button/src/components/Button/Button.types.ts +++ b/packages/react-components/react-button/src/components/Button/Button.types.ts @@ -26,14 +26,6 @@ export type ButtonProps = ComponentProps & { */ appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent'; - /** - * A button can fill the width of its container. - * @default false - * - * @deprecated - Use style overrides instead. - */ - block?: boolean; - /** * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this @@ -73,9 +65,7 @@ export type ButtonProps = ComponentProps & { }; export type ButtonState = ComponentState & - Required< - Pick - > & { + Required> & { /** * A button can contain only an icon. * diff --git a/packages/react-components/react-button/src/components/Button/MIGRATION.md b/packages/react-components/react-button/src/components/Button/MIGRATION.md index 54e7b2d7396c9e..68562e9ddedf06 100644 --- a/packages/react-components/react-button/src/components/Button/MIGRATION.md +++ b/packages/react-components/react-button/src/components/Button/MIGRATION.md @@ -100,7 +100,6 @@ Common buttons now all map to `Button`: ### Renamed props -- `fluid` => `block` - `text` => `transparent` ### Props removed because we can get them from HTML props @@ -142,7 +141,7 @@ Common buttons now all map to `Button`: | `description` | | | | `disabled` | `disabled` | `disabled` | | `elementRef` | | `ref` | -| | `fluid` | `block` | +| | `fluid` | | | `getClassNames` | | | | `getSplitButtonClassNames` | | | | `href` | | `href` | diff --git a/packages/react-components/react-button/src/components/Button/SPEC.md b/packages/react-components/react-button/src/components/Button/SPEC.md index fe9f8537464328..e37420d74651b4 100644 --- a/packages/react-components/react-button/src/components/Button/SPEC.md +++ b/packages/react-components/react-button/src/components/Button/SPEC.md @@ -60,10 +60,6 @@ The `Button` component can include an `icon` that appears before or after its `c The `Button` component supports different sizing with at least three different sizes: `small`, `medium` (default) and `large`. -### Block - -The `Button` component can completely fill the width of its container. - ### Loading The `Button` component can be loading if it's waiting for another action to occur before allowing itself to be interacted with. @@ -78,76 +74,7 @@ The `Button` component can be loading if it's waiting for another action to occu ### Props -```ts -export type ButtonProps = ComponentPropsCompat & - React.ButtonHTMLAttributes & { - /** - * A button can have its content and borders styled for greater emphasis or to be subtle. - * - 'primary': Emphasizes the button as a primary action. - * - 'outline': Removes background styling. - * - 'subtle': Minimzes emphasis to blend into the background until hovered or focused. - * - 'transparent': Removes background and border styling. - */ - appearance?: 'primary' | 'outline' | 'subtle' | 'transparent'; - - /** - * Icon slot that, if specified, renders an icon either before or after the `children` as specified by the - * `iconPosition` prop. - */ - icon?: ShorthandPropsCompat>; - - // /** - // * Loader slot that, if specified, renders a `loader` before the `icon` and `children` while the `loading` flag - // * is set to `true`. - // */ - // loader?: ShorthandPropsCompat>; - - /** - * A button can fill the width of its container. - * @default false - */ - block?: boolean; - - /** - * A button can show that it cannot be interacted with. - * @default false - */ - disabled?: boolean; - - /** - * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it - * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this - * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons. - * @default false - */ - disabledFocusable?: boolean; - - /** - * A button can format its icon to appear before or after its content. - * @default 'before' - */ - iconPosition?: 'before' | 'after'; - - // /** - // * A button can show a loading indicator if it is waiting for another action to happen before allowing itself to - // * be interacted with. - // * @default false - // */ - // loading?: boolean; - - /** - * A button can be rounded, circular, or square. - * @default 'rounded' - */ - shape?: 'rounded' | 'circular' | 'square'; - - /** - * A button supports different sizes. - * @default 'medium' - */ - size?: 'small' | 'medium' | 'large'; - }; -``` +See API interface in [Button.types.ts](./Button.types.ts). ### Styling Tokens diff --git a/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx deleted file mode 100644 index 1b70f32a0a663e..00000000000000 --- a/packages/react-components/react-button/src/components/Button/stories/ButtonBlock.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { Button } from '../../../Button'; - -export const Block = () => ( - <> - - -); -Block.parameters = { - docs: { - description: { - story: 'A button can fill the width of its container.', - }, - }, -}; diff --git a/packages/react-components/react-button/src/components/Button/useButton.ts b/packages/react-components/react-button/src/components/Button/useButton.ts index d7fb6b4952f555..bd9d09f0eca00b 100644 --- a/packages/react-components/react-button/src/components/Button/useButton.ts +++ b/packages/react-components/react-button/src/components/Button/useButton.ts @@ -16,8 +16,6 @@ export const useButton_unstable = ( const { appearance = 'secondary', as, - // eslint-disable-next-line deprecation/deprecation - block = false, disabled = false, disabledFocusable = false, icon, @@ -30,7 +28,6 @@ export const useButton_unstable = ( return { // Props passed at the top-level appearance, - block, disabled, disabledFocusable, iconPosition, diff --git a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts index 3ffe1423774a0d..1be590bcb99192 100644 --- a/packages/react-components/react-button/src/components/Button/useButtonStyles.ts +++ b/packages/react-components/react-button/src/components/Button/useButtonStyles.ts @@ -87,12 +87,6 @@ const useRootStyles = makeStyles({ }, }, - // Block styles - block: { - maxWidth: '100%', - width: '100%', - }, - // Appearance variations outline: { backgroundColor: tokens.colorTransparentBackground, @@ -433,16 +427,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => { const rootIconOnlyStyles = useRootIconOnlyStyles(); const iconStyles = useIconStyles(); - const { - appearance, - // eslint-disable-next-line deprecation/deprecation - block, - disabled, - disabledFocusable, - iconOnly, - shape, - size, - } = state; + const { appearance, disabled, disabledFocusable, iconOnly, shape, size } = state; state.root.className = mergeClasses( buttonClassNames.root, @@ -450,7 +435,6 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => { // Root styles rootStyles.base, rootStyles.highContrast, - block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], diff --git a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts index 482f399ce7d700..59f4e6a54cd5b3 100644 --- a/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts +++ b/packages/react-components/react-button/src/components/CompoundButton/CompoundButton.types.ts @@ -14,7 +14,7 @@ export type CompoundButtonSlots = ButtonSlots & { }; export type CompoundButtonProps = ComponentProps> & - Pick; + Pick; export type CompoundButtonState = ComponentState & Omit; diff --git a/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx deleted file mode 100644 index bb9bdc39c77b4d..00000000000000 --- a/packages/react-components/react-button/src/components/CompoundButton/stories/CompoundButtonBlock.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { CompoundButton } from '../../../CompoundButton'; - -export const Block = () => ( - <> - - Block - - -); -Block.parameters = { - docs: { - description: { - story: 'A compound button can fill the width of its container.', - }, - }, -}; diff --git a/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts b/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts index e538bc39baed8f..f630f660ac85b7 100644 --- a/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts +++ b/packages/react-components/react-button/src/components/MenuButton/MenuButton.types.ts @@ -9,7 +9,7 @@ export type MenuButtonSlots = ButtonSlots & { }; export type MenuButtonProps = ComponentProps & - Pick; + Pick; export type MenuButtonState = ComponentState & Omit; diff --git a/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx deleted file mode 100644 index ae82b5de3732bf..00000000000000 --- a/packages/react-components/react-button/src/components/MenuButton/stories/MenuButtonBlock.stories.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu'; -import { MenuButton } from '../../../MenuButton'; - -export const Block = () => ( - - - Block - - - - - Item a - Item b - - - -); -Block.parameters = { - docs: { - description: { - story: 'A menu button can fill the width of its container.', - }, - }, -}; diff --git a/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx deleted file mode 100644 index 8a72dd27990d5b..00000000000000 --- a/packages/react-components/react-button/src/components/SplitButton/stories/SplitButtonBlock.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import { Menu, MenuItem, MenuList, MenuPopover, MenuTrigger } from '@fluentui/react-menu'; -import { SplitButton, MenuButtonProps } from '../../../index'; - -export const Block = () => ( - - - {(triggerProps: MenuButtonProps) => ( - - Block - - )} - - - - - Item a - Item b - - - -); -Block.parameters = { - docs: { - description: { - story: 'A split button can fill the width of its container.', - }, - }, -}; diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts index 91eb55a1f8b2b0..aad478a4c7df6b 100644 --- a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts +++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts @@ -15,8 +15,6 @@ export const useSplitButton_unstable = ( ): SplitButtonState => { const { appearance = 'secondary', - // eslint-disable-next-line deprecation/deprecation - block = false, children, disabled = false, disabledFocusable = false, @@ -46,7 +44,6 @@ export const useSplitButton_unstable = ( const primaryActionButtonShorthand = resolveShorthand(primaryActionButton, { defaultProps: { appearance, - block, children, disabled, disabledFocusable, @@ -73,7 +70,6 @@ export const useSplitButton_unstable = ( return { // Props passed at the top-level appearance, - block, disabled, disabledFocusable, iconPosition, diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts index 244c32a459a91a..39b6e66f4c9dce 100644 --- a/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts +++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButtonStyles.ts @@ -48,11 +48,6 @@ const useRootStyles = makeStyles({ }, }, - // Block styles - block: { - width: '100%', - }, - // Appearance variations outline: { /* No styles */ @@ -162,18 +157,11 @@ export const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitBut const rootStyles = useRootStyles(); const focusStyles = useFocusStyles(); - const { - appearance, - // eslint-disable-next-line deprecation/deprecation - block, - disabled, - disabledFocusable, - } = state; + const { appearance, disabled, disabledFocusable } = state; state.root.className = mergeClasses( splitButtonClassNames.root, rootStyles.base, - block && rootStyles.block, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, diff --git a/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx b/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx deleted file mode 100644 index 159cd4fdd225dd..00000000000000 --- a/packages/react-components/react-button/src/components/ToggleButton/stories/ToggleButtonBlock.stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import { ToggleButton } from '../../../ToggleButton'; - -export const Block = () => ( - <> - Block - -); -Block.parameters = { - docs: { - description: { - story: 'A toggle button can fill the width of its container.', - }, - }, -};