superdesk-ui-framework 3.0.1-beta.6 → 3.0.1-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/fonts/sd_icons.eot +0 -0
- package/app/fonts/sd_icons.svg +14 -7
- package/app/fonts/sd_icons.ttf +0 -0
- package/app/fonts/sd_icons.woff +0 -0
- package/app/styles/_icon-font.scss +7 -0
- package/app/styles/_sd-tag-input.scss +1 -0
- package/app/styles/components/_sd-grid-item.scss +30 -16
- package/app/styles/components/_sd-searchbar.scss +7 -0
- package/app/styles/design-tokens/_design-tokens-general.scss +1 -1
- package/app/styles/form-elements/_forms-general.scss +64 -5
- package/app/styles/form-elements/_inputs.scss +10 -0
- package/app/styles/grids/_grid-layout.scss +25 -1
- package/app/styles/layout/_basic-layout.scss +2 -2
- package/app/styles/layout/_editor.scss +4 -4
- package/app/styles/primereact/_pr-dropdown.scss +17 -1
- package/app-typescript/components/DurationInput.tsx +37 -4
- package/app-typescript/components/EmptyState.tsx +2 -1
- package/app-typescript/components/Form/FormRowNew.tsx +41 -0
- package/app-typescript/components/Form/index.tsx +1 -0
- package/app-typescript/components/Layouts/AuthoringContainer.tsx +2 -1
- package/app-typescript/components/LeftMenu.tsx +127 -122
- package/app-typescript/components/Lists/TableList.tsx +146 -142
- package/app-typescript/components/SearchBar.tsx +28 -9
- package/app-typescript/components/TimePicker.tsx +2 -0
- package/app-typescript/index.ts +1 -0
- package/dist/examples.bundle.css +273 -0
- package/dist/examples.bundle.js +28927 -28750
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/dist/react/LeftNavigations.tsx +71 -44
- package/dist/react/MultiSelect.tsx +1 -1
- package/dist/react/TableList.tsx +84 -82
- package/dist/react/TimePicker.tsx +6 -4
- package/dist/react/TreeSelect.tsx +1 -1
- package/dist/sd_icons.eot +0 -0
- package/dist/sd_icons.svg +14 -7
- package/dist/sd_icons.ttf +0 -0
- package/dist/sd_icons.woff +0 -0
- package/dist/superdesk-ui.bundle.css +976 -29
- package/dist/superdesk-ui.bundle.js +13975 -2089
- package/dist/vendor.bundle.js +23 -23
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +12 -3
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +120 -14
- package/examples/pages/react/LeftNavigations.tsx +71 -44
- package/examples/pages/react/MultiSelect.tsx +1 -1
- package/examples/pages/react/TableList.tsx +84 -82
- package/examples/pages/react/TimePicker.tsx +6 -4
- package/examples/pages/react/TreeSelect.tsx +1 -1
- package/package.json +2 -1
- package/react/components/DurationInput.d.ts +2 -1
- package/react/components/DurationInput.js +36 -4
- package/react/components/EmptyState.d.ts +1 -0
- package/react/components/EmptyState.js +1 -1
- package/react/components/Form/FormRowNew.d.ts +12 -0
- package/react/components/Form/FormRowNew.js +67 -0
- package/react/components/Form/index.d.ts +1 -0
- package/react/components/Form/index.js +3 -1
- package/react/components/Layouts/AuthoringContainer.d.ts +1 -0
- package/react/components/Layouts/AuthoringContainer.js +1 -1
- package/react/components/LeftMenu.d.ts +3 -1
- package/react/components/LeftMenu.js +8 -1
- package/react/components/Lists/TableList.d.ts +42 -0
- package/react/components/Lists/TableList.js +145 -0
- package/react/components/SearchBar.d.ts +2 -1
- package/react/components/SearchBar.js +18 -2
- package/react/components/TimePicker.d.ts +1 -0
- package/react/components/TimePicker.js +1 -1
- package/react/index.d.ts +1 -0
- package/react/index.js +4 -1
@@ -337,7 +337,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
|
|
337
337
|
</Layout.MainPanel>
|
338
338
|
|
339
339
|
<Layout.RightPanel open={this.state.rightPanelOpen}>
|
340
|
-
<Layout.Panel size='
|
340
|
+
<Layout.Panel size='full' side='right'>
|
341
341
|
<Layout.PanelContent>
|
342
342
|
<Layout.AuthoringFrame
|
343
343
|
main={
|
@@ -141,7 +141,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
141
141
|
<Components.PanelContentBlock>
|
142
142
|
<div className="form__group">
|
143
143
|
<div className="form__item">
|
144
|
-
<Input
|
144
|
+
<Input
|
145
|
+
label='Title'
|
146
|
+
type='text'
|
147
|
+
value=''
|
145
148
|
error='This is error message'
|
146
149
|
inlineLabel={false}
|
147
150
|
disabled={false}
|
@@ -167,7 +170,10 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
167
170
|
|
168
171
|
<div className="form__group">
|
169
172
|
<div className="form__item">
|
170
|
-
<Input
|
173
|
+
<Input
|
174
|
+
label='Keyword'
|
175
|
+
type='text'
|
176
|
+
value=''
|
171
177
|
error='This is error message'
|
172
178
|
inlineLabel={false}
|
173
179
|
disabled={false}
|
@@ -232,8 +238,11 @@ export class SamsPlayground extends React.Component<IProps, IState> {
|
|
232
238
|
<Badge text={item.urgency} color={item.urgencyColor} />
|
233
239
|
<Badge text={item.priority} shape='square' color={item.priorityColor} />
|
234
240
|
</GridElements.GridItemFooterBlock>
|
241
|
+
<GridElements.GridItemFooterBlock align='right'>
|
242
|
+
<Label type='success' style='translucent' text='In progress' />
|
243
|
+
</GridElements.GridItemFooterBlock>
|
235
244
|
<GridElements.GridItemFooterActions>
|
236
|
-
<IconButton icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
|
245
|
+
<IconButton size='small' icon='dots-vertical' ariaValue='More actions' onClick={()=> this.changeStatus(item, 'archived')} />
|
237
246
|
</GridElements.GridItemFooterActions>
|
238
247
|
</GridElements.GridItemFooter>
|
239
248
|
</GridElements.GridItem>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase } from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, NavButton, SubNav, Dropdown, CheckButtonGroup, Input, Select, Option, Label, Icon, IconButton, CheckGroup, GridList, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, DatePicker, TimePicker, InputNew, InputBase, Text, FormRowNew } from '../../../../app-typescript/index';
|
4
4
|
import { Carousel } from '../../../../app-typescript/index';
|
5
5
|
import * as GridElements from '../../../../app-typescript/components/GridItem';
|
6
6
|
|
@@ -63,24 +63,33 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
63
63
|
<Components.LayoutContainer>
|
64
64
|
<Components.MainPanel>
|
65
65
|
<InputNew
|
66
|
-
label='
|
66
|
+
label='test'
|
67
67
|
value=''
|
68
68
|
onChange={(value) => false}
|
69
|
-
|
69
|
+
placeholder='test'
|
70
70
|
required={true}
|
71
71
|
info='Nullam Sollicitudin'
|
72
72
|
maxLength={20}
|
73
|
-
//invalid={true}
|
74
|
-
//disabled={true}
|
75
73
|
error='Error message'
|
76
|
-
|
77
|
-
|
74
|
+
inlineLabel={true}
|
75
|
+
labelHidden={true}
|
78
76
|
type='text' />
|
79
77
|
|
80
78
|
<hr />
|
81
79
|
<div className='form__group-new'>
|
82
|
-
<Input
|
83
|
-
|
80
|
+
<Input
|
81
|
+
value=''
|
82
|
+
onChange={(value) => {}}
|
83
|
+
type='text'
|
84
|
+
label='Text input'
|
85
|
+
placeholder='Enter text'
|
86
|
+
disabled={true} />
|
87
|
+
<Input value=''
|
88
|
+
onChange={(value) => {}}
|
89
|
+
type='text'
|
90
|
+
label='Text input'
|
91
|
+
placeholder='Enter text'
|
92
|
+
disabled={true} />
|
84
93
|
<DatePicker
|
85
94
|
value={this.state.date}
|
86
95
|
onChange={(date) => {
|
@@ -91,8 +100,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
91
100
|
label='Date'
|
92
101
|
info='Nullam Sollicitudin'
|
93
102
|
error='Error message'
|
94
|
-
inlineLabel={
|
95
|
-
|
103
|
+
inlineLabel={false}
|
96
104
|
shortcuts={[
|
97
105
|
{label: 'tomorrow', days: 1},
|
98
106
|
{label: 'yesterday', days: -1},
|
@@ -107,12 +115,110 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
107
115
|
this.setState({time});
|
108
116
|
}}
|
109
117
|
/>
|
110
|
-
<Button text="
|
111
|
-
|
118
|
+
<Button text="Clear" onClick={()=> false} />
|
112
119
|
<Button text="Cancel" onClick={()=> false} />
|
113
|
-
|
114
120
|
<Button text="Save" type='primary' onClick={()=> false} />
|
115
121
|
</div>
|
122
|
+
<hr />
|
123
|
+
|
124
|
+
<FormRowNew rowLabel='My group label' inlineLabels={true}>
|
125
|
+
<Input
|
126
|
+
value=''
|
127
|
+
onChange={(value) => {}}
|
128
|
+
type='text'
|
129
|
+
label='Text input'
|
130
|
+
placeholder='Enter text'
|
131
|
+
inlineLabel={true}
|
132
|
+
labelHidden={true}
|
133
|
+
disabled={false} />
|
134
|
+
<Text size='small' align='center'>To:</Text>
|
135
|
+
<Input
|
136
|
+
value=''
|
137
|
+
onChange={(value) => {}}
|
138
|
+
type='text'
|
139
|
+
label='Text input'
|
140
|
+
placeholder='Enter text'
|
141
|
+
inlineLabel={true}
|
142
|
+
labelHidden={true}
|
143
|
+
disabled={false} />
|
144
|
+
<DatePicker
|
145
|
+
value={this.state.date}
|
146
|
+
onChange={(date) => {
|
147
|
+
this.setState({date});
|
148
|
+
}}
|
149
|
+
// disabled={true}
|
150
|
+
dateFormat="DD-MM-YYYY"
|
151
|
+
label='Date'
|
152
|
+
info='Nullam Sollicitudin'
|
153
|
+
error='Error message'
|
154
|
+
inlineLabel={true}
|
155
|
+
labelHidden={true}
|
156
|
+
shortcuts={[
|
157
|
+
{label: 'tomorrow', days: 1},
|
158
|
+
{label: 'yesterday', days: -1},
|
159
|
+
]}
|
160
|
+
/>
|
161
|
+
<TimePicker
|
162
|
+
value={this.state.time}
|
163
|
+
// disabled={true}
|
164
|
+
required={true}
|
165
|
+
inlineLabel={true}
|
166
|
+
labelHidden={true}
|
167
|
+
label='Time'
|
168
|
+
onChange={(time) => {
|
169
|
+
this.setState({time});
|
170
|
+
}}
|
171
|
+
/>
|
172
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
173
|
+
</FormRowNew>
|
174
|
+
|
175
|
+
<hr />
|
176
|
+
|
177
|
+
<FormRowNew>
|
178
|
+
<Input
|
179
|
+
value=''
|
180
|
+
onChange={(value) => {}}
|
181
|
+
type='text'
|
182
|
+
label='Text input'
|
183
|
+
placeholder='Enter text'
|
184
|
+
disabled={false} />
|
185
|
+
<Text size='small' align='center'>To:</Text>
|
186
|
+
<Input
|
187
|
+
value=''
|
188
|
+
onChange={(value) => {}}
|
189
|
+
type='text'
|
190
|
+
label='Text input'
|
191
|
+
placeholder='Enter text'
|
192
|
+
labelHidden={true}
|
193
|
+
disabled={false} />
|
194
|
+
<DatePicker
|
195
|
+
value={this.state.date}
|
196
|
+
onChange={(date) => {
|
197
|
+
this.setState({date});
|
198
|
+
}}
|
199
|
+
// disabled={true}
|
200
|
+
dateFormat="DD-MM-YYYY"
|
201
|
+
label='Date'
|
202
|
+
info='Nullam Sollicitudin'
|
203
|
+
error='Error message'
|
204
|
+
inlineLabel={false}
|
205
|
+
shortcuts={[
|
206
|
+
{label: 'tomorrow', days: 1},
|
207
|
+
{label: 'yesterday', days: -1},
|
208
|
+
]}
|
209
|
+
/>
|
210
|
+
<TimePicker
|
211
|
+
value={this.state.time}
|
212
|
+
// disabled={true}
|
213
|
+
required={true}
|
214
|
+
label='Time'
|
215
|
+
onChange={(time) => {
|
216
|
+
this.setState({time});
|
217
|
+
}}
|
218
|
+
/>
|
219
|
+
<Button text="Save" type='primary' onClick={()=> false} />
|
220
|
+
</FormRowNew>
|
221
|
+
|
116
222
|
<hr />
|
117
223
|
<h3 className="docs-page__h3 sd-margin-y--0">Table list</h3>
|
118
224
|
<hr />
|
@@ -13,11 +13,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
13
13
|
<LeftMenu
|
14
14
|
activeItemId='1'
|
15
15
|
groups={[
|
16
|
-
{ label: 'SYSTEM SETTINGS', items: [
|
17
|
-
|
18
|
-
|
16
|
+
{ label: 'SYSTEM SETTINGS', items: [
|
17
|
+
{id: '1', label: 'General'},
|
18
|
+
{id: '2', label: 'Email settings'},
|
19
|
+
]},
|
20
|
+
{ label: 'WORKFLOW', items: [
|
21
|
+
{ id: '4', label: 'Desk' },
|
22
|
+
{ id: '5', label: 'User Roles & Privileges'},
|
23
|
+
]}
|
19
24
|
]}
|
20
|
-
onSelect={() => false}
|
25
|
+
onSelect={() => false}
|
26
|
+
/>
|
21
27
|
`}
|
22
28
|
</Markup.ReactMarkupCodePreview>
|
23
29
|
|
@@ -32,25 +38,41 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
32
38
|
<p className="sd-top-menu__header">Top menu</p>
|
33
39
|
</div>
|
34
40
|
</div>
|
35
|
-
<LeftMenu ariaLabel={'Left navigation'}
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
]}
|
41
|
-
|
41
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
42
|
+
className={'docs-page__grid-page-example__side'}
|
43
|
+
activeItemId='3'
|
44
|
+
groups={[
|
45
|
+
{label: 'SYSTEM SETTINGS', items: [{id: '1', label: 'General'}, {id: '2', label: 'Email settings'}, {id: '3', label: 'Spell checking'}]},
|
46
|
+
{label: 'WORKFLOW', items: [{id: '4', label: 'Desk'}, {id: '5', label: 'User Roles & Privileges'}]},
|
47
|
+
{label: 'CONTENT CONFIG', items: [{id: '6', label: 'Image renditions'}, {id: '7', label: 'Controlled Vocabularies'}]}
|
48
|
+
]}
|
49
|
+
onSelect={() => false} />
|
42
50
|
<div className='docs-page__grid-page-example__main'></div>
|
43
51
|
</div>
|
44
52
|
</div>
|
45
53
|
</Markup.ReactMarkupPreview>
|
46
54
|
<Markup.ReactMarkupCode>{`
|
47
|
-
<LeftMenu
|
55
|
+
<LeftMenu
|
56
|
+
ariaLabel={'Left navigation'}
|
57
|
+
className={'docs-page__grid-page-example__side'}
|
58
|
+
activeItemId='1'
|
48
59
|
groups={[
|
49
|
-
|
50
|
-
{
|
51
|
-
{
|
60
|
+
{label: 'SYSTEM SETTINGS', items: [
|
61
|
+
{id: '1', label: 'General'},
|
62
|
+
{id: '2', label: 'Email settings'},
|
63
|
+
{id: '3', label: 'Spell checking'},
|
64
|
+
]},
|
65
|
+
{label: 'WORKFLOW', items: [
|
66
|
+
{id: '4', label: 'Desk'},
|
67
|
+
{id: '5', label: 'User Roles & Privileges'},
|
68
|
+
]},
|
69
|
+
{label: 'CONTENT CONFIG', items: [
|
70
|
+
{id: '6', label: 'Image renditions'},
|
71
|
+
{id: '7', label: 'Controlled Vocabularies'},
|
52
72
|
]}
|
53
|
-
|
73
|
+
]}
|
74
|
+
onSelect={() => false}
|
75
|
+
/>
|
54
76
|
`}
|
55
77
|
</Markup.ReactMarkupCode>
|
56
78
|
</Markup.ReactMarkup>
|
@@ -67,26 +89,26 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
67
89
|
</div>
|
68
90
|
</div>
|
69
91
|
<LeftMenu ariaLabel={'Left navigation'}
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
]}
|
92
|
+
className={'docs-page__grid-page-example__side'}
|
93
|
+
scrollSpy='#scrollContainer'
|
94
|
+
offset={-300}
|
95
|
+
//scrollTo={'section4'}
|
96
|
+
groups={[
|
97
|
+
{ label: 'MAIN SECTIONS', items: [
|
98
|
+
{ id: '1', label: 'Section 1', ref:'section1'},
|
99
|
+
{ id: '2', label: 'Section 2', ref: 'section2' },
|
100
|
+
{ id: '3', label: 'Section 3', ref: 'section3' },
|
101
|
+
|
102
|
+
]},
|
103
|
+
{ label:'OTHER SECTIONS', items: [
|
104
|
+
{ id: '4', label: 'Section 4', ref: 'section4' },
|
105
|
+
{ id: '5', label: 'Section 5', ref: 'section5' }
|
106
|
+
]},
|
107
|
+
{ label:'OTHER SECTIONS', items: [
|
108
|
+
{ id: '6', label: 'Section 6', ref: 'section6' },
|
109
|
+
{ id: '7', label: 'Section 7', ref: 'section7' }
|
89
110
|
]}
|
111
|
+
]}
|
90
112
|
onSelect={() => false} />
|
91
113
|
<div className='docs-page__grid-page-example__main sd-padding--4' id='scrollContainer' style={{height:600}}>
|
92
114
|
<SimpleList density='comfortable'>
|
@@ -160,16 +182,17 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
160
182
|
</Markup.ReactMarkupPreview>
|
161
183
|
<Markup.ReactMarkupCode>
|
162
184
|
{`
|
163
|
-
<LeftMenu
|
185
|
+
<LeftMenu
|
186
|
+
ariaLabel={'Left navigation'}
|
164
187
|
className={'docs-page__grid-page-example__side'}
|
165
188
|
scrollSpy='#scrollContainer'
|
189
|
+
offset={-300}
|
166
190
|
activeItemId='1'
|
167
191
|
groups={[
|
168
192
|
{ label: 'MAIN SECTIONS', items: [
|
169
193
|
{ id: '1', label: 'Section 1', ref:'section1'},
|
170
194
|
{ id: '2', label: 'Section 2', ref: 'section2' },
|
171
|
-
{ id: '3', label: 'Section 3', ref: 'section3' }
|
172
|
-
|
195
|
+
{ id: '3', label: 'Section 3', ref: 'section3' }
|
173
196
|
]},
|
174
197
|
{label:'OTHER SECTIONS', items: [
|
175
198
|
{ id: '4', label: 'Section 4', ref: 'section4' },
|
@@ -180,7 +203,8 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
180
203
|
{ id: '5', label: 'Section 7', ref: 'section7' }
|
181
204
|
]}
|
182
205
|
]}
|
183
|
-
onSelect={() => false}
|
206
|
+
onSelect={() => false}
|
207
|
+
/>
|
184
208
|
|
185
209
|
<div id='#scrollContainer'>...</div>
|
186
210
|
`}
|
@@ -189,16 +213,19 @@ export default class LeftNavigationsDoc extends React.Component<{}> {
|
|
189
213
|
|
190
214
|
<h3 className="docs-page__h3">Props</h3>
|
191
215
|
<PropsList>
|
192
|
-
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups'/>
|
193
|
-
<Prop name='activeItemId' isRequired={true} type='string' default='/' description='Id of active item'/>
|
216
|
+
<Prop name='groups' isRequired={true} type='Array<menugroup>' default='/' description='Array of groups.'/>
|
194
217
|
<Prop name='menugroup label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
195
|
-
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items'/>
|
196
|
-
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value'/>
|
218
|
+
<Prop name='menugroup items' isRequired={true} type='Array<menuitem>' default='/' description='Array of items.'/>
|
219
|
+
<Prop name='menuitem id' isRequired={true} type='string' default='/' description='Menugroup id value.'/>
|
197
220
|
<Prop name='menuitem label' isRequired={true} type='string' default='/' description='Menugroup label text value.'/>
|
221
|
+
<Prop name='menuitem ref' isRequired={false} type='string' default='/' description='Menugroup ref.'/>
|
222
|
+
<Prop name='menuitem route' isRequired={false} type='string' default='/' description='Menugroup route value.'/>
|
223
|
+
<Prop name='menuitem onCLick' isRequired={true} type='string' default='/' description='On click function.'/>
|
198
224
|
<Prop name='scrollSpy' isRequired={false} type='string' default='HTML' description='Name of the element of scrollable container.'/>
|
199
225
|
<Prop name='offset' isRequired={false} type='number' default='-300' description='Offset value that adjusts to determine the elements are in the viewport.'/>
|
226
|
+
<Prop name='activeItemId' isRequired={false} type='string' default='/' description='Id of active item'/>
|
227
|
+
<Prop name='scrollTo' isRequired={false} type='string' default='/' description='Ref of active item.'/>
|
200
228
|
</PropsList>
|
201
|
-
|
202
229
|
</section>
|
203
230
|
)
|
204
231
|
}
|
@@ -184,7 +184,7 @@ export class MultiselectDocs extends React.Component<{}, IState> {
|
|
184
184
|
<Prop name='filter' isRequired={false} type='boolean' default='false' description='When specified, displays an input field to filter the items on keyup.'/>
|
185
185
|
<Prop name='filterPlaceholder' isRequired={false} type='string' default='/' description='Placeholder text to show when filter input is empty.'/>
|
186
186
|
<Prop name='emptyFilterMessage' isRequired={false} type='string' default='No results found' description='Template to display when filtering does not return any results.'/>
|
187
|
-
<Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most.'/>
|
187
|
+
<Prop name='maxSelectedLabels' isRequired={false} type='number' default='/' description='Decides how many selected item labels to show at most. Its necessary to use selectedItemTemplate.'/>
|
188
188
|
<Prop name='selectedItemsLabel' isRequired={false} type='string' default='{0} items selected' description='Label to display after exceeding max selected labels.'/>
|
189
189
|
<Prop name='ariaLabelledBy' isRequired={false} type='string' default='/' description='Establishes relationships between the component and label(s) where its value should be one or more element IDs.'/>
|
190
190
|
<Prop name='tabIndex' isRequired={false} type='string' default="'0'" description='Index of the element in tabbing order.'/>
|