Skip to content

Commit 86c49ce

Browse files
jaaydenhjaaydenh
committed
feat: add early access badges for dynamic parameters
1 parent 177bda3 commit 86c49ce

File tree

5 files changed

+70
-111
lines changed

5 files changed

+70
-111
lines changed

‎site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,27 +12,30 @@ const meta: Meta<typeof FeatureStageBadge> = {
1212
export default meta;
1313
type Story = StoryObj<typeof FeatureStageBadge>;
1414

15-
export const MediumBeta: Story = {
15+
export const SmallBeta: Story = {
1616
args: {
17-
size: "md",
17+
size: "sm",
18+
contentType: "beta",
1819
},
1920
};
2021

21-
export const SmallBeta: Story = {
22+
export const MediumBeta: Story = {
2223
args: {
23-
size: "sm",
24+
size: "md",
25+
contentType: "beta",
2426
},
2527
};
2628

27-
export const LargeBeta: Story = {
29+
export const SmallEarlyAccess: Story = {
2830
args: {
29-
size: "lg",
31+
size: "sm",
32+
contentType: "early_access",
3033
},
3134
};
3235

33-
export const MediumExperimental: Story = {
36+
export const MediumEarlyAccess: Story = {
3437
args: {
3538
size: "md",
36-
contentType: "experimental",
39+
contentType: "early_access",
3740
},
3841
};

‎site/src/components/FeatureStageBadge/FeatureStageBadge.tsx

Lines changed: 46 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,87 @@
1-
import type { Interpolation, Theme } from "@emotion/react";
2-
import Link from "@mui/material/Link";
3-
import { visuallyHidden } from "@mui/utils";
4-
import { HelpTooltipContent } from "components/HelpTooltip/HelpTooltip";
5-
import { Popover, PopoverTrigger } from "components/deprecated/Popover/Popover";
1+
import { Link } from "components/Link/Link";
2+
import {
3+
Tooltip,
4+
TooltipContent,
5+
TooltipProvider,
6+
TooltipTrigger,
7+
} from "components/Tooltip/Tooltip";
68
import type { FC, HTMLAttributes, ReactNode } from "react";
9+
import { cn } from "utils/cn";
710
import { docs } from "utils/docs";
811

912
/**
1013
* All types of feature that we are currently supporting. Defined as record to
1114
* ensure that we can't accidentally make typos when writing the badge text.
1215
*/
1316
export const featureStageBadgeTypes = {
17+
early_access: "early access",
1418
beta: "beta",
15-
experimental: "experimental",
1619
} as const satisfies Record<string, ReactNode>;
1720

1821
type FeatureStageBadgeProps = Readonly<
1922
Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
2023
contentType: keyof typeof featureStageBadgeTypes;
2124
labelText?: string;
22-
size?: "sm" | "md" | "lg";
23-
showTooltip?: boolean;
25+
size?: "sm" | "md";
2426
}
2527
>;
2628

29+
const badgeColorClasses = {
30+
early_access:
31+
"border-solid border-border-warning bg-surface-orange text-content-warning hover:bg-transparent",
32+
beta: "border-solid border-highlight-sky bg-surface-sky text-highlight-sky hover:bg-transparent",
33+
} as const;
34+
35+
const badgeSizeClasses = {
36+
sm: "text-xs font-medium px-2 py-1",
37+
md: "text-base px-2 py-1",
38+
} as const;
39+
2740
export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
2841
contentType,
2942
labelText = "",
3043
size = "md",
31-
showTooltip = true, // This is a temporary until the deprecated popover is removed
44+
className,
3245
...delegatedProps
3346
}) => {
47+
const colorClasses = badgeColorClasses[contentType];
48+
const sizeClasses = badgeSizeClasses[size];
49+
3450
return (
35-
<Popover mode="hover">
36-
<PopoverTrigger>
37-
{({ isOpen }) => (
38-
<span
39-
css={[
40-
styles.badge,
41-
size === "sm" && styles.badgeSmallText,
42-
size === "lg" && styles.badgeLargeText,
43-
isOpen && styles.badgeHover,
44-
]}
51+
<TooltipProvider delayDuration={100}>
52+
<Tooltip>
53+
<TooltipTrigger asChild>
54+
<button
55+
className={cn(
56+
"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent",
57+
sizeClasses,
58+
colorClasses,
59+
className,
60+
)}
4561
{...delegatedProps}
4662
>
47-
<span style={visuallyHidden}> (This is a</span>
63+
<span className="sr-only"> (This is a</span>
4864
<span className="first-letter:uppercase">
4965
{labelText && `${labelText} `}
5066
{featureStageBadgeTypes[contentType]}
5167
</span>
52-
<span style={visuallyHidden}> feature)</span>
53-
</span>
54-
)}
55-
</PopoverTrigger>
56-
57-
{showTooltip && (
58-
<HelpTooltipContent
59-
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
60-
transformOrigin={{ vertical: "top", horizontal: "center" }}
61-
>
62-
<p css={styles.tooltipDescription}>
68+
<span className="sr-only"> feature)</span>
69+
</button>
70+
</TooltipTrigger>
71+
<TooltipContent align="start" className="max-w-xs text-sm">
72+
<p className="m-0">
6373
This feature has not yet reached general availability (GA).
6474
</p>
6575

6676
<Link
6777
href={docs("/install/releases/feature-stages")}
68-
target="_blank"
69-
rel="noreferrer"
70-
css={styles.tooltipLink}
78+
className="font-semibold"
7179
>
7280
Learn about feature stages
73-
<span style={visuallyHidden}> (link opens in new tab)</span>
81+
<span className="sr-only"> (link opens in new tab)</span>
7482
</Link>
75-
</HelpTooltipContent>
76-
)}
77-
</Popover>
83+
</TooltipContent>
84+
</Tooltip>
85+
</TooltipProvider>
7886
);
7987
};
80-
81-
const styles = {
82-
badge: (theme) => ({
83-
// Base type is based on a span so that the element can be placed inside
84-
// more types of HTML elements without creating invalid markdown, but we
85-
// still want the default display behavior to be div-like
86-
display: "block",
87-
maxWidth: "fit-content",
88-
89-
// Base style assumes that medium badges will be the default
90-
fontSize: "0.75rem",
91-
92-
cursor: "default",
93-
flexShrink: 0,
94-
padding: "4px 8px",
95-
lineHeight: 1,
96-
whiteSpace: "nowrap",
97-
border: `1px solid ${theme.branding.featureStage.border}`,
98-
color: theme.branding.featureStage.text,
99-
backgroundColor: theme.branding.featureStage.background,
100-
borderRadius: "6px",
101-
transition:
102-
"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
103-
}),
104-
105-
badgeHover: (theme) => ({
106-
color: theme.branding.featureStage.hover.text,
107-
borderColor: theme.branding.featureStage.hover.border,
108-
backgroundColor: theme.branding.featureStage.hover.background,
109-
}),
110-
111-
badgeLargeText: {
112-
fontSize: "1rem",
113-
},
114-
115-
badgeSmallText: {
116-
// Have to beef up font weight so that the letters still maintain the
117-
// same relative thickness as all our other main UI text
118-
fontWeight: 500,
119-
fontSize: "0.625rem",
120-
},
121-
122-
tooltipTitle: (theme) => ({
123-
color: theme.palette.text.primary,
124-
fontWeight: 600,
125-
fontFamily: "inherit",
126-
fontSize: 18,
127-
margin: 0,
128-
lineHeight: 1,
129-
paddingBottom: "8px",
130-
}),
131-
132-
tooltipDescription: {
133-
margin: 0,
134-
lineHeight: 1.4,
135-
paddingBottom: "8px",
136-
},
137-
138-
tooltipLink: {
139-
fontWeight: 600,
140-
lineHeight: 1.2,
141-
},
142-
} as const satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/CreateWorkspacePage/CreateWorkspacePageViewExperimental.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,11 @@ export const CreateWorkspacePageViewExperimental: FC<
368368
</div>
369369
<span className="flex flex-row items-center gap-2">
370370
<h1 className="text-3xl font-semibold m-0">New workspace</h1>
371+
<FeatureStageBadge
372+
contentType={"early_access"}
373+
size="sm"
374+
labelText="Dynamic parameters"
375+
/>
371376
<TooltipProvider delayDuration={100}>
372377
<Tooltip>
373378
<TooltipTrigger asChild>
@@ -555,7 +560,7 @@ export const CreateWorkspacePageViewExperimental: FC<
555560
<div className="flex flex-col gap-2">
556561
<div className="flex gap-2 items-center">
557562
<Label className="text-sm">Preset</Label>
558-
<FeatureStageBadge contentType={"beta"} size="md" />
563+
<FeatureStageBadge contentType={"beta"} size="sm" />
559564
</div>
560565
<div className="flex flex-col gap-4">
561566
<div className="max-w-lg">

‎site/src/pages/UserSettingsPage/Section.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const Section: FC<SectionProps> = ({
5353
{featureStage && (
5454
<FeatureStageBadge
5555
contentType={featureStage}
56-
size="lg"
56+
size="md"
5757
css={{ marginBottom: "5px" }}
5858
/>
5959
)}

‎site/src/pages/WorkspaceSettingsPage/WorkspaceParametersPage/WorkspaceParametersPageExperimental.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import type {
99
import { ErrorAlert } from "components/Alert/ErrorAlert";
1010
import { Button } from "components/Button/Button";
1111
import { EmptyState } from "components/EmptyState/EmptyState";
12+
import { FeatureStageBadge } from "components/FeatureStageBadge/FeatureStageBadge";
1213
import { Link } from "components/Link/Link";
1314
import { Loader } from "components/Loader/Loader";
1415
import {
@@ -205,6 +206,11 @@ const WorkspaceParametersPageExperimental: FC = () => {
205206
<header className="flex flex-col items-start gap-2">
206207
<span className="flex flex-row items-center gap-2">
207208
<h1 className="text-3xl m-0">Workspace parameters</h1>
209+
<FeatureStageBadge
210+
contentType={"early_access"}
211+
size="sm"
212+
labelText="Dynamic parameters"
213+
/>
208214
<TooltipProvider delayDuration={100}>
209215
<Tooltip>
210216
<TooltipTrigger asChild>

0 commit comments

Comments
 (0)