@gitlab/ui 43.10.0 → 43.11.0

package/dist/utils/constants.js

@@ -43,11 +43,6 @@ const variantCssColorMap = {
   danger: 'gl-text-red-500'
 };
 const targetOptions = ['_self', '_blank', '_parent', '_top', null];
-const sizeOptions = {
-  default: null,
-  sm: 'sm',
-  lg: 'lg'
-};
 const labelSizeOptions = {
   default: null,
   sm: 'sm'
@@ -200,8 +195,7 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
-const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions); // Datetime constants
+const variantOptionsWithNoDefault = appendDefaultOption(variantOptions); // Datetime constants
 
 const defaultDateFormat = 'YYYY-MM-DD';
 const bannerVariants = ['promotion', 'introduction'];
@@ -250,4 +244,4 @@ const loadingIconSizes = {
   'xl (64x64)': 'xl'
 };
 
-export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, sizeOptions, sizeOptionsWithNoDefault, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonSizeOptionsMap, buttonVariantOptions, colorThemes, columnOptions, defaultDateFormat, drawerVariants, dropdownVariantOptions, focusableTags, formInputSizes, formStateOptions, glThemes, iconSizeOptions, keyboard, labelColorOptions, labelSizeOptions, loadingIconSizes, 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": "43.10.0",
+  "version": "43.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -54,4 +54,21 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     }
   }
 }
+
+@each $name, $size in $gl-form-input-sizes {
+  .gl-form-select-#{$name} {
+    max-width: $size;
+  }
+
+  @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
+    @if $breakpointName != xs {
+      .gl-#{$breakpointName}-form-select-#{$name} {
+        @include gl-media-breakpoint-up($breakpointName) {
+          max-width: $size;
+        }
+      }
+    }
+  }
+}
+
 /* stylelint-enable property-no-vendor-prefix */

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { sizeOptions, formStateOptions } from '../../../../utils/constants';
+import { formStateOptions, formInputSizes } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import GlFormSelect from './form_select.vue';
 
@@ -33,13 +33,13 @@ describe('GlFormSelect', () => {
 
   describe('size prop', () => {
     // Exclude the default null value
-    const nonNullSizes = excludeDefaultNull(sizeOptions);
+    const nonNullSizes = excludeDefaultNull(formInputSizes);
 
     it.each(nonNullSizes)('adds correct class for size %s', (size) => {
       createComponent({ size });
 
       expect(wrapper.classes().sort()).toEqual(
-        [...DEFAULT_SELECT_CLASSES, `custom-select-${size}`].sort()
+        [...DEFAULT_SELECT_CLASSES, `gl-form-select-${size}`].sort()
       );
     });
 

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

@@ -1,5 +1,5 @@
 import { GlFormSelect } from '../../../../index';
-import { sizeOptions, formStateOptions } from '../../../../utils/constants';
+import { formStateOptions, formInputSizes } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
 
@@ -90,7 +90,7 @@ export default {
   },
   argTypes: {
     size: {
-      options: sizeOptions,
+      options: formInputSizes,
       control: 'select',
     },
     state: {

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

@@ -1,15 +1,52 @@
 <script>
 import { BFormSelect } from 'bootstrap-vue';
+import { isObject } from 'lodash';
+import { formInputSizes } from '../../../../utils/constants';
 
 export default {
   components: {
     BFormSelect,
   },
   inheritAttrs: false,
+  props: {
+    /**
+     * Maximum width of the Select
+     */
+    size: {
+      type: [String, Object],
+      required: false,
+      default: null,
+      validator: (value) => {
+        const sizes = isObject(value) ? Object.values(value) : [value];
+
+        return sizes.every((size) => Object.values(formInputSizes).includes(size));
+      },
+    },
+  },
+  computed: {
+    cssClasses() {
+      if (this.size === null) {
+        return [];
+      }
+
+      if (isObject(this.size)) {
+        const { default: defaultSize, ...nonDefaultSizes } = this.size;
+
+        return [
+          ...(defaultSize ? [`gl-form-select-${defaultSize}`] : []),
+          ...Object.entries(nonDefaultSizes).map(
+            ([breakpoint, size]) => `gl-${breakpoint}-form-select-${size}`
+          ),
+        ];
+      }
+
+      return [`gl-form-select-${this.size}`];
+    },
+  },
 };
 </script>
 <template>
-  <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
+  <b-form-select class="gl-form-select" v-bind="$attrs" :class="cssClasses" v-on="$listeners">
     <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
     <template v-for="slot in Object.keys($slots)" #[slot]>
       <slot :name="slot"></slot>

package/src/utils/constants.js

@@ -48,12 +48,6 @@ export const variantCssColorMap = {
 
 export const targetOptions = ['_self', '_blank', '_parent', '_top', null];
 
-export const sizeOptions = {
-  default: null,
-  sm: 'sm',
-  lg: 'lg',
-};
-
 export const labelSizeOptions = {
   default: null,
   sm: 'sm',
@@ -234,7 +228,6 @@ export const tokenVariants = ['default', 'search-type', 'search-value'];
 export const resizeDebounceTime = 200;
 
 export const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
-export const sizeOptionsWithNoDefault = appendDefaultOption(sizeOptions);
 
 // Datetime constants
 export const defaultDateFormat = 'YYYY-MM-DD';