fix: consistent popover padding for filtered collections (#1816)

* fix: consistent popover padding for filtered collections

* more tweaks

* :where

* :is

* tweak calendar-in-submenu

Author: apucacao

.changeset/lemon-seals-visit.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+align popover padding for filtered collections

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

@@ -38,12 +38,21 @@
 
 	&[data-trigger='DialogTrigger'],
 	&[data-trigger='ComboBoxDialog'],
-	&[data-trigger='SubmenuTrigger'] {
-		padding: var(--lp-spacing-300);
+	&[data-trigger='DatePicker'],
+	&[data-trigger='DateRangePicker'] {
+		padding: var(--lp-spacing-200);
+	}
+
+	&:has(input[type='search']):is(
+			[data-trigger='Select'],
+			[data-trigger='MenuTrigger'],
+			[data-trigger='SubmenuTrigger']
+		) {
+		padding: var(--lp-spacing-200);
 	}
 
-	&:is([data-trigger='DatePicker'], [data-trigger='DateRangePicker']) {
-		padding: var(--lp-spacing-300);
+	&[data-trigger='SubmenuTrigger']:has(div[role='application']) {
+		padding: var(--lp-spacing-200);
 	}
 
 	&[data-placement='top'] {

packages/components/stories/Menu.stories.tsx

@@ -4,14 +4,20 @@ import type { Selection as AriaSelection } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
 import { useState } from 'react';
+import { useFilter } from 'react-aria-components';
 import { expect, fireEvent, userEvent, waitFor, within } from 'storybook/test';
 
+import { Autocomplete as AutocompleteComponent } from '../src/Autocomplete';
 import { Button } from '../src/Button';
+import { Group } from '../src/Group';
 import { Header } from '../src/Header';
+import { IconButton } from '../src/IconButton';
+import { Input } from '../src/Input';
 import { Keyboard } from '../src/Keyboard';
 import { Menu, MenuItem, MenuTrigger, SubmenuTrigger } from '../src/Menu';
 import { Popover } from '../src/Popover';
 import { Pressable } from '../src/Pressable';
+import { SearchField } from '../src/SearchField';
 import { MenuSection } from '../src/Section';
 import { Separator } from '../src/Separator';
 import { Text } from '../src/Text';
@@ -336,3 +342,59 @@ export const CustomTrigger: Story = {
 	},
 	...open,
 };
+
+export const Autocomplete: Story = {
+	render: (args) => {
+		const { contains } = useFilter({ sensitivity: 'base' });
+
+		return (
+			<MenuTrigger>
+				<Button>Trigger</Button>
+				<Popover>
+					<AutocompleteComponent filter={contains}>
+						<SearchField aria-label="search" autoFocus>
+							<Group>
+								<Icon name="search" size="small" />
+								<Input placeholder="Search" />
+								<IconButton
+									icon="cancel-circle-outline"
+									aria-label="clear"
+									size="small"
+									variant="minimal"
+								/>
+							</Group>
+						</SearchField>
+						<Menu {...args}>
+							<MenuItem>Item one</MenuItem>
+							<MenuItem>Item two</MenuItem>
+							<MenuItem>Item three</MenuItem>
+							<SubmenuTrigger>
+								<MenuItem>Item four</MenuItem>
+								<Popover>
+									<AutocompleteComponent filter={contains}>
+										<SearchField aria-label="search" autoFocus>
+											<Group>
+												<Icon name="search" size="small" />
+												<Input placeholder="Search" />
+												<IconButton
+													icon="cancel-circle-outline"
+													aria-label="clear"
+													size="small"
+													variant="minimal"
+												/>
+											</Group>
+										</SearchField>
+										<Menu {...args}>
+											<MenuItem>Item five</MenuItem>
+											<MenuItem>Item six</MenuItem>
+										</Menu>
+									</AutocompleteComponent>
+								</Popover>
+							</SubmenuTrigger>
+						</Menu>
+					</AutocompleteComponent>
+				</Popover>
+			</MenuTrigger>
+		);
+	},
+};

packages/components/stories/Select.stories.tsx

@@ -3,12 +3,18 @@ import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
+import { useFilter } from 'react-aria-components';
 import { expect, userEvent, within } from 'storybook/test';
 
+import { Autocomplete as AutocompleteComponent } from '../src/Autocomplete';
 import { Button } from '../src/Button';
+import { Group } from '../src/Group';
+import { IconButton } from '../src/IconButton';
+import { Input } from '../src/Input';
 import { Label } from '../src/Label';
 import { ListBox, ListBoxItem } from '../src/ListBox';
 import { Popover } from '../src/Popover';
+import { SearchField } from '../src/SearchField';
 import { Select, SelectValue } from '../src/Select';
 import { Text } from '../src/Text';
 
@@ -158,3 +164,41 @@ export const States: Story = {
 		await userEvent.tab();
 	},
 };
+
+export const Autocomplete: Story = {
+	render: (args) => {
+		const { contains } = useFilter({ sensitivity: 'base' });
+
+		return (
+			<Select {...args}>
+				<Label>Label</Label>
+				<Button>
+					<SelectValue />
+					<Icon name="chevron-down" size="small" />
+				</Button>
+				<Text slot="description">Description</Text>
+				<Popover>
+					<AutocompleteComponent filter={contains}>
+						<SearchField aria-label="search" autoFocus>
+							<Group>
+								<Icon name="search" size="small" />
+								<Input placeholder="Search" />
+								<IconButton
+									icon="cancel-circle-outline"
+									aria-label="clear"
+									size="small"
+									variant="minimal"
+								/>
+							</Group>
+						</SearchField>
+						<ListBox>
+							<ListBoxItem>Item one</ListBoxItem>
+							<ListBoxItem>Item two</ListBoxItem>
+							<ListBoxItem>Item three</ListBoxItem>
+						</ListBox>
+					</AutocompleteComponent>
+				</Popover>
+			</Select>
+		);
+	},
+};