-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
v11 proposed changes for React #4356
Comments
Proposal: Dialog
This component would serve as a primitive for building windows that are overlaid over the primary window, or other dialog windows, that have a requirement where windows under the dialog are inert. This could be used as a primitive to build accessible versions of our Modal component, alongside panels or pop-ups that often appear in a UI. Component APIInspired by Reach UI function Usage() {
const [isOpen, open, close] = useDialog();
return (
<>
<button onClick={open}>Open</button>
<Dialog isOpen={isOpen} onDismiss={close}>
<p>Content</p>
</Dialog>
</>
);
}
|
Prop | Type |
---|---|
isOpen |
bool |
onDismiss |
func |
children |
node |
Questions
- How do we guarantee that there is a button to dismiss the dialog so a screen reader won't get trapped?
- How do we provide an
inert
polyfill or implementation that works cross-browsers?
Proposal:
|
Proposal:
|
Proposal: Project Conventions
|
Proposal: Leverage rollup for component bundlesHistorically, we've published our package using transpiled babel sources to support ESM, CommonJS, and UMD bundles. This proposal would aim to remove all filepath import paths and instead provide a single entrypoint for all components bundled through Rollup. |
Proposal: Text TruncationWould be great if we offered a text truncation helper that would apply our CSS classes under the hood. This might look like: <TruncatedText value="Some string" /> This would apply our Some other names could be: <Text truncate value="Some string" />
<TruncateText value="Some string" />
<TextTruncate value="Some string" /> APIOne thing would be that we, most likely, wouldn't want to allow |
Not sure if there's a place for one off just bad props Button Icon-specific props a11y or otherwise could be passed to the icon in renderIcon |
Proposal: Component QOL updatesTag
|
Proposal:
|
@joshblack I think it should always go to the node of interest. If someone needs to measure a container so precisely that the node of interest doesn’t suffice, they can access the parent node through the ref. My guess is that this use case is so rare it’s not worth putting the ref on the outside and making folks dig into the component for the more common use case (access to the focus able element/element with .value) |
As a developer, if I pass a ref to an input or any form Component, and that ref doesn’t have a .value, I’m going to be surprised. |
Thanks all for weighing in! Going to integrate these suggestions into our roadmap and then out into planning issues 👀 |
Disclaimer: this issue is meant for capturing breaking changes that we'd like to see changed in v11 to help address some of the consistency issues across components. None of these changes are final, or implemented, and are subject to change.
The text was updated successfully, but these errors were encountered: