Skip to content

Commit f914372

Browse files
authored
fix width overflow issue in quiet picker (#5592)
1 parent 80c4926 commit f914372

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

packages/@react-spectrum/picker/src/Picker.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,14 +225,14 @@ function Picker<T extends object>(props: SpectrumPickerProps<T>, ref: DOMRef<HTM
225225
</div>
226226
);
227227

228-
let wrapperClassName = label ? classNames(
228+
let wrapperClassName = classNames(
229229
styles,
230230
'spectrum-Field',
231231
{
232232
'spectrum-Dropdown-fieldWrapper--quiet': isQuiet,
233233
'spectrum-Dropdown-fieldWrapper--positionSide': labelPosition === 'side'
234234
}
235-
) : '';
235+
);
236236

237237
return (
238238
<Field

packages/@react-spectrum/picker/stories/Picker.stories.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,30 @@ export const Links: PickerStory = {
395395
)
396396
};
397397

398+
export const Quiet: PickerStory = {
399+
render: () => (
400+
<View>
401+
<View>
402+
<h4>Quiet picker with label</h4>
403+
<Picker label="Choose frequency" isQuiet>
404+
<Item key="rarely">Rarely</Item>
405+
<Item key="sometimes">Sometimes</Item>
406+
<Item key="always">Always</Item>
407+
</Picker>
408+
</View>
409+
<hr />
410+
<View>
411+
<h4>Quiet picker without label</h4>
412+
<Picker aria-label="Choose frequency" isQuiet>
413+
<Item key="rarely">Rarely</Item>
414+
<Item key="sometimes">Sometimes</Item>
415+
<Item key="always">Always</Item>
416+
</Picker>
417+
</View>
418+
</View>
419+
)
420+
};
421+
398422
function DefaultPicker(props: SpectrumPickerProps<object>) {
399423
return (
400424
<Picker {...props}>

0 commit comments

Comments
 (0)