equinor / flyt

Equinor Flyt (aka. VSM - Value Stream Mapping)
https://flyt.equinor.com
MIT License
4 stars 1 forks source link

SIPOC helper text #759

Open VetleW opened 2 weeks ago

VetleW commented 2 weeks ago

Add describing helper text to greencards to guide users.

Figma design

Supplier text:

  1. Who or what supplies the Input? List the Supplier(s) (e.g. collaborators, data systems, plans, requirements)

Input text:

  1. What triggers you to begin the process? List the Input(s), (eg. information, materials, tools, a weekly meeting etc)

Output text:

  1. What are the key deliverables or results of the process? List the Output(s).

Customer text:

  1. Which role or system recieves the Output? List the Customer(s).
nesadrian commented 1 week ago

@VetleW If I understand it correctly the helper text should be displayed when the card does not have any description. I think it would be nice to have the text permanently in the sidebar aswell. This way the user won't have to open an empty process or delete the description in order to see the helper text.

nesadrian commented 1 week ago

Should the card header color be changed to black like in the design? At the moment we have grey text for headers. The headers also disappears when a user adds a description to the card. The description text color is black.

Image

VetleW commented 5 days ago

@VetleW If I understand it correctly the helper text should be displayed when the card does not have any description. I think it would be nice to have the text permanently in the sidebar aswell. This way the user won't have to open an empty process or delete the description in order to see the helper text.

Totally agree! Would be nice to keep the text in the sidebar aswell. And I do think the header should be more visible. Maybe it should still be visible even after users have written on the card?

nesadrian commented 5 days ago

It's definitely a possibility now that we have the card tooltip. We can discuss this further in the meeting.

nesadrian commented 5 days ago

As discussed in the meeting: No green card description: Black header text and gray helper text With green card description: Gray header text and no helper text

nesadrian commented 5 days ago

@VetleW What do you think about this?

Image

VetleW commented 5 days ago

Looks good to me, but could you check what it would look like just below the heading and above the inputfield?

nesadrian commented 5 days ago

I prefer the first alternative. This one feels a bit more cluttered to me.

image

nesadrian commented 2 days ago

This is ready for test