Skip to content

Commit d2e6405

Browse files
aslilacaslilac
authored
chore: add inactive role to experimental theme (#11967)
1 parent 4df9133 commit d2e6405

File tree

8 files changed

+105
-81
lines changed

8 files changed

+105
-81
lines changed

‎site/src/components/Pill/Pill.tsx

+49-61
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
1+
import CircularProgress, {
2+
type CircularProgressProps,
3+
} from "@mui/material/CircularProgress";
4+
import { type Interpolation, type Theme } from "@emotion/react";
15
import {
26
type FC,
7+
forwardRef,
8+
type HTMLAttributes,
39
type ReactNode,
410
useMemo,
5-
forwardRef,
6-
HTMLAttributes,
711
} from "react";
8-
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
912
import type { ThemeRole } from "theme/experimental";
10-
import CircularProgress, {
11-
CircularProgressProps,
12-
} from "@mui/material/CircularProgress";
13-
14-
export type PillType = ThemeRole | keyof typeof themeOverrides;
1513

1614
export type PillProps = HTMLAttributes<HTMLDivElement> & {
1715
icon?: ReactNode;
18-
type?: PillType;
16+
type?: ThemeRole;
1917
};
2018

21-
const themeOverrides = {
22-
neutral: (theme) => ({
23-
backgroundColor: theme.experimental.l1.background,
24-
borderColor: theme.experimental.l1.outline,
25-
}),
26-
} satisfies Record<string, Interpolation<Theme>>;
27-
2819
const themeStyles = (type: ThemeRole) => (theme: Theme) => {
2920
const palette = theme.experimental.roles[type];
3021
return {
@@ -39,43 +30,13 @@ const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2;
3930

4031
export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
4132
(props, ref) => {
42-
const { icon, type = "neutral", children, ...divProps } = props;
43-
const theme = useTheme();
44-
const typeStyles = useMemo(() => {
45-
if (type in themeOverrides) {
46-
return themeOverrides[type as keyof typeof themeOverrides];
47-
}
48-
return themeStyles(type as ThemeRole);
49-
}, [type]);
33+
const { icon, type = "inactive", children, ...divProps } = props;
34+
const typeStyles = useMemo(() => themeStyles(type), [type]);
5035

5136
return (
5237
<div
5338
ref={ref}
54-
css={[
55-
{
56-
fontSize: 12,
57-
color: theme.experimental.l1.text,
58-
cursor: "default",
59-
display: "inline-flex",
60-
alignItems: "center",
61-
whiteSpace: "nowrap",
62-
fontWeight: 400,
63-
borderWidth: 1,
64-
borderStyle: "solid",
65-
borderRadius: 99999,
66-
lineHeight: 1,
67-
height: PILL_HEIGHT,
68-
gap: PILL_ICON_SPACING,
69-
paddingRight: 12,
70-
paddingLeft: icon ? PILL_ICON_SPACING : 12,
71-
72-
"& svg": {
73-
width: PILL_ICON_SIZE,
74-
height: PILL_ICON_SIZE,
75-
},
76-
},
77-
typeStyles,
78-
]}
39+
css={[styles.pill, icon && styles.pillWithIcon, typeStyles]}
7940
{...divProps}
8041
>
8142
{icon}
@@ -85,18 +46,45 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
8546
},
8647
);
8748

88-
export const PillSpinner = (props: CircularProgressProps) => {
49+
export const PillSpinner: FC<CircularProgressProps> = (props) => {
8950
return (
90-
<CircularProgress
91-
size={PILL_ICON_SIZE}
92-
css={(theme) => ({
93-
color: theme.experimental.l1.text,
94-
// It is necessary to align it with the MUI Icons internal padding
95-
"& svg": {
96-
transform: "scale(.75)",
97-
},
98-
})}
99-
{...props}
100-
/>
51+
<CircularProgress size={PILL_ICON_SIZE} css={styles.spinner} {...props} />
10152
);
10253
};
54+
55+
const styles = {
56+
pill: (theme) => ({
57+
fontSize: 12,
58+
color: theme.experimental.l1.text,
59+
cursor: "default",
60+
display: "inline-flex",
61+
alignItems: "center",
62+
whiteSpace: "nowrap",
63+
fontWeight: 400,
64+
borderWidth: 1,
65+
borderStyle: "solid",
66+
borderRadius: 99999,
67+
lineHeight: 1,
68+
height: PILL_HEIGHT,
69+
gap: PILL_ICON_SPACING,
70+
paddingLeft: 12,
71+
paddingRight: 12,
72+
73+
"& svg": {
74+
width: PILL_ICON_SIZE,
75+
height: PILL_ICON_SIZE,
76+
},
77+
}),
78+
79+
pillWithIcon: {
80+
paddingLeft: PILL_ICON_SPACING,
81+
},
82+
83+
spinner: (theme) => ({
84+
color: theme.experimental.l1.text,
85+
// It is necessary to align it with the MUI Icons internal padding
86+
"& svg": {
87+
transform: "scale(.75)",
88+
},
89+
}),
90+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,31 @@
11
import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
22
import Collapse from "@mui/material/Collapse";
33
import TableCell from "@mui/material/TableCell";
4+
import { type FC, useState } from "react";
5+
import userAgentParser from "ua-parser-js";
46
import type { AuditLog } from "api/typesGenerated";
7+
import { type ThemeRole } from "theme/experimental";
58
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
6-
import { Pill, type PillType } from "components/Pill/Pill";
9+
import { Pill } from "components/Pill/Pill";
710
import { Stack } from "components/Stack/Stack";
811
import { TimelineEntry } from "components/Timeline/TimelineEntry";
912
import { UserAvatar } from "components/UserAvatar/UserAvatar";
10-
import { type FC, useState } from "react";
11-
import userAgentParser from "ua-parser-js";
1213
import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff";
1314
import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription";
1415
import { determineGroupDiff } from "./AuditLogDiff/auditUtils";
1516

16-
const httpStatusColor = (httpStatus: number): PillType => {
17-
// redirects are successful
18-
if (httpStatus === 307) {
19-
return "success";
17+
const httpStatusColor = (httpStatus: number): ThemeRole => {
18+
// Treat server errors (500) as errors
19+
if (httpStatus >= 500) {
20+
return "error";
2021
}
2122

22-
if (httpStatus >= 300 && httpStatus < 500) {
23+
// Treat client errors (400) as warnings
24+
if (httpStatus >= 400) {
2325
return "warning";
2426
}
2527

26-
if (httpStatus >= 500) {
27-
return "error";
28-
}
29-
28+
// OK (200) and redirects (300) are successful
3029
return "success";
3130
};
3231

‎site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -86,17 +86,17 @@ export const VersionRow: FC<VersionRowProps> = ({
8686
</Pill>
8787
)}
8888
{jobStatus === "pending" && (
89-
<Pill role="status" type="warning">
89+
<Pill role="status" type="inactive">
9090
Pending&hellip;
9191
</Pill>
9292
)}
9393
{jobStatus === "running" && (
94-
<Pill role="status" type="warning">
94+
<Pill role="status" type="active">
9595
Building&hellip;
9696
</Pill>
9797
)}
9898
{(jobStatus === "canceling" || jobStatus === "canceled") && (
99-
<Pill role="status" type="neutral">
99+
<Pill role="status" type="inactive">
100100
Canceled
101101
</Pill>
102102
)}

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { type TemplateVersion } from "api/typesGenerated";
21
import { type FC, type ReactNode } from "react";
32
import ErrorIcon from "@mui/icons-material/ErrorOutline";
43
import CheckIcon from "@mui/icons-material/CheckOutlined";
5-
import { Pill, PillSpinner, type PillType } from "components/Pill/Pill";
4+
import type { TemplateVersion } from "api/typesGenerated";
5+
import { type ThemeRole } from "theme/experimental";
6+
import { Pill, PillSpinner } from "components/Pill/Pill";
67

78
interface TemplateVersionStatusBadgeProps {
89
version: TemplateVersion;
@@ -22,7 +23,7 @@ export const TemplateVersionStatusBadge: FC<
2223
export const getStatus = (
2324
version: TemplateVersion,
2425
): {
25-
type?: PillType;
26+
type?: ThemeRole;
2627
text: string;
2728
icon: ReactNode;
2829
} => {

‎site/src/theme/dark/experimental.ts

+10
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,16 @@ export default {
175175
},
176176
},
177177
},
178+
inactive: {
179+
background: colors.zinc[950],
180+
outline: colors.zinc[500],
181+
text: colors.zinc[50],
182+
fill: {
183+
solid: colors.zinc[400],
184+
outline: colors.zinc[400],
185+
text: colors.white,
186+
},
187+
},
178188
preview: {
179189
background: colors.violet[950],
180190
outline: colors.violet[500],

‎site/src/theme/darkBlue/experimental.ts

+10
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,16 @@ export default {
175175
},
176176
},
177177
},
178+
inactive: {
179+
background: colors.zinc[950],
180+
outline: colors.zinc[500],
181+
text: colors.zinc[50],
182+
fill: {
183+
solid: colors.zinc[400],
184+
outline: colors.zinc[400],
185+
text: colors.white,
186+
},
187+
},
178188
preview: {
179189
background: colors.violet[950],
180190
outline: colors.violet[500],

‎site/src/theme/experimental.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,25 @@ export interface NewTheme {
2929
/** Selected, in progress, of particular relevance right now. */
3030
active: InteractiveRole;
3131

32+
/** For things that can be made "active", but are not currently so.
33+
* Paused, stopped, off, etc.
34+
*/
35+
inactive: Role;
36+
3237
/** Actions that have long lasting or irreversible effects.
3338
* Deletion, immutable parameters, etc.
3439
*/
3540
danger: InteractiveRole;
3641

3742
/** This isn't quite ready for prime-time, but you're welcome to look around!
38-
* Preview features, experiments, unstable etc.
43+
* Preview features, experiments, unstable, etc.
3944
*/
4045
preview: Role;
4146
};
4247
}
4348

44-
/** A set of colors which work together to fill a desirable "communication role"
49+
/**
50+
* A set of colors which work together to fill a desirable "communication role"
4551
* ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc.
4652
*/
4753
export interface Role {

‎site/src/theme/light/experimental.ts

+10
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,16 @@ export default {
175175
},
176176
},
177177
},
178+
inactive: {
179+
background: colors.gray[100],
180+
outline: colors.gray[400],
181+
text: colors.gray[950],
182+
fill: {
183+
solid: colors.gray[600],
184+
outline: colors.gray[600],
185+
text: colors.white,
186+
},
187+
},
178188
preview: {
179189
background: colors.violet[50],
180190
outline: colors.violet[500],

0 commit comments

Comments
 (0)