@gitlab/ui 41.9.0 → 42.0.0

package/src/components/base/tabs/tab/tab.spec.js

@@ -1,5 +1,4 @@
 import { shallowMount } from '@vue/test-utils';
-import { BTab } from 'bootstrap-vue';
 import { DEFAULT_TAB_TITLE_LINK_CLASS } from '../constants';
 import GlTab from './tab.vue';
 
@@ -7,7 +6,9 @@ describe('Tab component', () => {
   let wrapper;
 
   const createComponent = (options) => {
-    wrapper = shallowMount(GlTab, { ...options });
+    wrapper = shallowMount(GlTab, {
+      ...options,
+    });
   };
 
   it.each`
@@ -21,25 +22,14 @@ describe('Tab component', () => {
     'computed title link class is $expectedProp when titleLinkClass is $titleLinkClass',
     ({ titleLinkClass, expectedProp }) => {
       createComponent({
-        propsData: { titleLinkClass },
+        propsData: {
+          titleLinkClass,
+        },
       });
 
-      expect(wrapper.findComponent(BTab).props('titleLinkClass')).toEqual(expectedProp);
+      expect(wrapper.html()).toBe(
+        `<b-tab-stub tag="div" title="" titlelinkclass="${expectedProp}"></b-tab-stub>`
+      );
     }
   );
-
-  it('passes title-link-attributes to b-tab when href is explicitly passed', () => {
-    const titleLinkAttributes = 'href-example';
-    const expectedProp = { href: titleLinkAttributes };
-    createComponent({
-      propsData: { href: titleLinkAttributes },
-    });
-    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
-  });
-
-  it('passes # as href to b-tab when href is not passed', () => {
-    const expectedProp = { href: '#' };
-    createComponent();
-    expect(wrapper.findComponent(BTab).props('titleLinkAttributes')).toEqual(expectedProp);
-  });
 });

package/src/components/base/tabs/tab/tab.vue

@@ -24,14 +24,6 @@ export default {
       required: false,
       default: null,
     },
-    /**
-     * Provide an `href` for the tab, for example to associate the tab with the tab panel's ID
-     */
-    href: {
-      type: String,
-      required: false,
-      default: '#',
-    },
   },
   computed: {
     linkClass() {
@@ -54,7 +46,6 @@ export default {
     :title-link-class="linkClass"
     :query-param-value="queryParamValue"
     v-bind="$attrs"
-    :title-link-attributes="{ href }"
     v-on="$listeners"
   >
     <template v-for="slot in Object.keys($slots)" #[slot]>

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

@@ -226,20 +226,6 @@ WithScrollAndGrowing.parameters = {
   storyshots: { disable: true },
 };
 
-export const WithHref = (_args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ...components, GlBadge },
-  template: wrap(`
-    <gl-tab href="#tab-1" title="Tab 1">
-      <h2 id="tab-1">Tab panel 1</h2>
-      <p>Some paragraph text<p>
-    </gl-tab>
-    <gl-tab href="#tab-2" title="Tab 2">
-      <h2 id="tab-2">Tab panel 2</h2>
-      <p>Some paragraph text<p>
-    </gl-tab>`),
-});
-
 export default {
   title: 'base/tabs',
   component: GlTabs,

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

@@ -74,7 +74,6 @@ export default {
   component: GlToast,
   parameters: {
     bootstrapComponent: 'toast',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/base/token_selector/token_container.spec.js

@@ -62,6 +62,15 @@ describe('GlTokenContainer', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      it('passes viewOnly prop to tokens correctly', () => {
+        createComponent({ propsData: { viewOnly: true } });
+        const tokenWrappers = wrapper.findAllComponents(GlToken);
+
+        expect(tokenWrappers.wrappers.every((token) => token.props('viewOnly'))).toBe(true);
+      });
+    });
+
     describe('state', () => {
       describe('when `state` is `false`', () => {
         it('adds `aria-invalid="true"` attribute`', () => {

package/src/components/base/token_selector/token_container.vue

@@ -21,6 +21,11 @@ export default {
       type: Function,
       required: true,
     },
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -143,6 +148,7 @@ export default {
         class="gl-cursor-default"
         :class="token.class"
         :style="token.style"
+        :view-only="viewOnly"
         @close="handleClose(token)"
       >
         <slot name="token-content" :token="token">

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

@@ -46,6 +46,8 @@ describe('GlTokenSelector', () => {
     },
   ];
 
+  const placeholderText = 'Test placeholder';
+
   let wrapper;
 
   const defaultProps = { selectedTokens: [] };
@@ -141,6 +143,22 @@ describe('GlTokenSelector', () => {
       });
     });
 
+    describe('viewOnly', () => {
+      beforeEach(() => {
+        createComponent({ propsData: { viewOnly: true } });
+      });
+
+      it('passes `viewOnly` prop to GlTokenContainer', () => {
+        expect(wrapper.findComponent(GlTokenContainer).props('viewOnly')).toBe(true);
+      });
+
+      it('disables input field if viewOnly is true', () => {
+        findTextInput().trigger('focus');
+
+        expect(findTextInput().attributes('disabled')).toBe('disabled');
+      });
+    });
+
     describe('containerClass', () => {
       it('renders passed CSS classes', () => {
         createComponent({
@@ -302,6 +320,48 @@ describe('GlTokenSelector', () => {
 
       expect(wrapper.findComponent(component).vm.$scopedSlots).toHaveProperty(slot);
     });
+
+    it('renders empty-placeholder slot if tokens list is empty and input is not focused', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+    });
+
+    it('does not render empty-placeholder slot if token list is not empty', () => {
+      createComponent({
+        propsData: {
+          selectedTokens: tokens,
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
+
+    it('hides empty-placeholder slot if input is focused', async () => {
+      createComponent({
+        propsData: {
+          selectedTokens: [],
+        },
+        slots: {
+          'empty-placeholder': placeholderText,
+        },
+      });
+
+      expect(wrapper.text()).toContain(placeholderText);
+
+      await findTextInput().trigger('focus');
+      expect(wrapper.text()).not.toContain(placeholderText);
+    });
   });
 
   describe('text input events', () => {

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

@@ -95,7 +95,6 @@ export default {
   title: 'base/token_selector',
   component: GlTokenSelector,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/base/token_selector/token_selector.vue

@@ -113,6 +113,14 @@ export default {
       validator: tokensValidator,
       required: true,
     },
+    /**
+     * Controls the `view-only` mode for the tokens
+     */
+    viewOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -165,6 +173,9 @@ export default {
         ? 'is-valid gl-inset-border-1-gray-400!'
         : 'is-invalid gl-inset-border-1-red-500!';
     },
+    showEmptyPlaceholder() {
+      return this.selectedTokens.length === 0 && !this.inputFocused;
+    },
   },
   watch: {
     inputText(newValue, oldValue) {
@@ -354,14 +365,18 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
+      class="gl-token-selector gl-form-input gl-display-flex gl-align-items-center form-control form-control-plaintext gl-cursor-text! gl-py-2! gl-px-3!"
       :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
       @click="handleContainerClick"
     >
+      <!-- @slot Optional content to display a placeholder when tokens list is empty
+        and user doesn't edit tokens -->
+      <slot v-if="showEmptyPlaceholder" name="empty-placeholder"></slot>
       <gl-token-container
         :tokens="selectedTokens"
         :state="state"
         :register-focus-on-token="registerFocusOnToken"
+        :view-only="viewOnly"
         @token-remove="removeToken"
         @cancel-focus="cancelTokenFocus"
       >
@@ -383,6 +398,7 @@ export default {
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"
             :placeholder="placeholder"
+            :disabled="viewOnly"
             v-bind="textInputAttrs"
             @input="inputText = $event.target.value"
             @focus="handleFocus"

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

@@ -49,7 +49,6 @@ export default {
   component: GlTooltip,
   parameters: {
     bootstrapComponent: 'b-tooltip',
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/area/area.stories.js

@@ -153,9 +153,6 @@ MultSeries.args = generateProps({
 export default {
   title: 'charts/area-chart',
   component: GlAreaChart,
-  parameters: {
-    knobs: { disable: true },
-  },
   argTypes: {
     ...disableControls([
       'showToolbox',

package/src/components/charts/bar/bar.stories.js

@@ -59,7 +59,6 @@ export default {
     ]),
   },
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/discrete_scatter/discrete_scatter.stories.js

@@ -57,7 +57,4 @@ WithZoomAndScroll.args = generateProps({
 export default {
   title: 'charts/discrete-scatter-chart',
   component: GlDiscreteScatterChart,
-  parameters: {
-    knobs: { disable: true },
-  },
 };

package/src/components/charts/gauge/gauge.stories.js

@@ -85,7 +85,6 @@ export default {
   title: 'charts/gauge-chart',
   component: GlGauge,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/heatmap/heatmap.stories.js

@@ -60,9 +60,6 @@ WithToolbox.args = generateProps({ options: { toolbox } });
 export default {
   title: 'charts/heatmap',
   component: GlHeatmap,
-  parameters: {
-    knobs: { disable: true },
-  },
   argTypes: {
     ...disableControls([
       'showToolbox',

package/src/components/charts/legend/legend.stories.js

@@ -107,6 +107,5 @@ export default {
   component: GlChartLegend,
   parameters: {
     controls: { disable: true },
-    knobs: { disable: true },
   },
 };

package/src/components/charts/series_label/series_label.stories.js

@@ -64,7 +64,6 @@ export default {
   title: 'charts/chart-series-label',
   component: GlChartSeriesLabel,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

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

@@ -64,7 +64,6 @@ export default {
   title: 'charts/single-stat',
   component: GlSingleStat,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/sparkline/sparkline.stories.js

@@ -44,7 +44,6 @@ export default {
   title: 'charts/sparkline-chart',
   component: GlSparklineChart,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/stacked_column/stacked_column.stories.js

@@ -104,7 +104,6 @@ export default {
   title: 'charts/stacked-column-chart',
   component: GlStackedColumnChart,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/charts/tooltip/tooltip.stories.js

@@ -103,7 +103,6 @@ export default {
   component: GlChartTooltip,
   parameters: {
     bootstrapComponent: 'b-popover',
-    knobs: { disable: true },
     controls: { disable: true },
     docs: {
       description: {

package/src/components/regions/empty_state/empty_state.stories.js

@@ -143,7 +143,6 @@ export default {
   title: 'regions/empty-state',
   component: GlEmptyState,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/friendly_wrap/friendly_wrap.stories.js

@@ -47,7 +47,6 @@ export default {
   title: 'utilities/friendly-wrap',
   component: GlFriendlyWrap,
   parameters: {
-    knobs: { disabled: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/intersection_observer/intersection_observer.stories.js

@@ -152,7 +152,6 @@ export default {
   title: 'utilities/intersection-observer',
   component: GlIntersectionObserver,
   parameters: {
-    knobs: { disable: true },
     storyshots: { disable: true },
     docs: {
       description: {

package/src/components/utilities/intersperse/intersperse.stories.js

@@ -34,7 +34,6 @@ export default {
   title: 'utilities/intersperse',
   component: GlIntersperse,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/components/utilities/truncate/truncate.stories.js

@@ -28,7 +28,6 @@ export default {
   title: 'utilities/truncate',
   component: GlTruncate,
   parameters: {
-    knobs: { disable: true },
     storyshots: { disable: true },
     docs: {
       description: {

package/src/directives/outside/outside.stories.js

@@ -28,7 +28,6 @@ export default {
   title: 'directives/outside-directive',
   component: GlOutsideDirective,
   parameters: {
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/resize_observer/resize_observer.stories.js

@@ -62,7 +62,6 @@ export default {
   title: 'directives/resize-observer-directive',
   component: GlResizeObserver,
   parameters: {
-    knobs: { disable: true },
     storyshots: { disable: true },
     docs: {
       description: {

package/src/directives/safe_html/safe_html.stories.js

@@ -49,7 +49,6 @@ export default {
   component: GlSafeHtml,
   parameters: {
     storyshots: { disable: true },
-    knobs: { disable: true },
     docs: {
       description: {
         component: readme,

package/src/directives/safe_link/safe_link.stories.js

@@ -29,7 +29,6 @@ export default {
   title: 'directives/safe-link-directive',
   component: SafeLink,
   parameters: {
-    knobs: { disable: true },
     storyshots: { disable: true },
     docs: {
       description: {

package/src/utils/constants.js

@@ -97,7 +97,6 @@ export const buttonVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   dashed: 'dashed',
   link: 'link',
@@ -121,7 +120,6 @@ export const dropdownVariantOptions = {
   confirm: 'confirm',
   info: 'info (deprecated)',
   success: 'success (deprecated)',
-  warning: 'warning (deprecated)',
   danger: 'danger',
   link: 'link',
 };