Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(@clayui/picker): LPD-28522 Fix language selector not displaying correctly on web content #5835

Merged
merged 8 commits into from
Jun 26, 2024
Merged

fix(@clayui/picker): LPD-28522 Fix language selector not displaying correctly on web content #5835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d8517dd
fix(@clayui/picker): LPD-28522 Add option to add auto width
ilzamcmed Jun 20, 2024
e11d87b
fix(@clayui/picker): LPD-28522 Update picker stories and test config
ilzamcmed Jun 20, 2024
2f97b9b
fix(@clayui/picker): LPD-28522 Add min width and change function logic
ilzamcmed Jun 21, 2024
9985cc5
fix(@clayui/picker): LPD-28522 Update snapshot
ilzamcmed Jun 21, 2024
18b41eb
chore(@clayui/core): simplifies conditionals
matuzalemsteles Jun 21, 2024
7eb454c
chore(@clayui/core): regen snapshot
matuzalemsteles Jun 21, 2024
11a4546
chore(@clayui/core): update Picker stories
matuzalemsteles Jun 26, 2024
b69aae3
chore(@clayui/core): organize the examples
matuzalemsteles Jun 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions jest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ module.exports = {
'./packages/clay-core/src/picker/': {
branches: 59,
functions: 66,
lines: 77,
statements: 77,
lines: 76,
statements: 76,
},
'./packages/clay-core/src/tree-view/': {
branches: 56,
Expand Down
17 changes: 9 additions & 8 deletions packages/clay-core/src/picker/Picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export type Props<T> = {
selectedKey?: React.Key;

/**
* Sets the fixed width of the panel.
* Sets the width of the panel.
*/
width?: number;

Expand Down Expand Up @@ -382,6 +382,8 @@ export function Picker<T extends Record<string, any> | string | number>({
);
}

const clientWidth = triggerRef.current?.clientWidth || 0;

return (
<>
<LiveAnnouncer ref={announcerAPI} />
Expand Down Expand Up @@ -537,14 +539,13 @@ export function Picker<T extends Record<string, any> | string | number>({
role="presentation"
style={{
maxWidth: 'none',
width: `${
minWidth: !width
? `${Math.max(160, clientWidth)}px`
: undefined,
width:
typeof width === 'number'
? width
: (triggerRef.current?.clientWidth || 0) >
160
? triggerRef.current?.clientWidth
: 160
}px`,
? `${Math.max(width, clientWidth)}px`
: undefined,
}}
>
{UNSAFE_behavior === 'secondary' &&
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ exports[`Picker basic rendering renders open component by default 1`] = `
<div
class="dropdown-menu dropdown-menu-indicator-start dropdown-menu-select dropdown-menu-width-shrink show"
role="presentation"
style="max-width: none; width: 160px; left: -999px; top: -995px;"
style="max-width: none; min-width: 160px; left: -999px; top: -995px;"
>
<ul
class="inline-scroller list-unstyled"
Expand Down
40 changes: 34 additions & 6 deletions packages/clay-core/stories/Picker.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,13 +231,17 @@ export const Width = () => {
const labelId = useId();

return (
<>
<div style={{width: '250px'}}>
<div style={{display: 'flex'}}>
<div style={{marginRight: '50px', width: '250px'}}>
<Form.Group>
<label htmlFor={pickerId} id={labelId}>
Choose a fruit
</label>
<Picker aria-labelledby={labelId} id={pickerId}>
<Picker
aria-labelledby={labelId}
defaultActive
id={pickerId}
>
<Option key="apple">Apple</Option>
<Option disabled key="banana">
Banana
Expand All @@ -256,13 +260,14 @@ export const Width = () => {
</Form.Group>
</div>

<div style={{width: '100px'}}>
<div style={{marginRight: '80px', width: '100px'}}>
<Form.Group>
<label htmlFor={pickerId} id={labelId}>
Choose a fruit
</label>
<Picker
aria-labelledby={labelId}
defaultActive
id={pickerId}
placeholder="Fruit"
>
Expand All @@ -284,13 +289,14 @@ export const Width = () => {
</Form.Group>
</div>

<div style={{width: '100px'}}>
<div style={{marginRight: '50px', width: '100px'}}>
<Form.Group>
<label htmlFor={pickerId} id={labelId}>
Year
</label>
<Picker
aria-labelledby={labelId}
defaultActive
id={pickerId}
placeholder="Year"
width={85}
Expand All @@ -303,6 +309,28 @@ export const Width = () => {
</Picker>
</Form.Group>
</div>
</>

<div style={{marginRight: '50px', width: '100px'}}>
<Form.Group>
<label htmlFor={pickerId} id={labelId}>
Long Option Year
</label>
<Picker
aria-labelledby={labelId}
defaultActive
id={pickerId}
placeholder="Year"
>
<Option key="2020">
2020 was really a looooooooong year
</Option>
<Option key="2021">2021</Option>
<Option key="2022">2022</Option>
<Option key="2023">2023</Option>
<Option key="2024">2024</Option>
</Picker>
</Form.Group>
</div>
</div>
);
};
Loading