@gitlab/ui 32.20.2 → 32.24.0

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.20.2",
+  "version": "32.24.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -116,7 +116,7 @@
     "jest-raw-loader": "^1.0.1",
     "jest-serializer-vue": "^2.0.2",
     "markdown-loader-jest": "^0.1.1",
-    "markdownlint-cli": "^0.27.1",
+    "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "node-sass": "^4.14.1",
     "node-sass-magic-importer": "^5.3.2",

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

@@ -6,6 +6,8 @@ export default {
         { value: 1, text: 'First' },
         { value: 2, text: 'Second', disabled: true },
         { value: 3, text: 'Third' },
+        { value: 4, text: 'Fourth' },
+        { value: 5, text: 'Fifth' },
       ],
       selected: 1,
     };

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

@@ -1,10 +1,30 @@
 /*
  * Segmented-control-specific utilities
  */
-@mixin gl-btn-gl-segmented-button-active($color) {
-  box-shadow: inset 0 px-to-rem(2px) px-to-rem(4px) $color, inset 0 px-to-rem(1px) 0 $color,
-    inset px-to-rem(1px) 0 0 $color, inset 0 px-to-rem(-1px) 0 $color,
-    inset px-to-rem(-1px) 0 0 $color;
+
+@mixin gl-btn-gl-segmented-button-first {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset #{$gl-border-size-1} 0 0 0 $gray-200;
+}
+
+@mixin gl-btn-gl-segmented-button-last {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200, inset -#{$gl-border-size-1} 0 0 0 $gray-200;
+}
+
+@mixin gl-btn-gl-segmented-button-focus($color) {
+  box-shadow: $focus-ring, inset 0 0 0 $gl-border-size-2 $color;
+}
+
+.btn-group.gl-segmented-control {
+  .btn:not(:first-child),
+  .btn:not(:last-child) {
+    &.active,
+    &.focus,
+    &:hover:not(.disabled) {
+      @include gl-rounded-base;
+    }
+  }
 }
 
 .gl-segmented-control {
@@ -17,12 +37,42 @@
     @include gl-line-height-normal;
     @include gl-text-gray-900;
     @include gl-fill-current-color;
-    @include gl-bg-white;
-    @include gl-inset-border-1-gray-200;
+    @include gl-bg-gray-10;
+    @include gl-inset-border-y-1-gray-200;
+
+    &:first-child {
+      @include gl-btn-gl-segmented-button-first;
+    }
+    &:last-child {
+      @include gl-btn-gl-segmented-button-last;
+    }
+
+    &:hover {
+      @include gl-inset-border-2-gray-400;
+      @include gl-bg-gray-50;
+    }
+
+    &.focus {
+      @include gl-z-index-1;
+      @include gl-btn-gl-segmented-button-focus($gray-400);
+      @include gl-bg-gray-50;
+    }
 
     &.active {
-      @include gl-bg-gray-10;
-      @include gl-btn-gl-segmented-button-active($gray-200);
+      @include gl-z-index-2;
+      @include gl-inset-border-2-gray-300;
+      @include gl-bg-white;
+
+      &:hover {
+        @include gl-inset-border-2-gray-400;
+        @include gl-bg-gray-50;
+      }
+
+      &.focus,
+      &.focus:hover {
+        @include gl-btn-gl-segmented-button-focus($gray-400);
+        @include gl-bg-gray-50;
+      }
     }
 
     &:focus-within {
@@ -30,12 +80,21 @@
     }
 
     &.disabled,
-    &[disabled] {
-      @include gl-bg-gray-50;
-      @include gl-text-gray-600;
-      @include gl-inset-border-1-gray-200;
-      @include gl-opacity-10;
-      cursor: not-allowed !important;
+    &[disabled],
+    &.disabled:hover,
+    &[disabled]:hover {
+      @include gl-text-gray-400;
+      @include gl-inset-border-y-1-gray-200;
+      @include gl-z-index-0;
+      @include gl-cursor-not-allowed;
+
+      &:first-child {
+        @include gl-btn-gl-segmented-button-first;
+      }
+
+      &:last-child {
+        @include gl-btn-gl-segmented-button-last;
+      }
     }
   }
 }

package/src/components/base/tabs/tabs/tabs.scss

@@ -6,7 +6,7 @@
 }
 
 .gl-tab-nav-item {
-  @include gl-text-gray-500;
+  @include gl-text-gray-900;
   @include gl-px-4;
   @include gl-py-5;
   @include gl-line-height-normal;
@@ -17,13 +17,22 @@
 
   transition: box-shadow 100ms linear;
 
-  &.disabled {
-    @include gl-text-gray-200;
-  }
-
   &:hover {
     @include gl-text-gray-900;
-    @include gl-inset-border-b-2-gray-200;
+
+    &:not(.gl-tab-nav-item-active) {
+      @include gl-inset-border-b-2-gray-200;
+    }
+  }
+
+  &.disabled {
+    @include gl-pointer-events-auto;
+    @include gl-cursor-not-allowed;
+    @include gl-text-gray-400;
+
+    &:hover {
+      @include gl-shadow-none;
+    }
   }
 
   > .gl-tab-counter-badge {

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

@@ -1654,6 +1654,32 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $gray-600 !important
 }
 
+.gl-inset-border-2-gray-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300
+}
+
+.gl-inset-border-2-gray-300\! {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300 !important
+}
+
+.gl-inset-border-2-gray-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400
+}
+
+.gl-inset-border-2-gray-400\! {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400 !important
+}
+
+.gl-inset-border-y-1-gray-200 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200
+}
+
+.gl-inset-border-y-1-gray-200\! {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200 !important
+}
+
 .gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100
 }
@@ -3867,6 +3893,14 @@
   width: 12.5% !important;
 }
 
+.gl-w-5p {
+  width: 5%;
+}
+
+.gl-w-5p\! {
+  width: 5% !important;
+}
+
 .gl-w-10p {
   width: 10%;
 }
@@ -4095,6 +4129,14 @@
   height: 100% !important;
 }
 
+.gl-h-100vh {
+  height: 100vh;
+}
+
+.gl-h-100vh\! {
+  height: 100vh !important;
+}
+
 .gl-sm-w-auto {
   @media (min-width: $breakpoint-sm) {
     width: auto;

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

@@ -23,6 +23,19 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $gray-600;
 }
 
+@mixin gl-inset-border-2-gray-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-300;
+}
+
+@mixin gl-inset-border-2-gray-400 {
+  box-shadow: inset 0 0 0 $gl-border-size-2 $gray-400;
+}
+
+@mixin gl-inset-border-y-1-gray-200 {
+  box-shadow: inset 0 #{$gl-border-size-1} 0 0 $gray-200,
+    inset 0 -#{$gl-border-size-1} 0 0 $gray-200;
+}
+
 @mixin gl-inset-border-b-2-gray-100 {
   box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $gray-100;
 }

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%;
@@ -184,6 +188,10 @@
   height: 100%;
 }
 
+@mixin gl-h-100vh {
+  height: 100vh;
+}
+
 /**
 * Responsive dimension (width/height) utilities
 *

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__;

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

@@ -1,43 +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, 'Jim Halpert'],
-      [123, 'Kelly Rajnigandha Kapoor'],
-      [-10, 'Michael Gary Scott'] ],
-  },"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/index.js

@@ -1,28 +0,0 @@
-import BarChartBasicExample from './bar.basic.example';
-import BarChartLongLablesExample from './bar.long_labels.example';
-import BarChartMultipleSeriesExample from './bar.multiple_series.example';
-import BarChartNegativeValuesExample from './bar.negative_values.example';
-
-var index = [{
-  name: 'Basic',
-  items: [{
-    id: 'bar-basic',
-    name: 'Basic',
-    description: 'Basic Bar Chart',
-    component: BarChartBasicExample
-  }, {
-    id: 'bar-negative-labels',
-    name: 'Negative values',
-    component: BarChartNegativeValuesExample
-  }, {
-    id: 'bar-long-labels',
-    name: 'Long labels with negative values',
-    component: BarChartLongLablesExample
-  }, {
-    id: 'bar-multiple-series',
-    name: 'Multiple Series Bar Chart',
-    component: BarChartMultipleSeriesExample
-  }]
-}];
-
-export default index;

package/src/components/charts/bar/examples/bar.basic.example.vue

@@ -1,14 +0,0 @@
-<template>
-  <gl-bar-chart
-    :data="{
-      Full: [
-        [78, 'Andrew Baines Bernard'],
-        [123, 'Angela Martin'],
-      ],
-    }"
-    :option="{}"
-    y-axis-title="People"
-    x-axis-title="Percentage"
-    x-axis-type="value"
-  />
-</template>

package/src/components/charts/bar/examples/bar.long_labels.example.vue

@@ -1,26 +0,0 @@
-<template>
-  <gl-bar-chart
-    :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"
-  />
-</template>