From 84d0508272c1b10db8419ba75b4206cc2eef3fd3 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 13 Dec 2024 17:37:19 +0000 Subject: [PATCH 01/24] Added shortcuts (with tooltip) to the pagination --- apps/webapp/app/components/ListPagination.tsx | 6 +++ .../app/components/primitives/Buttons.tsx | 53 +++++++++++++------ 2 files changed, 43 insertions(+), 16 deletions(-) diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx index 7ac60cd283..aaecc465ce 100644 --- a/apps/webapp/app/components/ListPagination.tsx +++ b/apps/webapp/app/components/ListPagination.tsx @@ -34,6 +34,9 @@ function NextButton({ cursor }: { cursor?: string }) { "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed" )} onClick={(e) => !path && e.preventDefault()} + shortcut={{ key: "k" }} + showTooltip + tooltipDescription="Next" > Next @@ -55,6 +58,9 @@ function PreviousButton({ cursor }: { cursor?: string }) { "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed" )} onClick={(e) => !path && e.preventDefault()} + shortcut={{ key: "j" }} + showTooltip + tooltipDescription="Previous" > Prev diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 7cd4a83f2d..36c2984520 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -4,6 +4,7 @@ import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys"; import { cn } from "~/utils/cn"; import { IconNamesOrString, NamedIcon } from "./NamedIcon"; import { ShortcutKey } from "./ShortcutKey"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./Tooltip"; const sizes = { small: { @@ -173,8 +174,10 @@ export type ButtonContentPropsType = { textAlignLeft?: boolean; className?: string; shortcut?: ShortcutDefinition; + showTooltip?: boolean; variant: keyof typeof variant; shortcutPosition?: "before-trailing-icon" | "after-trailing-icon"; + tooltipDescription?: string; }; export function ButtonContent(props: ButtonContentPropsType) { @@ -188,17 +191,27 @@ export function ButtonContent(props: ButtonContentPropsType) { fullWidth, textAlignLeft, className, + showTooltip, + tooltipDescription, } = props; const variation = allVariants.variant[props.variant]; - // Based on the size prop, we'll use the corresponding variant classnames const btnClassName = cn(allVariants.$all, variation.button); const iconClassName = variation.icon; const iconSpacingClassName = variation.iconSpacing; const shortcutClassName = variation.shortcut; const textColorClassName = variation.textColor; - return ( + const renderShortcutKey = () => + shortcut && ( + + ); + + const buttonContent = (
{text} ))} - {shortcut && props.shortcutPosition === "before-trailing-icon" && ( - - )} + {shortcut && + !showTooltip && + props.shortcutPosition === "before-trailing-icon" && + renderShortcutKey()} {TrailingIcon && (typeof TrailingIcon === "string" ? ( @@ -269,16 +279,27 @@ export function ButtonContent(props: ButtonContentPropsType) { ))} {shortcut && - (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && ( - - )} + !showTooltip && + (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && + renderShortcutKey()}
); + + if (shortcut && showTooltip) { + return ( + + + {buttonContent} + + {tooltipDescription} {renderShortcutKey()} + + + + ); + } + + return buttonContent; } type ButtonPropsType = Pick< From 75ec9764683e72858dfb444bc479a174d674d11b Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Fri, 13 Dec 2024 19:45:10 +0000 Subject: [PATCH 02/24] WIP fixing the disabled hover state --- apps/webapp/app/components/ListPagination.tsx | 6 ++---- apps/webapp/app/components/primitives/Buttons.tsx | 3 +-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx index aaecc465ce..8ae6b03b89 100644 --- a/apps/webapp/app/components/ListPagination.tsx +++ b/apps/webapp/app/components/ListPagination.tsx @@ -30,8 +30,7 @@ function NextButton({ cursor }: { cursor?: string }) { trailingIconClassName="text-text-dimmed" className={cn( "flex items-center", - !path && - "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed" + !path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent" )} onClick={(e) => !path && e.preventDefault()} shortcut={{ key: "k" }} @@ -54,8 +53,7 @@ function PreviousButton({ cursor }: { cursor?: string }) { leadingIconClassName="text-text-dimmed" className={cn( "flex items-center", - !path && - "cursor-not-allowed opacity-50 group-hover:bg-transparent group-hover:text-text-dimmed" + !path && "cursor-not-allowed opacity-50 group-hover/button:bg-transparent" )} onClick={(e) => !path && e.preventDefault()} shortcut={{ key: "j" }} diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 36c2984520..ec25bd3bf2 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -66,8 +66,7 @@ const theme = { icon: "text-text-bright", }, minimal: { - textColor: - "text-text-dimmed group-hover/button:text-text-bright transition group-disabled/button:text-text-dimmed/80", + textColor: "text-text-dimmed group-disabled/button:text-text-dimmed transition", button: "bg-transparent group-hover/button:bg-tertiary disabled:opacity-50 group-disabled/button:bg-transparent group-disabled/button:pointer-events-none", shortcut: From f341887a61bfca877945451c8fcfc76d33e4cce0 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 16 Dec 2024 11:43:02 +0000 Subject: [PATCH 03/24] Styled the tooltip --- apps/webapp/app/components/primitives/Buttons.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index ec25bd3bf2..33eb017851 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -290,7 +290,7 @@ export function ButtonContent(props: ButtonContentPropsType) { {buttonContent} - + {tooltipDescription} {renderShortcutKey()} From c5c1d1d9d9c1fbc5f609e7e6f449ce175aba4fdd Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 16 Dec 2024 16:23:06 +0000 Subject: [PATCH 04/24] Added a shortcuts panel to the help menu --- apps/webapp/app/components/Shortcuts.tsx | 100 ++++++++++++++ .../navigation/HelpAndFeedbackPopover.tsx | 3 +- .../app/components/primitives/SheetV3.tsx | 129 ++++++++++++++++++ .../app/components/primitives/ShortcutKey.tsx | 11 +- .../app/routes/storybook.shortcuts/route.tsx | 1 + 5 files changed, 239 insertions(+), 5 deletions(-) create mode 100644 apps/webapp/app/components/Shortcuts.tsx create mode 100644 apps/webapp/app/components/primitives/SheetV3.tsx diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx new file mode 100644 index 0000000000..4de4f530bb --- /dev/null +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -0,0 +1,100 @@ +import { Keyboard } from "lucide-react"; +import { Paragraph } from "./primitives/Paragraph"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "./primitives/SheetV3"; +import { Header3 } from "./primitives/Headers"; +import { ShortcutKey } from "./primitives/ShortcutKey"; + +export function Shortcuts() { + return ( + + + + Shortcuts + + + + + + Keyboard shortcuts + + +
+ General + + + + + + + + + + + + + + + + + + + +
+
+ Runs page + + + + + + + + + +
+
+ Run page + + + + + + + + + + + + + + + +
+
+ Alerts page + + + +
+ + + + + ); +} + +function Shortcut({ children, name }: { children: React.ReactNode; name: string }) { + return ( +
+ {name} + {children} +
+ ); +} diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx index a68f1988c7..cb2f6a263c 100644 --- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx +++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx @@ -19,7 +19,7 @@ import { Paragraph } from "../primitives/Paragraph"; import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover"; import { StepNumber } from "../primitives/StepNumber"; import { MenuCount, SideMenuItem } from "./SideMenuItem"; - +import { Shortcuts } from "../Shortcuts"; export function HelpAndFeedback() { const [isHelpMenuOpen, setHelpMenuOpen] = useState(false); const currentPlan = useCurrentPlan(); @@ -84,6 +84,7 @@ export function HelpAndFeedback() { data-action="changelog" target="_blank" /> +
Need help? diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx new file mode 100644 index 0000000000..751c063716 --- /dev/null +++ b/apps/webapp/app/components/primitives/SheetV3.tsx @@ -0,0 +1,129 @@ +"use client"; + +import * as React from "react"; +import * as SheetPrimitive from "@radix-ui/react-dialog"; +import { cva, type VariantProps } from "class-variance-authority"; +import { X } from "lucide-react"; +import { cn } from "~/utils/cn"; +import { ShortcutKey } from "./ShortcutKey"; +import { NamedIcon } from "./NamedIcon"; +import { Header2 } from "./Headers"; + +const Sheet = SheetPrimitive.Root; + +const SheetTrigger = SheetPrimitive.Trigger; + +const SheetClose = SheetPrimitive.Close; + +const SheetPortal = SheetPrimitive.Portal; + +const SheetOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; + +const sheetVariants = cva( + "fixed z-50 gap-4 overflow-y-auto bg-background-dimmed shadow-lg transition ease-in-out border-grid-dimmed data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300", + { + variants: { + side: { + top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", + bottom: + "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", + left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", + right: + "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", + }, + }, + defaultVariants: { + side: "right", + }, + } +); + +interface SheetContentProps + extends React.ComponentPropsWithoutRef, + VariantProps {} + +const SheetContent = React.forwardRef< + React.ElementRef, + SheetContentProps +>(({ side = "right", className, children, ...props }, ref) => ( + + + + {children} + + +)); +SheetContent.displayName = SheetPrimitive.Content.displayName; + +const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => ( +
+); +SheetHeader.displayName = "SheetHeader"; + +const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => ( +
+); +SheetFooter.displayName = "SheetFooter"; + +const SheetTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + Close + + +)); +SheetTitle.displayName = SheetPrimitive.Title.displayName; + +const SheetDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SheetDescription.displayName = SheetPrimitive.Description.displayName; + +export { + Sheet, + SheetPortal, + SheetOverlay, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}; diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index df422eaf2c..f9dd7c5397 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -9,11 +9,14 @@ import { ChevronUpIcon, } from "@heroicons/react/20/solid"; +const medium = + "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; + export const variants = { small: "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", - medium: - "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", + medium, + "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"), }; export type ShortcutKeyVariant = keyof typeof variants; @@ -41,10 +44,10 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) ); } -function keyString(key: String, isMac: boolean, size: "small" | "medium") { +function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "medium/bright") { key = key.toLowerCase(); - const className = size === "small" ? "w-2.5 h-4" : "w-3 h-5"; + const className = variant === "small" ? "w-2.5 h-4" : "w-3 h-5"; switch (key) { case "enter": diff --git a/apps/webapp/app/routes/storybook.shortcuts/route.tsx b/apps/webapp/app/routes/storybook.shortcuts/route.tsx index 54b7ddad59..9fd028557c 100644 --- a/apps/webapp/app/routes/storybook.shortcuts/route.tsx +++ b/apps/webapp/app/routes/storybook.shortcuts/route.tsx @@ -31,6 +31,7 @@ function Collection({ platform }: { platform: "mac" | "windows" }) {
+ From 3d1090101a61c7a433f6503a149fea09d429f610 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 16 Dec 2024 16:37:05 +0000 Subject: [PATCH 05/24] Adds new shortcut to list --- apps/webapp/app/components/Shortcuts.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index 4de4f530bb..8cd33b6a15 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -37,6 +37,13 @@ export function Shortcuts() { + + + + to + + + From afe13a8f9b1913bd35f391cabdca02dd03d39859 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 16 Dec 2024 16:37:30 +0000 Subject: [PATCH 06/24] =?UTF-8?q?Changes=20=E2=80=9Cmeta=E2=80=9D=20for=20?= =?UTF-8?q?=E2=80=9Cmod=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/webapp/app/components/ErrorDisplay.tsx | 2 +- .../webapp/app/components/runs/v3/BatchFilters.tsx | 2 +- .../app/components/runs/v3/CancelRunDialog.tsx | 2 +- .../runs/v3/CheckBatchCompletionDialog.tsx | 2 +- .../app/components/runs/v3/ReplayRunDialog.tsx | 2 +- .../runs/v3/RetryDeploymentIndexingDialog.tsx | 2 +- .../runs/v3/RollbackDeploymentDialog.tsx | 2 +- apps/webapp/app/components/runs/v3/RunFilters.tsx | 6 +++--- .../app/components/runs/v3/SharedFilters.tsx | 2 +- .../route.tsx | 4 ++-- .../route.tsx | 2 +- apps/webapp/app/routes/storybook.buttons/route.tsx | 14 +++++++------- .../app/routes/storybook.shortcuts/route.tsx | 6 +++--- 13 files changed, 24 insertions(+), 24 deletions(-) diff --git a/apps/webapp/app/components/ErrorDisplay.tsx b/apps/webapp/app/components/ErrorDisplay.tsx index fb2be3cfeb..fcb720df88 100644 --- a/apps/webapp/app/components/ErrorDisplay.tsx +++ b/apps/webapp/app/components/ErrorDisplay.tsx @@ -49,7 +49,7 @@ export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) { {message && {message}} diff --git a/apps/webapp/app/components/runs/v3/BatchFilters.tsx b/apps/webapp/app/components/runs/v3/BatchFilters.tsx index 02474fa46f..f7ab261d4e 100644 --- a/apps/webapp/app/components/runs/v3/BatchFilters.tsx +++ b/apps/webapp/app/components/runs/v3/BatchFilters.tsx @@ -400,7 +400,7 @@ function BatchIdDropdown({ disabled={error !== undefined || !batchId} variant="secondary/small" shortcut={{ - modifiers: ["meta"], + modifiers: ["mod"], key: "Enter", enabledOnInputElements: true, }} diff --git a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx index d4264886b7..2d0439402f 100644 --- a/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/CancelRunDialog.tsx @@ -40,7 +40,7 @@ export function CancelRunDialog({ runFriendlyId, redirectPath }: CancelRunDialog variant="danger/medium" LeadingIcon={isLoading ? "spinner-white" : NoSymbolIcon} disabled={isLoading} - shortcut={{ modifiers: ["meta"], key: "enter" }} + shortcut={{ modifiers: ["mod"], key: "enter" }} > {isLoading ? "Canceling..." : "Cancel run"} diff --git a/apps/webapp/app/components/runs/v3/CheckBatchCompletionDialog.tsx b/apps/webapp/app/components/runs/v3/CheckBatchCompletionDialog.tsx index 70a51a3cf6..10df63a4de 100644 --- a/apps/webapp/app/components/runs/v3/CheckBatchCompletionDialog.tsx +++ b/apps/webapp/app/components/runs/v3/CheckBatchCompletionDialog.tsx @@ -39,7 +39,7 @@ export function CheckBatchCompletionDialog({ variant="primary/medium" LeadingIcon={isLoading ? "spinner-white" : undefined} disabled={isLoading} - shortcut={{ modifiers: ["meta"], key: "enter" }} + shortcut={{ modifiers: ["mod"], key: "enter" }} > {isLoading ? "Attempting resume..." : "Attempt resume"} diff --git a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx index 589b686a5c..e29b8a9e4b 100644 --- a/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx +++ b/apps/webapp/app/components/runs/v3/ReplayRunDialog.tsx @@ -159,7 +159,7 @@ function ReplayForm({ variant="primary/medium" LeadingIcon={isSubmitting ? ButtonSpinner : undefined} disabled={isSubmitting} - shortcut={{ modifiers: ["meta"], key: "enter", enabledOnInputElements: true }} + shortcut={{ modifiers: ["mod"], key: "enter", enabledOnInputElements: true }} > {isSubmitting ? "Replaying..." : "Replay run"} diff --git a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx index d689a874e8..6c1ca5fe92 100644 --- a/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx +++ b/apps/webapp/app/components/runs/v3/RetryDeploymentIndexingDialog.tsx @@ -48,7 +48,7 @@ export function RetryDeploymentIndexingDialog({ variant="primary/medium" LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon} disabled={isLoading} - shortcut={{ modifiers: ["meta"], key: "enter" }} + shortcut={{ modifiers: ["mod"], key: "enter" }} > {isLoading ? "Retrying..." : "Retry indexing"} diff --git a/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx b/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx index aeb2f61cc0..ccba03b030 100644 --- a/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx +++ b/apps/webapp/app/components/runs/v3/RollbackDeploymentDialog.tsx @@ -48,7 +48,7 @@ export function RollbackDeploymentDialog({ variant="primary/medium" LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon} disabled={isLoading} - shortcut={{ modifiers: ["meta"], key: "enter" }} + shortcut={{ modifiers: ["mod"], key: "enter" }} > {isLoading ? "Rolling back..." : "Roll back deployment"} diff --git a/apps/webapp/app/components/runs/v3/RunFilters.tsx b/apps/webapp/app/components/runs/v3/RunFilters.tsx index 242ef0a491..6cc75a6129 100644 --- a/apps/webapp/app/components/runs/v3/RunFilters.tsx +++ b/apps/webapp/app/components/runs/v3/RunFilters.tsx @@ -804,7 +804,7 @@ function RunIdDropdown({ disabled={error !== undefined || !runId} variant="secondary/small" shortcut={{ - modifiers: ["meta"], + modifiers: ["mod"], key: "Enter", enabledOnInputElements: true, }} @@ -922,7 +922,7 @@ function BatchIdDropdown({ disabled={error !== undefined || !batchId} variant="secondary/small" shortcut={{ - modifiers: ["meta"], + modifiers: ["mod"], key: "Enter", enabledOnInputElements: true, }} @@ -1040,7 +1040,7 @@ function ScheduleIdDropdown({ disabled={error !== undefined || !scheduleId} variant="secondary/small" shortcut={{ - modifiers: ["meta"], + modifiers: ["mod"], key: "Enter", enabledOnInputElements: true, }} diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx index 3f07f133ed..03474b5960 100644 --- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx +++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx @@ -390,7 +390,7 @@ export function CustomDateRangeDropdown({ @@ -403,7 +403,7 @@ function ReplayRuns({ onOpen }: { onOpen: (open: boolean) => void }) { variant="primary/medium" LeadingIcon={isLoading ? "spinner-white" : ArrowPathIcon} disabled={isLoading} - shortcut={{ modifiers: ["meta"], key: "enter" }} + shortcut={{ modifiers: ["mod"], key: "enter" }} > {isLoading ? "Replaying..." : `Replay ${selectedItems.size} runs`} diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx index 56c82e9148..d85c3d53f4 100644 --- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx +++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.schedules.new/route.tsx @@ -393,7 +393,7 @@ export function UpsertScheduleForm({ variant="primary/medium" type="submit" disabled={isLoading} - shortcut={{ key: "enter", modifiers: ["meta"] }} + shortcut={{ key: "enter", modifiers: ["mod"] }} LeadingIcon={isLoading ? "spinner" : undefined} > {buttonText(mode, isLoading)} diff --git a/apps/webapp/app/routes/storybook.buttons/route.tsx b/apps/webapp/app/routes/storybook.buttons/route.tsx index 3baff3b1c3..f6e6ce0b7e 100644 --- a/apps/webapp/app/routes/storybook.buttons/route.tsx +++ b/apps/webapp/app/routes/storybook.buttons/route.tsx @@ -70,7 +70,7 @@ export default function Story() {
Shortcut - -
@@ -193,19 +193,19 @@ export default function Story() {
Shortcut - - - - -
diff --git a/apps/webapp/app/routes/storybook.shortcuts/route.tsx b/apps/webapp/app/routes/storybook.shortcuts/route.tsx index 9fd028557c..d53f965ea0 100644 --- a/apps/webapp/app/routes/storybook.shortcuts/route.tsx +++ b/apps/webapp/app/routes/storybook.shortcuts/route.tsx @@ -7,10 +7,10 @@ import { ShortcutDefinition } from "~/hooks/useShortcutKeys"; const shortcuts: ShortcutDefinition[] = [ { key: "esc" }, { key: "f" }, - { key: "f", modifiers: ["meta"] }, - { key: "k", modifiers: ["meta"] }, + { key: "f", modifiers: ["mod"] }, + { key: "k", modifiers: ["mod"] }, { key: "del", modifiers: ["ctrl", "alt"] }, - { key: "enter", modifiers: ["meta"] }, + { key: "enter", modifiers: ["mod"] }, { key: "enter", modifiers: ["mod"] }, ]; From 97e610a37922c5e9f573a5661227f60443f270d4 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Mon, 16 Dec 2024 18:07:42 +0000 Subject: [PATCH 07/24] Adds more shortcuts to the list --- apps/webapp/app/components/Shortcuts.tsx | 23 +++++++++++++++++-- .../app/components/primitives/SheetV3.tsx | 19 +++++++-------- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index 8cd33b6a15..5cd97fe32b 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -1,4 +1,5 @@ import { Keyboard } from "lucide-react"; +import { Header3 } from "./primitives/Headers"; import { Paragraph } from "./primitives/Paragraph"; import { Sheet, @@ -8,7 +9,6 @@ import { SheetTitle, SheetTrigger, } from "./primitives/SheetV3"; -import { Header3 } from "./primitives/Headers"; import { ShortcutKey } from "./primitives/ShortcutKey"; export function Shortcuts() { @@ -83,6 +83,25 @@ export function Shortcuts() { + + + + + + + + + + + + + + + + to + + +
Alerts page @@ -100,7 +119,7 @@ export function Shortcuts() { function Shortcut({ children, name }: { children: React.ReactNode; name: string }) { return (
- {name} + {name} {children}
); diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx index 751c063716..a54e721ad0 100644 --- a/apps/webapp/app/components/primitives/SheetV3.tsx +++ b/apps/webapp/app/components/primitives/SheetV3.tsx @@ -1,13 +1,10 @@ -"use client"; - -import * as React from "react"; import * as SheetPrimitive from "@radix-ui/react-dialog"; import { cva, type VariantProps } from "class-variance-authority"; -import { X } from "lucide-react"; +import * as React from "react"; import { cn } from "~/utils/cn"; -import { ShortcutKey } from "./ShortcutKey"; -import { NamedIcon } from "./NamedIcon"; import { Header2 } from "./Headers"; +import { NamedIcon } from "./NamedIcon"; +import { ShortcutKey } from "./ShortcutKey"; const Sheet = SheetPrimitive.Root; @@ -117,13 +114,13 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName; export { Sheet, - SheetPortal, - SheetOverlay, - SheetTrigger, SheetClose, SheetContent, - SheetHeader, + SheetDescription, SheetFooter, + SheetHeader, + SheetOverlay, + SheetPortal, SheetTitle, - SheetDescription, + SheetTrigger, }; From 747caa6b9d57ba227f852efd42766f8038ffabf5 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 11:42:32 +0000 Subject: [PATCH 08/24] Adding shortcut to open the shortcuts panel --- apps/webapp/app/components/Shortcuts.tsx | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index 5cd97fe32b..66f7cea6a9 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -10,13 +10,23 @@ import { SheetTrigger, } from "./primitives/SheetV3"; import { ShortcutKey } from "./primitives/ShortcutKey"; +import { Button } from "./primitives/Buttons"; export function Shortcuts() { return ( - - - Shortcuts + + @@ -103,6 +113,12 @@ export function Shortcuts() {
+
+ Schedules page + + + +
Alerts page From 13232e23eecec30aced32184dcd164e05191ff7a Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 11:42:51 +0000 Subject: [PATCH 09/24] tweak gap between shortcut letters --- .../app/components/primitives/ShortcutKey.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index f9dd7c5397..aa2750a449 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -1,20 +1,19 @@ -import { Fragment } from "react"; -import { Modifier, ShortcutDefinition } from "~/hooks/useShortcutKeys"; -import { cn } from "~/utils/cn"; -import { useOperatingSystem } from "./OperatingSystemProvider"; import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, } from "@heroicons/react/20/solid"; +import { Modifier, ShortcutDefinition } from "~/hooks/useShortcutKeys"; +import { cn } from "~/utils/cn"; +import { useOperatingSystem } from "./OperatingSystemProvider"; const medium = - "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; + "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; export const variants = { small: - "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 grid place-content-center border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", + "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", medium, "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"), }; @@ -37,9 +36,9 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) return ( {modifiers.map((k) => ( - {modifierString(k, isMac)} + {modifierString(k, isMac)} ))} - {character} + {character} ); } From 2ac815f1fd4adc2044580dc35b63cc5394ef34f6 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 11:51:40 +0000 Subject: [PATCH 10/24] button component now has icon spacing adjustment (for lucide icons) --- apps/webapp/app/components/Shortcuts.tsx | 2 ++ apps/webapp/app/components/primitives/Buttons.tsx | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index 66f7cea6a9..d3b37f97fd 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -24,6 +24,8 @@ export function Shortcuts() { fullWidth textAlignLeft shortcut={{ modifiers: ["shift"], key: "?" }} + className="gap-x-0 pl-0.5" + iconSpacing="gap-x-0.5" > Shortcuts diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 33eb017851..6a1abf1f90 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -177,6 +177,7 @@ export type ButtonContentPropsType = { variant: keyof typeof variant; shortcutPosition?: "before-trailing-icon" | "after-trailing-icon"; tooltipDescription?: string; + iconSpacing?: string; }; export function ButtonContent(props: ButtonContentPropsType) { @@ -192,6 +193,7 @@ export function ButtonContent(props: ButtonContentPropsType) { className, showTooltip, tooltipDescription, + iconSpacing, } = props; const variation = allVariants.variant[props.variant]; @@ -216,7 +218,8 @@ export function ButtonContent(props: ButtonContentPropsType) { className={cn( textAlignLeft ? "text-left" : "justify-center", "flex w-full items-center", - iconSpacingClassName + iconSpacingClassName, + iconSpacing )} > {LeadingIcon && From bef4432457d99b2f44d02432af7f12fdc4d1f840 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 13:34:48 +0000 Subject: [PATCH 11/24] Fixed some ilegal markup --- apps/webapp/app/components/Shortcuts.tsx | 12 ++++++++---- apps/webapp/app/components/primitives/SheetV3.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index d3b37f97fd..0fe38d3389 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -33,10 +33,14 @@ export function Shortcuts() { - - Keyboard shortcuts +
+ + + Keyboard shortcuts + +
- +
General @@ -127,7 +131,7 @@ export function Shortcuts() {
- +
diff --git a/apps/webapp/app/components/primitives/SheetV3.tsx b/apps/webapp/app/components/primitives/SheetV3.tsx index a54e721ad0..2bac7e9cb9 100644 --- a/apps/webapp/app/components/primitives/SheetV3.tsx +++ b/apps/webapp/app/components/primitives/SheetV3.tsx @@ -90,7 +90,7 @@ const SheetTitle = React.forwardRef< )} {...props} > - {children} + {children} From 113d2e4aa9888a20095c94d1599b6629a9ba6982 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 13:58:49 +0000 Subject: [PATCH 12/24] Pagination uses disabled prop rather than a disabled wrapper --- .../primitives/LinkWithDisabled.tsx | 19 ---------- .../app/components/primitives/Pagination.tsx | 35 ++++++++++--------- 2 files changed, 19 insertions(+), 35 deletions(-) delete mode 100644 apps/webapp/app/components/primitives/LinkWithDisabled.tsx diff --git a/apps/webapp/app/components/primitives/LinkWithDisabled.tsx b/apps/webapp/app/components/primitives/LinkWithDisabled.tsx deleted file mode 100644 index 85b87a9b14..0000000000 --- a/apps/webapp/app/components/primitives/LinkWithDisabled.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Link } from "@remix-run/react"; -import { cn } from "~/utils/cn"; - -type Props = Parameters[0] & { - disabled?: boolean; - disabledClassName?: string; -}; - -export function LinkDisabled({ disabled = false, disabledClassName, ...props }: Props) { - if (disabled) { - return ( - - {props.children} - - ); - } else { - return {props.children}; - } -} diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx index 633e815d03..3e5320bf5e 100644 --- a/apps/webapp/app/components/primitives/Pagination.tsx +++ b/apps/webapp/app/components/primitives/Pagination.tsx @@ -2,8 +2,7 @@ import { ChevronRightIcon } from "@heroicons/react/24/outline"; import { ChevronLeftIcon } from "@heroicons/react/24/solid"; import { Link, useLocation } from "@remix-run/react"; import { cn } from "~/utils/cn"; -import { ButtonContent } from "./Buttons"; -import { LinkDisabled } from "./LinkWithDisabled"; +import { LinkButton } from "./Buttons"; export function PaginationControls({ currentPage, @@ -21,16 +20,18 @@ export function PaginationControls({ return ( ); } From 72d1381b69d03186d5c6525c118c3c2696537b1d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 14:15:09 +0000 Subject: [PATCH 13/24] Improved the Switch styles --- apps/webapp/app/components/primitives/Switch.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/primitives/Switch.tsx b/apps/webapp/app/components/primitives/Switch.tsx index 2c3121676f..5cb860910b 100644 --- a/apps/webapp/app/components/primitives/Switch.tsx +++ b/apps/webapp/app/components/primitives/Switch.tsx @@ -8,15 +8,15 @@ const variations = { large: { container: "flex items-center gap-x-2 rounded-md hover:bg-tertiary p-2 transition focus-custom", root: "h-6 w-11", - thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", - text: "text-sm text-charcoal-400 group-hover:text-charcoal-200 transition", + thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0", + text: "text-sm text-text-dimmed", }, small: { container: "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer", root: "h-3 w-6", - thumb: "h-2.5 w-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0", - text: "text-xs", + thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0", + text: "text-xs text-text-dimmed", }, }; @@ -38,7 +38,7 @@ export const Switch = React.forwardRef From 0958943725cd39d8cd6ca20bff2cd683d2d60e85 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 17:36:10 +0000 Subject: [PATCH 14/24] Makes the shortcut modifier optional --- .../app/components/primitives/ShortcutKey.tsx | 41 +++++++++++++------ 1 file changed, 28 insertions(+), 13 deletions(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index aa2750a449..8400a2fe96 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -4,9 +4,13 @@ import { ChevronRightIcon, ChevronUpIcon, } from "@heroicons/react/20/solid"; -import { Modifier, ShortcutDefinition } from "~/hooks/useShortcutKeys"; +import { Modifier, Shortcut } from "~/hooks/useShortcutKeys"; import { cn } from "~/utils/cn"; import { useOperatingSystem } from "./OperatingSystemProvider"; +import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon"; +import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon"; +import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon"; +import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon"; const medium = "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; @@ -20,8 +24,17 @@ export const variants = { export type ShortcutKeyVariant = keyof typeof variants; +type ShortcutKey = Partial; + +type ShortcutKeyDefinition = + | { + windows: ShortcutKey; + mac: ShortcutKey; + } + | ShortcutKey; + type ShortcutKeyProps = { - shortcut: ShortcutDefinition; + shortcut: ShortcutKeyDefinition; variant: ShortcutKeyVariant; className?: string; }; @@ -31,14 +44,14 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) const isMac = platform === "mac"; let relevantShortcut = "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut; const modifiers = relevantShortcut.modifiers ?? []; - const character = keyString(relevantShortcut.key, isMac, variant); + const character = relevantShortcut.key ? keyString(relevantShortcut.key, isMac, variant) : null; return ( {modifiers.map((k) => ( {modifierString(k, isMac)} ))} - {character} + {character && {character}} ); } @@ -51,14 +64,16 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m switch (key) { case "enter": return isMac ? "↵" : key; + case "esc": + return Esc; case "arrowdown": - return ; + return ; case "arrowup": - return ; + return ; case "arrowleft": - return ; + return ; case "arrowright": - return ; + return ; default: return key; } @@ -67,14 +82,14 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m function modifierString(modifier: Modifier, isMac: boolean) { switch (modifier) { case "alt": - return isMac ? "⌥" : "Alt+"; + return isMac ? "⌥" : "Alt +"; case "ctrl": - return isMac ? "⌃" : "Ctrl+"; + return isMac ? "⌃" : "Ctrl +"; case "meta": - return isMac ? "⌘" : "⊞+"; + return isMac ? "⌘" : "⊞ +"; case "shift": - return isMac ? "⇧" : "Shift+"; + return isMac ? "⇧" : "Shift +"; case "mod": - return isMac ? "⌘" : "Ctrl+"; + return isMac ? "⌘" : "Ctrl +"; } } From 2a50b0933ba39f75789eb13f16d72b3c8a0777d0 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 18:36:45 +0000 Subject: [PATCH 15/24] Added new icon based shortcut keys for mac and win --- .../app/assets/icons/KeyboardDownIcon.tsx | 17 ++++++++++ .../app/assets/icons/KeyboardLeftIcon.tsx | 17 ++++++++++ .../app/assets/icons/KeyboardRightIcon.tsx | 17 ++++++++++ .../app/assets/icons/KeyboardUpIcon.tsx | 17 ++++++++++ .../app/assets/icons/KeyboardWindowsIcon.tsx | 17 ++++++++++ apps/webapp/app/components/Shortcuts.tsx | 14 ++++++--- .../app/components/primitives/ShortcutKey.tsx | 31 +++++++++---------- 7 files changed, 109 insertions(+), 21 deletions(-) create mode 100644 apps/webapp/app/assets/icons/KeyboardDownIcon.tsx create mode 100644 apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx create mode 100644 apps/webapp/app/assets/icons/KeyboardRightIcon.tsx create mode 100644 apps/webapp/app/assets/icons/KeyboardUpIcon.tsx create mode 100644 apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx diff --git a/apps/webapp/app/assets/icons/KeyboardDownIcon.tsx b/apps/webapp/app/assets/icons/KeyboardDownIcon.tsx new file mode 100644 index 0000000000..1ef015d900 --- /dev/null +++ b/apps/webapp/app/assets/icons/KeyboardDownIcon.tsx @@ -0,0 +1,17 @@ +export function KeyboardDownIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx b/apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx new file mode 100644 index 0000000000..6b6999e683 --- /dev/null +++ b/apps/webapp/app/assets/icons/KeyboardLeftIcon.tsx @@ -0,0 +1,17 @@ +export function KeyboardLeftIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/KeyboardRightIcon.tsx b/apps/webapp/app/assets/icons/KeyboardRightIcon.tsx new file mode 100644 index 0000000000..879e7e183c --- /dev/null +++ b/apps/webapp/app/assets/icons/KeyboardRightIcon.tsx @@ -0,0 +1,17 @@ +export function KeyboardRightIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/KeyboardUpIcon.tsx b/apps/webapp/app/assets/icons/KeyboardUpIcon.tsx new file mode 100644 index 0000000000..d87f26488d --- /dev/null +++ b/apps/webapp/app/assets/icons/KeyboardUpIcon.tsx @@ -0,0 +1,17 @@ +export function KeyboardUpIcon({ className }: { className?: string }) { + return ( + + + + ); +} diff --git a/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx b/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx new file mode 100644 index 0000000000..1bf032e108 --- /dev/null +++ b/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx @@ -0,0 +1,17 @@ +export function KeyboardWindowsIcon({ className }: { className?: string }) { + return ( + + + + + + + ); +} diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index 0fe38d3389..f4b69024a0 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -40,14 +40,20 @@ export function Shortcuts() {
-
+
General + + + - + @@ -55,7 +61,7 @@ export function Shortcuts() { - + to @@ -113,7 +119,7 @@ export function Shortcuts() { - + to diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index 8400a2fe96..f0cd0d537d 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -1,16 +1,11 @@ -import { - ChevronDownIcon, - ChevronLeftIcon, - ChevronRightIcon, - ChevronUpIcon, -} from "@heroicons/react/20/solid"; +import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon"; +import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon"; +import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon"; +import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon"; +import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon"; import { Modifier, Shortcut } from "~/hooks/useShortcutKeys"; import { cn } from "~/utils/cn"; import { useOperatingSystem } from "./OperatingSystemProvider"; -import { KeyboardRightIcon } from "~/assets/icons/KeyboardRightIcon"; -import { KeyboardLeftIcon } from "~/assets/icons/KeyboardLeftIcon"; -import { KeyboardDownIcon } from "~/assets/icons/KeyboardDownIcon"; -import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon"; const medium = "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; @@ -49,7 +44,9 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) return ( {modifiers.map((k) => ( - {modifierString(k, isMac)} + + {modifierString(k, isMac)} + ))} {character && {character}} @@ -79,17 +76,17 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m } } -function modifierString(modifier: Modifier, isMac: boolean) { +function modifierString(modifier: Modifier, isMac: boolean): string | JSX.Element { switch (modifier) { case "alt": - return isMac ? "⌥" : "Alt +"; + return isMac ? "⌥" : "Alt+"; case "ctrl": - return isMac ? "⌃" : "Ctrl +"; + return isMac ? "⌃" : "Ctrl+"; case "meta": - return isMac ? "⌘" : "⊞ +"; + return isMac ? "⌘" : ; case "shift": - return isMac ? "⇧" : "Shift +"; + return isMac ? "⇧" : "Shift+"; case "mod": - return isMac ? "⌘" : "Ctrl +"; + return isMac ? "⌘" : "Ctrl+"; } } From 225eae8eada9438702ce3ede882737d01b659ac2 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 17 Dec 2024 18:44:52 +0000 Subject: [PATCH 16/24] Updated PC modifier shortcuts --- .../webapp/app/components/primitives/ShortcutKey.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index f0cd0d537d..05af090476 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -60,9 +60,11 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m switch (key) { case "enter": - return isMac ? "↵" : key; + return isMac ? "↵" : Enter; case "esc": return Esc; + case "del": + return Del; case "arrowdown": return ; case "arrowup": @@ -79,14 +81,14 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m function modifierString(modifier: Modifier, isMac: boolean): string | JSX.Element { switch (modifier) { case "alt": - return isMac ? "⌥" : "Alt+"; + return isMac ? "⌥" : Alt; case "ctrl": - return isMac ? "⌃" : "Ctrl+"; + return isMac ? "⌃" : Ctrl; case "meta": return isMac ? "⌘" : ; case "shift": - return isMac ? "⇧" : "Shift+"; + return "⇧"; case "mod": - return isMac ? "⌘" : "Ctrl+"; + return isMac ? "⌘" : Ctrl; } } From 3e27fe9471c879b2e7059d33497941e03167517e Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 09:38:46 +0000 Subject: [PATCH 17/24] Adds a new windows key icon --- .../app/assets/icons/KeyboardWindowsIcon.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx b/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx index 1bf032e108..859a633a30 100644 --- a/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx +++ b/apps/webapp/app/assets/icons/KeyboardWindowsIcon.tsx @@ -2,16 +2,16 @@ export function KeyboardWindowsIcon({ className }: { className?: string }) { return ( - - - - + + + + ); } From b937ccef9ec4980d9aad224b50c557993c373b34 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 09:39:43 +0000 Subject: [PATCH 18/24] Allows variants and react nodes to be used as the modifier key --- .../webapp/app/components/primitives/ShortcutKey.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index 05af090476..856e2785b2 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -45,7 +45,7 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) {modifiers.map((k) => ( - {modifierString(k, isMac)} + {modifierString(k, isMac, variant)} ))} {character && {character}} @@ -78,14 +78,20 @@ function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "m } } -function modifierString(modifier: Modifier, isMac: boolean): string | JSX.Element { +function modifierString( + modifier: Modifier, + isMac: boolean, + variant: "small" | "medium" | "medium/bright" +): string | JSX.Element { + const className = variant === "small" ? "w-2.5 h-4" : "w-3.5 h-5"; + switch (modifier) { case "alt": return isMac ? "⌥" : Alt; case "ctrl": return isMac ? "⌃" : Ctrl; case "meta": - return isMac ? "⌘" : ; + return isMac ? "⌘" : ; case "shift": return "⇧"; case "mod": From e4446b2a761005eda012683456d824b8baf23c9d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 09:40:41 +0000 Subject: [PATCH 19/24] Adds more shortcuts to the storybook --- apps/webapp/app/routes/storybook.shortcuts/route.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/webapp/app/routes/storybook.shortcuts/route.tsx b/apps/webapp/app/routes/storybook.shortcuts/route.tsx index d53f965ea0..785247a4c9 100644 --- a/apps/webapp/app/routes/storybook.shortcuts/route.tsx +++ b/apps/webapp/app/routes/storybook.shortcuts/route.tsx @@ -10,8 +10,10 @@ const shortcuts: ShortcutDefinition[] = [ { key: "f", modifiers: ["mod"] }, { key: "k", modifiers: ["mod"] }, { key: "del", modifiers: ["ctrl", "alt"] }, + { key: "f", modifiers: ["shift"] }, { key: "enter", modifiers: ["mod"] }, { key: "enter", modifiers: ["mod"] }, + { key: "g", modifiers: ["meta"] }, ]; export default function Story() { From 4dcf21891a0406e4407010976c724d99dd284d2e Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 10:56:27 +0000 Subject: [PATCH 20/24] Adds missing focus-visible styles to the pagination --- apps/webapp/app/components/primitives/Pagination.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx index 3e5320bf5e..58c6d61ae4 100644 --- a/apps/webapp/app/components/primitives/Pagination.tsx +++ b/apps/webapp/app/components/primitives/Pagination.tsx @@ -64,7 +64,7 @@ function pageUrl(location: ReturnType, page: number): string } const baseClass = - "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm"; + "flex items-center justify-center border border-transparent min-w-6 h-6 px-1 text-xs font-medium transition text-text-dimmed rounded-sm focus-visible:focus-custom"; const unselectedClass = "hover:bg-tertiary hover:text-text-bright"; const selectedClass = "border-charcoal-600 bg-tertiary text-text-bright hover:bg-charcoal-600/50"; From ededd0d7bb965a2c13c3f875e0bb1990131db5d8 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 13:37:39 +0000 Subject: [PATCH 21/24] Removed test modifier keys --- apps/webapp/app/components/Shortcuts.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx index f4b69024a0..d44359bb4e 100644 --- a/apps/webapp/app/components/Shortcuts.tsx +++ b/apps/webapp/app/components/Shortcuts.tsx @@ -43,12 +43,6 @@ export function Shortcuts() {
General - - - From f8e97c647cbbb152271183f274c5b858708fdc4d Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Wed, 18 Dec 2024 13:37:54 +0000 Subject: [PATCH 22/24] number style is tabular --- apps/webapp/app/components/primitives/ShortcutKey.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index 856e2785b2..48fdd11d3e 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -8,11 +8,11 @@ import { cn } from "~/utils/cn"; import { useOperatingSystem } from "./OperatingSystemProvider"; const medium = - "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; + "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase"; export const variants = { small: - "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", + "text-[0.6rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase", medium, "medium/bright": cn(medium, "bg-charcoal-750 text-text-bright border-charcoal-650"), }; From fe319066e885060441f91eb9f50c20a8d7331831 Mon Sep 17 00:00:00 2001 From: Matt Aitken Date: Mon, 30 Dec 2024 18:11:48 +0000 Subject: [PATCH 23/24] Update apps/webapp/app/components/primitives/ShortcutKey.tsx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- apps/webapp/app/components/primitives/ShortcutKey.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/webapp/app/components/primitives/ShortcutKey.tsx b/apps/webapp/app/components/primitives/ShortcutKey.tsx index 48fdd11d3e..faa7745c11 100644 --- a/apps/webapp/app/components/primitives/ShortcutKey.tsx +++ b/apps/webapp/app/components/primitives/ShortcutKey.tsx @@ -53,7 +53,7 @@ export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) ); } -function keyString(key: String, isMac: boolean, variant: "small" | "medium" | "medium/bright") { +function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "medium/bright") { key = key.toLowerCase(); const className = variant === "small" ? "w-2.5 h-4" : "w-3 h-5"; From f189fc02c1ea716dcb2480153cbcd3723b8de428 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Tue, 31 Dec 2024 14:47:11 +0000 Subject: [PATCH 24/24] Tooltip now just 1 prop on the button component --- apps/webapp/app/components/ListPagination.tsx | 8 ++++---- .../webapp/app/components/primitives/Buttons.tsx | 16 +++++++--------- .../app/components/primitives/Pagination.tsx | 6 ++---- 3 files changed, 13 insertions(+), 17 deletions(-) diff --git a/apps/webapp/app/components/ListPagination.tsx b/apps/webapp/app/components/ListPagination.tsx index 8ae6b03b89..bdefc32399 100644 --- a/apps/webapp/app/components/ListPagination.tsx +++ b/apps/webapp/app/components/ListPagination.tsx @@ -34,8 +34,8 @@ function NextButton({ cursor }: { cursor?: string }) { )} onClick={(e) => !path && e.preventDefault()} shortcut={{ key: "k" }} - showTooltip - tooltipDescription="Next" + tooltip="Next" + disabled={!path} > Next @@ -57,8 +57,8 @@ function PreviousButton({ cursor }: { cursor?: string }) { )} onClick={(e) => !path && e.preventDefault()} shortcut={{ key: "j" }} - showTooltip - tooltipDescription="Previous" + tooltip="Previous" + disabled={!path} > Prev diff --git a/apps/webapp/app/components/primitives/Buttons.tsx b/apps/webapp/app/components/primitives/Buttons.tsx index 6a1abf1f90..138b6ed5a4 100644 --- a/apps/webapp/app/components/primitives/Buttons.tsx +++ b/apps/webapp/app/components/primitives/Buttons.tsx @@ -1,5 +1,5 @@ import { Link, LinkProps, NavLink, NavLinkProps } from "@remix-run/react"; -import React, { forwardRef, useImperativeHandle, useRef } from "react"; +import React, { forwardRef, ReactNode, useImperativeHandle, useRef } from "react"; import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys"; import { cn } from "~/utils/cn"; import { IconNamesOrString, NamedIcon } from "./NamedIcon"; @@ -173,10 +173,9 @@ export type ButtonContentPropsType = { textAlignLeft?: boolean; className?: string; shortcut?: ShortcutDefinition; - showTooltip?: boolean; variant: keyof typeof variant; shortcutPosition?: "before-trailing-icon" | "after-trailing-icon"; - tooltipDescription?: string; + tooltip?: ReactNode; iconSpacing?: string; }; @@ -191,8 +190,7 @@ export function ButtonContent(props: ButtonContentPropsType) { fullWidth, textAlignLeft, className, - showTooltip, - tooltipDescription, + tooltip, iconSpacing, } = props; const variation = allVariants.variant[props.variant]; @@ -254,7 +252,7 @@ export function ButtonContent(props: ButtonContentPropsType) { ))} {shortcut && - !showTooltip && + !tooltip && props.shortcutPosition === "before-trailing-icon" && renderShortcutKey()} @@ -281,20 +279,20 @@ export function ButtonContent(props: ButtonContentPropsType) { ))} {shortcut && - !showTooltip && + !tooltip && (!props.shortcutPosition || props.shortcutPosition === "after-trailing-icon") && renderShortcutKey()}
); - if (shortcut && showTooltip) { + if (tooltip) { return ( {buttonContent} - {tooltipDescription} {renderShortcutKey()} + {tooltip} {shortcut && renderShortcutKey()} diff --git a/apps/webapp/app/components/primitives/Pagination.tsx b/apps/webapp/app/components/primitives/Pagination.tsx index 58c6d61ae4..20a1a93be2 100644 --- a/apps/webapp/app/components/primitives/Pagination.tsx +++ b/apps/webapp/app/components/primitives/Pagination.tsx @@ -25,8 +25,7 @@ export function PaginationControls({ variant="minimal/small" LeadingIcon={ChevronLeftIcon} shortcut={{ key: "j" }} - showTooltip - tooltipDescription="Previous" + tooltip="Previous" disabled={currentPage === 1} className={currentPage > 1 ? "group" : ""} > @@ -44,8 +43,7 @@ export function PaginationControls({ variant="minimal/small" TrailingIcon={ChevronRightIcon} shortcut={{ key: "k" }} - showTooltip - tooltipDescription="Next" + tooltip="Next" disabled={currentPage === totalPages} className={currentPage !== totalPages ? "group" : ""} >