Add legend background prop

Shopify · Jan 22, 2024 · 7b6d105 · 7b6d105
1 parent d3094ac
commit 7b6d105
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx
@@ -15,6 +15,7 @@ export interface LegendProps {
   colorVisionType?: string;
   theme?: string;
   itemDimensions?: RefObject<LegendItemDimension[]>;
+  backgroundColor?: string;
   lastVisibleIndex?: number,
 }
 
@@ -25,6 +26,7 @@ export function Legend({
   theme = DEFAULT_THEME_NAME,
   itemDimensions,
   lastVisibleIndex = 0,
+  backgroundColor
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -41,6 +43,7 @@ export function Legend({
         colorVisionType={colorVisionType}
         index={index + lastVisibleIndex}
         theme={theme}
+        backgroundColor={backgroundColor}
         onDimensionChange={(dimensions) => {
           if (itemDimensions?.current) {
             itemDimensions.current[index] = dimensions;

diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx
@@ -28,6 +28,7 @@ export interface LegendItemProps extends LegendData {
   renderSeriesIcon?: () => ReactNode;
   theme?: string;
   onDimensionChange?: ({width, height}: LegendItemDimension) => void;
+  backgroundColor?: string;
 }
 
 export function LegendItem({
@@ -42,6 +43,7 @@ export function LegendItem({
   theme,
   value,
   onDimensionChange,
+  backgroundColor,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
   const ref = useRef<HTMLButtonElement | null>(null)
@@ -61,11 +63,13 @@ export function LegendItem({
           index,
         });
 
+  const background = backgroundColor ?? selectedTheme.legend.backgroundColor;
+
   return (
     <button
       {...colorBlindAttrs}
       style={{
-        background: selectedTheme.legend.backgroundColor,
+        background,
         ...getColorVisionStylesForActiveIndex({
           activeIndex,
           index,

diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.scss b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.scss
@@ -21,12 +21,12 @@
   opacity: 0;
   display: flex;
   flex-direction: column;
-  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);
+  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);
 
   &:hover,
   &:focus,

diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx
@@ -47,6 +47,7 @@ export const HiddenLegendPopover = forwardRef<HTMLButtonElement, Props>(
             data={data}
             theme={theme}
             lastVisibleIndex={lastVisibleIndex}
+            backgroundColor="transparent"
           />
           {/* {data.map((item, index) => {
             return (