@gitlab/ui 66.12.0 → 66.13.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.13.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.12.0...v66.13.0) (2023-09-21)
+
+
+### Features
+
+* **GlFormInut, GlFormSelect, GlDatepicker:** Add prop width, deprecate prop size ([6de322c](https://gitlab.com/gitlab-org/gitlab-ui/commit/6de322c20f7fb2f2f7922392da513167f3bd2530))
+
 # [66.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.11.0...v66.12.0) (2023-09-21)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -1,6 +1,6 @@
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
+import { defaultDateFormat, datepickerWidthOptionsMap, datepickerSizeOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
 import GlFormInput from '../form/form_input/form_input';
@@ -173,10 +173,27 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: value => Object.keys(datepickerWidthOptionsMap).includes(value)
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Datepicker
+     */
     size: {
       type: String,
       required: false,
-      default: 'medium',
+      default: null,
       validator: value => Object.keys(datepickerSizeOptionsMap).includes(value)
     }
   },
@@ -211,10 +228,16 @@ var script = {
       return null;
     },
     datepickerClasses() {
-      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.datepickerSize}`];
-    },
-    datepickerSize() {
-      return datepickerSizeOptionsMap[this.size];
+      return ['gl-datepicker', 'd-inline-block', 'gl-w-full', `gl-form-input-${this.computedWidth}`];
+    },
+    computedWidth() {
+      if (this.width) {
+        return this.width;
+        // eslint-disable-next-line no-else-return
+      } else if (this.size) {
+        return datepickerSizeOptionsMap[this.size];
+      }
+      return 'md';
     }
   },
   watch: {

package/dist/components/base/form/form_input/form_input.js

@@ -19,6 +19,23 @@ var script = {
     /**
      * Maximum width of the input
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the input
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -30,21 +47,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-input-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-input-${size}`;
         })];
       }
-      return [`gl-form-input-${this.size}`];
+      return [`gl-form-input-${this.computedWidth}`];
     },
     listeners() {
       var _this = this;

package/dist/components/base/form/form_select/form_select.js

@@ -13,6 +13,23 @@ var script = {
     /**
      * Maximum width of the Select
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: value => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+        return widths.every(width => Object.values(formInputSizes).includes(width));
+      }
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Select
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -24,21 +41,24 @@ var script = {
     }
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
-      if (isObject(this.size)) {
+      if (isObject(this.computedWidth)) {
         const {
           default: defaultSize,
           ...nonDefaultSizes
-        } = this.size;
+        } = this.computedWidth;
         return [...(defaultSize ? [`gl-form-select-${defaultSize}`] : []), ...Object.entries(nonDefaultSizes).map(_ref => {
           let [breakpoint, size] = _ref;
           return `gl-${breakpoint}-form-select-${size}`;
         })];
       }
-      return [`gl-form-select-${this.size}`];
+      return [`gl-form-select-${this.computedWidth}`];
     }
   }
 };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Sep 2023 06:33:18 GMT
+ * Generated on Thu, 21 Sep 2023 07:11:31 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Sep 2023 06:33:18 GMT
+ * Generated on Thu, 21 Sep 2023 07:11:32 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Sep 2023 06:33:18 GMT
+ * Generated on Thu, 21 Sep 2023 07:11:32 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Sep 2023 06:33:18 GMT
+ * Generated on Thu, 21 Sep 2023 07:11:31 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 21 Sep 2023 06:33:18 GMT
+// Generated on Thu, 21 Sep 2023 07:11:32 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 21 Sep 2023 06:33:18 GMT
+// Generated on Thu, 21 Sep 2023 07:11:32 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/utils/constants.js

@@ -123,6 +123,12 @@ const datepickerSizeOptionsMap = {
   small: 'sm',
   medium: 'md'
 };
+const datepickerWidthOptionsMap = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl'
+};
 
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 const iconSizeOptions = glIconSizes.split(' ').map(Number);
@@ -267,4 +273,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerSizeOptionsMap, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.12.0",
+  "version": "66.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/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);
+  });
 });

package/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: `
     <div class="gl-display-flex gl-flex-direction-column gl-gap-3">
-      <gl-form-group label="Size: sm">
-        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" size="small" />
+      <gl-form-group label="Width: sm">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" width="sm" />
       </gl-form-group>
-      <gl-form-group label="Size: md (default)">
-        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" size="medium" />
+      <gl-form-group label="Width: md (default)">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" width="md" />
+      </gl-form-group>
+      <gl-form-group label="Width: lg">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" width="lg" />
+      </gl-form-group>
+      <gl-form-group label="Width: xl">
+        <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" width="xl" />
       </gl-form-group>
     </div>
   `,
@@ -125,5 +133,13 @@ export default {
     maxDate: {
       control: 'date',
     },
+    width: {
+      options: datepickerWidthOptionsMap,
+      control: 'select',
+    },
+    size: {
+      options: datepickerSizeOptionsMap,
+      control: 'select',
+    },
   },
 };

package/src/components/base/datepicker/datepicker.vue

@@ -2,7 +2,11 @@
 <script>
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import { defaultDateFormat, datepickerSizeOptionsMap } from '../../../utils/constants';
+import {
+  defaultDateFormat,
+  datepickerWidthOptionsMap,
+  datepickerSizeOptionsMap,
+} from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
@@ -172,10 +176,27 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Maximum width of the Datepicker
+     */
+    width: {
+      type: String,
+      required: false,
+      default: null,
+      validator: (value) => Object.keys(datepickerWidthOptionsMap).includes(value),
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Datepicker
+     */
     size: {
       type: String,
       required: false,
-      default: 'medium',
+      default: null,
       validator: (value) => Object.keys(datepickerSizeOptionsMap).includes(value),
     },
   },
@@ -216,11 +237,18 @@ export default {
         'gl-datepicker',
         'd-inline-block',
         'gl-w-full',
-        `gl-form-input-${this.datepickerSize}`,
+        `gl-form-input-${this.computedWidth}`,
       ];
     },
-    datepickerSize() {
-      return datepickerSizeOptionsMap[this.size];
+    computedWidth() {
+      if (this.width) {
+        return this.width;
+        // eslint-disable-next-line no-else-return
+      } else if (this.size) {
+        return datepickerSizeOptionsMap[this.size];
+      }
+
+      return 'md';
     },
   },
   watch: {

package/src/components/base/form/form_input/form_input.spec.js

@@ -66,6 +66,58 @@ describe('GlFormInput', () => {
     });
   });
 
+  describe('width prop', () => {
+    describe('when number is passed', () => {
+      // Exclude the default null value
+      const widths = Object.values(formInputSizes).filter(Boolean);
+
+      it.each(widths)('adds correct class for width %s', (width) => {
+        createComponent({ width });
+
+        expect(wrapper.classes()).toEqual(['gl-form-input', `gl-form-input-${width}`]);
+      });
+
+      it('does not add a width class if not given the width prop', () => {
+        createComponent();
+
+        expect(wrapper.classes()).toEqual(['gl-form-input']);
+      });
+
+      it('does not add a width class if passed null', () => {
+        createComponent({ width: null });
+
+        expect(wrapper.classes()).toEqual(['gl-form-input']);
+      });
+    });
+
+    describe('when object is passed', () => {
+      describe('when `default` key is provided', () => {
+        it('adds responsive CSS classes and base class', () => {
+          createComponent({ width: { default: 'md', md: 'lg', lg: 'xl' } });
+
+          expect(wrapper.classes()).toEqual([
+            'gl-form-input',
+            'gl-form-input-md',
+            'gl-md-form-input-lg',
+            'gl-lg-form-input-xl',
+          ]);
+        });
+      });
+
+      describe('when `default` key is not provided', () => {
+        it('adds responsive CSS classes', () => {
+          createComponent({ width: { md: 'lg', lg: 'xl' } });
+
+          expect(wrapper.classes()).toEqual([
+            'gl-form-input',
+            'gl-md-form-input-lg',
+            'gl-lg-form-input-xl',
+          ]);
+        });
+      });
+    });
+  });
+
   describe('v-model', () => {
     beforeEach(() => {
       createComponent({}, mount);

package/src/components/base/form/form_input/form_input.stories.js

@@ -8,15 +8,18 @@ const template = `
     :readonly="readonly"
     :disabled="disabled"
     :value="value"
+    :width="width"
     :size="size"
   />`;
 
 const generateProps = ({
+  width = GlFormInput.props.size.default,
   size = GlFormInput.props.size.default,
   value = '',
   disabled = false,
   readonly = false,
 } = {}) => ({
+  width,
   size,
   value,
   disabled,
@@ -49,6 +52,7 @@ export const Sizes = (args, { argTypes }) => ({
         <gl-form-input
           v-for="(size, name) in formInputSizes"
           :key="size"
+          :width="width"
           :size="size"
           :value="name"
         />
@@ -63,11 +67,13 @@ export const ResponsiveSizes = (args, { argTypes }) => ({
   template: `
       <div>
         <gl-form-input
+          :width="{ default: 'md', md: 'lg', lg: 'xl' }"
           :size="{ default: 'md', md: 'lg', lg: 'xl' }"
           value="With \`default\` key"
         />
         <gl-form-input
           class="gl-mt-4"
+          :width="{ md: 'lg', lg: 'xl' }"
           :size="{ md: 'lg', lg: 'xl' }"
           value="Without \`default\` key"
         />
@@ -88,6 +94,10 @@ export default {
     },
   },
   argTypes: {
+    width: {
+      options: formInputSizes,
+      control: 'select',
+    },
     size: {
       options: formInputSizes,
       control: 'select',

package/src/components/base/form/form_input/form_input.vue

@@ -21,6 +21,24 @@ export default {
     /**
      * Maximum width of the input
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: (value) => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+
+        return widths.every((width) => Object.values(formInputSizes).includes(width));
+      },
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the input
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -33,13 +51,16 @@ export default {
     },
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
 
-      if (isObject(this.size)) {
-        const { default: defaultSize, ...nonDefaultSizes } = this.size;
+      if (isObject(this.computedWidth)) {
+        const { default: defaultSize, ...nonDefaultSizes } = this.computedWidth;
 
         return [
           ...(defaultSize ? [`gl-form-input-${defaultSize}`] : []),
@@ -49,7 +70,7 @@ export default {
         ];
       }
 
-      return [`gl-form-input-${this.size}`];
+      return [`gl-form-input-${this.computedWidth}`];
     },
     listeners() {
       return {

package/src/components/base/form/form_select/form_select.spec.js

@@ -56,6 +56,31 @@ describe('GlFormSelect', () => {
     });
   });
 
+  describe('width prop', () => {
+    // Exclude the default null value
+    const nonNullSizes = excludeDefaultNull(formInputSizes);
+
+    it.each(nonNullSizes)('adds correct class for width %s', (width) => {
+      createComponent({ width });
+
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, `gl-form-select-${width}`].sort()
+      );
+    });
+
+    it('does not add a width class if not given the width prop', () => {
+      createComponent();
+
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
+    });
+
+    it('does not add a width class if passed null', () => {
+      createComponent({ width: null });
+
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
+    });
+  });
+
   describe('v-model', () => {
     it('should select an option element and update the v-model bound data', async () => {
       createComponent({ options: formSelectOptions });

package/src/components/base/form/form_select/form_select.stories.js

@@ -10,6 +10,7 @@ const data = () => ({
 const template = `
 <gl-form-select
   v-model="selected"
+  :width="width"
   :size="size"
   :disabled="disabled"
   :state="state"
@@ -20,6 +21,7 @@ const template = `
 `;
 
 const generateProps = ({
+  width = null,
   size = null,
   state = null,
   disabled = false,
@@ -27,6 +29,7 @@ const generateProps = ({
   selectSize = 1,
   options = formSelectOptions,
 } = {}) => ({
+  width,
   size,
   disabled,
   state,
@@ -89,6 +92,10 @@ export default {
     },
   },
   argTypes: {
+    width: {
+      options: formInputSizes,
+      control: 'select',
+    },
     size: {
       options: formInputSizes,
       control: 'select',

package/src/components/base/form/form_select/form_select.vue

@@ -13,6 +13,24 @@ export default {
     /**
      * Maximum width of the Select
      */
+    width: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: (value) => {
+        const widths = isObject(value) ? Object.values(value) : [value];
+
+        return widths.every((width) => Object.values(formInputSizes).includes(width));
+      },
+    },
+    /**
+     * ⚠️ DEPRECATED:
+     *
+     * Will be replaced by the
+     * property width
+     *
+     * Maximum width of the Select
+     */
     size: {
       type: [String, Object],
       required: false,
@@ -25,13 +43,16 @@ export default {
     },
   },
   computed: {
+    computedWidth() {
+      return this.width ? this.width : this.size;
+    },
     cssClasses() {
-      if (this.size === null) {
+      if (this.computedWidth === null) {
         return [];
       }
 
-      if (isObject(this.size)) {
-        const { default: defaultSize, ...nonDefaultSizes } = this.size;
+      if (isObject(this.computedWidth)) {
+        const { default: defaultSize, ...nonDefaultSizes } = this.computedWidth;
 
         return [
           ...(defaultSize ? [`gl-form-select-${defaultSize}`] : []),
@@ -41,7 +62,7 @@ export default {
         ];
       }
 
-      return [`gl-form-select-${this.size}`];
+      return [`gl-form-select-${this.computedWidth}`];
     },
   },
 };

package/src/utils/constants.js

@@ -151,6 +151,13 @@ export const datepickerSizeOptionsMap = {
   medium: 'md',
 };
 
+export const datepickerWidthOptionsMap = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+};
+
 // size options all have corresponding styles (e.g. .s12 defined in icon.scss)
 export const iconSizeOptions = glIconSizesVariable.split(' ').map(Number);