Remove gap and use spacing with padding for Flex spacing

Altinn · Dec 12, 2024 · be478ab · be478ab
1 parent e44e282
commit be478ab
Show file tree

Hide file tree

Showing 23 changed files with 193 additions and 80 deletions.
diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx
@@ -2,21 +2,20 @@ import React from 'react';
 import type { JSX, PropsWithChildren, ReactElement } from 'react';
 
 import { Label as DesignsystemetLabel } from '@digdir/designsystemet-react';
-import { Grid, type GridProps } from '@material-ui/core';
 import cn from 'classnames';
 import type { LabelProps as DesignsystemetLabelProps } from '@digdir/designsystemet-react';
 
 import classes from 'src/app-components/Label/Label.module.css';
-
-type GridSize = Pick<GridProps, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+import { Flex } from 'src/components/Flex';
+import type { IGridStyling } from 'src/layout/common.generated';
 
 type LabelProps = {
   label: string | undefined;
   optionalIndicator?: ReactElement;
   help?: ReactElement;
   description?: ReactElement;
   className?: string;
-  grid?: GridSize;
+  grid?: IGridStyling;
   required?: boolean;
   requiredIndicator?: JSX.Element;
 } & Pick<DesignsystemetLabelProps, 'htmlFor' | 'style'>;
@@ -39,13 +38,14 @@ export function Label({
   }
 
   return (
-    <Grid
+    <Flex
+      id={htmlFor}
       container
       spacing={2}
     >
-      <Grid
+      <Flex
         item
-        {...(grid ?? { xs: 12 })}
+        size={grid ?? { xs: 12 }}
       >
         <span className={classes.labelAndDescWrapper}>
           <DesignsystemetLabel
@@ -64,8 +64,8 @@ export function Label({
           </DesignsystemetLabel>
           {description && <div className={classes.description}>{description}</div>}
         </span>
-      </Grid>
+      </Flex>
       {children}
-    </Grid>
+    </Flex>
   );
 }
diff --git a/src/components/Flex.module.css b/src/components/Flex.module.css
@@ -1,5 +1,85 @@
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+}
+
 .item {
   flex: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.spacing-1 {
+  width: calc(100% + 0.25rem);
+  margin: -0.125rem;
+}
+.spacing-2 {
+  width: calc(100% + 0.5rem);
+  margin: -0.25rem;
+}
+.spacing-3 {
+  width: calc(100% + 0.75rem);
+  margin: -0.375rem;
+}
+.spacing-4 {
+  width: calc(100% + 1rem);
+  margin: -0.5rem;
+}
+.spacing-5 {
+  width: calc(100% + 1.25rem);
+  margin: -0.625rem;
+}
+.spacing-6 {
+  width: calc(100% + 1.5rem);
+  margin: -0.75rem;
+}
+.spacing-7 {
+  width: calc(100% + 1.75rem);
+  margin: -0.875rem;
+}
+.spacing-8 {
+  width: calc(100% + 2rem);
+  margin: -1rem;
+}
+.spacing-9 {
+  width: calc(100% + 2.25rem);
+  margin: -1.125rem;
+}
+.spacing-10 {
+  width: calc(100% + 2.5rem);
+  margin: -1.25rem;
+}
+.spacing-1 > .item {
+  padding: 0.125rem;
+}
+.spacing-2 > .item {
+  padding: 0.25rem;
+}
+.spacing-3 > .item {
+  padding: 0.375rem;
+}
+.spacing-4 > .item {
+  padding: 0.5rem;
+}
+.spacing-5 > .item {
+  padding: 0.625rem;
+}
+.spacing-6 > .item {
+  padding: 0.75rem;
+}
+.spacing-7 > .item {
+  padding: 0.875rem;
+}
+.spacing-8 > .item {
+  padding: 1rem;
+}
+.spacing-9 > .item {
+  padding: 1.125rem;
+}
+.spacing-10 > .item {
+  padding: 1.25rem;
 }
 
 /* Extra small (xs breakpoint) */
@@ -79,6 +159,7 @@
   .col-sm-6 {
     flex: 0 0 50%;
     width: 50%;
+    margin: -1.5rem;
   }
   .col-sm-7 {
     flex: 0 0 58.33%;

diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx
@@ -6,14 +6,12 @@ import cn from 'classnames';
 import classes from 'src/components/Flex.module.css';
 import type { IGridStyling } from 'src/layout/common.generated';
 
-type Spacing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 22 | 26 | 30;
+type Spacing = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 type Props = PropsWithChildren<{
   className?: string;
   size?: IGridStyling;
-  gap?: Spacing;
-  rowGap?: Spacing;
-  columnGap?: Spacing;
+  spacing?: Spacing;
   direction?: CSSProperties['flexDirection'];
   justifyContent?: CSSProperties['justifyContent'];
   alignItems?: CSSProperties['alignItems'];
@@ -29,9 +27,7 @@ export const Flex = forwardRef<HTMLDivElement, Props>(
       id,
       children,
       className,
-      gap,
-      rowGap,
-      columnGap,
+      spacing,
       direction = 'row',
       justifyContent = 'start',
       alignItems = 'start',
@@ -48,29 +44,41 @@ export const Flex = forwardRef<HTMLDivElement, Props>(
     const smClass = size?.sm ? classes[`col-sm-${size.sm}`] : '';
     const mdClass = size?.md ? classes[`col-md-${size.md}`] : '';
     const lgClass = size?.lg ? classes[`col-lg-${size.lg}`] : '';
+    const spacingClass = container && spacing ? classes[`spacing-${spacing}`] : '';
 
-    function spaceToRem(space?: Spacing) {
-      return space ? `${space * 0.25}rem` : undefined;
-    }
-
-    return (
-      <div
-        id={id}
-        ref={ref}
-        {...rest}
-        style={{
-          display: container ? 'flex' : 'block',
+    const styles: CSSProperties | undefined = container
+      ? {
+          display: 'flex',
           boxSizing: 'border-box',
           flexDirection: direction,
-          gap: spaceToRem(gap),
-          rowGap: spaceToRem(rowGap),
-          columnGap: spaceToRem(columnGap),
+          //border: 'solid 1px red',
           flexWrap,
           justifyContent,
           alignItems,
           ...style,
-        }}
-        className={cn(xsClass, smClass, mdClass, lgClass, className, { [classes.item]: item })}
+        }
+      : {
+          display: 'block',
+          boxSizing: 'border-box',
+          ...style,
+        };
+
+    return (
+      <div
+        id={id}
+        ref={ref}
+        className={cn(
+          xsClass,
+          smClass,
+          mdClass,
+          lgClass,
+          spacingClass,
+          className,
+          { [classes.item]: item },
+          { [classes.container]: container },
+        )}
+        style={styles}
+        {...rest}
       >
         {children}
       </div>

diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx
@@ -10,7 +10,6 @@ import { Loader } from 'src/core/loading/Loader';
 import { useAppName, useAppOwner } from 'src/core/texts/appTexts';
 import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { useExpandedWidthLayouts } from 'src/features/form/layout/LayoutsContext';
-import type { NavigateToNodeOptions } from 'src/features/form/layout/NavigateToNode';
 import { useNavigateToNode, useRegisterNodeNavigationHandler } from 'src/features/form/layout/NavigateToNode';
 import { useUiConfigContext } from 'src/features/form/layout/UiConfigContext';
 import { usePageSettings } from 'src/features/form/layoutSettings/LayoutSettingsContext';
@@ -24,16 +23,17 @@ import {
   useQueryKeysAsString,
   useQueryKeysAsStringAsRef,
 } from 'src/features/routing/AppRoutingContext';
-import type { AnyValidation, BaseValidation, NodeRefValidation } from 'src/features/validation';
 import { useOnFormSubmitValidation } from 'src/features/validation/callbacks/onFormSubmitValidation';
 import { useTaskErrors } from 'src/features/validation/selectors/taskErrors';
 import { useCurrentView, useNavigatePage, useStartUrl } from 'src/hooks/useNavigatePage';
 import { GenericComponentById } from 'src/layout/GenericComponent';
 import { extractBottomButtons } from 'src/utils/formLayout';
 import { getPageTitle } from 'src/utils/getPageTitle';
 import { NodesInternal, useGetPage, useNode } from 'src/utils/layout/NodesContext';
-import type { NodeData } from 'src/utils/layout/types';
 import { useNodeTraversalSelector } from 'src/utils/layout/useNodeTraversal';
+import type { NavigateToNodeOptions } from 'src/features/form/layout/NavigateToNode';
+import type { AnyValidation, BaseValidation, NodeRefValidation } from 'src/features/validation';
+import type { NodeData } from 'src/utils/layout/types';
 
 interface FormState {
   hasRequired: boolean;
@@ -125,7 +125,7 @@ export function FormPage({ currentPageId }: { currentPageId: string | undefined
 
       <Flex
         container
-        rowGap={6}
+        spacing={6}
       >
         {mainIds.map((id) => (
           <GenericComponentById

diff --git a/src/components/message/ErrorReport.tsx b/src/components/message/ErrorReport.tsx
@@ -40,7 +40,7 @@ export const ErrorReport = ({ renderIds, formErrors, taskErrors }: IErrorReportP
         >
           <Flex
             container
-            gap={6}
+            spacing={6}
             alignItems='flex-start'
           >
             <ul className={classes.errorList}>

diff --git a/src/components/presentation/Header.tsx b/src/components/presentation/Header.tsx
@@ -20,19 +20,22 @@ const InnerHeader = ({ header, aboveHeader, children }: IInnerHeaderProps) => (
   <header className={classes.wrapper}>
     <Flex
       container
-      gap={4}
+      spacing={4}
+      direction='column'
       justifyContent='space-between'
       alignItems='space-between'
     >
-      {aboveHeader && <span>{aboveHeader}</span>}
-      <Heading
-        level={1}
-        size='medium'
-        data-testid='presentation-heading'
-      >
-        {header}
-      </Heading>
-      {children}
+      <Flex item>
+        {aboveHeader && <span>{aboveHeader}</span>}
+        <Heading
+          level={1}
+          size='medium'
+          data-testid='presentation-heading'
+        >
+          {header}
+        </Heading>
+        {children}
+      </Flex>
     </Flex>
   </header>
 );

diff --git a/src/features/instantiate/containers/PartySelection.tsx b/src/features/instantiate/containers/PartySelection.tsx
@@ -137,12 +137,10 @@ export const PartySelection = () => {
               variant='secondary'
               onClick={() => setNumberOfPartiesShown(numberOfPartiesShown + 4)}
             >
-              {
-                <PlusIcon
-                  fontSize='1rem'
-                  aria-hidden
-                />
-              }
+              <PlusIcon
+                fontSize='1rem'
+                aria-hidden
+              />
               {langAsString('party_selection.load_more')}
             </Button>
           </div>
@@ -268,7 +266,7 @@ export const PartySelection = () => {
             <Flex
               container
               className={classes.partySelectionCheckbox}
-              columnGap={4}
+              spacing={4}
             >
               <LegacyCheckbox
                 checked={showDeleted}

diff --git a/src/features/pdf/PdfView2.tsx b/src/features/pdf/PdfView2.tsx
@@ -196,7 +196,7 @@ function PlainPage({ pageKey }: { pageKey: string }) {
     <div className={classes.page}>
       <Flex
         container
-        gap={6}
+        spacing={6}
       >
         {children.map((node) => (
           <GenericComponent
@@ -230,7 +230,7 @@ function PdfForPage({ pageKey, pdfSettings }: { pageKey: string; pdfSettings: IP
     <div className={classes.page}>
       <Flex
         container
-        gap={6}
+        spacing={6}
       >
         {children.map((node) => (
           <PdfForNode

diff --git a/src/layout/Accordion/Accordion.tsx b/src/layout/Accordion/Accordion.tsx
@@ -31,7 +31,7 @@ export const Accordion = ({ node }: IAccordionProps) => {
     >
       <Flex
         container
-        gap={6}
+        spacing={6}
       >
         {childComponents.map((id) => (
           <GenericComponentById