Add color vision events to hidden legend

Shopify · Jan 22, 2024 · 5ffa188 · 5ffa188
1 parent ed75d9c
commit 5ffa188
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 23 deletions.
diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -1,7 +1,7 @@
 import {Fragment, type RefObject} from 'react';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
-import {useExternalHideEvents} from '../../hooks';
+import {useColorVisionEvents, useExternalHideEvents} from '../../hooks';
 import type {LegendData} from '../../types';
 
 import {LegendItem} from './components/';
@@ -17,6 +17,7 @@ export interface LegendProps {
   colorVisionType?: string;
   theme?: string;
   itemDimensions?: RefObject<LegendDimension[]>;
+  lastVisibleIndex?: number,
 }
 
 export function Legend({
@@ -25,6 +26,7 @@ export function Legend({
   data,
   theme = DEFAULT_THEME_NAME,
   itemDimensions,
+  lastVisibleIndex = 0,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -39,7 +41,7 @@ export function Legend({
         {...legend}
         activeIndex={activeIndex}
         colorVisionType={colorVisionType}
-        index={index}
+        index={index + lastVisibleIndex}
         theme={theme}
         onDimensionChange={(dimensions) => {
           if (itemDimensions?.current) {

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss
@@ -18,7 +18,7 @@
   margin: -2px 0;
   font-size: 12px;
   font-family: $font-stack-base;
-  white-space: no-wrap;
+  white-space: nowrap;
 }
 
 .IconContainer {

diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -25,7 +25,6 @@ import style from './LegendContainer.scss';
 import {HiddenLegendPopover} from './components/HiddenLegendPopover';
 
 const MORE_TEXT_WIDTH = 50;
-const MAX_VERTICAL_LEGEND_ITEMS = 5;
 const LEGEND_GAP = 10;
 
 export interface LegendContainerProps {
@@ -71,7 +70,7 @@ export function LegendContainer({
   const leftMargin = isPositionLeft ? 0 : horizontalMargin;
 
   const legendItemDimensions = useRef([{width: 0, height: 0}]);
-  const moreTextRef = useRef<HTMLDivElement | null>(null);
+  const moreTextRef = useRef<HTMLButtonElement | null>(null);
 
   const {displayedData, hiddenData} = useMemo(() => {
     if (!hideOverflow) {
@@ -192,6 +191,7 @@ export function LegendContainer({
               theme={theme}
               label={renderHiddenText(allData.length - displayedData.length)}
               ref={moreTextRef}
+              lastVisibleIndex={allData.length - hiddenData.length}
             />
           )}
         </>

diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.scss b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.scss
@@ -3,24 +3,35 @@
   display: flex;
   white-space: nowrap;
   align-items: center;
+  background: none;
+  border: none;
+  border-radius: 2px;
 
-  &:hover + .LegendItems {
-    visibility: visible;
+  &:hover,
+  &:focus {
+    & + .LegendItems {
+      width: auto;
+      opacity: 1;
+    }
   }
 }
 
 .LegendItems {
-  visibility: hidden;
+  width: 0px;
+  opacity: 0;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: 5px;
   padding: 5px;
   border-radius: 5px;
   bottom: 42px;
   right: 0;
   box-shadow: 0 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
 
-  &:hover {
-    visibility: visible;
+  &:hover,
+  &:focus,
+  &:focus-within {
+    width: auto;
+    opacity: 1;
   }
 }
diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx
@@ -2,29 +2,35 @@ import {forwardRef} from 'react';
 import {Legend} from '../../Legend/Legend';
 import type {LegendData} from '../../../types';
 
+import style from './HiddenLegendPopover.scss';
+import {changeColorOpacity, useTheme} from '@shopify/polaris-viz-core';
+import {TOOLTIP_BG_OPACITY} from '../../../constants';
+import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
+import {useColorVisionEvents} from '../../../hooks';
+
 interface Props {
   activeIndex: number;
   colorVisionType: string;
   data: LegendData[];
   label: string;
   theme?: string;
+  lastVisibleIndex?: number;
 }
 
-import style from './HiddenLegendPopover.scss';
-import {changeColorOpacity, useTheme} from '@shopify/polaris-viz-core';
-import {TOOLTIP_BG_OPACITY} from '../../../constants';
-import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
-
-export const HiddenLegendPopover = forwardRef<HTMLDivElement, Props>(
-  ({activeIndex, colorVisionType, data, theme, label}, ref) => {
+export const HiddenLegendPopover = forwardRef<HTMLButtonElement, Props>(
+  (
+    {activeIndex, colorVisionType, data, theme, label, lastVisibleIndex = 0},
+    ref,
+  ) => {
     const selectedTheme = useTheme();
     const {isFirefox} = useBrowserCheck();
+    useColorVisionEvents(true, {});
 
     return (
       <>
-        <div className={style.MoreText} ref={ref}>
+        <button className={style.MoreText} ref={ref}>
           {label}
-        </div>
+        </button>
         <div
           className={style.LegendItems}
           style={{
@@ -40,7 +46,20 @@ export const HiddenLegendPopover = forwardRef<HTMLDivElement, Props>(
             colorVisionType={colorVisionType}
             data={data}
             theme={theme}
+            lastVisibleIndex={lastVisibleIndex}
           />
+          {/* {data.map((item, index) => {
+            return (
+              <TooltipRow
+                activeIndex={activeIndex}
+                index={index}
+                label={item.name}
+                color={item.color}
+                shape={item.shape || 'Line'}
+                value={''}
+              />
+            );
+          })} */}
         </div>
       </>
     );

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -95,7 +95,7 @@ export function Chart({
   xAxisOptions,
   yAxisOptions,
 }: ChartProps) {
-  useColorVisionEvents(data.length > 1);
+  useColorVisionEvents(data.length > 1, dimensions);
 
   const selectedTheme = useTheme(theme);
   const {isPerformanceImpacted} = useChartContext();

diff --git a/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts b/packages/polaris-viz/src/hooks/ColorVisionA11y/useColorVisionEvents.ts
@@ -5,7 +5,7 @@ import {useExternalHideEvents} from '../ExternalEvents';
 
 import {getDataSetItem, getEventName} from './utilities';
 
-export function useColorVisionEvents(enabled = true) {
+export function useColorVisionEvents(enabled = true, dimensions) {
   const {id} = useChartContext();
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -70,5 +70,5 @@ export function useColorVisionEvents(enabled = true) {
         item.removeEventListener('blur', onMouseLeave);
       });
     };
-  }, [id, enabled, hiddenIndexes]);
+  }, [id, enabled, hiddenIndexes, dimensions]);
 }