From 5ffa188d918372c18e5a641402e13366a8c858e4 Mon Sep 17 00:00:00 2001 From: Susie Kim Date: Mon, 22 Jan 2024 12:05:15 -0500 Subject: [PATCH] Add color vision events to hidden legend --- .../src/components/Legend/Legend.tsx | 6 ++- .../components/LegendItem/LegendItem.scss | 2 +- .../LegendContainer/LegendContainer.tsx | 4 +- .../components/HiddenLegendPopover.scss | 23 +++++++++--- .../components/HiddenLegendPopover.tsx | 37 ++++++++++++++----- .../src/components/LineChart/Chart.tsx | 2 +- .../ColorVisionA11y/useColorVisionEvents.ts | 4 +- 7 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx index 04c7872ef2..806f3a7e13 100644 --- 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; + 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 index 91e6a923db..a3d1af94a1 100644 --- 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 index c9285b2836..b545315e7e 100644 --- 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(null); + const moreTextRef = useRef(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 index ec1ab7fa98..d8f42b3805 100644 --- 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 index 662d824df4..bd0b660a7a 100644 --- 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( - ({activeIndex, colorVisionType, data, theme, label}, ref) => { +export const HiddenLegendPopover = forwardRef( + ( + {activeIndex, colorVisionType, data, theme, label, lastVisibleIndex = 0}, + ref, + ) => { const selectedTheme = useTheme(); const {isFirefox} = useBrowserCheck(); + useColorVisionEvents(true, {}); return ( <> -
+
+
( colorVisionType={colorVisionType} data={data} theme={theme} + lastVisibleIndex={lastVisibleIndex} /> + {/* {data.map((item, index) => { + return ( + + ); + })} */}
); diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx index 29f8fb1155..27c098aa39 100644 --- 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 index de0bdc67ce..bc18eecb50 100644 --- 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]); }