[HOLD for payment 2024-01-17] [$500] HIGH: Improve formatting of People in this workspace can find your room message

[quinthar]

Problem:
The People in this workspace can find your room message here is visually disconnected from the visibility selector:

Solution:
Redesign this field to be more like the "priority mode" selector, where the messages are in the selections themselves:

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0123449fd9ddb566ea
• Upwork Job ID: 1734735737424388096
• Last Price Increase: 2023-12-13
• Automatic offers:
• s77rt | Reviewer | 28071605
• esh-g | Contributor | 28071606

[quinthar]

@shawnborton coming through with a great mockup:

[quinthar]

@mallenexpensify I see you assigned yourself; can you clean this up and get a contributor on it?

[esh-g]

Proposal

Please re-state the problem we are trying to solve

The People in this workspace can find your room message here is visually disconnected from the visibility selector

What is the root cause of the problem?

The ValueSelectorModal does not have a field for alternateText here:

App/src/components/ValuePicker/ValueSelectorModal.js

Lines 43 to 45 in 4239252

	useEffect(() => {
	const itemsData = _.map(items, (item) => ({value: item.value, keyForList: item.value, text: item.label, isSelected: item === selectedItem}));
	setSectionsData(itemsData);

What changes should be made to fix this?

We already pass a description to the ValuePicker with the item prop from the WorkspaceNewRoomPage.js we just need to use it as alternateText in the ValueSelectorModal, so that it can be passed into the SectionList properly here:

App/src/components/ValuePicker/ValueSelectorModal.js

Lines 43 to 45 in 4239252

	useEffect(() => {
	const itemsData = _.map(items, (item) => ({value: item.value, keyForList: item.value, text: item.label, isSelected: item === selectedItem}));
	setSectionsData(itemsData);

This can be done by adding a property to the object like this:

{alternateText: item.description}

We can also possibly rename the description to alternateText in WorkspaceNewRoomPage.js as well.

Result

Additional changes (Optional)

I also noticed some additional changes can be done to mimic the design provided here more closely

• Use the furtherDetails prop to pass the description for the visibility which is already defined in MenuItem. So, in WorkspaceNewRoomPage.js we can pass furtherDetails={visibilityDescription} to the ValuePicker. We also need to modify the ValuePicker component to accept the prop and pass it to MenuItemWithTopDescription internally. Then in MenuItem we also need to make some changes because currently, if we want to pass furtherDetails we also need furtherDetailsIcon since in this case we don't need an icon (or maybe we could add a help icon), we can make the icon optional and remove the horizontal padding if icon is not passed. This would mean no addtional prop required for the MenuItem.

• Make the title of every item bold like in the design
  

  App/src/components/SelectionList/BaseListItem.js

  Line 92 in 4239252

  isUserItem || item.isSelected ? styles.sidebarLinkTextBold : null,

  
  We can modify this to be bold every time alternateText is provided like this:

(isUserItem || item.isSelected) || item.alternateText ? styles.sidebarLinkTextBold : null,

• We can also possibly add some margin between the title and the alternateText if it exists to make it look better, since all titles are bold by adding this style:

item.alternateText ? styles.mb1 : null,

• We can also possibly make the supporting text smaller.

Result

Screen.Recording.2023-12-13.at.9.51.23.PM.mov

The additional changes section provides some optional changes that we can make or not depending on the design requirements.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0123449fd9ddb566ea