Merge pull request #76 from linked-planet/preflight-missing-styles

Preflight missing styles
linked-planet · Nov 19, 2024 · 85ec1d4 · 85ec1d4
2 parents 248556e + 40e2c37
commit 85ec1d4
Show file tree

Hide file tree

Showing 11 changed files with 536 additions and 439 deletions.
diff --git a/library/src/components/Button.tsx b/library/src/components/Button.tsx
@@ -184,6 +184,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "LPButton"
 export { Button }
 
+const loadingSpinnerClassNames: { [appearance in ButtonAppearance]: string } = {
+	primary: "border-t-text-inverse",
+	default: "border-t-border-bold",
+	subtle: "border-t-border-bold",
+	link: "border-t-border-bold",
+	"subtle-link": "border-t-border-bold",
+	warning: "border-t-text-inverse",
+	danger: "border-t-text-inverse",
+	success: "border-t-text-inverse",
+	information: "border-t-text-inverse",
+}
+
 export const LoadingButton = ({
 	loading = false,
 	iconAfter,
@@ -200,7 +212,13 @@ export const LoadingButton = ({
 			<div className={loading ? "opacity-0" : undefined}>{children}</div>
 			{loading && (
 				<div className="absolute inset-0 flex items-center justify-center">
-					<LoadingSpinner />
+					<LoadingSpinner
+						className={
+							loadingSpinnerClassNames[
+								props.appearance ?? "default"
+							]
+						}
+					/>
 				</div>
 			)}
 		</Button>
@@ -218,7 +236,6 @@ export const ButtonGroup = ({
 			{...props}
 			className={twMerge("inline-flex flex-wrap gap-2 p-2", className)} //gap-2 and p-2 are because of the button outlines on focus
 			style={style}
-
 		>
 			{children}
 		</div>

diff --git a/library/src/components/Popover.tsx b/library/src/components/Popover.tsx
@@ -128,7 +128,7 @@ function Root({
 		return (
 			<RPo.Close
 				className={twMerge(
-					"text-text-subtlest hover:text-text",
+					"text-text-subtlest hover:text-text bg-transparent border-none",
 					closerClassName,
 				)}
 				style={closerStyle}

diff --git a/library/src/components/Tag.tsx b/library/src/components/Tag.tsx
@@ -4,7 +4,6 @@ import { type CSSProperties, useCallback, useMemo, useState } from "react"
 import { twJoin, twMerge } from "tailwind-merge"
 import type { Appearance } from "../utils/appearanceTypes"
 import { IconSizeHelper } from "./IconSizeHelper"
-import { Tooltip } from "./Tooltip"
 
 export const TagColorOptions = [
 	"blue",
@@ -160,7 +159,7 @@ function SimpleTag({
 		: TagAppearanceColors[appearance]
 
 	return (
-		<div
+		<output
 			className={twMerge(
 				twJoin(
 					colors,
@@ -171,14 +170,13 @@ function SimpleTag({
 				),
 				className,
 			)}
-			role="status"
 			style={style}
 			title={title}
 			id={id}
 			data-testid={testId}
 		>
 			<div className={truncate ? "truncate" : undefined}>{children}</div>
-		</div>
+		</output>
 	)
 }
 
@@ -234,7 +232,7 @@ export function Tag({
 							onClick()
 						}
 					}}
-					className={`m-0 ml-0.5 flex size-4 flex-none items-center justify-center ${
+					className={`m-0 ml-0.5 flex size-4 flex-none items-center justify-center border-transparent text-[inherit] bg-transparent hover:cursor-pointer ${
 						!removable ? "hidden" : ""
 					}`}
 					aria-label={removeButtonLabel}

diff --git a/library/src/components/inputs/Select.tsx b/library/src/components/inputs/Select.tsx
@@ -53,8 +53,7 @@ import { SlidingErrorMessage } from "./ErrorHelpWrapper"
 import { IconSizeHelper } from "../IconSizeHelper"
 import { inputBaseStyles } from "../styleHelper"
 
-const menuStyles =
-	"bg-surface min-w-min z-10 shadow-overlay rounded overflow-hidden"
+const menuStyles = "bg-surface min-w-min shadow-overlay rounded overflow-hidden" // some styles like zIndex are overwritten by react-select, use the custom-styles below for those
 
 const optionStyles =
 	"py-2 px-3 border-l-2 border-l-transparent border-transparent border-solid"
@@ -212,6 +211,10 @@ const customStyles = {
 		minHeight: "2.25rem", // this is min-h-9 as set in the inputBaseStyle
 		flexWrap: "nowrap" as const,
 	}),
+	menuPortal: (provided: CSSObjectWithLabel) => ({
+		...provided,
+		zIndex: 51,
+	}),
 }
 
 //#endregion styles

diff --git a/library/src/components/sidenavigation/SideNavigation.tsx b/library/src/components/sidenavigation/SideNavigation.tsx
@@ -10,7 +10,7 @@ import { flushSync } from "react-dom"
 
 const itemBaseStyles = twJoin(
 	"px-1.5 data-[selected=true]:bg-neutral-subtle-hovered group flex w-full cursor-pointer select-none items-center overflow-hidden rounded",
-	"hover:bg-neutral-subtle-hovered active:bg-neutral-subtle-pressed",
+	"hover:bg-neutral-subtle-hovered active:bg-neutral-subtle-pressed border-transparent bg-transparent",
 	"disabled:bg-neutral-subtle disabled:cursor-not-allowed data-[selected=true]:disabled:bg-neutral-subtle",
 	"data-[selected=true]:bg-selected-subtle data-[selected=true]:hover:bg-selected-subtle-hovered data-[selected=true]:active:bg-selected-subtle-pressed",
 )

diff --git a/library/src/tailwind.css b/library/src/tailwind.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/** Custom styles for running with preflight off */
+@layer base {
+	button {
+		@apply cursor-pointer disabled:cursor-not-allowed bg-transparent border-none box-border;
+	}
+}