break(Section)!: remove spacing property (#6594)

Author: langz

packages/dnb-design-system-portal/src/docs/contribute.mdx

@@ -42,7 +42,8 @@ Colors, fonts and logo guidelines are set in the DNB Brandbook and the digital v
 
 <div
   align="center"
-  className="dnb-section dnb-section--spacing dnb-section--mint-green"
+  className="dnb-section dnb-section--info"
+  style={{ padding: 'var(--spacing-large) 0' }}
 >
   <div style={{ display: 'flex', flexWrap: 'wrap', marginBottom: '1rem' }}>
     <Card

packages/dnb-design-system-portal/src/docs/contribute/first-contribution.mdx

@@ -12,7 +12,7 @@ import { Button, Blockquote, Section } from '@dnb/eufemia/src'
 
 If you are new to the Eufemia Library, we would recommend following an intro to the elementary parts of Eufemia.
 
-<Section backgroundColor="mint-green" spacing>
+<Section backgroundColor="mint-green" innerSpace={{ block: 'large' }}>
   <Button
     href="/uilib/intro"
     size="large"
@@ -49,7 +49,7 @@ More information in [Style guides - Git convention](/contribute/style-guides/git
 
 Have a look at the "before getting started" section for a description of technical details. In this section, you will find what packages are included, design decisions explained, the format of the component structure, what purpose different files have, what happens during a build, and the different development environments.
 
-<Section backgroundColor="mint-green" spacing>
+<Section backgroundColor="mint-green" innerSpace={{ block: 'large' }}>
   <Button
     href="/contribute/first-contribution/before-started"
     size="large"

packages/dnb-design-system-portal/src/docs/contribute/rules.mdx

@@ -69,7 +69,7 @@ After filing a report, a representative will contact you personally. If the pers
 
 Anyone asked to stop unacceptable behavior is expected to comply immediately. If an individual engages in unacceptable behavior, the representative may take any action they deem appropriate, up to and including a permanent ban from our community without warning.
 
-<Section backgroundColor="mint-green" spacing>
+<Section backgroundColor="mint-green" innerSpace={{ block: 'large' }}>
   <Button
     href="/issue"
     size="large"

packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v11-info.mdx

@@ -26,6 +26,8 @@ v11 of @dnb/eufemia contains _breaking changes_. As a migration process, you can
 10. Replace the `as` prop with `element` on the `H` heading element.
 11. Replace `prerender` with `keepInDOM` on Tabs and Accordion components.
 12. Replace `styleType` (or `style_type`) with `backgroundColor` on Breadcrumb, Dialog.Body, and Drawer.Body components.
+13. Remove `spacing` on Section. Use `innerSpace={{ block: 'large' }}` instead (see [Section](#section)).
+14. Replace `contentSpacing` with `contentInnerSpace` and `tabsSpacing` with `tabsInnerSpace` on the Tabs component.
 
 ### innerRef → ref
 
@@ -123,9 +125,28 @@ $ pnpm add @dnb/eufemia@11
    - `pistachio`
    - `fire-red`
    - `fire-red-8`
-2. Remove `spacing`. Use `innerSpace` instead.
+2. Remove `spacing`. Use `innerSpace` instead. The `spacing` prop only applied vertical (top/bottom) padding, so use the `block` shorthand to match the old behavior:
+
+- `spacing` -> `innerSpace={{ block: 'large' }}`
+- `spacing="x-small"` -> `innerSpace={{ block: 'x-small' }}`
+- `spacing="small"` -> `innerSpace={{ block: 'small' }}`
+- `spacing="medium"` -> `innerSpace={{ block: 'medium' }}`
+- `spacing="large"` -> `innerSpace={{ block: 'large' }}`
+- `spacing="x-large"` -> `innerSpace={{ block: 'x-large' }}`
+- `spacing="xx-large"` -> `innerSpace={{ block: 'xx-large' }}`
+
+You can also use `top` and `bottom` individually if you need different values, e.g. `innerSpace={{ top: 'small', bottom: 'large' }}`. Note that `innerSpace="large"` (a plain string) applies padding on **all four sides**, not just top/bottom.
+
 3. Replace `inner_ref` with `ref`.
 
+#### Types
+
+- The exported `SectionSpacing` type has been removed. If you imported it (e.g. for Breadcrumb or custom components), use the `InnerSpaceType` from `@dnb/eufemia/components/space/types` instead.
+
+#### Styling
+
+- Remove CSS classes `dnb-section--spacing`, `dnb-section--spacing-small`, etc, as they are not supported anymore.
+
 ### [HelpButton](/uilib/components/help-button/)
 
 #### Translations
@@ -649,6 +670,7 @@ New props added:
 #### Properties
 
 - Replace `styleType` (or `style_type`) with `backgroundColor`.
+- The `spacing` prop type has changed from `SectionSpacing` to `SpaceTypeAll | SpaceTypeMedia`. All previously valid string values still work, but if you imported `SectionSpacing` to type your Breadcrumb spacing, update to use the new types.
 
 ### [BreadcrumbItem](/uilib/components/breadcrumb/)
 
@@ -899,6 +921,14 @@ render(<Logo svg={SbankenCompact} />)
 #### Properties
 
 - Replace `styleType` (or `style_type`) with `backgroundColor`.
+- Replace `spacing` with `innerSpace`. Use `block` to match the old vertical-only padding:
+  - `spacing` -> `innerSpace={{ block: 'large' }}`
+  - `spacing="x-small"` -> `innerSpace={{ block: 'x-small' }}`
+  - `spacing="small"` -> `innerSpace={{ block: 'small' }}`
+  - `spacing="medium"` -> `innerSpace={{ block: 'medium' }}`
+  - `spacing="large"` -> `innerSpace={{ block: 'large' }}`
+  - `spacing="x-large"` -> `innerSpace={{ block: 'x-large' }}`
+  - `spacing="xx-large"` -> `innerSpace={{ block: 'xx-large' }}`
 
 ### [Heading](/uilib/components/heading/)
 
@@ -979,10 +1009,10 @@ render(<Logo svg={SbankenCompact} />)
 
 - Replace `selected_key` with `selectedKey`.
 - Replace `content_style` with `contentStyle`.
-- Replace `content_spacing` with `contentSpacing`.
+- Replace `content_spacing` or `contentSpacing` with `contentInnerSpace`. The `contentSpacing` prop has been removed – use `contentInnerSpace` instead, which passes `innerSpace` to the content Section.
 - Replace `tab_element` with `tabElement`.
 - Replace `tabs_style` with `tabsStyle`.
-- Replace `tabs_spacing` with `tabsSpacing`.
+- Replace `tabs_spacing` or `tabsSpacing` with `tabsInnerSpace`. The `tabsSpacing` prop has been removed – use `tabsInnerSpace` instead.
 - Replace `nav_button_edge` with `navButtonEdge`.
 - Replace `preventRerender` with `preventRerender`.
 - Replace `on_change` with `onChange`.
@@ -993,6 +1023,10 @@ render(<Logo svg={SbankenCompact} />)
 - Replace `no_border` with `noBorder`.
 - Replace `prerender` with `keepInDOM`.
 
+#### Styling
+
+- The CSS classes `dnb-section--spacing-*` are no longer applied to the Tabs content wrapper or tab list. If you have custom CSS targeting these classes within Tabs, update to target the inline styles or use `contentInnerSpace`/`tabsInnerSpace` props instead.
+
 ### [Pagination](/uilib/components/pagination/)
 
 #### Properties

packages/dnb-design-system-portal/src/docs/uilib/components/anchor/Examples.tsx

@@ -50,7 +50,7 @@ export const AnchorBasicUse = () => (
 export const AnchorExampleInSection = () => (
   <Wrapper>
     <ComponentBox data-visual-test="anchor-in-section">
-      <Section spacing>
+      <Section innerSpace={{ block: 'large' }}>
         <Anchor
           className="dnb-anchor--no-underline"
           href="https://dnb.no/"

packages/dnb-design-system-portal/src/docs/uilib/components/drawer/Examples.tsx

@@ -240,7 +240,7 @@ export const DrawerCustomTriggerExample = () => (
         iconPosition: 'left',
       }}
     >
-      <Drawer.Body spacing>
+      <Drawer.Body innerSpace={{ block: 'large' }}>
         <P>Opened a Drawer with a custom trigger button!</P>
       </Drawer.Body>
     </Drawer>

packages/dnb-design-system-portal/src/docs/uilib/components/global-status/Examples.tsx

@@ -316,7 +316,7 @@ export const GlobalStatusUpdate = () => (
         React.useEffect(() => () => inst.current.remove(), [])
 
         return (
-          <Section top spacing variant="divider">
+          <Section top innerSpace={{ block: 'large' }} variant="divider">
             <ToggleButton
               text="Toggle"
               variant="checkbox"

packages/dnb-design-system-portal/src/docs/uilib/components/height-animation/Examples.tsx

@@ -49,7 +49,10 @@ export function HeightAnimationDefault() {
 
               <Section backgroundColor="lavender" top>
                 <HeightAnimation open={openState}>
-                  <Section spacing backgroundColor="lavender">
+                  <Section
+                    innerSpace={{ block: 'large' }}
+                    backgroundColor="lavender"
+                  >
                     <P space={0}>Your content</P>
                   </Section>
                   {contentState && <P space={0}>More content</P>}
@@ -145,7 +148,10 @@ export function HeightAnimationKeepInDOM() {
                   keepInDOM={true}
                   duration={1000}
                 >
-                  <Section spacing backgroundColor="lavender">
+                  <Section
+                    innerSpace={{ block: 'large' }}
+                    backgroundColor="lavender"
+                  >
                     <P space={0}>Your content</P>
                   </Section>
                   {contentState && <P space={0}>More content</P>}

packages/dnb-design-system-portal/src/docs/uilib/components/pagination/infinity-scroller/Examples.tsx

@@ -151,7 +151,7 @@ export const PaginationExampleInfinityTable = () => (
 
 export function PaginationTableExample() {
   return (
-    <Wrapper className="dnb-core-style" spacing>
+    <Wrapper className="dnb-core-style" innerSpace={{ block: 'large' }}>
       <Space left>
         <H1 size="small">Infinity Table</H1>
         <P bottom>

packages/dnb-design-system-portal/src/docs/uilib/components/skip-content/Examples.tsx

@@ -33,7 +33,12 @@ export const SkipContentTable = () => (
       <LargeTableWithInteractiveElements id="table-with-caption" />
     </section>
 
-    <Section id="submit-area" spacing="small" variant="divider" top>
+    <Section
+      id="submit-area"
+      innerSpace={{ block: 'small' }}
+      variant="divider"
+      top
+    >
       <SkipContent.Return selector="#submit-area" bottom>
         Back to beginning of table
       </SkipContent.Return>
@@ -64,7 +69,7 @@ const LargeTableWithInteractiveElements = (props) => {
         <Td align="right">Row {nr}</Td>
 
         <Td.AccordionContent>
-          <Section top spacing>
+          <Section top innerSpace={{ block: 'large' }}>
             <Dl>
               <Dt>Favorittfarge</Dt>
               <Dd>Grønn</Dd>