@gitlab/ui 38.1.0 → 38.3.0

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

@@ -1,28 +1,77 @@
 import { GlSkeletonLoader } from '../../../index';
+import { makeContainer } from '../../../utils/story_decorators/container';
 import readme from './skeleton_loader.md';
 
-const Template = (args) => ({
+const defaultValue = (prop) => GlSkeletonLoader.props[prop].default;
+
+const generateProps = ({
+  width = defaultValue('width'),
+  height = defaultValue('height'),
+  preserveAspectRatio = defaultValue('preserveAspectRatio'),
+  lines = defaultValue('lines'),
+  equalWidthLines = defaultValue('equalWidthLines'),
+} = {}) => ({
+  width,
+  height,
+  preserveAspectRatio,
+  lines,
+  equalWidthLines,
+});
+
+const template = (slotContent = '') => `
+    <gl-skeleton-loader
+      :width="width"
+      :height="height"
+      :preserveAspectRatio="preserveAspectRatio"
+      :lines="lines"
+      :equalWidthLines="equalWidthLines"
+    >${slotContent}</gl-skeleton-loader>
+`;
+
+export const Default = (args) => ({
   components: { GlSkeletonLoader },
   props: Object.keys(args),
-  template: `
-  <div style="background: #fff; border: 1px solid #dfdfdf; box-shadow: 0 1px 2px rgba(0,0,0,0.1); width: 359px; height: 135px; padding: 1rem; border-radius: 0.25rem;">
-    <div style="width: 327px; height: 102px;">
-      <gl-skeleton-loader :width="327" :height="102">
-        <rect width="276" height="16" rx="4" />
-        <rect y="18" width="237" height="16" rx="4" />
-        <rect y="42" width="118" height="16" rx="8" />
-        <rect x="122" y="42" width="130" height="16" rx="8" />
-        <rect y="62" width="106" height="16" rx="8" />
-        <rect x="110" y="62" width="56" height="16" rx="8" />
-        <rect x="256" y="42" width="71" height="16" rx="8" />
-        <rect y="86" width="38" height="16" rx="4" />
-      </gl-skeleton-loader>
-    </div>
-  </div>`,
+  template: template(),
+});
+Object.assign(Default, {
+  args: generateProps(),
+  parameters: {
+    controls: {
+      // When not providing custom shapes in the default slot, these are the
+      // only props you're likely to want to modify.
+      include: ['width', 'lines', 'equalWidthLines'],
+    },
+  },
 });
 
-export const Default = Template.bind({});
-Default.args = {};
+export const WithCustomShapes = (args) => ({
+  components: { GlSkeletonLoader },
+  props: Object.keys(args),
+  template: template(`
+    <rect width="276" height="16" rx="4" />
+    <rect y="18" width="237" height="16" rx="4" />
+    <rect y="42" width="118" height="16" rx="8" />
+    <rect x="122" y="42" width="130" height="16" rx="8" />
+    <rect y="62" width="106" height="16" rx="8" />
+    <rect x="110" y="62" width="56" height="16" rx="8" />
+    <rect x="256" y="42" width="71" height="16" rx="8" />
+    <rect y="86" width="38" height="16" rx="4" />
+  `),
+});
+Object.assign(WithCustomShapes, {
+  args: generateProps({
+    width: 327,
+    height: 102,
+  }),
+  parameters: {
+    controls: {
+      // With custom shapes, other props become useful, although they're a bit
+      // counterintuitive.
+      include: ['width', 'height', 'preserveAspectRatio'],
+    },
+  },
+  decorators: [makeContainer({ width: '250px' })],
+});
 
 export default {
   title: 'base/skeleton-loader',
@@ -34,8 +83,5 @@ export default {
         component: readme,
       },
     },
-    controls: {
-      disable: true,
-    },
   },
 };

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

@@ -1,5 +1,5 @@
 import { range } from 'lodash';
-import { GlTabs, GlTab, GlScrollableTabs } from '../../../../index';
+import { GlTabs, GlTab, GlScrollableTabs, GlBadge } from '../../../../index';
 import readme from './tabs.md';
 
 const components = {
@@ -150,7 +150,7 @@ JustifiedTabs.args = generateProps({ justified: true });
 
 export const WithCounterBadges = (_args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components,
+  components: { ...components, GlBadge },
   template: wrap(`
     <gl-tab>
       <template #title>

package/src/scss/typescale/typescale.md

@@ -1,5 +1,3 @@
-# Typescale
-
 GitLab UI typescale is an implementation of the Pajamas [typescale specification](https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Pajamas-UI-Kit---Beta?node-id=542%3A2).
 
 ## Usage

package/src/scss/typescale/typescale.stories.js

@@ -1,5 +1,4 @@
 import has from 'lodash/has';
-import { documentedStoriesOf } from '../../../documentation/documented_stories';
 import typescaleDocs from './typescale.md';
 import uiTypescaleDemoContent from './typescale_demo.html';
 import uiTypescaleDemoStyles from './typescale_demo.scss';
@@ -33,6 +32,20 @@ const component = {
   template: '<ui-typescale-demo />',
 };
 
-documentedStoriesOf('scss/typescale', typescaleDocs).add('default', () => component, {
-  viewport: { defaultViewport: 'breakpointExtraLarge' },
-});
+export const Default = () => component;
+Default.parameters = {
+  viewport: {
+    defaultViewport: 'breakpointExtraLarge',
+  },
+};
+
+export default {
+  title: 'scss/typescale',
+  parameters: {
+    docs: {
+      description: {
+        component: typescaleDocs,
+      },
+    },
+  },
+};

package/src/scss/utilities.scss

@@ -2749,6 +2749,30 @@
   }
 }
 
+.gl-md-display-inline {
+  @include gl-media-breakpoint-up(md) {
+  display: inline;
+  }
+}
+
+.gl-md-display-inline\! {
+  @include gl-media-breakpoint-up(md) {
+  display: inline !important;
+  }
+}
+
+.gl-lg-display-inline {
+  @include gl-media-breakpoint-up(lg) {
+  display: inline;
+  }
+}
+
+.gl-lg-display-inline\! {
+  @include gl-media-breakpoint-up(lg) {
+  display: inline !important;
+  }
+}
+
 .gl-display-inline-block {
   display: inline-block;
 }

package/src/scss/utility-mixins/display.scss

@@ -101,6 +101,18 @@
   }
 }
 
+@mixin gl-md-display-inline {
+  @include gl-media-breakpoint-up(md) {
+    @include gl-display-inline;
+  }
+}
+
+@mixin gl-lg-display-inline {
+  @include gl-media-breakpoint-up(lg) {
+    @include gl-display-inline;
+  }
+}
+
 @mixin gl-display-inline-block {
   display: inline-block;
 }

package/src/utils/use_mock_intersection_observer.js

@@ -1,5 +1,5 @@
 /* global jest, beforeEach, afterEach */
-/* eslint-disable class-methods-use-this, max-classes-per-file, babel/camelcase */
+/* eslint-disable class-methods-use-this, max-classes-per-file, camelcase */
 import { isMatch, isArray } from 'lodash';
 
 /**
@@ -27,7 +27,7 @@ class MockObserver {
 
   takeRecords() {}
 
-  // eslint-disable-next-line babel/camelcase
+  // eslint-disable-next-line camelcase
   $_triggerObserve(nodeParam, { entry = {}, options = {} } = {}) {
     const nodes = this.$_getNodesFromParam(nodeParam);
 
@@ -38,7 +38,7 @@ class MockObserver {
     });
   }
 
-  // eslint-disable-next-line babel/camelcase
+  // eslint-disable-next-line camelcase
   $_hasObserver(node, options = {}) {
     return this.$_observers.some(
       ([obvNode, obvOptions]) => node === obvNode && isMatch(options, obvOptions)

package/dist/components/base/dropdown/dropdown_divider.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Divider\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown divider component is meant to be used for visual dividers inside a dropdown component.\n";
-
-var dropdown_divider_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_divider_documentation;

package/dist/components/base/dropdown/dropdown_form.documentation.js

@@ -1,17 +0,0 @@
-import examples from './examples';
-
-var dropdown_form = "Unlike `b-dropdown-form`, we do _not_ add any additional padding with the `gl-dropdown-form` component.\nThis is to prevent double padding with `gl-dropdown-item` and similar components, so in most cases\nshouldn't be needed. To add padding, either add a padding utility class to your form, or an inner\nelement with some padding.\n";
-
-var description = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': dropdown_form
-});
-
-var dropdown_form_documentation = {
-  description,
-  examples,
-  bootstrapComponent: 'b-dropdown-form',
-  propsInfo: {}
-};
-
-export default dropdown_form_documentation;

package/dist/components/base/dropdown/dropdown_section_header.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Section Header\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown section header component is meant to be used for header entries inside a dropdown component.\n";
-
-var dropdown_section_header_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_section_header_documentation;

package/dist/components/base/dropdown/dropdown_text.documentation.js

@@ -1,8 +0,0 @@
-var description = "# Dropdown Text\n\n<!-- STORY -->\n\n## Usage\n\nThe dropdown text component is meant to be used for text entries inside a dropdown component.\n";
-
-var dropdown_text_documentation = {
-  description,
-  bootstrapComponent: 'b-dropdown'
-};
-
-export default dropdown_text_documentation;

package/dist/components/base/dropdown/examples/dropdown.default.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-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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/dropdown/examples/dropdown.links.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-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("First link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Second link")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"href":"https://about.gitlab.com/"}},[_vm._v("Last link")])],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/dropdown/examples/dropdown.with_avatar_and_secondary_text.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-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"avatar-url":"./img/avatar.png","secondary-text":"@sytses"}},[_vm._v("\n    Sid Sijbrandij\n  ")])],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/dropdown/examples/dropdown.with_checked_items.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-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',{attrs:{"is-check-item":true,"is-checked":true}},[_vm._v("Checked item")]),_vm._v(" "),_c('gl-dropdown-item',{attrs:{"is-check-item":true}},[_vm._v("Unchecked item")])],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/dropdown/examples/dropdown.with_clear_all.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-dropdown',{attrs:{"text":"Some dropdown","show-clear-all":true,"clear-all-text":'Clear all'}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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/dropdown/examples/dropdown.with_divider.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-dropdown',{attrs:{"text":"Some dropdown"}},[_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")]),_vm._v(" "),_c('gl-dropdown-divider'),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Third item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Fourth item")])],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/dropdown/examples/dropdown.with_form.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-dropdown',{attrs:{"text":"Some dropdown","header-text":"Dropdown header"}},[_c('gl-dropdown-form',[_c('div',{staticClass:"gl-px-4"},[_c('gl-button',[_vm._v("First item")]),_vm._v(" "),_c('gl-button',[_vm._v("Second item")])],1)])],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/dropdown/examples/dropdown.with_header.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-dropdown',{attrs:{"text":"Some dropdown","header-text":"Dropdown header"}},[_c('gl-dropdown-section-header',[_vm._v("Section header title")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")])],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/dropdown/examples/dropdown.with_highlighted_items.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-dropdown',{attrs:{"text":"Some dropdown"},scopedSlots:_vm._u([{key:"highlighted-items",fn:function(){return [_c('gl-dropdown-item',[_vm._v("First item")]),_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Second item")])]},proxy:true}])},[_vm._v(" "),_c('gl-dropdown-item',[_vm._v("Last item")])],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__;