Skip to content

Commit 4d6ee2a

Browse files
carrillo-erikcarrillo-erik
authored
refactor: [M3-6286] - SRC > Features > TopMenu (#9498)
* refactor: [M3-6286] - SRC > Features > TopMenu * Update import for storybook * Update import for TopMenu stories file * Separate styled comp into own file & pr feedback * Fix searchbar defect and replace div's with Box * Add changeset * Remove important from styles
1 parent 34f22a3 commit 4d6ee2a

18 files changed

+299
-354
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,6 @@
6868
"version": "0.0.0",
6969
"volta": {
7070
"node": "18.14.1"
71-
}
71+
},
72+
"dependencies": {}
7273
}

‎packages/manager/.changeset/pr-9498-tech-stories-1691768096558.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Tech Stories
3+
---
4+
5+
MUI v5 migration src > features > TopMenu ([#9498](https://github.com/linode/manager/pull/9498))

‎packages/manager/src/MainContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
useNotificationContext,
2727
} from 'src/features/NotificationCenter/NotificationContext';
2828
import ToastNotifications from 'src/features/ToastNotifications';
29-
import TopMenu from 'src/features/TopMenu';
29+
import { TopMenu } from 'src/features/TopMenu/TopMenu';
3030
import VolumeDrawer from 'src/features/Volumes/VolumeDrawer';
3131
import { useAccountManagement } from 'src/hooks/useAccountManagement';
3232
import { useFlags } from 'src/hooks/useFlags';

‎packages/manager/src/components/EnhancedSelect/Select.styles.ts

-50
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,6 @@ export const useStyles = makeStyles()((theme: Theme) => ({
2424
hideLabel: {
2525
'& label': { ...theme.visually.hidden },
2626
},
27-
highlight: {
28-
color: theme.palette.primary.main,
29-
},
3027
icon: {
3128
color: theme.palette.primary.main,
3229
display: 'inline-block',
@@ -76,10 +73,6 @@ export const useStyles = makeStyles()((theme: Theme) => ({
7673
noOptionsMessage: {
7774
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
7875
},
79-
resultContainer: {
80-
display: 'flex',
81-
flexFlow: 'row nowrap',
82-
},
8376
root: {
8477
'& .react-select__clear-indicator': {
8578
'& svg': {
@@ -271,49 +264,6 @@ export const useStyles = makeStyles()((theme: Theme) => ({
271264
marginTop: `calc(${theme.spacing(1)} / 4)`,
272265
paddingLeft: theme.spacing(1),
273266
},
274-
suggestionDescription: {
275-
color: theme.color.headline,
276-
fontSize: '.75rem',
277-
marginTop: 2,
278-
},
279-
suggestionIcon: {
280-
alignItems: 'center',
281-
display: 'flex',
282-
justifyContent: 'center',
283-
marginLeft: theme.spacing(1.5),
284-
},
285-
suggestionItem: {
286-
padding: theme.spacing(),
287-
},
288-
suggestionRoot: {
289-
'&:last-child': {
290-
borderBottom: 0,
291-
},
292-
alignItems: 'space-between',
293-
borderBottom: `1px solid ${theme.palette.divider}`,
294-
cursor: 'pointer',
295-
justifyContent: 'space-between',
296-
[theme.breakpoints.up('md')]: {
297-
display: 'flex',
298-
},
299-
width: 'calc(100% + 2px)',
300-
},
301-
suggestionTitle: {
302-
color: theme.palette.text.primary,
303-
fontSize: '1rem',
304-
fontWeight: 600,
305-
wordBreak: 'break-all',
306-
},
307-
tagContainer: {
308-
'& > div': {
309-
margin: '2px',
310-
},
311-
alignItems: 'center',
312-
display: 'flex',
313-
flexWrap: 'wrap',
314-
justifyContent: 'flex-end',
315-
paddingRight: 8,
316-
},
317267
}));
318268

319269
// @todo @tdt: Replace the class name based styles above with these. They're (mostly) copied over,

‎packages/manager/src/components/TopMenu.stories.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas, Meta, Story } from '@storybook/addon-docs';
22
import { profileFactory } from 'src/factories';
3-
import TopMenu from 'src/features/TopMenu/TopMenu';
3+
import { TopMenu } from 'src/features/TopMenu/TopMenu';
44
import { useProfile } from 'src/queries/profile';
55

66
<Meta title="Features/Navigation/Top Menu" component={TopMenu} />

‎packages/manager/src/features/Help/Panels/AlgoliaSearchBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { makeStyles } from 'tss-react/mui';
88

99
import EnhancedSelect, { Item } from 'src/components/EnhancedSelect';
1010
import { Notice } from 'src/components/Notice/Notice';
11-
import { selectStyles } from 'src/features/TopMenu/SearchBar';
11+
import { selectStyles } from 'src/features/TopMenu/SearchBar/SearchBar';
1212

1313
import withSearch, { AlgoliaState as AlgoliaProps } from '../SearchHOC';
1414
import { SearchItem } from './SearchItem';

‎packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.test.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1+
import { fireEvent } from '@testing-library/react';
2+
import { createMemoryHistory } from 'history';
13
import React from 'react';
24
import { Router } from 'react-router-dom';
3-
import { createMemoryHistory } from 'history';
4-
import { fireEvent } from '@testing-library/react';
5-
import { AddNewMenu } from './AddNewMenu';
5+
66
import { renderWithTheme } from 'src/utilities/testHelpers';
77

8+
import { AddNewMenu } from './AddNewMenu';
9+
810
describe('AddNewMenu', () => {
911
test('renders the Create button', () => {
1012
const { getByText } = renderWithTheme(<AddNewMenu />);

‎packages/manager/src/features/TopMenu/AddNewMenu/AddNewMenu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ export const AddNewMenu = () => {
3939
const theme = useTheme();
4040
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
4141
const flags = useFlags();
42-
4342
const open = Boolean(anchorEl);
4443

4544
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
4645
setAnchorEl(event.currentTarget);
4746
};
47+
4848
const handleClose = () => {
4949
setAnchorEl(null);
5050
};

‎packages/manager/src/features/TopMenu/NotificationMenu/index.ts

-3
This file was deleted.

‎packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts

+81-136
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,86 @@
1-
import { Theme } from '@mui/material/styles';
2-
import { WithStyles, createStyles, withStyles } from '@mui/styles';
1+
import { styled } from '@mui/material/styles';
32

4-
type ClassNames =
5-
| 'close'
6-
| 'icon'
7-
| 'input'
8-
| 'navIconHide'
9-
| 'root'
10-
| 'textfield'
11-
| 'textfieldContainer';
3+
import { IconButton } from 'src/components/IconButton';
124

13-
export type StyleProps = WithStyles<ClassNames>;
5+
export const StyledIconButton = styled(IconButton, {
6+
label: 'StyledIconButton',
7+
})(({ theme }) => ({
8+
'& > span': {
9+
justifyContent: 'flex-end',
10+
},
11+
'& svg': {
12+
height: 25,
13+
width: 25,
14+
},
15+
'&:hover, &:focus': {
16+
color: '#c1c1c0',
17+
},
18+
backgroundColor: 'inherit',
19+
border: 'none',
20+
color: '#c9c7c7',
21+
cursor: 'pointer',
22+
padding: theme.spacing(),
23+
position: 'relative',
24+
[theme.breakpoints.up('md')]: {
25+
display: 'none',
26+
},
27+
top: 1,
28+
}));
1429

15-
const styles = (theme: Theme) =>
16-
createStyles({
17-
close: {
18-
'& > span': {
19-
padding: 2,
20-
},
21-
'&:hover, &:focus': {
22-
color: theme.palette.primary.main,
23-
},
30+
export const StyledSearchBarWrapperDiv = styled('div', {
31+
label: 'StyledSearchBarWrapperDiv',
32+
})(({ theme }) => ({
33+
'& > div .react-select__control': {
34+
backgroundColor: 'transparent',
35+
},
36+
'& > div .react-select__indicators': {
37+
display: 'none',
38+
},
39+
'& > div .react-select__menu': {
40+
border: 0,
41+
borderRadius: 4,
42+
boxShadow: `0 0 10px ${theme.color.boxShadowDark}`,
43+
marginTop: 12,
44+
maxHeight: 350,
45+
overflowY: 'auto',
46+
},
47+
'& > div .react-select__menu-list': {
48+
overflowX: 'hidden',
49+
padding: 0,
50+
},
51+
'& > div .react-select__value-container': {
52+
'& p': {
53+
fontSize: '0.875rem',
54+
overflow: 'visible',
2455
},
25-
icon: {
26-
color: '#c9cacb',
27-
fontSize: '2rem',
56+
overflow: 'hidden',
57+
},
58+
alignItems: 'center',
59+
backgroundColor: theme.bg.app,
60+
borderRadius: 3,
61+
display: 'flex',
62+
flex: 1,
63+
height: 34,
64+
marginLeft: theme.spacing(1),
65+
padding: theme.spacing(1),
66+
position: 'relative', // for search results
67+
[theme.breakpoints.down('md')]: {
68+
'&.active': {
69+
opacity: 1,
70+
visibility: 'visible',
71+
zIndex: 3,
2872
},
29-
input: {
30-
'& input': {
31-
fontSize: '1.0em',
32-
[theme.breakpoints.down('md')]: {},
33-
transition: theme.transitions.create(['opacity']),
34-
},
35-
background: 'transparent',
36-
border: 0,
37-
maxWidth: '100%',
38-
},
39-
navIconHide: {
40-
'& > span': {
41-
justifyContent: 'flex-end',
42-
},
43-
'& svg': {
44-
height: 25,
45-
width: 25,
46-
},
47-
'&:hover, &:focus': {
48-
color: '#c1c1c0',
49-
},
50-
backgroundColor: 'inherit',
51-
border: 'none',
52-
color: '#c9c7c7',
53-
cursor: 'pointer',
54-
padding: theme.spacing(),
55-
position: 'relative',
56-
[theme.breakpoints.up('md')]: {
57-
display: 'none',
58-
},
59-
top: 1,
60-
},
61-
root: {
62-
'& .react-select__control': {
63-
backgroundColor: 'transparent',
64-
},
65-
'& .react-select__indicators': {
66-
display: 'none',
67-
},
68-
'& .react-select__menu': {
69-
border: 0,
70-
borderRadius: 4,
71-
boxShadow: `0 0 10px ${theme.color.boxShadowDark}`,
72-
marginTop: 12,
73-
maxHeight: 350,
74-
overflowY: 'auto',
75-
},
76-
'& .react-select__menu-list': {
77-
overflowX: 'hidden',
78-
padding: 0,
79-
},
80-
'& .react-select__value-container': {
81-
'& p': {
82-
overflow: 'visible',
83-
},
84-
fontSize: '0.875rem',
85-
overflow: 'hidden',
86-
},
87-
'& .select-placeholder': {
88-
opacity: 1,
89-
transition: theme.transitions.create(['opacity'], {
90-
duration: theme.transitions.duration.shortest,
91-
}),
92-
},
93-
'&.active': {
94-
'& .select-placeholder': {
95-
opacity: 0.5,
96-
},
97-
},
98-
alignItems: 'center',
99-
backgroundColor: theme.bg.app,
100-
borderRadius: 3,
101-
display: 'flex',
102-
flex: 1,
103-
height: 34,
104-
marginLeft: theme.spacing(1),
105-
padding: theme.spacing(1),
106-
position: 'relative' /* for search results */,
107-
[theme.breakpoints.down('md')]: {
108-
'&.active': {
109-
opacity: 1,
110-
visibility: 'visible',
111-
zIndex: 3,
112-
},
113-
backgroundColor: theme.bg.white,
114-
left: 0,
115-
margin: 0,
116-
opacity: 0,
117-
position: 'absolute',
118-
visibility: 'hidden',
119-
width: 'calc(100% - 100px)',
120-
zIndex: -1,
121-
},
122-
[theme.breakpoints.down('sm')]: {
123-
width: '100%',
124-
},
125-
transition: theme.transitions.create(['opacity']),
126-
},
127-
textfield: {
128-
'& input:focus': {
129-
outline: '1px dotted #606469',
130-
},
131-
flex: 1,
132-
margin: 0,
133-
minHeight: 'initial',
134-
},
135-
textfieldContainer: {
136-
[theme.breakpoints.down('md')]: {},
137-
width: '100%',
138-
},
139-
});
140-
141-
export default withStyles(styles);
73+
backgroundColor: theme.bg.white,
74+
left: 0,
75+
margin: 0,
76+
opacity: 0,
77+
position: 'absolute',
78+
visibility: 'hidden',
79+
width: 'calc(100% - 100px)',
80+
zIndex: -1,
81+
},
82+
[theme.breakpoints.down('sm')]: {
83+
width: '100%',
84+
},
85+
transition: theme.transitions.create(['opacity']),
86+
}));

0 commit comments

Comments
 (0)