Skip to content

docs: enhance story of select components #799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 22, 2020
Merged

docs: enhance story of select components #799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5764527
docs(ComboBox): enhance story
Lukas742 Oct 21, 2020
081128a
docs(MultiComboBox): enhance story
Lukas742 Oct 21, 2020
a41e7fe
remove unused imports
Lukas742 Oct 21, 2020
0ac9dc1
docs(Select): enhance story
Lukas742 Oct 21, 2020
4358909
Merge branch 'master' into docs/select-components
Lukas742 Oct 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions packages/main/src/webComponents/ComboBox/ComboBox.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { ComboBox } from '@ui5/webcomponents-react/lib/ComboBox';
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
import '@ui5/webcomponents-icons/dist/icons/employee.js';
import { Icon } from '@ui5/webcomponents-react/lib/Icon';
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
import { Label } from '@ui5/webcomponents-react/lib/Label';
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
import { ComboBoxItem } from '@ui5/webcomponents-react/lib/ComboBoxItem';
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
import { DocsHeader } from '@shared/stories/DocsHeader';
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';

<Meta
title="UI5 Web Components / ComboBox"
component={ComboBox}
subcomponents={{ ComboBoxItem }}
argTypes={{
...createSelectArgTypes({ valueState: ValueState }),
...DocsCommonProps,
children: { control: { disable: true } },
icon: { control: { disable: true } },
valueStateMessage: { control: { disable: true } }
}}
args={{
valueState: ValueState.None,
icon: <Icon name="employee" />,
style: {},
className: '',
tooltip: '',
slot: '',
ref: null
}}
/>

<DocsHeader />

<Canvas>
<Story name="Default">
{(args) => {
return (
<ComboBox {...args}>
<ComboBoxItem text="ComboBox Entry 1" />
<ComboBoxItem text="ComboBox Entry 2" />
<ComboBoxItem text="ComboBox Entry 3" />
<ComboBoxItem text="ComboBox Entry 4" />
<ComboBoxItem text="ComboBox Entry 5" />
</ComboBox>
);
}}
</Story>
</Canvas>

<ArgsTable story="." />
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
<h3>Structure</h3>
The <code>ComboBox</code> consists of the following elements:
<ul>
<li>
Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter
their own value.
</li>
<li>Drop-down arrow - expands\collapses the option list.</li>
<li>Option list - the list of available options.</li>
</ul>
</div>

<br />
<br />

# Stories

<br />

## Filter types

All available filter types controlled by the `filter` prop.

<Canvas>
<Story name="Filter types">
{() => {
return (
<FlexBox justifyContent={FlexBoxJustifyContent.SpaceBetween}>
<FlexBox direction={FlexBoxDirection.Column}>
<Label>StartsWithPerTerm (Default)</Label>
<ComboBox filter="StartsWithPerTerm">
<ComboBoxItem text="Austria" />
<ComboBoxItem text="United Arab Emirates" />
<ComboBoxItem text="Czech Republic" />
<ComboBoxItem text="United Kingdom" />
<ComboBoxItem text="China" />
<ComboBoxItem text="Ukraine" />
<ComboBoxItem text="Australia" />
<ComboBoxItem text="Russia" />
</ComboBox>
</FlexBox>
<FlexBox direction={FlexBoxDirection.Column}>
<Label>StartsWith</Label>
<ComboBox filter="StartsWith">
<ComboBoxItem text="Austria" />
<ComboBoxItem text="United Arab Emirates" />
<ComboBoxItem text="Czech Republic" />
<ComboBoxItem text="United Kingdom" />
<ComboBoxItem text="China" />
<ComboBoxItem text="Ukraine" />
<ComboBoxItem text="Australia" />
<ComboBoxItem text="Russia" />
</ComboBox>
</FlexBox>
<FlexBox direction={FlexBoxDirection.Column}>
<Label>Contains</Label>
<ComboBox filter="Contains">
<ComboBoxItem text="Austria" />
<ComboBoxItem text="United Arab Emirates" />
<ComboBoxItem text="Czech Republic" />
<ComboBoxItem text="United Kingdom" />
<ComboBoxItem text="China" />
<ComboBoxItem text="Ukraine" />
<ComboBoxItem text="Australia" />
<ComboBoxItem text="Russia" />
</ComboBox>
</FlexBox>
</FlexBox>
);
}}
</Story>
</Canvas>
50 changes: 0 additions & 50 deletions packages/main/src/webComponents/ComboBox/ComboBox.stories.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/main/src/webComponents/ComboBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface ComboBoxPropTypes extends Omit<WithWebComponentPropTypes, 'onCh
*/
valueState?: ValueState;
/**
* 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>
* 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>
*/
children?: ReactNode | ReactNode[];
/**
Expand Down
59 changes: 59 additions & 0 deletions packages/main/src/webComponents/MultiComboBox/MultiComboBox.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
import '@ui5/webcomponents-icons/dist/icons/employee.js';
import { MultiComboBoxItem } from '@ui5/webcomponents-react/lib/MultiComboBoxItem';
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
import { DocsHeader } from '@shared/stories/DocsHeader';
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';

<Meta
title="UI5 Web Components / MultiComboBox"
component={MultiComboBox}
subcomponents={{ MultiComboBoxItem }}
argTypes={{
...createSelectArgTypes({ valueState: ValueState }),
...DocsCommonProps,
children: { control: { disable: true } },
icon: { control: { disable: true } },
valueStateMessage: { control: { disable: true } }
}}
args={{
valueState: ValueState.None,
style: {},
className: '',
tooltip: '',
slot: '',
ref: null
}}
/>

<DocsHeader />

<Canvas>
<Story name="Default">
{(args) => {
return (
<MultiComboBox {...args}>
<MultiComboBoxItem text="Item 1" />
<MultiComboBoxItem text="Item 2" />
<MultiComboBoxItem text="Item 3" />
<MultiComboBoxItem text="Item 4" />
<MultiComboBoxItem text="Item 5" />
</MultiComboBox>
);
}}
</Story>
</Canvas>

<ArgsTable story="." />
<div style={{ fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)' }}>
<h3>Structure</h3>
The <code>MultiComboBox</code> consists of the following elements:
<ul>
<li>Tokenizer - a list of tokens with selected options.</li>
<li>Input field - displays the selected option/s as token/s. Users can type to filter the list.</li>
<li>Drop-down arrow - expands\collapses the option list.</li>
<li>Option list - the list of available options.</li>
</ul>
</div>
50 changes: 0 additions & 50 deletions packages/main/src/webComponents/MultiComboBox/MultiComboBox.stories.tsx
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion packages/main/src/webComponents/MultiComboBox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface MultiComboBoxPropTypes extends Omit<WithWebComponentPropTypes,
*/
valueState?: ValueState;
/**
* 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>
* 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>
*/
children?: ReactNode | ReactNode[];
/**
Expand Down
48 changes: 32 additions & 16 deletions packages/main/src/webComponents/Select/Select.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
import { DocsHeader } from '@shared/stories/DocsHeader';
import { Option } from '@ui5/webcomponents-react/lib/Option';
import { Select } from '@ui5/webcomponents-react/lib/Select';
import { ValueState } from '@ui5/webcomponents-react/lib/ValueState';
import { Option } from '@ui5/webcomponents-react/lib/Option';
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
import { DocsHeader } from '@shared/stories/DocsHeader';
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';

<Meta
Expand All @@ -13,32 +13,48 @@ import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
argTypes={{
...createSelectArgTypes({ valueState: ValueState }),
...DocsCommonProps,
children: {
type: null
}
children: { control: { disable: true } },
valueStateMessage: { control: { disable: true } }
}}
args={{
valueState: ValueState.None
valueState: ValueState.None,
style: {},
className: '',
tooltip: '',
slot: '',
ref: null
}}
/>

<DocsHeader />

<Canvas>
<Story name="Default">
{(props) => (
<Select disabled={props.disabled} name={props.name} valueState={props.valueState} onChange={props.onChange}>
<Option>Option 1</Option>
<Option>Option 2</Option>
<Option>Option 3</Option>
<Option>Option 4</Option>
<Option>Option 5</Option>
</Select>
)}
{(args) => {
return (
<Select {...args}>
<Option>Option 1</Option>
<Option>Option 2</Option>
<Option>Option 3</Option>
<Option>Option 4</Option>
<Option>Option 5</Option>
</Select>
);
}}
</Story>
</Canvas>

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

<br />
<br />

## Recipes

Expand Down