support as property in headless components
#235
Assignees
Milestone
Comments
travis
added a commit
that referenced
this issue
Jan 13, 2023
follow the pattern set by HeadlessUI and others of supporting the very useful "as" property in the uploader component. this: 1. lets users override default tag types (eg, changing a `button` to an `a` tag) 2. lets users provide custom components to be used as the root element of our headless components 3. lets users elide a root tag entirely by passing `Fragment` to `as` See https://headlessui.com/react/menu#rendering-a-different-element-for-a-component for more documentation on how this is commonly used This introduces a new dependency on ariakit-react-utils (https://ariakit.org/) to avoid reproducing the intricate puzzle of types in the `createComponent` and `createElement` functions from that library. I suspect other utilities will be useful as we improve the accessibility defaults of this library so I think this dependency is worth adding, but we could copy/paste the specific code we need with proper attribution if we want to avoid pulling in the whole library. resolves #235 Co-authored-by: Alan Shaw <[email protected]> Co-authored-by: Yusef Napora <[email protected]> Co-authored-by: Nathan Vander Wilt <[email protected]>
This was referenced Jan 13, 2023
This was referenced Jan 27, 2023
This was referenced Feb 2, 2023
travis
added a commit
that referenced
this issue
Feb 3, 2023
🤖 I have created a release *beep* *boop* --- ## [2.1.0](react-keyring-v2.0.1...react-keyring-v2.1.0) (2023-02-03) ### Features * "Headless" UI components ([#136](#136)) ([46583e0](46583e0)) * delegate access to spaces ([#293](#293)) ([441d757](441d757)) * support `as` prop in uploader component ([#236](#236)) ([c802e99](c802e99)), closes [#235](#235) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Travis Vachon <[email protected]> Co-authored-by: Travis Vachon <[email protected]>
This was referenced Mar 23, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Similar toolkits like HeadlessUI (https://github.com/tailwindlabs/headlessui) and Plate (https://github.com/udecode/plate) support passing an
asproperty to the components they provide that changes the root markup element of the component. I'm already finding a need for this in the work I'm doing on #224 so I'd like to dig in to supporting this.After digging around in HeadlessUI and Plate I think it might make the most sense to use https://ariakit.org/ for this as they already have much of the functionality implemented there. We'll probably also get a host of other useful a11y features from doing this, which seems like a major win to me.
The text was updated successfully, but these errors were encountered: