opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(site): remove CSSProperties assertions (#26234)

Browse Source
This commit is contained in:
Danielle Maywood
2026-06-11 11:21:34 +01:00
committed by GitHub
parent e440771b3e
commit f865281177
11 changed files with 39 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/@types/react.d.ts
Vendored
+3 -5
View File
@@ -1,7 +1,5 @@
declare module "react" {
interface CSSProperties {
[key: `--${string}`]: string | number | undefined;
namespace React {
export interface CSSProperties {
[customProp: `--${string}`]: string | number | undefined;
}
}
export {};
site/src/components/Chart/Chart.tsx
+5 -14
View File
@@ -2,14 +2,7 @@
* Copied from shadc/ui on 01/13/2025
* @see {@link https://ui.shadcn.com/docs/components/chart}
*/
import {
type CSSProperties,
createContext,
type Ref,
useContext,
useId,
useMemo,
} from "react";
import { createContext, type Ref, useContext, useId, useMemo } from "react";
import * as RechartsPrimitive from "recharts";
import { cn } from "#/utils/cn";
@@ -246,12 +239,10 @@ export const ChartTooltipContent: React.FC<ChartTooltipContentProps> = ({
"my-0.5": nestLabel && indicator === "dashed",
},
)}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
} as CSSProperties
}
style={{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
}}
/>
)
)}
site/src/modules/workspaces/WorkspaceTiming/Chart/Chart.tsx
+7 -9
View File
@@ -13,15 +13,13 @@ export const Chart = (props: HTMLProps<HTMLDivElement>) => {
<div
{...props}
className={cn("flex h-full flex-col", props.className)}
style={
{
"--header-height": "40px",
"--section-padding": "16px",
"--x-axis-rows-gap": "20px",
"--y-axis-width": "200px",
...props.style,
} as React.CSSProperties
}
style={{
"--header-height": "40px",
"--section-padding": "16px",
"--x-axis-rows-gap": "20px",
"--y-axis-width": "200px",
...props.style,
}}
/>
);
};
site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx
+1 -1
View File
@@ -285,7 +285,7 @@ export const InvalidTimeRange: Story = {
export const MultipleAgents: Story = {
decorators: [
(Story) => (
<div style={{ "--collapse-body-height": "600px" } as React.CSSProperties}>
<div style={{ "--collapse-body-height": "600px" }}>
<Story />
</div>
),
site/src/pages/AgentsPage/components/AgentsSkeletons.tsx
+7 -11
View File
@@ -1,4 +1,4 @@
import { type CSSProperties, type FC, useState } from "react";
import { type FC, useState } from "react";
import { Skeleton } from "#/components/Skeleton/Skeleton";
import { cn } from "#/utils/cn";
import { chatWidthClass, useChatFullWidth } from "../hooks/useChatFullWidth";
@@ -35,11 +35,9 @@ export const AgentsPageSkeleton: FC = () => {
return (
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-surface-primary sm:flex-row">
<div
style={
{
"--agents-left-sidebar-width": `${leftSidebarWidth}px`,
} as CSSProperties
}
style={{
"--agents-left-sidebar-width": `${leftSidebarWidth}px`,
}}
className="order-2 sm:order-none flex-1 min-h-0 border-t border-border-default sm:flex-none sm:border-t-0 sm:h-full sm:w-[var(--agents-left-sidebar-width)] sm:min-w-[240px] sm:max-w-[min(520px,50vw)] sm:min-h-0 sm:border-b-0"
>
<div className="relative flex size-full min-h-0 border-0 border-r border-solid overflow-hidden">
@@ -195,11 +193,9 @@ export const AgentChatPageSkeleton: FC = () => {
</div>
{rightPanel.open && (
<div
style={
{
"--panel-width": `${rightPanel.width}px`,
} as React.CSSProperties
}
style={{
"--panel-width": `${rightPanel.width}px`,
}}
className="relative flex h-full w-[100vw] min-w-0 flex-col border-0 border-l border-solid border-border-default sm:w-[var(--panel-width)] sm:min-w-[360px] sm:max-w-[70vw]"
>
<RightPanelSkeleton />
site/src/pages/AgentsPage/components/ChatElements/Response.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import {
File as FileViewer,
type SupportedLanguages,
} from "@pierre/diffs/react";
import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
import type { ComponentPropsWithRef, ReactNode } from "react";
import {
type Components,
defaultRehypePlugins,
@@ -98,7 +98,7 @@ const markdownFileViewerStyle = {
"--diffs-header-font-family": '"Geist Variable", system-ui, sans-serif',
"--diffs-font-size": "12px",
"--diffs-line-height": "20px",
} as CSSProperties;
};
const createComponents = (
fileViewerThemeType: FileViewerThemeType,
site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx
+6 -8
View File
@@ -1,6 +1,6 @@
import type { MotionProps } from "motion/react";
import { MotionConfig, motion } from "motion/react";
import type { CSSProperties, ElementType, JSX } from "react";
import type { ElementType, JSX } from "react";
import { cn } from "#/utils/cn";
@@ -53,13 +53,11 @@ const ShimmerComponent = ({
className,
)}
initial={{ backgroundPosition: "100% center" }}
style={
{
"--spread": `${dynamicSpread}px`,
backgroundImage:
"var(--bg), linear-gradient(hsl(var(--content-secondary)), hsl(var(--content-secondary)))",
} as CSSProperties
}
style={{
"--spread": `${dynamicSpread}px`,
backgroundImage:
"var(--bg), linear-gradient(hsl(var(--content-secondary)), hsl(var(--content-secondary)))",
}}
transition={{
duration,
ease: "linear",
site/src/pages/AgentsPage/components/ChatElements/tools/utils.ts
+1 -2
View File
@@ -1,7 +1,6 @@
import type { FileDiffMetadata } from "@pierre/diffs";
import { parsePatchFiles } from "@pierre/diffs";
import * as Diff from "diff";
import type { CSSProperties } from "react";
import * as Yup from "yup";
import { asRecord, asString, isValid } from "../runtimeTypeUtils";
@@ -424,7 +423,7 @@ export const DIFFS_FONT_STYLE = {
"--diffs-bg-selection-number-override": "hsl(var(--content-link) / 0.13)",
"--diffs-selection-number-fg": "hsl(var(--content-link))",
"--diffs-gap-style": "1px solid hsl(var(--border-default))",
} as CSSProperties;
};
/**
* Checks whether a tool result should be rendered as a syntax-highlighted
site/src/pages/AgentsPage/components/ChatModelAdminPanel/ProviderForm.tsx
+1 -3
View File
@@ -1,6 +1,5 @@
import { InfoIcon } from "lucide-react";
import {
type CSSProperties,
type FC,
type FormEvent,
type ReactNode,
@@ -271,8 +270,7 @@ export const ProviderForm: FC<ProviderFormProps> = ({
data-lpignore="true"
data-form-type="other"
data-bwignore
style={{ WebkitTextSecurity: "disc" } as CSSProperties}
className="h-9 font-mono text-[13px]"
className="h-9 font-mono text-[13px] [-webkit-text-security:disc]"
placeholder={apiKeyPlaceholder}
required={requiresAPIKey}
value={apiKey}
site/src/pages/AgentsPage/components/ChatsSidebar/ResizableChatsSidebarFrame.tsx
+5 -8
View File
@@ -1,5 +1,4 @@
import {
type CSSProperties,
type KeyboardEvent as ReactKeyboardEvent,
type ReactNode,
type PointerEvent as ReactPointerEvent,
@@ -106,13 +105,11 @@ export const ResizableChatsSidebarFrame = ({
return (
<div
data-testid="agents-sidebar-panel"
style={
{
"--agents-left-sidebar-width": `${width}px`,
"--agents-left-sidebar-min-width": `${LEFT_SIDEBAR_MIN_WIDTH}px`,
"--agents-left-sidebar-max-width": `${maxWidth}px`,
} as CSSProperties
}
style={{
"--agents-left-sidebar-width": `${width}px`,
"--agents-left-sidebar-min-width": `${LEFT_SIDEBAR_MIN_WIDTH}px`,
"--agents-left-sidebar-max-width": `${maxWidth}px`,
}}
className={cn(
className,
"relative sm:w-[var(--agents-left-sidebar-width)] sm:min-w-[var(--agents-left-sidebar-min-width)] sm:max-w-[var(--agents-left-sidebar-max-width)]",
site/src/pages/AgentsPage/components/RightPanel/RightPanel.tsx
+1 -1
View File
@@ -325,7 +325,7 @@ export const RightPanel = ({
data-testid="agents-right-panel"
style={
visualOpen && !visualExpanded
? ({ "--panel-width": `${width}px` } as React.CSSProperties)
? { "--panel-width": `${width}px` }
: undefined
}
className={cn(