Clean up PR

Shopify · Jan 24, 2024 · b472e81 · b472e81
1 parent 9879369
commit b472e81
Show file tree

Hide file tree

Showing 15 changed files with 33 additions and 541 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -197,7 +197,6 @@ const Container = ({children, theme}: ContainerProps) => {
         overflow: 'hidden',
         margin: '-1rem',
         background: selectedTheme.chartContainer.backgroundColor,
-        padding: '1000px 0',
       }}
     >
       <div

diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
@@ -332,7 +332,6 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
-          width={width}
         />
       )}
     </ChartElements.Div>

diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -282,7 +282,6 @@ export function Chart({
           direction={legendDirection}
           position={legendPosition}
           maxWidth={maxLegendWidth}
-          width={width}
           renderLegendContent={
             shouldRenderLegendContentWithValues
               ? renderLegendContentWithValues

diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -307,7 +307,6 @@ export function Chart({
           data={legend}
           onDimensionChange={setLegendDimensions}
           renderLegendContent={renderLegendContent}
-          width={width}
         />
       )}
     </ChartElements.Div>

diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -53,7 +53,5 @@ export function Legend({
     );
   });
 
-  return (
-    <Fragment>{items}</Fragment>
-  );
+  return <Fragment>{items}</Fragment>;
 }
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -23,7 +23,7 @@ import type {
 import {classNames} from '../../utilities';
 
 import style from './LegendContainer.scss';
-import {HiddenLegendPopover} from './components/HiddenLegendPopover';
+import {HiddenLegendPopover} from './components/HiddenLegendTooltip';
 
 const LEGEND_GAP = 10;
 
@@ -37,10 +37,11 @@ export interface LegendContainerProps {
   maxWidth?: number;
   renderLegendContent?: RenderLegendContent;
   onItemDimensionChange?: any;
-  width: number;
-  renderHiddenLegendLabel?: RenderHiddenLegendLabel;
   /* If enabled, hides overflowing legend items with "+ n more" */
-  hideOverflow?: boolean;
+  enableHideOverflow?: boolean;
+  /* Width is required if enableHideOverflow is true */
+  width?: number;
+  renderHiddenLegendLabel?: RenderHiddenLegendLabel;
 }
 
 export function LegendContainer({
@@ -52,8 +53,8 @@ export function LegendContainer({
   position = 'bottom-right',
   maxWidth,
   renderLegendContent,
-  width,
-  hideOverflow = false,
+  width = 0,
+  enableHideOverflow = false,
   renderHiddenLegendLabel = (count) => `+${count} more`,
 }: LegendContainerProps) {
   const selectedTheme = useTheme();
@@ -70,15 +71,16 @@ export function LegendContainer({
   const leftMargin = isPositionLeft ? 0 : horizontalMargin;
 
   const legendItemDimensions = useRef([{width: 0, height: 0}]);
-  const [buttonWidth, setButtonWidth] = useState(0);
+  const [activatorWidth, setActivatorWidth] = useState(0);
 
   const {displayedData, hiddenData} = useMemo(() => {
-    if (!hideOverflow) {
+    if (!enableHideOverflow) {
       return {displayedData: allData, hiddenData: []};
     }
 
     let lastVisibleIndex = allData.length;
-    const containerWidth = width - leftMargin - horizontalMargin - buttonWidth;
+    const containerWidth =
+      width - leftMargin - horizontalMargin - activatorWidth;
 
     legendItemDimensions.current.reduce((totalWidth, card, index) => {
       if (totalWidth + card.width + index * LEGEND_GAP > containerWidth) {
@@ -92,16 +94,10 @@ export function LegendContainer({
       displayedData: allData.slice(0, lastVisibleIndex || 1),
       hiddenData: allData.slice(lastVisibleIndex || 1, allData.length),
     };
-  }, [
-    legendItemDimensions.current,
-    direction,
-    allData,
-    width,
-    leftMargin,
-    horizontalMargin,
-  ]);
+  }, [allData, width, leftMargin, horizontalMargin, activatorWidth]);
 
-  const hasHiddenData = hideOverflow && displayedData.length < allData.length;
+  const hasHiddenData =
+    enableHideOverflow && displayedData.length < allData.length;
 
   const styleMap: {[key: string]: CSSProperties} = {
     horizontal: {
@@ -110,7 +106,7 @@ export function LegendContainer({
         ? `0 ${horizontalMargin}px ${LEGENDS_BOTTOM_MARGIN}px ${leftMargin}px`
         : `${LEGENDS_TOP_MARGIN}px ${horizontalMargin}px 0 ${leftMargin}px`,
       flexDirection: 'row',
-      flexWrap: hasHiddenData ? 'nowrap' : 'wrap',
+      flexWrap: enableHideOverflow ? 'nowrap' : 'wrap',
     },
     vertical: {
       alignItems: 'flex-start',
@@ -190,7 +186,7 @@ export function LegendContainer({
                 allData.length - displayedData.length,
               )}
               lastVisibleIndex={allData.length - hiddenData.length}
-              setButtonWidth={setButtonWidth}
+              setActivatorWidth={setActivatorWidth}
             />
           )}
         </>

diff --git a/...ainer/components/HiddenLegendPopover.scss → ...ainer/components/HiddenLegendTooltip.scss b/...ainer/components/HiddenLegendPopover.scss → ...ainer/components/HiddenLegendTooltip.scss
@@ -8,7 +8,7 @@
   border-radius: 2px;
 }
 
-.LegendItems {
+.Tooltip {
   display: flex;
   flex-direction: column;
   padding: 4px;

diff --git a/...tainer/components/HiddenLegendPopover.tsx → ...tainer/components/HiddenLegendTooltip.tsx b/...tainer/components/HiddenLegendPopover.tsx → ...tainer/components/HiddenLegendTooltip.tsx
@@ -2,21 +2,20 @@ import {ReactNode, useCallback, useEffect, useRef, useState} from 'react';
 import {Legend} from '../../Legend/Legend';
 import type {LegendData} from '../../../types';
 
-import style from './HiddenLegendPopover.scss';
+import style from './HiddenLegendTooltip.scss';
 import {changeColorOpacity, useTheme} from '@shopify/polaris-viz-core';
 import {TOOLTIP_BG_OPACITY} from '../../../constants';
 import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
-import {useColorVisionEvents} from '../../../hooks';
 import {createPortal} from 'react-dom';
 import {useRootContainer} from '../../../hooks/useRootContainer';
-import {TOOLTIP_MARGIN} from '../../../components/TooltipWrapper';
+import {TOOLTIP_MARGIN} from '../../TooltipWrapper';
 
 interface Props {
   activeIndex: number;
   colorVisionType: string;
   data: LegendData[];
   label: ReactNode;
-  setButtonWidth: (width: number) => void;
+  setActivatorWidth: (width: number) => void;
   theme?: string;
   lastVisibleIndex?: number;
 }
@@ -28,11 +27,10 @@ export function HiddenLegendPopover({
   theme,
   label,
   lastVisibleIndex = 0,
-  setButtonWidth,
+  setActivatorWidth,
 }: Props) {
   const selectedTheme = useTheme();
   const {isFirefox} = useBrowserCheck();
-  useColorVisionEvents(true, {});
   const container = useRootContainer('hidden-legend-tooltip');
   const tooltipRef = useRef<HTMLDivElement>(null);
   const activatorRef = useRef<HTMLButtonElement>(null);
@@ -48,8 +46,8 @@ export function HiddenLegendPopover({
       return;
     }
     const activator = activatorRef.current.getBoundingClientRect();
-    setButtonWidth(activator.width);
-  }, [setButtonWidth]);
+    setActivatorWidth(activator.width);
+  }, [setActivatorWidth]);
 
   const getTooltipPosition = useCallback(() => {
     if (tooltipRef.current == null || activatorRef.current == null) {
@@ -69,7 +67,6 @@ export function HiddenLegendPopover({
         xPosition + tooltip.width + TOOLTIP_MARGIN > window.innerWidth;
 
       if (goesPastRightOfWindow) {
-        // console.log({goesPastRightOfWindow});
         return xPosition - tooltip.width + activator.width;
       }
       return xPosition;
@@ -80,7 +77,6 @@ export function HiddenLegendPopover({
         yPosition + tooltip.height + TOOLTIP_MARGIN >=
         window.innerHeight + window.scrollY;
       if (goesPastBottomOfWindow) {
-        // console.log({goesPastBottomOfWindow});
         return yPosition - tooltip.height - activator.height;
       }
 
@@ -91,7 +87,7 @@ export function HiddenLegendPopover({
       top: getYPosition(),
       left: getXPosition(),
     });
-  }, [setPosition, setButtonWidth]);
+  }, [setPosition, setActivatorWidth]);
 
   return (
     <>
@@ -100,15 +96,16 @@ export function HiddenLegendPopover({
         ref={activatorRef}
         onMouseEnter={getTooltipPosition}
         onMouseLeave={() => setActive(false)}
+        onFocus={getTooltipPosition}
+        onBlur={() => setActive(false)}
       >
         {label}
       </button>
 
       {createPortal(
         <div
-          className={style.LegendItems}
+          className={style.Tooltip}
           ref={tooltipRef}
-          id="hidden-legend-items-tooltip"
           style={{
             visibility: active ? 'visible' : 'hidden',
             zIndex: active ? 1 : -100000,

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