Button: Renaming fluid prop to block so that it is inline with th…

…e most used terminology in the web (#15513)

<!--
!!!!!!! IMPORTANT !!!!!!!

Due to work we're currently doing to prepare master branch for our version 8 beta release,
please hold-off submitting the PR until around October 12 if it's not urgent.
If it is urgent, please submit the PR targeting the 7.0 branch.

This change does not apply to react-northstar contributors.

See #15222 for more details. Sorry for the inconvenience and short notice.
-->

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes
This PR renames the `fluid` prop in the `Button` components to `block` so that it is inline with the most used terminology in the web.

#### Focus areas to test

(optional)

apps/vr-tests/src/stories/ButtonNext.stories.tsx

@@ -351,7 +351,7 @@ storiesOf('Button Next - Icon only', module)
  </Button>
  ));
 
-storiesOf('Button Next - Fluid', module)
+storiesOf('Button Next - Block', module)
  .addDecorator(FabricDecoratorFullWidth)
  .addDecorator(withThemeProvider)
  .addDecorator(story => (
@@ -377,42 +377,42 @@ storiesOf('Button Next - Fluid', module)
  </Screener>
  ))
  .addStory('Default', () => (
- <Button fluid icon="X">
+ <Button block icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Primary', () => (
- <Button fluid primary icon="X">
+ <Button block primary icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Disabled', () => (
- <Button fluid disabled icon="X">
+ <Button block disabled icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Primary Disabled', () => (
- <Button fluid primary disabled icon="X">
+ <Button block primary disabled icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Ghost', () => (
- <Button fluid ghost icon="X">
+ <Button block ghost icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Ghost Disabled', () => (
- <Button fluid disabled ghost icon="X">
+ <Button block disabled ghost icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Transparent', () => (
- <Button fluid transparent icon="X">
+ <Button block transparent icon="X">
  Hello, world
  </Button>
  ))
  .addStory('Transparent Disabled', () => (
- <Button fluid disabled transparent icon="X">
+ <Button block disabled transparent icon="X">
  Hello, world
  </Button>
  ));

apps/vr-tests/src/stories/CompoundButtonNext.stories.tsx

@@ -88,7 +88,7 @@ storiesOf('CompoundButton Next', module)
  />
  ));
 
-storiesOf('CompoundButton Next - Fluid', module)
+storiesOf('CompoundButton Next - Block', module)
  .addDecorator(FabricDecoratorFullWidth)
  .addDecorator(withThemeProvider)
  .addDecorator(story => (
@@ -114,43 +114,43 @@ storiesOf('CompoundButton Next - Fluid', module)
  </Screener>
  ))
  .addStory('Default', () => (
- <CompoundButton fluid icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Primary', () => (
- <CompoundButton fluid primary icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block primary icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Disabled', () => (
- <CompoundButton fluid disabled icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block disabled icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Primary Disabled', () => (
- <CompoundButton fluid primary disabled icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block primary disabled icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Ghost', () => (
- <CompoundButton fluid ghost icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block ghost icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Ghost Disabled', () => (
- <CompoundButton fluid disabled ghost icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block disabled ghost icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Transparent', () => (
- <CompoundButton fluid transparent icon="X" secondaryContent="This is some secondary text">
+ <CompoundButton block transparent icon="X" secondaryContent="This is some secondary text">
  Hello, world
  </CompoundButton>
  ))
  .addStory('Transparent Disabled', () => (
  <CompoundButton
- fluid
+ block
  disabled
  transparent
  icon="X"
@@ -227,8 +227,8 @@ storiesOf('CompoundButton Next - Teams Theme', module)
  Hello, world
  </CompoundButton>
  ))
- .addStory('Fluid', () => (
- <CompoundButton secondaryContent="This is some secondary text" fluid icon="X">
+ .addStory('Block', () => (
+ <CompoundButton secondaryContent="This is some secondary text" block icon="X">
  Hello, world
  </CompoundButton>
  ))

apps/vr-tests/src/stories/MenuButtonNext.stories.tsx

@@ -70,7 +70,7 @@ storiesOf('MenuButton Next', module)
  <MenuButton icon={<AddIcon />} tokens={{ iconSize: '30px' }} />
  ));
 
-storiesOf('MenuButton Next - Fluid', module)
+storiesOf('MenuButton Next - Block', module)
  .addDecorator(FabricDecoratorFullWidth)
  .addDecorator(withThemeProvider)
  .addDecorator(story => (
@@ -96,42 +96,42 @@ storiesOf('MenuButton Next - Fluid', module)
  </Screener>
  ))
  .addStory('Default', () => (
- <MenuButton fluid icon="X">
+ <MenuButton block icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Primary', () => (
- <MenuButton fluid primary icon="X">
+ <MenuButton block primary icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Disabled', () => (
- <MenuButton fluid disabled icon="X">
+ <MenuButton block disabled icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Primary Disabled', () => (
- <MenuButton fluid primary disabled icon="X">
+ <MenuButton block primary disabled icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Ghost', () => (
- <MenuButton fluid ghost icon="X">
+ <MenuButton block ghost icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Ghost Disabled', () => (
- <MenuButton fluid disabled ghost icon="X">
+ <MenuButton block disabled ghost icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Transparent', () => (
- <MenuButton fluid transparent icon="X">
+ <MenuButton block transparent icon="X">
  Hello, world
  </MenuButton>
  ))
  .addStory('Transparent Disabled', () => (
- <MenuButton fluid disabled transparent icon="X">
+ <MenuButton block disabled transparent icon="X">
  Hello, world
  </MenuButton>
  ));
@@ -189,8 +189,8 @@ storiesOf('MenuButton Next - Teams Theme', module)
  Hello, world
  </MenuButton>
  ))
- .addStory('Fluid', () => (
- <MenuButton fluid icon="X">
+ .addStory('Block', () => (
+ <MenuButton block icon="X">
  Hello, world
  </MenuButton>
  ))

apps/vr-tests/src/stories/SplitButtonNext.stories.tsx

@@ -76,7 +76,7 @@ storiesOf('SplitButton Next', module)
  </ThemeProvider>
  ));
 
-storiesOf('SplitButton Next - Fluid', module)
+storiesOf('SplitButton Next - Block', module)
  .addDecorator(FabricDecoratorFullWidth)
  .addDecorator(withThemeProvider)
  .addDecorator(story => (
@@ -102,42 +102,42 @@ storiesOf('SplitButton Next - Fluid', module)
  </Screener>
  ))
  .addStory('Default', () => (
- <SplitButton fluid icon="X">
+ <SplitButton block icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Primary', () => (
- <SplitButton fluid primary icon="X">
+ <SplitButton block primary icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Disabled', () => (
- <SplitButton fluid disabled icon="X">
+ <SplitButton block disabled icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Primary Disabled', () => (
- <SplitButton fluid primary disabled icon="X">
+ <SplitButton block primary disabled icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Ghost', () => (
- <SplitButton fluid ghost icon="X">
+ <SplitButton block ghost icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Ghost Disabled', () => (
- <SplitButton fluid disabled ghost icon="X">
+ <SplitButton block disabled ghost icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Transparent', () => (
- <SplitButton fluid transparent icon="X">
+ <SplitButton block transparent icon="X">
  Hello, world
  </SplitButton>
  ))
  .addStory('Transparent Disabled', () => (
- <SplitButton fluid disabled transparent icon="X">
+ <SplitButton block disabled transparent icon="X">
  Hello, world
  </SplitButton>
  ));
@@ -195,8 +195,8 @@ storiesOf('SplitButton Next - Teams Theme', module)
  Hello, world
  </SplitButton>
  ))
- .addStory('Fluid', () => (
- <SplitButton fluid icon="X">
+ .addStory('Block', () => (
+ <SplitButton block icon="X">
  Hello, world
  </SplitButton>
  ))

apps/vr-tests/src/stories/ToggleButtonNext.stories.tsx

@@ -70,7 +70,7 @@ storiesOf('ToggleButton Next', module)
  <ToggleButton icon={<AddIcon />} tokens={{ iconSize: '30px' }} />
  ));
 
-storiesOf('ToggleButton Next - Fluid', module)
+storiesOf('ToggleButton Next - Block', module)
  .addDecorator(FabricDecoratorFullWidth)
  .addDecorator(withThemeProvider)
  .addDecorator(story => (
@@ -96,42 +96,42 @@ storiesOf('ToggleButton Next - Fluid', module)
  </Screener>
  ))
  .addStory('Default', () => (
- <ToggleButton fluid icon="X">
+ <ToggleButton block icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Primary', () => (
- <ToggleButton fluid primary icon="X">
+ <ToggleButton block primary icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Disabled', () => (
- <ToggleButton fluid disabled icon="X">
+ <ToggleButton block disabled icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Primary Disabled', () => (
- <ToggleButton fluid primary disabled icon="X">
+ <ToggleButton block primary disabled icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Ghost', () => (
- <ToggleButton fluid ghost icon="X">
+ <ToggleButton block ghost icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Ghost Disabled', () => (
- <ToggleButton fluid disabled ghost icon="X">
+ <ToggleButton block disabled ghost icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Transparent', () => (
- <ToggleButton fluid transparent icon="X">
+ <ToggleButton block transparent icon="X">
  Hello, world
  </ToggleButton>
  ))
  .addStory('Transparent Disabled', () => (
- <ToggleButton fluid disabled transparent icon="X">
+ <ToggleButton block disabled transparent icon="X">
  Hello, world
  </ToggleButton>
  ));

change/@fluentui-react-button-2020-10-14-13-05-28-blockButtons.json

@@ -0,0 +1,8 @@
+{
+ "type": "minor",
+ "comment": "Button: Renaming `fluid` prop to `block` so that it is inline with the most used terminology in the web.",
+ "packageName": "@fluentui/react-button",
+ "email": "humbertomakotomorimoto@gmail.com",
+ "dependentChangeType": "patch",
+ "date": "2020-10-14T20:05:28.348Z"
+}

packages/react-button/README.md

@@ -111,8 +111,8 @@ This ensures that `Button` components work not just with Fluent UI icons, but wi
 These all apply to `Button`, `ToggleButton`, `MenuButton`, and `SplitButton`:
 | Modifier | Description |
 | ---------- | --------------------------------------------------------------------------------------- |
+| `block` | Stretches the button to the container width. |
 | `circular` | Make the button rounded on the edges (pill button.) |
-| `fluid` | Stretches the button to the container width. |
 | `iconOnly` | Makes the width match the height. Can be combined with circular to make circle buttons. |
 | `ghost` | Makes the button inherit the background color. |
 | `primary` | Uses the brand color to indicate the button is a primary action. |

packages/react-button/etc/react-button.api.md

@@ -25,7 +25,7 @@ export type ButtonProps = ComponentProps & React.HTMLAttributes<HTMLElement> & {
  target?: string;
  circular?: boolean;
  disabled?: boolean;
- fluid?: boolean;
+ block?: boolean;
  iconOnly?: boolean;
  iconPosition?: 'before' | 'after';
  inverted?: boolean;
@@ -120,7 +120,7 @@ export type ButtonVariants<TTokens = ButtonTokens> = {
  primary?: TTokens;
  iconOnly?: TTokens;
  circular?: TTokens;
- fluid?: TTokens;
+ block?: TTokens;
 };
 
 // @public (undocumented)

packages/react-button/src/components/Button/Button.scss

@@ -128,7 +128,7 @@
  --button-borderRadius: 50000px;
  }
 
- &._fluid {
+ &._block {
  --button-width: 100%;
  }
 

packages/react-button/src/components/Button/Button.types.ts

@@ -42,7 +42,7 @@ export type ButtonProps = ComponentProps &
  disabled?: boolean;
 
  /** A button can fill the width of its container. */
- fluid?: boolean;
+ block?: boolean;
 
  /** A button can contain only an icon. */
  iconOnly?: boolean;
@@ -146,5 +146,5 @@ export type ButtonVariants<TTokens = ButtonTokens> = {
  primary?: TTokens;
  iconOnly?: TTokens;
  circular?: TTokens;
- fluid?: TTokens;
+ block?: TTokens;
 };