@gitlab/ui 63.1.0 → 63.1.2

package/dist/utils/charts/theme.js

@@ -11,19 +11,32 @@ const gray300 = '#a4a3a8';
 const gray500 = '#737278';
 const gray600 = '#626168';
 const gray900 = '#333238';
+const dataVizGreen50 = '#ddfab7';
+const dataVizGreen100 = '#c6ed94';
+const dataVizGreen200 = '#b0d97b';
+const dataVizGreen300 = '#94c25e';
+const dataVizGreen400 = '#81ac41';
 const dataVizGreen500 = '#619025';
 const dataVizGreen600 = '#4e7f0e';
 const dataVizGreen700 = '#366800';
 const dataVizGreen800 = '#275600';
 const dataVizGreen900 = '#1a4500';
 const dataVizGreen950 = '#133a03';
+const dataVizAqua50 = '#b5fefd';
+const dataVizAqua100 = '#93f2ef';
+const dataVizAqua200 = '#5edee3';
+const dataVizAqua300 = '#32c5d2';
+const dataVizAqua400 = '#00acc4';
 const dataVizAqua500 = '#0090b1';
 const dataVizAqua600 = '#007b9b';
 const dataVizAqua700 = '#006381';
 const dataVizAqua800 = '#00516c';
 const dataVizAqua900 = '#004059';
 const dataVizAqua950 = '#00344b';
+const dataVizBlue50 = '#e9ebff';
+const dataVizBlue100 = '#d2dcff';
 const dataVizBlue200 = '#b7c6ff';
+const dataVizBlue300 = '#97acff';
 const dataVizBlue400 = '#7992f5';
 const dataVizBlue500 = '#617ae2';
 const dataVizBlue600 = '#4e65cd';
@@ -31,12 +44,22 @@ const dataVizBlue700 = '#3f51ae';
 const dataVizBlue800 = '#374291';
 const dataVizBlue900 = '#303470';
 const dataVizBlue950 = '#2a2b59';
+const dataVizMagenta50 = '#ffe3eb';
+const dataVizMagenta100 = '#ffccdb';
+const dataVizMagenta200 = '#fcacc5';
+const dataVizMagenta300 = '#f88aaf';
+const dataVizMagenta400 = '#e86e9a';
 const dataVizMagenta500 = '#cf4d81';
 const dataVizMagenta600 = '#b93d71';
 const dataVizMagenta700 = '#9a2e5d';
 const dataVizMagenta800 = '#7c214f';
 const dataVizMagenta900 = '#661e3a';
 const dataVizMagenta950 = '#541d31';
+const dataVizOrange50 = '#fae8d1';
+const dataVizOrange100 = '#f5d6b3';
+const dataVizOrange200 = '#eebd8c';
+const dataVizOrange300 = '#e99b60';
+const dataVizOrange400 = '#e07e41';
 const dataVizOrange500 = '#c95d2e';
 const dataVizOrange600 = '#b14f18';
 const dataVizOrange700 = '#92430a';
@@ -55,10 +78,12 @@ const gaugeWarningHue = dataVizOrange500;
  * The default palette is based on the Categorical data palette
  * Categorical data (also known as qualitative or thematic) uses hue to
  * differentiate qualitative data, and lightness to differentiate quantitive data.
- * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
+ * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
-const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen700, dataVizMagenta800, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen900, dataVizMagenta950, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen600, dataVizMagenta700, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen800, dataVizMagenta900, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen950, dataVizMagenta500, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta600];
+const colorPaletteDefault = [dataVizBlue500, dataVizOrange600, dataVizAqua500, dataVizGreen600, dataVizMagenta500, dataVizBlue700, dataVizOrange800, dataVizAqua700, dataVizGreen800, dataVizMagenta700, dataVizBlue900, dataVizOrange950, dataVizAqua900, dataVizGreen950, dataVizMagenta900, dataVizBlue600, dataVizOrange700, dataVizAqua600, dataVizGreen700, dataVizMagenta600, dataVizBlue800, dataVizOrange900, dataVizAqua800, dataVizGreen900, dataVizMagenta800, dataVizBlue950, dataVizOrange500, dataVizAqua950, dataVizGreen500, dataVizMagenta950];
 const colorFromDefaultPalette = index => colorPaletteDefault[index % colorPaletteDefault.length];
+const colorPaletteDark = [dataVizBlue500, dataVizOrange400, dataVizAqua500, dataVizGreen400, dataVizMagenta500, dataVizBlue300, dataVizOrange200, dataVizAqua300, dataVizGreen200, dataVizMagenta300, dataVizBlue100, dataVizOrange50, dataVizAqua100, dataVizGreen50, dataVizMagenta100, dataVizBlue400, dataVizOrange300, dataVizAqua400, dataVizGreen300, dataVizMagenta400, dataVizBlue200, dataVizOrange100, dataVizAqua200, dataVizGreen100, dataVizMagenta200, dataVizBlue50, dataVizOrange500, dataVizAqua50, dataVizGreen500, dataVizMagenta50];
+const colorFromDarkPalette = index => colorPaletteDark[index % colorPaletteDark.length];
 const axes = {
   axisLabel: {
     margin: 8,
@@ -229,4 +254,4 @@ const createTheme = function () {
   };
 };
 
-export { colorFromDefaultPalette, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };
+export { colorFromDarkPalette, colorFromDefaultPalette, colorPaletteDark, colorPaletteDefault, createTheme, gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue, heatmapHues, themeName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "63.1.0",
+  "version": "63.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -89,22 +89,22 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.46.0",
+    "@gitlab/svgs": "3.47.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.0.11",
-    "@storybook/addon-docs": "7.0.11",
-    "@storybook/addon-essentials": "7.0.11",
-    "@storybook/addon-storyshots": "7.0.11",
-    "@storybook/addon-storyshots-puppeteer": "7.0.11",
-    "@storybook/addon-viewport": "7.0.11",
-    "@storybook/builder-webpack5": "7.0.11",
-    "@storybook/theming": "7.0.11",
-    "@storybook/vue": "7.0.11",
-    "@storybook/vue-webpack5": "7.0.11",
-    "@storybook/vue3": "7.0.11",
-    "@storybook/vue3-webpack5": "7.0.11",
+    "@storybook/addon-a11y": "7.0.12",
+    "@storybook/addon-docs": "7.0.12",
+    "@storybook/addon-essentials": "7.0.12",
+    "@storybook/addon-storyshots": "7.0.12",
+    "@storybook/addon-storyshots-puppeteer": "7.0.12",
+    "@storybook/addon-viewport": "7.0.12",
+    "@storybook/builder-webpack5": "7.0.12",
+    "@storybook/theming": "7.0.12",
+    "@storybook/vue": "7.0.12",
+    "@storybook/vue-webpack5": "7.0.12",
+    "@storybook/vue3": "7.0.12",
+    "@storybook/vue3-webpack5": "7.0.12",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -9,56 +9,65 @@
   @include gl-py-5;
 
   &.indigo {
-    @include gl-bg-theme-indigo-700;
+    --gl-broadcast-message-bg-color: #{$theme-indigo-700};
+    --gl-broadcast-message-border-color: #{$theme-indigo-900};
   }
 
   &.light-indigo {
-    @include gl-bg-theme-indigo-500;
+    --gl-broadcast-message-bg-color: #{$theme-indigo-500};
+    --gl-broadcast-message-border-color: #{$theme-indigo-700};
   }
 
   &.blue {
-    @include gl-bg-theme-blue-700;
+    --gl-broadcast-message-bg-color: #{$theme-blue-700};
+    --gl-broadcast-message-border-color: #{$theme-blue-900};
   }
 
   &.light-blue {
-    @include gl-bg-theme-blue-500;
+    --gl-broadcast-message-bg-color: #{$theme-blue-500};
+    --gl-broadcast-message-border-color: #{$theme-blue-700};
   }
 
   &.green {
-    @include gl-bg-theme-green-700;
+    --gl-broadcast-message-bg-color: #{$theme-green-700};
+    --gl-broadcast-message-border-color: #{$theme-green-900};
   }
 
   &.light-green {
-    @include gl-bg-theme-green-500;
+    --gl-broadcast-message-bg-color: #{$theme-green-500};
+    --gl-broadcast-message-border-color: #{$theme-green-700};
   }
 
   &.red {
-    @include gl-bg-theme-red-700;
+    --gl-broadcast-message-bg-color: #{$theme-red-700};
+    --gl-broadcast-message-border-color: #{$theme-red-900};
   }
 
   &.light-red {
-    @include gl-bg-theme-red-500;
+    --gl-broadcast-message-bg-color: #{$theme-red-500};
+    --gl-broadcast-message-border-color: #{$theme-red-700};
   }
 
   &.dark {
-    @include gl-bg-gray-500;
+    --gl-broadcast-message-bg-color: #{$gray-500};
+    --gl-broadcast-message-border-color: #{$gray-700};
   }
 
   &.light {
-    @include gl-bg-gray-300;
+    --gl-broadcast-message-bg-color: #{$gray-300};
+    --gl-broadcast-message-border-color: #{$gray-500};
   }
 
   &.banner {
     @include gl-text-contrast-light;
-    @include gl-inset-border-b-1-gray-900;
+    background-color: var(--gl-broadcast-message-bg-color);
+    box-shadow: inset 0 -#{$gl-border-size-1} 0 0 var(--gl-broadcast-message-border-color);
   }
 
   &.notification {
     @include gl-rounded-base;
     @include gl-bg-white;
-    @include gl-border-solid;
-    @include gl-border-gray-100;
-    @include gl-border-1;
+    @include gl-border;
     @include gl-shadow-x0-y2-b4-s0;
     max-width: $gl-broadcast-message-notification-max-width;
   }

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

@@ -15,6 +15,17 @@ const template = `
     </gl-broadcast-message>
   `;
 
+const templateWithTheme = (theme) => `
+  <gl-broadcast-message
+    :icon-name="iconName"
+    :dismissible="dismissible"
+    :dismiss-label="dismissLabel"
+    theme="${theme}"
+    :type="type">
+    {{ text }}
+  </gl-broadcast-message>
+`;
+
 const defaultValue = (prop) => GlBroadcastMessage.props[prop].default;
 
 const generateProps = ({
@@ -58,7 +69,7 @@ const StackedStory = (args, { argTypes }) => ({
     GlBroadcastMessage,
   },
   props: Object.keys(argTypes),
-  template: `<div>${template}${template}</div>`,
+  template: `<div>${Object.keys(colorThemes).map(templateWithTheme).join('')}</div>`,
 });
 export const Stacked = StackedStory.bind({});
 Stacked.args = generateProps();

package/src/components/charts/legend/legend.md

@@ -0,0 +1,16 @@
+## Disabling Legends
+
+By default, to prevent the chart from disappearing, all legends can't be toggled off – the last
+active legend will be disabled. To manually disable a legend, pass it the
+`disabled` property in `seriesInfo`:
+
+```js
+seriesInfo = [
+  {
+    name: 'Example Legend',
+    color: 'blue',
+    disabled: true,
+    type: 'line'
+  }
+]
+```

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

@@ -7,6 +7,7 @@ import {
   SERIES_NAME_LONG_WITHOUT_SPACES,
 } from '../../../utils/stories_constants';
 import { gray200 } from '../../../../scss_to_js/scss_variables';
+import readme from './legend.md';
 
 const generateOptions = (seriesLength, seriesNameType) => {
   return {
@@ -127,5 +128,10 @@ export default {
   component: GlChartLegend,
   parameters: {
     controls: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
   },
 };

package/src/components/charts/stacked_column/__snapshots__/stacked_column.spec.js.snap

@@ -418,13 +418,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(54, 104, 0, 0.4)",
+          "color": "rgba(78, 127, 14, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#366800",
+        "borderColor": "#4e7f0e",
         "borderWidth": 1,
-        "color": "rgba(54, 104, 0, 0.2)",
+        "color": "rgba(78, 127, 14, 0.2)",
       },
       "name": "Fun 4",
       "stack": Array [
@@ -779,13 +779,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(54, 104, 0, 0.4)",
+          "color": "rgba(78, 127, 14, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#366800",
+        "borderColor": "#4e7f0e",
         "borderWidth": 1,
-        "color": "rgba(54, 104, 0, 0.2)",
+        "color": "rgba(78, 127, 14, 0.2)",
       },
       "name": "Fun 4",
       "stack": Array [
@@ -823,13 +823,13 @@ Object {
       ],
       "emphasis": Object {
         "itemStyle": Object {
-          "color": "rgba(124, 33, 79, 0.4)",
+          "color": "rgba(207, 77, 129, 0.4)",
         },
       },
       "itemStyle": Object {
-        "borderColor": "#7c214f",
+        "borderColor": "#cf4d81",
         "borderWidth": 1,
-        "color": "rgba(124, 33, 79, 0.2)",
+        "color": "rgba(207, 77, 129, 0.2)",
       },
       "name": "Secondary 1",
       "stack": "tiled",

package/src/utils/charts/theme.js

@@ -8,13 +8,21 @@ import {
   gray900,
   red500,
   whiteNormal,
+  dataVizAqua50,
+  dataVizAqua100,
+  dataVizAqua200,
+  dataVizAqua300,
+  dataVizAqua400,
   dataVizAqua500,
   dataVizAqua600,
   dataVizAqua700,
   dataVizAqua800,
   dataVizAqua900,
   dataVizAqua950,
+  dataVizBlue50,
+  dataVizBlue100,
   dataVizBlue200,
+  dataVizBlue300,
   dataVizBlue400,
   dataVizBlue500,
   dataVizBlue600,
@@ -22,18 +30,33 @@ import {
   dataVizBlue800,
   dataVizBlue900,
   dataVizBlue950,
+  dataVizGreen50,
+  dataVizGreen100,
+  dataVizGreen200,
+  dataVizGreen300,
+  dataVizGreen400,
   dataVizGreen500,
   dataVizGreen600,
   dataVizGreen700,
   dataVizGreen800,
   dataVizGreen900,
   dataVizGreen950,
+  dataVizMagenta50,
+  dataVizMagenta100,
+  dataVizMagenta200,
+  dataVizMagenta300,
+  dataVizMagenta400,
   dataVizMagenta500,
   dataVizMagenta600,
   dataVizMagenta700,
   dataVizMagenta800,
   dataVizMagenta900,
   dataVizMagenta950,
+  dataVizOrange50,
+  dataVizOrange100,
+  dataVizOrange200,
+  dataVizOrange300,
+  dataVizOrange400,
   dataVizOrange500,
   dataVizOrange600,
   dataVizOrange700,
@@ -64,43 +87,78 @@ export const gaugeWarningHue = dataVizOrange500;
  * The default palette is based on the Categorical data palette
  * Categorical data (also known as qualitative or thematic) uses hue to
  * differentiate qualitative data, and lightness to differentiate quantitive data.
- * More info: https://gitlab.com/gitlab-org/gitlab-design/-/issues/719#categorical
+ * More info: https://design.gitlab.com/data-visualization/color#categorical-data
  */
 export const colorPaletteDefault = [
   dataVizBlue500,
   dataVizOrange600,
   dataVizAqua500,
-  dataVizGreen700,
-  dataVizMagenta800,
+  dataVizGreen600,
+  dataVizMagenta500,
   dataVizBlue700,
   dataVizOrange800,
   dataVizAqua700,
-  dataVizGreen900,
-  dataVizMagenta950,
+  dataVizGreen800,
+  dataVizMagenta700,
   dataVizBlue900,
   dataVizOrange950,
   dataVizAqua900,
-  dataVizGreen600,
-  dataVizMagenta700,
+  dataVizGreen950,
+  dataVizMagenta900,
   dataVizBlue600,
   dataVizOrange700,
   dataVizAqua600,
-  dataVizGreen800,
-  dataVizMagenta900,
+  dataVizGreen700,
+  dataVizMagenta600,
   dataVizBlue800,
   dataVizOrange900,
   dataVizAqua800,
-  dataVizGreen950,
-  dataVizMagenta500,
+  dataVizGreen900,
+  dataVizMagenta800,
   dataVizBlue950,
   dataVizOrange500,
   dataVizAqua950,
   dataVizGreen500,
-  dataVizMagenta600,
+  dataVizMagenta950,
 ];
 export const colorFromDefaultPalette = (index) =>
   colorPaletteDefault[index % colorPaletteDefault.length];
 
+export const colorPaletteDark = [
+  dataVizBlue500,
+  dataVizOrange400,
+  dataVizAqua500,
+  dataVizGreen400,
+  dataVizMagenta500,
+  dataVizBlue300,
+  dataVizOrange200,
+  dataVizAqua300,
+  dataVizGreen200,
+  dataVizMagenta300,
+  dataVizBlue100,
+  dataVizOrange50,
+  dataVizAqua100,
+  dataVizGreen50,
+  dataVizMagenta100,
+  dataVizBlue400,
+  dataVizOrange300,
+  dataVizAqua400,
+  dataVizGreen300,
+  dataVizMagenta400,
+  dataVizBlue200,
+  dataVizOrange100,
+  dataVizAqua200,
+  dataVizGreen100,
+  dataVizMagenta200,
+  dataVizBlue50,
+  dataVizOrange500,
+  dataVizAqua50,
+  dataVizGreen500,
+  dataVizMagenta50,
+];
+
+export const colorFromDarkPalette = (index) => colorPaletteDark[index % colorPaletteDark.length];
+
 const axes = {
   axisLabel: {
     margin: 8,