Skip to content

Commit

Permalink
[BST-186]: Review Fixes: Updated the message menu structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush-chauhan233
ayush-chauhan233 committed Dec 9, 2024
1 parent 1a790bc commit 008d952
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 82 deletions.
2 changes: 1 addition & 1 deletion ...eft_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -501,7 +501,7 @@ exports[`components/global/product_switcher_menu should show integrations should
<li
className="MenuGroup menu-divider"
onClick={[Function]}
role="presentation"
role="separator"
/>
<div
onClick={[Function]}
Expand Down
163 changes: 86 additions & 77 deletions webapp/channels/src/components/post_priority/post_priority_picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,85 +138,94 @@ function PostPriorityPicker({
defaultMessage: 'Message priority',
})}
</Header>
<div>
<Menu
className='Menu'
role='menu'
>
<Menu
className='Menu'
role='menu'
>
<MenuGroup>
<MenuItem
id='menu-item-priority-standard'
onClick={makeOnSelectPriority()}
isSelected={!priority}
icon={<StandardIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.standard',
defaultMessage: 'Standard',
})}
/>
<MenuItem
id='menu-item-priority-important'
onClick={makeOnSelectPriority(PostPriority.IMPORTANT)}
isSelected={priority === PostPriority.IMPORTANT}
icon={<ImportantIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.important',
defaultMessage: 'Important',
})}
/>
<MenuItem
id='menu-item-priority-urgent'
onClick={makeOnSelectPriority(PostPriority.URGENT)}
isSelected={priority === PostPriority.URGENT}
icon={<UrgentIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.urgent',
defaultMessage: 'Urgent',
})}
/>
</MenuGroup>
{(postAcknowledgementsEnabled || persistentNotificationsEnabled) && (
<MenuGroup>
<MenuItem
id='menu-item-priority-standard'
onClick={makeOnSelectPriority()}
isSelected={!priority}
icon={<StandardIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.standard',
defaultMessage: 'Standard',
})}
/>
<MenuItem
id='menu-item-priority-important'
onClick={makeOnSelectPriority(PostPriority.IMPORTANT)}
isSelected={priority === PostPriority.IMPORTANT}
icon={<ImportantIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.important',
defaultMessage: 'Important',
})}
/>
<MenuItem
id='menu-item-priority-urgent'
onClick={makeOnSelectPriority(PostPriority.URGENT)}
isSelected={priority === PostPriority.URGENT}
icon={<UrgentIcon size={18}/>}
text={formatMessage({
id: 'post_priority.priority.urgent',
defaultMessage: 'Urgent',
})}
/>
<li
role='none'
style={{all: 'unset'}}
>
<ul
role='group'
aria-label='Message and Notification Settings'
style={{all: 'unset'}}
>
{postAcknowledgementsEnabled && (
<ToggleItem
disabled={false}
onClick={handleAck}
toggled={requestedAck}
icon={<AcknowledgementIcon size={18}/>}
text={formatMessage({
id: 'post_priority.requested_ack.text',
defaultMessage: 'Request acknowledgement',
})}
description={formatMessage({
id: 'post_priority.requested_ack.description',
defaultMessage: 'An acknowledgement button will appear with your message',
})}
/>
)}
{priority === PostPriority.URGENT && persistentNotificationsEnabled && (
<ToggleItem
disabled={priority !== PostPriority.URGENT}
onClick={handlePersistentNotifications}
toggled={persistentNotifications}
icon={<PersistentNotificationsIcon size={18}/>}
text={formatMessage({
id: 'post_priority.persistent_notifications.text',
defaultMessage: 'Send persistent notifications',
})}
description={formatMessage(
{
id: 'post_priority.persistent_notifications.description',
defaultMessage: 'Recipients will be notified every {interval, plural, one {1 minute} other {{interval} minutes}} until they acknowledge or reply',
}, {
interval,
},
)}
/>
)}
</ul>
</li>
</MenuGroup>
{(postAcknowledgementsEnabled || persistentNotificationsEnabled) && (
<MenuGroup>
{postAcknowledgementsEnabled && (
<ToggleItem
disabled={false}
onClick={handleAck}
toggled={requestedAck}
icon={<AcknowledgementIcon size={18}/>}
text={formatMessage({
id: 'post_priority.requested_ack.text',
defaultMessage: 'Request acknowledgement',
})}
description={formatMessage({
id: 'post_priority.requested_ack.description',
defaultMessage: 'An acknowledgement button will appear with your message',
})}
/>
)}
{priority === PostPriority.URGENT && persistentNotificationsEnabled && (
<ToggleItem
disabled={priority !== PostPriority.URGENT}
onClick={handlePersistentNotifications}
toggled={persistentNotifications}
icon={<PersistentNotificationsIcon size={18}/>}
text={formatMessage({
id: 'post_priority.persistent_notifications.text',
defaultMessage: 'Send persistent notifications',
})}
description={formatMessage(
{
id: 'post_priority.persistent_notifications.description',
defaultMessage: 'Recipients will be notified every {interval, plural, one {1 minute} other {{interval} minutes}} until they acknowledge or reply',
}, {
interval,
},
)}
/>
)}
</MenuGroup>
)}
</Menu>
</div>
)}
</Menu>
{postAcknowledgementsEnabled && (
<Footer>
<button
Expand Down
4 changes: 2 additions & 2 deletions webapp/channels/src/components/post_priority/post_priority_picker_item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ItemButton = styled.button`
align-items: center !important;
`;

const Wrapper = styled.div`
const Wrapper = styled.li`
cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
&:hover {
Expand Down Expand Up @@ -116,7 +116,7 @@ function ToggleItem({
<Wrapper
onClick={disabled ? undefined : onClick}
disabled={disabled}
role='button'
role='menuitemcheckbox'
>
<ToggleMain>
{icon}
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/widgets/menu/menu_group.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ describe('components/MenuItem', () => {
<li
className="MenuGroup menu-divider"
onClick={[Function]}
role="presentation"
role="separator"
/>
text
</Fragment>
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/widgets/menu/menu_group.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const MenuGroup = (props: Props) => {
<li
className='MenuGroup menu-divider'
onClick={handleDividerClick}
role='presentation'
role='separator'
/>
);

Expand Down

0 comments on commit 008d952

Please sign in to comment.