@gitlab/ui 37.3.0 → 37.4.2

package/documentation/documented_stories.js

@@ -93,6 +93,7 @@ export const setupStorybookReadme = () =>
         'GlIntersperse',
         'GlFormSelect',
         'GlDaterangePicker',
+        'GlFormGroup',
         'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
@@ -108,8 +109,10 @@ export const setupStorybookReadme = () =>
         'GlPagination',
         'GlSkeletonLoader',
         'GlLabel',
+        'GlHoverLoadDirective',
         'GlStackedColumnChart',
         'GlDiscreteScatterChart',
+        'GlResizeObserverDirective',
         'GlFormCombobox',
         'GlChartTooltip',
         'GlInputGroupText',
@@ -129,6 +132,7 @@ export const setupStorybookReadme = () =>
         'GlColumnChart',
         'GlTruncate',
         'GlNav',
+        'GlSearchBoxByType',
         'GlNavItem',
         'GlNavItemDropdown',
         'GlPopover',
@@ -140,6 +144,7 @@ export const setupStorybookReadme = () =>
         'GlAreaChart',
         'GlLineChart',
         'GlFormInputGroup',
+        'GlSearchBoxByClick',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

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

package/src/components/base/button/button.scss

@@ -108,9 +108,8 @@
   }
 
   &.selected {
-    @include gl-bg-gray-10;
-    box-shadow: inset 0 0 0 $gl-border-size-1 $gray-200,
-      inset 0 $gl-border-size-2 $gl-border-size-4 $gray-200;
+    @include gl-bg-white;
+    box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
 
     &:hover,
     &:focus {
@@ -118,20 +117,17 @@
     }
 
     &:hover {
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
     }
 
     &:focus {
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200, $focus-ring;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400, $focus-ring;
     }
 
     &:active,
     &:active:focus {
       @include gl-bg-gray-100;
-      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600,
-        inset 0 $gl-border-size-4 $gl-border-size-4 $gray-200, $focus-ring;
+      box-shadow: inset 0 0 0 $gl-border-size-2 $gray-600, $focus-ring;
     }
   }
 

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

@@ -378,6 +378,18 @@ describe('Filtered search', () => {
     expect(filteredSearchTerms.at(0).props('isLastToken')).toBe(false);
     expect(filteredSearchTerms.at(1).props('isLastToken')).toBe(true);
   });
+
+  it('passes `currentValue` prop to search terms', async () => {
+    createComponent({
+      value: ['one'],
+    });
+    await nextTick();
+
+    expect(wrapper.findComponent(GlFilteredSearchTerm).props('currentValue')).toEqual([
+      { type: 'filtered-search-term', value: { data: 'one' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ]);
+  });
 });
 
 describe('Filtered search integration tests', () => {

package/src/components/base/filtered_search/filtered_search_term.spec.js

@@ -21,7 +21,7 @@ describe('Filtered search term', () => {
   const segmentStub = {
     name: 'gl-filtered-search-token-segment-stub',
     template: '<div><slot name="view"></slot><slot name="suggestions"></slot></div>',
-    props: ['searchInputAttributes', 'isLastToken'],
+    props: ['searchInputAttributes', 'isLastToken', 'currentValue'],
   };
 
   const createComponent = (props) => {
@@ -79,18 +79,24 @@ describe('Filtered search term', () => {
     }
   );
 
-  it('passes `searchInputAttributes` and `isLastToken` prop to `GlFilteredSearchTokenSegment`', () => {
+  it('passes `searchInputAttributes`, `isLastToken`, and `currentValue` props to `GlFilteredSearchTokenSegment`', () => {
     const isLastToken = true;
+    const currentValue = [
+      { type: 'filtered-search-term', value: { data: 'something' } },
+      { type: 'filtered-search-term', value: { data: '' } },
+    ];
 
     createComponent({
       value: { data: 'something' },
       searchInputAttributes,
       isLastToken,
+      currentValue,
     });
 
     expect(findTokenSegmentComponent().props()).toEqual({
       searchInputAttributes,
       isLastToken,
+      currentValue,
     });
   });
 

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -38,6 +38,11 @@ export default {
       required: false,
       default: false,
     },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   computed: {
     suggestedTokens() {
@@ -66,6 +71,7 @@ export default {
       :class="{ 'gl-w-full': placeholder }"
       :search-input-attributes="searchInputAttributes"
       :is-last-token="isLastToken"
+      :current-value="currentValue"
       @activate="$emit('activate')"
       @deactivate="$emit('deactivate')"
       @complete="$emit('replace', { type: $event })"

package/src/components/base/filtered_search/filtered_search_token_segment.spec.js

@@ -254,54 +254,63 @@ describe('Filtered search token segment', () => {
     });
   });
 
-  describe('when input is active', () => {
-    it('adds `searchInputAttributes` prop to search token segment input', () => {
-      createComponent({ active: true, value: 'something', searchInputAttributes });
+  const currentValueNoTokens = [{ type: 'filtered-search-term', value: { data: '' } }];
+  const currentValueOneToken = [
+    { type: 'filtered-search-term', value: { data: 'one' } },
+    { type: 'filtered-search-term', value: { data: '' } },
+  ];
+
+  describe.each`
+    active   | isLastToken | currentValue
+    ${true}  | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${false}    | ${currentValueNoTokens}
+    ${false} | ${true}     | ${currentValueNoTokens}
+    ${true}  | ${true}     | ${currentValueOneToken}
+    ${true}  | ${false}    | ${currentValueOneToken}
+  `(
+    'when `active` is `$active`, `isLastToken` is `$isLastToken` and `currentValue` is `$currentValue`',
+    ({ active, isLastToken, currentValue }) => {
+      beforeEach(() => {
+        createComponent({
+          value: 'something',
+          active,
+          isLastToken,
+          currentValue,
+          searchInputAttributes,
+        });
+      });
 
-      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
-        searchInputAttributes['data-qa-selector']
-      );
-    });
+      it('does not add `searchInputAttributes` prop to search token segment', () => {
+        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
+      });
+    }
+  );
 
-    it('does not add `searchInputAttributes` prop to search token segment', () => {
+  describe('when `active` is `false`, `isLastToken` is `true` and there is one or more tokens', () => {
+    beforeEach(() => {
       createComponent({
-        active: true,
         value: 'something',
-        searchInputAttributes,
+        active: false,
         isLastToken: true,
+        currentValue: currentValueOneToken,
+        searchInputAttributes,
       });
-
-      expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
     });
-  });
 
-  describe('when input is not active', () => {
-    describe('when `isLastToken` prop is `true`', () => {
-      it('adds `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: true,
-        });
-
-        expect(wrapper.attributes('data-qa-selector')).toBe(
-          searchInputAttributes['data-qa-selector']
-        );
-      });
+    it('adds `searchInputAttributes` prop to search token segment', () => {
+      expect(wrapper.attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
+  });
 
-    describe('when `isLastToken` prop is `false`', () => {
-      it('does not add `searchInputAttributes` prop to search token segment', () => {
-        createComponent({
-          active: false,
-          value: 'something',
-          searchInputAttributes,
-          isLastToken: false,
-        });
+  describe('when input is active', () => {
+    it('adds `searchInputAttributes` prop to search token segment input', () => {
+      createComponent({ active: true, value: 'something', searchInputAttributes });
 
-        expect(wrapper.attributes('data-qa-selector')).toBe(undefined);
-      });
+      expect(wrapper.find('input').attributes('data-qa-selector')).toBe(
+        searchInputAttributes['data-qa-selector']
+      );
     });
   });
 });

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -59,6 +59,11 @@ export default {
       required: false,
       default: false,
     },
+    currentValue: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
 
   data() {
@@ -106,6 +111,14 @@ export default {
       const defaultSuggestion = this.options.find((op) => op.default);
       return (defaultSuggestion ?? this.options[0])?.value;
     },
+    containerAttributes() {
+      return (
+        this.isLastToken &&
+        !this.active &&
+        this.currentValue.length > 1 &&
+        this.searchInputAttributes
+      );
+    },
   },
 
   watch: {
@@ -254,7 +267,7 @@ export default {
 
 <template>
   <div
-    v-bind="isLastToken && !active && searchInputAttributes"
+    v-bind="containerAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"

package/src/components/base/form/form_group/form_group.documentation.js

@@ -1,8 +1,5 @@
-import examples from './examples/form_group';
 import description from './form_group.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-form-group',
 };

package/src/components/base/form/form_group/form_group.md

@@ -1,3 +1 @@
-# Form Group
-
 Form group adds structure to forms.

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

@@ -1,164 +1,125 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../index';
-import { sizeOptions } from '../../../../utils/constants';
+import { disableControls } from '../../../../utils/stories_utils';
 import readme from './form_group.md';
 
 const components = {
   GlFormGroup,
 };
 
-function generateProps({
+const generateProps = ({
   id = 'group-1',
   label = 'Label Name',
   description = 'form group description',
-  labelDescription = 'form label description',
+  labelDescription = '',
   optional = GlFormGroup.props.optional.default,
   optionalText = GlFormGroup.props.optionalText.default,
-  horizontal = false,
-} = {}) {
-  return {
-    id: {
-      type: String,
-      default: text('id', id),
-    },
-    label: {
-      type: String,
-      default: text('label', label),
-    },
-    labelSize: {
-      type: String,
-      default: select('label-size', sizeOptions, sizeOptions.sm),
-    },
-    description: {
-      type: String,
-      default: text('description', description),
-    },
-    labelDescription: {
-      type: String,
-      default: text('label-description', labelDescription),
-    },
-    optional: {
-      type: Boolean,
-      default: boolean('optional', optional),
-    },
-    optionalText: {
-      type: String,
-      default: text('optional-text', optionalText),
-    },
-    horizontal: {
-      type: Boolean,
-      default: boolean('horizontal', horizontal),
+} = {}) => ({
+  id,
+  label,
+  labelDescription,
+  optional,
+  optionalText,
+  description,
+});
+
+const wrap = (template, bindings = '') => `
+  <gl-form-group
+    :id="id +  '_group'"
+    :label="label"
+    :label-description="labelDescription"
+    :optional="optional"
+    :optional-text="optionalText"
+    :description="description"
+    ${bindings}
+    :label-for="id">
+    ${template}
+  </gl-form-group>
+`;
+
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id" />'),
+});
+Default.args = generateProps();
+
+export const Disabled = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id"  type="text" value="Disabled" disabled />'),
+});
+Disabled.args = generateProps({ description: 'This feature is disabled' });
+
+export const WithTextarea = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormTextarea },
+  template: wrap('<gl-form-textarea :id="id" placeholder="Enter something" />'),
+});
+WithTextarea.args = generateProps({
+  id: 'textarea2',
+  optional: true,
+  description: '',
+});
+
+export const WithLabelDescription = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  template: wrap('<gl-form-input :id="id" />'),
+});
+WithLabelDescription.args = generateProps({
+  optional: true,
+  labelDescription: 'form label description',
+});
+
+export const WithValidations = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ...components, GlFormInput },
+  computed: {
+    state() {
+      return this.name.length >= 4;
     },
-  };
-}
+    invalidFeedback() {
+      let feedbackText = 'This field is required.';
 
-documentedStoriesOf('base/form/form-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :optional="optional"
-        :optional-text="optionalText"
-        :description="description"
-        :horizontal="horizontal"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" />
-      </gl-form-group>
-    `,
-  }))
-  .add('disabled', () => ({
-    props: generateProps(),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        id="group-id"
-        label="Label Name"
-        label-size="sm"
-        :optional="optional"
-        :optional-text="optionalText"
-        description="This feature is disabled"
-        label-for="input1"
-      >
-        <gl-form-input id="input1"  type="text" :disabled="true" value="Disabled" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with textarea', () => ({
-    components: { ...components, GlFormTextarea },
-    props: generateProps({ optional: true }),
-    template: `
-      <gl-form-group
-        id="group-id-textarea2"
-        label="Label Name"
-        label-for="textarea2"
-        :optional="optional"
-        :optional-text="optionalText"
-      >
-        <gl-form-textarea id="textarea2" placeholder="Enter something" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with label description', () => ({
-    props: generateProps({ optional: true }),
-    components: { ...components, GlFormInput },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :description="description"
-        :label-description="labelDescription"
-        :optional="optional"
-        :optional-text="optionalText"
-        :horizontal="horizontal"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" />
-      </gl-form-group>
-    `,
-  }))
-  .add('with validations', () => ({
-    props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
-    components: { ...components, GlFormInput },
-    computed: {
-      state() {
-        return this.name.length >= 4;
-      },
-      invalidFeedback() {
-        let feedbackText = 'This field is required.';
+      if (this.name.length > 4) {
+        feedbackText = '';
+      } else if (this.name.length > 0) {
+        feedbackText = 'Enter at least 4 characters.';
+      }
 
-        if (this.name.length > 4) {
-          feedbackText = '';
-        } else if (this.name.length > 0) {
-          feedbackText = 'Enter at least 4 characters.';
-        }
+      return feedbackText;
+    },
+  },
+  data() {
+    return {
+      name: '',
+    };
+  },
+  template: wrap(
+    '<gl-form-input :id="id" :state="state" v-model.trim="name" />',
+    ':invalid-feedback="invalidFeedback"'
+  ),
+});
+WithValidations.args = generateProps({
+  label: 'Name',
+  description: 'Enter a first and last name.',
+});
 
-        return feedbackText;
+export default {
+  title: 'base/form/form-group',
+  component: GlFormGroup,
+  parameters: {
+    bootstrapComponent: 'b-form-group',
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    data() {
-      return {
-        name: '',
-      };
+  },
+  argTypes: {
+    ...disableControls(['labelClass']),
+    label: {
+      control: { type: 'text' },
     },
-    template: `
-      <gl-form-group
-        :id="id"
-        :label="label"
-        :label-size="labelSize"
-        :description="description"
-        :invalid-feedback="invalidFeedback"
-        :state="state"
-        label-for="label1"
-      >
-        <gl-form-input id="input1" :state="state" v-model.trim="name" />
-      </gl-form-group>
-    `,
-  }));
+  },
+};

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

@@ -25,7 +25,9 @@ describe('GlFormSelect', () => {
     `('adds $expectedClass class for state $state', ({ state, expectedClasses }) => {
       createComponent({ state });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, ...expectedClasses]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, ...expectedClasses].sort()
+      );
     });
   });
 
@@ -36,19 +38,21 @@ describe('GlFormSelect', () => {
     it.each(nonNullSizes)('adds correct class for size %s', (size) => {
       createComponent({ size });
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES, `custom-select-${size}`]);
+      expect(wrapper.classes().sort()).toEqual(
+        [...DEFAULT_SELECT_CLASSES, `custom-select-${size}`].sort()
+      );
     });
 
     it('does not add a size class if not given the size prop', () => {
       createComponent();
 
-      expect(wrapper.classes()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      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()).toEqual([...DEFAULT_SELECT_CLASSES]);
+      expect(wrapper.classes().sort()).toEqual([...DEFAULT_SELECT_CLASSES].sort());
     });
   });