Skip to content
Permalink
Browse files
fix(b-form-spinbutton): prevent buttons from re-ordering when parent …
…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 committed Feb 20, 2020
1 parent f825778 commit ae2cce9d593bd310b3d2256ade41df0243447970
Showing 3 changed files with 9 additions and 14 deletions.
@@ -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;
@@ -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,
@@ -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)
@@ -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)
@@ -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)
@@ -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)
@@ -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)

0 comments on commit ae2cce9

Please sign in to comment.