From aa266413c6fc321ef8461b8dd21c781bf2ec6c65 Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Sun, 26 May 2019 22:52:10 -0300 Subject: [PATCH 1/7] feat(button): add new `square` prop for making buttons with square corners New `square` prop will add class `rounded-0` to the button to make the corners squared. --- src/components/button/button.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/button/button.js b/src/components/button/button.js index 5050ebeb51b..47675c60639 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -41,6 +41,10 @@ const btnProps = { type: Boolean, default: false }, + square: { + 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.square && !props.pill, disabled: props.disabled, active: props.pressed } From 57eff308c24c277328a6e0e536e59233c1974688 Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Sun, 26 May 2019 22:55:55 -0300 Subject: [PATCH 2/7] Update button.spec.js --- src/components/button/button.spec.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js index 276775282df..e0fc2a32fa8 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 square prop set', async () => { + const wrapper = mount(BButton, { + propsData: { + square: 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: { From 7c11ea0ca7d770faf116617110f8d201829b3077 Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Sun, 26 May 2019 23:11:27 -0300 Subject: [PATCH 3/7] Update README.md --- src/components/button/README.md | 56 ++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 14 deletions(-) diff --git a/src/components/button/README.md b/src/components/button/README.md index de752a8ec9d..951f18ce1c3 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 `no-text-decoration` 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,33 @@ 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. + +## Square style + +NEW in 2.0.0-rc.22 + +Prefer buttons with a more square corner style? Just set the prop `square` to true. + +```html +
+ Button + Button + Button + Button + Button + Button +
+ + +``` + +The `square` prop adds the Bootstrap V4.3 utility class `.rounded-0` on the rendered button. + ## 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
From 226d50bba196664a3d215d1f04bcba5a3f7c8c9a Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Mon, 27 May 2019 10:06:37 -0300 Subject: [PATCH 4/7] Update button.js --- src/components/button/button.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/button/button.js b/src/components/button/button.js index 47675c60639..d1a65890d42 100644 --- a/src/components/button/button.js +++ b/src/components/button/button.js @@ -41,7 +41,7 @@ const btnProps = { type: Boolean, default: false }, - square: { + squared: { type: Boolean, default: false }, @@ -100,7 +100,7 @@ const computeClass = props => [ [`btn-${props.size}`]: Boolean(props.size), 'btn-block': props.block, 'rounded-pill': props.pill, - 'rounded-0': props.square && !props.pill, + 'rounded-0': props.squared && !props.pill, disabled: props.disabled, active: props.pressed } From 4dcc1f57ff306c17ab500d56ed18ae424676b1bb Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Mon, 27 May 2019 10:07:04 -0300 Subject: [PATCH 5/7] Update button.spec.js --- src/components/button/button.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js index e0fc2a32fa8..43f7db13d79 100644 --- a/src/components/button/button.spec.js +++ b/src/components/button/button.spec.js @@ -106,10 +106,10 @@ describe('button', () => { expect(wrapper.classes().length).toBe(3) }) - it('applies rounded-0 class when square prop set', async () => { + it('applies rounded-0 class when squared prop set', async () => { const wrapper = mount(BButton, { propsData: { - square: true + squared: true } }) From 5ae88ad5ab34aa996138b9c616b67c2e975e95eb Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Mon, 27 May 2019 10:08:49 -0300 Subject: [PATCH 6/7] Update README.md --- src/components/button/README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/button/README.md b/src/components/button/README.md index 951f18ce1c3..aca52243251 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -150,26 +150,27 @@ 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. -## Square style +## Squared style NEW in 2.0.0-rc.22 -Prefer buttons with a more square corner style? Just set the prop `square` to true. +Prefer buttons with a more square corner style? Just set the prop `squared` to true. ```html
- Button - Button - Button - Button - Button - Button + Button + Button + Button + Button + Button + Button
``` -The `square` prop adds the Bootstrap V4.3 utility class `.rounded-0` on the rendered 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 From a1a8b54bd817b6605ecf488b032e4ab6cec09d6a Mon Sep 17 00:00:00 2001 From: T Morehouse Date: Mon, 27 May 2019 10:21:08 -0300 Subject: [PATCH 7/7] Update README.md --- src/components/button/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/README.md b/src/components/button/README.md index aca52243251..0ebae828685 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -114,7 +114,7 @@ padding and size of a button. ``` **Tip:** remove the hover underline from a link variant button by adding the Bootstrap V4.3 utility -class `no-text-decoration` to ``. +class `text-decoration-none` to ``. ## Block level buttons