Merge pull request #294 from IFRCGo/feature/add-popup-preferred-width

samshara · web-flow · commit 3d80d03ff06c · 2023-11-20T10:34:12.000+05:45
Add preferred width to Popup
diff --git a/src/components/DropdownMenu/index.tsx b/src/components/DropdownMenu/index.tsx
@@ -21,6 +21,7 @@ import styles from './styles.module.css';
 export interface Props {
     className?: string;
     popupClassName?: string;
+    preferredPopupWidth?: number;
     children?: React.ReactNode;
     label?: React.ReactNode;
     activeClassName?: string;
@@ -50,6 +51,7 @@ function DropdownMenu(props: Props) {
         componentRef,
         elementRef: buttonRef = newButtonRef,
         persistent,
+        preferredPopupWidth,
     } = props;
 
     const dropdownRef = useRef<HTMLDivElement>(null);
@@ -135,6 +137,7 @@ function DropdownMenu(props: Props) {
                     elementRef={dropdownRef}
                     className={_cs(styles.dropdownContent, popupClassName)}
                     parentRef={buttonRef}
+                    preferredWidth={preferredPopupWidth}
                 >
                     {children}
                 </Popup>
diff --git a/src/components/Navbar/CountryDropdown/index.tsx b/src/components/Navbar/CountryDropdown/index.tsx
@@ -102,6 +102,7 @@ function CountryDropdown() {
             variant="tertiary"
             popupClassName={styles.dropdown}
             persistent
+            preferredPopupWidth={56}
         >
             {isEmpty && (
                 <Message
@@ -176,6 +177,7 @@ function CountryDropdown() {
                                                 urlParams={{ countryId: id }}
                                                 variant="tertiary"
                                                 withLinkIcon
+                                                className={styles.countryLink}
                                             >
                                                 {name}
                                             </DropdownMenuItem>
diff --git a/src/components/Navbar/CountryDropdown/styles.module.css b/src/components/Navbar/CountryDropdown/styles.module.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     padding: var(--go-ui-spacing-md);
-    width: calc(100% - var(--go-ui-spacing-md) * 2)!important;
     max-width: 64rem;
     min-height: 16rem;
     gap: var(--go-ui-spacing-md);
@@ -37,6 +36,10 @@
                 grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
                 grid-gap: var(--go-ui-spacing-sm);
                 overflow: auto;
+
+                .country-link {
+                    font-size: var(--go-ui-font-size-sm);
+                }
             }
         }
     }
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -19,9 +19,9 @@ import TabPanel from '#components/Tabs/TabPanel';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import LangaugeDropdown from './LanguageDropdown';
+import CountryDropdown from './CountryDropdown';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
-import CountryDropdown from './CountryDropdown';
 
 interface Props {
     className?: string;
@@ -135,6 +135,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuPrepare}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activePrepareOption}
@@ -252,6 +253,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuRespondLabel}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activeRespondOption}
@@ -398,6 +400,7 @@ function Navbar(props: Props) {
                         label={strings.userMenuLearnLabel}
                         variant="tertiary"
                         persistent
+                        preferredPopupWidth={56}
                     >
                         <Tabs
                             value={activeLearnOption}
diff --git a/src/components/Navbar/styles.module.css b/src/components/Navbar/styles.module.css
@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: row;
     padding: var(--go-ui-spacing-md);
-    width: calc(100% - var(--go-ui-spacing-md) * 2)!important;
     max-width: 32rem;
     min-height: 16rem;
     gap: var(--go-ui-spacing-md);
diff --git a/src/components/PieChart/styles.module.css b/src/components/PieChart/styles.module.css
@@ -1,5 +1,6 @@
 .pie-chart {
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     gap: var(--go-ui-spacing-md);
 
diff --git a/src/components/Popup/index.tsx b/src/components/Popup/index.tsx
@@ -11,6 +11,7 @@ interface Props {
     elementRef?: React.RefObject<HTMLDivElement>;
     parentRef: React.RefObject<HTMLElement | undefined>;
     children?: React.ReactNode;
+    preferredWidth?: number;
 }
 
 function Popup(props: Props) {
@@ -20,14 +21,15 @@ function Popup(props: Props) {
         children,
         className,
         pointerClassName,
+        preferredWidth,
     } = props;
 
     const {
         content,
         pointer,
         width,
         orientation,
-    } = useFloatPlacement(parentRef);
+    } = useFloatPlacement(parentRef, preferredWidth);
 
     return (
         <Portal>
diff --git a/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx b/src/components/domain/RiskImminentEvents/Gdacs/EventListItem/index.tsx
@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazard_name}
+            heading={hazard_name ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,7 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.gdacsEventStartedOn}
diff --git a/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx b/src/components/domain/RiskImminentEvents/MeteoSwiss/EventListItem/index.tsx
@@ -36,7 +36,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazardName}
+            heading={hazardName ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -48,7 +48,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.meteoSwissEventListStartedOn}
diff --git a/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx b/src/components/domain/RiskImminentEvents/Pdc/EventListItem/index.tsx
@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={hazard_name}
+            heading={hazard_name ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,6 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.eventListStartedOn}
diff --git a/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx b/src/components/domain/RiskImminentEvents/WfpAdam/EventListItem/index.tsx
@@ -32,7 +32,7 @@ function EventListItem(props: Props) {
     return (
         <Header
             className={styles.eventListItem}
-            heading={title}
+            heading={title ?? '--'}
             headingLevel={5}
             actions={(
                 <Button
@@ -44,7 +44,7 @@ function EventListItem(props: Props) {
                     <ChevronRightLineIcon className={styles.icon} />
                 </Button>
             )}
-            spacing="compact"
+            spacing="condensed"
         >
             <TextOutput
                 label={strings.wfpEventListPublishedOn}
diff --git a/src/hooks/useFloatPlacement.ts b/src/hooks/useFloatPlacement.ts
@@ -1,4 +1,4 @@
-import { bound, isNotDefined } from '@togglecorp/fujs';
+import { bound, isDefined, isNotDefined } from '@togglecorp/fujs';
 import { useState, useCallback, useEffect } from 'react';
 
 const ONE_REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -43,7 +43,10 @@ const defaultPlacement: Placement = {
     bottom: 'unset',
 };
 
-function useFloatPlacement(parentRef: React.RefObject<HTMLElement | undefined>) {
+function useFloatPlacement(
+    parentRef: React.RefObject<HTMLElement | undefined>,
+    preferredWidth?: number,
+) {
     const [placements, setPlacements] = useState<{
         content: Placement,
         pointer: Placement,
@@ -78,7 +81,7 @@ function useFloatPlacement(parentRef: React.RefObject<HTMLElement | undefined>)
         const parentCenterX = parentX + parentWidth / 2;
 
         const width = bound(
-            parentWidth,
+            isDefined(preferredWidth) ? preferredWidth * ONE_REM : parentWidth,
             MIN_WIDTH,
             maxWidth,
         );
@@ -87,13 +90,13 @@ function useFloatPlacement(parentRef: React.RefObject<HTMLElement | undefined>)
         let x2 = parentCenterX + width / 2;
 
         if (x1 < minX) {
-            const diff = minX - x1;
+            const diff = minX - x1 - horizontalPadding;
             x1 = minX;
             x2 += diff;
         }
 
         if (x2 > maxX) {
-            const diff = x2 - maxX;
+            const diff = x2 - maxX - horizontalPadding;
             x2 = maxX;
             x1 -= diff;
         }
@@ -118,7 +121,7 @@ function useFloatPlacement(parentRef: React.RefObject<HTMLElement | undefined>)
             width: `${x2 - x1}px`,
             orientation,
         });
-    }, [parentRef]);
+    }, [parentRef, preferredWidth]);
 
     useEffect(() => {
         calculatePlacement();
diff --git a/src/views/CountryRiskWatch/RiskBarChart/FoodInsecurityChart/index.tsx b/src/views/CountryRiskWatch/RiskBarChart/FoodInsecurityChart/index.tsx
diff --git a/src/views/CountryRiskWatch/RiskBarChart/index.tsx b/src/views/CountryRiskWatch/RiskBarChart/index.tsx
diff --git a/src/views/CountryRiskWatch/RiskBarChart/styles.module.css b/src/views/CountryRiskWatch/RiskBarChart/styles.module.css
diff --git a/src/views/CountryThreeWNationalSocietyProjects/styles.module.css b/src/views/CountryThreeWNationalSocietyProjects/styles.module.css
diff --git a/src/views/CountryThreeWProjects/index.tsx b/src/views/CountryThreeWProjects/index.tsx
diff --git a/src/views/CountryThreeWProjects/styles.module.css b/src/views/CountryThreeWProjects/styles.module.css

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,6 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-direction: row;`
`4`	`4`	`padding: var(--go-ui-spacing-md);`
`5`		`- width: calc(100% - var(--go-ui-spacing-md) * 2)!important;`
`6`	`5`	`max-width: 64rem;`
`7`	`6`	`min-height: 16rem;`
`8`	`7`	`gap: var(--go-ui-spacing-md);`
`@@ -37,6 +36,10 @@`
`37`	`36`	`grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));`
`38`	`37`	`grid-gap: var(--go-ui-spacing-sm);`
`39`	`38`	`overflow: auto;`
	`39`	`+`
	`40`	`+ .country-link {`
	`41`	`+ font-size: var(--go-ui-font-size-sm);`
	`42`	`+ }`
`40`	`43`	`}`
`41`	`44`	`}`
`42`	`45`	`}`