Skip to content

Commit 4e372fb

Browse files
alex-judidoo
alex-ju
and
didoo
authored
Add <select multiple> examples to showcase (#2586)
Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
1 parent 74b393d commit 4e372fb

File tree

1 file changed

+144
-88
lines changed

1 file changed

+144
-88
lines changed

‎showcase/app/templates/components/form/select.hbs

+144-88
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,94 @@
1515

1616
<Shw::Flex @gap="2rem" as |SF|>
1717
<SF.Item @label="Default">
18-
<Hds::Form::Select::Base aria-label="default select" as |C|>
18+
<Hds::Form::Select::Base aria-label="default" as |C|>
1919
<C.Options>
20+
<option></option>
2021
<option>Lorem ipsum dolor</option>
2122
<option>Sine qua non est</option>
2223
</C.Options>
2324
</Hds::Form::Select::Base>
2425
</SF.Item>
26+
<SF.Item @label="Selected">
27+
<Hds::Form::Select::Base aria-label="default selected" as |C|>
28+
<C.Options>
29+
<option></option>
30+
<option selected>Lorem ipsum dolor</option>
31+
<option>Sine qua non est</option>
32+
</C.Options>
33+
</Hds::Form::Select::Base>
34+
</SF.Item>
35+
<SF.Item @label="Multiple">
36+
<Hds::Form::Select::Base aria-label="multiple selected" multiple as |C|>
37+
<C.Options>
38+
<option selected>Lorem ipsum dolor</option>
39+
<option>Sine qua non est</option>
40+
</C.Options>
41+
</Hds::Form::Select::Base>
42+
</SF.Item>
43+
<SF.Item @label="Multiple / With groups">
44+
<Hds::Form::Select::Base aria-label="multiple groups selected" multiple size="8" as |C|>
45+
<C.Options>
46+
<optgroup label="Most common">
47+
<option value="Kubernetes">Kubernetes</option>
48+
<option value="AWS">AWS</option>
49+
<option value="Azure" disabled>Azure</option>
50+
</optgroup>
51+
<optgroup label="Others">
52+
<option value="Alibaba" selected>Alibaba</option>
53+
<option value="CloudWise" selected>CloudWise</option>
54+
<option value="SWA">SWA</option>
55+
<option value="Other">Other</option>
56+
</optgroup>
57+
</C.Options>
58+
</Hds::Form::Select::Base>
59+
</SF.Item>
2560
</Shw::Flex>
2661

62+
<Shw::Divider @level={{2}} />
63+
2764
<Shw::Text::H3>States</Shw::Text::H3>
2865

29-
<Shw::Flex @gap="2rem" as |SF|>
66+
{{#let (array "single" "multiple") as |types|}}
3067
{{#let (array "base" "invalid" "disabled") as |variants|}}
31-
{{#each @model.STATES as |state|}}
32-
<SF.Item>
33-
<Shw::Flex @direction="column" as |SF|>
34-
{{#each variants as |variant|}}
35-
{{! template-lint-disable simple-unless }}
36-
{{#unless (and (eq variant "disabled") (eq state "focus"))}}
37-
<SF.Item
38-
@label="{{capitalize variant}} / {{capitalize state}}"
39-
mock-state-value={{state}}
40-
mock-state-selector="select"
41-
>
42-
<Hds::Form::Select::Field
43-
aria-label="{{state}}"
44-
disabled={{if (eq variant "disabled") "disabled"}}
45-
@isInvalid={{if (eq variant "invalid") true}}
46-
as |F|
47-
>
48-
<F.Options>
49-
<option>Lorem ipsum dolor</option>
50-
<option>Sine qua non est</option>
51-
</F.Options>
52-
</Hds::Form::Select::Field>
53-
</SF.Item>
54-
{{/unless}}
55-
{{/each}}
56-
</Shw::Flex>
57-
</SF.Item>
68+
{{#each types as |type|}}
69+
<Shw::Text::H4>{{capitalize type}}</Shw::Text::H4>
70+
<Shw::Flex @gap="2rem" as |SF|>
71+
{{#each @model.STATES as |state|}}
72+
<SF.Item>
73+
<Shw::Flex @direction="column" as |SF|>
74+
{{#each variants as |variant|}}
75+
{{! template-lint-disable simple-unless }}
76+
{{#unless (and (eq variant "disabled") (eq state "focus"))}}
77+
<SF.Item
78+
@label="{{capitalize variant}} / {{capitalize state}}"
79+
mock-state-value={{state}}
80+
mock-state-selector="select"
81+
>
82+
<Hds::Form::Select::Base
83+
aria-label="{{state}}"
84+
disabled={{if (eq variant "disabled") "disabled"}}
85+
@isInvalid={{if (eq variant "invalid") true}}
86+
multiple={{if (eq type "multiple") true null}}
87+
as |F|
88+
>
89+
<F.Options>
90+
<option selected>Lorem ipsum dolor</option>
91+
<option>Sine qua non est</option>
92+
</F.Options>
93+
</Hds::Form::Select::Base>
94+
</SF.Item>
95+
{{/unless}}
96+
{{/each}}
97+
</Shw::Flex>
98+
</SF.Item>
99+
{{/each}}
100+
</Shw::Flex>
58101
{{/each}}
59102
{{/let}}
60-
</Shw::Flex>
103+
{{/let}}
104+
105+
<Shw::Divider @level={{2}} />
61106

62107
<Shw::Text::H3>Custom layout</Shw::Text::H3>
63108

@@ -76,6 +121,8 @@
76121
</SF.Item>
77122
</Shw::Flex>
78123

124+
<Shw::Divider @level={{2}} />
125+
79126
<Shw::Text::H3>Containers</Shw::Text::H3>
80127

81128
<Shw::Grid @columns={{3}} as |SG|>
@@ -114,64 +161,71 @@
114161

115162
<Shw::Text::H3>Content</Shw::Text::H3>
116163

117-
<Shw::Grid @columns="3" as |SG|>
118-
<SG.Item @label="Only label">
119-
<Hds::Form::Select::Field as |F|>
120-
<F.Label>Lorem ipsum dolor</F.Label>
121-
<F.Options>
122-
<option>Lorem ipsum dolor</option>
123-
<option>Sine qua non est</option>
124-
</F.Options>
125-
</Hds::Form::Select::Field>
126-
</SG.Item>
127-
<SG.Item @label="Label + Helper text">
128-
<Hds::Form::Select::Field as |F|>
129-
<F.Label>This is the label</F.Label>
130-
<F.HelperText>This is the helper text</F.HelperText>
131-
<F.Options>
132-
<option>Lorem ipsum dolor</option>
133-
<option>Sine qua non est</option>
134-
</F.Options>
135-
</Hds::Form::Select::Field>
136-
</SG.Item>
137-
{{! left empty on purpose }}
138-
<SG.Item />
139-
<SG.Item @label="Label + Error">
140-
<Hds::Form::Select::Field @isInvalid={{true}} as |F|>
141-
<F.Label>This is the label</F.Label>
142-
<F.Options>
143-
<option>Lorem ipsum dolor</option>
144-
<option>Sine qua non est</option>
145-
</F.Options>
146-
<F.Error>This is the error</F.Error>
147-
</Hds::Form::Select::Field>
148-
</SG.Item>
149-
<SG.Item @label="Label + Helper text + Error">
150-
<Hds::Form::Select::Field @isInvalid={{true}} as |F|>
151-
<F.Label>This is the label</F.Label>
152-
<F.HelperText>This is the helper text</F.HelperText>
153-
<F.Options>
154-
<option>Lorem ipsum dolor</option>
155-
<option>Sine qua non est</option>
156-
</F.Options>
157-
<F.Error>This is the error</F.Error>
158-
</Hds::Form::Select::Field>
159-
</SG.Item>
160-
<SG.Item @label="Label + Helper text + Errors">
161-
<Hds::Form::Select::Field @isInvalid={{true}} as |F|>
162-
<F.Label>This is the label</F.Label>
163-
<F.HelperText>This is the helper text</F.HelperText>
164-
<F.Options>
165-
<option>Lorem ipsum dolor</option>
166-
<option>Sine qua non est</option>
167-
</F.Options>
168-
<F.Error as |E|>
169-
<E.Message>First error message</E.Message>
170-
<E.Message>Second error message</E.Message>
171-
</F.Error>
172-
</Hds::Form::Select::Field>
173-
</SG.Item>
174-
</Shw::Grid>
164+
{{#let (array "single" "multiple") as |types|}}
165+
{{#each types as |type|}}
166+
<Shw::Text::H4>{{capitalize type}}</Shw::Text::H4>
167+
<Shw::Grid @columns="3" as |SG|>
168+
<SG.Item @label="Only label">
169+
<Hds::Form::Select::Field multiple={{if (eq type "multiple") true null}} as |F|>
170+
<F.Label>Lorem ipsum dolor</F.Label>
171+
<F.Options>
172+
<option selected>Lorem ipsum dolor</option>
173+
<option>Sine qua non est</option>
174+
</F.Options>
175+
</Hds::Form::Select::Field>
176+
</SG.Item>
177+
<SG.Item @label="Label + Helper text">
178+
<Hds::Form::Select::Field multiple={{if (eq type "multiple") true null}} as |F|>
179+
<F.Label>This is the label</F.Label>
180+
<F.HelperText>This is the helper text</F.HelperText>
181+
<F.Options>
182+
<option selected>Lorem ipsum dolor</option>
183+
<option>Sine qua non est</option>
184+
</F.Options>
185+
</Hds::Form::Select::Field>
186+
</SG.Item>
187+
{{! left empty on purpose }}
188+
<SG.Item />
189+
<SG.Item @label="Label + Error">
190+
<Hds::Form::Select::Field multiple={{if (eq type "multiple") true null}} @isInvalid={{true}} as |F|>
191+
<F.Label>This is the label</F.Label>
192+
<F.Options>
193+
<option selected>Lorem ipsum dolor</option>
194+
<option>Sine qua non est</option>
195+
</F.Options>
196+
<F.Error>This is the error</F.Error>
197+
</Hds::Form::Select::Field>
198+
</SG.Item>
199+
<SG.Item @label="Label + Helper text + Error">
200+
<Hds::Form::Select::Field multiple={{if (eq type "multiple") true null}} @isInvalid={{true}} as |F|>
201+
<F.Label>This is the label</F.Label>
202+
<F.HelperText>This is the helper text</F.HelperText>
203+
<F.Options>
204+
<option selected>Lorem ipsum dolor</option>
205+
<option>Sine qua non est</option>
206+
</F.Options>
207+
<F.Error>This is the error</F.Error>
208+
</Hds::Form::Select::Field>
209+
</SG.Item>
210+
<SG.Item @label="Label + Helper text + Errors">
211+
<Hds::Form::Select::Field multiple={{if (eq type "multiple") true null}} @isInvalid={{true}} as |F|>
212+
<F.Label>This is the label</F.Label>
213+
<F.HelperText>This is the helper text</F.HelperText>
214+
<F.Options>
215+
<option selected>Lorem ipsum dolor</option>
216+
<option>Sine qua non est</option>
217+
</F.Options>
218+
<F.Error as |E|>
219+
<E.Message>First error message</E.Message>
220+
<E.Message>Second error message</E.Message>
221+
</F.Error>
222+
</Hds::Form::Select::Field>
223+
</SG.Item>
224+
</Shw::Grid>
225+
{{/each}}
226+
{{/let}}
227+
228+
<Shw::Divider @level={{2}} />
175229

176230
<Shw::Text::H3>Required and optional</Shw::Text::H3>
177231

@@ -196,6 +250,8 @@
196250
</SF.Item>
197251
</Shw::Flex>
198252

253+
<Shw::Divider @level={{2}} />
254+
199255
<Shw::Text::H3>Containers</Shw::Text::H3>
200256

201257
<Shw::Grid @columns={{3}} as |SG|>

0 commit comments

Comments
 (0)