Deprecate spacing in favor of gap

dnbexperience · May 15, 2024 · 0246fe8 · 0246fe8
1 parent a842e8c
commit 0246fe8
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 44 deletions.
diff --git a/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx b/...design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx
@@ -92,4 +92,8 @@ The `InputPassword` component has been moved to `Field.Password`, and is now a p
 - remove `light` and `medium` as its not supported anymore.
 - replace `fullscreen` with `breakout`.
 
+## Flex
+
+- replace `spacing` with `gap` on all Flex components.
+
 _February, 6. 2024_
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx b/...es/dnb-design-system-portal/src/docs/uilib/components/fragments/text-counter/Examples.tsx
@@ -49,7 +49,7 @@ export function CountCharactersInteractive() {
           })
           return (
             <Flex.Stack divider="line">
-              <Flex.Vertical spacing="x-small">
+              <Flex.Vertical gap="x-small">
                 <Field.String
                   label="Text"
                   path="/text"

diff --git a/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx b/...nb-design-system-portal/src/docs/uilib/extensions/forms/DataContext/Provider/Examples.tsx
@@ -103,7 +103,7 @@ export const Default = () => {
       >
         <Flex.Stack>
           <Card stack>
-            <Flex.Vertical divider="line" spacing="small">
+            <Flex.Vertical divider="line" gap="small">
               <Field.String
                 path="/requiredString"
                 label="Required string"
@@ -193,7 +193,7 @@ export const ValidationWithJsonSchema = () => {
       >
         <Flex.Stack>
           <Card stack>
-            <Flex.Vertical divider="line" spacing="small">
+            <Flex.Vertical divider="line" gap="small">
               <Field.String
                 path="/requiredString"
                 label="Required string"

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx
@@ -296,7 +296,7 @@ export const FilterData = () => {
               onSubmit={(data) => console.log('onSubmit', data)}
               filterSubmitData={filterDataHandler}
             >
-              <Flex.Stack spacing="medium">
+              <Flex.Stack>
                 <Field.Boolean label="Disabled" path="/disabled" />
                 <Field.String
                   label="My Field"

diff --git a/...-design-system-portal/src/docs/uilib/extensions/forms/Form/schema-validation/Examples.tsx b/...-design-system-portal/src/docs/uilib/extensions/forms/Form/schema-validation/Examples.tsx
@@ -26,7 +26,7 @@ export const DataSetSchema = () => {
           required: ['name', 'address'],
         }}
       >
-        <Card spacing="small" bottom="small">
+        <Card gap="small" bottom="small">
           <Form.MainHeading>Company information</Form.MainHeading>
 
           <Field.String path="/name" label="Name" />
@@ -62,7 +62,7 @@ export const IfRuleSchema = () => {
           else: { required: ['name'] },
         }}
       >
-        <Card spacing="small" bottom="small">
+        <Card gap="small" bottom="small">
           <Form.MainHeading>Customer information</Form.MainHeading>
 
           <Field.String path="/name" label="Name" />
@@ -147,16 +147,16 @@ export const DependantListSchema = () => {
           ],
         }}
       >
-        <Flex.Vertical spacing="small">
+        <Flex.Vertical gap="small">
           <Form.MainHeading>Customer information</Form.MainHeading>
-          <Card spacing="small">
+          <Card gap="small">
             <Field.String path="/name" label="Name" />
             <Field.Email path="/email" label="E-mail" />
             <Field.PhoneNumber path="/phone" label="Phone number" />
           </Card>
 
           <Form.MainHeading>Accounts</Form.MainHeading>
-          <Card spacing="small">
+          <Card gap="small">
             <Form.SubHeading>Standard accounts</Form.SubHeading>
 
             <Iterate.Array path="/accounts">

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/Count/Examples.tsx
@@ -25,7 +25,7 @@ export const Interactive = () => {
               </output>
 
               <Iterate.Array path="/myList">
-                <Iterate.AnimatedContainer spacing={false}>
+                <Iterate.AnimatedContainer gap={false}>
                   <Flex.Horizontal align="center">
                     <strong>
                       <Value.Number itemPath="/" />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/layout/flex/container/Examples.tsx
@@ -214,7 +214,7 @@ export const FramedLineDividers = () => {
     >
       {() => {
         const Item = () => (
-          <Flex.Stack divider="line-framed" spacing="x-small">
+          <Flex.Stack divider="line-framed" gap="x-small">
             <TestElement>FlexItem</TestElement>
             <TestElement>FlexItem</TestElement>
           </Flex.Stack>

diff --git a/packages/dnb-eufemia/src/components/card/Card.tsx b/packages/dnb-eufemia/src/components/card/Card.tsx
@@ -37,6 +37,7 @@ function Card(props: Props) {
     className,
     stack,
     direction,
+    gap,
     spacing,
     innerSpace,
     alignSelf = 'stretch',
@@ -94,7 +95,7 @@ function Card(props: Props) {
         divider={divider}
         alignSelf={alignSelf}
         wrap={!stack}
-        spacing={stack ? 'medium' : spacing || false}
+        gap={stack ? 'medium' : (gap ?? spacing) || false}
         rowGap={rowGap || false}
       >
         {title && (

diff --git a/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx b/packages/dnb-eufemia/src/components/card/__tests__/Card.test.tsx
@@ -197,7 +197,7 @@ describe('Card', () => {
 
   it('should add spacing between elements', () => {
     const { rerender } = render(
-      <Card spacing="small">
+      <Card gap="small">
         <P>Paragraph</P>
         <P>Paragraph</P>
         <P>Paragraph</P>
@@ -222,7 +222,7 @@ describe('Card', () => {
     expect(children[2]).toHaveClass('dnb-space__bottom--zero')
 
     rerender(
-      <Card spacing="large">
+      <Card gap="large">
         <P>Paragraph</P>
         <P>Paragraph</P>
         <P>Paragraph</P>

diff --git a/packages/dnb-eufemia/src/components/flex/Container.tsx b/packages/dnb-eufemia/src/components/flex/Container.tsx
@@ -17,6 +17,16 @@ import type { UseMediaQueries } from '../../shared/useMedia'
 import type { End, Start } from './types'
 import Item from './Item'
 
+type Gap =
+  | false
+  | 'xx-small'
+  | 'x-small'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'x-large'
+  | 'xx-large'
+
 export type BasicProps = {
   direction?: 'horizontal' | 'vertical'
   wrap?: boolean
@@ -35,15 +45,9 @@ export type BasicProps = {
   /** When "line-framed" is used, a line will be shown between items and above the first and below the last item */
   divider?: 'space' | 'line' | 'line-framed'
   /** Spacing between items inside */
-  spacing?:
-    | false
-    | 'xx-small'
-    | 'x-small'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'x-large'
-    | 'xx-large'
+  gap?: Gap
+  /** @deprecated Use `gap` instead */
+  spacing?: Gap
   breakpoints?: MediaQueryBreakpoints
   queries?: UseMediaQueries
 }
@@ -62,6 +66,7 @@ const propNames: Array<keyof Props> = [
   'align',
   'divider',
   'spacing',
+  'gap',
 ]
 
 export function pickFlexContainerProps<T extends Props>(
@@ -95,6 +100,7 @@ function FlexContainer(props: Props) {
     align = 'flex-start',
     alignSelf,
     divider = 'space',
+    gap = 'small',
     spacing = 'small',
     breakpoints,
     queries,
@@ -181,8 +187,11 @@ function FlexContainer(props: Props) {
       !isHeading &&
       ((divider === 'line' && !isFirst) || divider === 'line-framed')
     ) {
-      const spaceAboveLine = getSpaceValue(end, previousChild) ?? spacing
-      startSpacing = (getSpaceValue(start, child) ?? spacing) as SpaceType
+      const spaceAboveLine =
+        getSpaceValue(end, previousChild) ?? gap ?? spacing
+      startSpacing = (getSpaceValue(start, child) ??
+        gap ??
+        spacing) as SpaceType
 
       return (
         <React.Fragment key={`element-${i}`}>
@@ -211,8 +220,9 @@ function FlexContainer(props: Props) {
       if (hasSizeProp) {
         // When we have a size prop, we don't expect the layout to wrap,
         // so we add space to the start of each item to mimic CSS gap.
-        startSpacing = isRowStart || isFirst ? 0 : sumTypes(spacing) / 2
-        endSpacing = isRowEnd || isLast ? 0 : sumTypes(spacing) / 2
+        startSpacing =
+          isRowStart || isFirst ? 0 : sumTypes(gap ?? spacing) / 2
+        endSpacing = isRowEnd || isLast ? 0 : sumTypes(gap ?? spacing) / 2
       } else {
         // Since we expect the layout to wrap, we add space only to the end of each item,
         // except for the last item. This will make the items align as long as not wrapped.
@@ -221,6 +231,7 @@ function FlexContainer(props: Props) {
           ? 0
           : getSpaceValue(start, child) ??
             getSpaceValue(end, previousChild) ??
+            gap ??
             spacing
       }
     } else {
@@ -232,6 +243,7 @@ function FlexContainer(props: Props) {
         startSpacing =
           getSpaceValue(start, child) ??
           getSpaceValue(end, previousChild) ??
+          gap ??
           spacing
       }
     }
@@ -277,22 +289,22 @@ function FlexContainer(props: Props) {
       return `${n}--row-gap-small`
     }
 
-    if (hasSizeProp && spacing) {
-      return `${n}--row-gap-${spacing}`
+    if (hasSizeProp && (gap ?? spacing)) {
+      return `${n}--row-gap-${gap ?? spacing}`
     }
 
     if (rowGap) {
       return `${n}--row-gap-${rowGap}`
     }
-  }, [direction, hasSizeProp, rowGap, spacing, wrap])
+  }, [direction, hasSizeProp, rowGap, gap, spacing, wrap])
 
   const cn = classnames(
     'dnb-flex-container',
     direction && `${n}--direction-${direction}`,
     justify && `${n}--justify-${justify}`,
     align && `${n}--align-${align}`,
     alignSelf && `${n}--align-self-${alignSelf}`,
-    spacing && `${n}--spacing-${spacing}`,
+    (gap ?? spacing) && `${n}--spacing-${gap ?? spacing}`,
     wrap && `${n}--wrap`,
     getRowGapClass(),
     hasSizeProp && `${n}--has-size`,

diff --git a/packages/dnb-eufemia/src/components/flex/Stack.tsx b/packages/dnb-eufemia/src/components/flex/Stack.tsx
@@ -11,7 +11,7 @@ function Stack(props: Props) {
     direction = 'vertical',
     alignSelf = 'stretch',
     align = 'stretch',
-    spacing = props.divider !== 'line' && props.divider !== 'line-framed'
+    gap = props.divider !== 'line' && props.divider !== 'line-framed'
       ? 'medium'
       : 'small',
     children,
@@ -25,7 +25,7 @@ function Stack(props: Props) {
       direction={direction}
       alignSelf={alignSelf}
       align={align}
-      spacing={spacing}
+      gap={gap}
       {...rest}
     >
       {children}

diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
@@ -364,7 +364,7 @@ describe('Flex.Container', () => {
     expect(children[2]).toHaveClass('dnb-space__right--zero')
 
     rerender(
-      <Flex.Container spacing="large">
+      <Flex.Container gap="large">
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>
@@ -381,7 +381,7 @@ describe('Flex.Container', () => {
     expect(children[2]).toHaveClass('dnb-space__right--zero')
 
     rerender(
-      <Flex.Container spacing="xx-small">
+      <Flex.Container gap="xx-small">
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>
@@ -400,7 +400,7 @@ describe('Flex.Container', () => {
 
   it('should not apply spacing if set to false', () => {
     render(
-      <Flex.Container spacing={false}>
+      <Flex.Container gap={false}>
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>
         <Flex.Item>Flex</Flex.Item>

diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Item.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Item.test.tsx
@@ -395,7 +395,7 @@ describe('Flex.Item', () => {
 
     it('should use given "spacing" size from FlexContainer', () => {
       const { rerender } = render(
-        <Flex.Container spacing="large">
+        <Flex.Container gap="large">
           <Flex.Item size={2}>FlexItem</Flex.Item>
           <Flex.Item size={2}>FlexItem</Flex.Item>
         </Flex.Container>

diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Stack.test.tsx
@@ -50,7 +50,7 @@ describe('Flex.Stack', () => {
   })
 
   it('should support "spacing" property', () => {
-    render(<Flex.Stack spacing="large">content</Flex.Stack>)
+    render(<Flex.Stack gap="large">content</Flex.Stack>)
 
     const element = document.querySelector('.dnb-flex-stack')
 
@@ -63,7 +63,7 @@ describe('Flex.Stack', () => {
   })
 
   it('should omit spacing when "spacing" is false', () => {
-    render(<Flex.Stack spacing={false}>content</Flex.Stack>)
+    render(<Flex.Stack gap={false}>content</Flex.Stack>)
 
     const element = document.querySelector('.dnb-flex-stack')
 

diff --git a/packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx b/packages/dnb-eufemia/src/components/flex/stories/Flex.stories.tsx
@@ -63,7 +63,7 @@ export function FlexWithChildren() {
 }
 
 const Item = () => (
-  <Flex.Stack divider="line-framed" spacing="x-small">
+  <Flex.Stack divider="line-framed" gap="x-small">
     <TestElement>FlexItem</TestElement>
     <TestElement>FlexItem</TestElement>
   </Flex.Stack>

diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/stories/Provider.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/stories/Provider.stories.tsx
@@ -112,7 +112,7 @@ export const FilterData = () => {
       onSubmit={(data) => console.log('onSubmit', data)}
       filterSubmitData={filterDataHandler}
     >
-      <Flex.Stack spacing="medium">
+      <Flex.Stack>
         <Field.Boolean label="Disabled" path="/disabled" />
         <Field.Boolean label="Validate" path="/validate" />
         <Field.String

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/EditContainer/EditToolbarTools.tsx
@@ -42,7 +42,7 @@ export default function EditToolbarTools() {
   }, [switchContainerMode])
 
   return (
-    <Flex.Horizontal spacing="large">
+    <Flex.Horizontal gap="large">
       <Button
         variant="tertiary"
         icon={check}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Toolbar/Toolbar.tsx
@@ -17,7 +17,7 @@ export default function Toolbar(props: Props) {
     >
       <Hr space={0} />
 
-      <Flex.Horizontal top="x-small" spacing="large">
+      <Flex.Horizontal top="x-small" gap="large">
         {children}
       </Flex.Horizontal>
     </Space>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewToolbarTools.tsx
@@ -16,7 +16,7 @@ export default function ViewToolbarTools() {
   }, [switchContainerMode])
 
   return (
-    <Flex.Horizontal spacing="large">
+    <Flex.Horizontal gap="large">
       <Button
         variant="tertiary"
         icon={edit}