From 6de322c20f7fb2f2f7922392da513167f3bd2530 Mon Sep 17 00:00:00 2001 From: Sascha Eggenberger Date: Mon, 7 Aug 2023 14:38:26 +0200 Subject: [PATCH 1/2] feat(GlFormInut, GlFormSelect, GlDatepicker): Add prop width, deprecate prop size Deprecates the property size and replaces it with a new prop called width. --- .../base/datepicker/datepicker.spec.js | 17 ++++++ .../base/datepicker/datepicker.stories.js | 24 +++++++-- src/components/base/datepicker/datepicker.vue | 38 ++++++++++++-- .../base/form/form_input/form_input.spec.js | 52 +++++++++++++++++++ .../form/form_input/form_input.stories.js | 10 ++++ .../base/form/form_input/form_input.vue | 29 +++++++++-- .../base/form/form_select/form_select.spec.js | 25 +++++++++ .../form/form_select/form_select.stories.js | 7 +++ .../base/form/form_select/form_select.vue | 29 +++++++++-- src/utils/constants.js | 7 +++ 10 files changed, 221 insertions(+), 17 deletions(-) diff --git a/src/components/base/datepicker/datepicker.spec.js b/src/components/base/datepicker/datepicker.spec.js index 0c0f84156f..22665d051b 100644 --- a/src/components/base/datepicker/datepicker.spec.js +++ b/src/components/base/datepicker/datepicker.spec.js @@ -426,4 +426,21 @@ describe('datepicker component', () => { expect(wrapper.classes()).toContain(expectedClass); }); + + it.each` + width | expectedClass + ${undefined} | ${'gl-form-input-md'} + ${'sm'} | ${'gl-form-input-sm'} + ${'md'} | ${'gl-form-input-md'} + ${'lg'} | ${'gl-form-input-lg'} + ${'xl'} | ${'gl-form-input-xl'} + `('applies $expectedClass class when width is $width', ({ width, expectedClass }) => { + const wrapper = mountWithOptions({ + propsData: { + width, + }, + }); + + expect(wrapper.classes()).toContain(expectedClass); + }); }); diff --git a/src/components/base/datepicker/datepicker.stories.js b/src/components/base/datepicker/datepicker.stories.js index 4115166039..3bde28d256 100644 --- a/src/components/base/datepicker/datepicker.stories.js +++ b/src/components/base/datepicker/datepicker.stories.js @@ -1,4 +1,5 @@ import GlFormGroup from '../form/form_group/form_group.vue'; +import { datepickerWidthOptionsMap, datepickerSizeOptionsMap } from '../../../utils/constants'; import { disableControls } from '../../../utils/stories_utils'; import { useFakeDate } from '../../../utils/use_fake_date'; import { makeContainer } from '../../../utils/story_decorators/container'; @@ -69,16 +70,23 @@ export const DifferentSizes = (_args, { argTypes }) => ({ props: Object.keys(argTypes), data() { return { + datepickerWidthOptionsMap, pickerValue: defaultDate, }; }, template: `
- - + + - - + + + + + + + +
`, @@ -125,5 +133,13 @@ export default { maxDate: { control: 'date', }, + width: { + options: datepickerWidthOptionsMap, + control: 'select', + }, + size: { + options: datepickerSizeOptionsMap, + control: 'select', + }, }, }; diff --git a/src/components/base/datepicker/datepicker.vue b/src/components/base/datepicker/datepicker.vue index d5dc8d0382..8bec57855b 100644 --- a/src/components/base/datepicker/datepicker.vue +++ b/src/components/base/datepicker/datepicker.vue @@ -2,7 +2,11 @@