Skip to content

Commit 2213124

Browse files
Lukas742Lukas742
committed
ui5-webcomponents-react: update tutorial to v2 of ui5wcr
1 parent d0ea128 commit 2213124

12 files changed

Lines changed: 813 additions & 721 deletions

File tree

‎tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md‎

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ You can check out all available components in the [Storybook](https://sap.github
3737

3838
2. So, you imported the `Card` component. Now it's time to use it. Replace the content of your `<div>` with a `<Card>`.
3939

40-
In the [Storybook](https://sap.github.io/ui5-webcomponents-react/?path=/story/4-ui5-web-components-card--default-story), you can see that Cards can receive different props. For now only add some text as `children`.
40+
In the [Storybook](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-card--docs), you can see that Cards can receive different props. For now only add some text as `children`.
4141

4242
```TypeScript / TSX
4343
<div>
@@ -85,16 +85,13 @@ The heading area of the `Card` component is empty, this is because it didn't rec
8585
</div>
8686
```
8787

88-
2. Now the `Card` has a header area, but the `font-family` of the content area differs from the `Card` header. All UI5 Web Components for React components use the same styling, this includes `font-family`, `color`, etc.
89-
90-
Add the `Text` import to your `MyApp.tsx` file.
88+
3. Our template applies the SAP defined `font-family` for all texts that don't implement `font-family` themselves. (see `index.css` file)
89+
To enable this on a single text without using CSS, you can use the `Text` component. Let's wrap the text content of the `Card` inside the `Text` component:
9190

9291
```TypeScript / TSX
9392
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
9493
```
9594

96-
And wrap the text within the `Text` component.
97-
9895
```TypeScript / TSX
9996
<div>
10097
<Card header={<CardHeader titleText="Card" />}>
@@ -103,15 +100,14 @@ The heading area of the `Card` component is empty, this is because it didn't rec
103100
</div>
104101
```
105102

106-
The `font-family` of the content now corresponds to the `font-family` of the header.
107-
108103

109104

110105
### Style your component
111106

112-
In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)) or even authoring tools like [JSS](https://cssinjs.org), but this will be covered in [Tutorial 6](ui5-webcomponents-react-styling) of the tutorial series.
107+
In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style).
108+
You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)) or even authoring tools like [JSS](https://cssinjs.org), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [Tutorial 6](ui5-webcomponents-react-styling) of the tutorial series.
113109

114-
The Card now spreads across the whole screen, this behavior is intended so it takes up the whole space of its container.
110+
The Card now spreads across the whole screen, this behavior is intended, so it takes up the whole space of its container.
115111

116112
1. To restrict the `width` of the `Card`, add the `style` prop.
117113

@@ -123,39 +119,27 @@ The Card now spreads across the whole screen, this behavior is intended so it ta
123119

124120
![Card02](02_card.png)
125121

126-
2. The content of the card is way too close to the border of the `Card`, so a `padding` is needed. UI5 Web Components comes with a `Util` library, which includes `padding` sizes.
127-
128-
Execute this in your terminal:
129-
130-
```Shell
131-
npm install @ui5/webcomponents-react-base
132-
```
133-
134-
Then import:
135-
136-
```TypeScript / TSX
137-
import { spacing } from "@ui5/webcomponents-react-base";
138-
```
139-
140-
And finally add this to your `Text` component:
141-
142-
```TypeScript / TSX
143-
<Text style={spacing.sapUiContentPadding}>
122+
2. The content of the card is way too close to the border of the `Card`, so a `padding` is needed. You can define your own spacing, or use the standard SAP spacing variables. In this example we're using one of the global [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) from the [theming-base-content](https://github.com/SAP/theming-base-content) repo, which are already included when using UI5 Web Components.
123+
124+
The CSS Var in question is `--sapContent_Space_S` (`1rem`) and we're going to apply it via inline-style again:
125+
126+
```TypeScript / TSX
127+
<Text style={{padding: "var(--sapContent_Space_S)"}}>
144128
This is the content area of the Card
145129
</Text>
146-
```
147-
Hereby you get a standardized content-padding. `spacing` comes with many more properties, feel free to test them and see what they do.
130+
```
131+
132+
Hereby you get a standardized content-padding.
148133

149134
After this step `MyApp.tsx` should look like this:
150135
```TypeScript / TSX
151136
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
152-
import { spacing } from "@ui5/webcomponents-react-base";
153137
154138
export function MyApp() {
155139
return (
156140
<div>
157141
<Card header={<CardHeader titleText="Card" />} style={{ width: "300px" }}>
158-
<Text style={spacing.sapUiContentPadding}>
142+
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
159143
This is the content area of the Card
160144
</Text>
161145
</Card>
@@ -171,7 +155,7 @@ And your application like this:
171155
### Event handling
172156

173157

174-
1. The Card header can also be clickable. For this you need to set its `interactive` prop to true.
158+
1. The Card header can also be interactive, to enable this set `interactive` to `true`.
175159

176160
```TypeScript / TSX
177161
<Card
@@ -180,9 +164,11 @@ And your application like this:
180164
</Card>
181165
```
182166

183-
We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted.
184-
185-
2. To make the header react to a click, add a function as value to the `onClick` prop.
167+
_We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted._
168+
169+
When you now click or focus the header, the appropriate styles are applied, so users know they can interact with it.
170+
171+
2. To make the header react to a click (or SPACE/ENTER press), add a function as value to the `onClick` prop.
186172

187173
```TypeScript / TSX
188174
<Card
@@ -206,10 +192,9 @@ And your application like this:
206192
...
207193
```
208194
209-
The file now looks like this:
195+
The file should now look like this:
210196
```TypeScript / TSX
211-
import { Card, Text, CardHeader } from "@ui5/webcomponents-react";
212-
import { spacing } from "@ui5/webcomponents-react-base";
197+
import { Card, CardHeader, Text } from "@ui5/webcomponents-react";
213198

214199
export function MyApp() {
215200
const handleHeaderClick = () => {
@@ -227,7 +212,7 @@ export function MyApp() {
227212
}
228213
style={{ width: "300px" }}
229214
>
230-
<Text style={spacing.sapUiContentPadding}>
215+
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
231216
This is the content area of the Card
232217
</Text>
233218
</Card>

0 commit comments

Comments
 (0)