Impact Badges Changelog Block for React

Each level is a small object at the top of the file: an id, a label and lit, the number of bars that are filled (one to four). Give a change one of them as its impact. The four counts in the band are computed from the list, so they always match the rows.

Colour alone fails for anyone who can't tell the hues apart, and in a greyscale or high-contrast theme nothing would be left. The meter's bars are decoration (hidden from assistive technology); the word beside them, with a visually hidden "Impact:" in front, carries the meaning.

The Select holds two orders. Impact lists the highest level first and, within a level, the newest first; Date lists the newest first. Both are computed once from the typed list, and a polite status line reads the new order out. The rows are the same seven, so sorting never changes the block's height.

It looks and behaves the same, but each base wires it with its own props: a collection on Ark UI, items on Base UI, plain values on Radix and keys on React Aria. The chosen value is announced by the select itself and by the status line.

On a phone the Select sits under the header, the four counts stay in one row with their meters above their labels, and each row puts its meter above the title and its version and day under the sentence. In a right-to-left layout the text mirrors, while the meters, versions and dates keep their reading order.

The header and the lists fade up once on load. Changing the sort swaps the rows at once, with no animation. With reduced motion the entrance is off and the block simply appears.