Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

Commit

Permalink
[MM-38421][MM-38507][MM-38676][MM-38772][MM-38876] - Address style bu…
Browse files Browse the repository at this point in the history
…gs for 6.1 release (#9002)

* Address style bugs for 6.1 release

* Fix snapshots

* QA feedback

* fix linting

* final QA feedback

* Fix tests

* Fix checkmark icon for status dropdown - dnd

* fix menu icon in dark theme

* linter

* rearrange status dropdown checkmark

Co-authored-by: Nevyana Angelova <[email protected]>
Co-authored-by: Mattermod <[email protected]>
  • Loading branch information
3 people authored Oct 19, 2021
1 parent 8bb879e commit 4c37380
Show file tree
Hide file tree
Showing 17 changed files with 467 additions and 66 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components/global/AtMentionsButton should match snapshot 1`] = `
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
id="recentMentions"
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Recent mentions"
id="channel_header.recentMentions"
/>
<Memo(KeyboardShortcutSequence)
hideDescription={true}
isInsideTooltip={true}
shortcut={
Object {
"default": Object {
"defaultMessage": "Recent mentions: Ctrl|Shift|M",
"id": "shortcuts.nav.recent_mentions",
},
"mac": Object {
"defaultMessage": "Recent mentions: ⌘|Shift|M",
"id": "shortcuts.nav.recent_mentions.mac",
},
}
}
/>
</Tooltip>
}
placement="bottom"
trigger={
Array [
"hover",
]
}
>
<ForwardRef
aria-label="Select to toggle a list of recent mentions."
compact={true}
icon="at"
inverted={true}
onClick={[Function]}
size="sm"
toggled={false}
/>
</OverlayTrigger>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';
import {shallow} from 'enzyme';

import IconButton from '@mattermost/compass-components/components/icon-button';

import {GlobalState} from 'types/store';

import AtMentionsButton from './at_mentions_button';

const mockDispatch = jest.fn();
let mockState: GlobalState;

jest.mock('react-redux', () => ({
...jest.requireActual('react-redux') as typeof import('react-redux'),
useSelector: (selector: (state: typeof mockState) => unknown) => selector(mockState),
useDispatch: () => mockDispatch,
}));

describe('components/global/AtMentionsButton', () => {
beforeEach(() => {
mockState = {views: {rhs: {isSidebarOpen: true}}} as GlobalState;
});

test('should match snapshot', () => {
const wrapper = shallow(
<AtMentionsButton/>,
);
expect(wrapper).toMatchSnapshot();
});

test('should show active mentions', () => {
const wrapper = shallow(
<AtMentionsButton/>,
);

wrapper.find(IconButton).simulate('click', {
preventDefault: jest.fn(),
});
expect(mockDispatch).toHaveBeenCalledTimes(1);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@ import IconButton from '@mattermost/compass-components/components/icon-button';

import {closeRightHandSide, showMentions} from 'actions/views/rhs';
import OverlayTrigger from 'components/overlay_trigger';
import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
import {getRhsState} from 'selectors/rhs';
import {GlobalState} from 'types/store';
import Constants, {RHSStates} from 'utils/constants';
import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';

const AtMentionsButton = (): JSX.Element => {
const dispatch = useDispatch();
const rhsState = useSelector((state: GlobalState) => getRhsState(state));
const isRhsOpen = useSelector((state: GlobalState) => getIsRhsOpen(state));

const mentionButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
Expand Down Expand Up @@ -47,7 +46,7 @@ const AtMentionsButton = (): JSX.Element => {
trigger={['hover']}
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
overlay={isRhsOpen ? <></> : tooltip}
overlay={tooltip}
>
<IconButton
size={'sm'}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components/global/AtMentionsButton should match snapshot 1`] = `
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
bsClass="tooltip"
id="recentMentions"
placement="right"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Saved posts"
id="channel_header.flagged"
/>
</Tooltip>
}
placement="bottom"
trigger={
Array [
"hover",
]
}
>
<ForwardRef
aria-label="Select to toggle a list of saved posts."
compact={true}
icon="bookmark-outline"
inverted={true}
onClick={[Function]}
size="sm"
toggled={false}
/>
</OverlayTrigger>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import React from 'react';
import {shallow} from 'enzyme';

import IconButton from '@mattermost/compass-components/components/icon-button';

import {GlobalState} from 'types/store';

import SavedPostsButton from './saved_posts_button';

const mockDispatch = jest.fn();
let mockState: GlobalState;

jest.mock('react-redux', () => ({
...jest.requireActual('react-redux') as typeof import('react-redux'),
useSelector: (selector: (state: typeof mockState) => unknown) => selector(mockState),
useDispatch: () => mockDispatch,
}));

describe('components/global/AtMentionsButton', () => {
beforeEach(() => {
mockState = {views: {rhs: {isSidebarOpen: true}}} as GlobalState;
});

test('should match snapshot', () => {
const wrapper = shallow(
<SavedPostsButton/>,
);
expect(wrapper).toMatchSnapshot();
});

test('should show active mentions', () => {
const wrapper = shallow(
<SavedPostsButton/>,
);

wrapper.find(IconButton).simulate('click', {
preventDefault: jest.fn(),
});
expect(mockDispatch).toHaveBeenCalledTimes(1);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@ import IconButton from '@mattermost/compass-components/components/icon-button';

import {closeRightHandSide, showFlaggedPosts} from 'actions/views/rhs';
import OverlayTrigger from 'components/overlay_trigger';
import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
import {getRhsState} from 'selectors/rhs';
import {GlobalState} from 'types/store';
import Constants, {RHSStates} from 'utils/constants';

const SavedPostsButton = (): JSX.Element | null => {
const dispatch = useDispatch();
const rhsState = useSelector((state: GlobalState) => getRhsState(state));
const isRhsOpen = useSelector((state: GlobalState) => getIsRhsOpen(state));

const savedPostsButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
Expand All @@ -42,7 +41,7 @@ const SavedPostsButton = (): JSX.Element | null => {
trigger={['hover']}
delayShow={Constants.OVERLAY_TIME_DELAY}
placement='bottom'
overlay={isRhsOpen ? <></> : tooltip}
overlay={tooltip}
>
<IconButton
size={'sm'}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -370,7 +370,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -595,7 +595,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -820,7 +820,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -1046,7 +1046,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -1254,7 +1254,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down Expand Up @@ -1458,7 +1458,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
id="status-menu-dnd"
openUp={false}
renderSelected={true}
selectedValueText={false}
rightDecorator={false}
show={true}
subMenu={
Array [
Expand Down
13 changes: 9 additions & 4 deletions components/status_dropdown/status_dropdown.scss
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,11 @@
}
}

#status-menu-dnd_menuitem {
#channelHeaderDropdownIconRight_status-menu-dnd-timed {
margin-top: -15px;
}

#status-menu-dnd-timed_menuitem {
.SubMenuItem.MenuItem {
flex-grow: 1;
}
Expand Down Expand Up @@ -190,10 +194,11 @@
#status-menu-dnd {
padding: 1px 16px;

.MenuItem__primary-text {
.MenuItem__primary-text,
.grid {
display: grid;
align-items: center;
grid-template-columns: auto 1fr auto auto;
grid-template-columns: auto 1fr auto auto auto;

.SubMenu__icon-right {
padding-top: 0;
Expand All @@ -207,7 +212,7 @@
}

#statusDropdownMenu,
#statusDropdownMenu #status-menu-dnd, {
#statusDropdownMenu #status-menu-dnd {
.icon {
top: unset;
width: auto;
Expand Down
4 changes: 2 additions & 2 deletions components/status_dropdown/status_dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,7 @@ export default class StatusDropdown extends React.PureComponent <Props, State> {
<Text margin={'none'}>{`${currentUser.first_name} ${currentUser.last_name}`}</Text>
<Text
margin={'none'}
color={'disabled'}
color={!currentUser.first_name && !currentUser.last_name ? 'secondary' : 'disabled'}
>
{'@' + currentUser.username}
</Text>
Expand Down Expand Up @@ -434,7 +434,7 @@ export default class StatusDropdown extends React.PureComponent <Props, State> {
className={'status-icon'}
/>
)}
selectedValueText={status === 'dnd' && selectedIndicator}
rightDecorator={status === 'dnd' && selectedIndicator}
direction={globalHeader ? 'left' : 'right'}
openUp={this.state.openUp}
id={'status-menu-dnd'}
Expand Down
20 changes: 20 additions & 0 deletions components/widgets/menu/menu.scss
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,14 @@
span {
display: none;
}

@media screen and (max-width: 768px) {
background: none;

.menu-divider {
margin: 0;
}
}
}

.SubMenuItemContainer:not(.hasDivider) {
Expand All @@ -113,6 +121,7 @@
.SubMenu__icon-right {
padding: 0 9px 0 8px;
margin-right: 0;
line-height: 28px;

&.mobile {
padding: 0 4px 0 9px;
Expand All @@ -121,12 +130,23 @@

.styleSelectableItemDiv {
display: flex;
height: 34px;
align-items: center;
justify-content: space-between;
padding: 0 15px;
margin: 0;
}

.grid {
display: grid;
width: 100%;
grid-template-columns: auto 1fr auto auto;
}

.flex {
width: 100%;
}

.sorting-menu-checkbox {
width: 0;
padding-right: 30px;
Expand Down
Loading

0 comments on commit 4c37380

Please sign in to comment.