@gitlab/ui 37.4.2 → 37.5.2

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.2",
+  "version": "37.5.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "10.0.2",
+    "@gitlab/eslint-plugin": "11.0.0",
     "@gitlab/stylelint-config": "4.0.0",
     "@gitlab/svgs": "2.6.0",
     "@rollup/plugin-commonjs": "^11.1.0",

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.spec.js

@@ -336,6 +336,7 @@ describe('new dropdown', () => {
       const slots = { 'button-text': mockComponent };
       buildWrapper({ loading: true, icon: 'close' }, slots);
       expect(wrapper.findComponent(mockComponent).exists()).toBe(true);
+      expect(wrapper.text()).toBe('mock');
       expect(findLoadingIcon().exists()).toBe(true);
       expect(findIcon().exists()).toBe(true);
       expect(findCaret().exists()).toBe(true);
@@ -345,12 +346,40 @@ describe('new dropdown', () => {
       const slots = { 'button-content': mockComponent };
       buildWrapper({ loading: true, icon: 'close' }, slots);
       expect(wrapper.findComponent(mockComponent).exists()).toBe(true);
+      expect(wrapper.text()).toBe('mock');
       expect(findLoadingIcon().exists()).toBe(false);
       expect(findIcon().exists()).toBe(false);
       expect(findCaret().exists()).toBe(false);
     });
   });
 
+  describe('icon only dropdown', () => {
+    it('shows the icon and dropdown caret', () => {
+      buildWrapper({ icon: 'paper-airplane' });
+      expect(wrapper.text()).toBe('');
+      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findIcon().exists()).toBe(true);
+      expect(findCaret().exists()).toBe(true);
+    });
+
+    it('shows text for screen readers', () => {
+      buildWrapper({ icon: 'paper-airplane', text: 'screenreader button text', textSrOnly: true });
+      expect(wrapper.text()).toBe('screenreader button text');
+      expect(wrapper.find('span').classes()).toContain('gl-sr-only');
+      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findIcon().exists()).toBe(true);
+      expect(findCaret().exists()).toBe(true);
+    });
+
+    it('shows loading spinner instead of icon when loading', () => {
+      buildWrapper({ icon: 'paper-airplane', loading: true });
+      expect(wrapper.text()).toBe('');
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findIcon().exists()).toBe(false);
+      expect(findCaret().exists()).toBe(true);
+    });
+  });
+
   describe('Clear all button', () => {
     it('is not visible by default', () => {
       buildWrapper({});

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.vue

@@ -151,7 +151,9 @@ export default {
       return !this.split;
     },
     isIconOnly() {
-      return Boolean(this.icon && (!this.text?.length || this.textSrOnly));
+      return Boolean(
+        this.icon && (!this.text?.length || this.textSrOnly) && !this.hasSlotContents('button-text')
+      );
     },
     isIconWithText() {
       return Boolean(this.icon && this.text?.length && !this.textSrOnly);
@@ -282,8 +284,8 @@ export default {
     </div>
     <template #button-content>
       <slot name="button-content">
-        <gl-loading-icon v-if="loading" class="gl-mr-2" />
-        <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
+        <gl-loading-icon v-if="loading" :class="{ 'gl-mr-2': !isIconOnly }" />
+        <gl-icon v-if="icon && !(isIconOnly && loading)" class="dropdown-icon" :name="icon" />
         <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
           <slot name="button-text">{{ buttonText }}</slot>
         </span>

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 */