@gitlab/ui 70.0.1 → 71.1.0

package/dist/utils/constants.js

@@ -117,10 +117,6 @@ const buttonSizeOptions = {
   small: 'sm',
   medium: 'md'
 };
-const datepickerSizeOptionsMap = {
-  small: 'sm',
-  medium: 'md'
-};
 const datepickerWidthOptionsMap = {
   sm: 'sm',
   md: 'md',
@@ -242,7 +238,7 @@ const keyboard = {
   tab: 'Tab'
 };
 const truncateOptions = POSITION;
-const formInputSizes = {
+const formInputWidths = {
   xs: 'xs',
   sm: 'sm',
   md: 'md',
@@ -271,4 +267,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, 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 };
+export { COMMA, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, 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": "70.0.1",
+  "version": "71.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
     "storybook-static": "yarn storybook-prep && storybook build -c .storybook -o storybook",
     "pretest:unit": "yarn build-tokens",
     "test": "run-s test:unit test:visual",
-    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:a11y'",
+    "test:integration": "NODE_ENV=test start-server-and-test start http://${STORYBOOK_HOST:-localhost}:9001/iframe.html 'yarn cy:run && yarn cy:edge && yarn cy:a11y'",
     "test:unit": "NODE_ENV=test jest --testPathIgnorePatterns storyshots.spec.js",
     "test:unit:watch": "yarn test:unit --watch",
     "test:unit:debug": "NODE_ENV=test node --inspect node_modules/.bin/jest --testPathIgnorePatterns storyshot.spec.js --watch --runInBand",

package/src/components/base/datepicker/datepicker.spec.js

@@ -412,21 +412,6 @@ describe('datepicker component', () => {
     expect(config.parse(dateString)).toEqual(parsedDate);
   });
 
-  it.each`
-    size         | expectedClass
-    ${undefined} | ${'gl-form-input-md'}
-    ${'small'}   | ${'gl-form-input-sm'}
-    ${'medium'}  | ${'gl-form-input-md'}
-  `('applies $expectedClass class when size is $size', ({ size, expectedClass }) => {
-    const wrapper = mountWithOptions({
-      propsData: {
-        size,
-      },
-    });
-
-    expect(wrapper.classes()).toContain(expectedClass);
-  });
-
   it.each`
     width        | expectedClass
     ${undefined} | ${'gl-form-input-md'}

package/src/components/base/datepicker/datepicker.stories.js

@@ -1,5 +1,5 @@
 import GlFormGroup from '../form/form_group/form_group.vue';
-import { datepickerWidthOptionsMap, datepickerSizeOptionsMap } from '../../../utils/constants';
+import { datepickerWidthOptionsMap } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
 import { useFakeDate } from '../../../utils/use_fake_date';
 import { makeContainer } from '../../../utils/story_decorators/container';
@@ -65,7 +65,7 @@ export const WithClearButton = (_args, { argTypes }) => ({
 });
 WithClearButton.args = generateProps();
 
-export const DifferentSizes = (_args, { argTypes }) => ({
+export const Widths = (_args, { argTypes }) => ({
   ...defaults,
   props: Object.keys(argTypes),
   data() {
@@ -91,7 +91,7 @@ export const DifferentSizes = (_args, { argTypes }) => ({
     </div>
   `,
 });
-DifferentSizes.args = generateProps();
+Widths.args = generateProps();
 
 export default {
   title: 'base/datepicker',
@@ -137,9 +137,5 @@ export default {
       options: datepickerWidthOptionsMap,
       control: 'select',
     },
-    size: {
-      options: datepickerSizeOptionsMap,
-      control: 'select',
-    },
   },
 };

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

@@ -2,11 +2,7 @@
 <script>
 import isString from 'lodash/isString';
 import Pikaday from 'pikaday';
-import {
-  defaultDateFormat,
-  datepickerWidthOptionsMap,
-  datepickerSizeOptionsMap,
-} from '../../../utils/constants';
+import { defaultDateFormat, datepickerWidthOptionsMap } from '../../../utils/constants';
 import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
@@ -185,20 +181,6 @@ export default {
       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: null,
-      validator: (value) => Object.keys(datepickerSizeOptionsMap).includes(value),
-    },
   },
   data() {
     return {
@@ -243,9 +225,6 @@ export default {
     computedWidth() {
       if (this.width) {
         return this.width;
-        // eslint-disable-next-line no-else-return
-      } else if (this.size) {
-        return datepickerSizeOptionsMap[this.size];
       }
 
       return 'md';

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

@@ -1,5 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import { formInputSizes } from '../../../../utils/constants';
+import { formInputWidths } from '../../../../utils/constants';
 import GlFormInput from './form_input.vue';
 
 const modelEvent = GlFormInput.model.event;
@@ -14,62 +14,10 @@ describe('GlFormInput', () => {
     });
   };
 
-  describe('size prop', () => {
-    describe('when number is passed', () => {
-      // Exclude the default null value
-      const sizes = Object.values(formInputSizes).filter(Boolean);
-
-      it.each(sizes)('adds correct class for size %s', (size) => {
-        createComponent({ size });
-
-        expect(wrapper.classes()).toEqual(['gl-form-input', `gl-form-input-${size}`]);
-      });
-
-      it('does not add a size class if not given the size prop', () => {
-        createComponent();
-
-        expect(wrapper.classes()).toEqual(['gl-form-input']);
-      });
-
-      it('does not add a size class if passed null', () => {
-        createComponent({ size: 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({ size: { 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({ size: { md: 'lg', lg: 'xl' } });
-
-          expect(wrapper.classes()).toEqual([
-            'gl-form-input',
-            'gl-md-form-input-lg',
-            'gl-lg-form-input-xl',
-          ]);
-        });
-      });
-    });
-  });
-
   describe('width prop', () => {
     describe('when number is passed', () => {
       // Exclude the default null value
-      const widths = Object.values(formInputSizes).filter(Boolean);
+      const widths = Object.values(formInputWidths).filter(Boolean);
 
       it.each(widths)('adds correct class for width %s', (width) => {
         createComponent({ width });

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

@@ -1,4 +1,4 @@
-import { formInputSizes } from '../../../../utils/constants';
+import { formInputWidths } from '../../../../utils/constants';
 import GlFormInput from './form_input.vue';
 import readme from './form_input.md';
 
@@ -9,18 +9,15 @@ const template = `
     :disabled="disabled"
     :value="value"
     :width="width"
-    :size="size"
   />`;
 
 const generateProps = ({
-  width = GlFormInput.props.size.default,
-  size = GlFormInput.props.size.default,
+  width = GlFormInput.props.width.default,
   value = '',
   disabled = false,
   readonly = false,
 } = {}) => ({
   width,
-  size,
   value,
   disabled,
   readonly,
@@ -41,46 +38,44 @@ Disabled.args = generateProps({ value: 'some text', disabled: true });
 export const Readonly = Template.bind({});
 Readonly.args = generateProps({ value: 'readonly text', readonly: true });
 
-export const Sizes = (args, { argTypes }) => ({
+export const Widths = (args, { argTypes }) => ({
   components: { GlFormInput },
   props: Object.keys(argTypes),
   data: () => ({
-    formInputSizes,
+    formInputWidths,
   }),
   template: `
       <div>
         <gl-form-input
-          v-for="(size, name) in formInputSizes"
-          :key="size"
+          v-for="(width, name) in formInputWidths"
+          :key="width"
           :width="width"
-          :size="size"
           :value="name"
+          class="gl-mb-4"
         />
       </div>
     `,
 });
-Sizes.args = {};
+Widths.args = {};
 
-export const ResponsiveSizes = (args, { argTypes }) => ({
+export const ResponsiveWidths = (args, { argTypes }) => ({
   components: { GlFormInput },
   props: Object.keys(argTypes),
   template: `
       <div>
         <gl-form-input
           :width="{ default: 'md', md: 'lg', lg: 'xl' }"
-          :size="{ default: 'md', md: 'lg', lg: 'xl' }"
           value="With \`default\` key"
+          class="gl-mb-4"
         />
         <gl-form-input
-          class="gl-mt-4"
           :width="{ md: 'lg', lg: 'xl' }"
-          :size="{ md: 'lg', lg: 'xl' }"
           value="Without \`default\` key"
         />
       </div>
     `,
 });
-ResponsiveSizes.args = {};
+ResponsiveWidths.args = {};
 
 export default {
   title: 'base/form/form-input',
@@ -95,11 +90,7 @@ export default {
   },
   argTypes: {
     width: {
-      options: formInputSizes,
-      control: 'select',
-    },
-    size: {
-      options: formInputSizes,
+      options: formInputWidths,
       control: 'select',
     },
   },

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

@@ -2,7 +2,7 @@
 import isObject from 'lodash/isObject';
 import { BFormInput } from 'bootstrap-vue';
 
-import { formInputSizes } from '../../../../utils/constants';
+import { formInputWidths } from '../../../../utils/constants';
 
 const MODEL_PROP = 'value';
 const MODEL_EVENT = 'input';
@@ -28,49 +28,28 @@ export default {
       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,
-      default: null,
-      validator: (value) => {
-        const sizes = isObject(value) ? Object.values(value) : [value];
-
-        return sizes.every((size) => Object.values(formInputSizes).includes(size));
+        return widths.every((width) => Object.values(formInputWidths).includes(width));
       },
     },
   },
   computed: {
-    computedWidth() {
-      return this.width ? this.width : this.size;
-    },
     cssClasses() {
-      if (this.computedWidth === null) {
+      if (this.width === null) {
         return [];
       }
 
-      if (isObject(this.computedWidth)) {
-        const { default: defaultSize, ...nonDefaultSizes } = this.computedWidth;
+      if (isObject(this.width)) {
+        const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          ...(defaultSize ? [`gl-form-input-${defaultSize}`] : []),
-          ...Object.entries(nonDefaultSizes).map(
-            ([breakpoint, size]) => `gl-${breakpoint}-form-input-${size}`
+          ...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []),
+          ...Object.entries(nonDefaultWidths).map(
+            ([breakpoint, width]) => `gl-${breakpoint}-form-input-${width}`
           ),
         ];
       }
 
-      return [`gl-form-input-${this.computedWidth}`];
+      return [`gl-form-input-${this.width}`];
     },
     listeners() {
       return {

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

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { formStateOptions, formInputSizes } from '../../../../utils/constants';
+import { formStateOptions, formInputWidths } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import GlFormSelect from './form_select.vue';
 
@@ -31,36 +31,11 @@ describe('GlFormSelect', () => {
     });
   });
 
-  describe('size prop', () => {
-    // Exclude the default null value
-    const nonNullSizes = excludeDefaultNull(formInputSizes);
-
-    it.each(nonNullSizes)('adds correct class for size %s', (size) => {
-      createComponent({ size });
-
-      expect(wrapper.classes().sort()).toEqual(
-        [...DEFAULT_SELECT_CLASSES, `gl-form-select-${size}`].sort()
-      );
-    });
-
-    it('does not add a size class if not given the size prop', () => {
-      createComponent();
-
-      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
-    });
-
-    it('does not add a size class if passed null', () => {
-      createComponent({ size: null });
-
-      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
-    });
-  });
-
   describe('width prop', () => {
     // Exclude the default null value
-    const nonNullSizes = excludeDefaultNull(formInputSizes);
+    const nonNullWidths = excludeDefaultNull(formInputWidths);
 
-    it.each(nonNullSizes)('adds correct class for width %s', (width) => {
+    it.each(nonNullWidths)('adds correct class for width %s', (width) => {
       createComponent({ width });
 
       expect(wrapper.classes().sort()).toEqual(

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

@@ -1,4 +1,4 @@
-import { formStateOptions, formInputSizes } from '../../../../utils/constants';
+import { formStateOptions, formInputWidths } from '../../../../utils/constants';
 import GlFormSelect from './form_select.vue';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
@@ -11,7 +11,6 @@ const template = `
 <gl-form-select
   v-model="selected"
   :width="width"
-  :size="size"
   :disabled="disabled"
   :state="state"
   :multiple="multiple"
@@ -22,7 +21,6 @@ const template = `
 
 const generateProps = ({
   width = null,
-  size = null,
   state = null,
   disabled = false,
   multiple = false,
@@ -30,7 +28,6 @@ const generateProps = ({
   options = formSelectOptions,
 } = {}) => ({
   width,
-  size,
   disabled,
   state,
   multiple,
@@ -80,6 +77,27 @@ WithTruncation.args = generateProps({
   ],
 });
 
+export const Widths = (args, { argTypes }) => ({
+  components: { GlFormSelect },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      formInputWidths,
+    };
+  },
+  template: `
+      <div>
+        <div v-for="(width, name) in formInputWidths" :key="width" class="gl-mb-4">
+          <gl-form-select
+            v-model="name"
+            :width="width"
+            :options="[{ value: name, text: name }]">
+          </gl-form-select>
+        </div>
+      </div>`,
+});
+Widths.args = generateProps();
+
 export default {
   title: 'base/form/form-select',
   component: GlFormSelect,
@@ -93,11 +111,7 @@ export default {
   },
   argTypes: {
     width: {
-      options: formInputSizes,
-      control: 'select',
-    },
-    size: {
-      options: formInputSizes,
+      options: formInputWidths,
       control: 'select',
     },
     state: {

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

@@ -1,7 +1,7 @@
 <script>
 import { BFormSelect } from 'bootstrap-vue';
 import isObject from 'lodash/isObject';
-import { formInputSizes } from '../../../../utils/constants';
+import { formInputWidths } from '../../../../utils/constants';
 
 export default {
   name: 'GlFormSelect',
@@ -20,49 +20,28 @@ export default {
       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,
-      default: null,
-      validator: (value) => {
-        const sizes = isObject(value) ? Object.values(value) : [value];
-
-        return sizes.every((size) => Object.values(formInputSizes).includes(size));
+        return widths.every((width) => Object.values(formInputWidths).includes(width));
       },
     },
   },
   computed: {
-    computedWidth() {
-      return this.width ? this.width : this.size;
-    },
     cssClasses() {
-      if (this.computedWidth === null) {
+      if (this.width === null) {
         return [];
       }
 
-      if (isObject(this.computedWidth)) {
-        const { default: defaultSize, ...nonDefaultSizes } = this.computedWidth;
+      if (isObject(this.width)) {
+        const { default: defaultWidth, ...nonDefaultWidths } = this.width;
 
         return [
-          ...(defaultSize ? [`gl-form-select-${defaultSize}`] : []),
-          ...Object.entries(nonDefaultSizes).map(
-            ([breakpoint, size]) => `gl-${breakpoint}-form-select-${size}`
+          ...(defaultWidth ? [`gl-form-select-${defaultWidth}`] : []),
+          ...Object.entries(nonDefaultWidths).map(
+            ([breakpoint, width]) => `gl-${breakpoint}-form-select-${width}`
           ),
         ];
       }
 
-      return [`gl-form-select-${this.computedWidth}`];
+      return [`gl-form-select-${this.width}`];
     },
   },
 };

package/src/scss/utilities.scss

@@ -8361,6 +8361,48 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
 .gl-text-overflow-ellipsis\! {
   text-overflow: ellipsis !important;
 }
+.gl-line-clamp-1 {
+  white-space: normal;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-1\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 1 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
+.gl-line-clamp-2 {
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-2\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
+.gl-line-clamp-3 {
+  white-space: normal;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+.gl-line-clamp-3\! {
+  white-space: normal !important;
+  -webkit-line-clamp: 3 !important;
+  -webkit-box-orient: vertical !important;
+  display: -webkit-box !important;
+  overflow: hidden !important;
+}
 .gl-text-indent-0 {
   text-indent: 0;
 }

package/src/scss/utility-mixins/text.scss

@@ -67,6 +67,38 @@
   text-overflow: ellipsis;
 }
 
+/**
+* Line clamp utilities
+*
+* Naming convention: gl-line-clamp-{value}
+*/
+@mixin gl-line-clamp-1 {
+  white-space: normal;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@mixin gl-line-clamp-2 {
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+@mixin gl-line-clamp-3 {
+  white-space: normal;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+}
+
 /**
 * Text indent utilities
 *

package/src/utils/constants.js

@@ -144,11 +144,6 @@ export const buttonSizeOptions = {
   medium: 'md',
 };
 
-export const datepickerSizeOptionsMap = {
-  small: 'sm',
-  medium: 'md',
-};
-
 export const datepickerWidthOptionsMap = {
   sm: 'sm',
   md: 'md',
@@ -290,7 +285,7 @@ export const keyboard = {
 
 export const truncateOptions = POSITION;
 
-export const formInputSizes = {
+export const formInputWidths = {
   xs: 'xs',
   sm: 'sm',
   md: 'md',