Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6eca545

Browse files
aslilacaslilac
committed
new pills!
1 parent d258246 commit 6eca545

File tree

3 files changed

+72
-27
lines changed

3 files changed

+72
-27
lines changed

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import type { ThemeRole } from "theme/roles";
1414
export type PillProps = HTMLAttributes<HTMLDivElement> & {
1515
icon?: ReactNode;
1616
type?: ThemeRole;
17+
size?: "md" | "lg";
1718
};
1819

1920
const themeStyles = (type: ThemeRole) => (theme: Theme) => {
@@ -30,13 +31,24 @@ const PILL_ICON_SPACING = (PILL_HEIGHT - PILL_ICON_SIZE) / 2;
3031

3132
export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
3233
(props, ref) => {
33-
const { icon, type = "inactive", children, ...divProps } = props;
34+
const {
35+
icon,
36+
type = "inactive",
37+
children,
38+
size = "md",
39+
...divProps
40+
} = props;
3441
const typeStyles = useMemo(() => themeStyles(type), [type]);
3542

3643
return (
3744
<div
3845
ref={ref}
39-
css={[styles.pill, icon && styles.pillWithIcon, typeStyles]}
46+
css={[
47+
styles.pill,
48+
size === "lg" && styles.pillLg,
49+
icon && styles.pillWithIcon,
50+
typeStyles,
51+
]}
4052
{...divProps}
4153
>
4254
{icon}
@@ -77,7 +89,12 @@ const styles = {
7789
}),
7890

7991
pillWithIcon: {
80-
paddingLeft: PILL_ICON_SPACING,
92+
paddingLeft: PILL_ICON_SPACING * 2,
93+
},
94+
95+
pillLg: {
96+
gap: PILL_ICON_SPACING * 2,
97+
padding: "14px 16px",
8198
},
8299

83100
spinner: (theme) => ({

‎site/src/modules/provisioners/Provisioner.tsx

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import { useTheme } from "@emotion/react";
22
import Business from "@mui/icons-material/Business";
33
import Person from "@mui/icons-material/Person";
4-
import SwapHoriz from "@mui/icons-material/SwapHoriz";
54
import Tooltip from "@mui/material/Tooltip";
65
import type { HealthMessage, ProvisionerDaemon } from "api/typesGenerated";
6+
import { Pill } from "components/Pill/Pill";
77
import type { FC } from "react";
88
import { createDayString } from "utils/createDayString";
99
import { ProvisionerTag } from "./ProvisionerTag";
1010

11-
// TODO: Importing from a page in here sucks, but idk how to refactor this...
12-
// it's kind of a mess of a file...
13-
import { Pill } from "pages/HealthPage/Content";
14-
1511
interface ProvisionerProps {
1612
readonly provisioner: ProvisionerDaemon;
1713
readonly warnings?: readonly HealthMessage[];
@@ -32,13 +28,14 @@ export const Provisioner: FC<ProvisionerProps> = ({
3228
return (
3329
<div
3430
key={provisioner.name}
35-
css={{
36-
borderRadius: 8,
37-
border: `1px solid ${
38-
isWarning ? theme.palette.warning.light : theme.palette.divider
39-
}`,
40-
fontSize: 14,
41-
}}
31+
css={[
32+
{
33+
borderRadius: 8,
34+
border: `1px solid ${theme.palette.divider}`,
35+
fontSize: 14,
36+
},
37+
isWarning && { borderColor: theme.palette.warning.light },
38+
]}
4239
>
4340
<header
4441
css={{
@@ -72,13 +69,8 @@ export const Provisioner: FC<ProvisionerProps> = ({
7269
gap: 12,
7370
}}
7471
>
75-
<Tooltip title="API Version">
76-
<Pill icon={<SwapHoriz />}>
77-
<code>{provisioner.api_version}</code>
78-
</Pill>
79-
</Tooltip>
8072
<Tooltip title="Scope">
81-
<Pill icon={iconScope}>
73+
<Pill size="lg" icon={iconScope}>
8274
<span
8375
css={{
8476
":first-letter": { textTransform: "uppercase" },

‎site/src/modules/provisioners/ProvisionerTag.tsx

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import CloseIcon from "@mui/icons-material/Close";
22
import Sell from "@mui/icons-material/Sell";
33
import IconButton from "@mui/material/IconButton";
4-
import type { FC } from "react";
5-
6-
// TODO: Importing from a page in here sucks, but idk how to refactor this...
7-
// it's kind of a mess of a file...
8-
import { BooleanPill, Pill } from "pages/HealthPage/Content";
4+
import type { ComponentProps, FC } from "react";
5+
import { Pill } from "components/Pill/Pill";
6+
import type { Interpolation, Theme } from "@emotion/react";
7+
import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
8+
import DoNotDisturbOnOutlined from "@mui/icons-material/DoNotDisturbOnOutlined";
99

1010
const parseBool = (s: string): { valid: boolean; value: boolean } => {
1111
switch (s.toLowerCase()) {
@@ -57,5 +57,41 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
5757
if (valid) {
5858
return <BooleanPill value={boolValue}>{content}</BooleanPill>;
5959
}
60-
return <Pill icon={<Sell />}>{content}</Pill>;
60+
return <Pill size="lg" icon={<Sell />}>{content}</Pill>;
61+
};
62+
63+
type BooleanPillProps = Omit<ComponentProps<typeof Pill>, "icon" | "value"> & {
64+
value: boolean;
65+
};
66+
67+
export const BooleanPill: FC<BooleanPillProps> = ({
68+
value,
69+
children,
70+
...divProps
71+
}) => {
72+
return (
73+
<Pill
74+
type={value ? "active" : "danger"}
75+
size="lg"
76+
icon={
77+
value ? (
78+
<CheckCircleOutlined css={styles.truePill} />
79+
) : (
80+
<DoNotDisturbOnOutlined css={styles.falsePill} />
81+
)
82+
}
83+
{...divProps}
84+
>
85+
{children}
86+
</Pill>
87+
);
6188
};
89+
90+
const styles = {
91+
truePill: (theme) => ({
92+
color: theme.roles.active.outline,
93+
}),
94+
falsePill: (theme) => ({
95+
color: theme.roles.danger.outline,
96+
}),
97+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)