Skip to content

Commit 5bd3774

Browse files
cpathipacoliu-akamaimjac0bs
authored
change: [M3-9433] - Update styles to match CDS for Entity Header, Notification sections and layout spacing (linode#12108)
* change: [M3-9433] - update styles to match CDS for Entity Header & Action Panel. * Added changeset: Update styles to match CDS for Entity Header & Action Panel * update layout spacing * Add 24px gap between row elements in linodes landing page * Update packages/manager/src/MainContent.tsx Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> * Add consistent spacing between GolabalNotifiacations section and other row elements in Linodes landing page. * Add consisten spacing between between banner and entity header in KubernetesLanding page * Linodes landing page layout - group the notifications section * update banners with correct prop forceImportantIconVerticalCenter i * Update spacing btw notifications wrt ADS * Revert previous changes * Add spacing to the linode header * Add spacing between notifications and entity header as per the ADS * Code cleanup * Consistent spacing in linodeDetails * linodesCreate * ImagesLanding and ImageCreate * Adjust spacing in placementgroup * Stackscripts * marketplace * ObjectStorage * Volumes * Firewalls and NodeBalancers * Domain spacing * Database * Monitering * Support tickets * Accounts landing page * IAM * Kubernetes * code cleanup * fix broken tests * fix lint warnings * Managed * PR - feedback - @abailly-akamai * Update packages/manager/src/components/LandingHeader/LandingHeader.tsx Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com> * PR - feedback - @abailly-akamai @mjac0bs * Code cleanup * UX - feedback * code cleanup * Update layout changes * Update PlacementGroupsLanding.tsx --------- Co-authored-by: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
1 parent 04b5124 commit 5bd3774

File tree

43 files changed

+548
-515
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+548
-515
lines changed

‎packages/manager/.changeset/pr-11857-changed-1741982641599.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@linode/manager": Changed
3+
---
4+
5+
Update styles to match CDS for Entity Header & Action Panel ([#11857](https://github.com/linode/manager/pull/11857))

‎packages/manager/src/MainContent.tsx‎

Lines changed: 60 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -333,15 +333,12 @@ export const MainContent = () => {
333333
flex: 1,
334334
margin: '0 auto',
335335
maxWidth: `${theme.breakpoints.values.lg}px !important`,
336-
pt: {
337-
md: 1.5,
338-
xs: theme.spacing(2),
339-
},
336+
pb: theme.spacingFunction(32),
337+
pt: theme.spacingFunction(24),
340338
px: {
341-
md: theme.spacing(2),
339+
md: theme.spacingFunction(16),
342340
xs: 0,
343341
},
344-
py: 1.5,
345342
transition: theme.transitions.create('opacity'),
346343
width: isNarrowViewport
347344
? '100%'
@@ -359,62 +356,70 @@ export const MainContent = () => {
359356
spacing={0}
360357
>
361358
<Grid className={cx(classes.switchWrapper, 'p0')}>
362-
<GlobalNotifications />
363-
<React.Suspense fallback={<SuspenseLoader />}>
364-
<ErrorBoundaryFallback>
365-
<Switch>
366-
<Route
367-
component={LinodesRoutes}
368-
path="/linodes"
369-
/>
370-
<Route
371-
component={Kubernetes}
372-
path="/kubernetes"
373-
/>
374-
{isIAMEnabled && (
375-
<Route component={IAM} path="/iam" />
376-
)}
377-
<Route component={Account} path="/account" />
378-
<Route component={Profile} path="/profile" />
379-
<Route component={Help} path="/support" />
380-
<Route component={SearchLanding} path="/search" />
381-
<Route component={EventsLanding} path="/events" />
382-
{isDatabasesEnabled && (
359+
<div className="content-wrapper">
360+
<GlobalNotifications />
361+
<React.Suspense fallback={<SuspenseLoader />}>
362+
<ErrorBoundaryFallback>
363+
<Switch>
383364
<Route
384-
component={Databases}
385-
path="/databases"
365+
component={LinodesRoutes}
366+
path="/linodes"
386367
/>
387-
)}
388-
{isACLPEnabled && (
389368
<Route
390-
component={CloudPulseMetrics}
391-
path="/metrics"
369+
component={Kubernetes}
370+
path="/kubernetes"
392371
/>
393-
)}
394-
{isACLPEnabled && (
372+
{isIAMEnabled && (
373+
<Route component={IAM} path="/iam" />
374+
)}
375+
<Route component={Account} path="/account" />
376+
<Route component={Profile} path="/profile" />
377+
<Route component={Help} path="/support" />
395378
<Route
396-
component={CloudPulseAlerts}
397-
path="/alerts"
379+
component={SearchLanding}
380+
path="/search"
398381
/>
399-
)}
400-
<Redirect exact from="/" to={defaultRoot} />
401-
{/** We don't want to break any bookmarks. This can probably be removed eventually. */}
402-
<Redirect from="/dashboard" to={defaultRoot} />
403-
{/**
404-
* This is the catch all routes that allows TanStack Router to take over.
405-
* When a route is not found here, it will be handled by the migration router, which in turns handles the NotFound component.
406-
* It is currently set to the migration router in order to incrementally migrate the app to the new routing.
407-
* This is a temporary solution until we are ready to fully migrate to TanStack Router.
408-
*/}
409-
<Route path="*">
410-
<RouterProvider
411-
context={{ queryClient }}
412-
router={migrationRouter as AnyRouter}
382+
<Route
383+
component={EventsLanding}
384+
path="/events"
413385
/>
414-
</Route>
415-
</Switch>
416-
</ErrorBoundaryFallback>
417-
</React.Suspense>
386+
{isDatabasesEnabled && (
387+
<Route
388+
component={Databases}
389+
path="/databases"
390+
/>
391+
)}
392+
{isACLPEnabled && (
393+
<Route
394+
component={CloudPulseMetrics}
395+
path="/metrics"
396+
/>
397+
)}
398+
{isACLPEnabled && (
399+
<Route
400+
component={CloudPulseAlerts}
401+
path="/alerts"
402+
/>
403+
)}
404+
<Redirect exact from="/" to={defaultRoot} />
405+
{/** We don't want to break any bookmarks. This can probably be removed eventually. */}
406+
<Redirect from="/dashboard" to={defaultRoot} />
407+
{/**
408+
* This is the catch all routes that allows TanStack Router to take over.
409+
* When a route is not found here, it will be handled by the migration router, which in turns handles the NotFound component.
410+
* It is currently set to the migration router in order to incrementally migrate the app to the new routing.
411+
* This is a temporary solution until we are ready to fully migrate to TanStack Router.
412+
*/}
413+
<Route path="*">
414+
<RouterProvider
415+
context={{ queryClient }}
416+
router={migrationRouter as AnyRouter}
417+
/>
418+
</Route>
419+
</Switch>
420+
</ErrorBoundaryFallback>
421+
</React.Suspense>
422+
</div>
418423
</Grid>
419424
</Grid>
420425
</Box>

‎packages/manager/src/components/AreaChart/utils.test.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,16 @@ const timestamp = 1704204000000;
1515

1616
describe('getAccessibleTimestamp', () => {
1717
it('should return the time in a format like 10/14/2023, 9:30 AM', () => {
18-
expect(getAccessibleTimestamp(timestamp, 'America/New_York')).toBe(
19-
'1/2/2024, 9:00 AM'
20-
);
18+
const result = getAccessibleTimestamp(timestamp, 'America/New_York');
19+
expect(result.replace(/\u202F/g, ' ')).toBe('1/2/2024, 9:00 AM');
2120
});
2221
});
2322

2423
describe('tooltipLabelFormatter', () => {
2524
it('should return the time in a format like October 14, 2023, 9:30 AM', () => {
26-
expect(tooltipLabelFormatter(timestamp, 'America/New_York')).toBe(
27-
'Jan 2, 2024, 9:00 AM'
28-
);
25+
const label = tooltipLabelFormatter(timestamp, 'America/New_York');
26+
const normalizedLabel = label.replace(/\u202F/g, ' ');
27+
expect(normalizedLabel).toBe('Jan 2, 2024, 9:00 AM');
2928
});
3029
});
3130

‎packages/manager/src/components/Breadcrumb/Breadcrumb.styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ export const StyledPreContainerDiv = styled('div', { label: 'StyledDiv' })({
44
alignItems: 'center',
55
display: 'flex',
66
flexWrap: 'wrap',
7-
minHeight: 48,
7+
minHeight: 34,
88
});
99

1010
export const StyledRootDiv = styled('div', { label: 'StyledRootDiv' })(

‎packages/manager/src/components/LandingHeader/LandingHeader.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export interface LandingHeaderProps {
3030
onDocsClick?: () => void;
3131
removeCrumbX?: number | number[];
3232
shouldHideDocsAndCreateButtons?: boolean;
33+
spacingBottom?: 0 | 4 | 16 | 24;
3334
title?: JSX.Element | string;
3435
}
3536

@@ -56,6 +57,7 @@ export const LandingHeader = ({
5657
onDocsClick,
5758
removeCrumbX,
5859
shouldHideDocsAndCreateButtons,
60+
spacingBottom = 24,
5961
title,
6062
}: LandingHeaderProps) => {
6163
const theme = useTheme();
@@ -75,12 +77,13 @@ export const LandingHeader = ({
7577
: `${title} Landing`;
7678

7779
return (
78-
<Grid
80+
<StyledLandingHeaderGrid
7981
container
8082
data-qa-entity-header
8183
sx={{
8284
alignItems: 'center',
8385
justifyContent: 'space-between',
86+
marginBottom: spacingBottom !== undefined ? `${spacingBottom}px` : 0,
8487
width: '100%',
8588
}}
8689
>
@@ -108,17 +111,17 @@ export const LandingHeader = ({
108111
flex: '1 1 auto',
109112

110113
marginLeft: customSmMdBetweenBreakpoint
111-
? theme.spacing(2)
114+
? theme.spacingFunction(16)
112115
: customXsDownBreakpoint
113-
? theme.spacing(1)
116+
? theme.spacingFunction(8)
114117
: undefined,
115118
}}
116119
>
117120
{betaFeedbackLink && (
118121
<span
119122
style={{
120-
marginLeft: xsDown ? `${theme.spacing(2)}` : undefined,
121-
marginRight: `${theme.spacing(2)}`,
123+
marginLeft: xsDown ? theme.spacingFunction(16) : undefined,
124+
marginRight: theme.spacingFunction(16),
122125
}}
123126
>
124127
<DocsLink
@@ -137,7 +140,7 @@ export const LandingHeader = ({
137140
/>
138141
) : null}
139142
{renderActions && (
140-
<Actions>
143+
<StyledActions>
141144
{extraActions}
142145
{onButtonClick ? (
143146
<Button
@@ -151,17 +154,23 @@ export const LandingHeader = ({
151154
{createButtonText ?? `Create ${entity}`}
152155
</Button>
153156
) : null}
154-
</Actions>
157+
</StyledActions>
155158
)}
156159
</Grid>
157160
</Grid>
158161
)}
159-
</Grid>
162+
</StyledLandingHeaderGrid>
160163
);
161164
};
162165

163-
const Actions = styled('div')(() => ({
166+
const StyledActions = styled('div')(({ theme }) => ({
164167
display: 'flex',
165-
gap: '24px',
168+
gap: theme.spacingFunction(24),
166169
justifyContent: 'flex-end',
167170
}));
171+
172+
const StyledLandingHeaderGrid = styled(Grid)(({ theme }) => ({
173+
'&:not(:first-child)': {
174+
marginTop: theme.spacingFunction(24),
175+
},
176+
}));

‎packages/manager/src/components/Tabs/TabList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const StyledReachTabList = styled(ReachTabList)(({ theme }) => ({
2626
'&[data-reach-tab-list]': {
2727
background: 'none !important',
2828
boxShadow: `inset 0 -1px 0 ${theme.borderColors.divider}`,
29-
marginBottom: theme.spacing(),
29+
marginBottom: theme.spacingFunction(16),
3030
[theme.breakpoints.down('lg')]: {
3131
overflowX: 'auto',
3232
padding: 1,

‎packages/manager/src/components/Tabs/__snapshots__/TabList.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`TabList component > renders TabList correctly 1`] = `
99
>
1010
<div
1111
aria-orientation="horizontal"
12-
class="css-9s3mv1"
12+
class="css-1hu91tb"
1313
data-reach-tab-list=""
1414
role="tablist"
1515
/>

‎packages/manager/src/features/Account/AccountLanding.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ const AccountLanding = () => {
196196
return (
197197
<React.Fragment>
198198
<DocumentTitleSegment segment="Account Settings" />
199-
<LandingHeader {...landingHeaderProps} />
199+
<LandingHeader {...landingHeaderProps} spacingBottom={4} />
200200

201201
<Tabs index={getDefaultTabIndex()} onChange={handleTabChange}>
202202
<TabLinkList tabs={tabs} />

‎packages/manager/src/features/CloudPulse/Alerts/AlertsLanding/AlertsLanding.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export const AlertsLanding = React.memo(() => {
6565
breadcrumbProps={{ pathname: '/alerts' }}
6666
docsLabel="Docs"
6767
docsLink="https://techdocs.akamai.com/cloud-computing/docs/akamai-cloud-pulse"
68+
spacingBottom={4}
6869
/>
6970
<Tabs index={activeTabIndex} onChange={handleChange}>
7071
<TabLinkList tabs={accessibleTabs} />

‎packages/manager/src/features/CloudPulse/Dashboard/CloudPulseDashboardLanding.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -82,14 +82,12 @@ export const CloudPulseDashboardLanding = () => {
8282
return (
8383
<React.Suspense fallback={<SuspenseLoader />}>
8484
<DocumentTitleSegment segment="Dashboards" />
85-
<Grid container spacing={2} sx={{ width: 'inherit !important' }}>
86-
<Grid item xs>
87-
<LandingHeader
88-
breadcrumbProps={{ pathname: '/metrics' }}
89-
docsLabel="Docs"
90-
docsLink="https://techdocs.akamai.com/cloud-computing/docs/akamai-cloud-pulse"
91-
/>
92-
</Grid>
85+
<LandingHeader
86+
breadcrumbProps={{ pathname: '/metrics' }}
87+
docsLabel="Docs"
88+
docsLink="https://techdocs.akamai.com/cloud-computing/docs/akamai-cloud-pulse"
89+
/>
90+
<Grid container spacing={3} sx={{ width: 'inherit !important' }}>
9391
<Grid item xs={12}>
9492
<Paper sx={{ padding: 0 }}>
9593
<Box display="flex" flexDirection="column">

0 commit comments

Comments
 (0)