Skip to content

Commit

Permalink
fix(b-form-spinbutton): prevent buttons from re-ordering when parent …
Browse files Browse the repository at this point in the history
…element is RTL (#4802)

* chore(spinbuttons): prevent buttons from re-ordering when parent element

* Update form-spinbutton.js

* Update form-spinbutton.spec.js
  • Loading branch information
tmorehouse authored Feb 20, 2020
1 parent f825778 commit ae2cce9
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 14 deletions.
8 changes: 8 additions & 0 deletions src/components/form-spinbutton/_spinbutton.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@
height: auto;
width: auto;
}

@at-root {
// Prevent the buttons from reversing order on in horizontal RTL mode
[dir="rtl"] &:not(.flex-column),
&[dir="rtl"]:not(.flex-column) {
flex-direction: row-reverse;
}
}

output {
font-size: inherit;
Expand Down
5 changes: 1 addition & 4 deletions src/components/form-spinbutton/form-spinbutton.js
Original file line number Diff line number Diff line change
Expand Up @@ -546,10 +546,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
...this.$attrs,
role: 'group',
lang: this.computedLocale,
tabindex: isDisabled ? null : '-1',
// We want to keep the order of the buttons regardless
// of locale (flex will re-order based on rtl/ltr)
dir: 'ltr'
tabindex: isDisabled ? null : '-1'
},
on: {
keydown: this.onKeydown,
Expand Down
10 changes: 0 additions & 10 deletions src/components/form-spinbutton/form-spinbutton.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,6 @@ describe('form-spinbutton', () => {
expect(wrapper.classes()).toContain('align-items-stretch')
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('tabindex')).toEqual('-1')
// We always have LTR to ensure the flex order stays ltr
expect(wrapper.attributes('dir')).toEqual('ltr')

// Should have 3 child elements (btn, output, btn)
expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
Expand Down Expand Up @@ -77,8 +75,6 @@ describe('form-spinbutton', () => {
expect(wrapper.classes()).toContain('align-items-stretch')
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('tabindex')).toEqual('-1')
// We always have LTR to ensure the flex order stays ltr
expect(wrapper.attributes('dir')).toEqual('ltr')

// Should have 3 child elements (btn, output, btn)
expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
Expand Down Expand Up @@ -136,8 +132,6 @@ describe('form-spinbutton', () => {
expect(wrapper.classes()).toContain('align-items-stretch')
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('tabindex')).toEqual('-1')
// We always have LTR to ensure the flex order stays ltr
expect(wrapper.attributes('dir')).toEqual('ltr')

// Should have 3 child elements (btn, output, btn)
expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
Expand Down Expand Up @@ -187,8 +181,6 @@ describe('form-spinbutton', () => {
expect(wrapper.classes()).not.toContain('align-items-stretch')
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('tabindex')).toEqual('-1')
// We always have LTR to ensure the flex order stays ltr
expect(wrapper.attributes('dir')).toEqual('ltr')

// Should have 3 child elements (btn, output, btn)
expect(wrapper.findAll('.b-form-spinbutton > *').length).toBe(3)
Expand Down Expand Up @@ -774,8 +766,6 @@ describe('form-spinbutton', () => {
expect(wrapper.classes()).not.toContain('focus')
expect(wrapper.attributes('role')).toEqual('group')
expect(wrapper.attributes('tabindex')).toEqual('-1')
// We always have LTR to ensure the flex order stays ltr
expect(wrapper.attributes('dir')).toEqual('ltr')

const $output = wrapper.find('output')
expect($output.exists()).toBe(true)
Expand Down

0 comments on commit ae2cce9

Please sign in to comment.