v6: Add a check-mark confirmation to the Settings Clear Data button#4401
Merged
Conversation
Uses the standard Button component instead of unstyled markup. On click, shows a brief green checkmark next to the label instead of turning the whole button green, matching the collections plugin's share confirmation. Refs: #4219
🦋 Changeset detectedLatest commit: 294df48 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
…n place Restyle the Settings "Clear data" button to the segmented-control scale (`font-size-small`, weight 500, `letter-spacing-ui`, `bg-subtle` + `border-muted`) with 4px vertical padding so it matches a full segmented bar's height. On click the label cross-fades to a green check in place and back, keeping a fixed footprint and the button's accessible name, plus an `sr-only` live region announcing "Data cleared". Respects `prefers-reduced-motion`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Settings dialog's "Clear data" button was unstyled, and clicking it turned the whole button green. This restyles it to match the segmented controls it sits beside — same typography (
font-size-small, weight 500,letter-spacing-ui),bg-subtlefill +border-mutedborder, and the same height as a full segmented bar (4px vertical padding = a segment cell's 3px plus the track's own 1px). It no longer reads as a foreign element in that row.On click, the label cross-fades to a green checkmark in place and back after ~1.5s — rather than the check appearing beside the label. The label stays in the DOM (at
opacity: 0) so the button keeps a fixed width and its accessible name, and ansr-onlylive region announces "Data cleared" for screen-reader users. The swap respectsprefers-reduced-motion.Test plan
Refs: #4219