Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat: add early access badges for dynamic parameters#18114

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.

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

Already on GitHub?Sign in to your account

Merged
jaaydenh merged 3 commits intomainfromjaaydenh/early-access-badge
May 30, 2025
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,27 +12,30 @@ const meta: Meta<typeof FeatureStageBadge> = {
exportdefaultmeta;
typeStory=StoryObj<typeofFeatureStageBadge>;

exportconstMediumBeta:Story={
exportconstSmallBeta:Story={
args:{
size:"md",
size:"sm",
contentType:"beta",
},
};

exportconstSmallBeta:Story={
exportconstMediumBeta:Story={
args:{
size:"sm",
size:"md",
contentType:"beta",
},
};

exportconstLargeBeta:Story={
exportconstSmallEarlyAccess:Story={
args:{
size:"lg",
size:"sm",
contentType:"early_access",
},
};

exportconstMediumExperimental:Story={
exportconstMediumEarlyAccess:Story={
args:{
size:"md",
contentType:"experimental",
contentType:"early_access",
},
};
142 changes: 43 additions & 99 deletionssite/src/components/FeatureStageBadge/FeatureStageBadge.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,86 @@
importtype{Interpolation,Theme}from"@emotion/react";
importLinkfrom"@mui/material/Link";
import{visuallyHidden}from"@mui/utils";
import{HelpTooltipContent}from"components/HelpTooltip/HelpTooltip";
import{Popover,PopoverTrigger}from"components/deprecated/Popover/Popover";
import{Link}from"components/Link/Link";
import{
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
}from"components/Tooltip/Tooltip";
importtype{FC,HTMLAttributes,ReactNode}from"react";
import{cn}from"utils/cn";
import{docs}from"utils/docs";

/**
* All types of feature that we are currently supporting. Defined as record to
* ensure that we can't accidentally make typos when writing the badge text.
*/
exportconstfeatureStageBadgeTypes={
early_access:"early access",
beta:"beta",
experimental:"experimental",
}asconstsatisfiesRecord<string,ReactNode>;

typeFeatureStageBadgeProps=Readonly<
Omit<HTMLAttributes<HTMLSpanElement>,"children">&{
contentType:keyoftypeoffeatureStageBadgeTypes;
labelText?:string;
size?:"sm"|"md"|"lg";
showTooltip?:boolean;
size?:"sm"|"md";
}
>;

constbadgeColorClasses={
early_access:"bg-surface-orange text-content-warning",
beta:"bg-surface-sky text-highlight-sky",
}asconst;

constbadgeSizeClasses={
sm:"text-xs font-medium px-2 py-1",
md:"text-base px-2 py-1",
}asconst;

exportconstFeatureStageBadge:FC<FeatureStageBadgeProps>=({
contentType,
labelText="",
size="md",
showTooltip=true,// This is a temporary until the deprecated popover is removed
className,
...delegatedProps
})=>{
constcolorClasses=badgeColorClasses[contentType];
constsizeClasses=badgeSizeClasses[size];

return(
<Popovermode="hover">
<PopoverTrigger>
{({ isOpen})=>(
<TooltipProviderdelayDuration={100}>
<Tooltip>
<TooltipTriggerasChild>
<span
css={[
styles.badge,
size==="sm"&&styles.badgeSmallText,
size==="lg"&&styles.badgeLargeText,
isOpen&&styles.badgeHover,
]}
className={cn(
"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 border-solid border-transparent",
sizeClasses,
colorClasses,
className,
)}
{...delegatedProps}
>
<spanstyle={visuallyHidden}> (This is a</span>
<spanclassName="sr-only"> (This is a</span>
<spanclassName="first-letter:uppercase">
{labelText&&`${labelText} `}
{featureStageBadgeTypes[contentType]}
</span>
<spanstyle={visuallyHidden}> feature)</span>
<spanclassName="sr-only"> feature)</span>
</span>
)}
</PopoverTrigger>

{showTooltip&&(
<HelpTooltipContent
anchorOrigin={{vertical:"bottom",horizontal:"center"}}
transformOrigin={{vertical:"top",horizontal:"center"}}
>
<pcss={styles.tooltipDescription}>
</TooltipTrigger>
<TooltipContentalign="start"className="max-w-xs text-sm">
<pclassName="m-0">
This feature has not yet reached general availability (GA).
</p>

<Link
href={docs("/install/releases/feature-stages")}
target="_blank"
rel="noreferrer"
css={styles.tooltipLink}
className="font-semibold"
>
Learn about feature stages
<spanstyle={visuallyHidden}> (link opens in new tab)</span>
<spanclassName="sr-only"> (link opens in new tab)</span>
</Link>
</HelpTooltipContent>
)}
</Popover>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};

conststyles={
badge:(theme)=>({
// Base type is based on a span so that the element can be placed inside
// more types of HTML elements without creating invalid markdown, but we
// still want the default display behavior to be div-like
display:"block",
maxWidth:"fit-content",

// Base style assumes that medium badges will be the default
fontSize:"0.75rem",

cursor:"default",
flexShrink:0,
padding:"4px 8px",
lineHeight:1,
whiteSpace:"nowrap",
border:`1px solid${theme.branding.featureStage.border}`,
color:theme.branding.featureStage.text,
backgroundColor:theme.branding.featureStage.background,
borderRadius:"6px",
transition:
"color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out",
}),

badgeHover:(theme)=>({
color:theme.branding.featureStage.hover.text,
borderColor:theme.branding.featureStage.hover.border,
backgroundColor:theme.branding.featureStage.hover.background,
}),

badgeLargeText:{
fontSize:"1rem",
},

badgeSmallText:{
// Have to beef up font weight so that the letters still maintain the
// same relative thickness as all our other main UI text
fontWeight:500,
fontSize:"0.625rem",
},

tooltipTitle:(theme)=>({
color:theme.palette.text.primary,
fontWeight:600,
fontFamily:"inherit",
fontSize:18,
margin:0,
lineHeight:1,
paddingBottom:"8px",
}),

tooltipDescription:{
margin:0,
lineHeight:1.4,
paddingBottom:"8px",
},

tooltipLink:{
fontWeight:600,
lineHeight:1.2,
},
}asconstsatisfiesRecord<string,Interpolation<Theme>>;
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,12 +3,12 @@ import type { FriendlyDiagnostic, PreviewParameter } from "api/typesGenerated";
import{Alert}from"components/Alert/Alert";
import{ErrorAlert}from"components/Alert/ErrorAlert";
import{Avatar}from"components/Avatar/Avatar";
import{Badge}from"components/Badge/Badge";
import{Button}from"components/Button/Button";
import{FeatureStageBadge}from"components/FeatureStageBadge/FeatureStageBadge";
import{Input}from"components/Input/Input";
import{Label}from"components/Label/Label";
import{Link}from"components/Link/Link";
import{Pill}from"components/Pill/Pill";
import{
Select,
SelectContent,
Expand DownExpand Up@@ -353,21 +353,39 @@ export const CreateWorkspacePageViewExperimental: FC<
</div>
<divclassName="flex flex-col gap-6 max-w-screen-md mx-auto">
<headerclassName="flex flex-col items-start gap-3 mt-10">
<divclassName="flex items-center gap-2">
<Avatar
variant="icon"
size="md"
src={template.icon}
fallback={template.name}
/>
<pclassName="text-base font-medium m-0">
{template.display_name.length>0
?template.display_name
:template.name}
</p>
<divclassName="flex items-center gap-2 justify-between w-full">
<spanclassName="flex items-center gap-2">
<Avatar
variant="icon"
size="md"
src={template.icon}
fallback={template.name}
/>
<pclassName="text-base font-medium m-0">
{template.display_name.length>0
?template.display_name
:template.name}
</p>
{template.deprecated&&(
<Badgevariant="warning"size="sm">
Deprecated
</Badge>
)}
</span>
{experimentalFormContext&&(
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2/>
Classic workspace creation
</Button>
)}
</div>
<spanclassName="flex flex-row items-center gap-2">
<h1className="text-3xl font-semibold m-0">New workspace</h1>

<TooltipProviderdelayDuration={100}>
<Tooltip>
<TooltipTriggerasChild>
Expand All@@ -389,19 +407,11 @@ export const CreateWorkspacePageViewExperimental: FC<
</Tooltip>
</TooltipProvider>
</span>

{template.deprecated&&<Pilltype="warning">Deprecated</Pill>}

{experimentalFormContext&&(
<Button
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
<Undo2/>
Use the classic workspace creation flow
</Button>
)}
<FeatureStageBadge
contentType={"early_access"}
size="sm"
labelText="Dynamic parameters"
/>
</header>

<form
Expand DownExpand Up@@ -555,7 +565,7 @@ export const CreateWorkspacePageViewExperimental: FC<
<divclassName="flex flex-col gap-2">
<divclassName="flex gap-2 items-center">
<LabelclassName="text-sm">Preset</Label>
<FeatureStageBadgecontentType={"beta"}size="md"/>
<FeatureStageBadgecontentType={"beta"}size="sm"/>
</div>
<divclassName="flex flex-col gap-4">
<divclassName="max-w-lg">
Expand Down
2 changes: 1 addition & 1 deletionsite/src/pages/UserSettingsPage/Section.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -53,7 +53,7 @@ export const Section: FC<SectionProps> = ({
{featureStage&&(
<FeatureStageBadge
contentType={featureStage}
size="lg"
size="md"
css={{marginBottom:"5px"}}
/>
)}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -117,18 +117,18 @@ export const WorkspaceParametersPageView: FC<
return (
<div className="flex flex-col gap-10">
<header className="flex flex-col items-start gap-2">
<span className="flex flex-row justify-between items-center gap-2">
<span className="flex flex-row justify-betweenw-fullitems-center gap-2">
<h1 className="text-3xl m-0">Workspace parameters</h1>
{experimentalFormContext && (
<ShadcnButton
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Try out the new workspace parameters ✨
</ShadcnButton>
)}
</span>
{experimentalFormContext && (
<ShadcnButton
size="sm"
variant="outline"
onClick={experimentalFormContext.toggleOptedOut}
>
Try out the new workspace parameters ✨
</ShadcnButton>
)}
</header>

{submitError && !isApiValidationError(submitError) ? (
Expand Down
Loading
Loading
[8]ページ先頭
©2009-2025 Movatter.jp