Devon Govett
@devongovett.me
4K followers 76 following 430 posts
I write javascript
Posts Media Videos Starter Packs
devongovett.me
Thanks! It animates too. 😉
devongovett.me
All of the colors are calculated based on a single CSS variable using relative oklch, so you can change the theme with just one line.

--tint: green;

Modern CSS is amazing! 😲
Screenshot of all the components with various color themes: indigo, blue, green, pink, red, and orange.
devongovett.me
Having a blast re-designing all the React Aria examples this week. Flat design is so over – bring back depth! 😃
Screenshot of various UI elements including textfield, date picker, select, tags, radios, slider, switch, checkbox, buttons, progress bar, table, number field, combobox, and menu.
Reposted by Devon Govett
hipstersmoothie.com
Almost done moving my day job’s design system fully over from Radix to react-aria 🔥🔥🔥

Huge improvement imo. And all without a single API change
devongovett.me
If you’re curious how React Server Components integrate with a bundler, how “use client” actually works, and how RSCs can even benefit client rendered apps, tune into my talk at React Conf at 2:30 PST today!
devongovett.me
What a nice view to wake up to for React Conf!
View overlooking a lake with palm trees in the foreground.
devongovett.me
Yes. We're still planning a TagField, which would allow "inline" editing of the tags (like the gmail "To" field). But you can get pretty close with Select + TagGroup + Autocomplete example I showed.
devongovett.me
devongovett.me
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀

stackblitz.com/edit/rac-sel...
<Select>
  <Label />
  <SelectValue>
    <TagGroup />
  </SelectValue>
  <Button />
  <Popover>
    <Autocomplete>
      <SearchField />
      <ListBox />
    </Autocomplete>
  </Popover>
</Select>
devongovett.me
Here's the demo shown in the video combining a Select with a TagGroup. You can add a TagGroup within a SelectValue and access the selected items via the render prop function. It also uses Autocomplete to allow filtering. Composition ftw! 😀

stackblitz.com/edit/rac-sel...
<Select>
  <Label />
  <SelectValue>
    <TagGroup />
  </SelectValue>
  <Button />
  <Popover>
    <Autocomplete>
      <SearchField />
      <ListBox />
    </Autocomplete>
  </Popover>
</Select>
devongovett.me
Big React Aria release! 🚀

🥳 Multi Select!
🎬 ComboBox onAction prop, e.g. "create" item
➡️ Disclosure animation
✅ New SelectionIndicator component – animations in Tabs, ToggleButtonGroup, etc.
📱 Improved modal behavior in iOS 26
📆 Calendar selectionAlignment

react-spectrum.adobe.com/releases/202...
devongovett.me
Cool. I've been testing it with some React Aria demos I'm working on. Very excited about it.
devongovett.me
No ViewTransition? 😢
devongovett.me
Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

stackblitz.com/edit/rac-swi...
devongovett.me
Btw WCAG actually covers this. But the path to get from each page to the accessibility settings needs to itself be accessible by default so users can find it. www.w3.org/WAI/WCAG21/T...
G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast | WAI | W3C
www.w3.org
devongovett.me
I agree that user customization is helpful, but WCAG is a good default. I don’t think it’s acceptable to make the UI inaccessible by default just because there are settings to change it. Users may not be aware of these settings.
devongovett.me
WCAG says 3:1. I know the algorithm isn’t perfect but the spirit is pretty clear I think. We’ve been working on similar components recently so it’s been on my mind. There are also other ways to pass than a dark border or inverted background, like adding an indicator line, bolding the text etc.
devongovett.me
None of them have enough contrast to tell which one is selected
devongovett.me
Looking forward to speaking at React Conf about how Server Components and bundlers work together!
react.dev
@devongovett.bsky.social will be speaking about Parcel
devongovett.me
You can add a "Create" option to a React Aria ComboBox in just a few lines of code.

stackblitz.com/edit/szjf6ul...
devongovett.me
I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲

Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.

Coming soon to React Aria! 🎉