Fix lint

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

Hide file tree

Showing 10 changed files with 64 additions and 31 deletions.
diff --git a/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx b/packages/polaris-viz/src/components/Docs/stories/components/SampleComponents.tsx
@@ -204,7 +204,7 @@ export const SampleLegendChart = ({theme} = {theme: 'Default'}) => {
 export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => {
   const selectedTheme = useTheme(theme);
   const colors = getSeriesColors(6, selectedTheme);
-  const {legend, width} = useLegend({
+  const {legend} = useLegend({
     data: [
       {
         shape: 'Line',
@@ -253,7 +253,6 @@ export const SampleLegendContainer = ({theme} = {theme: 'Default'}) => {
           colorVisionType=""
           data={legend}
           onDimensionChange={() => {}}
-          width={width}
         />
       </div>
     </SimpleContainer>

diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -1,13 +1,12 @@
-import {Fragment, type RefObject} from 'react';
+import {Fragment} from 'react';
+import type {RefObject} from 'react';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../../hooks';
 import type {LegendData} from '../../types';
 
-import {LegendItem} from './components/';
-import type { LegendItemDimension } from './components/LegendItem/LegendItem';
-
-
+import {LegendItem} from './components';
+import type {LegendItemDimension} from './components';
 
 export interface LegendProps {
   data: LegendData[];
@@ -16,7 +15,7 @@ export interface LegendProps {
   theme?: string;
   itemDimensions?: RefObject<LegendItemDimension[]>;
   backgroundColor?: string;
-  lastVisibleIndex?: number,
+  indexOffset?: number;
 }
 
 export function Legend({
@@ -25,8 +24,8 @@ export function Legend({
   data,
   theme = DEFAULT_THEME_NAME,
   itemDimensions,
-  lastVisibleIndex = 0,
-  backgroundColor
+  indexOffset = 0,
+  backgroundColor,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -41,7 +40,7 @@ export function Legend({
         {...legend}
         activeIndex={activeIndex}
         colorVisionType={colorVisionType}
-        index={index + lastVisibleIndex}
+        index={index + indexOffset}
         theme={theme}
         backgroundColor={backgroundColor}
         onDimensionChange={(dimensions) => {

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.scss
@@ -19,6 +19,12 @@
   font-size: 12px;
   font-family: $font-stack-base;
   white-space: nowrap;
+  min-width: 0;
+}
+
+.Text {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .IconContainer {

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
@@ -2,7 +2,8 @@ import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
 } from '@shopify/polaris-viz-core';
-import {useEffect, type ReactNode, useRef} from 'react';
+import type {ReactNode} from 'react';
+import {useEffect, useRef} from 'react';
 
 import {
   LEGEND_ITEM_LEFT_PADDING,
@@ -18,7 +19,7 @@ import style from './LegendItem.scss';
 
 export interface LegendItemDimension {
   width: number;
-  height: number
+  height: number;
 }
 
 export interface LegendItemProps extends LegendData {
@@ -29,6 +30,7 @@ export interface LegendItemProps extends LegendData {
   theme?: string;
   onDimensionChange?: ({width, height}: LegendItemDimension) => void;
   backgroundColor?: string;
+  truncate?: boolean;
 }
 
 export function LegendItem({
@@ -44,9 +46,10 @@ export function LegendItem({
   value,
   onDimensionChange,
   backgroundColor,
+  truncate = true,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
-  const ref = useRef<HTMLButtonElement | null>(null)
+  const ref = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (onDimensionChange && ref.current != null) {
@@ -64,6 +67,7 @@ export function LegendItem({
         });
 
   const background = backgroundColor ?? selectedTheme.legend.backgroundColor;
+  const maxWidth = value ? '200px' : '100px';
 
   return (
     <button
@@ -77,6 +81,7 @@ export function LegendItem({
         paddingLeft: LEGEND_ITEM_LEFT_PADDING,
         paddingRight: LEGEND_ITEM_RIGHT_PADDING,
         gap: LEGEND_ITEM_GAP,
+        maxWidth: truncate ? maxWidth : undefined,
       }}
       className={style.Legend}
       ref={ref}
@@ -92,9 +97,21 @@ export function LegendItem({
         renderSeriesIcon()
       )}
       <span className={style.TextContainer}>
-        <span style={{color: selectedTheme.legend.labelColor}}>{name}</span>
+        <span
+          className={style.Text}
+          style={{
+            color: selectedTheme.legend.labelColor,
+          }}
+        >
+          {name}
+        </span>
         {value == null ? null : (
-          <span style={{color: selectedTheme.legend.valueColor}}>{value}</span>
+          <span
+            className={style.Text}
+            style={{color: selectedTheme.legend.valueColor}}
+          >
+            {value}
+          </span>
         )}
       </span>
     </button>

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/index.ts b/packages/polaris-viz/src/components/Legend/components/LegendItem/index.ts
@@ -1 +1,2 @@
 export {LegendItem} from './LegendItem';
+export type {LegendItemDimension} from './LegendItem';
diff --git a/packages/polaris-viz/src/components/Legend/components/index.ts b/packages/polaris-viz/src/components/Legend/components/index.ts
@@ -1 +1,2 @@
 export {LegendItem} from './LegendItem';
+export type {LegendItemDimension} from './LegendItem';
diff --git a/packages/polaris-viz/src/components/Legend/index.ts b/packages/polaris-viz/src/components/Legend/index.ts
@@ -2,3 +2,4 @@ export {Legend} from './Legend';
 export {LegendItem} from './components';
 export type {LegendProps} from './Legend';
 export {estimateLegendItemWidth} from './utilities/estimateLegendItemWidth';
+export type {LegendItemDimension} from './components';
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -1,5 +1,5 @@
 import type {CSSProperties, Dispatch, SetStateAction} from 'react';
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {Fragment, useEffect, useMemo, useRef, useState} from 'react';
 import isEqual from 'fast-deep-equal';
 import {
   getColorVisionEventAttrs,
@@ -94,7 +94,14 @@ export function LegendContainer({
       displayedData: allData.slice(0, lastVisibleIndex || 1),
       hiddenData: allData.slice(lastVisibleIndex || 1, allData.length),
     };
-  }, [allData, width, leftMargin, horizontalMargin, activatorWidth]);
+  }, [
+    allData,
+    width,
+    leftMargin,
+    horizontalMargin,
+    activatorWidth,
+    enableHideOverflow,
+  ]);
 
   const hasHiddenData =
     enableHideOverflow && displayedData.length < allData.length;
@@ -168,7 +175,7 @@ export function LegendContainer({
       style={{...styleMap[direction], ...shouldCenterTiles(position)}}
     >
       {renderLegendContent?.(colorVisionInteractionMethods) ?? (
-        <>
+        <Fragment>
           <Legend
             activeIndex={activeIndex}
             colorVisionType={colorVisionType}
@@ -189,7 +196,7 @@ export function LegendContainer({
               setActivatorWidth={setActivatorWidth}
             />
           )}
-        </>
+        </Fragment>
       )}
     </div>
   );

diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.scss b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.scss
@@ -9,11 +9,11 @@
 }
 
 .Tooltip {
+  position: absolute;
   display: flex;
   flex-direction: column;
   padding: 4px;
   backdrop-filter: blur(5px);
   border-radius: 5px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
-  position: absolute;
 }
diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx
@@ -1,14 +1,16 @@
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react';
-import {Legend} from '../../Legend/Legend';
-import type {LegendData} from '../../../types';
-
-import style from './HiddenLegendTooltip.scss';
+import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import type {ReactNode} from 'react';
+import {createPortal} from 'react-dom';
 import {changeColorOpacity, useTheme} from '@shopify/polaris-viz-core';
+
+import type {LegendData} from '../../../types';
 import {TOOLTIP_BG_OPACITY} from '../../../constants';
 import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
-import {createPortal} from 'react-dom';
 import {useRootContainer} from '../../../hooks/useRootContainer';
 import {TOOLTIP_MARGIN} from '../../TooltipWrapper';
+import {Legend} from '../../Legend';
+
+import style from './HiddenLegendTooltip.scss';
 
 interface Props {
   activeIndex: number;
@@ -87,10 +89,10 @@ export function HiddenLegendPopover({
       top: getYPosition(),
       left: getXPosition(),
     });
-  }, [setPosition, setActivatorWidth]);
+  }, [setPosition]);
 
   return (
-    <>
+    <Fragment>
       <button
         className={style.MoreText}
         ref={activatorRef}
@@ -121,12 +123,12 @@ export function HiddenLegendPopover({
             colorVisionType={colorVisionType}
             data={data}
             theme={theme}
-            lastVisibleIndex={lastVisibleIndex}
+            indexOffset={lastVisibleIndex}
             backgroundColor="transparent"
           />
         </div>,
         container,
       )}
-    </>
+    </Fragment>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export {LegendItem} from './LegendItem';
		export type {LegendItemDimension} from './LegendItem';