Skip to content

Commit 2895c10

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): remove Typography component (#10769)
* Remove Typography from NavbarView * Remove Typography from EmptyState * Remove Typography from Paywall * Fix font size * Remove Typography from CliAuthPage * Remove Typography from Single SignOn * Remove Typography from file dialog * Remove from not found * Remove from Section * Remove from global snackbar * Remove Typography component * Add eslint role
1 parent 5173bce commit 2895c10

File tree

14 files changed

+69
-165
lines changed

14 files changed

+69
-165
lines changed

‎site/.eslintrc.yaml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,9 @@ rules:
139139
message:
140140
"You should use the Popover component provided on
141141
components/Popover/Popover"
142+
- name: "@mui/material/Typography"
143+
message:
144+
"You should use the native HTML elements as span, p, h1, h2, h3..."
142145
no-unused-vars: "off"
143146
"object-curly-spacing": "off"
144147
react-hooks/exhaustive-deps: warn

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import Button from "@mui/material/Button";
88
import MenuItem from "@mui/material/MenuItem";
99
import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
1010
import MenuIcon from "@mui/icons-material/Menu";
11-
import Typography from "@mui/material/Typography";
1211
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1312
import { type FC, type ReactNode, useRef, useState } from "react";
1413
import { NavLink, useLocation, useNavigate } from "react-router-dom";
@@ -360,31 +359,30 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
360359
lineHeight: "140%",
361360
}}
362361
>
363-
<Typography
364-
component="h4"
365-
sx={{
362+
<h4
363+
css={{
366364
fontSize: "inherit",
367365
fontWeight: 600,
368366
lineHeight: "inherit",
369367
margin: 0,
368+
marginBottom: 4,
370369
}}
371370
>
372371
Select a region nearest to you
373-
</Typography>
374-
<Typography
375-
component="p"
376-
sx={{
372+
</h4>
373+
<p
374+
css={(theme) => ({
377375
fontSize: 13,
378-
color: (theme) => theme.palette.text.secondary,
376+
color: theme.palette.text.secondary,
379377
lineHeight: "inherit",
380378
marginTop: 0.5,
381-
}}
379+
})}
382380
>
383381
Workspace proxies improve terminal and web app connections to
384382
workspaces. This does not apply to CLI connections. A region must be
385383
manually selected, otherwise the default primary region will be
386384
used.
387-
</Typography>
385+
</p>
388386
</Box>
389387
<Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
390388
{proxyContextValue.proxies

‎site/src/components/EmptyState/EmptyState.tsx

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from "@mui/material/Box";
2-
import Typography from "@mui/material/Typography";
32
import type { FC, ReactNode } from "react";
43

54
export interface EmptyStateProps {
@@ -40,24 +39,21 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
4039
}}
4140
{...boxProps}
4241
>
43-
<Typography variant="h5" css={{ fontSize: 24 }}>
44-
{message}
45-
</Typography>
42+
<h5 css={{ fontSize: 24, fontWeight: 400, margin: 0 }}>{message}</h5>
4643
{description && (
47-
<Typography
48-
variant="body2"
49-
color="textSecondary"
50-
css={{
51-
marginTop: 12,
44+
<p
45+
css={(theme) => ({
46+
marginTop: 16,
5247
fontSize: 16,
5348
lineHeight: "140%",
5449
maxWidth: 480,
55-
}}
50+
color: theme.palette.text.secondary,
51+
})}
5652
>
5753
{description}
58-
</Typography>
54+
</p>
5955
)}
60-
{cta && <div css={{ marginTop: 32 }}>{cta}</div>}
56+
{cta && <div css={{ marginTop: 24 }}>{cta}</div>}
6157
{image}
6258
</Box>
6359
);

‎site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const EnterpriseSnackbar: FC<
5353
action={
5454
<div css={styles.actionWrapper}>
5555
{action}
56-
<IconButton onClick={onClose} css={{ padding: 0 }} size="large">
56+
<IconButton onClick={onClose} css={{ padding: 0 }}>
5757
<CloseIcon css={styles.closeIcon} aria-label="close" />
5858
</IconButton>
5959
</div>

‎site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { type FC, useState } from "react";
22
import { useCustomEvent } from "hooks/events";
33
import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
44
import { ErrorIcon } from "../Icons/ErrorIcon";
5-
import { Typography } from "../Typography/Typography";
65
import {
76
type AdditionalMessage,
87
isNotificationList,
@@ -52,9 +51,7 @@ export const GlobalSnackbar: FC = () => {
5251
)}
5352

5453
<div css={styles.message}>
55-
<Typography variant="body1" css={styles.messageTitle}>
56-
{notification.msg}
57-
</Typography>
54+
<span css={styles.messageTitle}>{notification.msg}</span>
5855

5956
{notification.additionalMsgs &&
6057
notification.additionalMsgs.map((msg, index) => (
@@ -92,18 +89,14 @@ const styles = {
9289

9390
function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
9491
if (isNotificationText(message)) {
95-
return (
96-
<Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
97-
{message}
98-
</Typography>
99-
);
92+
return <span css={styles.messageSubtitle}>{message}</span>;
10093
}
10194

10295
if (isNotificationTextPrefixed(message)) {
10396
return (
104-
<Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
97+
<span css={styles.messageSubtitle}>
10598
<strong>{message.prefix}:</strong> {message.text}
106-
</Typography>
99+
</span>
107100
);
108101
}
109102

@@ -112,9 +105,7 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
112105
<ul css={styles.list}>
113106
{message.map((item, idx) => (
114107
<li key={idx}>
115-
<Typography variant="body2" css={styles.messageSubtitle}>
116-
{item}
117-
</Typography>
108+
<span css={styles.messageSubtitle}>{item}</span>
118109
</li>
119110
))}
120111
</ul>

‎site/src/components/Paywall/Paywall.tsx

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Box from "@mui/material/Box";
2-
import Typography from "@mui/material/Typography";
32
import { type FC, type ReactNode } from "react";
43
import { type Interpolation, type Theme } from "@emotion/react";
54
import { EnterpriseBadge } from "components/Badges/Badges";
@@ -18,21 +17,11 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
1817
<Box css={styles.root}>
1918
<div css={styles.header}>
2019
<Stack direction="row" alignItems="center" justifyContent="center">
21-
<Typography variant="h5" css={styles.title}>
22-
{message}
23-
</Typography>
20+
<h5 css={styles.title}>{message}</h5>
2421
<EnterpriseBadge />
2522
</Stack>
2623

27-
{description && (
28-
<Typography
29-
variant="body2"
30-
color="textSecondary"
31-
css={styles.description}
32-
>
33-
{description}
34-
</Typography>
35-
)}
24+
{description && <p css={styles.description}>{description}</p>}
3625
</div>
3726
{cta}
3827
</Box>
@@ -58,13 +47,17 @@ const styles = {
5847
title: {
5948
fontWeight: 600,
6049
fontFamily: "inherit",
50+
fontSize: 24,
51+
margin: 0,
6152
},
62-
description: {
63-
marginTop: 8,
53+
description: (theme) => ({
54+
marginTop: 16,
6455
fontFamily: "inherit",
6556
maxWidth: 420,
6657
lineHeight: "160%",
67-
},
58+
color: theme.palette.text.secondary,
59+
fontSize: 14,
60+
}),
6861
enterpriseChip: (theme) => ({
6962
background: theme.palette.success.dark,
7063
color: theme.palette.success.contrastText,

‎site/src/components/SettingsLayout/Section.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import Typography from "@mui/material/Typography";
21
import { type FC, type ReactNode, type PropsWithChildren } from "react";
3-
import { SectionAction } from "./SectionAction";
42
import { type Interpolation, type Theme } from "@emotion/react";
53

64
type SectionLayout = "fixed" | "fluid";
@@ -17,9 +15,7 @@ export interface SectionProps {
1715
children?: ReactNode;
1816
}
1917

20-
type SectionFC = FC<PropsWithChildren<SectionProps>> & {
21-
Action: typeof SectionAction;
22-
};
18+
type SectionFC = FC<PropsWithChildren<SectionProps>>;
2319

2420
export const Section: SectionFC = ({
2521
id,
@@ -38,12 +34,19 @@ export const Section: SectionFC = ({
3834
<div css={styles.header}>
3935
<div>
4036
{title && (
41-
<Typography variant="h4" sx={{ fontSize: 24 }}>
37+
<h4
38+
css={{
39+
fontSize: 24,
40+
fontWeight: 500,
41+
margin: 0,
42+
marginBottom: 8,
43+
}}
44+
>
4245
{title}
43-
</Typography>
46+
</h4>
4447
)}
4548
{description && typeof description === "string" && (
46-
<Typography css={styles.description}>{description}</Typography>
49+
<p css={styles.description}>{description}</p>
4750
)}
4851
{description && typeof description !== "string" && (
4952
<div css={styles.description}>{description}</div>
@@ -59,9 +62,6 @@ export const Section: SectionFC = ({
5962
);
6063
};
6164

62-
// Sub-components
63-
Section.Action = SectionAction;
64-
6565
const styles = {
6666
header: {
6767
marginBottom: 24,

‎site/src/components/SettingsLayout/SectionAction.tsx

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎site/src/components/Typography/Typography.stories.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎site/src/components/Typography/Typography.tsx

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎site/src/components/Welcome/Welcome.tsx

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import Typography from "@mui/material/Typography";
21
import { type FC, type PropsWithChildren } from "react";
3-
import { css, useTheme } from "@emotion/react";
2+
import { useTheme } from "@emotion/react";
43
import { CoderIcon } from "../Icons/CoderIcon";
54

65
const Language = {
@@ -31,22 +30,23 @@ export const Welcome: FC<
3130
}}
3231
/>
3332
</div>
34-
<Typography
35-
css={css`
36-
text-align: center;
37-
font-size: 32px;
38-
font-weight: 400;
39-
margin: 16px 0 32px;
40-
line-height: 1.25;
33+
<h1
34+
css={{
35+
textAlign: "center",
36+
fontSize: 32,
37+
fontWeight: 400,
38+
margin: 0,
39+
marginTop: 16,
40+
marginBottom: 32,
41+
lineHeight: 1.25,
4142

42-
& strong {
43-
font-weight: 600;
44-
}
45-
`}
46-
variant="h1"
43+
"& strong": {
44+
fontWeight: 600,
45+
},
46+
}}
4747
>
4848
{message}
49-
</Typography>
49+
</h1>
5050
</div>
5151
);
5252
};

‎site/src/pages/404Page/404Page.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Typography from "@mui/material/Typography";
21
import { type FC } from "react";
32

43
export const NotFoundPage: FC = () => {
@@ -20,9 +19,9 @@ export const NotFoundPage: FC = () => {
2019
borderRight: theme.palette.divider,
2120
})}
2221
>
23-
<Typography variant="h4">404</Typography>
22+
<h4>404</h4>
2423
</div>
25-
<Typography variant="body2">This page could not be found.</Typography>
24+
<p>This page could not be found.</p>
2625
</div>
2726
);
2827
};

0 commit comments

Comments
 (0)