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

site/.eslintrc.yaml

@@ -139,6 +139,9 @@ rules:
           message:
             "You should use the Popover component provided on
             components/Popover/Popover"
+        - name: "@mui/material/Typography"
+          message:
+            "You should use the native HTML elements as span, p, h1, h2, h3..."
   no-unused-vars: "off"
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn

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

@@ -8,7 +8,6 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import KeyboardArrowDownOutlined from "@mui/icons-material/KeyboardArrowDownOutlined";
 import MenuIcon from "@mui/icons-material/Menu";
-import Typography from "@mui/material/Typography";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC, type ReactNode, useRef, useState } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
@@ -360,31 +359,30 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
             lineHeight: "140%",
           }}
         >
-          <Typography
-            component="h4"
-            sx={{
+          <h4
+            css={{
               fontSize: "inherit",
               fontWeight: 600,
               lineHeight: "inherit",
               margin: 0,
+              marginBottom: 4,
             }}
           >
             Select a region nearest to you
-          </Typography>
-          <Typography
-            component="p"
-            sx={{
+          </h4>
+          <p
+            css={(theme) => ({
               fontSize: 13,
-              color: (theme) => theme.palette.text.secondary,
+              color: theme.palette.text.secondary,
               lineHeight: "inherit",
               marginTop: 0.5,
-            }}
+            })}
           >
             Workspace proxies improve terminal and web app connections to
             workspaces. This does not apply to CLI connections. A region must be
             manually selected, otherwise the default primary region will be
             used.
-          </Typography>
+          </p>
         </Box>
         <Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
         {proxyContextValue.proxies

site/src/components/EmptyState/EmptyState.tsx

@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import type { FC, ReactNode } from "react";
 
 export interface EmptyStateProps {
@@ -40,24 +39,21 @@ export const EmptyState: FC<React.PropsWithChildren<EmptyStateProps>> = (
       }}
       {...boxProps}
     >
-      <Typography variant="h5" css={{ fontSize: 24 }}>
-        {message}
-      </Typography>
+      <h5 css={{ fontSize: 24, fontWeight: 400, margin: 0 }}>{message}</h5>
       {description && (
-        <Typography
-          variant="body2"
-          color="textSecondary"
-          css={{
-            marginTop: 12,
+        <p
+          css={(theme) => ({
+            marginTop: 16,
             fontSize: 16,
             lineHeight: "140%",
             maxWidth: 480,
-          }}
+            color: theme.palette.text.secondary,
+          })}
         >
           {description}
-        </Typography>
+        </p>
       )}
-      {cta && <div css={{ marginTop: 32 }}>{cta}</div>}
+      {cta && <div css={{ marginTop: 24 }}>{cta}</div>}
       {image}
     </Box>
   );

site/src/components/GlobalSnackbar/EnterpriseSnackbar.tsx

@@ -53,7 +53,7 @@ export const EnterpriseSnackbar: FC<
       action={
         <div css={styles.actionWrapper}>
           {action}
-          <IconButton onClick={onClose} css={{ padding: 0 }} size="large">
+          <IconButton onClick={onClose} css={{ padding: 0 }}>
             <CloseIcon css={styles.closeIcon} aria-label="close" />
           </IconButton>
         </div>

site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

@@ -2,7 +2,6 @@ import { type FC, useState } from "react";
 import { useCustomEvent } from "hooks/events";
 import { EnterpriseSnackbar } from "./EnterpriseSnackbar";
 import { ErrorIcon } from "../Icons/ErrorIcon";
-import { Typography } from "../Typography/Typography";
 import {
   type AdditionalMessage,
   isNotificationList,
@@ -52,9 +51,7 @@ export const GlobalSnackbar: FC = () => {
           )}
 
           <div css={styles.message}>
-            <Typography variant="body1" css={styles.messageTitle}>
-              {notification.msg}
-            </Typography>
+            <span css={styles.messageTitle}>{notification.msg}</span>
 
             {notification.additionalMsgs &&
               notification.additionalMsgs.map((msg, index) => (
@@ -92,18 +89,14 @@ const styles = {
 
 function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
   if (isNotificationText(message)) {
-    return (
-      <Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
-        {message}
-      </Typography>
-    );
+    return <span css={styles.messageSubtitle}>{message}</span>;
   }
 
   if (isNotificationTextPrefixed(message)) {
     return (
-      <Typography gutterBottom variant="body2" css={styles.messageSubtitle}>
+      <span css={styles.messageSubtitle}>
         <strong>{message.prefix}:</strong> {message.text}
-      </Typography>
+      </span>
     );
   }
 
@@ -112,9 +105,7 @@ function AdditionalMessageDisplay({ message }: { message: AdditionalMessage }) {
       <ul css={styles.list}>
         {message.map((item, idx) => (
           <li key={idx}>
-            <Typography variant="body2" css={styles.messageSubtitle}>
-              {item}
-            </Typography>
+            <span css={styles.messageSubtitle}>{item}</span>
           </li>
         ))}
       </ul>

site/src/components/Paywall/Paywall.tsx

@@ -1,5 +1,4 @@
 import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode } from "react";
 import { type Interpolation, type Theme } from "@emotion/react";
 import { EnterpriseBadge } from "components/Badges/Badges";
@@ -18,21 +17,11 @@ export const Paywall: FC<React.PropsWithChildren<PaywallProps>> = (props) => {
     <Box css={styles.root}>
       <div css={styles.header}>
         <Stack direction="row" alignItems="center" justifyContent="center">
-          <Typography variant="h5" css={styles.title}>
-            {message}
-          </Typography>
+          <h5 css={styles.title}>{message}</h5>
           <EnterpriseBadge />
         </Stack>
 
-        {description && (
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            css={styles.description}
-          >
-            {description}
-          </Typography>
-        )}
+        {description && <p css={styles.description}>{description}</p>}
       </div>
       {cta}
     </Box>
@@ -58,13 +47,17 @@ const styles = {
   title: {
     fontWeight: 600,
     fontFamily: "inherit",
+    fontSize: 24,
+    margin: 0,
   },
-  description: {
-    marginTop: 8,
+  description: (theme) => ({
+    marginTop: 16,
     fontFamily: "inherit",
     maxWidth: 420,
     lineHeight: "160%",
-  },
+    color: theme.palette.text.secondary,
+    fontSize: 14,
+  }),
   enterpriseChip: (theme) => ({
     background: theme.palette.success.dark,
     color: theme.palette.success.contrastText,

site/src/components/SettingsLayout/Section.tsx

@@ -1,6 +1,4 @@
-import Typography from "@mui/material/Typography";
 import { type FC, type ReactNode, type PropsWithChildren } from "react";
-import { SectionAction } from "./SectionAction";
 import { type Interpolation, type Theme } from "@emotion/react";
 
 type SectionLayout = "fixed" | "fluid";
@@ -17,9 +15,7 @@ export interface SectionProps {
   children?: ReactNode;
 }
 
-type SectionFC = FC<PropsWithChildren<SectionProps>> & {
-  Action: typeof SectionAction;
-};
+type SectionFC = FC<PropsWithChildren<SectionProps>>;
 
 export const Section: SectionFC = ({
   id,
@@ -38,12 +34,19 @@ export const Section: SectionFC = ({
           <div css={styles.header}>
             <div>
               {title && (
-                <Typography variant="h4" sx={{ fontSize: 24 }}>
+                <h4
+                  css={{
+                    fontSize: 24,
+                    fontWeight: 500,
+                    margin: 0,
+                    marginBottom: 8,
+                  }}
+                >
                   {title}
-                </Typography>
+                </h4>
               )}
               {description && typeof description === "string" && (
-                <Typography css={styles.description}>{description}</Typography>
+                <p css={styles.description}>{description}</p>
               )}
               {description && typeof description !== "string" && (
                 <div css={styles.description}>{description}</div>
@@ -59,9 +62,6 @@ export const Section: SectionFC = ({
   );
 };
 
-// Sub-components
-Section.Action = SectionAction;
-
 const styles = {
   header: {
     marginBottom: 24,

site/src/components/SettingsLayout/SectionAction.tsx

@@ -1,11 +0,0 @@
-import { type FC } from "react";
-
-/**
- * SectionAction is a content box that call to actions should be placed
- * within
- */
-export const SectionAction: FC<React.PropsWithChildren<unknown>> = ({
-  children,
-}) => {
-  return <div css={{ marginTop: 24 }}>{children}</div>;
-};

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

@@ -1,25 +0,0 @@
-import { Typography } from "./Typography";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Typography> = {
-  title: "components/Typography",
-  component: Typography,
-  args: {
-    children: "Colorless green ideas sleep furiously",
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Typography>;
-
-export const Short: Story = {
-  args: {
-    short: true,
-  },
-};
-
-export const Tall: Story = {
-  args: {
-    short: false,
-  },
-};

site/src/components/Typography/Typography.tsx

@@ -1,38 +0,0 @@
-/**
- * @fileoverview (TODO: Grey) This file is in a temporary state and is a
- * verbatim port from `@coder/ui`.
- */
-
-import MuiTypography, {
-  TypographyProps as MuiTypographyProps,
-} from "@mui/material/Typography";
-import * as React from "react";
-
-export interface TypographyProps extends MuiTypographyProps {
-  short?: boolean;
-}
-
-/**
- * Wrapper around Material UI's Typography component to allow for future
- * custom typography types.
- *
- * See original component's Material UI documentation here: https://material-ui.com/components/typography/
- */
-export const Typography: React.FC<TypographyProps> = ({ short, ...attrs }) => {
-  return (
-    <MuiTypography
-      css={[
-        short && {
-          "&.MuiTypography-body1": {
-            lineHeight: "21px",
-          },
-          "&.MuiTypography-body2": {
-            lineHeight: "18px",
-            letterSpacing: 0.2,
-          },
-        },
-      ]}
-      {...attrs}
-    />
-  );
-};

site/src/components/Welcome/Welcome.tsx

@@ -1,6 +1,5 @@
-import Typography from "@mui/material/Typography";
 import { type FC, type PropsWithChildren } from "react";
-import { css, useTheme } from "@emotion/react";
+import { useTheme } from "@emotion/react";
 import { CoderIcon } from "../Icons/CoderIcon";
 
 const Language = {
@@ -31,22 +30,23 @@ export const Welcome: FC<
           }}
         />
       </div>
-      <Typography
-        css={css`
-          text-align: center;
-          font-size: 32px;
-          font-weight: 400;
-          margin: 16px 0 32px;
-          line-height: 1.25;
+      <h1
+        css={{
+          textAlign: "center",
+          fontSize: 32,
+          fontWeight: 400,
+          margin: 0,
+          marginTop: 16,
+          marginBottom: 32,
+          lineHeight: 1.25,
 
-          & strong {
-            font-weight: 600;
-          }
-        `}
-        variant="h1"
+          "& strong": {
+            fontWeight: 600,
+          },
+        }}
       >
         {message}
-      </Typography>
+      </h1>
     </div>
   );
 };

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

@@ -1,4 +1,3 @@
-import Typography from "@mui/material/Typography";
 import { type FC } from "react";
 
 export const NotFoundPage: FC = () => {
@@ -20,9 +19,9 @@ export const NotFoundPage: FC = () => {
           borderRight: theme.palette.divider,
         })}
       >
-        <Typography variant="h4">404</Typography>
+        <h4>404</h4>
       </div>
-      <Typography variant="body2">This page could not be found.</Typography>
+      <p>This page could not be found.</p>
     </div>
   );
 };

site/src/pages/TemplateVersionEditorPage/FileDialog.tsx

@@ -2,7 +2,6 @@ import TextField from "@mui/material/TextField";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Stack } from "components/Stack/Stack";
 import { ChangeEvent, FC, useState } from "react";
-import Typography from "@mui/material/Typography";
 import { allowedExtensions, isAllowedFile } from "utils/templateVersion";
 import { FileTree, isFolder, validatePath } from "utils/filetree";
 
@@ -59,11 +58,11 @@ export const CreateFileDialog: FC<{
       confirmText="Create"
       title="Create File"
       description={
-        <Stack>
-          <Typography>
+        <Stack spacing={4}>
+          <p>
             Specify the path to a file to be created. This path can contain
             slashes too.
-          </Typography>
+          </p>
           <TextField
             autoFocus
             onKeyDown={(event) => {

site/src/pages/UserSettingsPage/SecurityPage/SingleSignOnSection.tsx

@@ -5,7 +5,6 @@ import Box from "@mui/material/Box";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import KeyIcon from "@mui/icons-material/VpnKey";
 import Button from "@mui/material/Button";
-import Typography from "@mui/material/Typography";
 import { convertToOAUTH } from "api/api";
 import type {
   AuthMethods,
@@ -278,11 +277,11 @@ const ConfirmLoginTypeChangeModal = ({
       title="Change login type"
       confirmLoading={loading}
       description={
-        <Stack>
-          <Typography>
+        <Stack spacing={4}>
+          <p>
             After changing your login type, you will not be able to change it
             again. Are you sure you want to proceed and change your login type?
-          </Typography>
+          </p>
           <TextField
             autoFocus
             onKeyDown={(event) => {