Skip to content

[WEB-5762] fix: workitem detail sidebar properties design consistency #8400

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pushya22 merged 3 commits into from
Dec 19, 2025
Merged

[WEB-5762] fix: workitem detail sidebar properties design consistency #8400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9dee80
refactor: update button components and improve styling consistency ac…
JayashTripathy Dec 19, 2025
a152263
fix: update background color variables and font family in tailwind co…
JayashTripathy Dec 19, 2025
f54f7e9
Merge branch 'preview' of https://github.com/makeplane/plane into fix…
JayashTripathy Dec 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/core/components/common/layout/sidebar/property-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
<span>{label}</span>
{appendElement}
</div>
<div className={cn("grow flex items-center flex-wrap gap-2", childrenClassName)}>{children}</div>
<div className={cn("grow flex items-center flex-wrap gap-1", childrenClassName)}>{children}</div>
</div>
);
}
25 changes: 16 additions & 9 deletions apps/web/core/components/dropdowns/buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
// helpers
import { Button } from "@plane/propel/button";
import { Tooltip } from "@plane/propel/tooltip";
import { cn } from "@plane/utils";
// types
Expand Down Expand Up @@ -71,17 +72,19 @@ function BorderButton(props: ButtonProps) {
isMobile={isMobile}
renderByDefault={renderToolTipByDefault}
>
<div
<Button
variant="ghost"
size="sm"
className={cn(
"h-full w-full flex items-center gap-1.5 border-[0.5px] border-strong hover:bg-layer-transparent-hover text-11 px-2 py-0.5 rounded-sm",
"h-full w-full flex items-center justify-start gap-1.5 border-[0.5px] border-strong",
{
"bg-layer-transparent-active": isActive,
},
className
)}
>
{children}
</div>
</Button>
</Tooltip>
);
}
Expand All @@ -97,14 +100,16 @@ function BackgroundButton(props: ButtonProps) {
isMobile={isMobile}
renderByDefault={renderToolTipByDefault}
>
<div
<Button
variant="ghost"
size="sm"
className={cn(
"h-full w-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 bg-layer-3 hover:bg-layer-1-hover",
"h-full w-full flex items-center justify-start gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
className
)}
>
{children}
</div>
</Button>
</Tooltip>
);
}
Expand All @@ -120,17 +125,19 @@ function TransparentButton(props: ButtonProps) {
isMobile={isMobile}
renderByDefault={renderToolTipByDefault}
>
<div
<Button
variant="ghost"
size="sm"
className={cn(
"h-full w-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 hover:bg-layer-transparent-hover",
"h-full w-full flex items-center justify-start gap-1.5",
{
"bg-layer-transparent-active": isActive,
},
className
)}
>
{children}
</div>
</Button>
</Tooltip>
);
}
4 changes: 3 additions & 1 deletion apps/web/core/components/dropdowns/date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,9 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
>
{!hideIcon && icon}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
<span className="flex-grow truncate text-left text-body-xs-medium">
{value ? renderFormattedDate(value, formatToken) : placeholder}
</span>
)}
{isClearable && !disabled && isDateSelected && (
<CloseIcon
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/dropdowns/member/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
>
{!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
<span className="flex-grow truncate leading-5">
<span className="flex-grow truncate leading-5 text-left text-body-xs-medium">
{getDisplayName(value, showUserDetails, placeholder)}
</span>
)}
Expand Down
25 changes: 21 additions & 4 deletions apps/web/core/components/dropdowns/priority.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,14 @@ function BorderButton(props: ButtonProps) {
<SignalHigh className="size-3" />
))}
{!hideText && (
<span className="flex-grow truncate text-caption-sm-regular">{priorityDetails?.title ?? placeholder}</span>
<span
className={cn("flex-grow truncate text-body-xs-medium", {
"text-secondary": priority && priority !== "none",
"text-placeholder": !priority || priority === "none",
})}
>
{priorityDetails?.title ?? placeholder}
</span>
)}
{dropdownArrow && (
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
Expand Down Expand Up @@ -204,7 +211,12 @@ function BackgroundButton(props: ButtonProps) {
<SignalHigh className="size-3" />
))}
{!hideText && (
<span className="flex-grow truncate text-caption-sm-regular">
<span
className={cn("flex-grow truncate text-body-xs-medium", {
"text-secondary": priority && priority !== "none",
"text-placeholder": !priority || priority === "none",
})}
>
{priorityDetails?.title ?? t("common.priority") ?? placeholder}
</span>
)}
Expand Down Expand Up @@ -246,7 +258,7 @@ function TransparentButton(props: ButtonProps) {
>
<div
className={cn(
"h-full w-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 hover:bg-layer-transparent-hover",
"h-full w-full flex items-center gap-1.5 rounded-sm hover:bg-layer-transparent-hover px-2",
{
// compact the icons if text is hidden
"px-0.5": hideText,
Expand Down Expand Up @@ -283,7 +295,12 @@ function TransparentButton(props: ButtonProps) {
<SignalHigh className="size-3" />
))}
{!hideText && (
<span className="flex-grow truncate text-caption-sm-regular">
<span
className={cn("flex-grow truncate text-body-xs-medium", {
"text-secondary": priority && priority !== "none",
"text-placeholder": !priority || priority === "none",
})}
>
{priorityDetails?.title ?? t("common.priority") ?? placeholder}
</span>
)}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/issues/issue-detail/cycle-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssue
disabled={disableSelect}
buttonVariant="transparent-with-text"
className="group w-full"
buttonContainerClassName="w-full text-left rounded-sm"
buttonClassName={`text-13 justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
buttonClassName={`text-body-xs-medium justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
placeholder={t("cycle.no_cycle")}
hideIcon
dropdownArrow
Expand Down
19 changes: 4 additions & 15 deletions apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import { Button } from "@plane/propel/button";
import { CloseIcon, LabelFilledIcon } from "@plane/propel/icons";
import { cn } from "@plane/utils";
// types
import { useLabel } from "@/hooks/store/use-label";
import type { TLabelOperations } from "./root";
Expand Down Expand Up @@ -31,25 +31,14 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt

if (!label) return <></>;
return (
<button
key={labelId}
type="button"
className={cn(
"h-full w-min flex items-center gap-1.5 rounded-sm px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
{
"cursor-pointer": !disabled,
}
)}
onClick={handleLabel}
disabled={disabled}
>
<Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>
Copy link

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onClick handler wraps the async function handleLabel with void operator, but handleLabel can be passed directly. The current pattern onClick={() => void handleLabel()} is unnecessarily verbose. Consider using onClick={handleLabel} instead for better readability and consistency.

Suggested change
<Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>
<Button key={labelId} type="button" variant="tertiary" onClick={handleLabel} disabled={disabled}>

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Button component is missing a size prop. For consistency with the label-select.tsx file (line 127), consider adding size="sm" to ensure uniform button sizing across label components.

Suggested change
<Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>
<Button key={labelId} type="button" size="sm" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>

Copilot uses AI. Check for mistakes.
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
<div className="flex-shrink-0 text-body-xs-regular">{label.name}</div>
<div className="flex-shrink-0">{label.name}</div>
{!disabled && (
<div className="flex-shrink-0">
<CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />
</div>
)}
</button>
</Button>
);
});
2 changes: 1 addition & 1 deletion apps/web/core/components/issues/issue-detail/label/root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
);

return (
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full">
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full px-2">
<LabelList
workspaceSlug={workspaceSlug}
projectId={projectId}
Expand Down
17 changes: 8 additions & 9 deletions apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Fragment, useState } from "react";
import { observer } from "mobx-react";
import { usePopper } from "react-popper";
import { Check, Loader, Search } from "lucide-react";
import { Check, Loader, Plus, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// plane imports
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { Button } from "@plane/propel/button";
import type { IIssueLabel } from "@plane/types";
import { EUserProjectRoles } from "@plane/types";
// helpers
Expand Down Expand Up @@ -84,11 +85,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue

const issueLabels = values ?? [];

const label = (
<span className="size-full flex items-center rounded-sm px-2 py-0.5 bg-layer-transparent hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary">
{t("label.select")}
</span>
);
const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;

const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (query !== "" && e.key === "Escape") {
Expand Down Expand Up @@ -123,14 +120,16 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
multiple
>
<Combobox.Button as={Fragment}>
<button
<Button
ref={setReferenceElement}
type="button"
className="cursor-pointer size-full"
variant="tertiary"
size="sm"
prependIcon={<Plus />}
onClick={() => !projectLabels && fetchLabels()}
>
{label}
</button>
</Button>
</Combobox.Button>

<Combobox.Options className="fixed z-10">
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/issues/issue-detail/module-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIss
placeholder={t("module.no_module")}
disabled={disableSelect}
className="group h-full w-full"
buttonContainerClassName="w-full rounded-sm"
buttonClassName={`min-h-8 text-13 justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
buttonVariant="transparent-with-text"
hideIcon
dropdownArrow
Expand Down
6 changes: 3 additions & 3 deletions apps/web/core/components/issues/issue-detail/parent-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
disabled={disabled}
>
{issue.parent_id && parentIssue ? (
<div className="flex items-center gap-1 bg-success-subtle rounded-sm px-1.5 py-1">
<div className="flex items-center gap-1.5">
<Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
<Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
{parentIssue?.project_id && parentIssueProjectDetails && (
Expand All @@ -94,7 +94,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
projectIdentifier={parentIssueProjectDetails?.identifier}
issueSequenceId={parentIssue.sequence_id}
size="xs"
variant="success"
variant="secondary"
/>
)}
</Link>
Expand All @@ -115,7 +115,7 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
)}
</div>
) : (
<span className="text-body-xs-regular text-placeholder">{t("issue.add.parent")}</span>
<span className="text-body-xs-medium text-placeholder">{t("issue.add.parent")}</span>
)}
{!disabled && (
<span
Expand Down
24 changes: 14 additions & 10 deletions apps/web/core/components/issues/peek-overview/properties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
return (
<div>
<h6 className="text-body-xs-medium">{t("common.properties")}</h6>
<div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
<div className={`w-full space-y-3 mt-3 ${disabled ? "opacity-60" : ""}`}>
<SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
<StateDropdown
value={issue?.state_id}
Expand All @@ -85,7 +85,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
buttonVariant="transparent-with-text"
className="w-full grow group"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName="text-body-xs-regular"
buttonClassName={`text-body-xs-medium ${issue?.state_id ? "" : "text-placeholder"}`}
dropdownArrow
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
/>
Expand All @@ -102,7 +102,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
className="w-full grow group"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={`text-body-xs-regular justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
buttonClassName={`text-body-xs-medium justify-between ${issue?.assignee_ids?.length > 0 ? "" : "text-placeholder"}`}
hideIcon={issue.assignee_ids?.length === 0}
dropdownArrow
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
Expand All @@ -116,18 +116,22 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
disabled={disabled}
buttonVariant="transparent-with-text"
className="w-full h-7.5 grow rounded-sm"
buttonContainerClassName="size-full text-left"
buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={`text-body-xs-medium whitespace-nowrap [&_svg]:size-3.5 ${!issue?.priority || issue?.priority === "none" ? "text-placeholder" : ""}`}
/>
</SidebarPropertyListItem>

{createdByDetails && (
<SidebarPropertyListItem icon={UserCirclePropertyIcon} label={t("common.created_by")}>
<SidebarPropertyListItem
icon={UserCirclePropertyIcon}
label={t("common.created_by")}
childrenClassName="px-2"
>
<ButtonAvatars
showTooltip
userIds={createdByDetails?.display_name.includes("-intake") ? null : createdByDetails?.id}
/>
<span className="grow truncate leading-5">
<span className="grow truncate text-body-xs-medium text-secondary leading-5">
{createdByDetails?.display_name.includes("-intake") ? "Plane" : createdByDetails?.display_name}
</span>
</SidebarPropertyListItem>
Expand All @@ -147,7 +151,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
disabled={disabled}
className="w-full grow group"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={`text-body-xs-regular ${issue?.start_date ? "" : "text-placeholder"}`}
buttonClassName={`text-body-xs-medium ${issue?.start_date ? "" : "text-placeholder"}`}
hideIcon
clearIconClassName="h-3 w-3 hidden group-hover:inline"
/>
Expand All @@ -168,7 +172,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
disabled={disabled}
className="w-full grow group"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={cn("text-body-xs-regular", {
buttonClassName={cn("text-body-xs-medium", {
"text-placeholder": !issue.target_date,
"text-danger": shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group),
})}
Expand All @@ -189,7 +193,7 @@ export const PeekOverviewProperties = observer(function PeekOverviewProperties(p
buttonVariant="transparent-with-text"
className="w-full grow group"
buttonContainerClassName="w-full text-left h-7.5"
buttonClassName={`text-body-xs-regular ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
buttonClassName={`text-body-xs-medium ${issue?.estimate_point !== undefined ? "" : "text-placeholder"}`}
placeholder="None"
hideIcon
dropdownArrow
Expand Down
Loading
Loading