Skip to content

Commit 2930595

Browse files
committed
fix(form): Select correctly updates for the dense spec
Relates to #1089
1 parent 25178d7 commit 2930595

File tree

3 files changed

+120
-0
lines changed

3 files changed

+120
-0
lines changed

packages/form/src/select/Select.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
339339
aria-disabled={disabled || undefined}
340340
ref={refHandler}
341341
role="button"
342+
dense={dense}
342343
tabIndex={disabled ? undefined : 0}
343344
label={!!label}
344345
onFocus={handleFocus}

packages/form/src/select/__tests__/Select.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ describe("Select", () => {
4040

4141
rerender(<Select {...PROPS} placeholder="Choose..." label="Label" />);
4242
expect(container).toMatchSnapshot();
43+
44+
rerender(<Select {...PROPS} dense />);
45+
expect(container).toMatchSnapshot();
46+
47+
rerender(<Select {...PROPS} dense label="Label" />);
48+
expect(container).toMatchSnapshot();
49+
50+
rerender(<Select {...PROPS} dense label="Label" placeholder="Choose..." />);
51+
expect(container).toMatchSnapshot();
4352
});
4453

4554
it("should update the label and select class names when focused as well as hiding the placeholder text", () => {

packages/form/src/select/__tests__/__snapshots__/Select.tsx.snap

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,116 @@ exports[`Select should render correctly 3`] = `
106106
</div>
107107
`;
108108

109+
exports[`Select should render correctly 4`] = `
110+
<div>
111+
<div
112+
aria-haspopup="listbox"
113+
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense rmd-text-field-container--outline-right rmd-select"
114+
id="select"
115+
role="button"
116+
tabindex="0"
117+
>
118+
<span
119+
class="rmd-select__value"
120+
id="select-display-value"
121+
/>
122+
<input
123+
id="select-value"
124+
type="hidden"
125+
value=""
126+
/>
127+
<span
128+
class="rmd-text-field-addon rmd-text-field-addon--presentational"
129+
>
130+
<i
131+
aria-hidden="true"
132+
class="rmd-icon rmd-icon--font material-icons"
133+
>
134+
arrow_drop_down
135+
</i>
136+
</span>
137+
</div>
138+
</div>
139+
`;
140+
141+
exports[`Select should render correctly 5`] = `
142+
<div>
143+
<div
144+
aria-haspopup="listbox"
145+
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
146+
id="select"
147+
role="button"
148+
tabindex="0"
149+
>
150+
<span
151+
class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
152+
id="select-label"
153+
>
154+
Label
155+
</span>
156+
<span
157+
class="rmd-select__value"
158+
id="select-display-value"
159+
/>
160+
<input
161+
id="select-value"
162+
type="hidden"
163+
value=""
164+
/>
165+
<span
166+
class="rmd-text-field-addon rmd-text-field-addon--presentational"
167+
>
168+
<i
169+
aria-hidden="true"
170+
class="rmd-icon rmd-icon--font material-icons"
171+
>
172+
arrow_drop_down
173+
</i>
174+
</span>
175+
</div>
176+
</div>
177+
`;
178+
179+
exports[`Select should render correctly 6`] = `
180+
<div>
181+
<div
182+
aria-haspopup="listbox"
183+
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
184+
id="select"
185+
role="button"
186+
tabindex="0"
187+
>
188+
<span
189+
class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
190+
id="select-label"
191+
>
192+
Label
193+
</span>
194+
<span
195+
class="rmd-select__value rmd-select__value--placeholder"
196+
id="select-display-value"
197+
>
198+
Choose...
199+
</span>
200+
<input
201+
id="select-value"
202+
type="hidden"
203+
value=""
204+
/>
205+
<span
206+
class="rmd-text-field-addon rmd-text-field-addon--presentational"
207+
>
208+
<i
209+
aria-hidden="true"
210+
class="rmd-icon rmd-icon--font material-icons"
211+
>
212+
arrow_drop_down
213+
</i>
214+
</span>
215+
</div>
216+
</div>
217+
`;
218+
109219
exports[`Select should update the label and select class names when focused as well as hiding the placeholder text 1`] = `
110220
<div>
111221
<div

0 commit comments

Comments
 (0)