Contribution: Noneditable User Interface Elements

[shixiedesign]

@kaylarakower commented on Thu May 23 2019

Name: Noneditable User Interface Elements

Research: Users of the Enterprise CMS have a form that authors edit and approvers review. Approvers should not be able to edit the form, but need to review for errors and return to the editor to revised as needed. I was directed by Tom Dayton to Sun Web Application, 6.8.1 Noneditable User Interface Elements, which describes this exact use case.

Images: https://ibm.box.com/s/172j35uz1f0ulclf4x3l7vl508apenvy
Sketch file: https://ibm.box.com/s/wfjtwupcp4fcazuplwuzbn871ebx1qeh

Contributing team: DrupalOne
Contributing designer: Kayla Rakower, kayla.rakower@ibm.com
Contributing developer: Chris Wilson, ccwilson@us.ibm.com

---

@designertyler commented on Wed Jun 19 2019

Hi @kaylarakower thanks for submitting!

There's a PR open right now to include a read-only state for the text field. Would these specs work for your needs? #3018

---

@kaylarakower commented on Wed Jun 19 2019

@designertyler This design was created for a slightly use case as none of the fields would be editable, so there is a different state for the accordion as well which I do not believe is covered in #3018. Added a link to this design to that ticket.

---

@shixiedesign commented on Thu Jun 20 2019

This feels like a larger component – should we add an alternative form variant? @designertyler @aagonzales This layout could be useful in some situations (probably more common in digital/editorial).

If yes, then there has to be different inputs styling.

This is an enhancement category issue though. We will evaluate in more detail next month. Will transfer issue to main carbon repo. Thanks!

[aagonzales]

@kaylarakower this looks very similar to a structure list, how is it different? If its non-editable, is there also an editable version?

[kaylarakower]

@aagonzales correct, it is almost the same as the structure list. The only additional visual feature is the headline, which in the editable form, is the accordion.

The major difference is the relationship between the editable form and the list. In this screen, please refer to the text describing the scenarios to how the content is translated from the editable form to the read-only form. This was taken directly from the sun web application guidelines.

Depending on the state of the form and/or user access, editing is enabled.

[aagonzales]

@kaylarakower I don't have permissions to view to the images in box. And the "editing is enabled" link didn't take me anywhere.

I think it might help us in the future if you share all these things in the issue itself so we're not having to jump around to different places. You can make selective editing choices for confidential content on screens if need be.

[kaylarakower]

@aagonzales the links are set to be visible to anyone within the enterprise. Unfortunately I cannot share the links directly or change the permissions as they would reveal information pertaining to an internal product. I am happy to elaborate when we chat next week.

[aagonzales]

@kaylarakower oh I figured it out, you can't place box links with permission in the a [](url) syntax. Only the direct link will work, I had to "edit" view your comment to get the real link.

The editing is enable link is still broken doing that as well. Looks like it might to be the page url instead of the shared link from box.

[shixiedesign]

I just posted a screenshot of the sketch-file in issue description for those who can't download the files.

[kaylarakower]

Spoke to @aagonzales today and I will work on developing this concept further to better align with the editable state.

[aagonzales]

✅ Experimental status approved

Moving forward this component will go into experimental to start with. I have approved @kaylarakower latest designs. Her developers will be building and contributing this component.

[kaylarakower]

Changed title of contribution to "Form Summary"

[kaylarakower]

Updated sketch file: https://ibm.box.com/s/rl5gwdxkf0jirnv78zsb5klqqyioay59

[kaylarakower]

Logic:

1. IF a form has 2 columns AND one field is left blank, the field takes up the full width.
2. IF 1 field is left blank AND there is no field to the left/right of it, THEN the field below moves up as if it wasn't there.
3. IF a form has 2 columns AND one field is left blank AND the other field to the left/right is left blank, then THEN the field below moves up as if it wasn't there.

[kaylarakower]

Update: My team will not be able to contribute the development of this feature, @aagonzales please add to dev backlog

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[sstrubberg]

Closing in favor of the Read-only Inputs proposal.
#3125