Problem/Motivation

By fixing #2866383: Readonly doesn't work on #States there is a lack of the visually indication if a field is readonly.
I think we should use the disabled state or introduce a new visual guide.

Steps to reproduce

Add readonly to any textfield nothing change

Proposed resolution

Add a new css selector for apply disabled to readonly style.

.form-element[disabled],
.form-element[readonly]

Remaining tasks

User interface changes

Supporting readonly state along with disabeld state by indicating the user there is something special with the field like no editing possibility.

API changes

-

Data model changes

-

Release notes snippet

-

CommentFileSizeAuthor
#6 3363533-2.patch1.12 KBzeeshan_khan
#6 readonly-after.png299.1 KBzeeshan_khan
#6 readyonly-before.png365.01 KBzeeshan_khan
#3 3363533-screenshot-1.png501.58 KBravi kant
#2 3363533-1.patch1.12 KBVidushi Mehta

Issue fork drupal-3363533

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

sunlix created an issue. See original summary.

Vidushi Mehta’s picture

Vidushi Mehta commented
Status: Active » Needs review
StatusFileSize
new 3363533-1.patch1.12 KB

Added a patch for the same

ravi kant’s picture

ravi kant commented
StatusFileSize
new 3363533-screenshot-1.png501.58 KB

The patch is working but we do not need this patch because the webform providing style already for readonly and disabled type filed. Attaching screenshot for more clarification.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs screenshots

before/after screenshots should be added to the issue summary.

@ravi kant is that class coming from a contrib module?

mukeysh’s picture

mukeysh commented

in #3 @ravi kant mentioned web form provides the default state for read-only and disabled but this CSS comes from the webform module which is the contrib module.

We need readonly styling in the claro theme as well.

zeeshan_khan’s picture

zeeshan_khan commented
StatusFileSize
new readyonly-before.png365.01 KB
new readonly-after.png299.1 KB
new 3363533-2.patch1.12 KB

@Mukeysh - make sense!
Added code with before/after png

zeeshan_khan’s picture

zeeshan_khan commented
Status: Needs work » Needs review
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Postponed (maintainer needs more info)
Issue tags: -Needs screenshots

I don't think we should be applying the disabled styles either because disabled elements are not the same as readonly. The styles for disabled elements have been designed for that specific use case.

Are there convention to how read only fields should be styled? I checked some common design systems like Bootstrap and it looks like they also don't style the readonly fields.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

smustgrave’s picture

smustgrave commented
Status: Postponed (maintainer needs more info) » Closed (outdated)

Since this hasn't had a follow up in 2 years going to say it's outdated, if still valid though please re-open addressing #8

Thanks