@gitlab/ui 37.1.0 → 37.4.0

package/documentation/documented_stories.js

@@ -77,6 +77,7 @@ export const setupStorybookReadme = () =>
         'GlSorting',
         'GlSortingItem',
         'GlIcon',
+        'GlSafeLinkDirective',
         'GlDashboardSkeleton',
         'GlToggle',
         'GlNavbar',
@@ -92,6 +93,7 @@ export const setupStorybookReadme = () =>
         'GlIntersperse',
         'GlFormSelect',
         'GlDaterangePicker',
+        'GlFormGroup',
         'GlAvatarLabeled',
         'GlBarChart',
         'GlCarousel',
@@ -107,12 +109,15 @@ export const setupStorybookReadme = () =>
         'GlPagination',
         'GlSkeletonLoader',
         'GlLabel',
+        'GlHoverLoadDirective',
         'GlStackedColumnChart',
         'GlDiscreteScatterChart',
+        'GlResizeObserverDirective',
         'GlFormCombobox',
         'GlChartTooltip',
         'GlInputGroupText',
         'GlGaugeChart',
+        'GlSafeHtmlDirective',
         'GlFormRadio',
         'GlModal',
         'GlKeysetPagination',
@@ -127,6 +132,7 @@ export const setupStorybookReadme = () =>
         'GlColumnChart',
         'GlTruncate',
         'GlNav',
+        'GlSearchBoxByType',
         'GlNavItem',
         'GlNavItemDropdown',
         'GlPopover',
@@ -137,6 +143,8 @@ export const setupStorybookReadme = () =>
         'GlChartSeriesLabel',
         'GlAreaChart',
         'GlLineChart',
+        'GlFormInputGroup',
+        'GlSearchBoxByClick',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.1.0",
+  "version": "37.4.0",
   "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/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_input_group/form_input_group.documentation.js

@@ -1,34 +1,6 @@
-import examples from './examples';
 import description from './form_input_group.md';
 
 export default {
   followsDesignSystem: false,
   description,
-  examples,
-  bootstrapComponent: 'b-form-input',
-  propsInfo: {
-    'select-on-click': {
-      type: Boolean,
-      additionalInfo: 'Automatically selects the content of the input field on click',
-    },
-    'predefined-options': {
-      type: Array,
-      additionalInfo:
-        'Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})',
-    },
-  },
-  slots: [
-    {
-      name: 'default',
-      description: 'Allows replacement of default input field.',
-    },
-    {
-      name: 'prepend',
-      description: 'Is rendered in front of the input field.',
-    },
-    {
-      name: 'append',
-      description: 'Is rendered after the input field.',
-    },
-  ],
 };

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

@@ -1,7 +1,3 @@
-# Form Group Input
-
-<!-- STORY -->
-
 The `GlFormInputGroup` component allows one to build more advanced text
 input fields than generic `GlFormInput` when one needs that flexibility.
 Basic usage of the component:

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

@@ -1,73 +1,95 @@
-import { withKnobs, boolean, object, text } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
 import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
+import { disableControls } from '../../../../utils/stories_utils';
 import readme from './form_input_group.md';
 
-const components = {
-  GlFormInputGroup,
-  GlInputGroupText,
-};
-const predefinedOptions = [
-  { name: 'Embed', value: 'https://embed.com' },
-  { name: 'Share', value: 'https://share.org' },
-];
+const template = `
+  <gl-form-input-group
+    :readonly="readonly"
+    :select-on-click="selectOnClick"
+    :predefined-options="predefinedOptions"
+    :label="label"
+    :inputClass="inputClass">
+    <template #prepend v-if="prepend">
+      <gl-input-group-text>{{prepend}}</gl-input-group-text>
+    </template>
+    <template #append v-if="append">
+      <gl-input-group-text>{{append}}</gl-input-group-text>
+    </template>
+  </gl-form-input-group>
+`;
 
-documentedStoriesOf('base/form/form-input-group', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', 'Username'),
-      },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
-      },
-      select: {
-        default: boolean('Select text on click', false),
+const defaultValue = (prop) => GlFormInputGroup.props[prop].default;
+
+const generateProps = ({
+  prepend = 'Username',
+  append = 'Add',
+  readonly = false,
+  selectOnClick = false,
+  predefinedOptions = defaultValue('predefinedOptions')(),
+  label = '',
+  inputClass = '',
+} = {}) => ({
+  prepend,
+  append,
+  readonly,
+  selectOnClick,
+  predefinedOptions,
+  label,
+  inputClass,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlFormInputGroup, GlInputGroupText },
+  props: Object.keys(argTypes),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export const PredefinedOptions = Template.bind({});
+PredefinedOptions.args = generateProps({
+  prepend: '',
+  predefinedOptions: [
+    { name: 'Embed', value: 'https://embed.com' },
+    { name: 'Share', value: 'https://share.org' },
+  ],
+});
+
+export default {
+  title: 'base/form/form-input-group',
+  component: GlFormInputGroup,
+  knobs: { disabled: true },
+  parameters: {
+    bootstrapComponent: 'b-form-input',
+    docs: {
+      description: {
+        component: readme,
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }))
-  .add('with predefined options', () => ({
-    components,
-    props: {
-      prepend: {
-        default: text('Prepend text', ''),
+    knobs: { disabled: true },
+  },
+  argTypes: {
+    ...disableControls(['value']),
+    prepend: {
+      control: {
+        type: 'text',
       },
-      append: {
-        default: text('Append text', 'Add'),
-      },
-      readonly: {
-        default: boolean('Readonly', false),
+    },
+    append: {
+      control: {
+        type: 'text',
       },
-      select: {
-        default: boolean('Select text on click', false),
+    },
+    inputClass: {
+      control: {
+        type: 'text',
       },
-      options: {
-        default: object('Predefined options', predefinedOptions),
+    },
+    label: {
+      control: {
+        type: 'text',
       },
     },
-    template: `
-      <gl-form-input-group :readonly="readonly" :select-on-click="select" :predefined-options="options">
-        <template #prepend v-if="prepend">
-          <gl-input-group-text>{{prepend}}</gl-input-group-text>
-        </template>
-        <template #append v-if="append">
-          <gl-input-group-text>{{append}}</gl-input-group-text>
-        </template>
-      </gl-form-input-group>
-    `,
-  }));
+  },
+};

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

@@ -16,11 +16,17 @@ export default {
   },
   mixins: [InputGroupMixin],
   props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
     selectOnClick: {
       type: Boolean,
       required: false,
       default: false,
     },
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
     predefinedOptions: {
       type: Array,
       required: false,
@@ -61,6 +67,7 @@ export default {
   <div>
     <b-input-group>
       <b-input-group-prepend v-if="activeOption || $scopedSlots.prepend">
+        <!-- @slot Is rendered in front of the input field. -->
         <slot name="prepend"></slot>
         <gl-dropdown v-if="activeOption" :text="activeOption">
           <gl-dropdown-item
@@ -74,6 +81,7 @@ export default {
           </gl-dropdown-item>
         </gl-dropdown>
       </b-input-group-prepend>
+      <!-- @slot Allows replacement of default input field. -->
       <slot>
         <b-form-input
           ref="input"
@@ -86,6 +94,7 @@ export default {
         />
       </slot>
       <b-input-group-append v-if="$scopedSlots.append">
+        <!-- @slot Is rendered after the input field. -->
         <slot name="append"></slot>
       </b-input-group-append>
     </b-input-group>

package/src/components/base/loading_icon/loading_icon.vue

@@ -64,6 +64,6 @@ export default {
 </script>
 <template>
   <component :is="rootElementType" class="gl-spinner-container" role="status">
-    <span :class="cssClasses" class="align-text-bottom" :aria-label="label"></span>
+    <span :class="cssClasses" class="gl-vertical-align-text-bottom!" :aria-label="label"></span>
   </component>
 </template>

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

@@ -16,6 +16,7 @@ const mockResizeWidth = (width) => {
 describe('pagination component', () => {
   let wrapper;
   const findButtons = () => wrapper.findAll('.page-link');
+  const findItems = () => wrapper.findAll('.page-item');
   const propsData = {
     value: 3,
     perPage: 5,
@@ -375,9 +376,12 @@ describe('pagination component', () => {
         value: 1,
         nextPage: 2,
       });
+      const prevItem = findItems().at(0);
+      expect(prevItem.attributes('aria-hidden')).toBe('true');
       const prevButton = findButtons().at(0);
       expect(prevButton.element.tagName).toBe('SPAN');
-      expect(prevButton.attributes('aria-disabled')).toBe('true');
+      expect(prevButton.attributes('href')).toBeUndefined();
+      expect(prevButton.attributes('aria-label')).toBeUndefined();
     });
 
     it('disables next button when on last page', () => {
@@ -386,9 +390,12 @@ describe('pagination component', () => {
         value: 2,
         prevPage: 1,
       });
+      const nextItem = findItems().at(1);
+      expect(nextItem.attributes('aria-hidden')).toBe('true');
       const nextButton = findButtons().at(1);
       expect(nextButton.element.tagName).toBe('SPAN');
-      expect(nextButton.attributes('aria-disabled')).toBe('true');
+      expect(nextButton.attributes('href')).toBeUndefined();
+      expect(nextButton.attributes('aria-label')).toBeUndefined();
     });
   });
 });