Skip to content

Focus visible style refinements #1577

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
merged 42 commits into from
Jan 21, 2025
Merged

Focus visible style refinements #1577

Show file tree
Hide file tree
Changes from 41 commits
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
7f3994b
reduces the thickness of the focus-visible
samejr Dec 18, 2024
7020df3
More subtle Input style
samejr Dec 18, 2024
dc2e063
Updates focus-visible styles for the SimpleSelect
samejr Dec 18, 2024
b87bb11
Tables tab through rows and action cells only
samejr Dec 18, 2024
5dc8d7f
Refined focus visible style
samejr Dec 18, 2024
a1c37d6
Adds the custom focus visible to the TextLink
samejr Dec 18, 2024
687ead4
Moves the onClick handling to the table row rather than the cell
samejr Dec 18, 2024
149ee94
Merge branch 'main' into focus-visible-style-refinments
samejr Dec 19, 2024
758a96d
Makes table row heights consistent
samejr Dec 19, 2024
8fd2948
Adds gap between task search bar and button
samejr Dec 19, 2024
1daafa3
Prevents long tag values from wrapping
samejr Dec 19, 2024
9f577c7
Removes unnecessary rows from table header
samejr Dec 23, 2024
6028ef3
Added gap between search and filters
samejr Dec 23, 2024
f97c60d
Fixes the schedules table pagination staying fixed to the bottom of t…
samejr Dec 23, 2024
3b0e6d4
Removed more unnecessary header table rows to prevent them being sele…
samejr Dec 23, 2024
4ab3f3c
Removed isSelected styles (not working)
samejr Dec 23, 2024
f9caa9f
Added <tr> back to the main Table compontent
samejr Dec 31, 2024
b239474
Table row handles modifier keys
samejr Jan 3, 2025
8a814d4
Adds to={path} to the TableRow only
samejr Jan 3, 2025
f2bdc64
Revert "Adds to={path} to the TableRow only"
samejr Jan 4, 2025
47a560b
Revert "Table row handles modifier keys"
samejr Jan 4, 2025
8ad7443
Table reverted to use linked cells rather than rows
samejr Jan 4, 2025
796e0d3
Set the tab index of a cell and style the table row when tabbed
samejr Jan 4, 2025
17302b8
Tabbed row style applied to the sticky cells
samejr Jan 4, 2025
9edd0e2
Adds isTabbableCell to each table
samejr Jan 4, 2025
5b11f5c
Improves the spcificity of the row highlighting
samejr Jan 4, 2025
2219abc
Reduces the height of the task rows to match the other tables
samejr Jan 4, 2025
ab32e4d
Adds tab styles to fill in row dividers top and bottom
samejr Jan 5, 2025
2d46781
Removed old row onClick and to props
samejr Jan 6, 2025
3998961
Removed duplicate table header row
samejr Jan 6, 2025
e7fd0c7
Creates table style variants so tables look good in the inspector panels
samejr Jan 6, 2025
176541b
Full width tables on the schedules inspector panel
samejr Jan 6, 2025
46b979e
Reduce padding on Alerts page table rows
samejr Jan 6, 2025
3c0639e
Updates the Deploy page inspector table to the new style
samejr Jan 6, 2025
2be75bf
Removes the duplicate Table Row from the table headers in v2
samejr Jan 6, 2025
13c9b98
Adds TableRow to the EventsTable
samejr Jan 21, 2025
7eab9a3
Adds TableRow to more tables
samejr Jan 21, 2025
1243990
Adds TableRow to more tables
samejr Jan 21, 2025
2087072
Adds TableRow to more tables
samejr Jan 21, 2025
df3bc01
Adds TableRow to more tables
samejr Jan 21, 2025
0b0c7df
Fix for showing correct cursor for linked table rows
samejr Jan 21, 2025
cd6c416
Removed variants from some of the table components
samejr Jan 21, 2025
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
10 changes: 5 additions & 5 deletions apps/webapp/app/components/primitives/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
import { Icon, RenderIcon } from "./Icon";

const containerBase =
"has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-text-link has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-2 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";
"has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-charcoal-650 has-[:focus-visible]:ring-offset-0 has-[:focus]:border-ring has-[:focus]:outline-none has-[:focus]:ring-1 has-[:focus]:ring-ring has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 ring-offset-background transition cursor-text";

const inputBase =
"h-full w-full text-text-bright bg-transparent file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed outline-none ring-0 border-none";
Expand All @@ -17,27 +17,27 @@ const variants = {
container:
"px-1 w-full h-10 rounded-[3px] border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
input: "px-2 text-sm",
iconSize: "h-4 w-4 ml-1",
iconSize: "size-4 ml-1",
shortcut: "mr-1 min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem] select-none",
},
medium: {
container:
"px-1 h-8 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
input: "px-1.5 rounded text-sm",
iconSize: "h-4 w-4 ml-0.5",
iconSize: "size-4 ml-0.5",
shortcut: "min-w-[22px] rounded-sm py-[3px] px-[5px] text-[0.6rem]",
},
small: {
container:
"px-1 h-6 w-full rounded border border-charcoal-800 bg-charcoal-750 hover:border-charcoal-600 hover:bg-charcoal-650",
input: "px-1 rounded text-xs",
iconSize: "h-3 w-3 ml-0.5",
iconSize: "size-3 ml-0.5",
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
},
tertiary: {
container: "px-1 h-6 w-full rounded hover:bg-charcoal-750",
input: "px-1 rounded text-xs",
iconSize: "h-3 w-3 ml-0.5",
iconSize: "size-3 ml-0.5",
shortcut: "min-w-[22px] rounded-[2px] py-px px-[3px] text-[0.5rem]",
},
};
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/primitives/SimpleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"ring-offset-background focus-visible:ring-ring group flex items-center justify-between gap-x-1 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:bg-tertiary focus-visible:text-text-bright focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
"ring-offset-background group flex items-center justify-between gap-x-1 rounded text-text-dimmed transition placeholder:text-text-dimmed hover:text-text-bright focus-visible:focus-custom disabled:cursor-not-allowed disabled:opacity-50",
width === "full" ? "w-full" : "w-min",
sizeClassName,
className
Expand Down
143 changes: 92 additions & 51 deletions apps/webapp/app/components/primitives/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,78 @@
import { ChevronRightIcon } from "@heroicons/react/24/solid";
import { Link } from "@remix-run/react";
import { ReactNode, forwardRef, useState } from "react";
import React, { ReactNode, forwardRef, useState, useContext, createContext } from "react";
import { cn } from "~/utils/cn";
import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
import { InfoIconTooltip } from "./Tooltip";

const variants = {
bright: {
header: "bg-background-bright",
cell: "group-hover/table-row:bg-charcoal-750 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
stickyCell: "bg-background-bright group-hover/table-row:bg-charcoal-750",
menuButton:
"bg-background-bright group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/70 group-has-[[tabindex='0']:focus]/table-row:bg-charcoal-750",
menuButtonDivider: "group-hover/table-row:border-charcoal-600/70",
rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
},
dimmed: {
header: "bg-background-dimmed",
cell: "group-hover/table-row:bg-charcoal-800 group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
stickyCell: "group-hover/table-row:bg-charcoal-800",
menuButton:
"bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
menuButtonDivider: "group-hover/table-row:border-grid-dimmed",
rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
},
} as const;

export type TableVariant = keyof typeof variants;

type TableProps = {
containerClassName?: string;
className?: string;
children: ReactNode;
fullWidth?: boolean;
};

export const Table = forwardRef<HTMLTableElement, TableProps>(
({ className, containerClassName, children, fullWidth }, ref) => {
// Add TableContext
const TableContext = createContext<{ variant: TableVariant }>({ variant: "dimmed" });

export const Table = forwardRef<HTMLTableElement, TableProps & { variant?: TableVariant }>(
({ className, containerClassName, children, fullWidth, variant = "dimmed" }, ref) => {
return (
<div
className={cn(
"overflow-x-auto whitespace-nowrap border-t border-grid-bright scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
containerClassName,
fullWidth && "w-full"
)}
>
<table ref={ref} className={cn("w-full", className)}>
{children}
</table>
</div>
<TableContext.Provider value={{ variant }}>
<div
className={cn(
"overflow-x-auto whitespace-nowrap border-t scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
containerClassName,
fullWidth && "w-full"
)}
>
<table ref={ref} className={cn("w-full", className)}>
{children}
</table>
</div>
</TableContext.Provider>
);
}
);

type TableHeaderProps = {
className?: string;
children: ReactNode;
variant?: TableVariant;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still need to be here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This variant means you can pass "bright" or "dimmed" to the table to have it display nicely on bright backgrounds (like in the side inspector panels).

};

export const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
export const TableHeader = forwardRef<HTMLTableSectionElement, Omit<TableHeaderProps, "variant">>(
({ className, children }, ref) => {
const { variant } = useContext(TableContext);
return (
<thead
ref={ref}
className={cn(
"sticky top-0 z-10 bg-background-dimmed after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
"sticky top-0 z-10 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-grid-bright",
variants[variant].header,
className
)}
>
Expand Down Expand Up @@ -71,17 +102,19 @@ type TableRowProps = {
children: ReactNode;
disabled?: boolean;
isSelected?: boolean;
variant?: TableVariant;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this still need to be here?

};

export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
export const TableRow = forwardRef<HTMLTableRowElement, Omit<TableRowProps, "variant">>(
({ className, disabled, isSelected, children }, ref) => {
const { variant } = useContext(TableContext);
return (
<tr
ref={ref}
className={cn(
"group/table-row relative w-full after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
"group/table-row relative w-full outline-none after:absolute after:bottom-0 after:left-3 after:right-0 after:h-px after:bg-grid-dimmed",
isSelected && variants[variant].rowSelected,
disabled && "opacity-50",
isSelected && isSelectedStyle,
className
)}
>
Expand All @@ -94,7 +127,7 @@ export const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
type TableCellBasicProps = {
className?: string;
alignment?: "left" | "center" | "right";
children: ReactNode;
children?: ReactNode;
colSpan?: number;
};

Expand Down Expand Up @@ -125,6 +158,7 @@ export const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellP
className
)}
colSpan={colSpan}
tabIndex={-1}
>
{hiddenLabel ? (
<span className="sr-only">{children}</span>
Expand All @@ -147,25 +181,14 @@ type TableCellProps = TableCellBasicProps & {
hasAction?: boolean;
isSticky?: boolean;
actionClassName?: string;
rowHoverStyle?: keyof typeof rowHoverStyles;
rowHoverStyle?: string;
isSelected?: boolean;
isTabbableCell?: boolean;
variant?: TableVariant;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this needed?

children?: ReactNode;
};

const rowHoverStyles = {
default:
"group-hover/table-row:bg-charcoal-800 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-750 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
dimmed:
"group-hover/table-row:bg-charcoal-850 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-800 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-800 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
bright:
"group-hover/table-row:bg-charcoal-750 group-hover/table-row:before:absolute group-hover/table-row:before:bg-charcoal-700 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:left-0 group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:after:absolute group-hover/table-row:after:bg-charcoal-700 group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3",
};

const stickyStyles =
"sticky right-0 bg-background-dimmed group-hover/table-row:bg-charcoal-750 w-[--sticky-width] [&:has(.group-hover\\/table-row\\:block)]:w-auto";

const isSelectedStyle = "bg-charcoal-750 group-hover:bg-charcoal-750";

export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
export const TableCell = forwardRef<HTMLTableCellElement, Omit<TableCellProps, "variant">>(
(
{
className,
Expand All @@ -177,8 +200,8 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
onClick,
hasAction = false,
isSticky = false,
rowHoverStyle = "default",
isSelected,
isTabbableCell = false,
},
ref
) => {
Expand All @@ -193,34 +216,47 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
}

const flexClasses = cn(
"flex w-full whitespace-nowrap px-3 py-3 text-xs text-text-dimmed",
"flex w-full whitespace-nowrap px-3 py-3 items-center text-xs text-text-dimmed",
alignment === "left"
? "justify-start text-left"
: alignment === "center"
? "justify-center text-center"
: "justify-end text-right"
);
const { variant } = useContext(TableContext);

return (
<td
ref={ref}
className={cn(
"text-xs text-charcoal-400",
to || onClick || hasAction ? "cursor-pointer" : "px-3 py-3 align-middle",
"text-xs text-charcoal-400 has-[[tabindex='0']:focus]:before:absolute has-[[tabindex='0']:focus]:before:-top-px has-[[tabindex='0']:focus]:before:left-0 has-[[tabindex='0']:focus]:before:h-px has-[[tabindex='0']:focus]:before:w-3 has-[[tabindex='0']:focus]:before:bg-grid-dimmed has-[[tabindex='0']:focus]:after:absolute has-[[tabindex='0']:focus]:after:bottom-0 has-[[tabindex='0']:focus]:after:left-0 has-[[tabindex='0']:focus]:after:right-0 has-[[tabindex='0']:focus]:after:h-px has-[[tabindex='0']:focus]:after:bg-grid-dimmed",
variants[variant].cell,
to || onClick || hasAction ? "cursor-pointer" : "cursor-default px-3 py-3 align-middle",
!to && !onClick && alignmentClassName,
isSticky && stickyStyles,
isSelected && isSelectedStyle,
!isSelected && rowHoverStyles[rowHoverStyle],
isSticky &&
"[&:has(.group-hover/table-row:block)]:w-auto sticky right-0 bg-background-dimmed",
isSticky && variants[variant].stickyCell,
isSelected && variants[variant].rowSelected,
!isSelected &&
"group-hover/table-row:before:absolute group-hover/table-row:before:left-0 group-hover/table-row:before:top-[-1px] group-hover/table-row:before:h-px group-hover/table-row:before:w-3 group-hover/table-row:before:bg-charcoal-750 group-hover/table-row:after:absolute group-hover/table-row:after:bottom-0 group-hover/table-row:after:left-0 group-hover/table-row:after:h-px group-hover/table-row:after:w-3 group-hover/table-row:after:bg-charcoal-750 group-focus-visible/table-row:bg-background-bright",
Comment on lines +229 to +238
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Focus indicators need higher contrast for accessibility.

The current focus indicator using bg-grid-dimmed (#212327) against the background has insufficient contrast. To meet WCAG 2.1 requirements, focus indicators must have at least a 3:1 contrast ratio. Consider using a higher contrast color like charcoal-400 (#878C99) or charcoal-300 (#B5B8C0) for better visibility.

🔗 Analysis chain

Verify focus indicator contrast.

The custom focus indicators use subtle colors. Please ensure they meet WCAG contrast requirements for accessibility.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any color contrast testing setup or documentation
rg -l "contrast|wcag|a11y" --type css --type md

Length of output: 49

Script:

#!/bin/bash
# Search for Tailwind config files and theme definitions
fd -e js -e ts -e json tailwind.config
fd -e js -e ts -e json theme.

Length of output: 200

Script:

#!/bin/bash
# Search for color definitions in the codebase
rg -g '!*.test.*' -g '!*.spec.*' "grid-dimmed|charcoal-750" --type ts --type js --type json

Length of output: 22394

Script:

#!/bin/bash
# Check Tailwind config for color definitions
cat apps/webapp/tailwind.config.js

Length of output: 7016

className
)}
colSpan={colSpan}
>
{to ? (
<Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
<Link
to={to}
className={cn("cursor-pointer focus:outline-none", flexClasses, actionClassName)}
tabIndex={isTabbableCell ? 0 : -1}
>
{children}
</Link>
) : onClick ? (
<button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
<button
onClick={onClick}
className={cn("cursor-pointer focus:outline-none", flexClasses, actionClassName)}
tabIndex={isTabbableCell ? 0 : -1}
>
{children}
</button>
) : (
Expand Down Expand Up @@ -258,7 +294,7 @@ export const TableCellChevron = forwardRef<

export const TableCellMenu = forwardRef<
HTMLTableCellElement,
{
Omit<TableCellProps, "variant"> & {
className?: string;
isSticky?: boolean;
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
Expand All @@ -267,6 +303,7 @@ export const TableCellMenu = forwardRef<
popoverContent?: ReactNode;
children?: ReactNode;
isSelected?: boolean;
variant?: TableVariant;
}
>(
(
Expand All @@ -283,6 +320,7 @@ export const TableCellMenu = forwardRef<
ref
) => {
const [isOpen, setIsOpen] = useState(false);
const { variant } = useContext(TableContext);

return (
<TableCell
Expand All @@ -297,15 +335,18 @@ export const TableCellMenu = forwardRef<
<div className="relative h-full p-1">
<div
className={cn(
"absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] bg-background-dimmed p-0.5 group-hover/table-row:bg-background-bright group-hover/table-row:ring-1 group-hover/table-row:ring-grid-bright",
isSelected && isSelectedStyle,
isSelected &&
"group-hover/table-row:bg-charcoal-750 group-hover/table-row:ring-charcoal-600/50"
"absolute right-0 top-1/2 mr-1 flex -translate-y-1/2 items-center justify-end gap-0.5 rounded-[0.25rem] p-0.5 group-hover/table-row:ring-1",
variants[variant].menuButton
)}
>
{/* Hidden buttons that show on hover */}
{hiddenButtons && (
<div className="hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r group-hover/table-row:border-grid-dimmed">
<div
className={cn(
"hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r",
variants[variant].menuButtonDivider
)}
>
{hiddenButtons}
</div>
)}
Expand Down
8 changes: 4 additions & 4 deletions apps/webapp/app/components/primitives/TextLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { cn } from "~/utils/cn";

const variations = {
primary:
"text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group",
"text-indigo-500 transition hover:text-indigo-400 inline-flex gap-0.5 items-center group focus-visible:focus-custom",
secondary:
"text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group",
"text-text-dimmed transition underline underline-offset-2 decoration-dimmed/50 hover:decoration-dimmed inline-flex gap-0.5 items-center group focus-visible:focus-custom",
} as const;

type TextLinkProps = {
Expand Down Expand Up @@ -34,14 +34,14 @@ export function TextLink({
<Link to={to} className={cn(classes, className)} {...props}>
{children}{" "}
{trailingIcon && (
<NamedIcon name={trailingIcon} className={cn("h-4 w-4", trailingIconClassName)} />
<NamedIcon name={trailingIcon} className={cn("size-4", trailingIconClassName)} />
)}
</Link>
) : href ? (
<a href={href} className={cn(classes, className)} {...props}>
{children}{" "}
{trailingIcon && (
<NamedIcon name={trailingIcon} className={cn("h-4 w-4", trailingIconClassName)} />
<NamedIcon name={trailingIcon} className={cn("size-4", trailingIconClassName)} />
)}
</a>
) : (
Expand Down
2 changes: 1 addition & 1 deletion apps/webapp/app/components/runs/v3/RunTag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function RunTag({ tag }: { tag: string }) {
<span className="flex items-center border-y border-r border-charcoal-700 bg-charcoal-800 pr-1.5 text-text-dimmed">
{tagResult.key}
</span>
<span className="flex items-center rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
<span className="flex items-center whitespace-nowrap rounded-r-sm border-y border-r border-charcoal-700 bg-charcoal-750 px-1.5 text-text-dimmed">
{tagResult.value}
</span>
</span>
Expand Down
4 changes: 2 additions & 2 deletions apps/webapp/app/components/runs/v3/ScheduleFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
}, []);

return (
<div className="flex w-full flex-row">
<div className="flex w-full">
<Input
name="search"
placeholder="Search schedule id, external id, deduplication id or CRON pattern"
Expand All @@ -103,7 +103,7 @@ export function ScheduleFilters({ possibleEnvironments, possibleTasks }: Schedul
defaultValue={search}
onChange={(e) => handleSearchChange(e.target.value)}
/>
<SelectGroup>
<SelectGroup className="ml-2">
<Select name="type" value={type ?? "ALL"} onValueChange={handleTypeChange}>
<SelectTrigger size="minimal" width="full">
<SelectValue placeholder={"Select type"} className="ml-2 whitespace-nowrap p-0" />
Expand Down
Loading
Loading