fix/ O3-2253:Marking a field as readonly should render the field control as opposed to switching to view mode

[arodidev]

Requirements

• This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

In "edit" and "enter" mode, the fields marked as read-only should render the controlled in readOnly mode and not the default view mode display

Screenshots

Related Issue

Link to community ticket: https://issues.openmrs.org/browse/O3-2303

Other

[arodidev]

@samuelmale @ibacher there is an issue with the carbon radio component ignoring the readOnly attribute passed to it, perhaps it has to do with the carbon version...

[ibacher]

@arodidev That's nothing to do with Carbon. The underlying HTML input element doesn't support a readonly attribute for all input types. It should be defined (probably in the ticket) what the behaviour for those fields should be.

[samuelmale]

@ibacher I agree there is no native support for readonly for the radio element but the latest version of Carbon somehow supports this. I guess it's a CCS tweak in the radio group.

[samuelmale]

LGTM

[ibacher]

@samuelmale Yeah, I missed that when I looked at Storybook earlier. The readOnly attribute can be applied to the RadioButtonGroup component, not the RadioButton component, although there, they just block onChange() from doing anything and apply some styles.

[samuelmale]

The readOnly attribute can be applied to the RadioButtonGroup component, not the RadioButton component

@ibacher you're correct, but it doesn't work with our supported Carbon version.

[ibacher]

@samuelmale True... but we could always just add the "do nothing" on change handler if the field is set to read-only right?

[samuelmale]

@ibacher that's a brilliant idea but assuming the radio buttons remain interactive, wouldn't this confuse the users?

[ibacher]

That's true. We could also add the same Sass rule that gets applied:

  @use "@carbon/colors";
  .cds--radio-button-group--readonly
    .cds--radio-button
    + .cds-radio-button__label
    .cds--radio-button__appearance {
    border-color: colors.$icon-disabled;
  }

  .cds--radio-button-group--readonly .#{$prefix}--radio-button__label {
    cursor: default;
  }

  .cds--radio-button-group--readonly
    .cds--radio-button__label-text {
    cursor: text;
    user-select: text;
  }

Then just add the .cds--radio-button-group--readonly to RadioButtonGroup. The BEM class structure and entity layout is the same, just the rules aren't present yet.

The important thing there is it sets the border-color to disabled while leaving the text alone.