Component

RulerRise

It turns a ruler dragged across a row into a one-way elevation order. Each marker the ruler passes raises the next child onto a higher visible step and keeps it there until the whole row has climbed or the staircase is lowered.

Possible use

It could be used to make a reviewer physically raise the fields that deserve attention on a handoff card, or to let a presenter elevate agenda items into a literal staircase as they are discussed.

Reasonable alternative

A reasonable local alternative is an array index and one conditional class in the page. This component should not have existed because a ruler crossing a line is not evidence that content deserves a higher place.

01 / Preview

Try it yourself.

Title

Status

Owner

Date

Drag the ruler across the rail. Each passed marker raises one field and keeps it raised.

Mechanism

1: Start with four fields resting on one line.
2: Drag the ruler past each marker, or focus it and press ArrowRight.
3: Every passed field climbs onto a higher step and stays there.
4: Use Lower all to return the fields to the floor.

02 / Usage

Put it somewhere.

example.tsxTSX

import { RulerRise } from "gra-ui";
import "gra-ui/styles.css";

export function RaisedBrief() {
  return (
    <RulerRise>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </RulerRise>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces that rise one at a time when the ruler passes their markers.