Skip to content

feat: remove css from various components/ elements #21263

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jakehwll wants to merge 22 commits into
base: main
Choose a base branch
from
+478 −1,004
Open

feat: remove css from various components/ elements #21263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
0167853
feat: remove `css` from various `components/` elements
jakehwll Dec 14, 2025
24bf782
fix: resolve `<Form />` gaps
jakehwll Dec 14, 2025
9db0ffa
fix: resolve `horizontal` direction in `<Form />`
jakehwll Dec 14, 2025
ea90a74
chore: resolve lint
jakehwll Dec 14, 2025
01a440a
fix: resolve `<Paywall />` gradient
jakehwll Dec 14, 2025
1cf0fd3
fix: resolve odd padding issues due to `css`
jakehwll Dec 14, 2025
91321c7
feat: mess with `<PageHeader />` breakpoints
jakehwll Dec 14, 2025
51a7ddb
fix: actually use the `css` grid
jakehwll Dec 14, 2025
aeb0867
fix: resolve more `pt-0` requirements
jakehwll Dec 14, 2025
6cee3b2
fix: resolve layout shift issues
jakehwll Dec 14, 2025
ed88793
fix: resolve layout shifts (again)
jakehwll Dec 14, 2025
0848c5d
fix: even more layout shift fixing + colors
jakehwll Dec 14, 2025
d68bc5f
Merge branch 'main' into jakehwll/mui-cssnuke-components
jakehwll Dec 15, 2025
83a1d08
Update site/src/components/InfoTooltip/InfoTooltip.tsx
jakehwll Dec 16, 2025
c5a9270
Update site/src/pages/GroupsPage/GroupSettingsPageView.tsx
jakehwll Dec 16, 2025
b631c1e
Update site/src/components/Markdown/Markdown.tsx
jakehwll Dec 16, 2025
676d614
Update site/src/components/Markdown/Markdown.tsx
jakehwll Dec 16, 2025
abf4632
feat: resolve inline styles
jakehwll Dec 16, 2025
b398098
fix: inline `className`'s
jakehwll Dec 17, 2025
bdac8b9
chore: revert `styles` for `<LogLine />`
jakehwll Dec 17, 2025
0923805
Merge branch 'main' into jakehwll/mui-cssnuke-components
jakehwll Dec 17, 2025
4d24a2f
Merge branch 'main' into jakehwll/mui-cssnuke-components
jakehwll Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions site/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
type ReactNode,
useState,
} from "react";
import { cn } from "utils/cn";
export type AlertColor = MuiAlertColor;

export type AlertProps = MuiAlertProps & {
Expand Down Expand Up @@ -39,7 +40,7 @@ export const Alert: FC<AlertProps> = ({
<Collapse in>
<MuiAlert
{...alertProps}
css={{ textAlign: "left" }}
className={cn("text-left", alertProps.className)}
severity={severity}
action={
<>
Expand Down Expand Up @@ -72,7 +73,7 @@ export const Alert: FC<AlertProps> = ({
export const AlertDetail: FC<PropsWithChildren> = ({ children }) => {
return (
<span
css={(theme) => ({ color: theme.palette.text.secondary, fontSize: 13 })}
className={"text-[13px] text-content-secondary"}
Copy link
Contributor

@jaaydenh jaaydenh Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why set this to 13px instead of using a utility class?

Copy link
Contributor Author

@jakehwll jakehwll Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text-xs is 12px and text-sm is 14px. Neither really seemed to fit the vibe this was going for, YOMV tho. I might revert this as you're redoing Alert.tsx in another PR 🙂

data-chromatic="ignore"
>
{children}
Expand Down
42 changes: 12 additions & 30 deletions site/src/components/Avatar/AvatarCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { type CSSObject, useTheme } from "@emotion/react";
import { Avatar } from "components/Avatar/Avatar";
import type { FC, ReactNode } from "react";
import { cn } from "utils/cn";

type AvatarCardProps = {
header: string;
Expand All @@ -15,20 +15,16 @@ export const AvatarCard: FC<AvatarCardProps> = ({
subtitle,
maxWidth = "none",
}) => {
const theme = useTheme();

return (
<div
css={{
maxWidth: maxWidth === "none" ? undefined : `${maxWidth}px`,
display: "flex",
flexFlow: "row nowrap",
alignItems: "center",
border: `1px solid ${theme.palette.divider}`,
gap: "16px",
padding: "16px",
borderRadius: "8px",
cursor: "default",
className={cn(
"flex flex-row flex-nowrap items-center gap-4",
"p-4 rounded-lg cursor-default",
"border border-solid border-zinc-200 dark:border-zinc-700",
Copy link
Contributor

@jaaydenh jaaydenh Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Colors can be found in figma, https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=WnARy2Vp9NARG6V0-1

)}
// TODO: We don't actually use this prop, so we should remove it.
style={{
...(maxWidth !== "none" ? { maxWidth: `${maxWidth}px` } : {}),
}}
>
{/**
Expand All @@ -37,31 +33,17 @@ export const AvatarCard: FC<AvatarCardProps> = ({
*
* @see {@link https://css-tricks.com/flexbox-truncated-text/}
*/}
<div css={{ marginRight: "auto", minWidth: 0 }}>
<div className="mr-auto min-w-0">
<h3
// Lets users hover over truncated text to see whole thing
title={header}
css={[
theme.typography.body1 as CSSObject,
{
lineHeight: 1.4,
margin: 0,
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
},
]}
className="leading-[1.4] m-0 overflow-hidden whitespace-nowrap text-ellipsis font-normal text-base"
>
{header}
</h3>

{subtitle && (
<div
css={[
theme.typography.body2 as CSSObject,
{ color: theme.palette.text.secondary },
]}
>
<div className="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
Copy link
Contributor

@jaaydenh jaaydenh Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could just update the colors now by looking up the component in Figma, https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=711-383&t=WnARy2Vp9NARG6V0-1

So no need to set a dark variant as that will be handled by the Tailwind color

{subtitle}
</div>
)}
Expand Down
12 changes: 12 additions & 0 deletions site/src/components/Badges/Badges.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
import {
AlphaBadge,
Badges,
DeprecatedBadge,
DisabledBadge,
EnabledBadge,
EnterpriseBadge,
EntitledBadge,
HealthyBadge,
NotHealthyBadge,
Expand Down Expand Up @@ -50,6 +52,11 @@ export const Disabled: Story = {
children: <DisabledBadge />,
},
};
export const Enterprise: Story = {
args: {
children: <EnterpriseBadge />,
},
};
export const Premium: Story = {
args: {
children: <PremiumBadge />,
Expand All @@ -65,3 +72,8 @@ export const Alpha: Story = {
children: <AlphaBadge />,
},
};
export const Deprecated: Story = {
args: {
children: <DeprecatedBadge />,
},
};
161 changes: 49 additions & 112 deletions site/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import type { Interpolation, Theme } from "@emotion/react";
import { Stack } from "components/Stack/Stack";
import {
Tooltip,
TooltipContent,
Expand All @@ -11,71 +9,70 @@ import {
type HTMLAttributes,
type PropsWithChildren,
} from "react";
import { cn } from "utils/cn";

const styles = {
badge: {
fontSize: 10,
height: 24,
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.085em",
padding: "0 12px",
borderRadius: 9999,
display: "flex",
alignItems: "center",
width: "fit-content",
whiteSpace: "nowrap",
},

enabledBadge: (theme) => ({
border: `1px solid ${theme.roles.success.outline}`,
backgroundColor: theme.roles.success.background,
color: theme.roles.success.text,
}),
errorBadge: (theme) => ({
border: `1px solid ${theme.roles.error.outline}`,
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,
}),
warnBadge: (theme) => ({
border: `1px solid ${theme.roles.warning.outline}`,
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,
}),
} satisfies Record<string, Interpolation<Theme>>;
const badgeClasses = {
Copy link
Contributor Author

@jakehwll jakehwll Dec 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we want to do this as apart of this PR but this probably a good candidate for class-variance-authority.

Copy link
Member

@aslilac aslilac Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we already have a dependency on it, go ahead

root: [
"text-[10px] h-6 font-semibold uppercase tracking-[0.085em]",
"px-3 rounded-full flex items-center w-fit whitespace-nowrap",
"border border-solid leading-none",
],
enabled: ["border-green-500 bg-green-950 text-green-50"],
Copy link
Contributor

@jaaydenh jaaydenh Dec 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we update these colors from the theme colors but don't use colors from tailwind.config.js, we may forget to do it later. If you feel like the proper colors don't yet exist in tailwind.config, we should atleast have an issue created to cleanup

error: ["border-red-600 bg-red-950 text-red-50"],
warn: ["border-amber-300 bg-amber-950 text-amber-50"],
enterprise: ["border-blue-400 bg-blue-950 text-blue-50"],
disabled: ["border-zinc-700 bg-zinc-900 text-white"],
premium: ["border-violet-400 bg-violet-950 text-violet-50"],
preview: ["border-violet-500 bg-violet-950 text-violet-50"],
deprecated: ["border-orange-500 bg-orange-950 text-orange-50"],
} as const;

export const EnabledBadge: FC = () => {
return (
<span css={[styles.badge, styles.enabledBadge]} className="option-enabled">
<span
className={cn([
"option-enabled",
badgeClasses.root,
badgeClasses.enabled,
])}
>
Enabled
</span>
);
};

export const EntitledBadge: FC = () => {
return <span css={[styles.badge, styles.enabledBadge]}>Entitled</span>;
return (
<span className={cn(badgeClasses.root, badgeClasses.enabled)}>
Entitled
</span>
);
};

interface HealthyBadge {
derpOnly?: boolean;
}
export const HealthyBadge: FC<HealthyBadge> = ({ derpOnly }) => {
return (
<span css={[styles.badge, styles.enabledBadge]}>
<span className={cn(badgeClasses.root, badgeClasses.enabled)}>
{derpOnly ? "Healthy (DERP only)" : "Healthy"}
</span>
);
};

export const NotHealthyBadge: FC = () => {
return <span css={[styles.badge, styles.errorBadge]}>Unhealthy</span>;
return (
<span className={cn(badgeClasses.root, badgeClasses.error)}>Unhealthy</span>
);
};

export const NotRegisteredBadge: FC = () => {
return (
<Tooltip>
<TooltipTrigger asChild>
<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
<span className={cn(badgeClasses.root, badgeClasses.warn)}>
Never seen
</span>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
Workspace Proxy has never come online and needs to be started.
Expand All @@ -88,7 +85,9 @@ export const NotReachableBadge: FC = () => {
return (
<Tooltip>
<TooltipTrigger asChild>
<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
<span className={cn(badgeClasses.root, badgeClasses.warn)}>
Not reachable
</span>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
Workspace Proxy not responding to http(s) requests.
Expand All @@ -105,15 +104,11 @@ export const DisabledBadge: FC = forwardRef<
<span
{...props}
ref={ref}
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.experimental.l1.outline}`,
backgroundColor: theme.experimental.l1.background,
color: theme.experimental.l1.text,
}),
]}
className="option-disabled"
className={cn([
"option-disabled",
badgeClasses.root,
badgeClasses.disabled,
])}
>
Disabled
</span>
Expand All @@ -122,98 +117,40 @@ export const DisabledBadge: FC = forwardRef<

export const EnterpriseBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.branding.enterprise.background,
border: `1px solid ${theme.branding.enterprise.border}`,
color: theme.branding.enterprise.text,
}),
]}
>
<span className={cn(badgeClasses.root, badgeClasses.enterprise)}>
Enterprise
</span>
);
};

export const PremiumBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.branding.premium.background,
border: `1px solid ${theme.branding.premium.border}`,
color: theme.branding.premium.text,
}),
]}
>
Premium
</span>
<span className={cn(badgeClasses.root, badgeClasses.premium)}>Premium</span>
);
};

export const PreviewBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Preview
</span>
<span className={cn(badgeClasses.root, badgeClasses.preview)}>Preview</span>
);
};

export const AlphaBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
}),
]}
>
Alpha
</span>
<span className={cn(badgeClasses.root, badgeClasses.preview)}>Alpha</span>
);
};

export const DeprecatedBadge: FC = () => {
return (
<span
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.danger.outline}`,
backgroundColor: theme.roles.danger.background,
color: theme.roles.danger.text,
}),
]}
>
<span className={cn(badgeClasses.root, badgeClasses.deprecated)}>
Deprecated
</span>
);
};

export const Badges: FC<PropsWithChildren> = ({ children }) => {
return (
<Stack
css={{ margin: "0 0 16px" }}
direction="row"
alignItems="center"
spacing={1}
>
{children}
</Stack>
<div className="flex flex-row items-center gap-2 mb-4">{children}</div>
);
};
Loading
Loading