Skip to content

Commit c2c3730

Browse files
Lukas742Lukas742
authored
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).
1 parent 19ed2ec commit c2c3730

File tree

7 files changed

+107
-248
lines changed

7 files changed

+107
-248
lines changed

‎docs/MigrationGuide.mdx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,90 @@ To opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` cl
5252

5353
More details can be found in our [Styling Knowledge Base](?path=/docs/knowledge-base-styling--docs#scrollbars).
5454

55+
## Spacing
56+
57+
The `spacing` variables of our base package (`@ui5/webcomponents-react-base`) have been removed.
58+
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.
59+
60+
**Full Documentation of Common CSS classes:**
61+
62+
- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
63+
- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
64+
65+
### Common CSS substitute classes
66+
67+
<details>
68+
<summary>Show</summary>
69+
70+
| Removed Variable | Equivalent Common CSS Class |
71+
| ----------------------------------- | ----------------------------- |
72+
| **All Around Margins** | |
73+
| `sapUiTinyMargin` | `.sap-margin-tiny` |
74+
| `sapUiSmallMargin` | `.sap-margin-small` |
75+
| `sapUiMediumMargin` | `.sap-margin-medium` |
76+
| `sapUiLargeMargin` | `.sap-margin-large` |
77+
| **Single Side Margins** | |
78+
| `sapUiTinyMarginTop` | `.sap-margin-top-tiny` |
79+
| `sapUiSmallMarginTop` | `.sap-margin-top-small` |
80+
| `sapUiMediumMarginTop` | `.sap-margin-top-medium` |
81+
| `sapUiLargeMarginTop` | `.sap-margin-top-large` |
82+
| `sapUiTinyMarginBottom` | `.sap-margin-bottom-tiny` |
83+
| `sapUiSmallMarginBottom` | `.sap-margin-bottom-small` |
84+
| `sapUiMediumMarginBottom` | `.sap-margin-bottom-medium` |
85+
| `sapUiLargeMarginBottom` | `.sap-margin-bottom-large` |
86+
| `sapUiTinyMarginBegin` | `.sap-margin-begin-tiny` |
87+
| `sapUiSmallMarginBegin` | `.sap-margin-begin-small` |
88+
| `sapUiMediumMarginBegin` | `.sap-margin-begin-medium` |
89+
| `sapUiLargeMarginBegin` | `.sap-margin-begin-large` |
90+
| `sapUiTinyMarginEnd` | `.sap-margin-end-tiny` |
91+
| `sapUiSmallMarginEnd` | `.sap-margin-end-small` |
92+
| `sapUiMediumMarginEnd` | `.sap-margin-end-medium` |
93+
| `sapUiLargeMarginEnd` | `.sap-margin-end-large` |
94+
| **Horizontal Margins** | |
95+
| `sapUiTinyMarginBeginEnd` | `.sap-margin-x-tiny` |
96+
| `sapUiSmallMarginBeginEnd` | `.sap-margin-x-small` |
97+
| `sapUiMediumMarginBeginEnd` | `.sap-margin-x-medium` |
98+
| `sapUiLargeMarginBeginEnd` | `.sap-margin-x-large` |
99+
| **Vertical Margins** | |
100+
| `sapUiTinyMarginTopBottom` | `.sap-margin-y-tiny` |
101+
| `sapUiSmallMarginBeginEnd` | `.sap-margin-y-small` |
102+
| `sapUiMediumMarginTopBottom` | `.sap-margin-y-medium` |
103+
| `sapUiLargeMarginTopBottom` | `.sap-margin-y-large` |
104+
| **Responsive Margins** | |
105+
| `sapUiResponsiveMargin` | `.sap-margin-responsive` |
106+
| **Negative Margins** | |
107+
| `sapUiTinyNegativeMarginBeginEnd` | `.sap-margin-tiny-negative` |
108+
| `sapUiSmallNegativeMarginBeginEnd` | `.sap-margin-small-negative` |
109+
| `sapUiMediumNegativeMarginBeginEnd` | `.sap-margin-medium-negative` |
110+
| `sapUiLargeNegativeMarginBeginEnd` | `.sap-margin-large-negative` |
111+
| **All Around Padding** | |
112+
| `sapUiContentPadding` | `.sap-padding` |
113+
| **Responsive Paddings** | |
114+
| `sapUiResponsiveContentPadding` | `.sap-padding-responsive` |
115+
| **Horizontal Paddings** | |
116+
| `sapUiTinyPaddingBeginEnd` | `.sap-padding-x-tiny` |
117+
| `sapUiSmallPaddingBeginEnd` | `.sap-padding-x-small` |
118+
| `sapUiMediumPaddingBeginEnd` | `.sap-padding-x-medium` |
119+
| `sapUiLargePaddingBeginEnd` | `.sap-padding-x-large` |
120+
| **No Padding** | |
121+
| `sapUiNoContentPadding` | `.sap-padding-none` |
122+
123+
</details>
124+
125+
### Removed variables without substitute
126+
127+
<details>
128+
<summary>Show</summary>
129+
130+
| Removed Variable | Property and Value |
131+
| --------------------- | ------------------------------ |
132+
| `sapUiNoMargin` | `margin: 0 !important;` |
133+
| `sapUiNoMarginTop` | `margin-top: 0 !important;` |
134+
| `sapUiNoMarginBottom` | `margin-bottom: 0 !important;` |
135+
| `sapUiForceWidthAuto` | `width: auto !important;` |
136+
137+
</details>
138+
55139
## Removed hooks
56140

57141
### `useResponsiveContentPadding`

‎docs/knowledge-base/CommonCSS.mdx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,26 @@ import '@sap-ui/common-css/dist/sap-content-paddings.css';
3838

3939
You can apply a dynamic content padding for your element by applying the following classes to your HTML:
4040

41-
```html
42-
<div class="sap-container-type-inline-size">
43-
<div class="sap-content-paddings-container">I will have a responsive content padding</div>
41+
```jsx
42+
<div className="sap-container-type-inline-size">
43+
<div className="sap-content-paddings-container">I will have a responsive content padding</div>
44+
</div>
45+
```
46+
47+
## Margins & Paddings
48+
49+
Common CSS is offering classes that you can use to create some spacing between elements.
50+
51+
**Full Documentation:**
52+
53+
- [Margins](https://sap.github.io/fundamental-styles/?path=/docs/common-css-margins--docs)
54+
- [Paddings](https://sap.github.io/fundamental-styles/?path=/docs/common-css-padding--docs)
55+
56+
```jsx
57+
<div className="sap-padding-x-small">
58+
<button className="sap-margin-begin-small">Start Button</button>
59+
<button className="sap-margin-x-small">Mid Button</button>
60+
<button className="sap-margin-end-small">End Button</button>
4461
</div>
4562
```
4663

‎docs/knowledge-base/Public-Utils.mdx

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,14 +81,6 @@ background color for your current theme.
8181

8282
<ThemeableCSSVars />
8383

84-
## Spacing
85-
86-
<Source code={`import { spacing } from '@ui5/webcomponents-react-base';`} />
87-
88-
The `spacing` file is containing all standard margins and paddings that are used in SAP Applications.
89-
You can explore them via the [UI5 Standard Margins Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.StandardMargins)
90-
and the [UI5 Standard Paddings Demo Kit](https://ui5.sap.com/#/entity/sap.ui.core.ContainerPadding).
91-
9284
## Hooks
9385

9486
### `useI18nBundle`

‎packages/base/src/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import { getI18nContext, I18nContext } from './context/I18nContext.js';
22
import * as Device from './Device/index.js';
33
import * as hooks from './hooks/index.js';
44
import { StyleStore } from './stores/StyleStore.js';
5-
import * as spacing from './styling/spacing.js';
65
import { ThemingParameters } from './styling/ThemingParameters.js';
76

87
export * from './styling/CssSizeVariables.js';
98
export * from './utils/index.js';
109
export * from './hooks/index.js';
1110

12-
export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks, spacing };
11+
export { getI18nContext, I18nContext, StyleStore, ThemingParameters, Device, hooks };

‎packages/base/src/styling/spacing.ts

Lines changed: 0 additions & 231 deletions
This file was deleted.

‎packages/main/src/components/Loader/Loader.stories.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
22
import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
3-
import { spacing } from '@ui5/webcomponents-react-base';
43
import { useEffect, useRef, useState } from 'react';
54
import { FlexBoxDirection, LoaderType } from '../../enums/index.js';
65
import { Card } from '../../webComponents/Card/index.js';
@@ -62,7 +61,7 @@ export const WithCard: Story = {
6261
>
6362
<FlexBox direction={FlexBoxDirection.Column}>
6463
{loading && <Loader {...args} />}
65-
<Text style={spacing.sapUiContentPadding}>{text}</Text>
64+
<Text style={{ padding: '1rem' }}>{text}</Text>
6665
</FlexBox>
6766
</Card>
6867
);

0 commit comments

Comments
 (0)