ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Labels in progress button and option arg section heading

Browse Source
This commit is contained in:
Pierre Jacquier
2025-06-17 10:46:07 -04:00
parent a4c00d0d2c
commit fc6a9e33e4
3 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CommandBar/CommandBar.tsx
View File

@ -146,7 +146,7 @@ export const CommandBar = () => {
leaveTo="opacity-0 scale-95" leaveTo="opacity-0 scale-95"
> >
<WrapperComponent.Panel <WrapperComponent.Panel
className="relative z-50 pointer-events-auto w-full max-w-xl pt-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70" className="relative z-50 pointer-events-auto w-full max-w-2xl pt-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
as="div" as="div"
data-testid="command-bar" data-testid="command-bar"
> >

26
src/components/CommandBar/CommandBarHeader.tsx
View File

@ -248,8 +248,9 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
</div> </div>
<div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" /> <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
{isReviewing && ( {isReviewing && (
<> <div className="px-4">
<div className="group px-2 mb-2 text-sm flex gap-4 items-start"> <p className="mb-2">Optional arguments</p>
<div className="text-sm flex gap-4 items-start">
<div className="flex flex-1 flex-wrap gap-2"> <div className="flex flex-1 flex-wrap gap-2">
{Object.entries(nonHiddenArgs || {}).flatMap( {Object.entries(nonHiddenArgs || {}).flatMap(
([argName, arg], i) => { ([argName, arg], i) => {
@ -279,18 +280,17 @@ function CommandBarHeader({ children }: React.PropsWithChildren<object>) {
key={argName} key={argName}
className="text-blue border-none bg-transparent font-sm flex gap-1 items-center pl-0 pr-1" className="text-blue border-none bg-transparent font-sm flex gap-1 items-center pl-0 pr-1"
> >
<CustomIcon name="plus" className="w-5 h-5" />
<span className="capitalize"> <span className="capitalize">
{arg.displayName || argName} {arg.displayName || argName}
</span> </span>
<CustomIcon name="plus" className="w-5 h-5" />
</button> </button>
) )
} }
)} )}
</div> </div>
</div> </div>
<div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" /> </div>
</>
)} )}
{children} {children}
</> </>
@ -312,16 +312,16 @@ function ReviewingButton({ bgClassName, iconClassName }: ButtonProps) {
ref={buttonRef} ref={buttonRef}
type="submit" type="submit"
form="review-form" form="review-form"
className="w-fit !p-0 rounded-sm hover:shadow focus:outline-current" className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
tabIndex={0} tabIndex={0}
data-testid="command-bar-submit" data-testid="command-bar-submit"
iconStart={{ iconEnd={{
icon: 'checkmark', icon: 'checkmark',
bgClassName: `p-1 rounded-sm hover:brightness-110 ${bgClassName}`, bgClassName: `p-1 rounded-sm ${bgClassName}`,
iconClassName: `${iconClassName}`, iconClassName: `${iconClassName}`,
}} }}
> >
<span className="sr-only">Submit command</span> <span className={`pl-2 ${iconClassName}`}>Confirm</span>
</ActionButton> </ActionButton>
) )
} }
@ -332,16 +332,16 @@ function GatheringArgsButton({ bgClassName, iconClassName }: ButtonProps) {
Element="button" Element="button"
type="submit" type="submit"
form="arg-form" form="arg-form"
className="w-fit !p-0 rounded-sm hover:shadow focus:outline-current" className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
tabIndex={0} tabIndex={0}
data-testid="command-bar-continue" data-testid="command-bar-continue"
iconStart={{ iconEnd={{
icon: 'arrowRight', icon: 'arrowRight',
bgClassName: `p-1 rounded-sm hover:brightness-110 ${bgClassName}`, bgClassName: `p-1 rounded-sm ${bgClassName}`,
iconClassName: `${iconClassName}`, iconClassName: `${iconClassName}`,
}} }}
> >
<span className="sr-only">Continue</span> <span className={`pl-2 ${iconClassName}`}>Next</span>
</ActionButton> </ActionButton>
) )
} }

13
src/components/CommandBar/CommandBarReview.tsx
View File

@ -60,15 +60,10 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
return ( return (
<CommandBarHeader> <CommandBarHeader>
<p className="px-4 pb-2"> <p className="px-4 pb-2">
{selectedCommand?.reviewMessage ? ( {selectedCommand?.reviewMessage &&
selectedCommand.reviewMessage instanceof Function ? ( (selectedCommand.reviewMessage instanceof Function
selectedCommand.reviewMessage(commandBarState.context) ? selectedCommand.reviewMessage(commandBarState.context)
) : ( : selectedCommand.reviewMessage)}
selectedCommand.reviewMessage
)
) : (
<>Confirm {selectedCommand?.displayName || selectedCommand?.name}</>
)}
</p> </p>
<form <form
id="review-form" id="review-form"