docs: refactor components and example to use css (modules) instead of react-jss (#5721)

Lukas742 · web-flow · commit 8bcfab6f17dc · 2024-04-17T13:27:51.000+02:00
diff --git a/.storybook/components/ArgTypesWithNote.module.css b/.storybook/components/ArgTypesWithNote.module.css
@@ -0,0 +1,11 @@
+.tableContainer {
+  margin-top: 25px;
+
+  table {
+    margin-top: 0 !important;
+  }
+}
+
+.strip {
+  margin-bottom: 10px;
+}
diff --git a/.storybook/components/ArgTypesWithNote.tsx b/.storybook/components/ArgTypesWithNote.tsx
@@ -1,17 +1,7 @@
 import { ArgTypes } from '@storybook/blocks';
 import { MessageStrip, MessageStripDesign } from '@ui5/webcomponents-react';
-import React, { ComponentProps, ReactNode, useEffect, useRef } from 'react';
-import { createUseStyles } from 'react-jss';
-
-const useStyles = createUseStyles({
-  tableContainer: {
-    marginTop: '25px',
-    '& table': {
-      marginTop: '0 !important'
-    }
-  },
-  strip: { marginBottom: '10px' }
-});
+import React, { ComponentProps, ReactNode } from 'react';
+import classes from './ArgTypesWithNote.module.css';
 
 interface ArgTypesWithNotePropTypes {
   hideHTMLPropsNote?: boolean;
@@ -25,7 +15,6 @@ interface ArgTypesWithNotePropTypes {
 
 export function ArgTypesWithNote(props: ComponentProps<typeof ArgTypes> & ArgTypesWithNotePropTypes) {
   const { hideHTMLPropsNote, noteText, ...rest } = props;
-  const classes = useStyles();
 
   if (hideHTMLPropsNote) {
     return <ArgTypes {...rest} />;
diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
@@ -13,7 +13,7 @@ import { Footer, TableOfContent } from '@sb/components';
 ## Styling UI5 Web Components for React components
 
 You can change the appearance of the Web Components by using [CSS Variables](https://www.w3schools.com/Css/css3_variables.asp).
-Per default, we are injecting the Fiori 3 theme parameters as CSS Variables into the `<head>`.
+Per default, we are injecting the Horizon theme parameters as CSS Variables into the `<head>`.
 For example, if you want to change the color of all texts that use the `--sapTextColor` variable, you can create an additional `style` tag with the following content:
 
 ```html
@@ -60,11 +60,7 @@ Some components like the `ObjectPage`, `DynamicPage` and `AnalyticalTable` use t
 ## Style your own components
 
 It's quite likely you have to create some custom components when you are building an app.
-In order to reuse our central styling approach, you can import the `ThemingParameters` that contain the various CSS variables used in our theming.
-
-If you want to style your components with the `react-jss` syntax, you can use the `createUseStyles` styling hook.
-`react-jss` comes already as a dependency of `@ui5/webcomponents-react` to your project - but we recommend adding it to your `package.json` as well.
-**Please make sure you are installing `"react-jss": "^10.0.0"`**. Previous versions of this library won't work correctly together with our library.
+In order to reuse our central styling approach, you can import the `ThemingParameters` that contain the various CSS variables used in our theming, or use the CSS variables directly.
 
 <MessageStrip
   design={MessageStripDesign.Information}
@@ -85,28 +81,14 @@ If you want to style your components with the `react-jss` syntax, you can use th
 
 You can then create a custom component by following this recipe:
 
-```jsx
+```tsx
 import React from 'react';
-import { createUseStyles } from 'react-jss';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import './MyCustomElement.css';
 
-const styles = {
-  container: {
-    backgroundColor: ThemingParameters.sapBackgroundColor,
-    fontFamily: ThemingParameters.sapFontFamily,
-    height: '50px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-};
-
-const useStyles = createUseStyles(styles, { name: 'MyCustomElement' });
-
-const MyCustomElement = () => {
-  const classes = useStyles();
+export const MyCustomElement = () => {
   return (
-    <div className={classes.container}>
+    <div className="containerCustomElement">
       <span style={{ color: ThemingParameters.sapNegativeColor, fontSize: ThemingParameters.sapFontLargeSize }}>
         My Text
       </span>
@@ -115,6 +97,17 @@ const MyCustomElement = () => {
 };
 ```
 
+```css
+.containerCustomElement {
+  background-color: var(--sapBackgroundColor);
+  font-family: var(--sapFontFamily);
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+```
+
 This would then be the result:
 
 <ThemeProvider>
diff --git a/docs/styling/MyCustomElement.css b/docs/styling/MyCustomElement.css
@@ -0,0 +1,8 @@
+.containerCustomElement {
+    background-color: var(--sapBackgroundColor);
+    font-family: var(--sapFontFamily);
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/docs/styling/MyCustomElement.jsx b/docs/styling/MyCustomElement.jsx
diff --git a/docs/styling/MyCustomElement.tsx b/docs/styling/MyCustomElement.tsx
@@ -1,24 +1,10 @@
 import React from 'react';
-import { createUseStyles } from 'react-jss';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-
-const styles = {
-  container: {
-    backgroundColor: ThemingParameters.sapBackgroundColor,
-    fontFamily: ThemingParameters.sapFontFamily,
-    height: '50px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-};
-
-const useStyles = createUseStyles(styles, { name: 'MyCustomElement' });
+import './MyCustomElement.css';
 
 export const MyCustomElement = () => {
-  const classes = useStyles();
   return (
-    <div className={classes.container}>
+    <div className="containerCustomElement">
       <span style={{ color: ThemingParameters.sapNegativeColor, fontSize: ThemingParameters.sapFontLargeSize }}>
         My Text
       </span>
diff --git a/tsconfig.node.json b/tsconfig.node.json
@@ -10,6 +10,7 @@
   "include": [
     "vite.config.ts",
     ".storybook",
+    "docs",
     "packages/**/*.stories.tsx",
     "packages/cypress-commands/CommandsAndQueries.tsx"
   ]

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@`
`10`	`10`	`"include": [`
`11`	`11`	`"vite.config.ts",`
`12`	`12`	`".storybook",`
	`13`	`+ "docs",`
`13`	`14`	`"packages/*/.stories.tsx",`
`14`	`15`	`"packages/cypress-commands/CommandsAndQueries.tsx"`
`15`	`16`	`]`