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

[WEB-5614] fix: new design system consistency (#8351)

Browse source 
* chore: tooltip enhancements

* chore: project card enhancements

* chore: work item card enhancements

* chore: update component styles and class names for consistency across the application

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
This commit is contained in:
Jayash Tripathy 2025-12-17 13:32:29 +05:30 • committed by GitHub
parent df710e00dc
commit 88f5a063d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
23 changed files with 98 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/ui/src/form-fields/input.tsx
View file

@ -30,9 +30,9 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type}
name={name}
className={cn(
"block rounded-md bg-transparent text-13 placeholder-custom-text-400 focus:outline-none",
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px] border-subtle": mode === "primary",
"rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary":
mode === "transparent",
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",

2
packages/ui/src/progress/circular-progress-indicator.tsx
View file

@ -9,7 +9,7 @@ interface ICircularProgressIndicator {
}
export function CircularProgressIndicator(props: ICircularProgressIndicator) {
const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-accent-primary", children } = props;
const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-success", children } = props;
const sqSize = size;
const radius = (size - strokeWidth) / 2;

26
packages/ui/src/tabs/tab-list.tsx
View file

@ -19,22 +19,26 @@ type TTabListProps = {
tabClassName?: string;
size?: "sm" | "md" | "lg";
selectedTab?: string;
autoWrap?: boolean;
onTabChange?: (key: string) => void;
};
export function TabList({
tabs,
tabListClassName,
tabClassName,
size = "md",
selectedTab,
onTabChange,
}: TTabListProps) {
export function TabList({ autoWrap = true, ...props }: TTabListProps) {
return autoWrap ? (
<Tab.Group>
<TabListInner {...props} />
</Tab.Group>
) : (
<TabListInner {...props} />
);
}
function TabListInner({ tabs, tabListClassName, tabClassName, size = "md", selectedTab, onTabChange }: TTabListProps) {
return (
<Tab.List
as="div"
className={cn(
"flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1/60",
"flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-1",
tabListClassName
)}
>
@ -65,7 +69,9 @@ export function TabList({
}}
disabled={tab.disabled}
>
{tab.icon && <tab.icon className="size-4" />}
{tab.icon && (
<tab.icon className={cn({ "size-3": size === "sm", "size-4": size === "md", "size-5": size === "lg" })} />
)}
{tab.label}
</Tab>
))}