Ensure clear labels for dialog actions

[enkelmedia]

I actually started an issue about this for Belle years ago but it never really got any traction. While re-working the backoffice I think it's time to raise the issue again.

Many of the labels for primary actions inside dialogs do not really make sense. Here is an example:

The user chooses a icon and then primary action is "Submit"? I think that these labels should be properly named, in this case mabe "Choose" or "Pick" would make more sense.

I'm not sure if "Submit" is some kind of default text somewhere but I think that there should not be any defaults here to force developers to user labels that make sense in the context.

Here is a list of places where we could make changes, each item in the list is also represented with details below.

Defined	Fixed	Element	Context
[x]	[ ]	Document Picker	Property Editor UI
[x]	[x]	Property Settings	Settings > Document Types
[x]	[x]	Property Settings	Settings > Media Types
[x]	[ ]	Document Types Picker	Settings > Document Type > Structure	Done
[x]	[ ]	Select Link	Multi URL Picker (Property Editor UI)
[x]	[ ]	Tree Picker	Tree Picker
[x]	[ ]	Member Picker	Property Editor UI
[ ]	[ ]	Member Group Picker	Property Editor UI
[ ]	[ ]	User Picker	Property Editor UI
[x]	[ ]	Assign Access > Groups	Users -> Edit Users
[ ]	[x]	Assign Access > Content Start Nodes	Users -> Edit Users
[ ]	[ ]	Assign Access > Media Start Nodes	Users -> Edit Users
[x]	[ ]	TinyMce Insert/Edit Link	Content -> RTE -> Insert link
[x]	[ ]	Member -> Choose Groups	Members -> {Member}

Umb.PropertyEditorUi.DocumentPicker

• [ ] Done

The property editor allows us to open the "Select Document" dialog and will keep the state. Basically this means that we're choosing the documents no matter if the uui-ref-list is empty or has selected documents.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select	Choose
1->*	Choose	Select	Choose

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose	Choose
1->*	Choose	Choose	Choose

Umb.PropertyEditorUi.TreePicker

• [ ] Done

The property editor allows us to open the Tree dialog and will keep the state. Basically this means that we're choosing the documents no matter if the uui-ref-list is empty or has selected documents.

By keeping the heading "Choose" we do not have to bather about the content type (Document or Media) being picked.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select	Choose
1->*	Choose	Select	Choose

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose	Choose
1->*	Choose	Choose	Choose

Umb.PropertyEditorUi.MultiUrlPicker

• [ ] Done

The property editor allows us to open the "Link Modal" dialog to append new links. Each link can be opened to edit the link.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Add	Select Link	Submit
1->*	Add	Select Link	Submit

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Add	Add Link	Add
1->*	Add	Edit Link	Update/Save

Document Type Picker

• [ ] Done

Used when editing a document type e.g. to list/pick allowed children. In the modal it would be nice to say "Choose Document Type(s)" but it's a lot easier to just keep the headline to "Choose".

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select	Choose
1->*	Choose	Select	Choose

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose	Choose
1->*	Choose	Choose	Choose

Member Picker

• [ ] Done

Member Picker refers to the Property Editor UI to pick one or more Members. Similar to Document Picker it will keep the state, so "Choose" make most sense here.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select members	Submit
1->*	Choose	Select members	Submit

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose Members	Choose
1->*	Choose	Choose Members	Choose

Member Group Picker

• [ ] Done

Member Picker refers to the Property Editor UI to pick one or more Member Groups. Similar to Document Picker it will keep the state, so "Choose" make most sense here.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select member groups	Submit
1->*	Choose	Select member groups	Submit

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose Member Groups	Choose
1->*	Choose	Choose Member Groups	Choose

User Picker

• [ ] Done

The user picker only allows us to pick one user, it used to be a dropdown in earlier versions. When a selection has been made the button to open the selection modal is hidden. The selection can be removed which will show the modal again.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Add	Select users	Submit
1->*	n/a	n/a	n/a

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose User	Choose
1->*	n/a	n/a	n/a

User - Assign Access - Groups

• [ ] Done

Picker to choose groups for a User. Keep states.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Add	Select User Group	Submit
1->*	Add	Select User Group	Submit

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose User Groups	Choose
1->*	Choose	Choose User Groups	Choose

User - Assign Access - Media Start nodes

• [ ] Done

Picker to choose Media Start nodes for a User. Keep states.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select	Choose
1->*	Choose	Select	Choose

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose Media Start nodes	Choose
1->*	Choose	Choose Media Start nodes	Choose

TinyMCE - Insert / Edit Link

• [ ] Done

This refers to the context where inserting or editing links inside the RTE.

Current	State	UUI-Ref-List Button	Modal Headline	Modal Button
Insert Link	n/a	Select Link	Submit
Edit Link	n/a	Select Link	Submit

Update to	State	UUI-Ref-List Button	Modal Headline	Modal Button
Insert Link	n/a	Insert Link	Insert
Edit Link	n/a	Edit Link	Save

Member -> Choose Groups

• [ ] Done

This refers to the "Member Groups Picker" in the context of creating/editing a Member.

Current	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Select member group	Choose
1->*	Choose	Select member group	Choose

Update to	Items selected	UUI-Ref-List Button	Modal Headline	Modal Button
0	Choose	Choose Member Groups	Choose
1->*	Choose	Choose Member Groups	Choose

Some pointers:

• /src/assets/lang/en-us.ts
• Add = general_add
• Update = general_update
• Submit = general_submit
• Select = buttons_select
• Choose = general_choose
• Done = n/a (bulk_done exists, should probably be moved)

[nielslyngsoe]

@enkelmedia thanks for your input, I agree. The primary button of a dialog should state the action that it carries out.

I did a style guide for Dialogs, which in some way can be transferred to the needs of these Modals. This guide suggests similar naming as you suggested. In general ensure the button that opened the Modal, the headline of the Modal, and the primary action of the modal use the same terms to underline the alignment between these messages.

If your interested the style guide is here on UUI: https://uui.umbraco.com/?path=/story/design-style-guide--dialog

I marked this as up for grabs

[enkelmedia]

@nielslyngsoe Before I "scale out" the approach here, do you thing I'm doing this right or to you have any feedback?

https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1139

[enkelmedia]

Summary of feedback from the first PR: https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1139

Goal is to align headlines and primary action to emphasise the Primary action and its relation to the modal. Guidelines: https://uui.umbraco.com/?path=/story/design-style-guide--dialog When approaching these kind of changes going forward we should:

• Strive to ensure the headline and CTA contains the same word (Add, Update, Choose etc)

[enkelmedia]

@nielslyngsoe I've updated the description of this card to outline concrete examples of changes I would like to make.

Based on the feedback on the last PR https://github.com/umbraco/Umbraco.CMS.Backoffice/pull/1139 I understood you as you would like to be 100% consistent between modal headers and the button in the modal.

I think this make is a great idea in 95% of the cases but I do have one scenario where I'm still not sure I agree.

If we have a list of "things" and a option to "edit" (think of Multi URL Picker), I click on "Edit" and the modal header says "Edit Link" (or something). Given your proposal the button to save the changes in the modal should also say "Edit". I think it would make more sense to use the word "Save", "Update" or "Apply" here.

Could you please review this and let me know what you and the team thinks, then I'd be happy to provide small PRs to fix the texts each of these scenarios.

[nielslyngsoe]

@enkelmedia I think your right. Edit does not sound right, but my English vocabulary is not strong enough to argue why.

I think Update sounds good. Because Save could lead to a misunderstanding as setting such would not save on the server. Apply might be a little technical in my ears, so Update sounds good.

[nielslyngsoe]

@enkelmedia I think the same goes for "TinyMCE - Insert / Edit Link" that should also not be edit, but instead 'Update'.

In general lets try to see if we can get all modals that insert/edit something corrected so they all use the same primary action label.

The rest of the changes listed are really good, thanks for the effort! 👍

[github-actions[bot]]

Hi there @enkelmedia!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot :robot: :slightly_smiling_face: