feat(v5): Drop block prop from Button (#5557)

react-bootstrap · Dec 8, 2020 · 50781e1 · 50781e1
1 parent da195d3
commit 50781e1
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 16 deletions.
diff --git a/src/Button.tsx b/src/Button.tsx
@@ -16,7 +16,6 @@ export interface ButtonProps
   extends React.HTMLAttributes<HTMLElement>,
     BsPrefixPropsWithChildren {
   active?: boolean;
-  block?: boolean;
   variant?: ButtonVariant;
   size?: 'sm' | 'lg';
   type?: ButtonType;
@@ -54,9 +53,6 @@ const propTypes = {
    */
   size: PropTypes.string,
 
-  /** Spans the full width of the Button parent */
-  block: PropTypes.bool,
-
   /** Manually set the visual state of the button to `:active` */
   active: PropTypes.bool,
 
@@ -93,7 +89,6 @@ const Button: Button = React.forwardRef(
       size,
       active,
       className,
-      block,
       type,
       as,
       ...props
@@ -107,7 +102,6 @@ const Button: Button = React.forwardRef(
       prefix,
       active && 'active',
       variant && `${prefix}-${variant}`,
-      block && `${prefix}-block`,
       size && `${prefix}-${size}`,
     );
 

diff --git a/test/ButtonSpec.js b/test/ButtonSpec.js
@@ -86,10 +86,6 @@ describe('<Button>', () => {
     ).assertSingle(`a.disabled`);
   });
 
-  it('Should have block class', () => {
-    mount(<Button block>Title</Button>).assertSingle(`.btn-block`);
-  });
-
   it('Should apply variant class', () => {
     mount(<Button variant="danger">Title</Button>).assertSingle(`.btn-danger`);
   });

diff --git a/www/src/examples/Button/Block.js b/www/src/examples/Button/Block.js
@@ -1,8 +1,8 @@
-<>
-  <Button variant="primary" size="lg" block>
+<div className="d-grid gap-2">
+  <Button variant="primary" size="lg">
     Block level button
   </Button>
-  <Button variant="secondary" size="lg" block>
+  <Button variant="secondary" size="lg">
     Block level button
   </Button>
-</>;
+</div>;
diff --git a/www/src/pages/components/buttons.mdx b/www/src/pages/components/buttons.mdx
@@ -55,9 +55,10 @@ Fancy larger or smaller buttons? Add `size="lg"`,
 
 <ReactPlayground codeText={ButtonSizes} />
 
+## Block buttons
 
-Create block level buttons—those that span the full width of a parent—by
-adding `block`
+Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 
+with a mix of our display and gap utilities. 
 
 <ReactPlayground codeText={ButtonBlock} />