@gitlab/ui 58.4.0 → 58.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "58.4.0",
+  "version": "58.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -29,7 +29,8 @@
     "clean": "rm -r dist storybook scss_to_js/scss_variables.* src/scss/utilities.scss",
     "cy:run": "cypress run --browser firefox",
     "start": "yarn storybook",
-    "storybook": "yarn storybook-prep && start-storybook --ci --host localhost --port 9001 -c .storybook",
+    "storybook": "yarn storybook-prep && node ./bin/run_storybook.js --ci --host localhost --port 9001 -c .storybook",
+    "storybook-vue3": "yarn storybook-prep && VUE_VERSION=3 node ./bin/run_storybook.js --ci --host localhost --port 9001 -c .storybook",
     "storybook-prep": "run-s generate-utilities build-scss-variables copy-fonts",
     "storybook-static": "yarn storybook-prep && build-storybook -c .storybook -o storybook",
     "pretest:unit": "yarn build-scss-variables",
@@ -78,6 +79,7 @@
   },
   "resolutions": {
     "@storybook/vue/webpack": "^5.9.0",
+    "@storybook/vue3/vue-loader": "^17.0.0",
     "chokidar": "^3.5.2",
     "sane": "^5.0.1"
   },
@@ -88,7 +90,7 @@
     "@gitlab/eslint-plugin": "18.2.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.26.0",
+    "@gitlab/svgs": "3.31.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -102,6 +104,7 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/theming": "6.5.16",
     "@storybook/vue": "6.5.16",
+    "@storybook/vue3": "6.5.16",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -114,7 +117,6 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.6.2",
-    "bootstrap-vue-vue3": "npm:bootstrap-vue@2.23.1",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.36.0",
@@ -130,6 +132,7 @@
     "jest-environment-jsdom": "29.5.0",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
+    "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
     "plop": "^2.5.4",
@@ -156,6 +159,7 @@
     "stylelint-prettier": "2.0.0",
     "vue": "2.7.14",
     "vue-loader": "^15.8.3",
+    "vue-loader-vue3": "npm:vue-loader@17",
     "vue-template-compiler": "2.7.14",
     "vue-test-utils-compat": "^0.0.10",
     "webpack": "^5.9.0"

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

@@ -1,5 +1,6 @@
-import { GlAlert, GlToggle } from '../../../index';
+import GlToggle from '../toggle/toggle.vue';
 import { alertVariantOptions } from '../../../utils/constants';
+import GlAlert from './alert.vue';
 import readme from './alert.md';
 
 const template = `

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

@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import { GlAvatar } from '../../../index';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
+import GlAvatar from './avatar.vue';
 import readme from './avatar.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);

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

@@ -1,8 +1,10 @@
 import Vue from 'vue';
-import { GlAvatarLabeled, GlBadge, GlButton } from '../../../index';
+import GlBadge from '../badge/badge.vue';
+import GlButton from '../button/button.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
+import GlAvatarLabeled from './avatar_labeled.vue';
 import readme from './avatar_labeled.md';
 
 Vue.directive('gl-tooltip', GlTooltipDirective);

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

@@ -1,6 +1,8 @@
-import { GlAvatarLink, GlAvatar, GlAvatarLabeled } from '../../../index';
+import GlAvatar from '../avatar/avatar.vue';
+import GlAvatarLabeled from '../avatar_labeled/avatar_labeled.vue';
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
+import GlAvatarLink from './avatar_link.vue';
 import readme from './avatar_link.md';
 
 const components = { GlAvatarLink, GlAvatar, GlAvatarLabeled };

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

@@ -1,5 +1,8 @@
-import { GlAvatarsInline, GlAvatar, GlAvatarLink, GlTooltipDirective } from '../../../index';
+import GlAvatar from '../avatar/avatar.vue';
+import GlAvatarLink from '../avatar_link/avatar_link.vue';
+import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarsInlineSizeOptions } from '../../../utils/constants';
+import GlAvatarsInline from './avatars_inline.vue';
 import readme from './avatars_inline.md';
 
 const defaultAvatars = [

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

@@ -1,11 +1,11 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlBadge } from '../../../index';
 import {
   badgeSizeOptions,
   badgeVariantOptions,
   badgeIconSizeOptions,
 } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
+import GlBadge from './badge.vue';
 import readme from './badge.md';
 
 const template = `

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

@@ -1,7 +1,8 @@
 import clusterPopoverSvg from '@gitlab/svgs/dist/illustrations/cluster_popover.svg';
 import serviceDeskCalloutSvg from '@gitlab/svgs/dist/illustrations/service_desk_callout.svg';
-import { GlBanner, GlButton } from '../../../index';
+import GlButton from '../button/button.vue';
 import { bannerVariants } from '../../../utils/constants';
+import GlBanner from './banner.vue';
 import readme from './banner.md';
 
 const template = `

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

@@ -1,5 +1,5 @@
-import { GlBreadcrumb } from '../../../index';
 import avatarPath from '../../../../static/img/avatar.png';
+import GlBreadcrumb from './breadcrumb.vue';
 import readme from './breadcrumb.md';
 
 const template = `

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

@@ -1,6 +1,6 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlBroadcastMessage } from '../../../index';
 import { colorThemes } from '../../../utils/constants';
+import GlBroadcastMessage from './broadcast_message.vue';
 import { TYPE_LIST, TYPE_NOTIFICATION } from './constants';
 import readme from './broadcast_message.md';
 

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

@@ -1,12 +1,7 @@
-import {
-  GlButton,
-  GlButtonGroup,
-  GlBadge,
-  GlDropdown,
-  GlDropdownItem,
-  GlSorting,
-  GlSortingItem,
-} from '../../../index';
+import GlDropdown from '../dropdown/dropdown.vue';
+import GlDropdownItem from '../dropdown/dropdown_item.vue';
+import GlSorting from '../sorting/sorting.vue';
+import GlSortingItem from '../sorting/sorting_item.vue';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -14,6 +9,9 @@ import {
   buttonSizeOptions,
   targetOptions,
 } from '../../../utils/constants';
+import GlBadge from '../badge/badge.vue';
+import GlButtonGroup from '../button_group/button_group.vue';
+import GlButton from './button.vue';
 import readme from './button.md';
 
 const components = { GlButton };

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

@@ -1,4 +1,7 @@
-import { GlButton, GlButtonGroup, GlDropdown, GlDropdownItem } from '../../../index';
+import GlButton from '../button/button.vue';
+import GlDropdown from '../dropdown/dropdown.vue';
+import GlDropdownItem from '../dropdown/dropdown_item.vue';
+import GlButtonGroup from './button_group.vue';
 import readme from './button_group.md';
 
 const generateProps = ({ vertical = false } = {}) => ({ vertical });

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

@@ -1,4 +1,6 @@
-import { GlButton, GlCard, GlCollapse } from '../../../index';
+import GlButton from '../button/button.vue';
+import GlCard from '../card/card.vue';
+import GlCollapse from './collapse.vue';
 import readme from './collapse.md';
 
 const generateProps = ({ visible = false } = {}) => ({ visible });

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

@@ -1,7 +1,8 @@
-import { GlFormGroup, GlDatepicker } from '../../../index';
+import GlFormGroup from '../form/form_group/form_group.vue';
 import { disableControls } from '../../../utils/stories_utils';
 import { useFakeDate } from '../../../utils/use_fake_date';
 import { makeContainer } from '../../../utils/story_decorators/container';
+import GlDatepicker from './datepicker.vue';
 import readme from './datepicker.md';
 
 const defaults = {

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

@@ -1,5 +1,7 @@
-import { GlDrawer, GlButton, GlMarkdown } from '../../../index';
+import GlButton from '../button/button.vue';
+import GlMarkdown from '../markdown/markdown.vue';
 import { drawerVariants } from '../../../utils/constants';
+import GlDrawer from './drawer.vue';
 import readme from './drawer.md';
 
 const components = { GlDrawer, GlButton, GlMarkdown };

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

@@ -1,21 +1,19 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import {
-  GlAvatar,
-  GlIcon,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownSectionHeader,
-  GlDropdownItem,
-  GlDropdownText,
-  GlDropdownForm,
-  GlButton,
-  GlSearchBoxByType,
-} from '../../../index';
+import GlAvatar from '../avatar/avatar.vue';
+import GlIcon from '../icon/icon.vue';
+import GlButton from '../button/button.vue';
+import GlSearchBoxByType from '../search_box_by_type/search_box_by_type.vue';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
   dropdownVariantOptions,
 } from '../../../utils/constants';
+import GlDropdownDivider from './dropdown_divider.vue';
+import GlDropdownSectionHeader from './dropdown_section_header.vue';
+import GlDropdownItem from './dropdown_item.vue';
+import GlDropdownText from './dropdown_text.vue';
+import GlDropdownForm from './dropdown_form.vue';
+import GlDropdown from './dropdown.vue';
 import readme from './dropdown.md';
 
 const components = {

package/src/components/base/dropdown/dropdown_item.stories.js

@@ -1,6 +1,6 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlDropdownItem } from '../../../index';
 import { variantCssColorMap } from '../../../utils/constants';
+import GlDropdownItem from './dropdown_item.vue';
 import readme from './dropdown_item.md';
 
 const components = {

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

@@ -1,18 +1,16 @@
-import {
-  GlFilteredSearch,
-  GlFilteredSearchToken,
-  GlFilteredSearchSuggestion,
-  GlFilteredSearchSuggestionList,
-  GlFilteredSearchTerm,
-  GlFilteredSearchTokenSegment,
-  GlLoadingIcon,
-  GlIcon,
-  GlToken,
-  GlAvatar,
-  GlDropdownDivider,
-} from '../../../index';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import GlIcon from '../icon/icon.vue';
+import GlToken from '../token/token.vue';
+import GlAvatar from '../avatar/avatar.vue';
+import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import { makeContainer } from '../../../utils/story_decorators/container';
+import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';
+import GlFilteredSearchTerm from './filtered_search_term.vue';
+import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
+import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
+import GlFilteredSearchToken from './filtered_search_token.vue';
+import GlFilteredSearch from './filtered_search.vue';
 import readme from './filtered_search.md';
 
 const fakeUsers = [
@@ -41,6 +39,7 @@ const fakeLabels = [
 
 const UserToken = {
   name: 'UserToken',
+  __v_skip: true /* temporary workaround for @vue/compat */,
   components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlAvatar },
   props: ['value', 'active'],
   inheritAttrs: false,
@@ -118,6 +117,7 @@ const UserToken = {
 
 const MilestoneToken = {
   name: 'MilestoneToken',
+  __v_skip: true /* temporary workaround for @vue/compat */,
   components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon },
   props: ['value', 'active'],
   inheritAttrs: false,
@@ -179,6 +179,7 @@ const MilestoneToken = {
 
 const LabelToken = {
   name: 'LabelToken',
+  __v_skip: true /* temporary workaround for @vue/compat */,
   components: {
     GlFilteredSearchToken,
     GlFilteredSearchSuggestion,
@@ -426,6 +427,7 @@ export const WithFriendlyText = () => ({
 
 export const WithMultiSelect = () => {
   const MultiUserToken = {
+    __v_skip: true /* temporary workaround for @vue/compat */,
     props: ['value', 'active', 'config'],
     components: {
       GlFilteredSearchToken,

package/src/components/base/filtered_search/filtered_search_suggestion.stories.js

@@ -1,4 +1,4 @@
-import { GlFilteredSearchSuggestion } from '../../../index';
+import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_suggestion.md';
 
 const noop = () => {};

package/src/components/base/filtered_search/filtered_search_suggestion_list.stories.js

@@ -1,4 +1,5 @@
-import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../index';
+import GlFilteredSearchSuggestionList from './filtered_search_suggestion_list.vue';
+import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';
 

package/src/components/base/filtered_search/filtered_search_token.stories.js

@@ -1,6 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { GlIcon } from '../../../index';
+import GlIcon from '../icon/icon.vue';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_token.md';

package/src/components/base/filtered_search/filtered_search_token_segment.stories.js

@@ -1,6 +1,6 @@
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
-import { GlFilteredSearchSuggestion } from '../../../index';
+import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import { provide } from './common_story_options';
 import readme from './filtered_search_token_segment.md';
 import GlFilteredSearchTokenSegment from './filtered_search_token_segment.vue';

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

@@ -388,6 +388,7 @@ export default {
         v-bind="searchInputAttributes"
         v-model="inputValue"
         class="gl-filtered-search-token-segment-input"
+        data-testid="filtered-search-token-segment-input"
         :aria-label="label"
         :readonly="viewOnly"
         @keydown="handleInputKeydown"

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

@@ -1,13 +1,11 @@
-import {
-  GlForm,
-  GlFormGroup,
-  GlFormInput,
-  GlFormSelect,
-  GlFormCheckbox,
-  GlFormCheckboxGroup,
-  GlButton,
-} from '../../../index';
+import GlButton from '../button/button.vue';
 import { setStoryTimeout } from '../../../utils/test_utils';
+import GlFormCheckboxGroup from './form_checkbox/form_checkbox_group.vue';
+import GlForm from './form.vue';
+import GlFormGroup from './form_group/form_group.vue';
+import GlFormInput from './form_input/form_input.vue';
+import GlFormSelect from './form_select/form_select.vue';
+import GlFormCheckbox from './form_checkbox/form_checkbox.vue';
 import readme from './form.md';
 
 export const Default = (args) => ({

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

@@ -1,4 +1,5 @@
-import { GlFormCheckbox, GlFormCheckboxGroup } from '../../../../index';
+import GlFormCheckbox from './form_checkbox.vue';
+import GlFormCheckboxGroup from './form_checkbox_group.vue';
 import readme from './form_checkbox.md';
 
 const components = {

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

@@ -1,5 +1,7 @@
-import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../index';
+import GlFormInput from '../form_input/form_input.vue';
+import GlFormTextarea from '../form_textarea/form_textarea.vue';
 import { disableControls } from '../../../../utils/stories_utils';
+import GlFormGroup from './form_group.vue';
 import readme from './form_group.md';
 
 const components = {

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

@@ -1,5 +1,5 @@
-import { GlFormInput } from '../../../../index';
 import { formInputSizes } from '../../../../utils/constants';
+import GlFormInput from './form_input.vue';
 import readme from './form_input.md';
 
 const template = `

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

@@ -1,5 +1,6 @@
-import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
+import GlInputGroupText from '../input_group_text/input_group_text.vue';
 import { disableControls } from '../../../../utils/stories_utils';
+import GlFormInputGroup from './form_input_group.vue';
 import readme from './form_input_group.md';
 
 const template = `

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

@@ -1,4 +1,4 @@
-import { GlFormRadio } from '../../../../index';
+import GlFormRadio from './form_radio.vue';
 import readme from './form_radio.md';
 
 const defaultOptions = [

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

@@ -1,4 +1,5 @@
-import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
+import GlFormRadio from '../form_radio/form_radio.vue';
+import GlFormRadioGroup from './form_radio_group.vue';
 import readme from './form_radio_group.md';
 
 const defaultOptions = [

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

@@ -1,5 +1,5 @@
-import { GlFormSelect } from '../../../../index';
 import { formStateOptions, formInputSizes } from '../../../../utils/constants';
+import GlFormSelect from './form_select.vue';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';
 
@@ -8,7 +8,7 @@ const data = () => ({
 });
 
 const template = `
-<gl-form-select 
+<gl-form-select
   v-model="selected"
   :size="size"
   :disabled="disabled"

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

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

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

@@ -1,7 +1,7 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlIcon } from '../../../index';
 import { iconSizeOptions } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
+import GlIcon from './icon.vue';
 import readme from './icon.md';
 
 const components = {

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

@@ -1,5 +1,6 @@
 import { setStoryTimeout } from '../../../utils/test_utils';
-import { GlInfiniteScroll, GlLoadingIcon } from '../../../index';
+import GlLoadingIcon from '../loading_icon/loading_icon.vue';
+import GlInfiniteScroll from './infinite_scroll.vue';
 import readme from './infinite_scroll.md';
 
 const ITEMS_BATCH_SIZE = 20;

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

@@ -1,5 +1,5 @@
-import { GlLabel } from '../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
+import GlLabel from './label.vue';
 import readme from './label.md';
 
 const template = `

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

@@ -1,5 +1,5 @@
-import { GlLink } from '../../../index';
 import { targetOptions } from '../../../utils/constants';
+import GlLink from './link.vue';
 import readme from './link.md';
 
 const generateProps = ({ href = '#', target = null } = {}) => ({

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

@@ -1,5 +1,5 @@
-import { GlLoadingIcon } from '../../../index';
 import { viewModeOptions, loadingIconSizes } from '../../../utils/constants';
+import GlLoadingIcon from './loading_icon.vue';
 import readme from './loading_icon.md';
 
 const template = `

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

@@ -1,5 +1,7 @@
-import { GlModal, GlModalDirective, GlButton } from '../../../index';
+import { GlModalDirective } from '../../../directives/modal';
+import GlButton from '../button/button.vue';
 import { variantOptionsWithNoDefault } from '../../../utils/constants';
+import GlModal from './modal.vue';
 import readme from './modal.md';
 
 const generateTemplate = ({ props = {}, slots = {} } = {}) => {

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

@@ -1,11 +1,9 @@
-import {
-  GlNav,
-  GlNavItem,
-  GlNavItemDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
-  GlIcon,
-} from '../../../index';
+import GlDropdownItem from '../dropdown/dropdown_item.vue';
+import GlDropdownDivider from '../dropdown/dropdown_divider.vue';
+import GlIcon from '../icon/icon.vue';
+import GlNavItemDropdown from './nav_item_dropdown.vue';
+import GlNavItem from './nav_item.vue';
+import GlNav from './nav.vue';
 import readme from './nav.md';
 
 export const Default = (_args, { argTypes }) => ({

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

@@ -1,5 +1,5 @@
 import { BNavbarBrand } from 'bootstrap-vue';
-import { GlNavbar } from '../../../index';
+import GlNavbar from './navbar.vue';
 import readme from './navbar.md';
 
 const Template = (args, { argTypes }) => ({

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -35,5 +35,15 @@
     .gl-new-dropdown-inner {
       max-height: none;
     }
+
+    .gl-new-dropdown-item-content {
+      &:disabled,
+      &[disabled] {
+        @include gl-text-gray-500;
+        cursor: not-allowed;
+        background: none;
+        text-decoration: none;
+      }
+    }
   }
 }

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -4,18 +4,16 @@ import {
   buttonVariantOptions,
   dropdownPlacements,
 } from '../../../../utils/constants';
-import {
-  GlDisclosureDropdown,
-  GlBadge,
-  GlDisclosureDropdownGroup,
-  GlDisclosureDropdownItem,
-  GlToggle,
-  GlAvatar,
-  GlModal,
-  GlIcon,
-  GlTooltip,
-} from '../../../../index';
+import GlBadge from '../../badge/badge.vue';
+import GlToggle from '../../toggle/toggle.vue';
+import GlAvatar from '../../avatar/avatar.vue';
+import GlModal from '../../modal/modal.vue';
+import GlIcon from '../../icon/icon.vue';
+import GlTooltip from '../../tooltip/tooltip.vue';
 import { makeContainer } from '../../../../utils/story_decorators/container';
+import GlDisclosureDropdown from './disclosure_dropdown.vue';
+import GlDisclosureDropdownItem from './disclosure_dropdown_item.vue';
+import GlDisclosureDropdownGroup from './disclosure_dropdown_group.vue';
 import readme from './disclosure_dropdown.md';
 import {
   mockItems,