Merge pull request #258 from IFRCGo/feature/use-spacing-tokens-in-grid

Minor styling fixes

Author: samshara

src/components/Grid/index.tsx

@@ -3,23 +3,14 @@ import { _cs, isNotDefined } from '@togglecorp/fujs';
 
 import Message from '#components/Message';
 import RawList, { type Props as RawListProps, type ListKey } from '#components/RawList';
-import type { SpacingType } from '#components/types';
 import useTranslation from '#hooks/useTranslation';
+import { type SpacingType } from '#components/types';
+import useSpacingTokens from '#hooks/useSpacingTokens';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 type NumColumn = 2 | 3 | 4 | 5;
-const spacingTypeToClassNameMap: Record<SpacingType, string> = {
-    none: styles.noSpacing,
-    condensed: styles.condensedSpacing,
-    compact: styles.compactSpacing,
-    cozy: styles.cozySpacing,
-    default: styles.defaultSpacing,
-    comfortable: styles.comfortableSpacing,
-    relaxed: styles.relaxedSpacing,
-    loose: styles.looseSpacing,
-};
 
 export interface Props<
     DATUM,
@@ -93,6 +84,8 @@ function Grid<DATUM, KEY extends ListKey, RENDERER_PROPS>(
         [pending, filtered, errored, errorMessage, pendingMessage, filteredMessage, emptyMessage],
     );
 
+    const gapSpacing = useSpacingTokens({ spacing });
+
     return (
         <div
             className={_cs(
@@ -101,7 +94,7 @@ function Grid<DATUM, KEY extends ListKey, RENDERER_PROPS>(
                 numPreferredColumns === 3 && styles.threeColumns,
                 numPreferredColumns === 4 && styles.fourColumns,
                 numPreferredColumns === 5 && styles.fiveColumns,
-                spacingTypeToClassNameMap[spacing],
+                gapSpacing,
                 pending && styles.pending,
                 compact && styles.compact,
                 className,

src/components/Grid/styles.module.css

@@ -1,10 +1,8 @@
 .grid {
-    --spacing: var(--go-ui-spacing-md);
     --num-columns: 2;
     --max-width: calc(var(--go-ui-page-width-max) * 0.8);
 
     display: grid;
-    grid-gap: var(--spacing);
     grid-template-columns: repeat(auto-fill, minmax(calc(var(--max-width) / var(--num-columns)), 1fr));
     position: relative;
     min-height: var(--go-ui-content-min-height);
@@ -55,36 +53,4 @@
     &.five-columns {
         --num-columns: 5;
     }
-
-    &.no-spacing {
-        --spacing: 0;
-    }
-
-    &.condensed-spacing {
-        --spacing: var(--go-ui-spacing-2xs);
-    }
-
-    &.compact-spacing {
-        --spacing: var(--go-ui-spacing-xs);
-    }
-
-    &.cozy-spacing {
-        --spacing: var(--go-ui-spacing-sm);
-    }
-
-    &.default-spacing {
-        --spacing: var(--go-ui-spacing-md);
-    }
-
-    &.comfortable-spacing {
-        --spacing: var(--go-ui-spacing-lg);
-    }
-
-    &.relaxed-spacing {
-        --spacing: var(--go-ui-spacing-xl);
-    }
-
-    &.loose-spacing {
-        --spacing: var(--go-ui-spacing-2xl);
-    }
 }

src/components/Header/index.tsx

@@ -106,6 +106,7 @@ function Header(props: Props) {
         iconsContainerClassName,
         withoutWrap: !wrapHeadingContent,
         spacing,
+        variant: 'sm',
     });
 
     const gapSpacing = useSpacingTokens({

src/components/Link/index.tsx

@@ -106,6 +106,7 @@ export type Props<OMISSION extends string = never> = Omit<RouterLinkProps, 'to'
     withLinkIcon?: boolean;
     withUnderline?: boolean;
     ellipsize?: boolean;
+    spacing?: ButtonFeatureProps['spacing'];
 }, OMISSION> & ({
     external?: never;
     to: keyof WrappedRoutes | undefined | null;
@@ -136,6 +137,7 @@ function Link(props: Props) {
         withLinkIcon,
         variant = 'tertiary',
         ellipsize,
+        spacing,
 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         external,
@@ -178,6 +180,7 @@ function Link(props: Props) {
         variant,
         ellipsize,
         disabled,
+        spacing,
         actions: (isDefined(actions) || withLinkIcon) ? (
             <>
                 {actions}

src/components/Page/index.tsx

@@ -100,7 +100,9 @@ function Page(props: Props) {
                         )}
                     </div>
                 )}
-            {beforeHeaderContent}
+            <PageContainer>
+                {beforeHeaderContent}
+            </PageContainer>
             {isNotDefined(blockingContent) && showPageContainer && (
                 <PageHeader
                     className={_cs(

src/components/domain/HighlightedOperations/OperationCard/index.tsx

@@ -178,7 +178,6 @@ function OperationCard(props: Props) {
                     <Link
                         to="emergenciesLayout"
                         urlParams={{ emergencyId: id }}
-                        ellipsize
                     >
                         {strings.operationCardTargetedPopulation}
                     </Link>
@@ -194,7 +193,6 @@ function OperationCard(props: Props) {
                     <Link
                         to="emergencyReportsAndDocuments"
                         urlParams={{ emergencyId: id }}
-                        ellipsize
                     >
                         {strings.operationCardFunding}
                     </Link>

src/components/domain/OperationListItem/index.tsx

@@ -52,7 +52,6 @@ function OperationInfoCard(props: Props) {
                 // FIXME: Let's add a link
                 heading={name}
                 headingLevel={5}
-                ellipsizeHeading
                 spacing="none"
                 actions={(
                     <Button

src/hooks/useBasicLayout/index.tsx

@@ -41,6 +41,7 @@ function useBasicLayout(props: Props) {
         variant,
         mode: 'gap',
     });
+
     const innerGapSpacing = useSpacingTokens({
         spacing,
         variant,