@gitlab/ui 33.1.1 → 35.1.0

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,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { GlButton } from '../../../../../index';
 import { tabsButtonDefaults } from '../../../../utils/constants';
@@ -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 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/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/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

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

@@ -1,40 +1,51 @@
-import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { GlTruncate } from '../../../../index';
 import { POSITION } from './constants';
 import readme from './truncate.md';
 
-const components = {
-  GlTruncate,
-};
-
 const template = '<gl-truncate :text="text" :position="position" :with-tooltip="withTooltip" />';
 
-function generateProps({
-  longText = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
+const generateProps = ({
+  text = 'src/thisIs/AVeryLongFilePath/that/needs/to/be/smartly/truncated/from/the/middle/so/we/dont/lose/important/information/here.vue',
   position = 'middle',
   withTooltip = false,
-} = {}) {
-  return {
+} = {}) => ({
+  text,
+  position,
+  withTooltip,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: {
+    GlTruncate,
+  },
+  props: Object.keys(argTypes),
+  template,
+});
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'utilities/truncate',
+  component: GlTruncate,
+  parameters: {
+    knobs: { disable: true },
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
     text: {
-      type: String,
-      default: text('text', longText),
+      control: 'text',
     },
     position: {
-      type: String,
-      default: select('position', Object.values(POSITION), position),
+      options: Object.values(POSITION),
+      control: 'select',
     },
     withTooltip: {
-      default: boolean('withTooltip', withTooltip),
+      control: 'boolean',
     },
-  };
-}
-
-documentedStoriesOf('utilities/truncate', readme)
-  .addParameters({ storyshots: false })
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }));
+  },
+};

package/src/components/utilities/truncate/truncate.vue

@@ -10,16 +10,25 @@ export default {
     GlResizeObserver: GlResizeObserverDirective,
   },
   props: {
+    /**
+     * Text to be ellipsized
+     */
     text: {
       type: String,
       required: true,
     },
+    /**
+     * Ellipsis position
+     */
     position: {
       type: String,
       required: false,
       default: POSITION.END,
       validator: (value) => Object.values(POSITION).includes(value),
     },
+    /**
+     * Display the full text in a tooltip only if it is being truncated
+     */
     withTooltip: {
       type: Boolean,
       required: false,

package/src/scss/utilities.scss

@@ -1848,6 +1848,14 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600 !important
 }
 
+.gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500)
+}
+
+.gl-inset-border-b-2-theme-accent\! {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500) !important
+}
+
 .gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -104,6 +104,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-600;
 }
 
+@mixin gl-inset-border-b-2-theme-accent {
+  box-shadow: inset 0 -#{$gl-border-size-2} 0 0 var(--gl-theme-accent, $theme-indigo-500);
+}
+
 @mixin gl-inset-border-b-2-theme-indigo-500 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $theme-indigo-500;
 }

package/dist/components/base/nav/examples/index.js

@@ -1,13 +0,0 @@
-import BasicExample from './nav.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'nav-basic',
-    name: 'Basic',
-    description: 'Basic Nav',
-    component: BasicExample
-  }]
-}];
-
-export default index;

package/dist/components/base/nav/examples/nav.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-nav',[_c('gl-nav-item',{attrs:{"active":""}},[_vm._v("Active")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Link")]),_vm._v(" "),_c('gl-nav-item',[_vm._v("Another Link")]),_vm._v(" "),_c('gl-nav-item',{attrs:{"disabled":""}},[_vm._v("Disabled")])],1)};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/dist/components/base/nav/nav_item.documentation.js

@@ -1,13 +0,0 @@
-var nav_item = "# Nav Item\n\n<!-- STORY -->\n\n## Usage\n\nThe navigation item component is meant to be used for for actionable links (or router-links).\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item
-});
-
-var nav_item_documentation = {
-  description,
-  bootstrapComponent: 'b-nav-item'
-};
-
-export default nav_item_documentation;

package/dist/components/base/nav/nav_item_dropdown.documentation.js

@@ -1,14 +0,0 @@
-var nav_item_dropdown = "# Nav Item Dropdown\n\n<!-- STORY -->\n\n## Usage\n\nUse `<gl-nav-item-dropdown>` to place dropdown items within your nav.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': nav_item_dropdown
-});
-
-var nav_item_dropdown_documentation = {
-  followsDesignSystem: false,
-  description,
-  bootstrapComponent: 'b-nav-item-dropdown'
-};
-
-export default nav_item_dropdown_documentation;

package/dist/components/utilities/truncate/examples/index.js

@@ -1,13 +0,0 @@
-import TruncateBasicExample from './truncate.basic.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'truncate',
-    name: 'Basic',
-    description: 'Basic truncation',
-    component: TruncateBasicExample
-  }]
-}];
-
-export default index;

package/dist/components/utilities/truncate/examples/truncate.basic.example.js

@@ -1,38 +0,0 @@
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-/* script */
-
-/* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-truncate',{attrs:{"text":"ee/app/assets/javascripts/vue_shared/security_reports/components/utils/truncate/smart-truncate/src/index.js"}})};
-var __vue_staticRenderFns__ = [];
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = __vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    {},
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export default __vue_component__;

package/src/components/base/nav/examples/index.js

@@ -1,15 +0,0 @@
-import BasicExample from './nav.basic.example.vue';
-
-export default [
-  {
-    name: 'Basic',
-    items: [
-      {
-        id: 'nav-basic',
-        name: 'Basic',
-        description: 'Basic Nav',
-        component: BasicExample,
-      },
-    ],
-  },
-];

package/src/components/base/nav/examples/nav.basic.example.vue

@@ -1,8 +0,0 @@
-<template>
-  <gl-nav>
-    <gl-nav-item active>Active</gl-nav-item>
-    <gl-nav-item>Link</gl-nav-item>
-    <gl-nav-item>Another Link</gl-nav-item>
-    <gl-nav-item disabled>Disabled</gl-nav-item>
-  </gl-nav>
-</template>

package/src/components/base/nav/nav_item.documentation.js

@@ -1,6 +0,0 @@
-import * as description from './nav_item.md';
-
-export default {
-  description,
-  bootstrapComponent: 'b-nav-item',
-};

package/src/components/base/nav/nav_item.md

@@ -1,7 +0,0 @@
-# Nav Item
-
-<!-- STORY -->
-
-## Usage
-
-The navigation item component is meant to be used for for actionable links (or router-links).