fix(GlChartLegend): prevent bottom fade when not scrollable

What does this MR do?

Fixes a small issues where the bottom "fade" (used to show there is scrollable content) was being applied always, for inline chart legends.

This looks especially bad for legends with a single series.

Now the fade is only applied when the legend actually has scrollable content.

Screenshots or screen recordings

Before	After

Note: to reproduce this bug, the chart needs to be within a fixed height container (such as an analytics dashboard panel) and be using the chart height-auto option. Here is a patch with a story to reproduce the issue/fix:

patch

diff --git a/src/components/charts/legend/legend.stories.js b/src/components/charts/legend/legend.stories.js
index 89a667fbd..4a6581f54 100644
--- a/src/components/charts/legend/legend.stories.js
+++ b/src/components/charts/legend/legend.stories.js
@@ -129,6 +129,24 @@ export const DefaultWithOverflowingFixedContainerHeight = () => {
   return storyOptions;
 };
 
+export const DefaultWithOverflowingFixedContainerHeightWithSingleSeries = () => {
+  const storyOptions = getStoryOptions(1, SERIES_NAME_SHORT, null);
+
+  storyOptions.template = generateTemplate(
+    null,
+    {
+      class: HEIGHT_AUTO_CLASSES, // line, area, heatmap etc charts all have these classes on the wrapper element in auto height mode
+      style: 'height: 400px; overflow: hidden; outline: 1px solid red;', // Simulate being inside a dashboard panel with fixed height and no overflow
+    },
+    {
+      height: 'auto',
+      class: 'gl-flex-grow-1', // line, area, heatmap etc charts all have gl-flex-grow-1 on the <gl-chart> element in auto height mode
+    }
+  );
+
+  return storyOptions;
+};
+
 export const WithTabularLayout = () => getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
 export const WithTabularLayoutAndDisabledLegendItem = () => {
   const storyOptions = getStoryOptions(10, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
@@ -160,6 +178,9 @@ export const WithTabularOverflowingFixedContainerHeight = () => {
   return storyOptions;
 };
 
+export const WithTabularLayoutSingleSeries = () =>
+  getStoryOptions(1, SERIES_NAME_SHORT, LEGEND_LAYOUT_TABLE);
+
 export default {
   title: 'charts/chart-legend',
   component: GlChartLegend,

Apply patch then view DefaultWithOverflowingFixedContainerHeightWithSingleSeries legend story.

Does this MR meet the acceptance criteria?

This checklist encourages the authors, reviewers, and maintainers of merge requests (MRs) to confirm changes were analyzed for conformity with the project's guidelines, security and accessibility.

Toggle the acceptance checklist

Conformity

• Code review guidelines.
• GitLab UI's contributing guidelines.
• If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
• If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
• If the MR changes a component's API, integration MR(s) have been opened (see integration merge requests above).
• Added the ~"component:*" label(s) if applicable.

/label component:chart

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• Label as security and @ mention @gitlab-com/gl-security/appsec
• Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.