Skip to content

Commit 755bcc0

Browse files
Lukas742Lukas742
authored
docs: enhance story of select components (#799)
[ci skip]
1 parent 24f98d6 commit 755bcc0

File tree

7 files changed

+221
-118
lines changed

7 files changed

+221
-118
lines changed

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { ComboBox } from '@ui5/webcomponents-react/lib/ComboBox';
3+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
4+
import '@ui5/webcomponents-icons/dist/icons/employee.js';
5+
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
6+
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
7+
import { Label } from '@ui5/webcomponents-react/lib/Label';
8+
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
9+
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
10+
import { ComboBoxItem } from '@ui5/webcomponents-react/lib/ComboBoxItem';
11+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
12+
import { DocsHeader } from '@shared/stories/DocsHeader';
13+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
14+
15+
<Meta
16+
title="UI5 Web Components / ComboBox"
17+
component={ComboBox}
18+
subcomponents={{ ComboBoxItem }}
19+
argTypes={{
20+
...createSelectArgTypes({ valueState: ValueState }),
21+
...DocsCommonProps,
22+
children: { control: { disable: true } },
23+
icon: { control: { disable: true } },
24+
valueStateMessage: { control: { disable: true } }
25+
}}
26+
args={{
27+
valueState: ValueState.None,
28+
icon: <Icon name="employee" />,
29+
style: {},
30+
className: '',
31+
tooltip: '',
32+
slot: '',
33+
ref: null
34+
}}
35+
/>
36+
37+
<DocsHeader />
38+
39+
<Canvas>
40+
<Story name="Default">
41+
{(args) => {
42+
return (
43+
<ComboBox {...args}>
44+
<ComboBoxItem text="ComboBox Entry 1" />
45+
<ComboBoxItem text="ComboBox Entry 2" />
46+
<ComboBoxItem text="ComboBox Entry 3" />
47+
<ComboBoxItem text="ComboBox Entry 4" />
48+
<ComboBoxItem text="ComboBox Entry 5" />
49+
</ComboBox>
50+
);
51+
}}
52+
</Story>
53+
</Canvas>
54+
55+
<ArgsTable story="." />
56+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
57+
<h3>Structure</h3>
58+
The <code>ComboBox</code> consists of the following elements:
59+
<ul>
60+
<li>
61+
Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter
62+
their own value.
63+
</li>
64+
<li>Drop-down arrow - expands\collapses the option list.</li>
65+
<li>Option list - the list of available options.</li>
66+
</ul>
67+
</div>
68+
69+
<br />
70+
<br />
71+
72+
# Stories
73+
74+
<br />
75+
76+
## Filter types
77+
78+
All available filter types controlled by the `filter` prop.
79+
80+
<Canvas>
81+
<Story name="Filter types">
82+
{() => {
83+
return (
84+
<FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween}>
85+
<FlexBox direction={FlexBoxDirection.Column}>
86+
<Label>StartsWithPerTerm (Default)</Label>
87+
<ComboBox filter="StartsWithPerTerm">
88+
<ComboBoxItem text="Austria" />
89+
<ComboBoxItem text="United Arab Emirates" />
90+
<ComboBoxItem text="Czech Republic" />
91+
<ComboBoxItem text="United Kingdom" />
92+
<ComboBoxItem text="China" />
93+
<ComboBoxItem text="Ukraine" />
94+
<ComboBoxItem text="Australia" />
95+
<ComboBoxItem text="Russia" />
96+
</ComboBox>
97+
</FlexBox>
98+
<FlexBox direction={FlexBoxDirection.Column}>
99+
<Label>StartsWith</Label>
100+
<ComboBox filter="StartsWith">
101+
<ComboBoxItem text="Austria" />
102+
<ComboBoxItem text="United Arab Emirates" />
103+
<ComboBoxItem text="Czech Republic" />
104+
<ComboBoxItem text="United Kingdom" />
105+
<ComboBoxItem text="China" />
106+
<ComboBoxItem text="Ukraine" />
107+
<ComboBoxItem text="Australia" />
108+
<ComboBoxItem text="Russia" />
109+
</ComboBox>
110+
</FlexBox>
111+
<FlexBox direction={FlexBoxDirection.Column}>
112+
<Label>Contains</Label>
113+
<ComboBox filter="Contains">
114+
<ComboBoxItem text="Austria" />
115+
<ComboBoxItem text="United Arab Emirates" />
116+
<ComboBoxItem text="Czech Republic" />
117+
<ComboBoxItem text="United Kingdom" />
118+
<ComboBoxItem text="China" />
119+
<ComboBoxItem text="Ukraine" />
120+
<ComboBoxItem text="Australia" />
121+
<ComboBoxItem text="Russia" />
122+
</ComboBox>
123+
</FlexBox>
124+
</FlexBox>
125+
);
126+
}}
127+
</Story>
128+
</Canvas>

‎packages/main/src/webComponents/ComboBox/ComboBox.stories.tsx

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎packages/main/src/webComponents/ComboBox/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export interface ComboBoxPropTypes extends Omit<WithWebComponentPropTypes, 'onCh
4343
*/
4444
valueState?: ValueState;
4545
/**
46-
* Defines the <code>ComboBox</code> items. <br><br> Example: <br> &lt;ComboBox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/ComboBox> <br> <br>
46+
* Defines the <code>ComboBox</code> items. <br><br> Example: <br> &lt;ComboBox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ComboBoxItem text="Item #1" /><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ComboBoxItem text="Item #2" /><br> &lt;/ComboBox> <br> <br>
4747
*/
4848
children?: ReactNode | ReactNode[];
4949
/**

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
3+
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
4+
import '@ui5/webcomponents-icons/dist/icons/employee.js';
5+
import { MultiComboBoxItem } from '@ui5/webcomponents-react/lib/MultiComboBoxItem';
6+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
7+
import { DocsHeader } from '@shared/stories/DocsHeader';
8+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
9+
10+
<Meta
11+
title="UI5 Web Components / MultiComboBox"
12+
component={MultiComboBox}
13+
subcomponents={{ MultiComboBoxItem }}
14+
argTypes={{
15+
...createSelectArgTypes({ valueState: ValueState }),
16+
...DocsCommonProps,
17+
children: { control: { disable: true } },
18+
icon: { control: { disable: true } },
19+
valueStateMessage: { control: { disable: true } }
20+
}}
21+
args={{
22+
valueState: ValueState.None,
23+
style: {},
24+
className: '',
25+
tooltip: '',
26+
slot: '',
27+
ref: null
28+
}}
29+
/>
30+
31+
<DocsHeader />
32+
33+
<Canvas>
34+
<Story name="Default">
35+
{(args) => {
36+
return (
37+
<MultiComboBox {...args}>
38+
<MultiComboBoxItem text="Item 1" />
39+
<MultiComboBoxItem text="Item 2" />
40+
<MultiComboBoxItem text="Item 3" />
41+
<MultiComboBoxItem text="Item 4" />
42+
<MultiComboBoxItem text="Item 5" />
43+
</MultiComboBox>
44+
);
45+
}}
46+
</Story>
47+
</Canvas>
48+
49+
<ArgsTable story="." />
50+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
51+
<h3>Structure</h3>
52+
The <code>MultiComboBox</code> consists of the following elements:
53+
<ul>
54+
<li>Tokenizer - a list of tokens with selected options.</li>
55+
<li>Input field - displays the selected option/s as token/s. Users can type to filter the list.</li>
56+
<li>Drop-down arrow - expands\collapses the option list.</li>
57+
<li>Option list - the list of available options.</li>
58+
</ul>
59+
</div>

‎packages/main/src/webComponents/MultiComboBox/MultiComboBox.stories.tsx

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎packages/main/src/webComponents/MultiComboBox/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export interface MultiComboBoxPropTypes extends Omit<WithWebComponentPropTypes,
3737
*/
3838
valueState?: ValueState;
3939
/**
40-
* Defines the <code>MultiComboBox</code> items. <br><br> Example: <br> &lt;MultiComboBox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #1&lt;/ui5-li><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-li>Item #2&lt;/ui5-li><br> &lt;/MultiComboBox> <br> <br>
40+
* Defines the <code>MultiComboBox</code> items. <br><br> Example: <br> &lt;MultiComboBox><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;MultiComboBoxItem text="Item #1" /><br> &nbsp;&nbsp;&nbsp;&nbsp;&lt;MultiComboBoxItem text="Item #2" /><br> &lt;/MultiComboBox> <br> <br>
4141
*/
4242
children?: ReactNode | ReactNode[];
4343
/**

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

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2-
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
3-
import { DocsHeader } from '@shared/stories/DocsHeader';
4-
import { Option } from '@ui5/webcomponents-react/lib/Option';
52
import { Select } from '@ui5/webcomponents-react/lib/Select';
63
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
4+
import { Option } from '@ui5/webcomponents-react/lib/Option';
5+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
6+
import { DocsHeader } from '@shared/stories/DocsHeader';
77
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
88

99
<Meta
@@ -13,32 +13,48 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
1313
argTypes={{
1414
...createSelectArgTypes({ valueState: ValueState }),
1515
...DocsCommonProps,
16-
children: {
17-
type: null
18-
}
16+
children: { control: { disable: true } },
17+
valueStateMessage: { control: { disable: true } }
1918
}}
2019
args={{
21-
valueState: ValueState.None
20+
valueState: ValueState.None,
21+
style: {},
22+
className: '',
23+
tooltip: '',
24+
slot: '',
25+
ref: null
2226
}}
2327
/>
2428

2529
<DocsHeader />
2630

2731
<Canvas>
2832
<Story name="Default">
29-
{(props) => (
30-
<Select disabled={props.disabled} name={props.name} valueState={props.valueState} onChange={props.onChange}>
31-
<Option>Option 1</Option>
32-
<Option>Option 2</Option>
33-
<Option>Option 3</Option>
34-
<Option>Option 4</Option>
35-
<Option>Option 5</Option>
36-
</Select>
37-
)}
33+
{(args) => {
34+
return (
35+
<Select {...args}>
36+
<Option>Option 1</Option>
37+
<Option>Option 2</Option>
38+
<Option>Option 3</Option>
39+
<Option>Option 4</Option>
40+
<Option>Option 5</Option>
41+
</Select>
42+
);
43+
}}
3844
</Story>
3945
</Canvas>
4046

4147
<ArgsTable story="." />
48+
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
49+
<h3>Keyboard Handling</h3>
50+
The <code>Select</code> provides advanced keyboard handling. If the <code>Select</code> is focused, you can open or close
51+
the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys. Once the drop-down is opened,
52+
you can use the <code>UP</code> and <code>DOWN</code> arrow keys to navigate through the available options and select one
53+
by pressing the <code>Space</code> or <code>Enter</code> keys. <br />
54+
</div>
55+
56+
<br />
57+
<br />
4258

4359
## Recipes
4460

0 commit comments

Comments
 (0)