refactor(heatmap): fix heatmap styles in dark mode + fix storybook ba…

…dges
chanzuckerberg · Jul 30, 2024 · 5a14e7c · 5a14e7c
1 parent 03e1330
commit 5a14e7c
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 71 deletions.
diff --git a/packages/components/src/core/Bases/Borders/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Borders/__storybook__/index.stories.tsx
@@ -5,7 +5,7 @@ import { Template } from "./stories/default";
 
 export default {
   parameters: {
-    badges: [BADGE.WIP],
+    badges: [BADGE.STABLE],
   },
   title: "Bases/Borders",
 } as Meta;

diff --git a/packages/components/src/core/Bases/Colors/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Colors/__storybook__/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
     axe: {
       disabledRules: ["color-contrast"],
     },
-    badges: [BADGE.WIP],
+    badges: [BADGE.STABLE],
   },
   title: "Bases/Colors",
 } as Meta;

diff --git a/packages/components/src/core/Bases/Corners/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Corners/__storybook__/index.stories.tsx
@@ -5,7 +5,7 @@ import { Template } from "./stories/default";
 
 export default {
   parameters: {
-    badges: [BADGE.WIP],
+    badges: [BADGE.STABLE],
   },
   title: "Bases/Corners",
 } as Meta;

diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/index.stories.tsx
@@ -5,7 +5,7 @@ import { Template } from "./stories/default";
 
 export default {
   parameters: {
-    badges: [BADGE.WIP],
+    badges: [BADGE.STABLE],
   },
   title: "Bases/Drop Shadows",
 } as Meta;

diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/index.stories.tsx b/packages/components/src/core/Bases/Spaces/__storybook__/index.stories.tsx
@@ -8,7 +8,7 @@ export default {
     axe: {
       disabledRules: ["color-contrast"],
     },
-    badges: [BADGE.WIP],
+    badges: [BADGE.STABLE],
   },
   title: "Bases/Spaces",
 } as Meta;

diff --git a/packages/components/src/core/Button/__storybook__/index.stories.tsx b/packages/components/src/core/Button/__storybook__/index.stories.tsx
@@ -10,6 +10,7 @@ import {
   BUTTON_ICON_OPTIONS,
 } from "./constants";
 import { Button } from "./stories/default";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 export default {
   argTypes: {
@@ -66,6 +67,9 @@ export default {
     },
   },
   component: Button,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
   title: "Components/Button",
 } as Meta;
 

diff --git a/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx b/packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx
@@ -8,6 +8,7 @@ import {
   BUTTON_DROPDOWN_TEXT,
 } from "./constants";
 import { ButtonDropdown } from "./stories/default";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 export default {
   argTypes: {
@@ -41,6 +42,9 @@ export default {
     },
   },
   component: ButtonDropdown,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
   title: "Components/ButtonDropdown",
 } as Meta;
 

diff --git a/packages/components/src/core/CellBasic/__storybook__/index.stories.tsx b/packages/components/src/core/CellBasic/__storybook__/index.stories.tsx
@@ -11,6 +11,7 @@ import {
   CELL_BASIC_PRIMARY_TEXT_COMPONENT_SLOT_RIGHT_OPTIONS,
 } from "./constants";
 import { TestDemo } from "./stories/test";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 export default {
   argTypes: {
@@ -114,6 +115,7 @@ export default {
   },
   component: CellBasic,
   parameters: {
+    badges: [BADGE.STABLE],
     controls: {
       expanded: true,
     },

diff --git a/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx b/packages/components/src/core/InputCheckbox/__storybook__/index.stories.tsx
@@ -5,6 +5,7 @@ import {
   INPUT_CHECKBOX_TEST_ID,
 } from "./constants";
 import { TestDemo } from "./stories/test";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 export default {
   argTypes: {
@@ -29,6 +30,9 @@ export default {
     },
   },
   component: InputCheckbox,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
   title: "Components/Inputs/InputCheckbox",
 } as Meta;
 

diff --git a/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx b/packages/components/src/core/InputRadio/__storybook__/index.stories.tsx
@@ -2,6 +2,7 @@ import { Args, Meta } from "@storybook/react";
 import { InputRadio } from "./stories/default";
 import { TestDemo } from "./stories/test";
 import { INPUT_RADIO_EXCLUDED_CONTROLS } from "./constants";
+import { BADGE } from "src/common/storybook/storybookBadges";
 
 export default {
   argTypes: {
@@ -26,6 +27,9 @@ export default {
     },
   },
   component: InputRadio,
+  parameters: {
+    badges: [BADGE.STABLE],
+  },
   title: "Components/Inputs/InputRadio",
 } as Meta;
 

diff --git a/...src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/index.tsx b/...src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/ControlPanel/index.tsx
@@ -160,6 +160,8 @@ const RENDERER = [
   },
 ];
 
+const POPPER_PLACEMENT = "right-start";
+
 const ControlPanel = () => {
   const dispatch = useDispatch();
 
@@ -193,6 +195,7 @@ const ControlPanel = () => {
             value: color,
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             groupBy: (option: DropdownOption) => option.section as string,
             width: 220,
           }}
@@ -212,6 +215,7 @@ const ControlPanel = () => {
             value: `${size} x ${size}`,
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />
@@ -230,6 +234,7 @@ const ControlPanel = () => {
             value: camera ? "On" : "Off",
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />
@@ -248,6 +253,7 @@ const ControlPanel = () => {
             value: toPascalCase(renderer),
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />
@@ -266,6 +272,7 @@ const ControlPanel = () => {
             value: toPascalCase(type),
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />
@@ -284,6 +291,7 @@ const ControlPanel = () => {
             value: toPascalCase(symbol),
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />
@@ -302,6 +310,7 @@ const ControlPanel = () => {
             value: toPascalCase(emphasis),
           }}
           DropdownMenuProps={{
+            PopperPlacement: POPPER_PLACEMENT,
             width: 220,
           }}
         />

diff --git a/...ta-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts b/...ta-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts
@@ -3,11 +3,10 @@ import { styled } from "@mui/material";
 
 export const StyledHeader = styled("div")`
   grid-area: 1 / 1 / 2 / 6;
-  border-bottom: solid 1px #eee;
-  width: calc(100% - 15px);
+  border-bottom: solid 1px #c3c3c347;
+  width: 100%;
   padding: 0 15px;
   height: 70px;
-  background-color: white;
   position: fixed;
   z-index: 200;
   display: flex;

diff --git a/...iz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/style.ts b/...iz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/XAxisChart/style.ts
@@ -11,7 +11,6 @@ interface XAxisWrapperProps {
 
 export const XAxisWrapper = styled.div<XAxisWrapperProps>`
   ${xAxisWidthAndOffset}
-  background-color: white;
   height: ${(props) => props.height}px;
   position: absolute;
   overflow: hidden;
@@ -27,7 +26,6 @@ interface XAxisContainerProps {
 
 export const XAxisContainer = styled.div<XAxisContainerProps>`
   ${xAxisWidth}
-  background-color: white;
   height: ${(props) => props.height}px;
   top: 0px;
   position: absolute;
@@ -51,13 +49,13 @@ export const XAxisLabel = styled.div`
       align-items: center;
       padding-bottom: 25px;
       &::before {
-          content: "";
-          position: absolute;
-          width: 1px;
-          height: 5px;
-          background-color: #666;
-          margin-left: -25px;
-          bottom: 0;
+        content: "";
+        position: absolute;
+        width: 1px;
+        height: 5px;
+        background-color: #666;
+        margin-left: -25px;
+        bottom: 0;
       }
     `;
   }}
@@ -85,20 +83,19 @@ interface GeneButtonProps {
 export const GeneButtonStyle = styled.div<GeneButtonProps>`
   ${(props) => {
     return `
-        background-color: white;
-        border: none;
-        z-index: 2;
-        display: inline-flex;
-        justify-content: space-between;
-        white-space: nowrap;
-        flex-direction: column;
-        align-items: center;
-
-        &:hover {
-            ${activeStyle()}
-        }
-
-        ${props.active ? activeStyle() : null}
+      border: none;
+      z-index: 2;
+      display: inline-flex;
+      justify-content: space-between;
+      white-space: nowrap;
+      flex-direction: column;
+      align-items: center;
+
+      &:hover {
+        ${activeStyle()}
+      }
+
+      ${props.active ? activeStyle() : null}
     `;
   }}
 `;
@@ -127,9 +124,8 @@ function xAxisWidth({ width }: { width: number }) {
 
 function selectedStyle({ font }: { font: string }) {
   return `
-      font: ${font};
-      background-color: "white";
-    `;
+    font: ${font};
+  `;
 }
 
 function activeStyle() {
@@ -138,12 +134,15 @@ function activeStyle() {
     #gene-hover-container {
       visibility: visible;
     }
-    background-color: #f3f3f3;
+    background-color: #c3c3c340;
+    .gene-label-container {
+      color: unset;
+    }
     .gene-label-container span {
-        color: black;
-        font-weight: 600;
+      font-weight: 600;
     }
     .x-axis-hover-container {
       opacity: 1;
-    }`;
+    }
+  `;
 }