Skip to content

Commit e77805f

Browse files
samejrsamejr
committed
Adding a consistent focus-visible states
1 parent 596ceb8 commit e77805f

File tree

12 files changed

+51
-33
lines changed

12 files changed

+51
-33
lines changed

‎apps/webapp/app/components/navigation/SideMenuItem.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function SideMenuItem({
4242
to={to}
4343
target={target}
4444
className={cn(
45-
"text-text-bright group-hover:bg-charcoal-750",
45+
"text-text-bright group-hover:bg-charcoal-750 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
4646
subItem ? "text-text-dimmed" : "",
4747
isActive ? "bg-tertiary text-text-bright" : "group-hover:text-text-bright"
4848
)}

‎apps/webapp/app/components/primitives/AppliedFilter.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ export function AppliedFilter({
4545
</div>
4646
{removable && (
4747
<button
48-
className={cn("group flex size-6 items-center justify-center", variantClassName.clear)}
48+
className={cn(
49+
"group flex size-6 items-center justify-center focus-custom",
50+
variantClassName.clear
51+
)}
4952
onClick={onRemove}
5053
>
5154
<XMarkIcon className="size-3.5" />

‎apps/webapp/app/components/primitives/Buttons.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,7 @@ const variant = {
114114
"danger/extra-large": createVariant("extra-large", "danger"),
115115
"menu-item": {
116116
textColor: "text-text-bright px-1",
117-
button:
118-
"h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-750 transition",
117+
button: "h-9 px-[0.475rem] text-sm rounded-sm bg-transparent group-hover:bg-charcoal-750",
119118
icon: "h-5",
120119
iconSpacing: "gap-x-0.5",
121120
shortcutVariant: undefined,
@@ -124,7 +123,7 @@ const variant = {
124123
"small-menu-item": {
125124
textColor: "text-text-bright",
126125
button:
127-
"h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750 transition",
126+
"h-[1.8rem] px-[0.4rem] text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750",
128127
icon: "h-4",
129128
iconSpacing: "gap-x-1.5",
130129
shortcutVariant: undefined,
@@ -133,7 +132,7 @@ const variant = {
133132
"small-menu-sub-item": {
134133
textColor: "text-text-dimmed",
135134
button:
136-
"h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750 transition",
135+
"h-[1.8rem] px-[0.5rem] ml-5 text-2sm rounded-sm text-text-dimmed bg-transparent group-hover:bg-charcoal-750 focus-custom",
137136
icon: undefined,
138137
iconSpacing: undefined,
139138
shortcutVariant: undefined,
@@ -142,7 +141,7 @@ const variant = {
142141
};
143142

144143
const allVariants = {
145-
$all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none",
144+
$all: "font-normal text-center font-sans justify-center items-center shrink-0 transition duration-150 rounded-[3px] select-none group-focus:outline-none group-disabled:opacity-75 group-disabled:pointer-events-none focus-custom",
146145
variant: variant,
147146
};
148147

@@ -268,7 +267,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonPropsType>(
268267

269268
return (
270269
<button
271-
className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
270+
className={cn("group outline-none focus-custom", props.fullWidth ? "w-full" : "")}
272271
type={type}
273272
disabled={disabled}
274273
onClick={onClick}
@@ -328,7 +327,7 @@ export const LinkButton = ({
328327
<ExtLink
329328
href={to.toString()}
330329
ref={innerRef}
331-
className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
330+
className={cn("group focus-custom", props.fullWidth ? "w-full" : "")}
332331
onClick={onClick}
333332
onMouseDown={onMouseDown}
334333
onMouseEnter={onMouseEnter}
@@ -343,7 +342,7 @@ export const LinkButton = ({
343342
<Link
344343
to={to}
345344
ref={innerRef}
346-
className={cn("group outline-none", props.fullWidth ? "w-full" : "")}
345+
className={cn("group focus-custom", props.fullWidth ? "w-full" : "")}
347346
onClick={onClick}
348347
onMouseDown={onMouseDown}
349348
onMouseEnter={onMouseEnter}

‎apps/webapp/app/components/primitives/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const DialogContent = React.forwardRef<
5050
>
5151
<hr className="absolute left-0 top-11 w-full" />
5252
{children}
53-
<DialogPrimitive.Close className="ring-offset-background data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus-visible:ring-ring absolute right-3 top-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
53+
<DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-3 top-2 rounded-sm py-1 pr-1 opacity-70 transition-opacity focus-custom hover:opacity-100 disabled:pointer-events-none">
5454
<div className="flex gap-x-2">
5555
<ShortcutKey
5656
shortcut={{

‎apps/webapp/app/components/primitives/Input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { cn } from "~/utils/cn";
44
import { Icon, RenderIcon } from "./Icon";
55

66
const containerBase =
7-
"has-[:focus-visible]:outline-none has-[:focus-visible]:ring-1 has-[:focus-visible]:ring-ring 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";
7+
"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";
88

99
const inputBase =
1010
"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";

‎apps/webapp/app/components/primitives/Popover.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ function PopoverCustomTrigger({
9393
<PopoverTrigger
9494
{...props}
9595
className={cn(
96-
"group flex items-center justify-end gap-1 rounded text-text-dimmed transition hover:bg-charcoal-850 hover:text-text-bright",
96+
"group flex items-center justify-end gap-1 rounded text-text-dimmed transition focus-custom hover:bg-charcoal-850 hover:text-text-bright",
9797
className
9898
)}
9999
>
@@ -128,7 +128,7 @@ function PopoverSideMenuTrigger({
128128
{...props}
129129
ref={ref}
130130
className={cn(
131-
"flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 group-focus:outline-none hover:bg-charcoal-750",
131+
"flex h-[1.8rem] shrink-0 select-none items-center gap-x-1.5 rounded-sm bg-transparent px-[0.4rem] text-center font-sans text-2sm font-normal text-text-bright transition duration-150 focus-custom hover:bg-charcoal-750",
132132
shortcut ? "justify-between" : "",
133133
className
134134
)}
@@ -157,7 +157,7 @@ function PopoverArrowTrigger({
157157
<PopoverTrigger
158158
{...props}
159159
className={cn(
160-
"group flex h-6 items-center gap-1 rounded px-2 text-text-dimmed transition hover:bg-charcoal-700 hover:text-text-bright",
160+
"group flex h-6 items-center gap-1 rounded px-2 text-text-dimmed transition focus-custom hover:bg-charcoal-700 hover:text-text-bright",
161161
fullWidth && "w-full justify-between",
162162
className
163163
)}
@@ -190,7 +190,7 @@ function PopoverVerticalEllipseTrigger({
190190
<PopoverTrigger
191191
{...props}
192192
className={cn(
193-
"group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright",
193+
"group flex items-center justify-end gap-1 rounded px-1.5 py-1.5 text-text-dimmed transition focus-custom hover:bg-charcoal-750 hover:text-text-bright",
194194
className
195195
)}
196196
>

‎apps/webapp/app/components/primitives/Select.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ const sizes = {
1515
button: "h-6 rounded text-xs px-2 ",
1616
},
1717
medium: {
18-
button: "h-8 rounded text-xs px-3 text-sm",
18+
button: "h-8 rounded px-3 text-sm",
1919
},
2020
};
2121

2222
const style = {
2323
tertiary: {
2424
button:
25-
"bg-tertiary focus-within:ring-charcoal-500 border border-tertiary hover:text-text-bright hover:border-charcoal-600",
25+
"bg-tertiary focus-custom border border-tertiary hover:text-text-bright hover:border-charcoal-600",
2626
},
2727
minimal: {
2828
button:
29-
"bg-transparent focus-within:ring-charcoal-500 hover:bg-tertiary disabled:bg-transparent disabled:pointer-events-none",
29+
"bg-transparent focus-custom hover:bg-tertiary disabled:bg-transparent disabled:pointer-events-none",
3030
},
3131
};
3232

@@ -322,7 +322,7 @@ export function SelectTrigger({
322322
render={
323323
<Ariakit.Select
324324
className={cn(
325-
"group flex items-center gap-1 outline-offset-0 focus-within:outline-none focus-within:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
325+
"group flex items-center gap-1 focus-custom disabled:cursor-not-allowed disabled:opacity-50",
326326
variantClasses.button,
327327
className
328328
)}
@@ -426,7 +426,7 @@ export function SelectList(props: SelectListProps) {
426426
<Component
427427
{...props}
428428
className={cn(
429-
"overflow-y-auto overscroll-contain outline-none scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600",
429+
"overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600 focus-custom",
430430
props.className
431431
)}
432432
/>
@@ -440,7 +440,7 @@ export interface SelectItemProps extends Ariakit.SelectItemProps {
440440
}
441441

442442
const selectItemClasses =
443-
"group cursor-pointer px-1 pt-1 text-sm text-text-dimmed outline-none last:pb-1";
443+
"group cursor-pointer px-1 pt-1 text-sm text-text-dimmed focus-custom last:pb-1";
444444

445445
export function SelectItem({
446446
icon,

‎apps/webapp/app/components/primitives/Table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,11 +202,11 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
202202
colSpan={colSpan}
203203
>
204204
{to ? (
205-
<Link to={to} className={cn(flexClasses, actionClassName)}>
205+
<Link to={to} className={cn("focus-custom", flexClasses, actionClassName)}>
206206
{children}
207207
</Link>
208208
) : onClick ? (
209-
<button onClick={onClick} className={cn(flexClasses, actionClassName)}>
209+
<button onClick={onClick} className={cn("focus-custom", flexClasses, actionClassName)}>
210210
{children}
211211
</button>
212212
) : (

‎apps/webapp/app/components/primitives/TextArea.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
88
{...props}
99
rows={rows ?? 6}
1010
className={cn(
11-
"ring-offset-background placeholder:text-muted-foreground focus:border-ring focus:ring-ring focus-visible:ring-ring w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:outline-none focus:ring-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
11+
"placeholder:text-muted-foreground w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
1212
className
1313
)}
1414
/>

‎apps/webapp/app/components/primitives/Tooltip.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const TooltipContent = React.forwardRef<
4141
ref={ref}
4242
sideOffset={sideOffset}
4343
className={cn(
44-
"z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
44+
"z-50 overflow-hidden animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 focus-visible:outline-none",
4545
variantClasses[variant],
4646
className
4747
)}
@@ -72,7 +72,9 @@ function SimpleTooltip({
7272
return (
7373
<TooltipProvider disableHoverableContent={disableHoverableContent}>
7474
<Tooltip>
75-
<TooltipTrigger className={cn("h-fit", buttonClassName)}>{button}</TooltipTrigger>
75+
<TooltipTrigger tabIndex={-1} className={cn("h-fit", buttonClassName)}>
76+
{button}
77+
</TooltipTrigger>
7678
<TooltipContent
7779
side={side}
7880
hidden={hidden}

‎apps/webapp/app/components/runs/v3/RunFilters.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ function AppliedStatusFilter() {
368368
{(search, setSearch) => (
369369
<StatusDropdown
370370
trigger={
371-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
371+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
372372
<AppliedFilter
373373
label="Status"
374374
value={appliedSummary(statuses.map((v) => runStatusTitle(v as TaskRunStatus)))}
@@ -456,7 +456,7 @@ function AppliedEnvironmentFilter({
456456
{(search, setSearch) => (
457457
<EnvironmentsDropdown
458458
trigger={
459-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
459+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
460460
<AppliedFilter
461461
label="Environment"
462462
value={appliedSummary(
@@ -547,7 +547,7 @@ function AppliedTaskFilter({ possibleTasks }: Pick<RunFiltersProps, "possibleTas
547547
{(search, setSearch) => (
548548
<TasksDropdown
549549
trigger={
550-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
550+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
551551
<AppliedFilter
552552
label="Task"
553553
value={appliedSummary(
@@ -645,7 +645,7 @@ function AppliedBulkActionsFilter({ bulkActions }: Pick<RunFiltersProps, "bulkAc
645645
{(search, setSearch) => (
646646
<BulkActionsDropdown
647647
trigger={
648-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
648+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
649649
<AppliedFilter
650650
label="Bulk action"
651651
value={bulkId}
@@ -764,7 +764,7 @@ function AppliedTagsFilter() {
764764
{(search, setSearch) => (
765765
<TagsDropdown
766766
trigger={
767-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
767+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
768768
<AppliedFilter
769769
label="Tags"
770770
value={appliedSummary(values("tags"))}
@@ -902,7 +902,7 @@ function AppliedPeriodFilter() {
902902
{(search, setSearch) => (
903903
<CreatedDropdown
904904
trigger={
905-
<Ariakit.Select render={<div className="group cursor-pointer" />}>
905+
<Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
906906
<AppliedFilter
907907
label="Created"
908908
value={

‎apps/webapp/tailwind.config.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,12 @@ module.exports = {
211211
staging: stagingEnv,
212212
prod: prodEnv,
213213
},
214+
focusStyles: {
215+
outline: "2px solid",
216+
outlineOffset: "0px",
217+
outlineColor: textLink,
218+
borderRadius: "2px",
219+
},
214220
borderRadius: {
215221
lg: radius,
216222
md: `calc(${radius} - 2px)`,
@@ -281,5 +287,13 @@ module.exports = {
281287
require("tailwind-scrollbar"),
282288
require("tailwind-scrollbar-hide"),
283289
require("tailwindcss-textshadow"),
290+
function ({ addUtilities, theme }) {
291+
const focusStyles = theme("focusStyles", {});
292+
addUtilities({
293+
".focus-custom": {
294+
"&:focus-visible": focusStyles,
295+
},
296+
});
297+
},
284298
],
285299
};

0 commit comments

Comments
 (0)