@gitlab/ui 37.4.0 → 37.5.0

package/documentation/documented_stories.js

@@ -77,6 +77,7 @@ export const setupStorybookReadme = () =>
         'GlSorting',
         'GlSortingItem',
         'GlIcon',
+        'GlDatepicker',
         'GlSafeLinkDirective',
         'GlDashboardSkeleton',
         'GlToggle',

package/package.json

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

package/src/components/base/accordion/accordion_item.spec.js

@@ -8,6 +8,7 @@ import GlAccordionItem from './accordion_item.vue';
 describe('GlAccordionItem', () => {
   let wrapper;
   const defaultTitle = 'Item 1';
+  const titleVisible = 'Item 1 visible';
   const defaultSlot = 'Hello';
 
   const createComponent = (props = {}, { defaultHeaderLevel = 3, accordionSetId = false } = {}) => {
@@ -38,6 +39,17 @@ describe('GlAccordionItem', () => {
     expect(findButton().find('span').text()).toBe(defaultTitle);
   });
 
+  it('renders alternative button text when the content is visible and the titleVisible property is set', async () => {
+    createComponent({ titleVisible });
+
+    expect(findButton().find('span').text()).toBe(defaultTitle);
+
+    await waitForAnimationFrame();
+    await findButton().trigger('click');
+
+    expect(findButton().find('span').text()).toBe(titleVisible);
+  });
+
   it('renders the appropriate header element', () => {
     createComponent({}, { defaultHeaderLevel: 3 });
 

package/src/components/base/accordion/accordion_item.stories.js

@@ -2,7 +2,7 @@ import readme from './accordion_item.md';
 import GlAccordionItem from './accordion_item.vue';
 
 const template = `
-    <gl-accordion-item :title="title" :visible="visible" :header-level="headerLevel">
+    <gl-accordion-item :title="title" :titleVisible="titleVisible" :visible="visible" :header-level="headerLevel">
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, maiores.
       </gl-accordion-item>
     `;
@@ -13,10 +13,12 @@ const generateProps = ({
   visible = defaultValue('visible'),
   headerLevel = 3,
   title = 'Accordion Item Title',
+  titleVisible = undefined,
 } = {}) => ({
   visible,
   headerLevel,
   title,
+  titleVisible,
 });
 
 const Template = (args) => ({
@@ -32,7 +34,7 @@ const Template = (args) => ({
 });
 
 export const Default = Template.bind({});
-Default.args = generateProps();
+Default.args = generateProps({ titleVisible: 'Accordion Item Title Expanded' });
 
 export const InitiallyExpanded = Template.bind({});
 InitiallyExpanded.args = generateProps({ visible: true, title: 'Item Content Initially Expanded' });

package/src/components/base/accordion/accordion_item.vue

@@ -24,6 +24,14 @@ export default {
       required: true,
     },
     /*
+    Used to set the title of accordion link when the content is visible
+    */
+    titleVisible: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    /*
 When set, it will ensure the accordion item is initially visible
  */
     visible: {
@@ -60,6 +68,9 @@ When set, it will ensure the accordion item is initially visible
     icon() {
       return this.isVisible ? 'chevron-down' : 'chevron-right';
     },
+    buttonTitle() {
+      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
+    },
   },
 };
 </script>
@@ -73,7 +84,7 @@ When set, it will ensure the accordion item is initially visible
         button-text-classes="gl-display-flex"
         :icon="icon"
       >
-        {{ title }}
+        {{ buttonTitle }}
       </gl-button>
     </component>
     <b-collapse

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

@@ -1,64 +1,5 @@
 import description from './datepicker.md';
-import examples from './examples';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    target: {
-      additionalInfo:
-        'Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.',
-    },
-    container: {
-      additionalInfo:
-        'DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.',
-    },
-    disableDayFn: {
-      additionalInfo:
-        'Accepts a function that accepts a date as argument and returns true if the date is disabled.',
-    },
-    autocomplete: {
-      additionalInfo:
-        'Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.',
-    },
-    defaultDate: {
-      additionalInfo: 'Use this prop to set the initial date for the datepicker.',
-    },
-  },
-  events: [
-    {
-      event: 'input',
-      description: 'Emitted when a new date has been selected.',
-      args: [
-        {
-          arg: 'date',
-          description: 'The selected date',
-        },
-      ],
-    },
-    {
-      event: 'close',
-      description: 'Emitted when the datepicker is hidden.',
-    },
-    {
-      event: 'open',
-      description: 'Emitted when the datepicker becomes visible.',
-    },
-    {
-      event: 'draw',
-      description: 'Emitted when the datepicker draws a new month.',
-    },
-    {
-      event: 'clear',
-      description: 'Emitted when the clear button is clicked.',
-    },
-  ],
-  slots: [
-    {
-      name: 'default',
-      description:
-        '(optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`',
-      scopedProps: `{ formattedDate: string }`,
-    },
-  ],
 };

package/src/components/base/datepicker/datepicker.md

@@ -1,9 +1,3 @@
-# Datepicker
-
-<!-- STORY -->
-
-## Usage
-
 Date picker allows users to choose and input a date by manually typing the date into the input field
 or by using a calendar-like dropdown.
 

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

@@ -1,84 +1,110 @@
-import { withKnobs, date } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
+import { GlDatepicker } from '../../../index';
+import { disableControls } from '../../../utils/stories_utils';
 import { useFakeDate } from '../../../utils/use_fake_date';
 import readme from './datepicker.md';
-import GlDatepicker from './datepicker.vue';
 
-const currentYear = 2020;
+const defaults = {
+  components: { GlDatepicker },
+  mixins: [useFakeDate()],
+};
 
+const currentYear = 2020;
 const defaultDate = new Date(currentYear, 0, 15);
 const defaultMinDate = new Date(currentYear, 0, 1);
 const defaultMaxDate = new Date(currentYear, 2, 31);
 
-function dateTypeKnob(name, defaultValue) {
-  return new Date(date(name, defaultValue));
-}
+const generateProps = ({ minDate = defaultMinDate, maxDate = defaultMaxDate } = {}) => ({
+  minDate,
+  maxDate,
+});
 
-function generateProps() {
-  return {
-    minDate: {
-      type: Date,
-      default: dateTypeKnob('minDate', defaultMinDate),
-    },
-    maxDate: {
-      type: Date,
-      default: dateTypeKnob('maxDate', defaultMaxDate),
-    },
-  };
-}
+const wrap = (template) => `<div style="height: 280px">${template}</div>`;
 
-documentedStoriesOf('base/datepicker', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components: {
-      GlDatepicker,
-    },
-    mixins: [useFakeDate()],
-    data() {
-      return {
-        value: defaultDate,
-      };
-    },
-    template: `
-      <gl-datepicker :max-date="maxDate" :min-date="minDate" :start-opened="true" v-model="value">
-      </gl-datepicker>
-    `,
-  }))
-  .add('custom trigger', () => ({
-    props: generateProps(),
-    components: {
-      GlDatepicker,
-    },
-    data() {
-      return {
-        value: null,
-      };
+export const Default = (_args, { argTypes }) => ({
+  ...defaults,
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      pickerValue: defaultDate,
+    };
+  },
+  template: wrap(`
+    <gl-datepicker :max-date="maxDate" :min-date="minDate" :start-opened="true" v-model="pickerValue" />
+  `),
+});
+Default.args = generateProps();
+
+export const CustomTrigger = (_args, { argTypes }) => ({
+  ...defaults,
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      pickerValue: null,
+    };
+  },
+  template: wrap(`
+    <div class="dropdown">
+      <button type="button" class="dropdown-menu-toggle">
+        <span class="dropdown-toggle-text"> Start date: {{value}} </span>
+      </button>
+    </div>
+    <gl-datepicker v-model="pickerValue" target=".dropdown-menu-toggle" :container="null" />
+  `),
+});
+CustomTrigger.args = generateProps();
+
+export const WithClearButton = (_args, { argTypes }) => ({
+  ...defaults,
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      pickerValue: defaultDate,
+    };
+  },
+  template: wrap(`
+    <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="pickerValue" />
+  `),
+});
+WithClearButton.args = generateProps();
+
+export default {
+  title: 'base/datepicker',
+  component: GlDatepicker,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
     },
-    template: `
-      <div>
-        <div class="dropdown">
-          <button type="button" class="dropdown-menu-toggle">
-            <span class="dropdown-toggle-text"> Start date: {{value}} </span>
-          </button>
-        </div>
-        <gl-datepicker v-model="value" target=".dropdown-menu-toggle" :container="null" />
-      </div>
-    `,
-  }))
-  .add('with clear button', () => ({
-    props: generateProps(),
-    components: {
-      GlDatepicker,
+  },
+  argTypes: {
+    ...disableControls([
+      'target',
+      'container',
+      'value',
+      'startRange',
+      'endRange',
+      'disableDayFn',
+      'firstDay',
+      'arialLabel',
+      'placeholder',
+      'autocomplete',
+      'disabled',
+      'displayField',
+      'startOpened',
+      'defaultDate',
+      'i18n',
+      'theme',
+      'showClearButton',
+      'inputId',
+      'inputLabel',
+      'inputName',
+    ]),
+    minDate: {
+      control: { type: 'date' },
     },
-    mixins: [useFakeDate()],
-    data() {
-      return {
-        value: defaultDate,
-      };
+    maxDate: {
+      control: { type: 'date' },
     },
-    template: `
-      <gl-datepicker showClearButton :max-date="maxDate" :min-date="minDate" v-model="value">
-      </gl-datepicker>
-    `,
-  }));
+  },
+};

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

@@ -45,11 +45,17 @@ export default {
     GlButton,
   },
   props: {
+    /**
+     * Selector of element that triggers the datepicker. Defaults to the calendar icon. Pass `null` to trigger on input focus.
+     */
     target: {
       type: String,
       required: false,
       default: '',
     },
+    /**
+     * DOM node to render calendar into. Defaults to the datepicker container. Pass `null` to use Pikaday default.
+     */
     container: {
       type: String,
       required: false,
@@ -80,6 +86,9 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Accepts a function that accepts a date as argument and returns true if the date is disabled.
+     */
     disableDayFn: {
       type: Function,
       required: false,
@@ -100,6 +109,9 @@ export default {
       required: false,
       default: defaultDateFormat,
     },
+    /**
+     * Defaults to `off` when datepicker opens on focus, otherwise defaults to `null`.
+     */
     autocomplete: {
       type: String,
       required: false,
@@ -120,6 +132,9 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Use this prop to set the initial date for the datepicker.
+     */
     defaultDate: {
       type: Date,
       required: false,
@@ -274,19 +289,35 @@ export default {
   },
   methods: {
     selected(date) {
+      /**
+       * Emitted when a new date has been selected.
+       * @property {Date} date The selected date
+       */
       this.$emit('input', date);
     },
     closed() {
+      /**
+       * Emitted when the datepicker is hidden.
+       */
       this.$emit('close');
     },
     opened() {
+      /**
+       * Emitted when the datepicker becomes visible.
+       */
       this.$emit('open');
     },
     cleared() {
       this.textInput = '';
+      /**
+       * Emitted when the clear button is clicked.
+       */
       this.$emit('clear');
     },
     draw() {
+      /**
+       * Emitted when the datepicker draws a new month.
+       */
       this.$emit('monthChange');
     },
     onKeydown() {
@@ -302,7 +333,11 @@ export default {
 
 <template>
   <div class="gl-datepicker d-inline-block">
-    <div v-if="showDefaultField" class="position-relative">
+    <div v-if="showDefaultField" class="gl-relative">
+      <!--
+      @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`
+      @binding {string} formattedDate
+      -->
       <slot :formatted-date="formattedDate">
         <gl-form-input
           :id="inputId"

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

@@ -274,7 +274,10 @@ documentedStoriesOf('base/dropdown', readme)
     template: wrap`
       <gl-dropdown-section-header>Header title</gl-dropdown-section-header>
       <gl-dropdown-item>First item</gl-dropdown-item>
-      <gl-dropdown-item>Second item</gl-dropdown-item>`,
+      <gl-dropdown-item>Second item</gl-dropdown-item>
+      <gl-dropdown-section-header>I am a really long header title which should wrap</gl-dropdown-section-header>
+      <gl-dropdown-item>Third item</gl-dropdown-item>
+      <gl-dropdown-item>Fourth item</gl-dropdown-item>`,
     mounted() {
       clickDropdown(this);
     },

package/src/components/base/dropdown/dropdown_section_header.scss

@@ -6,6 +6,7 @@
   @include gl-font-weight-bold;
   @include gl-py-3;
   @include gl-px-4;
+  @include gl-white-space-normal;
 }
 
 /* Styling when the component is used on its own */

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']
+      );
     });
   });
 });