Skip to content

react-button: Removing deprecated block prop from all button components #23071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
spmonahan merged 4 commits into from
May 19, 2022
Merged

react-button: Removing deprecated block prop from all button components #23071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23725db
react-button: Removing deprecated block prop from all button components.
khmakoto May 18, 2022
34a4216
Removing block stories.
khmakoto May 18, 2022
f24b7de
Adding changefile.
khmakoto May 18, 2022
5240ee2
Removing block prop from migration guide and vr tests.
khmakoto May 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
228 changes: 0 additions & 228 deletions apps/vr-tests-react-components/src/stories/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,58 +152,6 @@ storiesOf('Button Converged', module)
includeRtl: true,
});

storiesOf('Button Block Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory(
'Default',
() => (
<Button id={buttonId} block>
Hello, world
</Button>
),
{ includeRtl: true },
)
.addStory('Circular', () => (
<Button id={buttonId} block shape="circular">
Hello, world
</Button>
))
.addStory('Outline', () => (
<Button id={buttonId} block appearance="outline">
Hello, world
</Button>
))
.addStory('Primary', () => (
<Button id={buttonId} block appearance="primary">
Hello, world
</Button>
))
.addStory('Subtle', () => (
<Button id={buttonId} block appearance="subtle">
Hello, world
</Button>
))
.addStory('Transparent', () => (
<Button id={buttonId} block appearance="transparent">
Hello, world
</Button>
))
.addStory('Disabled', () => (
<Button id={buttonId} block disabled>
Hello, world
</Button>
))
.addStory('Size small', () => (
<Button id={buttonId} block icon="X" size="small">
Hello, world
</Button>
))
.addStory('Size large', () => (
<Button id={buttonId} block icon="X" size="large">
Hello, world
</Button>
));

storiesOf('CompoundButton Converged', module)
.addDecorator(story => (
<Screener
Expand Down Expand Up @@ -315,58 +263,6 @@ storiesOf('CompoundButton Converged', module)
includeRtl: true,
});

storiesOf('CompoundButton Block Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory(
'Default',
() => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text">
Hello, world
</CompoundButton>
),
{ includeRtl: true },
)
.addStory('Circular', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" shape="circular">
Hello, world
</CompoundButton>
))
.addStory('Outline', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="outline">
Hello, world
</CompoundButton>
))
.addStory('Primary', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="primary">
Hello, world
</CompoundButton>
))
.addStory('Subtle', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="subtle">
Hello, world
</CompoundButton>
))
.addStory('Transparent', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" appearance="transparent">
Hello, world
</CompoundButton>
))
.addStory('Disabled', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" disabled>
Hello, world
</CompoundButton>
))
.addStory('Size small', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" icon="X" size="small">
Hello, world
</CompoundButton>
))
.addStory('Size large', () => (
<CompoundButton id={buttonId} block secondaryContent="This is some secondary text" icon="X" size="large">
Hello, world
</CompoundButton>
));

storiesOf('ToggleButton Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory('Default', () => <ToggleButton id={buttonId}>Hello, world</ToggleButton>, {
Expand Down Expand Up @@ -469,78 +365,6 @@ storiesOf('ToggleButton Converged', module)
</ToggleButton>
));

storiesOf('ToggleButton Block Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory(
'Default',
() => (
<ToggleButton id={buttonId} block>
Hello, world
</ToggleButton>
),
{ includeRtl: true },
)
.addStory('Circular', () => (
<ToggleButton id={buttonId} block shape="circular">
Hello, world
</ToggleButton>
))
.addStory('Outline', () => (
<ToggleButton id={buttonId} block appearance="primary">
Hello, world
</ToggleButton>
))
.addStory('Primary', () => (
<ToggleButton id={buttonId} block appearance="primary">
Hello, world
</ToggleButton>
))
.addStory('Subtle', () => (
<ToggleButton id={buttonId} block appearance="subtle">
Hello, world
</ToggleButton>
))
.addStory('Transparent', () => (
<ToggleButton id={buttonId} block appearance="transparent">
Hello, world
</ToggleButton>
))
.addStory('Disabled', () => (
<ToggleButton id={buttonId} block disabled>
Hello, world
</ToggleButton>
))
.addStory('Size small', () => (
<ToggleButton id={buttonId} block icon="X" size="small">
Hello, world
</ToggleButton>
))
.addStory('Size large', () => (
<ToggleButton id={buttonId} block icon="X" size="large">
Hello, world
</ToggleButton>
))
.addStory('Checked', () => (
<ToggleButton id={buttonId} block checked>
Hello, world
</ToggleButton>
))
.addStory('Primary Checked', () => (
<ToggleButton id={buttonId} block appearance="primary" checked>
Hello, world
</ToggleButton>
))
.addStory('Subtle Checked', () => (
<ToggleButton id={buttonId} block appearance="subtle" checked>
Hello, world
</ToggleButton>
))
.addStory('Transparent Checked', () => (
<ToggleButton id={buttonId} block appearance="transparent" checked>
Hello, world
</ToggleButton>
));

storiesOf('MenuButton Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory('Default', () => <MenuButton id={buttonId}>Hello, world</MenuButton>, { includeRtl: true })
Expand Down Expand Up @@ -611,55 +435,3 @@ storiesOf('MenuButton Converged', module)
))
.addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
.addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);

storiesOf('MenuButton Block Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
.addStory(
'Default',
() => (
<MenuButton id={buttonId} block>
Hello, world
</MenuButton>
),
{ includeRtl: true },
)
.addStory('Circular', () => (
<MenuButton id={buttonId} block shape="circular">
Hello, world
</MenuButton>
))
.addStory('Outline', () => (
<MenuButton id={buttonId} block appearance="outline">
Hello, world
</MenuButton>
))
.addStory('Primary', () => (
<MenuButton id={buttonId} block appearance="primary">
Hello, world
</MenuButton>
))
.addStory('Subtle', () => (
<MenuButton id={buttonId} block appearance="subtle">
Hello, world
</MenuButton>
))
.addStory('Transparent', () => (
<MenuButton id={buttonId} block appearance="transparent">
Hello, world
</MenuButton>
))
.addStory('Disabled', () => (
<MenuButton id={buttonId} block disabled>
Hello, world
</MenuButton>
))
.addStory('Size small', () => (
<MenuButton id={buttonId} block icon="X" size="small">
Hello, world
</MenuButton>
))
.addStory('Size large', () => (
<MenuButton id={buttonId} block icon="X" size="large">
Hello, world
</MenuButton>
));
7 changes: 7 additions & 0 deletions change/@fluentui-react-button-fd44c043-6794-4163-b728-31531b359075.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
7 changes: 3 additions & 4 deletions packages/react-components/react-button/etc/react-button.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export const buttonClassNames: SlotClassNames<ButtonSlots>;
// @public (undocumented)
export type ButtonProps = ComponentProps<ButtonSlots> & {
appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
block?: boolean;
disabledFocusable?: boolean;
disabled?: boolean;
iconPosition?: 'before' | 'after';
Expand All @@ -39,7 +38,7 @@ export type ButtonSlots = {
};

// @public (undocumented)
export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
export type ButtonState = ComponentState<ButtonSlots> & Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
iconOnly: boolean;
};

Expand All @@ -53,7 +52,7 @@ export const compoundButtonClassName: string;
export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;

// @public (undocumented)
export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;
export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>;

// @public (undocumented)
export type CompoundButtonSlots = ButtonSlots & {
Expand All @@ -74,7 +73,7 @@ export const menuButtonClassName: string;
export const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;

// @public (undocumented)
export type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;
export type MenuButtonProps = ComponentProps<MenuButtonSlots> & Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'shape' | 'size'>;

// @public (undocumented)
export type MenuButtonSlots = ButtonSlots & {
Expand Down
12 changes: 1 addition & 11 deletions packages/react-components/react-button/src/components/Button/Button.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,6 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
*/
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
Expand Down Expand Up @@ -73,9 +65,7 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
};

export type ButtonState = ComponentState<ButtonSlots> &
Required<
Pick<ButtonProps, 'appearance' | 'block' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>
> & {
Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {
/**
* A button can contain only an icon.
*
Expand Down
3 changes: 1 addition & 2 deletions packages/react-components/react-button/src/components/Button/MIGRATION.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -142,7 +141,7 @@ Common buttons now all map to `Button`:
| `description` | | |
| `disabled` | `disabled` | `disabled` |
| `elementRef` | | `ref` |
| | `fluid` | `block` |
| | `fluid` | |
| `getClassNames` | | |
| `getSplitButtonClassNames` | | |
| `href` | | `href` |
Expand Down
Loading