Replace the classNames prop in PointerBox with className and set zmen…

…u max-width (#1112) - Minor refactoring of the PointerBox component and the components that use it, to replace the classNames property on PointerBox (an object) with a className property (a string) - Used this className property after the refactoring to set a max-width of 400px on Zmenu on genome browser page
Ensembl · Apr 4, 2024 · 48bfc11 · 48bfc11
1 parent 8a080fd
commit 48bfc11
Show file tree

Hide file tree

Showing 20 changed files with 71 additions and 90 deletions.
diff --git a/src/content/app/genome-browser/components/zmenu/Zmenu.module.css b/src/content/app/genome-browser/components/zmenu/Zmenu.module.css
@@ -61,7 +61,8 @@
   align-items: center;
 }
 
-.toolBox {
-  max-width: 450px;
+.toolbox {
+  max-width: 400px;
   min-width: 250px;
+  word-break: break-word;
 }
diff --git a/src/content/app/genome-browser/components/zmenu/Zmenu.tsx b/src/content/app/genome-browser/components/zmenu/Zmenu.tsx
@@ -115,6 +115,7 @@ const Zmenu = (props: ZmenuProps) => {
           onOutsideClick={destroyZmenu}
           anchor={anchorRef.current}
           position={toolboxPosition}
+          className={styles.toolbox}
         >
           {zmenuContent}
         </Toolbox>

diff --git a/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx b/src/content/app/genome-browser/components/zmenu/zmenus/GeneAndOneTranscriptZmenu.tsx
@@ -104,7 +104,6 @@ const GeneAndOneTranscriptZmenu = (props: Props) => {
     <ToolboxExpandableContent
       mainContent={mainContent}
       footerContent={footerContent}
-      className={styles.toolBox}
     />
   );
 };

diff --git a/src/shared/components/gene-search-panel/GeneSearchPanel.module.css b/src/shared/components/gene-search-panel/GeneSearchPanel.module.css
@@ -104,14 +104,7 @@
 }
 
 .tooltip {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  color: var(--color-white);
-}
-
-.tooltipTip {
-  fill: var(--color-black);
+  --pointer-box-padding: 12px 20px;
 }
 
 /* FIXME: remove the pseudo-radio elements when we replace them with real radio buttons */

diff --git a/src/shared/components/gene-search-panel/GeneSearchPanel.tsx b/src/shared/components/gene-search-panel/GeneSearchPanel.tsx
@@ -49,6 +49,7 @@ import type { SearchMatch } from 'src/shared/types/search-api/search-match';
 
 import styles from './GeneSearchPanel.module.css';
 import radioStyles from 'src/shared/components/radio-group/RadioGroup.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type Props = {
   onClose: () => void;
@@ -300,7 +301,10 @@ const GeneMatch = (props: { match: SearchMatch; species: CommittedItem }) => {
       {shouldShowTooltip && anchorRef.current && (
         <PointerBox
           anchor={anchorRef.current}
-          classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+          className={classNames(
+            styles.tooltip,
+            pointerBoxStyles.pointerBoxShadow
+          )}
           position={PointerBoxPosition.RIGHT_TOP}
           onOutsideClick={handleClick}
         >

diff --git a/src/shared/components/in-app-search/InAppSearch.module.css b/src/shared/components/in-app-search/InAppSearch.module.css
@@ -91,14 +91,7 @@
 }
 
 .tooltip {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  color: var(--color-white);
-}
-
-.tooltipTip {
-  fill: var(--color-black);
+  --pointer-box-padding: 12px 20px;
 }
 
 .tooltipContent {

diff --git a/src/shared/components/in-app-search/InAppSearchMatches.tsx b/src/shared/components/in-app-search/InAppSearchMatches.tsx
@@ -41,6 +41,7 @@ import type { AppName } from 'src/shared/state/in-app-search/inAppSearchSlice';
 import type { InAppSearchMode } from './InAppSearch';
 
 import styles from './InAppSearch.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type InAppSearchMatchesProps = SearchResults & {
   app: AppName;
@@ -136,7 +137,10 @@ const InAppSearchMatch = (props: InAppSearchMatchProps) => {
               ? PointerBoxPosition.RIGHT_BOTTOM
               : PointerBoxPosition.BOTTOM_RIGHT
           }
-          classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+          className={classNames(
+            styles.tooltip,
+            pointerBoxStyles.pointerBoxShadow
+          )}
           onOutsideClick={hideTooltip}
         >
           <MatchDetails {...props} onClick={onAppClick} />

diff --git a/src/shared/components/pointer-box/PointerBox.module.css b/src/shared/components/pointer-box/PointerBox.module.css
@@ -1,9 +1,12 @@
 .pointerBox {
+  --_pointer-box-color: var(--pointer-box-color, var(--color-black));
+  color: var(--pointer-box-text-color, var(--color-white));
+  background-color: var(--_pointer-box-color);
+  cursor: default; /* to override cursor: pointer if e.g. parent is a button */
   position: absolute;
-  z-index: 1000;
   width: max-content;
-  box-sizing: content-box; /* Safari doesn't seem to respect "width: max-content" if box-sizing is border-box */
-  padding: 6px;
+  padding: var(--pointer-box-padding, 6px);
+  z-index: 1000;
 }
 
 /* Class applied to pointer box while the code is finding appropriate position for it.
@@ -18,6 +21,15 @@ hence it is placed in top left corner of the screen with position: fixed */
 }
 
 .pointer {
+  fill: var(--_pointer-box-color);
   position: absolute;
   mix-blend-mode: lighten;
 }
+
+/* This is a shared class for adding a shadow to PointerBox.
+   It is passed to PointerBox from parent components
+   that need PointerBox to have a shadow.
+*/
+.pointerBoxShadow {
+  filter: drop-shadow(2px 2px 3px var(--shadow-color));
+}
diff --git a/src/shared/components/pointer-box/PointerBox.tsx b/src/shared/components/pointer-box/PointerBox.tsx
@@ -46,7 +46,6 @@ export type InlineStylesState = {
 
 type PointerProps = {
   style: InlineStyles;
-  className?: string;
   width: number;
   height: number;
 };
@@ -60,10 +59,7 @@ export type PointerBoxProps = {
   pointerWidth?: number;
   pointerHeight?: number;
   pointerOffset?: number;
-  classNames?: {
-    box?: string;
-    pointer?: string;
-  };
+  className?: string;
   children: ReactNode;
   onOutsideClick?: (() => void) | ((event: Event) => void);
   onClose?: () => void;
@@ -166,7 +162,7 @@ const PointerBox = (props: PointerBoxProps) => {
 
   const bodyClasses = classNames(
     styles.pointerBox,
-    props.classNames?.box,
+    props.className,
     positionFromProps,
     { [styles.invisible]: isPositioning || !hasInlineStyles() }
   );
@@ -178,7 +174,6 @@ const PointerBox = (props: PointerBoxProps) => {
       style={inlineStyles.boxStyles}
     >
       <Pointer
-        className={props.classNames?.pointer}
         width={pointerWidthFromProps}
         height={pointerHeightFromProps}
         style={inlineStyles.pointerStyles}
@@ -201,7 +196,7 @@ const Pointer = (props: PointerProps) => {
     height: `${pointerHeight}px`
   };
 
-  const pointerClasses = classNames(styles.pointer, props.className);
+  const pointerClasses = classNames(styles.pointer);
   const polygonPoints = `0,${pointerHeight} ${pointerWidth},${pointerHeight} ${pointerEndX},0`;
 
   return (

diff --git a/src/shared/components/toolbox/Toolbox.module.css b/src/shared/components/toolbox/Toolbox.module.css
@@ -1,14 +1,5 @@
-
 .toolbox {
-  background: var(--color-black);
-  padding: 12px 20px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  cursor: default;
-  color: var(--color-white);
+  --pointer-box-padding: 12px 20px;
   min-height: 40px;
   font-size: 13px;
 }
-
-.tooltipTip {
-  fill: var(--color-black);
-}
diff --git a/src/shared/components/toolbox/Toolbox.tsx b/src/shared/components/toolbox/Toolbox.tsx
@@ -15,12 +15,14 @@
  */
 
 import React, { ReactNode } from 'react';
+import classNames from 'classnames';
 
 import PointerBox, {
   Position
 } from 'src/shared/components/pointer-box/PointerBox';
 
 import styles from './Toolbox.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 export enum ToolboxPosition {
   LEFT = 'left',
@@ -31,6 +33,7 @@ type ToolboxProps = {
   position?: ToolboxPosition;
   anchor: HTMLElement;
   onOutsideClick?: () => void;
+  className?: string;
   children: ReactNode;
 };
 
@@ -41,13 +44,19 @@ const Toolbox = (props: ToolboxProps) => {
       ? Position.LEFT_BOTTOM
       : Position.RIGHT_BOTTOM;
 
+  const componentClasses = classNames(
+    styles.toolbox,
+    pointerBoxStyles.pointerBoxShadow,
+    props.className
+  );
+
   return (
     <PointerBox
       position={pointerBoxPosition}
       anchor={props.anchor}
       onOutsideClick={props.onOutsideClick}
       renderInsideAnchor={true}
-      classNames={{ box: styles.toolbox, pointer: styles.tooltipTip }}
+      className={componentClasses}
     >
       {props.children}
     </PointerBox>

diff --git a/src/shared/components/tooltip/Tooltip.module.css b/src/shared/components/tooltip/Tooltip.module.css
@@ -1,14 +1,7 @@
 .tooltip {
-  background: var(--color-dark-grey);
-  padding: 6px 18px 8px;
-  filter: drop-shadow(2px 2px 3px var(--shadow-color));
-  cursor: default;
-  color: var(--color-white);
+  --pointer-box-color: var(--color-dark-grey);
+  --pointer-box-padding: 6px 18px 8px;
   border-radius: 4px;
   font-size: 14px;
   max-width: 300px;
 }
-
-.tooltipTip {
-  fill: var(--color-dark-grey);
-}
diff --git a/src/shared/components/tooltip/Tooltip.tsx b/src/shared/components/tooltip/Tooltip.tsx
@@ -15,6 +15,7 @@
  */
 
 import React, { ReactNode, useEffect, useState } from 'react';
+import classNames from 'classnames';
 
 import { TOOLTIP_TIMEOUT } from './tooltip-constants';
 
@@ -25,6 +26,7 @@ import PointerBox, {
 import { TooltipPosition } from './tooltip-types';
 
 import styles from './Tooltip.module.css';
+import pointerBoxStyles from 'src/shared/components/pointer-box/PointerBox.module.css';
 
 type Props = {
   anchor: HTMLElement;
@@ -62,6 +64,11 @@ const TooltipWithAnchor = (props: Props) => {
     return null;
   }
 
+  const componentClasses = classNames(
+    styles.tooltip,
+    pointerBoxStyles.pointerBoxShadow
+  );
+
   return (
     <PointerBox
       position={props.position ?? Position.BOTTOM_RIGHT}
@@ -70,7 +77,7 @@ const TooltipWithAnchor = (props: Props) => {
       autoAdjust={props.autoAdjust}
       renderInsideAnchor={props.renderInsideAnchor}
       onClose={props.onClose}
-      classNames={{ box: styles.tooltip, pointer: styles.tooltipTip }}
+      className={componentClasses}
       onOutsideClick={props.onClose}
     >
       {props.children}

diff --git a/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css b/src/shared/components/view-in-app-popup/ViewInAppPopup.module.css
@@ -3,15 +3,9 @@
 }
 
 .pointerBox {
-  padding: 6px 12px;
-  background: var(--color-black);
-  color: var(--color-white);
+  --pointer-box-padding: 6px 12px;
 }
 
 .pointerBox p {
   max-width: 200px;
 }
-
-.pointerBoxPointer {
-  fill: var(--color-black);
-}
diff --git a/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx b/src/shared/components/view-in-app-popup/ViewInAppPopup.tsx
@@ -67,10 +67,7 @@ const ViewInAppPopup = (props: ViewInAppPopupProps) => {
           onClose={onClose}
           position={position}
           autoAdjust={true}
-          classNames={{
-            box: styles.pointerBox,
-            pointer: styles.pointerBoxPointer
-          }}
+          className={styles.pointerBox}
         >
           <ViewInApp theme="dark" links={links} />
         </PointerBox>

diff --git a/stories/shared-components/pointer-box/PointerBox.stories.module.css b/stories/shared-components/pointer-box/PointerBox.stories.module.css
@@ -1,7 +1,5 @@
 .pointerBox {
-  padding: 6px 12px;
-  background: black;
-  color: white;
+  --pointer-box-padding: 6px 12px;
 }
 
 .pointerBox p {

diff --git a/stories/shared-components/pointer-box/PointerBox.stories.tsx b/stories/shared-components/pointer-box/PointerBox.stories.tsx
@@ -16,9 +16,9 @@
 
 import React from 'react';
 
-import VariantsStory from './variantsStory';
-import PositioningStory from './positioningStory';
-import ScrollingStory from './scrollingStory';
+import VariantsStory from './pointerBoxVariantsStory';
+import PositioningStory from './pointerBoxPositioningStory';
+import ScrollingStory from './pointerBoxScrollingStory';
 
 export default {
   title: 'Components/Shared Components/PointerBox'

diff --git a/...mponents/pointer-box/positioningStory.tsx → ...ointer-box/pointerBoxPositioningStory.tsx b/...mponents/pointer-box/positioningStory.tsx → ...ointer-box/pointerBoxPositioningStory.tsx
@@ -57,10 +57,7 @@ const Item = (props: ItemProps) => {
           position={props.position}
           container={props.container.current}
           autoAdjust={true}
-          classNames={{
-            box: styles.pointerBox,
-            pointer: styles.pointerBoxPointer
-          }}
+          className={styles.pointerBox}
           pointerOffset={5}
         >
           Hello sailor!

diff --git a/...components/pointer-box/scrollingStory.tsx → .../pointer-box/pointerBoxScrollingStory.tsx b/...components/pointer-box/scrollingStory.tsx → .../pointer-box/pointerBoxScrollingStory.tsx
@@ -56,10 +56,7 @@ const ScrollingStory = () => {
               position={Position.BOTTOM_LEFT}
               onClose={() => setShowPointerBox(false)}
               renderInsideAnchor={renderingTarget === RenderingTarget.ANCHOR}
-              classNames={{
-                box: styles.pointerBox,
-                pointer: styles.pointerBoxPointer
-              }}
+              className={styles.pointerBox}
             >
               Hello sailor!
             </PointerBox>