From 50d4f24490a14594e07829f8ca713fd32044bbff Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 31 Jan 2024 21:28:55 +0000 Subject: [PATCH 1/2] chore: add `inactive` role to experimental theme --- site/src/components/Pill/Pill.tsx | 110 +++++++++++------------- site/src/theme/dark/experimental.ts | 10 +++ site/src/theme/darkBlue/experimental.ts | 10 +++ site/src/theme/experimental.ts | 10 ++- site/src/theme/light/experimental.ts | 10 +++ 5 files changed, 87 insertions(+), 63 deletions(-) diff --git a/site/src/components/Pill/Pill.tsx b/site/src/components/Pill/Pill.tsx index 8fa3b2073ba0e..1f1920e420ad0 100644 --- a/site/src/components/Pill/Pill.tsx +++ b/site/src/components/Pill/Pill.tsx @@ -1,30 +1,21 @@ +import CircularProgress, { + type CircularProgressProps, +} from "@mui/material/CircularProgress"; +import { type Interpolation, type Theme } from "@emotion/react"; import { type FC, + forwardRef, + type HTMLAttributes, type ReactNode, useMemo, - forwardRef, - HTMLAttributes, } from "react"; -import { useTheme, type Interpolation, type Theme } from "@emotion/react"; import type { ThemeRole } from "theme/experimental"; -import CircularProgress, { - CircularProgressProps, -} from "@mui/material/CircularProgress"; - -export type PillType = ThemeRole | keyof typeof themeOverrides; export type PillProps = HTMLAttributes & { icon?: ReactNode; - type?: PillType; + type?: ThemeRole; }; -const themeOverrides = { - neutral: (theme) => ({ - backgroundColor: theme.experimental.l1.background, - borderColor: theme.experimental.l1.outline, - }), -} satisfies Record>; - const themeStyles = (type: ThemeRole) => (theme: Theme) => { const palette = theme.experimental.roles[type]; return { @@ -39,43 +30,13 @@ const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2; export const Pill: FC = forwardRef( (props, ref) => { - const { icon, type = "neutral", children, ...divProps } = props; - const theme = useTheme(); - const typeStyles = useMemo(() => { - if (type in themeOverrides) { - return themeOverrides[type as keyof typeof themeOverrides]; - } - return themeStyles(type as ThemeRole); - }, [type]); + const { icon, type = "inactive", children, ...divProps } = props; + const typeStyles = useMemo(() => themeStyles(type), [type]); return (
{icon} @@ -85,18 +46,45 @@ export const Pill: FC = forwardRef( }, ); -export const PillSpinner = (props: CircularProgressProps) => { +export const PillSpinner: FC = (props) => { return ( - ({ - color: theme.experimental.l1.text, - // It is necessary to align it with the MUI Icons internal padding - "& svg": { - transform: "scale(.75)", - }, - })} - {...props} - /> + ); }; + +const styles = { + pill: (theme) => ({ + fontSize: 12, + color: theme.experimental.l1.text, + cursor: "default", + display: "inline-flex", + alignItems: "center", + whiteSpace: "nowrap", + fontWeight: 400, + borderWidth: 1, + borderStyle: "solid", + borderRadius: 99999, + lineHeight: 1, + height: PILL_HEIGHT, + gap: PILL_ICON_SPACING, + paddingLeft: 12, + paddingRight: 12, + + "& svg": { + width: PILL_ICON_SIZE, + height: PILL_ICON_SIZE, + }, + }), + + pillWithIcon: { + paddingLeft: PILL_ICON_SPACING, + }, + + spinner: (theme) => ({ + color: theme.experimental.l1.text, + // It is necessary to align it with the MUI Icons internal padding + "& svg": { + transform: "scale(.75)", + }, + }), +} satisfies Record>; diff --git a/site/src/theme/dark/experimental.ts b/site/src/theme/dark/experimental.ts index 382c8ef57227e..7d37af167740c 100644 --- a/site/src/theme/dark/experimental.ts +++ b/site/src/theme/dark/experimental.ts @@ -175,6 +175,16 @@ export default { }, }, }, + inactive: { + background: colors.zinc[950], + outline: colors.zinc[500], + text: colors.zinc[50], + fill: { + solid: colors.zinc[400], + outline: colors.zinc[400], + text: colors.white, + }, + }, preview: { background: colors.violet[950], outline: colors.violet[500], diff --git a/site/src/theme/darkBlue/experimental.ts b/site/src/theme/darkBlue/experimental.ts index 5b1e9d739cc8c..352db75106baf 100644 --- a/site/src/theme/darkBlue/experimental.ts +++ b/site/src/theme/darkBlue/experimental.ts @@ -175,6 +175,16 @@ export default { }, }, }, + inactive: { + background: colors.zinc[950], + outline: colors.zinc[500], + text: colors.zinc[50], + fill: { + solid: colors.zinc[400], + outline: colors.zinc[400], + text: colors.white, + }, + }, preview: { background: colors.violet[950], outline: colors.violet[500], diff --git a/site/src/theme/experimental.ts b/site/src/theme/experimental.ts index bf290b75b1a14..fbd1bc5ccf742 100644 --- a/site/src/theme/experimental.ts +++ b/site/src/theme/experimental.ts @@ -29,19 +29,25 @@ export interface NewTheme { /** Selected, in progress, of particular relevance right now. */ active: InteractiveRole; + /** For things that can be made "active", but are not currently so. + * Paused, stopped, off, etc. + */ + inactive: Role; + /** Actions that have long lasting or irreversible effects. * Deletion, immutable parameters, etc. */ danger: InteractiveRole; /** This isn't quite ready for prime-time, but you're welcome to look around! - * Preview features, experiments, unstable etc. + * Preview features, experiments, unstable, etc. */ preview: Role; }; } -/** A set of colors which work together to fill a desirable "communication role" +/** + * A set of colors which work together to fill a desirable "communication role" * ie. I wish to communicate an error, I wish to communicate that this is dangerous, etc. */ export interface Role { diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts index b7a565c7a812b..0993d64746c3b 100644 --- a/site/src/theme/light/experimental.ts +++ b/site/src/theme/light/experimental.ts @@ -175,6 +175,16 @@ export default { }, }, }, + inactive: { + background: colors.gray[100], + outline: colors.gray[500], + text: colors.gray[950], + fill: { + solid: colors.gray[600], + outline: colors.gray[600], + text: colors.white, + }, + }, preview: { background: colors.violet[50], outline: colors.violet[500], From 27d19f67e87d04444038e31c27f8505183e87397 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Wed, 31 Jan 2024 21:40:13 +0000 Subject: [PATCH 2/2] `PillType` -> `ThemeRole` --- .../AuditPage/AuditLogRow/AuditLogRow.tsx | 23 +++++++++---------- .../TemplateVersionsPage/VersionRow.tsx | 6 ++--- .../TemplateVersionStatusBadge.tsx | 7 +++--- site/src/theme/light/experimental.ts | 2 +- 4 files changed, 19 insertions(+), 19 deletions(-) diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx index 40213f70dd7ba..2e622c0e8b1f4 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx @@ -1,32 +1,31 @@ import { type CSSObject, type Interpolation, type Theme } from "@emotion/react"; import Collapse from "@mui/material/Collapse"; import TableCell from "@mui/material/TableCell"; +import { type FC, useState } from "react"; +import userAgentParser from "ua-parser-js"; import type { AuditLog } from "api/typesGenerated"; +import { type ThemeRole } from "theme/experimental"; import { DropdownArrow } from "components/DropdownArrow/DropdownArrow"; -import { Pill, type PillType } from "components/Pill/Pill"; +import { Pill } from "components/Pill/Pill"; import { Stack } from "components/Stack/Stack"; import { TimelineEntry } from "components/Timeline/TimelineEntry"; import { UserAvatar } from "components/UserAvatar/UserAvatar"; -import { type FC, useState } from "react"; -import userAgentParser from "ua-parser-js"; import { AuditLogDiff } from "./AuditLogDiff/AuditLogDiff"; import { AuditLogDescription } from "./AuditLogDescription/AuditLogDescription"; import { determineGroupDiff } from "./AuditLogDiff/auditUtils"; -const httpStatusColor = (httpStatus: number): PillType => { - // redirects are successful - if (httpStatus === 307) { - return "success"; +const httpStatusColor = (httpStatus: number): ThemeRole => { + // Treat server errors (500) as errors + if (httpStatus >= 500) { + return "error"; } - if (httpStatus >= 300 && httpStatus < 500) { + // Treat client errors (400) as warnings + if (httpStatus >= 400) { return "warning"; } - if (httpStatus >= 500) { - return "error"; - } - + // OK (200) and redirects (300) are successful return "success"; }; diff --git a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx index 03491fc3da2d9..15f6c351943c1 100644 --- a/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx +++ b/site/src/pages/TemplatePage/TemplateVersionsPage/VersionRow.tsx @@ -86,17 +86,17 @@ export const VersionRow: FC = ({ )} {jobStatus === "pending" && ( - + Pending… )} {jobStatus === "running" && ( - + Building… )} {(jobStatus === "canceling" || jobStatus === "canceled") && ( - + Canceled )} diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx index 19aba9ef2f1b0..e05bd1172127a 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionStatusBadge.tsx @@ -1,8 +1,9 @@ -import { type TemplateVersion } from "api/typesGenerated"; import { type FC, type ReactNode } from "react"; import ErrorIcon from "@mui/icons-material/ErrorOutline"; import CheckIcon from "@mui/icons-material/CheckOutlined"; -import { Pill, PillSpinner, type PillType } from "components/Pill/Pill"; +import type { TemplateVersion } from "api/typesGenerated"; +import { type ThemeRole } from "theme/experimental"; +import { Pill, PillSpinner } from "components/Pill/Pill"; interface TemplateVersionStatusBadgeProps { version: TemplateVersion; @@ -22,7 +23,7 @@ export const TemplateVersionStatusBadge: FC< export const getStatus = ( version: TemplateVersion, ): { - type?: PillType; + type?: ThemeRole; text: string; icon: ReactNode; } => { diff --git a/site/src/theme/light/experimental.ts b/site/src/theme/light/experimental.ts index 0993d64746c3b..dba54bfc0c6fd 100644 --- a/site/src/theme/light/experimental.ts +++ b/site/src/theme/light/experimental.ts @@ -177,7 +177,7 @@ export default { }, inactive: { background: colors.gray[100], - outline: colors.gray[500], + outline: colors.gray[400], text: colors.gray[950], fill: { solid: colors.gray[600],