Repository navigation
[6.x] Make read-only fields easier to spot - #15663
Merged
Merged
Conversation
- Input, Textarea, Combobox, the date/time pickers and AutocompleteEditor now grey themselves out when read only, alongside their existing dashed border - Replaces the publish field's style block, which matched any class containing "border-dashed" - The publish field keeps the greyed label and padlock note
The :read-only selector also matches disabled inputs and textareas, so limit the grey surface to enabled ones.
- Field marks itself with data-ui-field-read-only, and a new read-only-field variant styles controls inside it - Read-only inputs elsewhere (e.g. the updater command, copy to clipboard) look as they did before - Read-only selects now lose their shadow too
Fields that are read only because of permissions, locks or syncing with their origin keep the plain v6 read only style.
The greyed label had no dark colour, so it was dimmer than the "Read Only" note beside it.
- Code, Bard, List, Array, Color, Entries and Assets now get the same grey surface as other read-only fields - Table cells and CodeMirror set their own backgrounds, so those are overridden inside read-only fields - Read-only inputs also lose the dark inset shadow
Dark mode only dims the text now; backgrounds and shadows match 6.x.
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.
Description of the Problem
Closes #15650
In v5, read-only fields were greyed out and had a "Read Only" note next to the label. In v6 they only get a dashed border, which is easy to miss, and clients have been saying they can't tell which fields they're able to edit.
What this PR Does
Fields configured as read only (
visibility: read_only,visibility: computedorread_only: true) now get:This covers text, textarea, select, date, checkboxes, code, Bard, list, array, colour, entries and assets.
Fields that are read only for other reasons (no permission to edit, another user editing, or synced from the origin site) keep the plain dashed border. They aren't explicitly read only, and on a translated entry most fields would end up with a note.
Why only inside fields
The obvious alternative is to grey out every read-only control. But read-only inputs are also used for things you're meant to copy, like the copy to clipboard modal, the updater command and the 2FA secret, and grey makes those look disabled.
So
Fieldnow setsdata-ui-field-read-only, and a newread-only-field:Tailwind variant only applies the styles inside it. Each component still styles itself, the same way v6 already handles the dashed border, so addons using@statamic/cms/uiget it too.Before / After
How to Reproduce
visibility: read_only(orread_only: true) to a blueprint