diff --git a/cypress.config.ts b/cypress.config.ts index 3a6c4534c66..cf3008c3a05 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -9,7 +9,6 @@ export default defineConfig({ '**/src/interfaces/*', '**/src/enums/*', '**/*.stories.tsx', - '**/*.jss.ts', '**/*.test.{ts,tsx}', '**/node_modules/**', 'packages/*/src/index.ts', diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 7a611839aec..2ec0fd81591 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -17,6 +17,35 @@ or the [changelog](?path=/docs/change-log--page)._ +## General changes + +### Removed `react-jss` + +UI5 Web Components for React is no longer relying on `react-jss` internally, hence the dependency is now removed and the `react-jss` ThemeProvider is no longer rendered as part of our `ThemeProvider`. +If you are relying on `react-jss` in your application, please make sure to render your own `react-jss` ThemeProvider: + +```tsx +import { ThemeProvider } from '@ui5/webcomponents-react'; +import { ThemingParameters } from '@ui5/webcomponents-react-base'; +import { ThemeProvider as ReactJssThemeProvider } from 'react-jss'; + +function MyRootComponent() { + return ( + + {/* your app content goes here */} + + ); +} +``` + +## Removed hooks + +### `useResponsiveContentPadding` + +The `useResponsiveContentPadding` hook has been removed. +You can now apply responsive content paddings by applying the `sap-content-paddings-container` class from `@sap-ui/common-css` package to your element. +You can find a more detailed documentation [here](https://sap.github.io/ui5-webcomponents-react/main/?path=/docs/knowledge-base-common-css--docs#content-paddings). + ## Replaced Components ### AnalyticalCard diff --git a/docs/knowledge-base/CommonCSS.mdx b/docs/knowledge-base/CommonCSS.mdx new file mode 100644 index 00000000000..2c42cad3251 --- /dev/null +++ b/docs/knowledge-base/CommonCSS.mdx @@ -0,0 +1,47 @@ +import { Footer, TableOfContent } from '@sb/components'; +import { Meta } from '@storybook/blocks'; +import { Link, MessageStrip } from '@ui5/webcomponents-react'; + + + +# Using Common CSS in your application + + + +We recommend using the [@sap-ui/common-css](https://www.npmjs.com/package/@sap-ui/common-css) package for applying common styling blocks based on SAP Fiori Design Guidelines. + + + This documentation is only showing a few samples which we consider to be useful for applications using UI5 Web + Components for React. You can find the full documentation for SAP UI Common CSS{' '} + here. + + } +> + +
+
+ +## Content Paddings + +[Full Documentation](https://sap.github.io/fundamental-styles/?path=/docs/common-css-content-paddings--docs) + +You can import the content paddings by adding the following import to your project: + +```ts +import '@sap-ui/common-css/dist/sap-content-paddings.css'; +``` + +### Responsive Content Paddings + +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
+
+``` + +