@gitlab/ui 32.23.0 → 32.26.0

package/documentation/components_documentation.js

@@ -73,6 +73,7 @@ export { default as GlLabelDocumentation } from '../src/components/base/label/la
 export { default as GlDatepickerDocumentation } from '../src/components/base/datepicker/datepicker.documentation';
 export { default as GlTokenDocumentation } from '../src/components/base/token/token.documentation';
 export { default as GlToggleDocumentation } from '../src/components/base/toggle/toggle.documentation';
+export { default as GlDaterangePickerDocumentation } from '../src/components/base/daterange_picker/daterange_picker.documentation';
 export { default as GlSortingDocumentation } from '../src/components/base/sorting/sorting.documentation';
 export { default as GlSortingItemDocumentation } from '../src/components/base/sorting/sorting_item.documentation';
 export { default as GlInfiniteScrollDocumentation } from '../src/components/base/infinite_scroll/infinite_scroll.documentation';
@@ -92,6 +93,8 @@ export { default as GlFilteredSearchTokenSegmentDocumentation } from '../src/com
 export { default as GlFilteredSearchDocumentation } from '../src/components/base/filtered_search/filtered_search.documentation';
 export { default as GlBroadcastMessageDocumentation } from '../src/components/base/broadcast_message/broadcast_message.documentation';
 export { default as GlCollapseDocumentation } from '../src/components/base/collapse/collapse.documentation';
+export { default as GlAccordionDocumentation } from '../src/components/base/accordion/accordion.documentation';
+export { default as GlAccordionItemDocumentation } from '../src/components/base/accordion/accordion_item.documentation';
 export { default as GlCarouselDocumentation } from '../src/components/base/carousel/carousel.documentation';
 export { default as GlSafeLinkDirectiveDocumentation } from '../src/directives/safe_link/safe_link.documentation';
 export { default as GlSafeHtmlDirectiveDocumentation } from '../src/directives/safe_html/safe_html.documentation';

package/documentation/documented_stories.js

@@ -89,6 +89,7 @@ export const setupStorybookReadme = () =>
         'GlAccordion',
         'GlAccordionItem',
         'GlDaterangePicker',
+        'GlBarChart',
       ],
       components: {
         GlComponentDocumentation,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "32.23.0",
+  "version": "32.26.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -83,7 +83,7 @@
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
     "@gitlab/eslint-plugin": "9.4.0",
-    "@gitlab/stylelint-config": "2.3.0",
+    "@gitlab/stylelint-config": "2.6.0",
     "@gitlab/svgs": "1.218.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -142,8 +142,8 @@
     "sass-true": "^5.0.0",
     "start-server-and-test": "^1.10.6",
     "storybook-readme": "5.0.9",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-prettier": "^1.1.2",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-prettier": "1.2.0",
     "vue": "^2.6.11",
     "vue-jest": "4.0.0-rc.0",
     "vue-loader": "^15.8.3",

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

@@ -0,0 +1,6 @@
+import description from './accordion.md';
+
+export default {
+  followsDesignSystem: true,
+  description,
+};

package/src/components/base/accordion/accordion_item.documentation.js

@@ -0,0 +1,5 @@
+import description from './accordion_item.md';
+
+export default {
+  description,
+};

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -2,6 +2,7 @@
 $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumbs {
+  @include gl-display-flex;
   @include gl-border-0;
   @include gl-inset-border-b-1-gray-200;
   @include gl-py-5;
@@ -20,10 +21,12 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-separator {
   @include gl-display-inline-flex;
+  @include gl-absolute;
+  right: 0;
 
   > svg {
     @include gl-my-auto;
-    @include gl-mx-3;
+    @include gl-mx-2;
     @include gl-w-3;
     @include gl-text-gray-500;
     @include gl-fill-current-color;
@@ -31,7 +34,7 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-avatar-tile {
-  @include gl-mr-2;
+  @include gl-mr-3;
   @include gl-border-1;
   @include gl-border-solid;
   @include gl-border-gray-200;
@@ -42,8 +45,21 @@ $breadcrumb-max-width: $grid-size * 16;
 .gl-breadcrumb-item {
   @include gl-font-sm;
   @include gl-line-height-normal;
+  @include gl-relative;
+  @include gl-pr-6;
+
+  + .gl-breadcrumb-item {
+    @include gl-pl-0;
+
+    &::before {
+      content: '';
+      @include gl-display-none;
+    }
+  }
 
   > a {
+    @include gl-display-flex;
+    @include gl-align-items-center;
     @include gl-text-gray-500;
     @include media-breakpoint-down(xs) {
       @include str-truncated($breadcrumb-max-width);

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

@@ -6,10 +6,7 @@ const template = `
         :items="items"
     >
       <template #avatar>
-        <img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=15" width="15" height="15" />
-      </template>
-      <template #separator>
-        <gl-icon name="angle-right" />
+        <img class="gl-breadcrumb-avatar-tile" src="https://assets.gitlab-static.net/uploads/-/system/group/avatar/9970/logo-extra-whitespace.png?width=16" width="16" height="16" />
       </template>
     </gl-breadcrumb>
   `;

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -1,10 +1,12 @@
 <script>
 import { BBreadcrumb, BBreadcrumbItem } from 'bootstrap-vue';
+import GlIcon from '../icon/icon.vue';
 
 export default {
   components: {
     BBreadcrumb,
     BBreadcrumbItem,
+    GlIcon,
   },
   inheritAttrs: false,
   props: {
@@ -23,13 +25,18 @@ export default {
       },
     },
   },
+  methods: {
+    isLastItem(items, index) {
+      return index === items.length - 1;
+    },
+  },
 };
 </script>
 <template>
   <div class="gl-breadcrumbs">
+    <!-- @slot The avatar to display. -->
+    <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
-      <!-- @slot The avatar to display. -->
-      <slot name="avatar"></slot>
       <template v-for="(item, index) in items">
         <b-breadcrumb-item
           :key="index"
@@ -37,16 +44,20 @@ export default {
           :text="item.text"
           :href="item.href"
           :to="item.to"
-        />
-        <span
-          v-if="index != items.length - 1"
-          :key="`index ${item.text}`"
-          class="gl-breadcrumb-separator"
-          data-testid="separator"
         >
-          <!-- @slot The separator to display. -->
-          <slot name="separator"></slot>
-        </span>
+          <span>{{ item.text }}</span>
+          <span
+            v-if="!isLastItem(items, index)"
+            :key="`${index} ${item.text}`"
+            class="gl-breadcrumb-separator"
+            data-testid="separator"
+          >
+            <!-- @slot The separator to display. -->
+            <slot name="separator">
+              <gl-icon name="chevron-right" />
+            </slot>
+          </span>
+        </b-breadcrumb-item>
       </template>
     </b-breadcrumb>
   </div>

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

@@ -0,0 +1,6 @@
+import description from './daterange_picker.md';
+
+export default {
+  followsDesignSystem: true,
+  description,
+};

package/src/components/base/dropdown/dropdown.scss

@@ -177,8 +177,10 @@
   .split-content-button {
     @include gl-px-4;
   }
+
   .icon-split-content-button {
     @include gl-pl-3;
+
     .dropdown-icon {
       @include gl-mr-0;
     }

package/src/components/base/form/form_select/form_select.scss

@@ -46,6 +46,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     &:focus {
       @include gl-focus($gl-border-size-1, $red-500, true);
     }
+
     &:hover {
       @include gl-inset-border-1-red-500;
     }

package/src/components/base/label/label.scss

@@ -33,6 +33,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:hover {
       @include gl-reset-color;
       @include gl-shadow-none;
+
       .gl-label-text-scoped {
         @include gl-text-decoration-underline;
       }
@@ -62,6 +63,7 @@ $label-close-button: '.gl-label-close.gl-button';
       @include gl-opacity-5;
       @include gl-reset-bg;
       @include gl-shadow-none;
+
       .gl-icon {
         @include gl-fill-current-color;
       }
@@ -92,6 +94,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:focus,
     &:hover {
       @include gl-bg-black;
+
       .gl-icon {
         color: var(--label-background-color);
       }
@@ -113,6 +116,7 @@ $label-close-button: '.gl-label-close.gl-button';
     &:focus,
     &:hover {
       @include gl-bg-white;
+
       .gl-icon {
         color: var(--label-background-color);
       }

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -34,6 +34,7 @@
     .gl-search-box-by-click-history-no-searches {
       @include gl-text-center;
       @include gl-text-gray-500;
+
       .gl-dropdown-text {
         @include gl-font-weight-normal;
       }

package/src/components/base/segmented_control/segmented_control.scss

@@ -43,6 +43,7 @@
     &:first-child {
       @include gl-btn-gl-segmented-button-first;
     }
+
     &:last-child {
       @include gl-btn-gl-segmented-button-last;
     }

package/src/components/base/table/table.scss

@@ -55,6 +55,7 @@ table.gl-table {
           @include gl-border-t-1;
         }
       }
+
       div {
         @include gl-text-right;
         @include gl-overflow-wrap-break;

package/src/components/base/toast/toast.scss

@@ -35,6 +35,7 @@
     @include gl-pr-3;
     order: 1;
   }
+
   .toast-header {
     @include gl-display-flex;
     order: 2;

package/src/components/base/tooltip/tooltip.scss

@@ -13,6 +13,7 @@
   .arrow {
     @include gl-h-3;
     @include gl-w-2;
+
     &::before {
       @include gl-border-4;
     }

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

@@ -1,8 +1,6 @@
 import description from './bar.md';
-import examples from './examples';
 
 export default {
   followsDesignSystem: true,
   description,
-  examples,
 };

package/src/components/charts/bar/bar.md

@@ -1,5 +1,3 @@
-### Bar Chart
-
 A bar chart is similar to a column chart where the the length of bars represents the data value.
 Although alike, they are cannot be interchangeably used. Bar charts are good for displaying large
 number of categories on the y-axis.

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

@@ -1,20 +1,17 @@
-import { withKnobs, object, text } from '@storybook/addon-knobs';
 import { GlBarChart } from '../../../../charts';
-import { documentedStoriesOf } from '../../../../documentation/documented_stories';
-import { toolbox } from '../../../utils/charts/story_config';
 import readme from './bar.md';
 
-const components = {
-  GlBarChart,
-};
-
-const template = `<gl-bar-chart
+const Template = (args, { argTypes }) => ({
+  components: { GlBarChart },
+  props: Object.keys(argTypes),
+  template: `<gl-bar-chart
   :data="data"
   :option="option"
   :y-axis-title="yAxisTitle"
   :x-axis-title="xAxisTitle"
   :x-axis-type="xAxisType"
-/>`;
+/>`,
+});
 
 const mockData = {
   Office: [
@@ -31,59 +28,39 @@ const mockData = {
   ],
 };
 
-function generateProps({
+const generateProps = ({
   data = mockData,
   option = {},
   xAxisTitle = 'Pushes per day',
   yAxisTitle = 'User',
   xAxisType = 'value',
-} = {}) {
-  return {
-    data: {
-      default: object('Chart Data', data),
-    },
-    option: {
-      default: object('Echart Options', option),
-    },
-    yAxisTitle: {
-      default: text('Y Axis Title', yAxisTitle),
-    },
-    xAxisTitle: {
-      default: text('X Axis Title', xAxisTitle),
-    },
-    xAxisType: {
-      default: text('X Axis Type', xAxisType),
-    },
-  };
-}
+} = {}) => ({
+  data,
+  option,
+  xAxisTitle,
+  yAxisTitle,
+  xAxisType,
+});
 
-documentedStoriesOf('charts/bar-chart', readme)
-  .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
-    components,
-    template,
-  }))
-  .add('with zoom and scroll', () => ({
-    props: generateProps({
-      option: {
-        dataZoom: [
-          {
-            type: 'slider',
-            startValue: 1,
-          },
-        ],
-      },
-    }),
-    components,
-    template,
-  }))
-  .add('with toolbox', () => ({
-    props: generateProps({
-      option: {
-        toolbox,
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'charts/bar-chart',
+  component: GlBarChart,
+  argTypes: {
+    showToolbox: { control: { disable: true } },
+    toolboxZoomIconPath: { control: { disable: true } },
+    toolboxBackIconPath: { control: { disable: true } },
+    toolboxRestoreIconPath: { control: { disable: true } },
+    toolboxSaveAsImageIconPath: { control: { disable: true } },
+  },
+  parameters: {
+    knobs: { disable: true },
+    docs: {
+      description: {
+        component: readme,
       },
-    }),
-    components,
-    template,
-  }));
+    },
+  },
+};

package/src/scss/utilities.scss

@@ -3518,6 +3518,14 @@
   top: $gl-spacing-scale-7 !important
 }
 
+.gl-top-8 {
+  top: $gl-spacing-scale-8
+}
+
+.gl-top-8\! {
+  top: $gl-spacing-scale-8 !important
+}
+
 .gl-top-half {
   top: 50%
 }
@@ -3893,6 +3901,14 @@
   width: 12.5% !important;
 }
 
+.gl-w-5p {
+  width: 5%;
+}
+
+.gl-w-5p\! {
+  width: 5% !important;
+}
+
 .gl-w-10p {
   width: 10%;
 }

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

@@ -72,6 +72,10 @@
   top: $gl-spacing-scale-7;
 }
 
+@mixin gl-top-8 {
+  top: $gl-spacing-scale-8;
+}
+
 @mixin gl-top-half {
   top: 50%;
 }

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

@@ -69,6 +69,10 @@
   width: 12.5%;
 }
 
+@mixin gl-w-5p {
+  width: 5%;
+}
+
 // In the future, any percentage-based classes should follow this convention per the conversation at https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1884#note_459949588
 @mixin gl-w-10p {
   width: 10%;

package/dist/components/charts/bar/examples/bar.basic.example.js

@@ -1,42 +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-bar-chart',{attrs:{"data":{
-    Full: [
-      [78, 'Andrew Baines Bernard'],
-      [123, 'Angela Martin'] ],
-  },"option":{},"y-axis-title":"People","x-axis-title":"Percentage","x-axis-type":"value"}})};
-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/charts/bar/examples/bar.long_labels.example.js

@@ -1,55 +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-bar-chart',{attrs:{"data":{
-    Office: [
-      [100, 'Jim Halpert'],
-      [210, 'Dwight Kurt Schrute'],
-      [300, 'Pam Beesly'],
-      [340, 'Ryan Howard'],
-      [130, 'Kelly Rajnigandha Kapoor'],
-      [50, 'Scranton Strangler'],
-      [90, 'Michael Gary Scott'],
-      [-10, 'Andrew Baines Bernard'],
-      [50, 'Stanley Hudson'],
-      [30, 'Erin Hannon'],
-      [50, 'Creed Bratton'],
-      [90, 'Oscar'],
-      [10, 'Kevin Malone'],
-      [50, 'Angela Martin'],
-      [30, 'Toby Flenderson'] ],
-  },"y-axis-title":"People","x-axis-title":"Percentage","x-axis-type":"value"}})};
-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/charts/bar/examples/bar.multiple_series.example.js

@@ -1,48 +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-bar-chart',{attrs:{"data":{
-    Office: [
-      [78, 'Andrew Baines Bernard'],
-      [123, 'Angela Martin'] ],
-    ModernFamily: [
-      [39, 'Phil Dunphy'],
-      [4, 'Luke Dunphy'] ],
-    Friends: [
-      [239, 'Chandler Muriel Bing'],
-      [92, 'Joseph Francis Tribbiani'] ],
-  },"option":{},"y-axis-title":"People","x-axis-title":"Percentage","x-axis-type":"value"}})};
-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__;