diff --git a/src/components/button/README.md b/src/components/button/README.md index de752a8ec9d..0ebae828685 100644 --- 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. ``` -### Block level buttons - -Create block level buttons — those that span the full width of a parent — by setting the `block` -prop. - -```html -
- Block Level Button -
- - -``` - ## Contextual variants Use the `variant` prop to generate the various Bootstrap contextual button variants. By default `` will render with the `secondary` variant. +The `variant` prop adds the Bootstrap V4.3 class `.btn-` 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. ``` +**Tip:** remove the hover underline from a link variant button by adding the Bootstrap V4.3 utility +class `text-decoration-none` to ``. + +## Block level buttons + +Create block level buttons — those that span the full width of a parent — by setting the `block` +prop. + +```html +
+ Block Level Button +
+ + +``` + ## Pill style NEW in 2.0.0-rc.20 @@ -143,10 +148,34 @@ Prefer buttons with a more rounded-pill style? Just set the prop `pill` to true. ``` +This prop adds the Bootstrap V4.3 utility class `.rounded-pill` on the rendered button. + +## Squared style + +NEW in 2.0.0-rc.22 + +Prefer buttons with a more square corner style? Just set the prop `squared` to true. + +```html +
+ Button + Button + Button + Button + Button + Button +
+ + +``` + +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 `` elements and ``. +rendered as `` elements and `` (i.e. with the `href` or `to` prop set). ```html
diff --git a/src/components/button/button.js b/src/components/button/button.js index 5050ebeb51b..d1a65890d42 100644 --- 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 index 276775282df..43f7db13d79 100644 --- 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: {