From 815f7078377005deed7de07924e85adb7f04b0e2 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Tue, 2 Jul 2024 17:34:31 +0200 Subject: [PATCH 1/2] refactor(`spacing`): remove all `spacing` variables 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). --- docs/MigrationGuide.mdx | 86 +++++++ docs/knowledge-base/CommonCSS.mdx | 23 +- docs/knowledge-base/Public-Utils.mdx | 8 - packages/base/src/index.ts | 3 +- packages/base/src/styling/spacing.ts | 231 ------------------ .../src/components/Loader/Loader.stories.tsx | 3 +- .../FlexibleColumnLayout.stories.tsx | 3 +- 7 files changed, 109 insertions(+), 248 deletions(-) delete mode 100644 packages/base/src/styling/spacing.ts diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 7af6e4f8833..8cdf9fa9246 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -52,6 +52,92 @@ 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 + +
+ Show + +| 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` | +| `sapUiTinyMargin` | `.sap-margin-tiny` | +| `sapUiTinyMargin` | `.sap-margin-tiny` | +| **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` | + +
+ +### Removed variables without substitute + +
+ Show + +| Removed Variable | Property and Value | +| --------------------- | ------------------------------ | +| `sapUiNoMargin` | `margin: 0 !important;` | +| `sapUiNoMarginTop` | `margin-top: 0 !important;` | +| `sapUiNoMarginBottom` | `margin-bottom: 0 !important;` | +| `sapUiForceWidthAuto` | `width: auto !important;` | + +
+ ## Removed hooks ### `useResponsiveContentPadding` diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx index 2c42cad3251..8cb93c9d0ed 100644 --- 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 -
-
I will have a responsive content padding
+```jsx +
+
I will have a responsive content padding
+
+``` + +## 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 +
+ + +
``` diff --git a/docs/knowledge-base/Public-Utils.mdx b/docs/knowledge-base/Public-Utils.mdx index 38f8e4802ee..ef6b9170ecc 100644 --- a/docs/knowledge-base/Public-Utils.mdx +++ b/docs/knowledge-base/Public-Utils.mdx @@ -81,14 +81,6 @@ background color for your current theme. -## Spacing - - - -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 index 3b8d086d7aa..3ac13b0e145 100644 --- 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 deleted file mode 100644 index 20498b8ea31..00000000000 --- a/packages/base/src/styling/spacing.ts +++ /dev/null @@ -1,231 +0,0 @@ -const TINY_SPACE = '0.5rem'; -const SMALL_SPACE = '1rem'; -const MEDIUM_SPACE = '2rem'; -const LARGE_SPACE = '3rem'; - -/* - * ################################################### - * Margin Classes - * ################################################### - */ - -// All Around Margins -export const sapUiTinyMargin = { - margin: TINY_SPACE -}; -export const sapUiSmallMargin = { - margin: SMALL_SPACE -}; -export const sapUiMediumMargin = { - margin: MEDIUM_SPACE -}; -export const sapUiLargeMargin = { - margin: LARGE_SPACE -}; - -// Single Side Margins -// Tiny -export const sapUiTinyMarginTop = { - marginTop: TINY_SPACE -}; -export const sapUiTinyMarginBottom = { - marginBottom: TINY_SPACE -}; -export const sapUiTinyMarginBegin = { - marginLeft: TINY_SPACE -}; -export const sapUiTinyMarginEnd = { - marginRight: TINY_SPACE -}; - -// Small -export const sapUiSmallMarginTop = { - marginTop: SMALL_SPACE -}; -export const sapUiSmallMarginBottom = { - marginBottom: SMALL_SPACE -}; -export const sapUiSmallMarginBegin = { - marginLeft: SMALL_SPACE -}; -export const sapUiSmallMarginEnd = { - marginRight: SMALL_SPACE -}; - -// Medium -export const sapUiMediumMarginTop = { - marginTop: MEDIUM_SPACE -}; -export const sapUiMediumMarginBottom = { - marginBottom: MEDIUM_SPACE -}; -export const sapUiMediumMarginBegin = { - marginLeft: MEDIUM_SPACE -}; -export const sapUiMediumMarginEnd = { - marginRight: MEDIUM_SPACE -}; - -// Large -export const sapUiLargeMarginTop = { - marginTop: LARGE_SPACE -}; -export const sapUiLargeMarginBottom = { - marginBottom: LARGE_SPACE -}; -export const sapUiLargeMarginBegin = { - marginLeft: LARGE_SPACE -}; -export const sapUiLargeMarginEnd = { - marginRight: LARGE_SPACE -}; - -// Two Sided Margin -// Tiny -export const sapUiTinyMarginBeginEnd = { - ...sapUiTinyMarginBegin, - ...sapUiTinyMarginEnd -}; -export const sapUiTinyMarginTopBottom = { - ...sapUiTinyMarginTop, - ...sapUiTinyMarginBottom -}; - -// Small -export const sapUiSmallMarginBeginEnd = { - ...sapUiSmallMarginBegin, - ...sapUiSmallMarginEnd -}; -export const sapUiSmallMarginTopBottom = { - ...sapUiSmallMarginTop, - ...sapUiSmallMarginBottom -}; - -// Medium -export const sapUiMediumMarginBeginEnd = { - ...sapUiMediumMarginBegin, - ...sapUiMediumMarginEnd -}; -export const sapUiMediumMarginTopBottom = { - ...sapUiMediumMarginTop, - ...sapUiMediumMarginBottom -}; - -// Large -export const sapUiLargeMarginBeginEnd = { - ...sapUiLargeMarginBegin, - ...sapUiLargeMarginEnd -}; -export const sapUiLargeMarginTopBottom = { - ...sapUiLargeMarginTop, - ...sapUiLargeMarginBottom -}; - -// Remove Margins -export const sapUiNoMargin = { - margin: '0 !important' -}; - -// Remove Single Side Margins -export const sapUiNoMarginTop = { - marginTop: '0 !important' -}; -export const sapUiNoMarginBottom = { - marginBottom: '0 !important' -}; -export const sapUiNoMarginBegin = { - marginBegin: '0 !important' -}; -export const sapUiNoMarginEnd = { - marginEnd: '0 !important' -}; - -// Force Auto Width -export const sapUiForceWidthAuto = { - width: 'auto !important' -}; - -export const sapUiResponsiveMargin = { - '@media(max-width:599px)': { - margin: '0 0 1rem 0' - }, - '@media (min-width:600px) and (max-width:1023px)': { - margin: '1rem !important' - }, - '@media (min-width:1024px) and (max-width: 1439px)': { - margin: '1rem 2rem !important' - }, - '@media (min-width:1440px)': { - margin: '1rem 3rem !important' - } -}; - -export const sapUiTinyNegativeMarginBeginEnd = { - margin: '0 -0.5rem !important' -}; - -export const sapUiSmallNegativeMarginBeginEnd = { - margin: '0 -1rem !important' -}; - -export const sapUiMediumNegativeMarginBeginEnd = { - margin: '0 -2rem !important' -}; - -export const sapUiLargeNegativeMarginBeginEnd = { - margin: '0 -3rem !important' -}; - -/* - * ################################################### - * Padding Classes - * ################################################### - */ - -export const sapUiNoContentPadding = { - padding: '0 !important' -}; - -export const sapUiContentPadding = { - padding: '1rem' -}; - -// Two Sided Padding -export const sapUiTinyPaddingBeginEnd = { - paddingLeft: '0.5rem !important', - paddingRight: '0.5rem !important' -}; - -export const sapUiSmallPaddingBeginEnd = { - paddingLeft: '1rem !important', - paddingRight: '1rem !important' -}; - -export const sapUiMediumPaddingBeginEnd = { - paddingLeft: '2rem !important', - paddingRight: '2rem !important' -}; - -export const sapUiLargePaddingBeginEnd = { - paddingLeft: '3rem !important', - paddingRight: '3rem !important' -}; - -export const sapUiResponsiveContentPadding = { - '@media(max-width:599px)': { - paddingLeft: '1rem', - paddingRight: '1rem' - }, - '@media (min-width:600px) and (max-width:1023px)': { - paddingLeft: '2rem', - paddingRight: '2rem' - }, - '@media (min-width:1024px) and (max-width: 1439px)': { - paddingLeft: '2rem', - paddingRight: '2rem' - }, - '@media (min-width:1440px)': { - paddingLeft: '3rem', - paddingRight: '3rem' - } -}; diff --git a/packages/main/src/components/Loader/Loader.stories.tsx b/packages/main/src/components/Loader/Loader.stories.tsx index 3c883309f15..3b9d0b7b981 100644 --- 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 = { > {loading && } - {text} + {text} ); diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx index 99933cfead7..31356888e04 100644 --- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx +++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import AvatarSize from '@ui5/webcomponents/dist/types/AvatarSize.js'; import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js'; import FCLLayout from '@ui5/webcomponents-fiori/dist/types/FCLLayout.js'; -import { spacing } from '@ui5/webcomponents-react-base'; import { useState } from 'react'; import { FlexBox } from '../../components/FlexBox'; import { Toolbar } from '../../components/Toolbar'; @@ -400,7 +399,7 @@ export const WithDifferentColumns: Story = { /> } > -
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut From 3077bcee4ff6360a333c3602fa64cdf8def2d5a1 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 3 Jul 2024 08:35:28 +0200 Subject: [PATCH 2/2] docs: fix typos and remove duplicates --- docs/MigrationGuide.mdx | 2 -- docs/knowledge-base/CommonCSS.mdx | 6 +++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 8cdf9fa9246..6c2cb91d4d1 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -74,8 +74,6 @@ Most variables can be replaced by applying the corresponding CSS classes from th | `sapUiSmallMargin` | `.sap-margin-small` | | `sapUiMediumMargin` | `.sap-margin-medium` | | `sapUiLargeMargin` | `.sap-margin-large` | -| `sapUiTinyMargin` | `.sap-margin-tiny` | -| `sapUiTinyMargin` | `.sap-margin-tiny` | | **Single Side Margins** | | | `sapUiTinyMarginTop` | `.sap-margin-top-tiny` | | `sapUiSmallMarginTop` | `.sap-margin-top-small` | diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx index 8cb93c9d0ed..abbd4e99aac 100644 --- a/docs/knowledge-base/CommonCSS.mdx +++ b/docs/knowledge-base/CommonCSS.mdx @@ -55,9 +55,9 @@ Common CSS is offering classes that you can use to create some spacing between e ```jsx
- - - + + +
```