mirror of
https://github.com/mattermost/mattermost.git
synced 2026-05-28 04:35:04 -04:00
feat: Add tooltips to channel info RHS top buttons (#29170)
* feat: Add tooltips to channel info RHS top buttons * style: address linting issues * feat: Add accessibility ids to Tooltips in top_buttons.tsx * leverage WithTooltip for standardized styling --------- Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Jesse Hallam
GitHub
parent
ef46f8e164
commit
7c6f1d4554
3 changed files with 109 additions and 35 deletions
|
|
@ -91,6 +91,31 @@ describe('Channel Info RHS', () => {
|
|||
|
||||
describe('regular channel', () => {
|
||||
describe('top buttons', () => {
|
||||
it('should show correct tooltips for all buttons', () => {
|
||||
// # Go to test channel
|
||||
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
|
||||
|
||||
// # Click on the channel info button
|
||||
cy.get('#channel-info-btn').click();
|
||||
|
||||
// * Verify tooltips appear with correct text
|
||||
cy.uiGetRHS().findByText('Favorite').trigger('mouseover');
|
||||
cy.get('#favorite-tooltip').should('be.visible').and('have.text', 'Add this channel to favorites');
|
||||
cy.uiGetRHS().findByText('Favorite').trigger('mouseout');
|
||||
|
||||
cy.uiGetRHS().findByText('Mute').trigger('mouseover');
|
||||
cy.get('#mute-tooltip').should('be.visible').and('have.text', 'Mute notifications for this channel');
|
||||
cy.uiGetRHS().findByText('Mute').trigger('mouseout');
|
||||
|
||||
cy.uiGetRHS().findByText('Add People').trigger('mouseover');
|
||||
cy.get('#add-people-tooltip').should('be.visible').and('have.text', 'Add team members to this channel');
|
||||
cy.uiGetRHS().findByText('Add People').trigger('mouseout');
|
||||
|
||||
cy.uiGetRHS().findByText('Copy Link').trigger('mouseover');
|
||||
cy.get('#copy-link-tooltip').should('be.visible').and('have.text', 'Copy link to this channel');
|
||||
cy.uiGetRHS().findByText('Copy Link').trigger('mouseout');
|
||||
});
|
||||
|
||||
it('should be able to toggle favorite on a channel', () => {
|
||||
// # Go to test channel
|
||||
cy.visit(`/${testTeam.name}/channels/${testChannel.name}`);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {useIntl, FormattedMessage} from 'react-intl';
|
|||
import styled from 'styled-components';
|
||||
|
||||
import useCopyText from 'components/common/hooks/useCopyText';
|
||||
import WithTooltip from 'components/with_tooltip';
|
||||
|
||||
import Constants from 'utils/constants';
|
||||
|
||||
|
|
@ -122,50 +123,94 @@ export default function TopButtons({
|
|||
|
||||
return (
|
||||
<ChannelInfoRhsTopButtons>
|
||||
<Button
|
||||
onClick={actions.toggleFavorite}
|
||||
className={isFavorite ? 'active' : ''}
|
||||
<WithTooltip
|
||||
placement='top'
|
||||
id='favorite-tooltip'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.favorite.tooltip'
|
||||
defaultMessage='Add this channel to favorites'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<i className={'icon ' + favoriteIcon}/>
|
||||
</div>
|
||||
<span>{favoriteText}</span>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={actions.toggleMute}
|
||||
className={isMuted ? 'active' : ''}
|
||||
>
|
||||
<div>
|
||||
<i className={'icon ' + mutedIcon}/>
|
||||
</div>
|
||||
<span>{mutedText}</span>
|
||||
</Button>
|
||||
{canAddPeople && (
|
||||
<Button
|
||||
onClick={actions.addPeople}
|
||||
className={isInvitingPeople ? 'active' : ''}
|
||||
onClick={actions.toggleFavorite}
|
||||
className={isFavorite ? 'active' : ''}
|
||||
>
|
||||
<div>
|
||||
<i className='icon icon-account-plus-outline'/>
|
||||
<i className={'icon ' + favoriteIcon}/>
|
||||
</div>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.add_people'
|
||||
defaultMessage='Add People'
|
||||
/>
|
||||
</span>
|
||||
<span>{favoriteText}</span>
|
||||
</Button>
|
||||
</WithTooltip>
|
||||
<WithTooltip
|
||||
placement='top'
|
||||
id='mute-tooltip'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.mute.tooltip'
|
||||
defaultMessage='Mute notifications for this channel'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={actions.toggleMute}
|
||||
className={isMuted ? 'active' : ''}
|
||||
>
|
||||
<div>
|
||||
<i className={'icon ' + mutedIcon}/>
|
||||
</div>
|
||||
<span>{mutedText}</span>
|
||||
</Button>
|
||||
</WithTooltip>
|
||||
{canAddPeople && (
|
||||
<WithTooltip
|
||||
id='add-people-tooltip'
|
||||
placement='top'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.add_people.tooltip'
|
||||
defaultMessage='Add team members to this channel'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={actions.addPeople}
|
||||
className={isInvitingPeople ? 'active' : ''}
|
||||
>
|
||||
<div>
|
||||
<i className='icon icon-account-plus-outline'/>
|
||||
</div>
|
||||
<span>
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.add_people'
|
||||
defaultMessage='Add People'
|
||||
/>
|
||||
</span>
|
||||
</Button>
|
||||
</WithTooltip>
|
||||
)}
|
||||
{canCopyLink && (
|
||||
<CopyButton
|
||||
onClick={copyLink.onClick}
|
||||
className={copyLink.copiedRecently ? 'success' : ''}
|
||||
<WithTooltip
|
||||
id='copy-link-tooltip'
|
||||
placement='top'
|
||||
title={
|
||||
<FormattedMessage
|
||||
id='channel_info_rhs.top_buttons.copy_link.tooltip'
|
||||
defaultMessage='Copy link to this channel'
|
||||
/>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<i className={'icon ' + copyIcon}/>
|
||||
</div>
|
||||
<span>{copyText}</span>
|
||||
</CopyButton>
|
||||
<CopyButton
|
||||
onClick={copyLink.onClick}
|
||||
className={copyLink.copiedRecently ? 'success' : ''}
|
||||
>
|
||||
<div>
|
||||
<i className={'icon ' + copyIcon}/>
|
||||
</div>
|
||||
<span>{copyText}</span>
|
||||
</CopyButton>
|
||||
</WithTooltip>
|
||||
)}
|
||||
</ChannelInfoRhsTopButtons>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3237,11 +3237,15 @@
|
|||
"channel_info_rhs.menu.notification_preferences": "Notification Preferences",
|
||||
"channel_info_rhs.menu.pinned": "Pinned messages",
|
||||
"channel_info_rhs.top_buttons.add_people": "Add People",
|
||||
"channel_info_rhs.top_buttons.add_people.tooltip": "Add team members to this channel",
|
||||
"channel_info_rhs.top_buttons.copied": "Copied",
|
||||
"channel_info_rhs.top_buttons.copy": "Copy Link",
|
||||
"channel_info_rhs.top_buttons.copy_link.tooltip": "Copy link to this channel",
|
||||
"channel_info_rhs.top_buttons.favorite": "Favorite",
|
||||
"channel_info_rhs.top_buttons.favorite.tooltip": "Add this channel to favorites",
|
||||
"channel_info_rhs.top_buttons.favorited": "Favorited",
|
||||
"channel_info_rhs.top_buttons.mute": "Mute",
|
||||
"channel_info_rhs.top_buttons.mute.tooltip": "Mute notifications for this channel",
|
||||
"channel_info_rhs.top_buttons.muted": "Muted",
|
||||
"channel_invite.addNewMembers": "Add people to {channel}",
|
||||
"channel_invite.invite_guest": "Invite as a Guest",
|
||||
|
|
|
|||
Loading…
Reference in a new issue