@gitlab/ui 40.4.0 → 40.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "40.4.0",
+  "version": "40.6.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,15 +87,15 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-docs": "6.4.22",
-    "@storybook/addon-essentials": "6.4.22",
+    "@storybook/addon-a11y": "6.5.0",
+    "@storybook/addon-docs": "6.5.0",
+    "@storybook/addon-essentials": "6.5.0",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-storyshots": "6.4.22",
-    "@storybook/addon-storyshots-puppeteer": "6.4.22",
-    "@storybook/addon-viewport": "6.4.22",
-    "@storybook/theming": "6.4.22",
-    "@storybook/vue": "6.4.22",
+    "@storybook/addon-storyshots": "6.5.0",
+    "@storybook/addon-storyshots-puppeteer": "6.5.0",
+    "@storybook/addon-viewport": "6.5.0",
+    "@storybook/theming": "6.5.0",
+    "@storybook/vue": "6.5.0",
     "@vue/test-utils": "1.3.0",
     "autoprefixer": "^9.7.6",
     "babel-jest": "^26.6.3",

package/src/components/base/toggle/toggle.spec.js

@@ -10,12 +10,13 @@ describe('toggle', () => {
   const label = 'toggle label';
   const helpText = 'help text';
 
-  const createWrapper = (props = {}) => {
+  const createWrapper = (props = {}, options = {}) => {
     wrapper = shallowMount(Toggle, {
       propsData: {
         label,
         ...props,
       },
+      ...options,
     });
   };
 
@@ -85,12 +86,13 @@ describe('toggle', () => {
   });
 
   describe.each`
-    state             | help         | getAriaDescribedBy
-    ${'with help'}    | ${helpText}  | ${() => findHelpElement().attributes('id')}
-    ${'without help'} | ${undefined} | ${() => undefined}
-  `('$state', ({ help, getAriaDescribedBy }) => {
+    state                  | help         | props                 | options                          | getAriaDescribedBy
+    ${'with help'}         | ${helpText}  | ${{ help: helpText }} | ${undefined}                     | ${() => findHelpElement().attributes('id')}
+    ${'with help in slot'} | ${helpText}  | ${undefined}          | ${{ slots: { help: helpText } }} | ${() => findHelpElement().attributes('id')}
+    ${'without help'}      | ${undefined} | ${undefined}          | ${undefined}                     | ${() => undefined}
+  `('$state', ({ help, props, options, getAriaDescribedBy }) => {
     beforeEach(() => {
-      createWrapper({ help });
+      createWrapper(props, options);
     });
 
     it(`${help ? 'shows' : 'does not show'} help`, () => {

package/src/components/base/toggle/toggle.vue

@@ -81,11 +81,14 @@ export default {
     };
   },
   computed: {
+    shouldRenderHelp() {
+      return Boolean(this.$slots.help || this.help);
+    },
     icon() {
       return this.value ? 'mobile-issue-close' : 'close';
     },
     helpId() {
-      return this.help ? `toggle-help-${this.uuid}` : undefined;
+      return this.shouldRenderHelp ? `toggle-help-${this.uuid}` : undefined;
     },
     isChecked() {
       return this.value ? 'true' : 'false';
@@ -146,7 +149,7 @@ export default {
         <gl-icon :name="icon" :size="16" />
       </span>
     </button>
-    <span v-if="help" :id="helpId" class="gl-help-label" data-testid="toggle-help">
+    <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
       <!-- @slot A help text to be shown below the toggle. -->
       <slot name="help">{{ help }}</slot>
     </span>

package/src/components/charts/line/line.spec.js

@@ -195,5 +195,14 @@ describe('line component', () => {
 
       expect(findLegend().props('layout')).toBe(LEGEND_LAYOUT_TABLE);
     });
+    it('can be hidden', async () => {
+      createShallowWrapper({
+        showLegend: false,
+      });
+
+      await wrapper.vm.$nextTick();
+
+      expect(findLegend().exists()).toBe(false);
+    });
   });
 });

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

@@ -62,6 +62,7 @@ const template = `<gl-line-chart
   :thresholds="thresholds"
   :annotations="annotations"
   :includeLegendAvgMax="includeLegendAvgMax"
+  :showLegend="showLegend"
 />`;
 
 const generateProps = ({
@@ -70,7 +71,9 @@ const generateProps = ({
   thresholds = [],
   annotations = [],
   includeLegendAvgMax = true,
+  showLegend = true,
 } = {}) => ({
+  showLegend,
   includeLegendAvgMax,
   option,
   thresholds,
@@ -173,6 +176,27 @@ WithToolbox.args = generateProps({
   },
 });
 
+export const NoLegend = Template.bind({});
+NoLegend.args = generateProps({
+  data: [
+    {
+      name: 'Time Series',
+      data: generateTimeSeries(),
+    },
+  ],
+  option: {
+    animation: false,
+    xAxis: {
+      type: 'time',
+      name: 'Time',
+      axisLabel: {
+        formatter: timeSeriesDateFormatter,
+      },
+    },
+  },
+  showLegend: false,
+});
+
 export default {
   title: 'charts/line-chart',
   component: GlLineChart,

package/src/components/charts/line/line.vue

@@ -117,6 +117,11 @@ export default {
         return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
       },
     },
+    showLegend: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   data() {
     // Part of the tooltip related data can be
@@ -230,6 +235,9 @@ export default {
     legendStyle() {
       return { paddingLeft: `${grid.left}px` };
     },
+    hasLegend() {
+      return this.compiledOptions && this.showLegend;
+    },
     seriesInfo() {
       return this.compiledOptions.series.reduce((acc, series, index) => {
         if (series.type === 'line') {
@@ -366,7 +374,7 @@ export default {
       <tooltip-default-format v-else :tooltip-content="dataTooltipContent" />
     </chart-tooltip>
     <chart-legend
-      v-if="compiledOptions"
+      v-if="hasLegend"
       :chart="chart"
       :style="legendStyle"
       :series-info="seriesInfo"

package/src/scss/utilities.scss

@@ -418,6 +418,14 @@
   background-color: $purple-50 !important
 }
 
+.gl-bg-purple-800 {
+  background-color: $purple-800
+}
+
+.gl-bg-purple-800\! {
+  background-color: $purple-800 !important
+}
+
 .gl-bg-red-50 {
   background-color: $red-50
 }
@@ -1197,6 +1205,14 @@
   border-color: $blue-700 !important;
 }
 
+.gl-border-purple-700 {
+  border-color: $purple-700;
+}
+
+.gl-border-purple-700\! {
+  border-color: $purple-700 !important;
+}
+
 .gl-border-gray-a-08 {
   border-color: $t-gray-a-08;
 }
@@ -2475,6 +2491,14 @@
   color: $purple-700 !important;
 }
 
+.gl-text-purple-800 {
+  color: $purple-800;
+}
+
+.gl-text-purple-800\! {
+  color: $purple-800 !important;
+}
+
 .gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }
@@ -4723,6 +4747,14 @@
   min-height: $gl-spacing-scale-7 !important;
 }
 
+.gl-min-h-8 {
+  min-height: $gl-spacing-scale-8;
+}
+
+.gl-min-h-8\! {
+  min-height: $gl-spacing-scale-8 !important;
+}
+
 .gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }

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

@@ -146,6 +146,10 @@
   background-color: $purple-50;
 }
 
+@mixin gl-bg-purple-800 {
+  background-color: $purple-800;
+}
+
 @mixin gl-bg-red-50 {
   background-color: $red-50;
 }

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

@@ -147,6 +147,10 @@
   border-color: $blue-700;
 }
 
+@mixin gl-border-purple-700 {
+  border-color: $purple-700;
+}
+
 @mixin gl-border-gray-a-08 {
   border-color: $t-gray-a-08;
 }

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

@@ -193,6 +193,10 @@
   color: $purple-700;
 }
 
+@mixin gl-text-purple-800 {
+  color: $purple-800;
+}
+
 @mixin gl-text-theme-indigo-200 {
   color: $theme-indigo-200;
 }

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

@@ -329,6 +329,10 @@
   min-height: $gl-spacing-scale-7;
 }
 
+@mixin gl-min-h-8 {
+  min-height: $gl-spacing-scale-8;
+}
+
 @mixin gl-max-w-15 {
   max-width: $gl-spacing-scale-15;
 }