Very nice scroll mask implementation using registered @ properties by Sam Becker.

Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.

<form>
  <button onClick={handleSubmit} />
</form>

Instead, apply the handleSubmit function to the form onSubmit handler. This ensures the form can be submitted when the user hits the return key.

<form onSubmit={handleSubmit}>
  <button type="submit" />
</form>

If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the form attribute as shown below.

<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />

Quick little improvement for wrapping highlighted text. Make use of box-decoration-break: clone; to ensure elements fragments break across lines.

mark {
  box-decoration-break: clone;
}

View demo on Twitter.

Quick little improvement for elements that render dark even in light mode and have overflow, force the color-scheme to dark to blend the native form controls a bit better.

pre {
  color-scheme: dark;
}

View demo on Twitter.

Stop vertically aligning your checkboxes with center. Instead use baseline to keep it aligned with the first line of the label text.

label {
  display: flex;
  align-items: center; 
  align-items: baseline; 
}

This was a fun layout challenge for some dashboard UI we’ve been working on at Clerk. The structure of the layout contains your typical sidebar and content elements that live side by side.

Simplified markup example of what we are working with:

<div class="header"></div>
<div class="nav"></div>

<div class="layout">
  <div class="sidebar"></div>
  <div class="content">
    <div class="data"></div>
  </div>
</div>

The data element is a large table which i’ve hard coded to cause an overflow that needs to be able to scroll vertically and horizontally but we wanted to make sure that its scroll bars were always within the viewport.

To accomplish this we can make use of contain: size; to ensure the content overflows within its container and not cause the page to need to scroll.

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header {
  width: 100%;
  height: 56px;
}

.nav {
  width: 100%;
  height: 56px;
  position: sticky;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
}

.sidebar {...}

.content {
  overflow: auto;
  contain: size;
}

/* This is simply to cause an overflow to demonstrate the table size */
.data {
  width: 200vw;
  height: 200vh;
}

View the demo CodePen here.

const tags = ["HTML", "CSS", "JavaScript"];

{
  new Intl.ListFormat("en-US").formatToParts(tags).map(({ type, value }) => {
    if (type === "element") {
      return <a href={`/${slugify(value)}`}>{value}</a>;
    }
    return value;
  });
}

which returns the following markup:

<a href="/html">HTML</a>, <a href="/css">CSS</a>, and
<a href="/javascript">JavaScript</a>

.element {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
}

.element.open {
  grid-template-rows: 1fr;
}

References:

• How to animate an element’s height with CSS grid
• Animating CSS Grid (How To + Examples)

React Aria exposing state through the className is super handy. Here we’re using the placement returned to define a Tailwind CSS variable which we can then use in Motion to define its animation direction. View sandbox example here.

<TooltipTrigger isOpen={open} onOpenChange={setOpen}>
  <Button>Trigger</Button>
  <AnimatePresence>
    {open ? (
      <MotionTooltip
        className={({ placement }) =>
          cx({
            "[--y:4px]": placement === "top",
            "[--y:-4px]": placement === "bottom",
          })
        }
        offset={6}
        initial={{ opacity: 0, y: "var(--y)" }}
        animate={{ opacity: 1, y: 0 }}
      >
        Content
      </MotionTooltip>
    ) : null}
  </AnimatePresence>
</TooltipTrigger>