Skip to content

Commit 67c39df

Browse files
JayashTripathyJayashTripathy
authored
[WEB-5762] fix: workitem detail sidebar properties design consistency (#8400)
1 parent 3876bf0 commit 67c39df

File tree

14 files changed

+101
-62
lines changed

14 files changed

+101
-62
lines changed

‎apps/web/core/components/common/layout/sidebar/property-list-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
1919
<span>{label}</span>
2020
{appendElement}
2121
</div>
22-
<div className={cn("grow flex items-center flex-wrap gap-2", childrenClassName)}>{children}</div>
22+
<div className={cn("grow flex items-center flex-wrap gap-1", childrenClassName)}>{children}</div>
2323
</div>
2424
);
2525
}

‎apps/web/core/components/dropdowns/buttons.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
// helpers
3+
import { Button } from "@plane/propel/button";
34
import { Tooltip } from "@plane/propel/tooltip";
45
import { cn } from "@plane/utils";
56
// types
@@ -71,17 +72,19 @@ function BorderButton(props: ButtonProps) {
7172
isMobile={isMobile}
7273
renderByDefault={renderToolTipByDefault}
7374
>
74-
<div
75+
<Button
76+
variant="ghost"
77+
size="sm"
7578
className={cn(
76-
"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",
79+
"h-full w-full flex items-center justify-start gap-1.5 border-[0.5px] border-strong",
7780
{
7881
"bg-layer-transparent-active": isActive,
7982
},
8083
className
8184
)}
8285
>
8386
{children}
84-
</div>
87+
</Button>
8588
</Tooltip>
8689
);
8790
}
@@ -97,14 +100,16 @@ function BackgroundButton(props: ButtonProps) {
97100
isMobile={isMobile}
98101
renderByDefault={renderToolTipByDefault}
99102
>
100-
<div
103+
<Button
104+
variant="ghost"
105+
size="sm"
101106
className={cn(
102-
"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",
107+
"h-full w-full flex items-center justify-start gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
103108
className
104109
)}
105110
>
106111
{children}
107-
</div>
112+
</Button>
108113
</Tooltip>
109114
);
110115
}
@@ -120,17 +125,19 @@ function TransparentButton(props: ButtonProps) {
120125
isMobile={isMobile}
121126
renderByDefault={renderToolTipByDefault}
122127
>
123-
<div
128+
<Button
129+
variant="ghost"
130+
size="sm"
124131
className={cn(
125-
"h-full w-full flex items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 hover:bg-layer-transparent-hover",
132+
"h-full w-full flex items-center justify-start gap-1.5",
126133
{
127134
"bg-layer-transparent-active": isActive,
128135
},
129136
className
130137
)}
131138
>
132139
{children}
133-
</div>
140+
</Button>
134141
</Tooltip>
135142
);
136143
}

‎apps/web/core/components/dropdowns/date.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,9 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
138138
>
139139
{!hideIcon && icon}
140140
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
141-
<span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
141+
<span className="flex-grow truncate text-left text-body-xs-medium">
142+
{value ? renderFormattedDate(value, formatToken) : placeholder}
143+
</span>
142144
)}
143145
{isClearable && !disabled && isDateSelected && (
144146
<CloseIcon

‎apps/web/core/components/dropdowns/member/base.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ export const MemberDropdownBase = observer(function MemberDropdownBase(props: TM
144144
>
145145
{!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
146146
{BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
147-
<span className="flex-grow truncate leading-5">
147+
<span className="flex-grow truncate leading-5 text-left text-body-xs-medium">
148148
{getDisplayName(value, showUserDetails, placeholder)}
149149
</span>
150150
)}

‎apps/web/core/components/dropdowns/priority.tsx‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,14 @@ function BorderButton(props: ButtonProps) {
120120
<SignalHigh className="size-3" />
121121
))}
122122
{!hideText && (
123-
<span className="flex-grow truncate text-caption-sm-regular">{priorityDetails?.title ?? placeholder}</span>
123+
<span
124+
className={cn("flex-grow truncate text-body-xs-medium", {
125+
"text-secondary": priority && priority !== "none",
126+
"text-placeholder": !priority || priority === "none",
127+
})}
128+
>
129+
{priorityDetails?.title ?? placeholder}
130+
</span>
124131
)}
125132
{dropdownArrow && (
126133
<ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -204,7 +211,12 @@ function BackgroundButton(props: ButtonProps) {
204211
<SignalHigh className="size-3" />
205212
))}
206213
{!hideText && (
207-
<span className="flex-grow truncate text-caption-sm-regular">
214+
<span
215+
className={cn("flex-grow truncate text-body-xs-medium", {
216+
"text-secondary": priority && priority !== "none",
217+
"text-placeholder": !priority || priority === "none",
218+
})}
219+
>
208220
{priorityDetails?.title ?? t("common.priority") ?? placeholder}
209221
</span>
210222
)}
@@ -246,7 +258,7 @@ function TransparentButton(props: ButtonProps) {
246258
>
247259
<div
248260
className={cn(
249-
"h-full w-full flex items-center gap-1.5 rounded-sm px-2 py-0.5 hover:bg-layer-transparent-hover",
261+
"h-full w-full flex items-center gap-1.5 rounded-sm hover:bg-layer-transparent-hover px-2",
250262
{
251263
// compact the icons if text is hidden
252264
"px-0.5": hideText,
@@ -283,7 +295,12 @@ function TransparentButton(props: ButtonProps) {
283295
<SignalHigh className="size-3" />
284296
))}
285297
{!hideText && (
286-
<span className="flex-grow truncate text-caption-sm-regular">
298+
<span
299+
className={cn("flex-grow truncate text-body-xs-medium", {
300+
"text-secondary": priority && priority !== "none",
301+
"text-placeholder": !priority || priority === "none",
302+
})}
303+
>
287304
{priorityDetails?.title ?? t("common.priority") ?? placeholder}
288305
</span>
289306
)}

‎apps/web/core/components/issues/issue-detail/cycle-select.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssue
5050
disabled={disableSelect}
5151
buttonVariant="transparent-with-text"
5252
className="group w-full"
53-
buttonContainerClassName="w-full text-left rounded-sm"
54-
buttonClassName={`text-13 justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
53+
buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
54+
buttonClassName={`text-body-xs-medium justify-between ${issue?.cycle_id ? "" : "text-placeholder"}`}
5555
placeholder={t("cycle.no_cycle")}
5656
hideIcon
5757
dropdownArrow

‎apps/web/core/components/issues/issue-detail/label/label-list-item.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { observer } from "mobx-react";
2+
import { Button } from "@plane/propel/button";
23
import { CloseIcon, LabelFilledIcon } from "@plane/propel/icons";
3-
import { cn } from "@plane/utils";
44
// types
55
import { useLabel } from "@/hooks/store/use-label";
66
import type { TLabelOperations } from "./root";
@@ -31,25 +31,14 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
3131

3232
if (!label) return <></>;
3333
return (
34-
<button
35-
key={labelId}
36-
type="button"
37-
className={cn(
38-
"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",
39-
{
40-
"cursor-pointer": !disabled,
41-
}
42-
)}
43-
onClick={handleLabel}
44-
disabled={disabled}
45-
>
34+
<Button key={labelId} type="button" variant="tertiary" onClick={() => void handleLabel()} disabled={disabled}>
4635
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
47-
<div className="flex-shrink-0 text-body-xs-regular">{label.name}</div>
36+
<div className="flex-shrink-0">{label.name}</div>
4837
{!disabled && (
4938
<div className="flex-shrink-0">
5039
<CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-danger" />
5140
</div>
5241
)}
53-
</button>
42+
</Button>
5443
);
5544
});

‎apps/web/core/components/issues/issue-detail/label/root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
9292
);
9393

9494
return (
95-
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full">
95+
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full px-2">
9696
<LabelList
9797
workspaceSlug={workspaceSlug}
9898
projectId={projectId}

‎apps/web/core/components/issues/issue-detail/label/select/label-select.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { Fragment, useState } from "react";
22
import { observer } from "mobx-react";
33
import { usePopper } from "react-popper";
4-
import { Check, Loader, Search } from "lucide-react";
4+
import { Check, Loader, Plus, Search } from "lucide-react";
55
import { Combobox } from "@headlessui/react";
66
// plane imports
77
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
88
import { useTranslation } from "@plane/i18n";
9+
import { Button } from "@plane/propel/button";
910
import type { IIssueLabel } from "@plane/types";
1011
import { EUserProjectRoles } from "@plane/types";
1112
// helpers
@@ -84,11 +85,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
8485

8586
const issueLabels = values ?? [];
8687

87-
const label = (
88-
<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">
89-
{t("label.select")}
90-
</span>
91-
);
88+
const label = <span className="text-body-xs-medium text-placeholder">{t("label.select")}</span>;
9289

9390
const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
9491
if (query !== "" && e.key === "Escape") {
@@ -123,14 +120,16 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
123120
multiple
124121
>
125122
<Combobox.Button as={Fragment}>
126-
<button
123+
<Button
127124
ref={setReferenceElement}
128125
type="button"
129-
className="cursor-pointer size-full"
126+
variant="tertiary"
127+
size="sm"
128+
prependIcon={<Plus />}
130129
onClick={() => !projectLabels && fetchLabels()}
131130
>
132131
{label}
133-
</button>
132+
</Button>
134133
</Combobox.Button>
135134

136135
<Combobox.Options className="fixed z-10">

‎apps/web/core/components/issues/issue-detail/module-select.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIss
6464
placeholder={t("module.no_module")}
6565
disabled={disableSelect}
6666
className="group h-full w-full"
67-
buttonContainerClassName="w-full rounded-sm"
68-
buttonClassName={`min-h-8 text-13 justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
67+
buttonContainerClassName="w-full text-left h-7.5 rounded-sm"
68+
buttonClassName={`text-body-xs-medium justify-between ${issue?.module_ids?.length ? "" : "text-placeholder"}`}
6969
buttonVariant="transparent-with-text"
7070
hideIcon
7171
dropdownArrow

0 commit comments

Comments
 (0)