@gitlab/ui 34.0.0 → 36.1.0

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

@@ -1,4 +1,4 @@
-import { GlDeprecatedSkeletonLoading } from '../../../../index';
+import { GlDeprecatedSkeletonLoading } from '../../../index';
 import readme from './skeleton_loading.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlSorting, GlSortingItem } from '../../../../index';
+import { GlSorting, GlSortingItem } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './sorting.md';
 

package/src/components/base/sorting/sorting_item.stories.js

@@ -1,4 +1,4 @@
-import { GlSorting, GlSortingItem } from '../../../../index';
+import { GlSorting, GlSortingItem } from '../../../index';
 import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './sorting_item.md';
 

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

@@ -1,6 +1,8 @@
-import { GlTable } from '../../../../index';
+import { GlTable, GlFormInput } from '../../../index';
 import readme from './table.md';
 
+const components = { GlTable };
+
 const tableItems = [
   {
     column_one: 'test',
@@ -23,6 +25,7 @@ const generateProps = ({ fixed = false, footClone = false, stacked = false } = {
 });
 
 export const Default = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
   <gl-table
@@ -55,6 +58,7 @@ export const Default = (args, { argTypes }) => ({
 Default.args = generateProps();
 
 export const Empty = (args, { argTypes }) => ({
+  components,
   props: Object.keys(argTypes),
   template: `
       <gl-table show-empty />
@@ -63,6 +67,7 @@ export const Empty = (args, { argTypes }) => ({
 Empty.parameters = { controls: { disable: true } };
 
 export const WithFilter = (args, { argTypes }) => ({
+  components: { ...components, GlFormInput },
   props: Object.keys(argTypes),
   template: `<div class="gl-line-height-normal">
       <gl-form-input v-model="filter" placeholder="Type to search" />

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

@@ -13,7 +13,6 @@ const TEST_ACTION = {
   text: 'Lorem ipsum',
 };
 const TEST_DEFAULT_PROPS = {
-  theme: 'red',
   contentClass: 'gl-test-content-class',
   navClass: 'gl-test-nav-class',
 };

package/src/components/base/tabs/tabs/tabs.md

@@ -10,7 +10,7 @@ tab, when active, will reveal it’s own unique content.
 ## Using the component Vue
 
 ~~~js
-<gl-tabs theme="indigo">
+<gl-tabs>
   <gl-tab title="Tab 1">
     Tab panel 1
   </gl-tab>
@@ -75,7 +75,7 @@ component. This is a separate Vue component because of some limitations:
 exceptions).
 
 ~~~html
-<gl-scrollable-tabs theme="indigo">
+<gl-scrollable-tabs>
   <gl-tab v-for="tab in tabs" :key="tab.key" :title="tab.title"> {{ tab.content }} </gl-tab>
 </gl-scrollable-tabs>
 ~~~

package/src/components/base/tabs/tabs/tabs.scss

@@ -52,125 +52,13 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-}
-
-.gl-tab-nav-item-active-indigo {
-  @include gl-inset-border-b-2-theme-indigo-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-indigo {
-  @include gl-inset-border-b-2-theme-indigo-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-blue {
-  @include gl-inset-border-b-2-theme-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-blue {
-  @include gl-inset-border-b-2-theme-light-blue-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-blue-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-red {
-  @include gl-inset-border-b-2-theme-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-red {
-  @include gl-inset-border-b-2-theme-light-red-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-light-red-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-green {
-  @include gl-inset-border-b-2-theme-green-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light-green {
-  @include gl-inset-border-b-2-theme-green-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-green-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-dark {
-  @include gl-inset-border-b-2-gray-500;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-500, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-light {
-  @include gl-inset-border-b-2-gray-300;
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-300, $focus-ring;
-    @include gl-outline-none;
-  }
-}
-
-.gl-tab-nav-item-active-gl-dark {
-  @include gl-inset-border-b-2-gray-100;
+  @include gl-inset-border-b-2-theme-accent;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100, $focus-ring;
+    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500),
+      $focus-ring;
     @include gl-outline-none;
   }
 }

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

@@ -1,6 +1,6 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { GlButton } from '../../../../../index';
+import { GlButton } from '../../../../index';
 import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlTab from '../tab/tab.vue';
 import GlTabs from './tabs.vue';
@@ -44,9 +44,12 @@ describe('tabs component', () => {
     wrapper.findAll('[role="tab"]').wrappers.find((tabWrapper) => tabWrapper.text() === text);
 
   describe('default', () => {
-    it('should have a default theme of indigo', () => {
-      buildTabs({ mountFn: shallowMount });
-      expect(wrapper.attributes('activenavitemclass')).toContain('gl-tab-nav-item-active-indigo');
+    it('the active tab should be styled', async () => {
+      buildTabs();
+
+      await nextTick();
+
+      expect(findActiveTab().classes()).toContain('gl-tab-nav-item-active');
     });
   });
 

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

@@ -1,12 +1,12 @@
-import { withKnobs, select, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { range } from 'lodash';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlTabs, GlTab, GlScrollableTabs } from '../../../../../index';
-import { colorThemes } from '../../../../utils/constants';
+import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
 import docs from './tabs.md';
 
 const ScrollableTabsGenerator = {
   components: {
+    GlTabs,
     GlScrollableTabs,
     GlTab,
   },
@@ -39,10 +39,6 @@ const createBaseStory = () => ({
     GlTab,
   },
   props: {
-    theme: {
-      type: String,
-      default: select('theme', [...Object.keys(colorThemes), 'gl-dark'], 'indigo'),
-    },
     syncActiveTabWithQueryParams: {
       type: Boolean,
       default: boolean('sync-active-tab-with-query-params', false),
@@ -55,7 +51,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('default', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
+      <gl-tabs :sync-active-tab-with-query-params="syncActiveTabWithQueryParams">
         <gl-tab title="Tab 1">
           Tab panel 1
         </gl-tab>
@@ -104,7 +100,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('contentless tab', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <gl-tabs>
         <gl-tab title="Regular tab">
           <p>Regular tab content.</p>
           <p>The contentless tab is not selectable, as it has no content. This is useful for displaying things that aren't really tabs after the list of tabs.</p>
@@ -123,7 +119,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('empty state', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme">
+      <gl-tabs>
         <template #empty>
           This content is only displayed when there are no tabs. Useful for dynamically added/removed tabs.
         </template>
@@ -133,7 +129,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
   .add('justified tabs', () => ({
     ...createBaseStory(),
     template: `
-      <gl-tabs :theme="theme" justified>
+      <gl-tabs justified>
         <gl-tab title="Tab 1">
           <p>Tab panel 1</p>
         </gl-tab>
@@ -177,7 +173,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
     components: {
       ScrollableTabsGenerator,
     },
-    template: '<scrollable-tabs-generator :count="50" :theme="theme" />',
+    template: '<scrollable-tabs-generator :count="50" />',
   }))
   .add(
     'with scroll and growing',
@@ -197,7 +193,7 @@ documentedStoriesOf('base/tabs/tabs', docs)
           this.count += 1;
         }, 2000);
       },
-      template: '<scrollable-tabs-generator :count="count" :theme="theme" />',
+      template: '<scrollable-tabs-generator :count="count" />',
     }),
     { storyshots: false }
   );

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

@@ -1,6 +1,6 @@
 <script>
 import { BTabs } from 'bootstrap-vue';
-import { colorThemes, tabsButtonDefaults } from '../../../../utils/constants';
+import { tabsButtonDefaults } from '../../../../utils/constants';
 import GlButton from '../../button/button.vue';
 
 const validatorHelper = (obj) =>
@@ -31,12 +31,6 @@ export default {
       default: null,
       validator: (obj) => validatorHelper(obj),
     },
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: (value) => Object.keys(colorThemes).includes(value) || value === 'gl-dark',
-    },
     contentClass: {
       type: [String, Array, Object],
       required: false,
@@ -77,9 +71,6 @@ export default {
     hasActions() {
       return [this.actionPrimary, this.actionSecondary, this.actionTertiary].some(Boolean);
     },
-    activeItemBorderClass() {
-      return `gl-tab-nav-item-active-${this.theme}`;
-    },
     listeners() {
       return {
         ...this.$listeners,
@@ -214,7 +205,7 @@ export default {
     ref="bTabs"
     :no-nav-style="true"
     :no-fade="true"
-    :active-nav-item-class="`gl-tab-nav-item-active ${activeItemBorderClass}`"
+    active-nav-item-class="gl-tab-nav-item-active"
     :content-class="[contentClass, 'gl-tab-content']"
     :nav-class="[navClass, 'gl-tabs-nav']"
     :justified="justified"

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

@@ -1,11 +1,13 @@
 import Vue from 'vue';
-import { GlToast } from '../../../../index';
+import { GlToast, GlButton } from '../../../index';
 import readme from './toast.md';
 
 Vue.use(GlToast);
 
+const components = { GlToast, GlButton };
+
 const Template = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show default toast
@@ -23,7 +25,7 @@ const Template = () => ({
 export const Default = Template.bind({});
 
 export const WithActions = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with actions
@@ -44,7 +46,7 @@ export const WithActions = () => ({
 });
 
 export const WithLongContent = () => ({
-  components: { GlToast },
+  components,
   template: `
   <gl-button @click="showToast()">
     Show toast with a long content

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

@@ -1,4 +1,4 @@
-import { GlToggle } from '../../../../index';
+import { GlToggle } from '../../../index';
 import { toggleLabelPosition } from '../../../utils/constants';
 import readme from './toggle.md';
 

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

@@ -1,4 +1,4 @@
-import { GlToken } from '../../../../index';
+import { GlToken, GlAvatar } from '../../../index';
 import { tokenVariants } from '../../../utils/constants';
 
 import readme from './token.md';
@@ -31,7 +31,7 @@ ViewOnly.args = generateProps({
 });
 
 export const WithAvatar = () => ({
-  components: { GlToken },
+  components: { GlToken, GlAvatar },
   template: `
     <div class="gl-display-flex">
     <gl-token><gl-avatar src="./img/avatar.png" :size="16" />Token</gl-token>

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

@@ -1,8 +1,9 @@
-import { GlTooltip, GlTooltipDirective } from '../../../../index';
+import { GlTooltip, GlTooltipDirective, GlButton } from '../../../index';
 import readme from './tooltip.md';
 
 function makeTooltip(modifier = '') {
   return {
+    components: { GlTooltip, GlButton },
     directives: {
       GlTooltip: GlTooltipDirective,
     },

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

@@ -1,6 +1,6 @@
 import { withKnobs, object, array, boolean } from '@storybook/addon-knobs';
 import { times } from 'lodash';
-import { GlAreaChart } from '../../../../charts';
+import { GlAreaChart } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';

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

@@ -1,4 +1,4 @@
-import { GlBarChart } from '../../../../charts';
+import { GlBarChart } from '../../../charts';
 import readme from './bar.md';
 
 const Template = (args, { argTypes }) => ({

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

@@ -1,5 +1,5 @@
-import { GlChart } from '../../../../charts';
-import { GlTabs, GlTab } from '../../../../index';
+import { GlChart } from '../../../charts';
+import { GlTabs, GlTab } from '../../../index';
 import readme from './chart.md';
 
 const Template = (args, { argTypes = {} }) => ({

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

@@ -1,4 +1,4 @@
-import { GlColumnChart } from '../../../../charts';
+import { GlColumnChart } from '../../../charts';
 import {
   mockDefaultLineData,
   mockDefaultBarData,

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

@@ -1,4 +1,4 @@
-import { GlDiscreteScatterChart } from '../../../../charts';
+import { GlDiscreteScatterChart } from '../../../charts';
 
 const Template = (args, { argTypes }) => ({
   components: { GlDiscreteScatterChart },

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

@@ -1,4 +1,4 @@
-import { GlHeatmap } from '../../../../charts';
+import { GlHeatmap } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { toolbox } from '../../../utils/charts/story_config';
 import readme from '../area/area.md';

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

@@ -1,4 +1,4 @@
-import { GlChart, GlChartLegend } from '../../../../charts';
+import { GlChart, GlChartLegend } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { LEGEND_LAYOUT_TABLE } from '../../../utils/charts/constants';
 import { generateSeriesData } from '../../../utils/charts/story_config';

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

@@ -1,5 +1,5 @@
 import { withKnobs, object, boolean, array } from '@storybook/addon-knobs';
-import { GlLineChart } from '../../../../charts';
+import { GlLineChart } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { mockAnnotationsSeries, mockAnnotationsConfigs } from '../../../utils/charts/mock_data';
 import { toolbox } from '../../../utils/charts/story_config';

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

@@ -1,5 +1,5 @@
 import { withKnobs, text } from '@storybook/addon-knobs';
-import { GlChartSeriesLabel } from '../../../../charts';
+import { GlChartSeriesLabel } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { colorPaletteDefault } from '../../../utils/charts/theme';
 import {

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

@@ -1,6 +1,6 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import { withKnobs, text, select, boolean, number } from '@storybook/addon-knobs';
-import { GlSingleStat } from '../../../../charts';
+import { GlSingleStat } from '../../../charts';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { badgeVariantOptions } from '../../../utils/constants';
 import readme from './single_stat.md';

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

@@ -1,4 +1,4 @@
-import { GlSparklineChart } from '../../../../charts';
+import { GlSparklineChart } from '../../../charts';
 import readme from './sparkline.md';
 
 const chartData = [

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

@@ -1,4 +1,4 @@
-import { GlStackedColumnChart } from '../../../../charts';
+import { GlStackedColumnChart } from '../../../charts';
 import {
   mockDefaultStackedLineData,
   mockDefaultStackedBarData,

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

@@ -1,4 +1,4 @@
-import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../../charts';
+import { GlChart, GlChartTooltip, GlChartSeriesLabel } from '../../../charts';
 import {
   SERIES_NAME,
   SERIES_NAME_LONG,

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

@@ -1,4 +1,4 @@
-import { GlDashboardSkeleton } from '../../../../index';
+import { GlDashboardSkeleton } from '../../../index';
 import readme from './dashboard_skeleton.md';
 
 const defaultValue = (prop) => GlDashboardSkeleton.props[prop].default;

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

@@ -1,4 +1,4 @@
-import { GlButton, GlEmptyState } from '../../../../index';
+import { GlButton, GlEmptyState } from '../../../index';
 import readme from './empty_state.md';
 
 const template = `

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

@@ -1,4 +1,4 @@
-import { GlFriendlyWrap } from '../../../../index';
+import { GlFriendlyWrap } from '../../../index';
 import readme from './friendly_wrap.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlIntersectionObserver } from '../../../../index';
+import { GlIntersectionObserver } from '../../../index';
 import readme from './intersection_observer.md';
 
 const components = {

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

@@ -1,4 +1,4 @@
-import { GlIntersperse } from '../../../../index';
+import { GlIntersperse } from '../../../index';
 import readme from './intersperse.md';
 
 const template = `

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

@@ -1,4 +1,4 @@
-import { GlSprintf, GlButton, GlLink } from '../../../../index';
+import { GlSprintf, GlButton, GlLink } from '../../../index';
 import readme from './sprintf.md';
 
 const generateProps = ({ message = 'Written by %{author}', placeholders } = {}) => ({

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

@@ -1,19 +1,5 @@
-import examples from './examples';
 import description from './truncate.md';
 
 export default {
   description,
-  examples,
-  propsInfo: {
-    text: {
-      additionalInfo: 'Text to be ellipsized',
-    },
-    position: {
-      additionalInfo: 'Ellipsis position',
-      enum: 'truncateOptions',
-    },
-    withTooltip: {
-      additionalInfo: 'Display the full text in a tooltip only if it is being truncated',
-    },
-  },
 };

package/src/components/utilities/truncate/truncate.md

@@ -1,9 +1,5 @@
-# Truncate
-
 The `GlTruncate` component lets you truncate the long texts with ellipsis.
 
-<!-- STORY -->
-
 > **Tip:** Try resizing the side panel for truncation.
 
 ## Usage