Commit Graph

2 Commits

Author SHA1 Message Date
Robin Malfait 00cc8c50e3 Add Alert & RadioGroup components (#274)
* add Alert component

* expose Alert

* rename forgotten FLYOUT to POPOVER

* use PopoverRenderPropArg

* organize imports in a consistent way

* ensure Portals behave as expected

Portals can be nested from a React perspective, however in the DOM they
are rendered as siblings, this is mostly fine.

However, when they are rendered inside a Dialog, the Dialog itself is
marked with `role="modal"` which makes all the other content inert. This
means that rendering Menu.Items in a Portal or an Alert in a portal
makes it non-interactable. Alerts are not even announced.

To fix  this, we ensure that we make the `root` of the Portal the actual
dialog. This allows you to still interact with it, because an open modal
is the "root" for the assistive technology.

But there is a catch, a Dialog in a Dialog *can* render as a sibling,
because you force the focus into the new Dialog. So we also ensured that
Dialogs are always rendered in the portal root, and not inside another
Dialog.

* add dialog with alert example

* add internal Description component

* add internal Label component

* add RadioGroup component

* expose RadioGroup

* add RadioGroup example

* ensure to include tha RadioGroup.Option own id

* update changelog

* split documentation
2021-04-02 15:55:40 +02:00
Robin Malfait 58ff88698b feat: add Listbox component (#3)
* make jest monorepo aware

* add @testing-library/jest-dom for custom matchers

This way we can use expect(element).toHaveAttribute(key, value?)

* abstract keys enum

* change type to unknown, because we don't know the return value

* update use-id hook, make it suspense aware

Thanks Reach UI!

* hoist the disposables collection

* add accessbility assertions for listbox

Also made it consistent for the Menu component and simplified some of the assertions

* add use-computed hook

This allows us re-render when hooks change, but also return a value. So this is a combination of useEffect and a useState value.

* add Listbox component

* bump dependencies

* add listbox example

* add lint-staged

This way we will only lint the files that have been staged and ready to be committed instead of the whole codebase

* add missing prevent defaults

* improve tests to verify that we can actually update the value of the listbox

* scroll the active listbox item into view

* small optimization, only focus "Nothing" on pointer leave when we are the active item

We used to always go to "Nothing" on pointer leave. And while this code
doesn't get called often, it *gets* called if you are using your arrow
keys and the mouse pointer is still over the list.

* bump dependencies

Also moved the tailwind dependencies to the root

* fix typo

* drop the default Transition inside the Menu and Listbox components

* update examples to reflect drop of default Transition wrapper

* rename Listbox.{Items,Item} to Listbox.{Options,Option}

Also rename all instances of `item` to `option` in tests and comments
and what have you...

* fix typo

* drop disabled prop, use aria-disabled only
2020-10-02 11:05:41 +02:00