@gitlab/ui 80.7.0 → 80.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.7.0",
+  "version": "80.7.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -33,9 +33,9 @@ const fakeMilestones = [
 ];
 
 const fakeLabels = [
-  { id: 1, title: 'Bug', color: '#D9534F', text_color: '#FFFFFF' },
+  { id: 1, title: 'Bug', color: '#D72104', text_color: '#FFFFFF' },
   { id: 2, title: 'Enhancement', color: '#F0AD4E', text_color: '#FFFFFF' },
-  { id: 3, title: 'Backlog', color: '#cccccc', text_color: '#333333' },
+  { id: 3, title: 'Backlog', color: '#CCCCCC', text_color: '#333333' },
   { id: 4, title: 'Feature', color: '#A8D695', text_color: '#333333' },
   { id: 5, title: 'Documentation', color: '#5CB85C', text_color: '#FFFFFF' },
 ];

package/src/components/base/filtered_search/filtered_search_term.vue

@@ -214,7 +214,7 @@ export default {
       @previous="$emit('previous')"
       @next="$emit('next')"
     >
-      <template #view>
+      <template #view="{ label }">
         <gl-token
           v-if="showToken"
           :class="{ 'gl-cursor-pointer': !viewOnly }"
@@ -229,7 +229,7 @@ export default {
           class="gl-filtered-search-term-input"
           :class="{ 'gl-bg-gray-10': viewOnly }"
           :placeholder="placeholder"
-          :aria-label="placeholder"
+          :aria-label="label"
           :readonly="viewOnly"
           data-testid="filtered-search-term-input"
           @focusin="$emit('activate')"

package/src/components/base/filtered_search/filtered_search_token_segment.vue

@@ -463,6 +463,6 @@ export default {
       </portal>
     </template>
 
-    <slot v-else name="view" v-bind="{ inputValue }">{{ inputValue }}</slot>
+    <slot v-else name="view" v-bind="{ label, inputValue }">{{ inputValue }}</slot>
   </div>
 </template>

package/src/components/charts/legend/legend.scss

@@ -14,8 +14,8 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   }
 }
 
-.gl-legend-tabular,
-.gl-chart-h-auto .gl-legend-inline {
+.gl-legend-tabular.gl-legend-b-fade,
+.gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade {
   &::after {
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
     bottom: 0;
@@ -78,7 +78,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
   .gl-legend-tabular-row {
     @include gl-display-flex;
-    
+
     &:nth-child(odd) {
       background-color: var(--gray-50, #{$gray-50});
     }

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

@@ -33,6 +33,15 @@ const mockSeriesInfo = [
   },
 ];
 
+const mockElementHeight = (element, clientHeight, scrollHeight) => {
+  Object.defineProperty(element, 'clientHeight', {
+    get: () => clientHeight,
+  });
+  Object.defineProperty(element, 'scrollHeight', {
+    get: () => scrollHeight,
+  });
+};
+
 describe('chart legend component', () => {
   let chartWrapper;
   let legendWrapper;
@@ -157,6 +166,23 @@ describe('chart legend component', () => {
     expect(legendWrapper.find('.gl-legend-tabular').exists()).toBe(false);
   });
 
+  it('adds a fade when content scrolls', async () => {
+    const legendInlineEl = legendWrapper.find('.gl-legend-inline').element;
+    mockElementHeight(legendInlineEl, 200, 400);
+
+    // update component to force recalculation of fade class after we mock the heights
+    legendWrapper.setProps({
+      averageText: 'averaaaaage',
+    });
+
+    // Why wait 3 ticks?
+    await legendWrapper.vm.$nextTick(); // 1. component waits a tick itself after update, before checking scrollHeight
+    await legendWrapper.vm.$nextTick(); // 2. so wait for next render, after component has applied class
+    await legendWrapper.vm.$nextTick(); // 3. ??? vue-3 pipeline fails without waiting an extra tick
+
+    expect(legendWrapper.find('.gl-legend-b-fade').exists()).toBe(true);
+  });
+
   describe('when setting the layout prop to table', () => {
     beforeEach(() => {
       buildLegend({

package/src/components/charts/legend/legend.vue

@@ -83,6 +83,7 @@ export default {
     return {
       disabledSeries: {},
       lastActiveSeriesLabel: null,
+      shouldApplyFadeClass: false,
     };
   },
   computed: {
@@ -99,6 +100,13 @@ export default {
   created() {
     this.chart.on('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },
+  mounted() {
+    this.applyFadeClass();
+  },
+  async updated() {
+    await this.$nextTick();
+    this.applyFadeClass();
+  },
   beforeDestroy() {
     this.chart.off('legendselectchanged', this.suppressLastActiveSeriesLabelToggle);
   },
@@ -163,6 +171,12 @@ export default {
     isToggleDisabled(name, isDisabled) {
       return name === this.lastActiveSeriesLabel || isDisabled;
     },
+    applyFadeClass() {
+      if (this.$refs.inlineLegendEl) {
+        const { scrollHeight, clientHeight } = this.$refs.inlineLegendEl;
+        this.shouldApplyFadeClass = scrollHeight > clientHeight;
+      }
+    },
   },
   legendLayoutTypes: {
     LEGEND_LAYOUT_INLINE,
@@ -174,7 +188,11 @@ export default {
 <template>
   <div class="gl-legend" data-testid="gl-chart-legend">
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_INLINE">
-      <div class="gl-legend-inline">
+      <div
+        ref="inlineLegendEl"
+        class="gl-legend-inline"
+        :class="{ 'gl-legend-b-fade': shouldApplyFadeClass }"
+      >
         <div
           v-for="(series, key) in seriesInfo"
           :key="key"
@@ -212,7 +230,7 @@ export default {
     </template>
 
     <template v-if="layout === $options.legendLayoutTypes.LEGEND_LAYOUT_TABLE">
-      <div class="gl-legend-tabular" :style="fontStyle">
+      <div class="gl-legend-tabular gl-legend-b-fade" :style="fontStyle">
         <header class="gl-legend-tabular-header">
           <div class="gl-legend-tabular-header-cell">{{ minText }}</div>
           <div class="gl-legend-tabular-header-cell">{{ maxText }}</div>