@gitlab/ui 33.1.2 → 36.0.0

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

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../index';
+import { GlButton, GlButtonGroup, GlBadge, GlDropdown, GlDropdownItem } from '../../../index';
 import {
   buttonCategoryOptions,
   buttonVariantOptions,
@@ -111,7 +111,7 @@ IconButton.args = generateProps({
 
 export const DropdownButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         text="Some dropdown"
@@ -129,7 +129,7 @@ DropdownButton.args = generateProps();
 
 export const DropdownIconButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="download"
@@ -149,7 +149,7 @@ DropdownIconButton.args = generateProps();
 
 export const DropdownIconTextButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="notifications"
@@ -168,7 +168,7 @@ DropdownIconTextButton.args = generateProps();
 
 export const DropdownIconOnlyButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         icon="ellipsis_v"
@@ -191,7 +191,7 @@ DropdownIconOnlyButton.args = generateProps({
 
 export const DropdownSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -210,7 +210,7 @@ DropdownSplitButton.args = generateProps({ category: 'primary', variant: 'confir
 
 export const DropdownIconSplitButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: wrapDropdownButton(`
       <gl-dropdown
         split
@@ -230,7 +230,7 @@ DropdownIconSplitButton.args = generateProps({ category: 'secondary', variant: '
 
 export const DropdownLoadingButton = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlDropdown, GlDropdownItem },
   template: `
       <gl-dropdown text="Some dropdown" :category="category" :loading="true">
         <gl-dropdown-item>Dropdown item</gl-dropdown-item>
@@ -333,7 +333,7 @@ BorderlessTertiary.args = generateProps({ category: 'tertiary' });
 
 export const LabelButton = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlButtonGroup },
   template: `
       <div>
         <gl-button label>Label</gl-button>
@@ -451,7 +451,7 @@ Sizes.parameters = { controls: { disable: true } };
 
 export const Badges = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   variants: Object.keys(badgeForButtonOptions),
   categories: buttonCategoryOptions,
   style: {
@@ -483,7 +483,7 @@ Badges.parameters = { controls: { disable: true } };
 
 export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { GlButton, GlBadge },
   template: `    
       <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
           Submit review

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlButton } from '../../../../index';
+import { GlButton } from '../../../index';
 import readme from './drawer.md';
 import GlDrawer from './drawer.vue';
 

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

@@ -9,7 +9,9 @@ import {
   GlDropdownItem,
   GlDropdownText,
   GlDropdownForm,
-} from '../../../../index';
+  GlButton,
+  GlSearchBoxByType,
+} from '../../../index';
 import {
   buttonCategoryOptions,
   buttonSizeOptions,
@@ -213,7 +215,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with form', () => ({
     props: generateProps({ text: 'Some dropdown' }),
-    components,
+    components: { ...components, GlButton },
     template: wrap`
       <gl-dropdown-form class="gl-px-4">
         <gl-button>One</gl-button>
@@ -242,7 +244,7 @@ documentedStoriesOf('base/dropdown', readme)
   }))
   .add('with header and footer', () => ({
     props: generateProps({ text: 'Some dropdown', headerText: 'Header', hideHeaderBorder: true }),
-    components,
+    components: { ...components, GlSearchBoxByType },
     template: wrap`
       <template #header>
         <gl-search-box-by-type />

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownDivider } from '../../../../index';
+import { GlDropdownDivider } from '../../../index';
 import readme from './dropdown_divider.md';
 
 const components = {

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownForm, GlButton } from '../../../../index';
+import { GlDropdownForm, GlButton } from '../../../index';
 import readme from './dropdown_form.md';
 
 const components = {

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownItem } from '../../../../index';
+import { GlDropdownItem } from '../../../index';
 import readme from './dropdown_item.md';
 
 const components = {

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownSectionHeader } from '../../../../index';
+import { GlDropdownSectionHeader } from '../../../index';
 import readme from './dropdown_section_header.md';
 
 const components = {

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

@@ -1,6 +1,6 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlDropdownText } from '../../../../index';
+import { GlDropdownText } from '../../../index';
 import readme from './dropdown_text.md';
 
 const components = {

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

@@ -1,6 +1,13 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlFilteredSearch, GlFilteredSearchToken } from '../../../../index';
+import {
+  GlFilteredSearch,
+  GlFilteredSearchToken,
+  GlFilteredSearchSuggestion,
+  GlLoadingIcon,
+  GlToken,
+  GlAvatar,
+} from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './filtered_search.md';
 
@@ -29,6 +36,7 @@ const fakeLabels = [
 ];
 
 const UserToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlAvatar },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {
@@ -104,6 +112,7 @@ const UserToken = {
 };
 
 const MilestoneToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {
@@ -163,6 +172,7 @@ const MilestoneToken = {
 };
 
 const LabelToken = {
+  components: { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon, GlToken },
   props: ['value', 'active'],
   inheritAttrs: false,
   data() {

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

@@ -1,4 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
+import { GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import readme from './filtered_search_suggestion.md';
 
@@ -7,6 +8,7 @@ const noop = () => {};
 documentedStoriesOf('base/filtered-search/suggestion', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
+    components: { GlFilteredSearchSuggestion },
     provide: {
       filteredSearchSuggestionListInstance: {
         register: noop,

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

@@ -1,4 +1,5 @@
 import { withKnobs } from '@storybook/addon-knobs';
+import { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_suggestion_list.md';
@@ -6,6 +7,7 @@ import readme from './filtered_search_suggestion_list.md';
 documentedStoriesOf('base/filtered-search/suggestion-list', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
+    components: { GlFilteredSearchSuggestionList, GlFilteredSearchSuggestion },
     data() {
       return {
         iteration: 1,

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

@@ -2,6 +2,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
+import { GlIcon } from '../../../index';
 import { provide } from './common_story_options';
 import GlFilteredSearchSuggestion from './filtered_search_suggestion.vue';
 import readme from './filtered_search_token.md';
@@ -15,6 +16,7 @@ documentedStoriesOf('base/filtered-search/token', readme)
     components: {
       GlFilteredSearchToken,
       GlFilteredSearchSuggestion,
+      GlIcon,
     },
     provide,
     props: {

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

@@ -1,6 +1,7 @@
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import PortalVue from 'portal-vue';
 import Vue from 'vue';
+import { GlFilteredSearchSuggestion } from '../../../index';
 import { documentedStoriesOf } from '../../../../documentation/documented_stories';
 import { provide } from './common_story_options';
 import readme from './filtered_search_term.md';
@@ -18,6 +19,7 @@ documentedStoriesOf('base/filtered-search/token-segment', readme)
   .add('default', () => ({
     components: {
       GlFilteredSearchTokenSegment,
+      GlFilteredSearchSuggestion,
     },
     provide,
     props: {

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

@@ -5,7 +5,7 @@ import {
   GlFormSelect,
   GlFormCheckbox,
   GlButton,
-} from '../../../../index';
+} from '../../../index';
 import { setStoryTimeout } from '../../../utils/test_utils';
 import readme from './form.md';
 

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

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

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

@@ -1,6 +1,6 @@
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormGroup } from '../../../../../index';
+import { GlFormGroup, GlFormInput, GlFormTextarea } from '../../../../index';
 import { sizeOptions } from '../../../../utils/constants';
 import readme from './form_group.md';
 
@@ -57,7 +57,7 @@ documentedStoriesOf('base/form/form-group', readme)
   .addDecorator(withKnobs)
   .add('default', () => ({
     props: generateProps(),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         :id="id"
@@ -75,7 +75,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('disabled', () => ({
     props: generateProps(),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         id="group-id"
@@ -91,6 +91,7 @@ documentedStoriesOf('base/form/form-group', readme)
     `,
   }))
   .add('with textarea', () => ({
+    components: { ...components, GlFormTextarea },
     props: generateProps({ optional: true }),
     template: `
       <gl-form-group
@@ -106,7 +107,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('with label description', () => ({
     props: generateProps({ optional: true }),
-    components,
+    components: { ...components, GlFormInput },
     template: `
       <gl-form-group
         :id="id"
@@ -125,7 +126,7 @@ documentedStoriesOf('base/form/form-group', readme)
   }))
   .add('with validations', () => ({
     props: generateProps({ label: 'Name', description: 'Enter a first and last name.' }),
-    components,
+    components: { ...components, GlFormInput },
     computed: {
       state() {
         return this.name.length >= 4;

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

@@ -1,4 +1,4 @@
-import { GlFormInput } from '../../../../../index';
+import { GlFormInput } from '../../../../index';
 import { formInputSizes } from '../../../../utils/constants';
 import readme from './form_input.md';
 

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

@@ -1,6 +1,6 @@
 import { withKnobs, boolean, object, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormInputGroup, GlInputGroupText } from '../../../../../index';
+import { GlFormInputGroup, GlInputGroupText } from '../../../../index';
 import readme from './form_input_group.md';
 
 const components = {

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

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

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

@@ -1,10 +1,11 @@
 import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { documentedStoriesOf } from '../../../../../documentation/documented_stories';
-import { GlFormRadioGroup } from '../../../../../index';
+import { GlFormRadioGroup, GlFormRadio } from '../../../../index';
 import readme from './form_radio_group.md';
 
 const components = {
   GlFormRadioGroup,
+  GlFormRadio,
 };
 
 const defaultOptions = [

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

@@ -1,4 +1,4 @@
-import { GlFormSelect } from '../../../../../index';
+import { GlFormSelect } from '../../../../index';
 import { sizeOptions, formStateOptions } from '../../../../utils/constants';
 import { formSelectOptions } from './constants';
 import readme from './form_select.md';

package/src/components/base/form/form_text/form_text.vue

@@ -1,3 +1,5 @@
 <script>
-export { BFormText as default } from 'bootstrap-vue';
+import { BFormText } from 'bootstrap-vue';
+
+export default BFormText;
 </script>

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

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

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

@@ -1,5 +1,5 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import { GlIcon } from '../../../../index';
+import { GlIcon } from '../../../index';
 import { iconSizeOptions } from '../../../utils/constants';
 import readme from './icon.md';
 

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

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

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

@@ -1,4 +1,4 @@
-import { GlLabel } from '../../../../index';
+import { GlLabel } from '../../../index';
 import { labelSizeOptions, tooltipPlacements } from '../../../utils/constants';
 import readme from './label.md';
 

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

@@ -1,4 +1,4 @@
-import { GlLink } from '../../../../index';
+import { GlLink } from '../../../index';
 import { targetOptions } from '../../../utils/constants';
 import readme from './link.md';
 

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

@@ -1,4 +1,4 @@
-import { GlLoadingIcon } from '../../../../index';
+import { GlLoadingIcon } from '../../../index';
 import { viewModeOptions, loadingIconSizes } from '../../../utils/constants';
 import readme from './loading_icon.md';
 
@@ -23,6 +23,7 @@ const generateProps = () => ({
 });
 
 const Template = (args) => ({
+  components: { GlLoadingIcon },
   props: Object.keys(args),
   template,
 });

package/src/components/base/modal/modal.scss

@@ -53,7 +53,8 @@ body.modal-open {
 
   .modal-header {
     @include gl-bg-white;
-    @include gl-pr-3;
+    @include gl-pb-3;
+    @include gl-border-none;
 
     .modal-title {
       @include gl-font-lg;
@@ -68,6 +69,7 @@ body.modal-open {
     @include gl-bg-white;
     @include gl-relative;
     @include gl-p-5;
+    @include gl-py-3;
     @include gl-text-left;
     @include gl-white-space-normal;
     @include gl-font-base;
@@ -78,7 +80,8 @@ body.modal-open {
     @include gl-display-flex;
     @include gl-flex-direction-row;
     @include gl-p-5;
-    @include gl-bg-gray-10;
+    @include gl-pt-3;
+    @include gl-border-none;
 
     .btn {
       @include gl-m-0;

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

@@ -1,4 +1,4 @@
-import { GlModal, GlModalDirective, GlButton } from '../../../../index';
+import { GlModal, GlModalDirective, GlButton } from '../../../index';
 import { variantOptionsWithNoDefault } from '../../../utils/constants';
 import readme from './modal.md';
 

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

@@ -1,9 +1,5 @@
-import examples from './examples';
 import * as description from './nav.md';
 
 export default {
   description,
-  examples,
-  bootstrapComponent: 'b-nav',
-  propsInfo: {},
 };

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

@@ -1,8 +1,11 @@
-# Nav
+The navigation component is built with flexbox and provides a strong foundation for building all
+types of navigation components.
 
-<!-- STORY -->
+## `GlNavItem`
 
-## Usage
+Use `GlNavItem` to add actionable links (or router links) to your nav. `GlNavItem` wraps [`BNavItem`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item).
 
-The navigation component is built with flexbox and provides a strong foundation for building all
-types of navigation components.
+## `GlNavItemDropdown`
+
+Use `GlNavItemDropdown` to place dropdown items within your nav.
+`GlNavItemDropdown` wraps [`BNavItemDropdown`](https://bootstrap-vue.org/docs/components/navbar#b-nav-item-dropdown).

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

@@ -1,23 +1,60 @@
-import { withKnobs } from '@storybook/addon-knobs';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { GlNav, GlNavItem } from '../../../../index';
-import readme from './nav.md';
-
-const components = {
+import {
   GlNav,
   GlNavItem,
-};
+  GlNavItemDropdown,
+  GlDropdownItem,
+  GlDropdownDivider,
+  GlIcon,
+} from '../../../index';
+import readme from './nav.md';
 
-documentedStoriesOf('base/nav', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    components,
-    template: `
+export const Default = (_args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: {
+    GlNav,
+    GlNavItem,
+    GlNavItemDropdown,
+    GlDropdownItem,
+    GlDropdownDivider,
+    GlIcon,
+  },
+  template: `
+    <div style="height: 150px">
       <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-dropdown text="Dropdown">
+          <gl-dropdown-item>Above divider</gl-dropdown-item>
+          <gl-dropdown-divider />
+          <gl-dropdown-item>Below divider</gl-dropdown-item>
+        </gl-nav-item-dropdown>
+        <gl-nav-item-dropdown text="Dropdown">
+          <template #button-content>
+            <gl-icon name="question" />
+            <gl-icon name="angle-down" />
+          </template>
+          <gl-dropdown-item>One</gl-dropdown-item>
+          <gl-dropdown-item>Two</gl-dropdown-item>
+        </gl-nav-item-dropdown>
         <gl-nav-item disabled>Disabled</gl-nav-item>
       </gl-nav>
-    `,
-  }));
+    </div>`,
+});
+
+export default {
+  title: 'base/nav',
+  component: GlNav,
+  subcomponents: {
+    GlNavItem,
+    GlNavItemDropdown,
+  },
+  parameters: {
+    bootstrapComponent: 'b-nav',
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

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

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

@@ -1,4 +1,4 @@
-import { GlPaginatedList, GlButton } from '../../../../index';
+import { GlPaginatedList, GlButton } from '../../../index';
 import readme from './paginated_list.md';
 
 const sampleList = [