@gitlab/ui 63.0.0 → 63.1.1

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.0.0",
+  "version": "63.1.1",
   "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/new_dropdowns/dropdown.scss

@@ -32,6 +32,7 @@
   }
 
   .gl-new-dropdown-contents {
+    @include gl-relative;
     @include gl-flex-grow-1;
     @include gl-overflow-y-auto;
     @include gl-pl-0;
@@ -101,4 +102,69 @@
       @include gl-mx-0;
     }
   }
+
+  $dropdown-content-padding: 0.25rem;
+
+  // Scrim overlay related styles (the shadow that appears above and below the content) indicating that the content is scrollable
+  .gl-new-dropdown-contents-with-scrim-overlay {
+    padding: 0;
+  }
+
+  .gl-new-dropdown-contents {
+    .top-scrim-wrapper,
+    .bottom-scrim-wrapper {
+      height: $dropdown-content-padding;
+      opacity: 0;
+      position: sticky;
+      z-index: 1;
+      display: block;
+      overflow: visible;
+      left: 1px;
+      right: 1px;
+      pointer-events: none;
+      transition: opacity 0.1s;
+    }
+
+    .top-scrim-wrapper {
+      top: 0;
+
+      .top-scrim {
+        left: 0;
+        right: 0;
+
+        &.top-scrim-light {
+          height: 2.25rem;
+          border-radius: 0.375rem 0.375rem 0 0;
+          background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0));
+        }
+
+        &.top-scrim-dark {
+          height: 0.25rem;
+          background: linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
+        }
+      }
+    }
+
+    .bottom-scrim-wrapper {
+      bottom: 0;
+      height: $dropdown-content-padding;
+
+      .bottom-scrim {
+        height: 0;
+        position: relative;
+        top: calc(-2.25rem + #{$dropdown-content-padding});
+        border-radius: 0 0 0.375rem 0.375rem;
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
+      }
+    }
+
+    &.top-scrim-visible .top-scrim-wrapper,
+    &.bottom-scrim-visible .bottom-scrim-wrapper {
+      opacity: 1;
+    }
+
+    &.bottom-scrim-visible .bottom-scrim {
+      height: 2.25rem;
+    }
+  }
 }

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -3,11 +3,16 @@
   @include gl-px-2;
   @include gl-my-1;
 
-  &:first-child {
+  /* when there is a scrim `li` items inside the list, the first and last real items
+  do not match the selector `:first-child` and `:last-child`,
+  that's why we have to target them with a different selector */
+  &:first-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-child(3):not(:last-child) {
     @include gl-mt-0;
   }
 
-  &:last-child {
+  &:last-child,
+  .gl-new-dropdown-contents-with-scrim-overlay > &:nth-last-child(3):not(:first-child) {
     @include gl-mb-0;
   }
 

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -314,6 +314,8 @@ export default {
       listboxId: uniqueId('listbox-'),
       nextFocusedItemIndex: null,
       searchStr: '',
+      topBoundaryVisible: true,
+      bottomBoundaryVisible: true,
     };
   },
   computed: {
@@ -321,6 +323,15 @@ export default {
       if (this.items.length === 0 || isOption(this.items[0])) return 'ul';
       return 'div';
     },
+    listboxClasses() {
+      return {
+        'top-scrim-visible': !this.topBoundaryVisible,
+        'bottom-scrim-visible': !this.bottomBoundaryVisible,
+      };
+    },
+    itemTag() {
+      return this.listboxTag === 'ul' ? 'li' : 'div';
+    },
     flattenedOptions() {
       return flattenedOptions(this.items);
     },
@@ -379,6 +390,12 @@ export default {
       }
       return toggleClasses;
     },
+    hasHeader() {
+      return this.headerText || this.searchable;
+    },
+    hasFooter() {
+      return Boolean(this.$scopedSlots.footer);
+    },
   },
   watch: {
     selected: {
@@ -394,6 +411,15 @@ export default {
         }
       },
     },
+    items: {
+      handler() {
+        this.$nextTick(() => {
+          /* Every time the list of items changes (on search),
+           * the observed elements are recreated, thus we need to start obesrving them again */
+          this.observeScroll();
+        });
+      },
+    },
     ...(process.env.NODE_ENV !== 'production'
       ? {
           resetButtonLabel: {
@@ -419,6 +445,12 @@ export default {
         }
       : {}),
   },
+  mounted() {
+    this.observeScroll();
+  },
+  beforeDestroy() {
+    this.scrollObserver?.disconnect();
+  },
   methods: {
     open() {
       this.$refs.baseDropdown.open();
@@ -581,6 +613,35 @@ export default {
         'aria-posinset': index + 1,
       };
     },
+    observeScroll() {
+      const root = this.$refs.list;
+
+      const options = {
+        rootMargin: '8px',
+        root,
+        threshold: 1.0,
+      };
+
+      this.scrollObserver?.disconnect();
+
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          this[entry.target?.$__visibilityProp] = entry.isIntersecting;
+        });
+      }, options);
+
+      const topBoundary = this.$refs['top-boundary'];
+      const bottomBoundary = this.$refs['bottom-boundary'];
+      if (topBoundary) {
+        topBoundary.$__visibilityProp = 'topBoundaryVisible';
+        observer.observe(topBoundary);
+      }
+      if (bottomBoundary) {
+        bottomBoundary.$__visibilityProp = 'bottomBoundaryVisible';
+        observer.observe(bottomBoundary);
+      }
+      this.scrollObserver = observer;
+    },
     isOption,
   },
 };
@@ -663,10 +724,18 @@ export default {
       ref="list"
       :aria-labelledby="listAriaLabelledBy || headerId || toggleId"
       role="listbox"
-      class="gl-new-dropdown-contents"
+      class="gl-new-dropdown-contents gl-new-dropdown-contents-with-scrim-overlay"
+      :class="listboxClasses"
       tabindex="-1"
       @keydown="onKeydown"
     >
+      <component :is="itemTag" class="top-scrim-wrapper" aria-hidden="true" data-testid="top-scrim">
+        <div
+          class="top-scrim"
+          :class="{ 'top-scrim-light': !hasHeader, 'top-scrim-dark': hasHeader }"
+        ></div>
+      </component>
+      <component :is="itemTag" ref="top-boundary" aria-hidden="true" />
       <template v-for="(item, index) in items">
         <template v-if="isOption(item)">
           <gl-listbox-item
@@ -714,13 +783,22 @@ export default {
           </gl-listbox-group>
         </template>
       </template>
-      <component :is="listboxTag === 'ul' ? 'li' : 'div'" v-if="infiniteScrollLoading">
+      <component :is="itemTag" v-if="infiniteScrollLoading">
         <gl-loading-icon data-testid="listbox-infinite-scroll-loader" size="md" class="gl-my-3" />
       </component>
       <gl-intersection-observer
         v-if="showIntersectionObserver"
         @appear="onIntersectionObserverAppear"
       />
+      <component :is="itemTag" ref="bottom-boundary" aria-hidden="true" />
+      <component
+        :is="itemTag"
+        class="bottom-scrim-wrapper"
+        aria-hidden="true"
+        data-testid="bottom-scrim"
+      >
+        <div class="bottom-scrim" :class="{ 'gl-rounded-0!': hasFooter }"></div>
+      </component>
     </component>
     <span
       v-if="announceSRSearchResults"

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,