Skip to content

Commit dbda750

Browse files
aaryan610aaryan610
authored
[WEB-5732] style: update work item detail properties UI (#8357)
1 parent 61db42b commit dbda750

File tree

10 files changed

+163
-129
lines changed

10 files changed

+163
-129
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
22
import { cn } from "@plane/utils";
33

44
type TSidebarPropertyListItemProps = {
5-
icon: React.FC<{ className?: string }>;
5+
icon: React.FC<{ className?: string }> | React.ReactNode;
66
label: string;
77
children: ReactNode;
88
appendElement?: ReactNode;
@@ -14,8 +14,8 @@ export function SidebarPropertyListItem(props: TSidebarPropertyListItemProps) {
1414

1515
return (
1616
<div className="flex items-center gap-2">
17-
<div className="flex shrink-0 items-center gap-1 w-30 text-body-xs-regular text-tertiary h-7.5">
18-
<Icon className="h-4 w-4 shrink-0" />
17+
<div className="flex shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
18+
{typeof Icon === "function" ? <Icon className="size-4 shrink-0" /> : Icon}
1919
<span>{label}</span>
2020
{appendElement}
2121
</div>

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import type { ReactNode } from "react";
2-
import { Fragment, useRef, useState } from "react";
3-
import { useTheme } from "next-themes";
2+
import { useRef, useState } from "react";
43
import { usePopper } from "react-popper";
54
import { Check, Search, SignalHigh } from "lucide-react";
65
import { Combobox } from "@headlessui/react";
@@ -341,10 +340,6 @@ export function PriorityDropdown(props: Props) {
341340
],
342341
});
343342

344-
// next-themes
345-
// TODO: remove this after new theming implementation
346-
const { resolvedTheme } = useTheme();
347-
348343
const options = ISSUE_PRIORITIES.map((priority) => ({
349344
value: priority.key,
350345
query: priority.key,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ export const LabelListItem = observer(function LabelListItem(props: TLabelListIt
3535
key={labelId}
3636
type="button"
3737
className={cn(
38-
"h-full w-min flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active group text-body-xs-regular text-tertiary",
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",
3939
{
4040
"cursor-pointer": !disabled,
4141
}
4242
)}
4343
onClick={handleLabel}
4444
disabled={disabled}
4545
>
46-
<LabelFilledIcon className="size-4" color={label.color ?? "#000000"} />
46+
<LabelFilledIcon className="size-3" color={label.color ?? "#000000"} />
4747
<div className="flex-shrink-0 text-body-xs-regular">{label.name}</div>
4848
{!disabled && (
4949
<div className="flex-shrink-0">

‎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 px-2">
95+
<div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full">
9696
<LabelList
9797
workspaceSlug={workspaceSlug}
9898
projectId={projectId}

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

Lines changed: 138 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Combobox } from "@headlessui/react";
66
// plane imports
77
import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
88
import { useTranslation } from "@plane/i18n";
9-
import { LabelFilledIcon, LabelPropertyIcon } from "@plane/propel/icons";
109
import type { IIssueLabel } from "@plane/types";
1110
import { EUserProjectRoles } from "@plane/types";
1211
// helpers
@@ -86,15 +85,9 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
8685
const issueLabels = values ?? [];
8786

8887
const label = (
89-
<button
90-
type="button"
91-
className="h-full w-full flex items-center gap-1.5 rounded-lg px-2 py-0.5 bg-layer-transparent-active hover:bg-layer-transparent-hover text-body-xs-regular text-tertiary"
92-
>
93-
<div className="flex-shrink-0">
94-
<LabelFilledIcon className="size-3.5" />
95-
</div>
96-
<div className="flex-shrink-0">{t("label.select")}</div>
97-
</button>
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>
9891
);
9992

10093
const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -121,101 +114,149 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
121114
if (!issueId || !values) return <></>;
122115

123116
return (
124-
<>
125-
<Combobox
126-
as="div"
127-
className={`w-auto max-w-full flex-shrink-0 text-left`}
128-
value={issueLabels}
129-
onChange={(value) => onSelect(value)}
130-
multiple
131-
>
132-
<Combobox.Button as={Fragment}>
133-
<button
134-
ref={setReferenceElement}
135-
type="button"
136-
className="cursor-pointer"
137-
onClick={() => !projectLabels && fetchLabels()}
138-
>
139-
{label}
140-
</button>
141-
</Combobox.Button>
142-
143-
<Combobox.Options className="fixed z-10">
144-
<div
145-
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
146-
ref={setPopperElement}
147-
style={styles.popper}
148-
{...attributes.popper}
149-
>
150-
<div className="px-2">
151-
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
152-
<Search className="h-3.5 w-3.5 text-tertiary" />
153-
<Combobox.Input
154-
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
155-
value={query}
156-
onChange={(e) => setQuery(e.target.value)}
157-
placeholder={t("common.search.label")}
158-
displayValue={(assigned: any) => assigned?.name}
159-
onKeyDown={searchInputKeyDown}
160-
tabIndex={baseTabIndex}
161-
/>
162-
</div>
117+
<Combobox
118+
as="div"
119+
className="size-full flex-shrink-0 text-left"
120+
value={issueLabels}
121+
onChange={(value) => onSelect(value)}
122+
multiple
123+
>
124+
<Combobox.Button as={Fragment}>
125+
<button
126+
ref={setReferenceElement}
127+
type="button"
128+
className="cursor-pointer size-full"
129+
onClick={() => !projectLabels && fetchLabels()}
130+
>
131+
{label}
132+
</button>
133+
</Combobox.Button>
134+
<Combobox.Options className="fixed z-10">
135+
<div
136+
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
137+
ref={setPopperElement}
138+
style={styles.popper}
139+
{...attributes.popper}
140+
>
141+
<div className="px-2">
142+
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
143+
<Search className="h-3.5 w-3.5 text-tertiary" />
144+
<Combobox.Input
145+
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
146+
value={query}
147+
onChange={(e) => setQuery(e.target.value)}
148+
placeholder={t("common.search.label")}
149+
displayValue={(assigned: any) => assigned?.name}
150+
onKeyDown={searchInputKeyDown}
151+
tabIndex={baseTabIndex}
152+
/>
163153
</div>
164-
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
165-
{isLoading ? (
166-
<p className="text-center text-secondary">{t("common.loading")}</p>
167-
) : filteredOptions.length > 0 ? (
168-
filteredOptions.map((option) => (
169-
<Combobox.Option
170-
key={option.value}
171-
value={option.value}
172-
className={({ selected }) =>
173-
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
174-
selected ? "text-primary" : "text-secondary"
175-
}`
176-
}
177-
>
178-
{({ selected }) => (
179-
<>
180-
{option.content}
181-
{selected && (
182-
<div className="flex-shrink-0">
183-
<Check className={`h-3.5 w-3.5`} />
184-
</div>
185-
)}
186-
</>
187-
)}
188-
</Combobox.Option>
189-
))
190-
) : submitting ? (
191-
<Loader className="spin h-3.5 w-3.5" />
192-
) : canCreateLabel ? (
154+
</div>
155+
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
156+
{isLoading ? (
157+
<p className="text-center text-secondary">{t("common.loading")}</p>
158+
) : filteredOptions.length > 0 ? (
159+
filteredOptions.map((option) => (
193160
<Combobox.Option
194-
value={query}
195-
onClick={(e) => {
196-
e.preventDefault();
197-
e.stopPropagation();
198-
if (!query.length) return;
199-
handleAddLabel(query);
200-
}}
201-
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
161+
key={option.value}
162+
value={option.value}
163+
className={({ selected }) =>
164+
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
165+
selected ? "text-primary" : "text-secondary"
166+
}`
167+
}
202168
>
203-
{query.length ? (
169+
{({ selected }) => (
204170
<>
205-
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
206-
labels
171+
{option.content}
172+
{selected && (
173+
<div className="flex-shrink-0">
174+
<Check className={`h-3.5 w-3.5`} />
175+
</div>
176+
)}
207177
</>
208-
) : (
209-
t("label.create.type")
210178
)}
211179
</Combobox.Option>
180+
))
181+
) : submitting ? (
182+
<Loader className="spin h-3.5 w-3.5" />
183+
) : canCreateLabel ? (
184+
<Combobox.Option
185+
value={query}
186+
onClick={(e) => {
187+
e.preventDefault();
188+
e.stopPropagation();
189+
if (!query.length) return;
190+
handleAddLabel(query);
191+
}}
192+
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
193+
>
194+
{query.length ? (
195+
<>
196+
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
197+
labels
198+
</>
199+
) : (
200+
t("label.create.type")
201+
)}
202+
</Combobox.Option>
203+
) : (
204+
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
205+
)}
206+
</div>
207+
</div>
208+
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
209+
{isLoading ? (
210+
<p className="text-center text-secondary">{t("common.loading")}</p>
211+
) : filteredOptions.length > 0 ? (
212+
filteredOptions.map((option) => (
213+
<Combobox.Option
214+
key={option.value}
215+
value={option.value}
216+
className={({ selected }) =>
217+
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
218+
selected ? "text-primary" : "text-secondary"
219+
}`
220+
}
221+
>
222+
{({ selected }) => (
223+
<>
224+
{option.content}
225+
{selected && (
226+
<div className="flex-shrink-0">
227+
<Check className={`h-3.5 w-3.5`} />
228+
</div>
229+
)}
230+
</>
231+
)}
232+
</Combobox.Option>
233+
))
234+
) : submitting ? (
235+
<Loader className="spin h-3.5 w-3.5" />
236+
) : canCreateLabel ? (
237+
<Combobox.Option
238+
value={query}
239+
onClick={(e) => {
240+
e.preventDefault();
241+
e.stopPropagation();
242+
if (!query.length) return;
243+
handleAddLabel(query);
244+
}}
245+
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
246+
>
247+
{query.length ? (
248+
<>
249+
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
250+
</>
212251
) : (
213-
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
252+
t("label.create.type")
214253
)}
215-
</div>
216-
</div>
217-
</Combobox.Options>
218-
</Combobox>
219-
</>
254+
</Combobox.Option>
255+
) : (
256+
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
257+
)}
258+
</div>
259+
</Combobox.Options>
260+
</Combobox>
220261
);
221262
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ export const IssueParentSelect = observer(function IssueParentSelect(props: TIss
7575
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded-sm outline-none",
7676
{
7777
"cursor-not-allowed": disabled,
78-
"hover:bg-layer-1": !disabled,
79-
"bg-layer-1": isParentIssueModalOpen,
78+
"hover:bg-layer-transparent-hover": !disabled,
79+
"bg-layer-transparent-selected": isParentIssueModalOpen,
8080
},
8181
className
8282
)}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
301301
/>
302302
) : (
303303
<div className="flex h-full w-full overflow-hidden">
304-
<div className="max-w-2/3 h-full w-full space-y-6 overflow-y-auto px-9 py-5">
304+
<div className="h-full w-full space-y-6 overflow-y-auto px-9 py-5">
305305
<IssueMainContent
306306
workspaceSlug={workspaceSlug}
307307
projectId={projectId}
@@ -312,7 +312,7 @@ export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDe
312312
/>
313313
</div>
314314
<div
315-
className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/3 lg:min-w-80 xl:min-w-96"
315+
className="fixed right-0 z-[5] h-full w-full min-w-[300px] border-l border-subtle bg-surface-1 sm:w-1/2 md:relative md:w-1/4 lg:min-w-80 xl:min-w-96"
316316
style={issueDetailSidebarCollapsed ? { right: `-${window?.innerWidth || 0}px` } : {}}
317317
>
318318
<IssueDetailsSidebar

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import { observer } from "mobx-react";
32
// i18n
43
import { useTranslation } from "@plane/i18n";
@@ -81,8 +80,8 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
8180
<>
8281
<div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
8382
<div className="h-full w-full overflow-y-auto px-6">
84-
<h5 className="mt-6 text-body-xs-medium">{t("common.properties")}</h5>
85-
<div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
83+
<h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
84+
<div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
8685
<SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
8786
<StateDropdown
8887
value={issue?.state_id}
@@ -121,10 +120,10 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
121120
value={issue?.priority}
122121
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
123122
disabled={!isEditable}
124-
buttonVariant="border-with-text"
125-
className="w-full grow rounded-lg"
126-
buttonContainerClassName="w-full text-left px-2 h-7.5"
127-
buttonClassName="w-min h-6 whitespace-nowrap"
123+
buttonVariant="transparent-with-text"
124+
className="w-full h-7.5 grow rounded-sm"
125+
buttonContainerClassName="size-full text-left"
126+
buttonClassName="size-full px-2 py-0.5 whitespace-nowrap [&_svg]:size-3.5"
128127
/>
129128
</SidebarPropertyListItem>
130129

@@ -236,7 +235,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
236235

237236
<SidebarPropertyListItem icon={ParentPropertyIcon} label={t("common.parent")}>
238237
<IssueParentSelectRoot
239-
className="h-full w-full grow"
238+
className="w-full h-7.5 grow"
240239
workspaceSlug={workspaceSlug}
241240
projectId={projectId}
242241
issueId={issueId}

0 commit comments

Comments
 (0)