refactor: remove all spacing variables (#6009)

BREAKING CHANGE: All spacing variables have been removed. You can use common CSS classes as a substitute for most variables. For more information, please refer to our [Migration Guide](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/migration-guide--docs).
SAP · Jul 3, 2024 · c2c3730 · c2c3730
1 parent 19ed2ec
commit c2c3730
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 248 deletions.
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
@@ -52,6 +52,90 @@ To opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` cl
 
 More details can be found in our [Styling Knowledge Base](?path=/docs/knowledge-base-styling--docs#scrollbars).
 
+## Spacing
+
+The `spacing` variables of our base package (`@ui5/webcomponents-react-base`) have been removed.
+Most variables can be replaced by applying the corresponding CSS classes from the `@sap-ui/common-css` package to your element, for all others you can find the respective CSS properties and values below.
+
+**Full Documentation of Common CSS classes:**
+
+- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
+- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
+
+### Common CSS substitute classes
+
+<details>
+    <summary>Show</summary>
+
+| Removed Variable                    | Equivalent Common CSS Class   |
+| ----------------------------------- | ----------------------------- |
+| **All Around Margins**              |                               |
+| `sapUiTinyMargin`                   | `.sap-margin-tiny`            |
+| `sapUiSmallMargin`                  | `.sap-margin-small`           |
+| `sapUiMediumMargin`                 | `.sap-margin-medium`          |
+| `sapUiLargeMargin`                  | `.sap-margin-large`           |
+| **Single Side Margins**             |                               |
+| `sapUiTinyMarginTop`                | `.sap-margin-top-tiny`        |
+| `sapUiSmallMarginTop`               | `.sap-margin-top-small`       |
+| `sapUiMediumMarginTop`              | `.sap-margin-top-medium`      |
+| `sapUiLargeMarginTop`               | `.sap-margin-top-large`       |
+| `sapUiTinyMarginBottom`             | `.sap-margin-bottom-tiny`     |
+| `sapUiSmallMarginBottom`            | `.sap-margin-bottom-small`    |
+| `sapUiMediumMarginBottom`           | `.sap-margin-bottom-medium`   |
+| `sapUiLargeMarginBottom`            | `.sap-margin-bottom-large`    |
+| `sapUiTinyMarginBegin`              | `.sap-margin-begin-tiny`      |
+| `sapUiSmallMarginBegin`             | `.sap-margin-begin-small`     |
+| `sapUiMediumMarginBegin`            | `.sap-margin-begin-medium`    |
+| `sapUiLargeMarginBegin`             | `.sap-margin-begin-large`     |
+| `sapUiTinyMarginEnd`                | `.sap-margin-end-tiny`        |
+| `sapUiSmallMarginEnd`               | `.sap-margin-end-small`       |
+| `sapUiMediumMarginEnd`              | `.sap-margin-end-medium`      |
+| `sapUiLargeMarginEnd`               | `.sap-margin-end-large`       |
+| **Horizontal Margins**              |                               |
+| `sapUiTinyMarginBeginEnd`           | `.sap-margin-x-tiny`          |
+| `sapUiSmallMarginBeginEnd`          | `.sap-margin-x-small`         |
+| `sapUiMediumMarginBeginEnd`         | `.sap-margin-x-medium`        |
+| `sapUiLargeMarginBeginEnd`          | `.sap-margin-x-large`         |
+| **Vertical Margins**                |                               |
+| `sapUiTinyMarginTopBottom`          | `.sap-margin-y-tiny`          |
+| `sapUiSmallMarginBeginEnd`          | `.sap-margin-y-small`         |
+| `sapUiMediumMarginTopBottom`        | `.sap-margin-y-medium`        |
+| `sapUiLargeMarginTopBottom`         | `.sap-margin-y-large`         |
+| **Responsive Margins**              |                               |
+| `sapUiResponsiveMargin`             | `.sap-margin-responsive`      |
+| **Negative Margins**                |                               |
+| `sapUiTinyNegativeMarginBeginEnd`   | `.sap-margin-tiny-negative`   |
+| `sapUiSmallNegativeMarginBeginEnd`  | `.sap-margin-small-negative`  |
+| `sapUiMediumNegativeMarginBeginEnd` | `.sap-margin-medium-negative` |
+| `sapUiLargeNegativeMarginBeginEnd`  | `.sap-margin-large-negative`  |
+| **All Around Padding**              |                               |
+| `sapUiContentPadding`               | `.sap-padding`                |
+| **Responsive Paddings**             |                               |
+| `sapUiResponsiveContentPadding`     | `.sap-padding-responsive`     |
+| **Horizontal Paddings**             |                               |
+| `sapUiTinyPaddingBeginEnd`          | `.sap-padding-x-tiny`         |
+| `sapUiSmallPaddingBeginEnd`         | `.sap-padding-x-small`        |
+| `sapUiMediumPaddingBeginEnd`        | `.sap-padding-x-medium`       |
+| `sapUiLargePaddingBeginEnd`         | `.sap-padding-x-large`        |
+| **No Padding**                      |                               |
+| `sapUiNoContentPadding`             | `.sap-padding-none`           |
+
+</details>
+
+### Removed variables without substitute
+
+<details>
+    <summary>Show</summary>
+
+| Removed Variable      | Property and Value             |
+| --------------------- | ------------------------------ |
+| `sapUiNoMargin`       | `margin: 0 !important;`        |
+| `sapUiNoMarginTop`    | `margin-top: 0 !important;`    |
+| `sapUiNoMarginBottom` | `margin-bottom: 0 !important;` |
+| `sapUiForceWidthAuto` | `width: auto !important;`      |
+
+</details>
+
 ## Removed hooks
 
 ### `useResponsiveContentPadding`

diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx
@@ -38,9 +38,26 @@ import '@sap-ui/common-css/dist/sap-content-paddings.css';
 
 You can apply a dynamic content padding for your element by applying the following classes to your HTML:
 
-```html
-<div class="sap-container-type-inline-size">
-  <div class="sap-content-paddings-container">I will have a responsive content padding</div>
+```jsx
+<div className="sap-container-type-inline-size">
+  <div className="sap-content-paddings-container">I will have a responsive content padding</div>
+</div>
+```
+
+## Margins & Paddings
+
+Common CSS is offering classes that you can use to create some spacing between elements.
+
+**Full Documentation:**
+
+- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
+- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
+
+```jsx
+<div className="sap-padding-x-small">
+  <button className="sap-margin-begin-small">Start Button</button>
+  <button className="sap-margin-x-small">Mid Button</button>
+  <button className="sap-margin-end-small">End Button</button>
 </div>
 ```
 

diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx
@@ -81,14 +81,6 @@ background color for your current theme.
 
 <ThemeableCSSVars />
 
-## Spacing
-
-<Source code={`import { spacing } from '@ui5/webcomponents-react-base';`} />
-
-The `spacing` file is containing all standard margins and paddings that are used in SAP Applications.
-You can explore them via the [UI5 Standard Margins Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.StandardMargins)
-and the [UI5 Standard Paddings Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.ContainerPadding).
-
 ## Hooks
 
 ### `useI18nBundle`

diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
@@ -2,11 +2,10 @@ import { getI18nContext, I18nContext } from './context/I18nContext.js';
 import * as Device from './Device/index.js';
 import * as hooks from './hooks/index.js';
 import { StyleStore } from './stores/StyleStore.js';
-import * as spacing from './styling/spacing.js';
 import { ThemingParameters } from './styling/ThemingParameters.js';
 
 export * from './styling/CssSizeVariables.js';
 export * from './utils/index.js';
 export * from './hooks/index.js';
 
-export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };
+export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks };
diff --git a/packages/base/src/styling/spacing.ts b/packages/base/src/styling/spacing.ts
diff --git a/packages/main/src/components/Loader/Loader.stories.tsx b/packages/main/src/components/Loader/Loader.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
-import { spacing } from '@ui5/webcomponents-react-base';
 import { useEffect, useRef, useState } from 'react';
 import { FlexBoxDirection, LoaderType } from '../../enums/index.js';
 import { Card } from '../../webComponents/Card/index.js';
@@ -62,7 +61,7 @@ export const WithCard: Story = {
       >
         <FlexBox direction={FlexBoxDirection.Column}>
           {loading && <Loader {...args} />}
-          <Text style={spacing.sapUiContentPadding}>{text}</Text>
+          <Text style={{ padding: '1rem' }}>{text}</Text>
         </FlexBox>
       </Card>
     );