Skip to content

Commit fc8a904

Browse files
apucacaoapucacao
authored
fix: consistent popover padding for filtered collections (#1816)
* fix: consistent popover padding for filtered collections * more tweaks * :where * :is * tweak calendar-in-submenu
1 parent 623fa6f commit fc8a904

4 files changed

Lines changed: 124 additions & 4 deletions

File tree

‎.changeset/lemon-seals-visit.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@launchpad-ui/components": patch
3+
---
4+
5+
align popover padding for filtered collections

‎packages/components/src/styles/Popover.module.css‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,21 @@
3838

3939
&[data-trigger='DialogTrigger'],
4040
&[data-trigger='ComboBoxDialog'],
41-
&[data-trigger='SubmenuTrigger'] {
42-
padding: var(--lp-spacing-300);
41+
&[data-trigger='DatePicker'],
42+
&[data-trigger='DateRangePicker'] {
43+
padding: var(--lp-spacing-200);
44+
}
45+
46+
&:has(input[type='search']):is(
47+
[data-trigger='Select'],
48+
[data-trigger='MenuTrigger'],
49+
[data-trigger='SubmenuTrigger']
50+
) {
51+
padding: var(--lp-spacing-200);
4352
}
4453

45-
&:is([data-trigger='DatePicker'], [data-trigger='DateRangePicker']) {
46-
padding: var(--lp-spacing-300);
54+
&[data-trigger='SubmenuTrigger']:has(div[role='application']) {
55+
padding: var(--lp-spacing-200);
4756
}
4857

4958
&[data-placement='top'] {

‎packages/components/stories/Menu.stories.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,20 @@ import type { Selection as AriaSelection } from 'react-aria-components';
44

55
import { Icon } from '@launchpad-ui/icons';
66
import { useState } from 'react';
7+
import { useFilter } from 'react-aria-components';
78
import { expect, fireEvent, userEvent, waitFor, within } from 'storybook/test';
89

10+
import { Autocomplete as AutocompleteComponent } from '../src/Autocomplete';
911
import { Button } from '../src/Button';
12+
import { Group } from '../src/Group';
1013
import { Header } from '../src/Header';
14+
import { IconButton } from '../src/IconButton';
15+
import { Input } from '../src/Input';
1116
import { Keyboard } from '../src/Keyboard';
1217
import { Menu, MenuItem, MenuTrigger, SubmenuTrigger } from '../src/Menu';
1318
import { Popover } from '../src/Popover';
1419
import { Pressable } from '../src/Pressable';
20+
import { SearchField } from '../src/SearchField';
1521
import { MenuSection } from '../src/Section';
1622
import { Separator } from '../src/Separator';
1723
import { Text } from '../src/Text';
@@ -336,3 +342,59 @@ export const CustomTrigger: Story = {
336342
},
337343
...open,
338344
};
345+
346+
export const Autocomplete: Story = {
347+
render: (args) => {
348+
const { contains } = useFilter({ sensitivity: 'base' });
349+
350+
return (
351+
<MenuTrigger>
352+
<Button>Trigger</Button>
353+
<Popover>
354+
<AutocompleteComponent filter={contains}>
355+
<SearchField aria-label="search" autoFocus>
356+
<Group>
357+
<Icon name="search" size="small" />
358+
<Input placeholder="Search" />
359+
<IconButton
360+
icon="cancel-circle-outline"
361+
aria-label="clear"
362+
size="small"
363+
variant="minimal"
364+
/>
365+
</Group>
366+
</SearchField>
367+
<Menu {...args}>
368+
<MenuItem>Item one</MenuItem>
369+
<MenuItem>Item two</MenuItem>
370+
<MenuItem>Item three</MenuItem>
371+
<SubmenuTrigger>
372+
<MenuItem>Item four</MenuItem>
373+
<Popover>
374+
<AutocompleteComponent filter={contains}>
375+
<SearchField aria-label="search" autoFocus>
376+
<Group>
377+
<Icon name="search" size="small" />
378+
<Input placeholder="Search" />
379+
<IconButton
380+
icon="cancel-circle-outline"
381+
aria-label="clear"
382+
size="small"
383+
variant="minimal"
384+
/>
385+
</Group>
386+
</SearchField>
387+
<Menu {...args}>
388+
<MenuItem>Item five</MenuItem>
389+
<MenuItem>Item six</MenuItem>
390+
</Menu>
391+
</AutocompleteComponent>
392+
</Popover>
393+
</SubmenuTrigger>
394+
</Menu>
395+
</AutocompleteComponent>
396+
</Popover>
397+
</MenuTrigger>
398+
);
399+
},
400+
};

‎packages/components/stories/Select.stories.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,18 @@ import type { ComponentType } from 'react';
33

44
import { Icon } from '@launchpad-ui/icons';
55
import { vars } from '@launchpad-ui/vars';
6+
import { useFilter } from 'react-aria-components';
67
import { expect, userEvent, within } from 'storybook/test';
78

9+
import { Autocomplete as AutocompleteComponent } from '../src/Autocomplete';
810
import { Button } from '../src/Button';
11+
import { Group } from '../src/Group';
12+
import { IconButton } from '../src/IconButton';
13+
import { Input } from '../src/Input';
914
import { Label } from '../src/Label';
1015
import { ListBox, ListBoxItem } from '../src/ListBox';
1116
import { Popover } from '../src/Popover';
17+
import { SearchField } from '../src/SearchField';
1218
import { Select, SelectValue } from '../src/Select';
1319
import { Text } from '../src/Text';
1420

@@ -158,3 +164,41 @@ export const States: Story = {
158164
await userEvent.tab();
159165
},
160166
};
167+
168+
export const Autocomplete: Story = {
169+
render: (args) => {
170+
const { contains } = useFilter({ sensitivity: 'base' });
171+
172+
return (
173+
<Select {...args}>
174+
<Label>Label</Label>
175+
<Button>
176+
<SelectValue />
177+
<Icon name="chevron-down" size="small" />
178+
</Button>
179+
<Text slot="description">Description</Text>
180+
<Popover>
181+
<AutocompleteComponent filter={contains}>
182+
<SearchField aria-label="search" autoFocus>
183+
<Group>
184+
<Icon name="search" size="small" />
185+
<Input placeholder="Search" />
186+
<IconButton
187+
icon="cancel-circle-outline"
188+
aria-label="clear"
189+
size="small"
190+
variant="minimal"
191+
/>
192+
</Group>
193+
</SearchField>
194+
<ListBox>
195+
<ListBoxItem>Item one</ListBoxItem>
196+
<ListBoxItem>Item two</ListBoxItem>
197+
<ListBoxItem>Item three</ListBoxItem>
198+
</ListBox>
199+
</AutocompleteComponent>
200+
</Popover>
201+
</Select>
202+
);
203+
},
204+
};

0 commit comments

Comments
 (0)