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.

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

Add string shorthand for the anchor prop #3133

Merged
merged 4 commits into from
Apr 25, 2024
Merged

Conversation

RobinMalfait
Copy link
Member

This PR introduces a shorthand for the anchor API. The anchor prop now accepts a string that maps to the anchor.to property in the long-form object. Note: the long form object syntax is still supported.

The anchor.gap, anchor.offset and anchor.padding options use CSS variables by default. They are defined as var(--anchor-gap), var(--anchor-offset) and var(--anchor-padding) respectively.

This means that you can fully customize the anchor styles by setting CSS variables, for example via Tailwind classes.

An example using Tailwind CSS:

<Listbox>
  <ListboxButton>Options</ListboxButton>
  <ListboxOptions anchor="bottom start" className="[--anchor-gap:var(--spacing-1)] [--anchor-offset:calc(var(--spacing-1)*-1)]">
    <ListboxOption>Listbox option A</ListboxOption>
    <ListboxOption>Listbox option B</ListboxOption>
    <ListboxOption>Listbox option C</ListboxOption>
  </ListboxOptions>
</Listbox>

Which will render as:

 +---------+
 | Options |
 +---------+
+------------------+
| Listbox option A |
| Listbox option B |
| Listbox option C |
+------------------+

…s by default

This way simply adding `anchor="bottom"` to one of the anchorable
components will also use these variables defined on the component.
Copy link

vercel bot commented Apr 24, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 24, 2024 9:44pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 24, 2024 9:44pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants