Skip to content

Commit 94965de

Browse files
Lukas742Lukas742
authored
docs(FilterBar): add JSDoc comments, enhance story (#936)
1 parent 7087886 commit 94965de

File tree

4 files changed

+345
-135
lines changed

4 files changed

+345
-135
lines changed

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

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
2+
import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';
3+
import { FilterGroupItem } from '@ui5/webcomponents-react/lib/FilterGroupItem';
4+
import { Input } from '@ui5/webcomponents-react/lib/Input';
5+
import { MultiComboBox } from '@ui5/webcomponents-react/lib/MultiComboBox';
6+
import { MultiComboBoxItem } from '@ui5/webcomponents-react/lib/MultiComboBoxItem';
7+
import { Option } from '@ui5/webcomponents-react/lib/Option';
8+
import { Select } from '@ui5/webcomponents-react/lib/Select';
9+
import { Switch } from '@ui5/webcomponents-react/lib/Switch';
10+
import { DatePicker } from '@ui5/webcomponents-react/lib/DatePicker';
11+
import { VariantManagement } from '@ui5/webcomponents-react/lib/VariantManagement';
12+
import '@ui5/webcomponents-icons/dist/icons/nav-back.js';
13+
import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
14+
import { DocsHeader } from '@shared/stories/DocsHeader';
15+
import { DocsCommonProps } from '@shared/stories/DocsCommonProps';
16+
17+
<Meta
18+
title="Components / FilterBar"
19+
component={FilterBar}
20+
subcomponents={{ FilterGroupItem }}
21+
argTypes={{
22+
activeFiltersCount: { control: 'number' },
23+
search: { control: { disable: true } },
24+
variants: { control: { disable: true } },
25+
children: { control: { disable: true } },
26+
filterContainerWidth: { control: 'text' },
27+
...DocsCommonProps
28+
}}
29+
args={{
30+
search: <Input placeholder={'Search'} />,
31+
variants: (
32+
<VariantManagement
33+
selectedKey="2"
34+
variantItems={[
35+
{ label: 'Variant 1', key: '1' },
36+
{ label: 'Variant 2', key: '2' }
37+
]}
38+
/>
39+
),
40+
filterContainerWidth: '13.125rem',
41+
showFilterConfiguration: true,
42+
style: {},
43+
className: '',
44+
tooltip: '',
45+
slot: '',
46+
ref: null
47+
}}
48+
/>
49+
50+
<DocsHeader />
51+
52+
<Canvas>
53+
<Story name="Default">
54+
{(args) => {
55+
return (
56+
<FilterBar {...args}>
57+
<FilterGroupItem label="Input">
58+
<Input placeholder="Placeholder" />
59+
</FilterGroupItem>
60+
<FilterGroupItem label="Switch">
61+
<Switch />
62+
</FilterGroupItem>
63+
<FilterGroupItem label="SELECT w/ initial selected">
64+
<Select>
65+
<Option>Option 1</Option>
66+
<Option selected>Option 2</Option>
67+
<Option>Option 3</Option>
68+
<Option>Option 4</Option>
69+
</Select>
70+
</FilterGroupItem>
71+
<FilterGroupItem label="SELECT w/o initial selected">
72+
<Select>
73+
<Option data-key="Test 1" selected icon="add">
74+
Test 1
75+
</Option>
76+
<Option data-key="Test 2" icon="add">
77+
Test 2
78+
</Option>
79+
<Option data-key="Test 3" icon="add">
80+
Test 3
81+
</Option>
82+
<Option data-key="Test 4" icon="add">
83+
Test 4
84+
</Option>
85+
<Option data-key="Test 5" icon="add">
86+
Test 5
87+
</Option>
88+
</Select>
89+
</FilterGroupItem>
90+
<FilterGroupItem label="MultBox w/ initial selected" groupName="Group 1">
91+
<MultiComboBox>
92+
<MultiComboBoxItem text="MultiComboBoxItem 1" />
93+
<MultiComboBoxItem selected text="MultiComboBoxItem 2" />
94+
<MultiComboBoxItem text="MultiComboBoxItem 3" />
95+
<MultiComboBoxItem selected text="MultiComboBoxItem 4" />
96+
</MultiComboBox>
97+
</FilterGroupItem>
98+
<FilterGroupItem label="MultBox w/o initial selected" groupName="Group 2">
99+
<MultiComboBox>
100+
<MultiComboBoxItem text="MultiComboBoxItem 1" />
101+
<MultiComboBoxItem text="MultiComboBoxItem 2" />
102+
<MultiComboBoxItem text="MultiComboBoxItem 3" />
103+
<MultiComboBoxItem text="MultiComboBoxItem 4" />
104+
</MultiComboBox>
105+
</FilterGroupItem>
106+
<FilterGroupItem label="Date Picker" groupName="Group 2">
107+
<DatePicker />
108+
</FilterGroupItem>
109+
</FilterBar>
110+
);
111+
}}
112+
</Story>
113+
</Canvas>
114+
115+
<ArgsTable story="Default" />
116+
117+
<br />
118+
119+
# Stories
120+
121+
<br />
122+
123+
## FilterBar with customizable FilterGroupItem
124+
125+
<Canvas>
126+
<Story
127+
name="with customizable FilterGroupItem"
128+
argTypes={{
129+
children: {
130+
description: `Content of the <code>FilterGroupItems</code>.<br />__Note:__ Although this prop accepts all HTML Elements, it is strongly recommended that you only use form elements like \`Input\`, \`Select\` or \`Switch\` in order to preserve the intended design.`
131+
},
132+
label: {
133+
description: `Defines the label of the \`FilterGroupItem\`.<br />__Note:__ This label is used for the search in the filter configuration dialog.`
134+
},
135+
groupName: {
136+
description: `Defines the group name of the filter.<br />__Note:__ If no \`groupName\` is set, the name defaults to "Basic".`
137+
},
138+
labelTooltip: {
139+
description: `Defines the tooltip of the label.<br />__Note:__ If no \`labelTooltip\` is set, it uses the \`label\` text as tooltip.`
140+
},
141+
required: {
142+
description: `Defines whether the filter is required.<br />__Note:__ Required filters cannot be removed from the \`FilterBar\`.`
143+
},
144+
visible: { description: `Defines whether the filter is visible.` },
145+
visibleInFilterBar: {
146+
description: `Defines whether the filter is visible in the \`FilterBar\` or only in the filter configuration dialog.`
147+
},
148+
useToolbar: { table: { disable: true } },
149+
loading: {
150+
description: `Defines whether a loading indicator should be shown in the \`FilterGroupItem\`.`
151+
},
152+
filterBarExpanded: { table: { disable: true } },
153+
considerGroupName: {
154+
description: `Defines whether the \`groupName\` of the \`FilterGroupItems\` is displayed in the filter configuration dialog.`
155+
},
156+
activeFiltersCount: { table: { disable: true } },
157+
filterContainerWidth: { table: { disable: true } },
158+
showClearOnFB: { table: { disable: true } },
159+
showGoOnFB: { table: { disable: true } },
160+
showGo: { table: { disable: true } },
161+
showFilterConfiguration: { table: { disable: true } },
162+
showRestoreOnFB: { table: { disable: true } },
163+
showClearButton: { table: { disable: true } },
164+
showRestoreButton: { table: { disable: true } },
165+
showSearchOnFiltersDialog: { table: { disable: true } },
166+
search: { table: { disable: true } },
167+
variants: { table: { disable: true } },
168+
onToggleFilters: { table: { disable: true } },
169+
onFiltersDialogOpen: { table: { disable: true } },
170+
onFiltersDialogCancel: { table: { disable: true } },
171+
onFiltersDialogClose: { table: { disable: true } },
172+
onFiltersDialogSave: { table: { disable: true } },
173+
onFiltersDialogClear: { table: { disable: true } },
174+
onClear: { table: { disable: true } },
175+
onFiltersDialogSelectionChange: { table: { disable: true } },
176+
onFiltersDialogSearch: { table: { disable: true } },
177+
onGo: { table: { disable: true } },
178+
onRestore: { table: { disable: true } }
179+
}}
180+
args={{
181+
label: 'FilterGroupItem',
182+
groupName: 'Customizable',
183+
labelTooltip: 'custom label tooltip',
184+
loading: false,
185+
required: false,
186+
visible: true,
187+
visibleInFilterBar: true,
188+
considerGroupName: true
189+
}}
190+
>
191+
{(args) => {
192+
return (
193+
<FilterBar showFilterConfiguration considerGroupName showSearchOnFiltersDialog>
194+
<FilterGroupItem
195+
label={args.label}
196+
groupName={args.groupName}
197+
labelTooltip={args.labelTooltip}
198+
loading={args.loading}
199+
required={args.required}
200+
visible={args.visible}
201+
visibleInFilterBar={args.visibleInFilterBar}
202+
considerGroupName={args.considerGroupName}
203+
>
204+
<Input placeholder="Placeholder" />
205+
</FilterGroupItem>
206+
<FilterGroupItem label="Filter 1" groupName="Not customizable">
207+
<Input placeholder="Placeholder" />
208+
</FilterGroupItem>
209+
<FilterGroupItem label="Filter 2" groupName="Not customizable">
210+
<Input placeholder="Placeholder" />
211+
</FilterGroupItem>
212+
</FilterBar>
213+
);
214+
}}
215+
</Story>
216+
</Canvas>
217+
218+
<ArgsTable story="with customizable FilterGroupItem" />

‎packages/main/src/components/FilterBar/demo.stories.tsx

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

0 commit comments

Comments
 (0)