Merge pull request #31 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/DropdownMenu.tsx

@@ -5,26 +5,20 @@ import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right"
 import ChevronUpIcon from "@atlaskit/icon/glyph/chevron-up"
 import RadioIcon from "@atlaskit/icon/glyph/radio"
 import * as RDd from "@radix-ui/react-dropdown-menu"
-import {
-	type RefObject,
-	forwardRef,
-	useMemo,
-	useRef,
-	type ForwardedRef,
-} from "react"
+import { forwardRef, useMemo, useRef, type ForwardedRef } from "react"
 import { twJoin, twMerge } from "tailwind-merge"
 import { getPortal } from "../utils"
 import { Button, type ButtonProps } from "./Button"
 import { overlayBaseStyle } from "./styleHelper"
 import { IconSizeHelper } from "./IconSizeHelper"
 
 const commonStyles =
-	"pl-1 pr-4 py-2.5 flex border-solid items-center outline-none border-2 border-transparent box-border focus-visible:outline-0 w-full cursor-default focus-visible:outline-none focus-visible:border-solid focus-visible:border-selected-border" as const
+	"pl-1 pr-4 py-2.5 flex border-solid items-center outline-none border-l-2 border-y-0 border-r-0 focus-visible:border-l-2 border-transparent box-border focus-visible:outline-0 w-full cursor-default focus-visible:outline-none focus-visible:border-selected-border" as const
 const disabledStyles = "text-disabled-text cursor-not-allowed" as const
 const selectedStyles =
-	"bg-selected-subtle hover:bg-selected-subtle-hovered active:bg-selected-subtle-pressed text-selected-subtle-text" as const
+	"data-[selected=true]:bg-selected-subtle data-[selected=true]:hover:bg-selected-subtle-hovered data-[selected=true]:border-l-selected-bold data-[selected=true]:active:bg-selected-subtle-pressed data-[selected=true]:text-selected-subtle-text" as const
 const normalStyles =
-	"hover:bg-surface-overlay-hovered hover:border-l-selected-bold active:bg-surface-overlay-pressed cursor-pointer" as const
+	"hover:bg-surface-overlay-hovered focus-visible:bg-surface-overlay-hovered hover:border-l-selected-border active:bg-surface-overlay-pressed cursor-pointer" as const
 
 const descriptionStyle = "text-text-subtlest text-[12px] leading-4 h-4" as const
 
@@ -74,13 +68,12 @@ function Item({
 			className={twMerge(
 				commonStyles,
 				!disabled && !selected ? normalStyles : undefined,
-				selected
-					? `${selectedStyles} border-l-selected-bold`
-					: undefined,
+				selected ? selectedStyles : undefined,
 				disabled ? disabledStyles : undefined,
 				className,
 			)}
 			onClick={onClick}
+			data-selected={selected}
 			style={style}
 			{...props}
 		>

library/src/components/inputs/Select.tsx

@@ -183,11 +183,11 @@ function useClassNamesConfig<ValueType, IsMulti extends boolean = boolean>(
 							? "bg-selected-subtle border-l-selected-border"
 							: undefined,
 						provided.isFocused
-							? "border-l-selected-border bg-surface-overlay-hovered"
+							? "border-l-selected-border focus-visible:border-l-selected-border bg-surface-overlay-hovered"
 							: undefined,
 						provided.isDisabled
 							? "text-disabled-text"
-							: "hover:border-l-selected-border hover:bg-surface-overlay-hovered active:bg-surface-overlay-pressed",
+							: "hover:border-l-selected-border focus-visible:border-l-selected-border hover:bg-surface-overlay-hovered active:bg-surface-overlay-pressed",
 						classNamesConfig?.option?.(provided),
 					),
 				groupHeading: (provided) =>