npm - @gitlab/ui - Versions diffs - 36.0.0 → 36.4.0 - Mend

@gitlab/ui 36.0.0 → 36.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

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

@@ -49,6 +49,16 @@ export default {
       required: true,
       validator: () => true,
     },
+    searchInputAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+    isLastToken: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
@@ -244,6 +254,7 @@ export default {
 <template>
   <div
+    v-bind="isLastToken && !active && searchInputAttributes"
     class="gl-filtered-search-token-segment"
     :class="{ 'gl-filtered-search-token-segment-active': active }"
     data-testid="filtered-search-token-segment"
@@ -252,6 +263,7 @@ export default {
     <template v-if="active">
       <input
         ref="input"
+        v-bind="searchInputAttributes"
         v-model="inputValue"
         class="gl-filtered-search-token-segment-input"
         :aria-label="label"

package/src/components/base/popover/popover.documentation.js CHANGED Viewed

@@ -1,28 +1,3 @@
-import examples from './examples';
 export default {
   followsDesignSystem: true,
-  examples,
-  bootstrapComponent: 'b-popover',
-  bootstrapPropsInfo: {
-    target: {
-      additionalInfo:
-        'Element string ID, or a reference to an element or component, that you want to trigger the popover.',
-      required: true,
-    },
-    triggers: {
-      enum: 'triggerVariantOptions',
-    },
-    placement: {
-      enum: 'popoverPlacements',
-    },
-    boundary: {
-      additionalInfo:
-        '"scrollParent", "viewport", "window", or a reference to an HTML element. This is the container that the popover will be constrained to visually.You may need to change this if your target element is in a small container with overflow scroll',
-    },
-    container: {
-      additionalInfo:
-        'Specify container as null (default, appends to <body>) to avoid rendering problems in more complex components (like input groups, button groups, etc). You can use container to optionally specify a different element to append the popover to.',
-    },
-  },
 };

package/src/components/base/popover/popover.stories.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { withKnobs, select, text } from '@storybook/addon-knobs';
 import { GlPopover, GlButton } from '../../../index';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { popoverPlacements } from '../../../utils/constants';
+const defaultValue = (prop) => GlPopover.props[prop].default;
 const components = { GlPopover, GlButton };
 const contentString = `
@@ -11,84 +11,88 @@ const contentString = `
   massa ac, porta condimentum libero. Ut id lacus tristique, egestas arcu non, molestie nisi.
 `;
-const template = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top">{{placement}}</gl-button>
-    <gl-popover target="pop-top"
-      triggers="hover focus"
+const getTemplate = (id, slots = '') => `
+  <div style="height:400px;" class="gl-display-flex gl-justify-content-center gl-align-items-center">
+    <gl-button id="${id}">{{placement}}</gl-button>
+    <gl-popover
+      target="${id}"
+      :triggers="triggers"
       :title="title"
       :placement="placement"
+      :show-close-button="showCloseButton"
       content="${contentString}"
-      data-testid="popover-with-props"
-      show
-      />
-  </div>
-  `;
+      data-testid="${id}"
+      :show="$options.viewMode !== 'docs'">${slots}</gl-popover>
+  </div>`;
-const scopedSlotTemplate = `
-  <div class="gl-display-flex gl-justify-content-center gl-p-6">
-    <gl-button id="pop-top-two" data-testid="popover-button-click">{{placement}}</gl-button>
-    <gl-popover target="pop-top-two"
-      triggers="click"
-      :placement="placement"
-      content="${contentString}"
-    >
-      <template #title>
-        <span data-testid="popover-title">Popover title</span>
-      </template>
-    </gl-popover>
-  </div>
-`;
+const generateProps = ({
+  placement = popoverPlacements.top,
+  title = 'Popover',
+  triggers = defaultValue('triggers'),
+  cssClasses = defaultValue('cssClasses'),
+  showCloseButton = defaultValue('showCloseButton'),
+} = {}) => ({
+  placement,
+  title,
+  triggers,
+  cssClasses,
+  showCloseButton,
+});
+export const Default = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-props'),
+});
+Default.args = generateProps();
-function generateProps({ placement = popoverPlacements.top, title = 'Popover', triggers } = {}) {
-  return {
+export const WithCloseButton = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate('popover-with-close-button'),
+});
+WithCloseButton.args = generateProps({
+  showCloseButton: true,
+});
+export const OnClick = (_args, { viewMode, argTypes }) => ({
+  viewMode,
+  components,
+  props: Object.keys(argTypes),
+  template: getTemplate(
+    'popover-button-click',
+    `
+    <template #title>
+      <span data-testid="popover-title">Popover title</span>
+    </template>
+  `
+  ),
+});
+OnClick.args = generateProps({
+  triggers: 'click',
+});
+OnClick.parameters = {
+  storyshots: { disable: true },
+};
+export default {
+  title: 'base/popover',
+  component: GlPopover,
+  parameters: {
+    knobs: { disable: true },
+    bootstrapComponent: 'b-popover',
+  },
+  argTypes: {
     placement: {
-      type: String,
-      default: select('placement', popoverPlacements, placement),
+      options: Object.values(popoverPlacements),
+      control: {
+        type: 'select',
+      },
     },
     title: {
-      type: String,
-      default: text('title', title),
+      control: { type: 'text' },
     },
-    triggers: {
-      type: String,
-      default: text('hover focus', triggers),
-    },
-  };
-}
-documentedStoriesOf('base/popover', '')
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template,
-    props: generateProps(),
-  }))
-  .add('with close button', () => ({
-    components,
-    template: `
-      <div class="gl-display-flex gl-justify-content-center gl-p-6">
-        <gl-button id="pop-with-close-button">{{placement}}</gl-button>
-        <gl-popover
-          target="pop-with-close-button"
-          data-testid="popover-with-close-button"
-          triggers="hover focus"
-          :title="title"
-          :placement="placement"
-          content="${contentString}"
-          show
-          show-close-button
-          />
-      </div>
-    `,
-    props: generateProps(),
-  }))
-  .add(
-    'on click',
-    () => ({
-      components,
-      template: scopedSlotTemplate,
-      props: generateProps(),
-    }),
-    { storyshots: false }
-  );
+  },
+};

package/src/components/base/popover/popover.vue CHANGED Viewed

@@ -18,6 +18,11 @@ export default {
       required: false,
       default: () => [],
     },
+    /**
+     * Space-separated triggers for the popover.
+     *
+     * @values click, hover, focus, manual
+     */
     triggers: {
       type: String,
       required: false,
@@ -45,6 +50,9 @@ export default {
   methods: {
     close(e) {
       this.$refs[popoverRefName].doClose();
+      /**
+       * Emitted when the close button is clicked (requires showCloseButton to be `true`).
+       */
       this.$emit('close-button-clicked', e);
     },
   },

package/src/components/base/search_box_by_click/search_box_by_click.documentation.js CHANGED Viewed

@@ -52,6 +52,9 @@ export default {
       additionalInfo:
         'Container for tooltip. Valid values: DOM node, selector string or `false` for default',
     },
+    searchButtonAttributes: {
+      additionalInfo: 'HTML attributes to add to the search button',
+    },
   },
   events: [
     {

package/src/components/base/search_box_by_click/search_box_by_click.spec.js CHANGED Viewed

@@ -25,6 +25,7 @@ describe('search box by click component', () => {
   };
   const findClearIcon = () => wrapper.findComponent(ClearIcon);
+  const findSearchButton = () => wrapper.find('[data-testid="search-button"]');
   it('emits input event when input changes', async () => {
     createComponent({ value: 'somevalue' });
@@ -125,8 +126,8 @@ describe('search box by click component', () => {
     });
     it('displays disabled search button', () => {
-      expect(wrapper.findComponent({ ref: 'searchButton' }).exists()).toBe(true);
-      expect(wrapper.findComponent({ ref: 'searchButton' }).attributes('disabled')).toBe('true');
+      expect(findSearchButton().exists()).toBe(true);
+      expect(findSearchButton().attributes('disabled')).toBe('true');
     });
     it('does not render clear icon even with value', () => {
@@ -145,9 +146,19 @@ describe('search box by click component', () => {
   it('emits submit event when search button is pressed', async () => {
     createComponent({ value: 'some-input' });
-    wrapper.findComponent({ ref: 'searchButton' }).vm.$emit('click');
+    findSearchButton().vm.$emit('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.emitted().submit[0]).toEqual(['some-input']);
   });
+  it('adds `searchButtonAttributes` prop to search button', () => {
+    const searchButtonAttributes = { 'data-qa-selector': 'foo-bar' };
+    createComponent({ searchButtonAttributes });
+    expect(findSearchButton().attributes('data-qa-selector')).toBe(
+      searchButtonAttributes['data-qa-selector']
+    );
+  });
 });

package/src/components/base/search_box_by_click/search_box_by_click.vue CHANGED Viewed

@@ -84,6 +84,11 @@ export default {
       validator: (value) =>
         value === false || typeof value === 'string' || value instanceof HTMLElement,
     },
+    searchButtonAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -216,11 +221,13 @@ export default {
     />
     <template #append class="gl-search-box-by-click-input-group-control">
       <gl-button
+        v-bind="searchButtonAttributes"
         ref="searchButton"
         class="gl-search-box-by-click-search-button"
         icon="search"
         :disabled="disabled"
         aria-label="Search"
+        data-testid="search-button"
         @click="search(currentValue)"
       />
     </template>

package/src/components/charts/single_stat/single_stat.documentation.js CHANGED Viewed

@@ -1,7 +1,5 @@
-import examples from './examples';
 import description from './single_stat.md';
 export default {
-  examples,
   description,
 };

package/src/components/charts/single_stat/single_stat.md CHANGED Viewed

@@ -1,5 +1,3 @@
-### Single Stat
 The single stat component is used to show a single value. The color of the meta icon / badge is
 determined by the **variant** prop, which can be one of "success", "warning", "danger", "info",
 "neutral" or "muted" (default).

package/src/components/charts/single_stat/single_stat.stories.js CHANGED Viewed

@@ -1,100 +1,93 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
 import { GlSingleStat } from '../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';
-const components = {
-  GlSingleStat,
-};
-const template = `
-    <gl-single-stat
-      :title="title"
-      :value="value"
-      :unit="unit"
-      :variant="variant"
-      :meta-text="metaText"
-      :meta-icon="metaIcon"
-      :title-icon="titleIcon"
-      :should-animate="shouldAnimate"
-      :animation-decimal-places="animationDecimalPlaces"
-    />
-  `;
 const generateProps = ({
   variant = GlSingleStat.props.variant.default,
   title = 'Single stat',
   value = '100',
-  unit = null,
-  metaText = null,
+  unit = '',
+  metaText = '',
   metaIcon = null,
   titleIcon = null,
   shouldAnimate = false,
   animationDecimalPlaces = 0,
 } = {}) => ({
-  variant: {
-    type: String,
-    default: select('variant', Object.values(badgeVariantOptions), variant),
-  },
-  title: {
-    type: String,
-    default: text('title', title),
-  },
-  value: {
-    type: String,
-    default: text('value', value),
-  },
-  unit: {
-    type: [String, Number],
-    default: text('unit', unit),
-  },
-  metaText: {
-    type: String,
-    default: text('metaText', metaText),
-  },
-  metaIcon: {
-    type: String,
-    default: select('metaIcon', ['', ...iconSpriteInfo.icons], metaIcon),
-  },
-  titleIcon: {
-    type: String,
-    default: select('titleIcon', ['', ...iconSpriteInfo.icons], titleIcon),
-  },
-  shouldAnimate: {
-    type: Boolean,
-    default: boolean('shouldAnimate', shouldAnimate),
-  },
-  animationDecimalPlaces: {
-    type: Number,
-    default: number('animationDecimalPlaces', animationDecimalPlaces),
-  },
+  variant,
+  title,
+  value,
+  unit,
+  metaText,
+  metaIcon,
+  titleIcon,
+  shouldAnimate,
+  animationDecimalPlaces,
 });
 const metaText = 'Super fast';
 const metaIcon = 'check-circle';
 const titleIcon = 'hourglass';
-documentedStoriesOf('charts/single-stat', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    props: generateProps(),
-    template,
-  }))
-  .add('with badge', () => ({
-    components,
-    props: generateProps({ metaText, metaIcon }),
-    template,
-  }))
-  .add('with meta icon', () => ({
-    components,
-    props: generateProps({ metaIcon }),
-    template,
-  }))
-  .add('with title icon', () => ({
-    components,
-    props: generateProps({ titleIcon }),
-    template,
-  }));
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlSingleStat,
+  },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-single-stat
+      :title="title"
+      :value="value"
+      :unit="unit"
+      :variant="variant"
+      :meta-text="metaText"
+      :meta-icon="metaIcon"
+      :title-icon="titleIcon"
+      :should-animate="shouldAnimate"
+      :animation-decimal-places="animationDecimalPlaces"
+    />`,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
+export const WithBadge = Template.bind({});
+WithBadge.args = generateProps({ metaText, metaIcon });
+export const WithMetaIcon = Template.bind({});
+WithMetaIcon.args = generateProps({ metaIcon });
+export const WithTitleIcon = Template.bind({});
+WithTitleIcon.args = generateProps({ titleIcon });
+export default {
+  title: 'charts/single-stat',
+  component: GlSingleStat,
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: Object.values(badgeVariantOptions),
+      control: {
+        type: 'select',
+      },
+    },
+    metaIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    titleIcon: {
+      options: iconSpriteInfo.icons,
+      control: 'select',
+    },
+    unit: {
+      control: 'text',
+    },
+  },
+};

package/src/components/regions/empty_state/empty_state.spec.js CHANGED Viewed

@@ -148,6 +148,55 @@ describe('empty state component', () => {
     });
   });
+  describe('with different titles', () => {
+    it('should render title from prop', () => {
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+      });
+      const title = component.find('h1');
+      expect(title.text()).toBe(props.title);
+    });
+    it('should render title from slot', () => {
+      const slotTitle = 'Slotted title';
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+          title: null,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+      const title = component.find('#slotted');
+      expect(title.text()).toBe(slotTitle);
+    });
+    it('should render a slotted title over a props title', () => {
+      const slotTitle = 'Slotted title';
+      component = shallowMount(EmptyState, {
+        propsData: {
+          ...props,
+        },
+        slots: {
+          title: `<strong id="slotted">${slotTitle}</strong>`,
+        },
+      });
+      const title = component.find('#slotted');
+      const propTitle = component.find('h1');
+      expect(title.text()).toBe(slotTitle);
+      expect(propTitle.exists()).toBe(false);
+    });
+  });
   describe('with different descriptions', () => {
     it('should render description from prop', () => {
       component = shallowMount(EmptyState, {

package/src/components/regions/empty_state/empty_state.vue CHANGED Viewed

@@ -11,7 +11,8 @@ export default {
      */
     title: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     /**
      * The illustration's URL.
@@ -112,13 +113,15 @@ export default {
     </div>
     <div :class="compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto'">
       <div class="gl-mx-auto gl-my-0" :class="{ 'gl-p-5': !compact }">
-        <h1
-          ref="title"
-          class="gl-font-size-h-display gl-line-height-36"
-          :class="compact ? 'h5' : 'h4'"
-        >
-          {{ title }}
-        </h1>
+        <!--
+            @slot Use this slot to customize the empty state's title area.
+            Overrides the `title` prop.
+          -->
+        <slot ref="title" name="title">
+          <h1 class="gl-font-size-h-display gl-line-height-36" :class="compact ? 'h5' : 'h4'">
+            {{ title }}
+          </h1>
+        </slot>
         <p v-if="description || $scopedSlots.description" ref="description" class="gl-mt-3">
           <!--
             @slot Use this slot to customize the empty state's description

package/src/scss/utilities.scss CHANGED Viewed

@@ -1981,6 +1981,14 @@
   color: inherit !important;
 }
+.gl-text-transparent {
+  color: transparent;
+}
+.gl-text-transparent\! {
+  color: transparent !important;
+}
 .gl-text-white {
   color: $white;
 }
@@ -6392,6 +6400,18 @@
   padding-left: $gl-spacing-scale-7 !important;
   }
 }
+.gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7;
+  padding-right: $gl-spacing-scale-7;
+  }
+}
+.gl-md-px-7\! {
+  @include gl-media-breakpoint-up(md) {
+  padding-left: $gl-spacing-scale-7 !important;
+  padding-right: $gl-spacing-scale-7 !important;
+  }
+}
 .gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
   padding-top: 0;

package/src/scss/utility-mixins/color.scss CHANGED Viewed

@@ -11,6 +11,10 @@
   color: inherit;
 }
+@mixin gl-text-transparent {
+  color: transparent;
+}
 @mixin gl-text-white($hover: true) {
   color: $white;
 }

package/src/scss/utility-mixins/spacing.scss CHANGED Viewed

@@ -1209,6 +1209,12 @@
   }
 }
+@mixin gl-md-px-7 {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-px-7;
+  }
+}
 @mixin gl-lg-pt-0 {
   @include gl-media-breakpoint-up(lg) {
     @include gl-pt-0;