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 ( + + + + + + + + + + + + + Item one + Item two + Item three + + Item four + + + + + + + + + + + Item five + Item six + + + + + + + + + ); + }, +}; 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 ( + + + + + + Item one + Item two + Item three + + + + + ); + }, +};