Skip to content

Commit 215b0db

Browse files
dulcehcdulcehc
committed
Merge branch 'jsdoc-page' of github.com:dulcehc/ui5-webcomponents-react into jsdoc-page
2 parents 769f497 + af3b4c4 commit 215b0db

39 files changed

+329
-590
lines changed

‎.github/workflows/stale.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ jobs:
1010
runs-on: ubuntu-latest
1111

1212
steps:
13-
- uses: actions/stale@v1
13+
- uses: actions/stale@v3
1414
with:
1515
repo-token: ${{ secrets.GITHUB_TOKEN }}
1616
# The number of days old an issue can be before marking it stale. Set to -1 to never mark issues or pull requests as stale automatically.

‎packages/main/scripts/create-web-components-wrapper.js

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -518,15 +518,6 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
518518
args.push(`tooltip: ''`);
519519
args.push(`slot: ''`);
520520
args.push(`ref: null`);
521-
customArgTypes.push(`slot: {control: {disable:true}}`);
522-
customArgTypes.push(`ref: {control: {disable:true}}`);
523-
customArgTypes.push(
524-
`style: {type: CSSProperties, description: "Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component." }`
525-
);
526-
customArgTypes.push(
527-
`className: {type: 'string', description: "CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component."}`
528-
);
529-
customArgTypes.push(`tooltip: {type: 'string', description: "A tooltip which will be shown on hover"}`);
530521
enumImports.push(`import { CSSProperties, Ref } from 'react';`);
531522

532523
let formattedDescription = description.replace(/<br>/g, `<br/>`).replace(/\s\s+/g, ' ');
@@ -559,13 +550,16 @@ const createWebComponentDemo = (componentSpec, componentProps, description) => {
559550
${additionalComponentImports.join('\n')}
560551
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
561552
import { DocsHeader } from '@shared/stories/DocsHeader';
553+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
562554
563555
<Meta
564556
title="UI5 Web Components / ${componentName}"
565557
component={${componentName}}
566558
${additionalComponentDocs.length > 0 ? `subcomponents={{ ${additionalComponentDocs.join(', ')} }}` : ''}
567559
argTypes={{
568-
...createSelectArgTypes({${selectArgTypes.join(', ')}}),${customArgTypes.join(',\n')}
560+
...createSelectArgTypes({${selectArgTypes.join(', ')}}),
561+
...DocsCommonProps,
562+
${customArgTypes.join(',\n')}
569563
}}
570564
args={{
571565
${args.join(',\n')}

‎packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.mdx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AnalyticalCardHeader } from '@ui5/webcomponents-react/lib/AnalyticalCar
77
import { DeviationIndicator } from '@ui5/webcomponents-react/lib/DeviationIndicator';
88
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
99
import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
10+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1011

1112
<Meta
1213
title="Components / AnalyticalCard"
@@ -15,14 +16,12 @@ import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';
1516
subcomponents: { AnalyticalCardHeader }
1617
}}
1718
argTypes={{
19+
...DocsCommonProps,
1820
header: {
1921
type: null
2022
},
2123
children: {
2224
type: null
23-
},
24-
ref: {
25-
type: null
2625
}
2726
}}
2827
/>

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
1414
import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
1515
import { DefaultLoadingComponent } from './defaults/LoadingComponent';
1616
import { DefaultNoDataComponent } from './defaults/NoDataComponent';
17+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1718

1819
<Meta
1920
title="Components / AnalyticalTable"
@@ -106,7 +107,7 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
106107
overscanCountHorizontal: 5
107108
}}
108109
argTypes={{
109-
ref: { type: null },
110+
...DocsCommonProps,
110111
data: { type: null },
111112
columns: { type: null },
112113
reactTableOptions: { type: null },

‎packages/main/src/components/Toolbar/Toolbar.stories.mdx

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,19 @@ import { ToolbarDesign } from '@ui5/webcomponents-react/lib/ToolbarDesign';
1010
import { ToolbarSeparator } from '@ui5/webcomponents-react/lib/ToolbarSeparator';
1111
import { ToolbarStyle } from '@ui5/webcomponents-react/lib/ToolbarStyle';
1212
import '@ui5/webcomponents-icons/dist/icons/employee.js';
13-
import { CSSProperties } from 'react';
1413
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1514
import { DocsHeader } from '@shared/stories/DocsHeader';
1615
import '@ui5/webcomponents-icons/dist/icons/settings.js';
1716
import '@ui5/webcomponents-icons/dist/icons/download.js';
17+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1818

1919
<Meta
2020
title="Components / Toolbar"
2121
component={Toolbar}
2222
argTypes={{
2323
...createSelectArgTypes({ toolbarStyle: ToolbarStyle, design: ToolbarDesign }),
2424
children: { control: { disable: true } },
25-
slot: { control: { disable: true } },
26-
ref: { control: { disable: true } },
27-
style: {
28-
type: CSSProperties,
29-
description:
30-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
31-
},
32-
className: {
33-
type: 'string',
34-
description:
35-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
36-
},
37-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
25+
...DocsCommonProps
3826
}}
3927
args={{
4028
design: ToolbarDesign.Auto,
@@ -110,11 +98,7 @@ If the horizontally available space isn't enough to fit all items in it, an over
11098
children: { table: { disable: true } },
11199
toolbarStyle: { table: { disable: true } },
112100
design: { table: { disable: true } },
113-
slot: { table: { disable: true } },
114-
ref: { table: { disable: true } },
115-
style: { table: { disable: true } },
116-
className: { table: { disable: true } },
117-
tooltip: { table: { disable: true } },
101+
...DocsCommonProps,
118102
active: { table: { disable: true } },
119103
onToolbarClick: { table: { disable: true } }
120104
}}

‎packages/main/src/webComponents/Avatar/Avatar.stories.mdx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
77
import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
88
import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
99
import { CSSProperties, Ref } from 'react';
10-
1110
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1211
import { DocsHeader } from '@shared/stories/DocsHeader';
12+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1313

1414
<Meta
1515
title="UI5 Web Components / Avatar"
@@ -21,19 +21,7 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
2121
shape: AvatarShape,
2222
size: AvatarSize
2323
}),
24-
slot: { control: { disable: true } },
25-
ref: { control: { disable: true } },
26-
style: {
27-
type: CSSProperties,
28-
description:
29-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
30-
},
31-
className: {
32-
type: 'string',
33-
description:
34-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
35-
},
36-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
24+
...DocsCommonProps
3725
}}
3826
args={{
3927
backgroundColor: AvatarBackgroundColor.Accent6,

‎packages/main/src/webComponents/Badge/Badge.stories.mdx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { Icon } from '@ui5/webcomponents-react/lib/Icon';
55
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
66
import { FlexBoxWrap } from '@ui5/webcomponents-react/lib/FlexBoxWrap';
77
import { CSSProperties } from 'react';
8-
98
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
109
import { DocsHeader } from '@shared/stories/DocsHeader';
10+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1111

1212
<Meta
1313
title="UI5 Web Components / Badge"
@@ -16,19 +16,7 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
1616
...createSelectArgTypes({}),
1717
children: { control: 'text' },
1818
icon: { control: { disable: true } },
19-
slot: { control: { disable: true } },
20-
ref: { control: { disable: true } },
21-
style: {
22-
type: CSSProperties,
23-
description:
24-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
25-
},
26-
className: {
27-
type: 'string',
28-
description:
29-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
30-
},
31-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
19+
...DocsCommonProps
3220
}}
3321
args={{
3422
children: 'Badge Text',

‎packages/main/src/webComponents/BusyIndicator/BusyIndicator.stories.mdx

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,15 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
66
import { CSSProperties } from 'react';
77
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
88
import { DocsHeader } from '@shared/stories/DocsHeader';
9+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
910

1011
<Meta
1112
title="UI5 Web Components / BusyIndicator"
1213
component={BusyIndicator}
1314
argTypes={{
1415
...createSelectArgTypes({ size: BusyIndicatorSize }),
1516
children: { control: { disable: true } },
16-
slot: { control: { disable: true } },
17-
ref: { control: { disable: true } },
18-
style: {
19-
type: CSSProperties,
20-
description:
21-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
22-
},
23-
className: {
24-
type: 'string',
25-
description:
26-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
27-
},
28-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
17+
...DocsCommonProps
2918
}}
3019
args={{
3120
size: BusyIndicatorSize.Medium,

‎packages/main/src/webComponents/Button/Button.stories.mdx

Lines changed: 42 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,52 @@
1-
import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
2-
import {Button} from '@ui5/webcomponents-react/lib/Button';
3-
import {ButtonDesign} from '@ui5/webcomponents-react/lib/ButtonDesign';
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { Button } from '@ui5/webcomponents-react/lib/Button';
3+
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
44
import '@ui5/webcomponents-icons/dist/icons/employee.js';
5-
import {CSSProperties} from 'react';
6-
7-
import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
8-
import {DocsHeader} from '@shared/stories/DocsHeader';
5+
import { CSSProperties } from 'react';
6+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
7+
import { DocsHeader } from '@shared/stories/DocsHeader';
8+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
99

1010
<Meta
11-
title="UI5 Web Components / Button"
12-
component={Button}
13-
argTypes={{
14-
...createSelectArgTypes({design: ButtonDesign}),
15-
children: {control: 'text'},
16-
slot: {control: {disable: true}},
17-
ref: {control: {disable: true}},
18-
style: {
19-
type: CSSProperties,
20-
description:
21-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
22-
},
23-
className: {
24-
type: 'string',
25-
description:
26-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
27-
},
28-
tooltip: {type: 'string', description: 'A tooltip which will be shown on hover'}
29-
}}
30-
args={{
31-
design: ButtonDesign.Default,
32-
icon: 'employee',
33-
children: 'Button Text',
34-
style: {},
35-
className: '',
36-
tooltip: '',
37-
slot: '',
38-
ref: null
39-
}}
11+
title="UI5 Web Components / Button"
12+
component={Button}
13+
argTypes={{
14+
...createSelectArgTypes({ design: ButtonDesign }),
15+
children: { control: 'text' },
16+
...DocsCommonProps
17+
}}
18+
args={{
19+
design: ButtonDesign.Default,
20+
icon: 'employee',
21+
children: 'Button Text',
22+
style: {},
23+
className: '',
24+
tooltip: '',
25+
slot: '',
26+
ref: null
27+
}}
4028
/>
4129

42-
<DocsHeader/>
30+
<DocsHeader />
4331

4432
<Canvas>
45-
<Story name="Default">
46-
{(args) => {
47-
return <Button {...args} />;
48-
}}
49-
</Story>
33+
<Story name="Default">
34+
{(args) => {
35+
return <Button {...args} />;
36+
}}
37+
</Story>
5038
</Canvas>
5139

52-
<ArgsTable story="."/>
53-
<div style={{fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)'}}>
54-
<h3>Usage</h3>
55-
For the <code>Button</code> UI, you can define text, icon, or both. You can also specify whether the text or the
56-
icon is
57-
displayed first. <br/><br/>
58-
You can choose from a set of predefined types that offer different styling to correspond to the triggered action.
59-
<br/><br/>
60-
You can set the <code>Button</code> as enabled or disabled. An enabled <code>Button</code> can be pressed by
61-
clicking or
62-
tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over
63-
with
64-
the mouse cursor. A disabled <code>Button</code> appears inactive and cannot be pressed.
40+
<ArgsTable story="." />
41+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
42+
<h3>Usage</h3>
43+
For the <code>Button</code> UI, you can define text, icon, or both. You can also specify whether the text or the icon is
44+
displayed first. <br />
45+
<br />
46+
You can choose from a set of predefined types that offer different styling to correspond to the triggered action.
47+
<br />
48+
<br />
49+
You can set the <code>Button</code> as enabled or disabled. An enabled <code>Button</code> can be pressed by clicking
50+
or tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over
51+
with the mouse cursor. A disabled <code>Button</code> appears inactive and cannot be pressed.
6552
</div>

‎packages/main/src/webComponents/Calendar/Calendar.stories.mdx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,16 @@ import '@ui5/webcomponents-localization/dist/features/calendar/Islamic.js';
77
import '@ui5/webcomponents-localization/dist/features/calendar/Japanese.js';
88
import '@ui5/webcomponents-localization/dist/features/calendar/Persian.js';
99
import { CSSProperties } from 'react';
10-
1110
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
1211
import { DocsHeader } from '@shared/stories/DocsHeader';
12+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1313

1414
<Meta
1515
title="UI5 Web Components / Calendar"
1616
component={Calendar}
1717
argTypes={{
1818
...createSelectArgTypes({ primaryCalendarType: CalendarType }),
19-
slot: { control: { disable: true } },
20-
ref: { control: { disable: true } },
21-
style: {
22-
type: CSSProperties,
23-
description:
24-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
25-
},
26-
className: {
27-
type: 'string',
28-
description:
29-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
30-
},
31-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
19+
...DocsCommonProps
3220
}}
3321
args={{
3422
primaryCalendarType: CalendarType.Gregorian,

‎packages/main/src/webComponents/Card/Card.stories.mdx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Card } from '@ui5/webcomponents-react/lib/Card';
33
import { List } from '@ui5/webcomponents-react/lib/List';
44
import { StandardListItem } from '@ui5/webcomponents-react/lib/StandardListItem';
55
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
6-
import { CSSProperties } from 'react';
76
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
87
import { DocsHeader } from '@shared/stories/DocsHeader';
98
import '@ui5/webcomponents-icons/dist/icons/person-placeholder.js';
9+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1010

1111
<Meta
1212
title="UI5 Web Components / Card"
@@ -16,19 +16,7 @@ import '@ui5/webcomponents-icons/dist/icons/person-placeholder.js';
1616
action: { control: { disable: true } },
1717
avatar: { control: { disable: true } },
1818
children: { control: { disable: true } },
19-
slot: { control: { disable: true } },
20-
ref: { control: { disable: true } },
21-
style: {
22-
type: CSSProperties,
23-
description:
24-
'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
25-
},
26-
className: {
27-
type: 'string',
28-
description:
29-
'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
30-
},
31-
tooltip: { type: 'string', description: 'A tooltip which will be shown on hover' }
19+
...DocsCommonProps
3220
}}
3321
args={{
3422
style: { width: '300px' },

0 commit comments

Comments
 (0)