From 57debafdf774d1a48cfd2a402d9334aec09a16f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 14:07:45 -0400 Subject: [PATCH 1/7] m-toggle-button: change style for a11y --- .../toggle-buttons/toggle-buttons.html | 18 +++-- .../toggle-buttons/toggle-buttons.scss | 76 ++++++++++++++++++- .../toggle-buttons/toggle-buttons.spec.ts | 3 +- .../toggle-buttons/toggle-buttons.ts | 8 +- 4 files changed, 85 insertions(+), 20 deletions(-) diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html index e289c2bf1..67096b1b8 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html @@ -1,13 +1,15 @@
- +
diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss index 2c9419301..20adb353e 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss @@ -2,10 +2,68 @@ @import '../button/button.scss'; .m-toggle-buttons { - display: inline-block; + display: inline-flex; + + &__button { + position: relative; + z-index: 0; + transition-property: background-color, border-color, color, outline; + transition-duration: $m-transition-duration; + transition-timing-function: ease; + display: flex; + align-items: center; + border: 1px solid $m-color-interactive; + font-family: inherit; + text-decoration: none; + appearance: none; + color: $m-color-interactive; + outline-color: $m-color-interactive-darker; + outline-offset: 2px; + outline-width: 1px; + user-select: none; + overflow: hidden; + background-color: $m-color-white; + font-family: inherit; + font-size: inherit; + font-weight: $m-font-weight-semi-bold; + text-align: center; + padding: 10px $m-space; + + &:not(:disabled) { + cursor: pointer; + + &:not(.m--pressed):hover { + background-color: $m-color-information; + } + + &.m--pressed:hover { + background-color: $m-color-interactive-darker; + } + + } + + &:disabled { + cursor: default; + color: $m-color-disabled; + background: $m-color-white; + border-color: $m-color-disabled; + + &.m--pressed { + color: $m-color-white; + background: $m-color-disabled; + } + } + + &.m--pressed { + color: $m-color-white; + background: $m-color-interactive; + } + } + + &.m--is-default { - .m-button { + .m-toggle-buttons__button { border-radius: 0; &:not(:nth-last-child(1)) { @@ -19,13 +77,23 @@ &:nth-last-child(1) { border-radius: 0 $m-border-radius $m-border-radius 0; } + + &.m--pressed+.m--pressed { + border-left-color: $m-color-white; + } } } &.m--is-rounded { - .m-button { + flex-wrap: wrap; + gap: $m-space-xs 0; + + .m-toggle-buttons__button { border-radius: 25px; // magic number - margin: 0 $m-space-2xs $m-space-xs 0; + + &:not(:last-child) { + margin-right: $m-space-xs; + } } } } diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.spec.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.spec.ts index f35369bd0..42b578bc7 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.spec.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.spec.ts @@ -141,8 +141,7 @@ describe('MToggleButtons', () => { it(`Then buttons should be disabled`, () => { expect(wrapper.vm.$refs.toggle).toBeTruthy(); - expect(wrapper.findAll('.m-toggle-buttons__button').at(0).props().disabled).toBeTruthy(); - expect(wrapper.findAll('.m-toggle-buttons__button').at(1).props().disabled).toBeTruthy(); + }); }); }); diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts index 4660e8243..facbf9865 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts @@ -1,7 +1,7 @@ import Vue, { PluginObject } from 'vue'; import Component from 'vue-class-component'; import { Emit, Model, Prop } from 'vue-property-decorator'; -import { MButton, MButtonSkin } from '../button/button'; +import { MButtonSkin } from '../button/button'; import { TOGGLE_BUTTONS_NAME } from '../component-names'; import WithRender from './toggle-buttons.html?style=./toggle-buttons.scss'; @@ -17,11 +17,7 @@ export enum MToggleButtonSkin { } @WithRender -@Component({ - components: { - MButton - } -}) +@Component export class MToggleButtons extends Vue { @Model('change') @Prop({ default: () => [] }) From 1b2a5ed1f6096ed2b78251ef621cead7e2341e98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 14:24:29 -0400 Subject: [PATCH 2/7] maj --- .../toggle-buttons/toggle-buttons.ts | 7 +- .../toggle-buttons.stories.ts.snap | 635 ------------------ .../toggle-buttons/toggle-buttons.stories.ts | 1 - 3 files changed, 1 insertion(+), 642 deletions(-) delete mode 100644 src/storybook/src/modul-components/components/toggle-buttons/__snapshots__/toggle-buttons.stories.ts.snap diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts index facbf9865..f45cb2d71 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts @@ -1,7 +1,6 @@ import Vue, { PluginObject } from 'vue'; import Component from 'vue-class-component'; import { Emit, Model, Prop } from 'vue-property-decorator'; -import { MButtonSkin } from '../button/button'; import { TOGGLE_BUTTONS_NAME } from '../component-names'; import WithRender from './toggle-buttons.html?style=./toggle-buttons.scss'; @@ -47,11 +46,7 @@ export class MToggleButtons extends Vue { } @Emit('click') - private onClick(button: MToggleButton): void { } - - public getSkin(button: MToggleButton): string { - return !button.pressed ? MButtonSkin.Secondary : MButtonSkin.Primary; - } + private onClick(_button: MToggleButton): void { } get skinButtons(): { [key: string]: boolean } { return { diff --git a/src/storybook/src/modul-components/components/toggle-buttons/__snapshots__/toggle-buttons.stories.ts.snap b/src/storybook/src/modul-components/components/toggle-buttons/__snapshots__/toggle-buttons.stories.ts.snap deleted file mode 100644 index aae284f48..000000000 --- a/src/storybook/src/modul-components/components/toggle-buttons/__snapshots__/toggle-buttons.stories.ts.snap +++ /dev/null @@ -1,635 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storyshots modul-components|m-toggle-buttons default 1`] = ` -
- - - - -
-`; - -exports[`Storyshots modul-components|m-toggle-buttons disabled 1`] = ` -
- - - - -
-`; - -exports[`Storyshots modul-components|m-toggle-buttons multiple selection 1`] = ` -
- - - - -
-`; - -exports[`Storyshots modul-components|m-toggle-buttons single selection 1`] = ` -
- - - - -
-`; - -exports[`Storyshots modul-components|m-toggle-buttons skin rounded 1`] = ` -
- - - - -
-`; - -exports[`Storyshots modul-components|m-toggle-buttons with slots 1`] = ` -
- - - - -
-`; diff --git a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts index 68fdc8914..01b4a2619 100644 --- a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts +++ b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts @@ -3,7 +3,6 @@ import { TOGGLE_BUTTONS_NAME } from '@ulaval/modul-components/dist/components/co import { MToggleButton, MToggleButtonSkin } from '@ulaval/modul-components/dist/components/toggle-buttons/toggle-buttons'; import { modulComponentsHierarchyRootSeparator } from '../../../utils'; - const JUNE: MToggleButton = { id: 'june', title: 'June' }; const JULY: MToggleButton = { id: 'july', title: 'July' }; const AUGUST: MToggleButton = { id: 'august', title: 'August' }; From 24879d340ca45f0b205b39fc255d29bef2a3f19d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 15:02:17 -0400 Subject: [PATCH 3/7] maj --- .../toggle-buttons/toggle-buttons.html | 34 +++++---- .../toggle-buttons/toggle-buttons.scss | 75 +++++++++++-------- .../toggle-buttons/toggle-buttons.ts | 26 ++++--- 3 files changed, 80 insertions(+), 55 deletions(-) diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html index 67096b1b8..2fb0d2d7c 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html @@ -1,15 +1,21 @@ -
- +
+
    +
  • + +
    • +
diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss index 20adb353e..aab905c39 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss @@ -4,6 +4,17 @@ .m-toggle-buttons { display: inline-flex; + &__list { + display: inline-flex; + list-style-type: none; + + &, + li { + margin: 0; + padding: 0; + } + } + &__button { position: relative; z-index: 0; @@ -29,71 +40,73 @@ text-align: center; padding: 10px $m-space; - &:not(:disabled) { + &:not(.m--disabled) { cursor: pointer; - &:not(.m--pressed):hover { + &:not([aria-checked="true"]):hover { background-color: $m-color-information; } - &.m--pressed:hover { + &[aria-checked="true"]:hover { background-color: $m-color-interactive-darker; } } - &:disabled { + &.m--disabled { cursor: default; color: $m-color-disabled; background: $m-color-white; border-color: $m-color-disabled; - &.m--pressed { + &[aria-checked="true"] { color: $m-color-white; background: $m-color-disabled; } } - &.m--pressed { + &[aria-checked="true"] { color: $m-color-white; background: $m-color-interactive; } } +} - &.m--is-default { - .m-toggle-buttons__button { - border-radius: 0; +.m-toggle-buttons__list.m--is-default { + .m-toggle-buttons__button { + border-radius: 0; + } - &:not(:nth-last-child(1)) { - border-right: none; - } + >.m--checked+.m--checked .m-toggle-buttons__button { + border-left-color: $m-color-white; + } - &:nth-child(1) { - border-radius: $m-border-radius 0 0 $m-border-radius; - } + > :not(:nth-last-child(1)) .m-toggle-buttons__button { + border-right: none; + } - &:nth-last-child(1) { - border-radius: 0 $m-border-radius $m-border-radius 0; - } + > :nth-child(1) .m-toggle-buttons__button { + border-radius: $m-border-radius 0 0 $m-border-radius; + } - &.m--pressed+.m--pressed { - border-left-color: $m-color-white; - } - } + > :nth-last-child(1) .m-toggle-buttons__button { + border-radius: 0 $m-border-radius $m-border-radius 0; } - &.m--is-rounded { - flex-wrap: wrap; - gap: $m-space-xs 0; +} - .m-toggle-buttons__button { - border-radius: 25px; // magic number - &:not(:last-child) { - margin-right: $m-space-xs; - } - } +.m-toggle-buttons__list.m--is-rounded { + flex-wrap: wrap; + gap: $m-space-xs 0; + + > :not(:last-child) { + margin-right: $m-space-xs; + } + + .m-toggle-buttons__button { + border-radius: 25px; // magic number } } diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts index f45cb2d71..78483b525 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts @@ -22,6 +22,9 @@ export class MToggleButtons extends Vue { @Prop({ default: () => [] }) public readonly buttons: MToggleButton[]; + @Prop({ default: '' }) + public readonly ariaLabel?: string; + @Prop({ default: true }) public readonly multiple: boolean; @@ -36,24 +39,27 @@ export class MToggleButtons extends Vue { }) public readonly skin: MToggleButtonSkin; + public get skinButtons(): { [key: string]: boolean } { + return { + 'm--is-default': this.skin === MToggleButtonSkin.SQUARED, + 'm--is-rounded': this.skin === MToggleButtonSkin.ROUNDED + }; + } + + @Emit('click') + public emitClick(_button: MToggleButton): void { } + public toggle(button: MToggleButton): void { + if (this.disabled) return; + this.$emit('change', this.buttons.map(b => b.id !== button.id ? this.multiple ? b : { ...b, pressed: false } : { ...b, pressed: !b.pressed } )); - this.onClick({ ...button, pressed: !button.pressed }); + this.emitClick({ ...button, pressed: !button.pressed }); } - @Emit('click') - private onClick(_button: MToggleButton): void { } - - get skinButtons(): { [key: string]: boolean } { - return { - 'm--is-default': this.skin === MToggleButtonSkin.SQUARED, - 'm--is-rounded': this.skin === MToggleButtonSkin.ROUNDED - }; - } } const ToggleButtonsPlugin: PluginObject = { From 42be2652523888d6550ee4b3a38b03ce508cb855 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 15:42:38 -0400 Subject: [PATCH 4/7] maj --- .../toggle-buttons/toggle-buttons.html | 4 +- .../toggle-buttons/toggle-buttons.spec.ts | 147 ------------------ .../toggle-buttons/toggle-buttons.ts | 2 +- .../toggle-buttons/toggle-buttons.stories.ts | 14 +- 4 files changed, 10 insertions(+), 157 deletions(-) delete mode 100644 packages/modul-components/src/components/toggle-buttons/toggle-buttons.spec.ts diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html index 2fb0d2d7c..23f8c1f74 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html @@ -1,8 +1,8 @@
+ class="m-toggle-buttons" + :aria-label="ariaLabel || null">
  • ; -let localVue: VueConstructor; - -let buttons: MToggleButton[] = []; -let multiple: boolean; -let disabled: boolean; - -const BTN_A: MToggleButton = { id: 'a', title: 'A' }; -const BTN_B: MToggleButton = { id: 'b', title: 'B' }; -const BTN_C: MToggleButton = { id: 'c', title: 'C' }; -const BTN_D: MToggleButton = { id: 'd', title: 'D' }; -const BTN_E: MToggleButton = { id: 'e', title: 'E' }; - -const CLASS_BTN_PRIMARY: string = 'm--is-skin-primary'; -const CLASS_BTN_SECONDARY: string = 'm--is-skin-secondary'; - -const initializeWrapper: () => any = () => { - wrapper = mount(MToggleButtons, { - localVue: localVue, - propsData: { - buttons, - multiple, - disabled - } - }); -}; - -beforeEach(() => { - wrapper = undefined as any; -}); - -describe('MToggleButtons', () => { - beforeEach(() => { - resetModulPlugins(); - localVue = createLocalVue(); - localVue.use(ModulPlugin); - Vue.use(ToggleButtonsPlugin); - }); - - describe(`Given no button`, () => { - - beforeEach(() => { - initializeWrapper(); - }); - - it(`Then no buttons should be displayed`, () => { - expect(wrapper.vm.$refs.toggle).toBeTruthy(); - expect(wrapper.findAll('.m-toggle-buttons__button').length).toEqual(0); - }); - }); - - describe(`Given 5 buttons and multiple selection allow`, () => { - - beforeEach(() => { - buttons = [BTN_A, BTN_B, BTN_C, BTN_D, BTN_E]; - multiple = true; - initializeWrapper(); - }); - - it(`Then 5 buttons should be displayed`, () => { - expect(wrapper.vm.$refs.toggle).toBeTruthy(); - expect(wrapper.findAll('.m-toggle-buttons__button').length).toEqual(5); - }); - - it(`Then no button should be pressed`, () => { - expect(wrapper.findAll('.CLASS_BTN_PRIMARY').length).toEqual(0); - }); - - describe(`When the first button is clicked`, () => { - it(`Should emit a change event and prop 'button' is updated on first button`, () => { - wrapper.findAll('.m-toggle-buttons__button').at(0).trigger('click'); - expect(wrapper.emitted('change')).toEqual([[[{ ...BTN_A, pressed: true }, BTN_B, BTN_C, BTN_D, BTN_E]]]); - }); - }); - - describe(`When second button is clicked`, () => { - beforeEach(() => { - buttons = [{ ...BTN_A, pressed: true }, BTN_B, BTN_C, BTN_D, BTN_E]; - multiple = true; - initializeWrapper(); - }); - it(`Should emit a change event and prop 'buttons' is updated on 2 first buttons`, () => { - wrapper.findAll('.m-toggle-buttons__button').at(1).trigger('click'); - expect(wrapper.emitted('change')).toEqual([[[{ ...BTN_A, pressed: true }, { ...BTN_B, pressed: true }, BTN_C, BTN_D, BTN_E]]]); - }); - }); - }); - - describe(`Given 5 buttons and multiple selection not allow`, () => { - - beforeEach(() => { - buttons = [BTN_A, BTN_B, BTN_C, BTN_D, BTN_E]; - multiple = false; - initializeWrapper(); - }); - - it(`Then 5 buttons should be displayed`, () => { - expect(wrapper.vm.$refs.toggle).toBeTruthy(); - expect(wrapper.findAll('.m-toggle-buttons__button').length).toEqual(5); - }); - - it(`Then no button should be pressed`, () => { - expect(wrapper.findAll('.CLASS_BTN_PRIMARY').length).toEqual(0); - }); - - describe(`When the first button is clicked`, () => { - it(`Should emit a change event and prop 'buttons' is updated on first button`, () => { - wrapper.findAll('.m-toggle-buttons__button').at(0).trigger('click'); - expect(wrapper.emitted('change')).toEqual([[[{ ...BTN_A, pressed: true }, { ...BTN_B, pressed: false }, { ...BTN_C, pressed: false }, { ...BTN_D, pressed: false }, { ...BTN_E, pressed: false }]]]); - }); - }); - - describe(`When second button is clicked`, () => { - beforeEach(() => { - buttons = [{ ...BTN_A, pressed: true }, BTN_B, BTN_C, BTN_D, BTN_E]; - multiple = false; - initializeWrapper(); - }); - it(`Should emit a change event and prop 'button' is updated, first button is unpressed and second button is pressed`, () => { - wrapper.findAll('.m-toggle-buttons__button').at(1).trigger('click'); - expect(wrapper.emitted('change')).toEqual([[[{ ...BTN_A, pressed: false }, { ...BTN_B, pressed: true }, { ...BTN_C, pressed: false }, { ...BTN_D, pressed: false }, { ...BTN_E, pressed: false }]]]); - }); - }); - - }); - - describe(`Given toggle-button disabled`, () => { - - beforeEach(() => { - buttons = [BTN_A, BTN_B]; - multiple = false; - disabled = true; - initializeWrapper(); - }); - - it(`Then buttons should be disabled`, () => { - expect(wrapper.vm.$refs.toggle).toBeTruthy(); - - }); - }); -}); diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts index 78483b525..e0496855d 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts @@ -22,7 +22,7 @@ export class MToggleButtons extends Vue { @Prop({ default: () => [] }) public readonly buttons: MToggleButton[]; - @Prop({ default: '' }) + @Prop({ required: true }) public readonly ariaLabel?: string; @Prop({ default: true }) diff --git a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts index 01b4a2619..551b5c90d 100644 --- a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts +++ b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts @@ -18,9 +18,9 @@ const monthsSingleSelection: MToggleButton[] = [AUGUST, SEPTEMBER, OCTOBER, NOVE storiesOf(`${modulComponentsHierarchyRootSeparator}${TOGGLE_BUTTONS_NAME}`, module) .add('default', () => ({ data: () => ({ - buttons: monthsDefault + buttons: monthsDefault, }), - template: '' + template: '' })) .add('skin rounded', () => ({ props: { @@ -31,26 +31,26 @@ storiesOf(`${modulComponentsHierarchyRootSeparator}${TOGGLE_BUTTONS_NAME}`, modu data: () => ({ buttons: monthsDefault }), - template: '' + template: '' })) .add('multiple selection', () => ({ data: () => ({ buttons: monthsMultipleSelection }), - template: '' + template: '' })) .add('single selection', () => ({ data: () => ({ buttons: monthsSingleSelection, multiple: false }), - template: '' + template: '' })) .add('with slots', () => ({ data: () => ({ buttons: monthsSingleSelection }), - template: ` + template: ` @@ -61,5 +61,5 @@ storiesOf(`${modulComponentsHierarchyRootSeparator}${TOGGLE_BUTTONS_NAME}`, modu buttons: monthsSingleSelection, disabled: true }), - template: '' + template: '' })); From cc7b0fbc29cf2f1f8947f8b0434d88e95a9d74c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 15:45:29 -0400 Subject: [PATCH 5/7] maj --- .../components/toggle-buttons/toggle-buttons.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss index aab905c39..1169e8d43 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.scss @@ -17,28 +17,26 @@ &__button { position: relative; - z-index: 0; transition-property: background-color, border-color, color, outline; transition-duration: $m-transition-duration; transition-timing-function: ease; display: flex; align-items: center; border: 1px solid $m-color-interactive; + padding: 10px $m-space; font-family: inherit; + font-size: inherit; + font-weight: $m-font-weight-semi-bold; + text-align: center; text-decoration: none; appearance: none; color: $m-color-interactive; outline-color: $m-color-interactive-darker; outline-offset: 2px; outline-width: 1px; + background-color: $m-color-white; user-select: none; overflow: hidden; - background-color: $m-color-white; - font-family: inherit; - font-size: inherit; - font-weight: $m-font-weight-semi-bold; - text-align: center; - padding: 10px $m-space; &:not(.m--disabled) { cursor: pointer; From 7409e2a48dfc737e069df09a8d2c76452ab513b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 15:50:13 -0400 Subject: [PATCH 6/7] maj --- .../src/components/toggle-buttons/toggle-buttons.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html index 23f8c1f74..a4d890219 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.html @@ -13,7 +13,8 @@ role="checkbox" :aria-checked="button.pressed ? 'true' : 'false'" :aria-disabled="disabled" - @click="toggle(button)"> + @click="toggle(button)" + @keydown.space="toggle(button)"> {{ button.title }}
From a546ebe3fc17f7869180abc7cb357f51691c0cf7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= Date: Mon, 11 Sep 2023 16:10:54 -0400 Subject: [PATCH 7/7] maj --- .../src/components/toggle-buttons/toggle-buttons.ts | 2 +- .../components/toggle-buttons/toggle-buttons.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts index e0496855d..d96eae591 100644 --- a/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts +++ b/packages/modul-components/src/components/toggle-buttons/toggle-buttons.ts @@ -50,7 +50,7 @@ export class MToggleButtons extends Vue { public emitClick(_button: MToggleButton): void { } public toggle(button: MToggleButton): void { - if (this.disabled) return; + if (this.disabled) { return; } this.$emit('change', this.buttons.map(b => b.id !== button.id ? this.multiple ? b : { ...b, pressed: false } : diff --git a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts index 551b5c90d..9c07b8926 100644 --- a/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts +++ b/src/storybook/src/modul-components/components/toggle-buttons/toggle-buttons.stories.ts @@ -18,7 +18,7 @@ const monthsSingleSelection: MToggleButton[] = [AUGUST, SEPTEMBER, OCTOBER, NOVE storiesOf(`${modulComponentsHierarchyRootSeparator}${TOGGLE_BUTTONS_NAME}`, module) .add('default', () => ({ data: () => ({ - buttons: monthsDefault, + buttons: monthsDefault }), template: '' }))