diff --git a/.changeset/lemon-seals-visit.md b/.changeset/lemon-seals-visit.md
new file mode 100644
index 000000000..b3121d176
--- /dev/null
+++ b/.changeset/lemon-seals-visit.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+align popover padding for filtered collections
diff --git a/packages/components/src/styles/Popover.module.css b/packages/components/src/styles/Popover.module.css
index a2604b8dc..defe8835d 100644
--- a/packages/components/src/styles/Popover.module.css
+++ b/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'] {
diff --git a/packages/components/stories/Menu.stories.tsx b/packages/components/stories/Menu.stories.tsx
index 5f2e49d6f..ee317fcd0 100644
--- a/packages/components/stories/Menu.stories.tsx
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
diff --git a/packages/components/stories/Select.stories.tsx b/packages/components/stories/Select.stories.tsx
index 5365bc328..5c1063088 100644
--- a/packages/components/stories/Select.stories.tsx
+++ b/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 (
+
+ );
+ },
+};