binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5614] refactor: update styling and structure across various components (#8388)

Browse source
This commit is contained in:
Jayash Tripathy 2025-12-18 20:19:51 +05:30 • committed by GitHub
parent cb56fbe3ca
commit 81dbd5ab19
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 102 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/propel/src/charts/area-chart/root.tsx
View file

@ -112,7 +112,7 @@ export const AreaChart = React.memo(function AreaChart<K extends string, T exten
left: margin?.left === undefined ? 20 : margin.left,
}}
>
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {

2
packages/propel/src/charts/bar-chart/root.tsx
View file

@ -127,7 +127,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
barSize={barSize}
className="recharts-wrapper"
>
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {

2
packages/propel/src/charts/line-chart/root.tsx
View file

@ -98,7 +98,7 @@ export const LineChart = React.memo(function LineChart<K extends string, T exten
left: margin?.left === undefined ? 20 : margin.left,
}}
>
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {

2
packages/propel/src/charts/scatter-chart/root.tsx
View file

@ -82,7 +82,7 @@ export const ScatterChart = React.memo(function ScatterChart<K extends string, T
left: margin?.left === undefined ? 20 : margin.left,
}}
>
<CartesianGrid stroke="--alpha(var(--border-color-subtle) / 80%)" vertical={false} />
<CartesianGrid stroke="var(--border-color-subtle)" vertical={false} />
<XAxis
dataKey={xAxis.key}
tick={(props) => {

2
packages/propel/src/charts/tree-map/root.tsx
View file

@ -16,7 +16,7 @@ export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChart
data={data}
nameKey="name"
dataKey="value"
stroke="currentColor"
stroke="transparent"
className="bg-layer-1 cursor-pointer"
content={<CustomTreeMapContent />}
animationEasing="ease-out"

1
packages/propel/src/icon-button/helper.tsx
View file

@ -38,6 +38,7 @@ type IconButtonPropsWithChildren = React.ButtonHTMLAttributes<HTMLButtonElement>
VariantProps<typeof iconButtonVariants> & {
icon: React.FC<{ className?: string }>;
loading?: boolean;
iconClassName?: string;
};
export type IconButtonProps = Omit<IconButtonPropsWithChildren, "children">;

14
packages/propel/src/icon-button/icon-button.tsx
View file

@ -15,6 +15,7 @@ const IconButton = React.forwardRef(function IconButton(
loading = false,
disabled = false,
icon: Icon,
iconClassName = "",
...rest
} = props;
@ -27,11 +28,14 @@ const IconButton = React.forwardRef(function IconButton(
{...rest}
>
<Icon
className={cn({
"size-3.5": size === "sm",
"size-4": size === "base" || size === "lg",
"size-5": size === "xl",
})}
className={cn(
{
"size-3.5": size === "sm",
"size-4": size === "base" || size === "lg",
"size-5": size === "xl",
},
iconClassName
)}
/>
</button>
);

60
packages/propel/src/tabs/tabs.tsx
View file

@ -2,20 +2,29 @@ import * as React from "react";
import { Tabs as TabsPrimitive } from "@base-ui-components/react/tabs";
import { cn } from "../utils/classname";
type BackgroundVariant = "layer-1" | "layer-2" | "layer-3" | "layer-transparent";
type TabsVariant = "contained";
type TabsContextType = {
variant?: TabsVariant;
};
const TabsContext = React.createContext<TabsContextType | undefined>(undefined);
type TabsCompound = React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.Root> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
React.ComponentProps<typeof TabsPrimitive.Root> & {
variant?: TabsVariant;
} & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Root>>
> & {
List: React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.List> & {
background?: BackgroundVariant;
background?: TabsVariant;
} & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.List>>
>;
Trigger: React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" } & React.RefAttributes<
React.ElementRef<typeof TabsPrimitive.Tab>
>
React.ComponentProps<typeof TabsPrimitive.Tab> & {
size?: "sm" | "md" | "lg";
variant?: TabsVariant;
} & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Tab>>
>;
Content: React.ForwardRefExoticComponent<
React.ComponentProps<typeof TabsPrimitive.Panel> & React.RefAttributes<React.ElementRef<typeof TabsPrimitive.Panel>>
@ -24,26 +33,28 @@ type TabsCompound = React.ForwardRefExoticComponent<
};
const TabsRoot = React.forwardRef(function TabsRoot(
{ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>,
{ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & { variant?: TabsVariant },
ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col w-full h-full", className)}
{...props}
ref={ref}
/>
<TabsContext.Provider value={{ variant }}>
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col w-full h-full", className)}
{...props}
ref={ref}
/>
</TabsContext.Provider>
);
});
const TabsList = React.forwardRef(function TabsList(
{
className,
background = "layer-2",
background = "contained",
...props
}: React.ComponentProps<typeof TabsPrimitive.List> & {
background?: BackgroundVariant;
background?: TabsVariant;
},
ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.List>>
) {
@ -51,12 +62,9 @@ const TabsList = React.forwardRef(function TabsList(
<TabsPrimitive.List
data-slot="tabs-list"
className={cn(
"flex w-full items-center justify-between gap-1.5 rounded-md text-13 p-0.5 relative overflow-auto",
"flex w-full items-center justify-between gap-1.5 rounded-lg text-13 p-0.5 relative overflow-auto",
{
"bg-layer-1": background === "layer-1",
"bg-layer-2": background === "layer-2",
"bg-layer-3": background === "layer-3",
"bg-layer-transparent": background === "layer-transparent",
"bg-layer-3": background === "contained",
},
className
)}
@ -67,16 +75,20 @@ const TabsList = React.forwardRef(function TabsList(
});
const TabsTrigger = React.forwardRef(function TabsTrigger(
{ className, size = "md", ...props }: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" },
{
className,
size = "md",
...props
}: React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg"; variant?: TabsVariant },
ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Tab>>
) {
return (
<TabsPrimitive.Tab
data-slot="tabs-trigger"
className={cn(
"flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-sm",
"data-[selected]:bg-layer-transparent-active data-[selected]:text-primary data-[selected]:shadow-sm",
"text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
"flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-md border border-transparent",
" data-[selected]:text-primary data-[selected]:shadow-sm data-[selected]:bg-layer-2 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:raised-200",
"text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
"disabled:text-placeholder disabled:cursor-not-allowed",
{
"text-11": size === "sm",