Skip to content

Commit 266974e

Browse files
rbraineyrbrainey
authored
Merge pull request #23927 from Lukas742/master
ui5-webcomponents-react: fix formatting
2 parents c86ca7f + 250d2d7 commit 266974e

5 files changed

Lines changed: 84 additions & 83 deletions

File tree

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ The heading area of the `Card` component is empty, this is because it didn't rec
104104

105105
### Style your component
106106

107-
In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style).
107+
In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style).
108108
You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [chapter six](ui5-webcomponents-react-styling) of the tutorial series.
109109

110110
The Card now spreads across the whole screen, this behavior is intended, so it takes up the whole space of its container.
@@ -120,14 +120,14 @@ The Card now spreads across the whole screen, this behavior is intended, so it t
120120
![Card02](02_card.png)
121121

122122
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)"}}>
128-
This is the content area of the Card
129-
</Text>
130-
```
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)"}}>
128+
This is the content area of the Card
129+
</Text>
130+
```
131131

132132
Hereby you get a standardized content-padding.
133133

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ UI5 Web Components for React also comes with a chart library. In this tutorial,
2929
npm install @ui5/webcomponents-react-charts
3030
```
3131

32-
> **Note:** When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents...` packages.
32+
> **Note:**
33+
When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents...` packages.
3334
3435
2. Then, import `LineChart` and `BarChart` into `MyApp.tsx`.
3536
@@ -504,15 +505,15 @@ To make your `Card` look cleaner and to give the user the information that the h
504505
```
505506
3. Add accessibility attributes to the `Icon`
506507
507-
If the `header` alone does not sufficiently describe the currently visible `Icon`, you can define an `accessibleName`. Its value will be applied as the `aria-label` of the internal element, which screen readers will pick up.
508-
In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers.
509-
510-
```
511-
<Icon
512-
name={
513-
toggleCharts === "lineChart" ? lineChartIcon : barChartIcon
514-
}
515-
accessibleName={contentTitle}
516-
/>
517-
```
508+
If the `header` alone does not sufficiently describe the currently visible `Icon`, you can define an `accessibleName`. Its value will be applied as the `aria-label` of the internal element, which screen readers will pick up.
509+
In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers.
510+
511+
```
512+
<Icon
513+
name={
514+
toggleCharts === "lineChart" ? lineChartIcon : barChartIcon
515+
}
516+
accessibleName={contentTitle}
517+
/>
518+
```
518519
---

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ The `ShellBar` is the central navigation element in your Web Application and sho
8787
[`profilePictureExample.png`](https://github.com/SAPDocuments/Tutorials/raw/master/tutorials/ui5-webcomponents-react-dashboard/profilePictureExample.png)
8888

8989
Processed Assets:
90-
[assets](assets.png)
90+
![assets](assets.png)
9191

9292
```TypeScript / TSX
9393
import reactLogo from "./assets/reactLogo.png";
@@ -321,7 +321,7 @@ export function MyApp() {
321321

322322
5. Users should know the status of the activities. Add the `additionalText` prop to the `StandardListItem`. To visualize if the status is neutral, positive or negative, also add the `additionalTextState` prop.
323323

324-
You can either pass a supported string directly, or use the `ValueState` enum:
324+
You can either pass a supported string directly, or use the `ValueState` enum:
325325

326326
```TypeScript / TSX
327327
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
@@ -422,7 +422,7 @@ For this, add two `Text` components above the indicator:
422422

423423
10. Finally, apply the same layout and styles to the content of the second `ListItemCustom`.
424424

425-
![List](03_list.png)
425+
![List](03_list.png)
426426

427427

428428
### Add an `AnalyticalTable`
@@ -495,8 +495,8 @@ For this, add two `Text` components above the indicator:
495495

496496
4. Add more properties
497497

498-
You can add many more properties to the `AnalyticalTable` component. For example, you can allow sorting, filtering and grouping via `sortable`, `filterable` and `groupable`, enable different selection modes with `selectionMode`, control how the table splits up available space between the columns with `scaleWidthMode` and many more.
499-
Feel free to take a look at the [documentation](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs) and explore the different examples before continuing.
498+
You can add many more properties to the `AnalyticalTable` component. For example, you can allow sorting, filtering and grouping via `sortable`, `filterable` and `groupable`, enable different selection modes with `selectionMode`, control how the table splits up available space between the columns with `scaleWidthMode` and many more.
499+
Feel free to take a look at the [documentation](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs) and explore the different examples before continuing.
500500

501501
The default visible rows count is at 15. This number is a bit to high for a dashboard table. Reduce the `visibleRows` count to 5 by setting the corresponding prop.
502502

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ With this you created your first `React` component. To actually render the compo
9797
```
9898
3. Add the component to the `return` value of `App()`.
9999

100-
```TypeScript / TSX
100+
```TypeScript / TSX
101101
function App() {
102102
return (
103103
<>
@@ -107,35 +107,35 @@ With this you created your first `React` component. To actually render the compo
107107
}
108108
```
109109

110-
> Note that `<MyApp />` is using a self closing syntax and is equivalent to `<MyApp></MyApp>`. All tags in JSX must be closed explicitly, this applies to HTML tags (like `img`) and custom JSX tags. [Here](https://react.dev/learn/writing-markup-with-jsx) you can find out more about JSX in general.
110+
> Note that `<MyApp />` is using a self-closing syntax and is equivalent to `<MyApp></MyApp>`. All tags in JSX must be closed explicitly, this applies to HTML tags (like `img`) and custom JSX tags. [Here](https://react.dev/learn/writing-markup-with-jsx) you can find out more about JSX in general.
111111

112112
4. Open `main.tsx`. This is your entry file, let's take a look at the content in more detail.
113113

114-
Your file should look like this:
115-
116-
```TypeScript / TSX
117-
import '@ui5/webcomponents-react/dist/Assets.js';
118-
import { ThemeProvider } from '@ui5/webcomponents-react';
119-
import { StrictMode } from 'react';
120-
import { createRoot } from 'react-dom/client';
121-
import App from './App.tsx';
122-
import './index.css';
123-
124-
createRoot(document.getElementById('root') as HTMLElement).render(
125-
<StrictMode>
126-
<ThemeProvider>
127-
<App />
128-
</ThemeProvider>
129-
</StrictMode>
130-
);
131-
```
132-
133-
- `Assets.js'`: This includes assets like translation files (CLDR), theming, etc. of the required packages.
134-
- `ThemeProvider`: Inter alia, this provider makes your app react to theme and language changes and injects the CSS of __used__ components.
135-
- `StrictMode`: The React `StrictMode` component enables addition development behaviors and warnings for the component tree inside. It is not required, but using it helps find common pitfalls and bugs in development. You can find out more about it [here](https://react.dev/reference/react/StrictMode).
136-
- `createRoot`: This function lets you create the React root to display React components inside a browser DOM node ([React docs](https://react.dev/reference/react-dom/client/createRoot)). You will usually add this DOM node inside the `index.html` file.
137-
- `App`: A React component.
138-
- `index.css`: Global CSS file.
114+
Your file should look like this:
115+
116+
```TypeScript / TSX
117+
import '@ui5/webcomponents-react/dist/Assets.js';
118+
import { ThemeProvider } from '@ui5/webcomponents-react';
119+
import { StrictMode } from 'react';
120+
import { createRoot } from 'react-dom/client';
121+
import App from './App.tsx';
122+
import './index.css';
123+
124+
createRoot(document.getElementById('root') as HTMLElement).render(
125+
<StrictMode>
126+
<ThemeProvider>
127+
<App />
128+
</ThemeProvider>
129+
</StrictMode>
130+
);
131+
```
132+
133+
- `Assets.js'`: This includes assets like translation files (CLDR), theming, etc. of the required packages.
134+
- `ThemeProvider`: Inter alia, this provider makes your app react to theme and language changes and injects the CSS of __used__ components.
135+
- `StrictMode`: The React `StrictMode` component enables addition development behaviors and warnings for the component tree inside. It is not required, but using it helps find common pitfalls and bugs in development. You can find out more about it [here](https://react.dev/reference/react/StrictMode).
136+
- `createRoot`: This function lets you create the React root to display React components inside a browser DOM node ([React docs](https://react.dev/reference/react-dom/client/createRoot)). You will usually add this DOM node inside the `index.html` file.
137+
- `App`: A React component.
138+
- `index.css`: Global CSS file.
139139

140140

141141
### Launch the app to start developing

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

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
7272

7373
2. Explicitly import `@ui5/webcomponents-react-base` package
7474

75-
`@ui5/webcomponents-react-base` is already installed by `@ui5/webcomponents-react`, but as we want to import the `ThemingParameters` in the following step, it's recommended adding the package to the dependencies as well.
75+
`@ui5/webcomponents-react-base` is already installed by `@ui5/webcomponents-react`, but as we want to import the `ThemingParameters` in the following step, it's recommended adding the package to the dependencies as well.
7676

77-
```shell
78-
npm install @ui5/webcomponents-react-base
79-
```
77+
```shell
78+
npm install @ui5/webcomponents-react-base
79+
```
8080

8181
3. Add inline-styles to apply `ThemingParameters` to the `<span>`
8282

@@ -151,38 +151,38 @@ One example is applying a responsive content padding to the content of the dashb
151151

152152
1. Install Common CSS
153153

154-
```shell
155-
npm i @sap-ui/common-css
156-
```
154+
```shell
155+
npm i @sap-ui/common-css
156+
```
157157

158158
2. Import the required classes in `Home.tsx`
159159

160-
```ts
161-
import '@sap-ui/common-css/dist/sap-content-paddings.css';
162-
import '@sap-ui/common-css/dist/sap-container-type.css';
163-
```
160+
```ts
161+
import '@sap-ui/common-css/dist/sap-content-paddings.css';
162+
import '@sap-ui/common-css/dist/sap-container-type.css';
163+
```
164164
3. Apply the classes on elements
165165

166-
Add `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class:
166+
Add `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class:
167167

168-
```tsx
169-
<div className="sap-container-type-inline-size">
170-
<FlexBox
171-
justifyContent={FlexBoxJustifyContent.Center}
172-
wrap={FlexBoxWrap.Wrap}
173-
...
174-
```
175-
176-
Remove `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class:
177-
178-
```tsx
179-
<FlexBox
180-
justifyContent={FlexBoxJustifyContent.Center}
181-
wrap={FlexBoxWrap.Wrap}
182-
className="sap-content-paddings-container"
183-
>
184-
```
185-
Now, the padding of the `FlexBox` is adjusted automatically according to the viewport size.
168+
```tsx
169+
<div className="sap-container-type-inline-size">
170+
<FlexBox
171+
justifyContent={FlexBoxJustifyContent.Center}
172+
wrap={FlexBoxWrap.Wrap}
173+
...
174+
```
175+
176+
Remove `style` from the outer `FlexBox` and apply the `sap-content-paddings-container` class:
177+
178+
```tsx
179+
<FlexBox
180+
justifyContent={FlexBoxJustifyContent.Center}
181+
wrap={FlexBoxWrap.Wrap}
182+
className="sap-content-paddings-container"
183+
>
184+
```
185+
Now, the padding of the `FlexBox` is adjusted automatically according to the viewport size.
186186

187187
### Conclusion
188188

0 commit comments

Comments
 (0)