Mobile Release Notes Changelog Block for React

Edit RELEASES at the top of the file. A release has a version, an ISO submitted day, notes and two lanes. A lane has the platform name, its build number, the step labels in order, reached (how many steps are done: the next one is current, and all four means live) and staged, the percent of users reached, or 0 for a store with no staged rollout. The state word beside a lane is taken from the step it is on.

No. They are the catalog's Steps drawn read-only: a list of four numbered markers on a hairline, the done ones filled and the current one with a halo, and the current step marked with aria-current="step". Each title carries a hidden word (Done, Now, Next), so the state never depends on the fill. Nothing in a lane is a button.

The two choices are a segmented control that always keeps one selected. Choosing one redraws the lanes, the rollout bar and the notes, and a visually hidden polite line reads the new states. The page does not move: the lanes always have four steps, and the notes of every release sit unseen in the same cell so the band keeps the height of the tallest.

The share of users a staged release has reached, for the one store that stages it. The bar is a progress bar in foreground tones, and the percent is written beside it, so the figure never depends on the fill. When a release is live for everyone the bar reads 100%.

Below lg each lane puts the platform, build and state on one line above the steps, and the four steps stay in a row with their titles under the markers. Nothing moves sideways at 320 pixels.

The header and the lanes fade up once on load, with CSS transitions, and the markers change colour with a short transition. With reduced motion both are off and the block simply appears.