feat(button): add new squared prop for making buttons with square corners (bootstrap-vue#3387)

tmorehouse · web-flow · commit 004963d6215c · 2019-05-27T12:19:05.000-03:00
diff --git a/src/components/button/README.md b/src/components/button/README.md
@@ -50,25 +50,14 @@ Fancy larger or smaller buttons? Specify `lg` or `sm` via the `size` prop.
 <!-- b-button-sizes.vue -->
 ```
 
-### Block level buttons
-
-Create block level buttons — those that span the full width of a parent — by setting the `block`
-prop.
-
-```html
-<div>
-  <b-button block variant="primary">Block Level Button</b-button>
-</div>
-
-<!-- b-button-block.vue -->
-```
-
 ## Contextual variants
 
 Use the `variant` prop to generate the various Bootstrap contextual button variants.
 
 By default `<b-button>` will render with the `secondary` variant.
 
+The `variant` prop adds the Bootstrap V4.3 class `.btn-<variant>` on the rendered button.
+
 ### Solid color variants
 
 `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light` and `dark`.
@@ -124,6 +113,22 @@ padding and size of a button.
 <!-- b-button-link.vue -->
 ```
 
+**Tip:** remove the hover underline from a link variant button by adding the Bootstrap V4.3 utility
+class `text-decoration-none` to `<b-button>`.
+
+## Block level buttons
+
+Create block level buttons — those that span the full width of a parent — by setting the `block`
+prop.
+
+```html
+<div>
+  <b-button block variant="primary">Block Level Button</b-button>
+</div>
+
+<!-- b-button-block.vue -->
+```
+
 ## Pill style
 
 <span class="badge badge-info small">NEW in 2.0.0-rc.20</span>
@@ -143,10 +148,34 @@ Prefer buttons with a more rounded-pill style? Just set the prop `pill` to true.
 <!-- b-button-pill.vue -->
 ```
 
+This prop adds the Bootstrap V4.3 utility class `.rounded-pill` on the rendered button.
+
+## Squared style
+
+<span class="badge badge-info small">NEW in 2.0.0-rc.22</span>
+
+Prefer buttons with a more square corner style? Just set the prop `squared` to true.
+
+```html
+<div>
+  <b-button squared>Button</b-button>
+  <b-button squared variant="primary">Button</b-button>
+  <b-button squared variant="outline-secondary">Button</b-button>
+  <b-button squared variant="success">Button</b-button>
+  <b-button squared variant="outline-danger">Button</b-button>
+  <b-button squared variant="info">Button</b-button>
+</div>
+
+<!-- b-button-square.vue -->
+```
+
+The `squared` prop adds the Bootstrap V4.3 utility class `.rounded-0` on the rendered button. The
+`pill` prop takes precedence over the `squared` prop.
+
 ## Disabled state
 
 Set the `disabled` prop to disable button default functionality. `disabled` also works with buttons
-rendered as `<a>` elements and `<router-link>`.
+rendered as `<a>` elements and `<router-link>` (i.e. with the `href` or `to` prop set).
 
 ```html
 <div>
diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -41,6 +41,10 @@ const btnProps = {
     type: Boolean,
     default: false
   },
+  squared: {
+    type: Boolean,
+    default: false
+  },
   pressed: {
     // tri-state prop: true, false or null
     // => on, off, not a toggle
@@ -96,6 +100,7 @@ const computeClass = props => [
     [`btn-${props.size}`]: Boolean(props.size),
     'btn-block': props.block,
     'rounded-pill': props.pill,
+    'rounded-0': props.squared && !props.pill,
     disabled: props.disabled,
     active: props.pressed
   }
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
@@ -90,7 +90,7 @@ describe('button', () => {
     expect(wrapper.classes().length).toBe(3)
   })
 
-  it('applies pill class', async () => {
+  it('applies rounded-pill class when pill prop set', async () => {
     const wrapper = mount(BButton, {
       propsData: {
         pill: true
@@ -106,6 +106,22 @@ describe('button', () => {
     expect(wrapper.classes().length).toBe(3)
   })
 
+  it('applies rounded-0 class when squared prop set', async () => {
+    const wrapper = mount(BButton, {
+      propsData: {
+        squared: true
+      }
+    })
+
+    expect(wrapper.is('button')).toBe(true)
+    expect(wrapper.attributes('type')).toBeDefined()
+    expect(wrapper.attributes('type')).toBe('button')
+    expect(wrapper.classes()).toContain('btn')
+    expect(wrapper.classes()).toContain('btn-secondary')
+    expect(wrapper.classes()).toContain('rounded-0')
+    expect(wrapper.classes().length).toBe(3)
+  })
+
   it('renders custom root element', async () => {
     const wrapper = mount(BButton, {
       propsData: {
