style: update work item details properties UI#8357
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThis pull request updates UI styling and layout across issue-related components, restructures the label selection component to support inline label creation, expands sidebar property list item rendering to accept both component and node icons, removes unused theme imports from the priority dropdown, and updates translation text for label operations. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
This PR refactors the UI of the work item details properties pane to achieve more consistent styling and spacing across property components. The changes primarily focus on standardizing component heights, border radii, and hover states for a more cohesive user experience.
- Standardized interactive elements to use
rounded-sminstead ofrounded-lgfor a tighter, more consistent visual design - Unified property component heights to
h-7.5(30px) across all sidebar items for better alignment - Updated button variants and styling classes for priority, parent, and label selectors to use consistent transparent backgrounds with hover states
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/i18n/src/locales/en/translations.ts | Updated label selection text from "Select label" to "Add labels" |
| apps/web/core/components/issues/peek-overview/properties.tsx | Removed unused FC import; updated priority dropdown styling to use transparent variant with h-7.5 height and rounded-sm; added w-full to due date container; updated parent select height |
| apps/web/core/components/issues/issue-detail/sidebar.tsx | Removed unused React import; adjusted header spacing (mt-6 to mt-5, mt-3 to mt-4); updated priority dropdown styling to match peek-overview changes; updated parent select height |
| apps/web/core/components/issues/issue-detail/root.tsx | Removed max-w-2/3 constraint from main content area; adjusted sidebar width from md:w-1/3 to md:w-1/4 for better proportions |
| apps/web/core/components/issues/issue-detail/parent-select.tsx | Updated hover and active states to use layer-transparent variants; standardized height with rounded-sm |
| apps/web/core/components/issues/issue-detail/label/select/label-select.tsx | Simplified label button from complex button element to span; changed rounded-lg to rounded-sm; updated className from w-auto to size-full; contains duplicate dropdown code block |
| apps/web/core/components/issues/issue-detail/label/root.tsx | Removed px-2 padding; added min-h-7.5 and w-full for consistent sizing |
| apps/web/core/components/issues/issue-detail/label/label-list-item.tsx | Changed rounded-lg to rounded-sm; reduced icon size from size-4 to size-3 |
| apps/web/core/components/dropdowns/priority.tsx | Removed unused Fragment and useTheme imports; cleaned up commented-out code |
| apps/web/core/components/common/layout/sidebar/property-list-item.tsx | Updated icon prop type to accept ReactNode in addition to function component; adjusted gap from gap-1 to gap-1.5; added conditional rendering for icon (function vs ReactNode); changed size classes to use size-4 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}> | ||
| {isLoading ? ( | ||
| <p className="text-center text-secondary">{t("common.loading")}</p> | ||
| ) : filteredOptions.length > 0 ? ( | ||
| filteredOptions.map((option) => ( | ||
| <Combobox.Option | ||
| key={option.value} | ||
| value={option.value} | ||
| className={({ selected }) => | ||
| `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${ | ||
| selected ? "text-primary" : "text-secondary" | ||
| }` | ||
| } | ||
| > | ||
| {({ selected }) => ( | ||
| <> | ||
| {option.content} | ||
| {selected && ( | ||
| <div className="flex-shrink-0"> | ||
| <Check className={`h-3.5 w-3.5`} /> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </Combobox.Option> | ||
| )) | ||
| ) : submitting ? ( | ||
| <Loader className="spin h-3.5 w-3.5" /> | ||
| ) : canCreateLabel ? ( | ||
| <Combobox.Option | ||
| value={query} | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (!query.length) return; | ||
| handleAddLabel(query); | ||
| }} | ||
| className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`} | ||
| > | ||
| {query.length ? ( | ||
| <> | ||
| {/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to labels | ||
| </> | ||
| ) : ( | ||
| <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p> | ||
| t("label.create.type") | ||
| )} | ||
| </div> | ||
| </div> | ||
| </Combobox.Options> | ||
| </Combobox> | ||
| </> | ||
| </Combobox.Option> | ||
| ) : ( | ||
| <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
The entire dropdown options list (lines 208-258) is duplicated outside the dropdown container. This duplicate block should be removed as it will render the same list of options twice, once inside the proper dropdown container (lines 155-206) and once outside of it. Only the first instance (lines 155-206) inside the dropdown container should remain.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (1)
106-112: Missing error handling for async label creation.If
onAddLabelthrows an error,submittingremainstrueindefinitely and the error is unhandled. Wrap in try-catch with a finally block to reset state.const handleAddLabel = async (labelName: string) => { setSubmitting(true); - const label = await onAddLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() }); - onSelect([...values, label.id]); - setQuery(""); - setSubmitting(false); + try { + const label = await onAddLabel(workspaceSlug, projectId, { name: labelName, color: getRandomLabelColor() }); + onSelect([...values, label.id]); + setQuery(""); + } catch (error) { + console.error("Failed to create label:", error); + } finally { + setSubmitting(false); + } };
🧹 Nitpick comments (2)
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (2)
196-198: Address TODO: Add translation for label creation text.The inline label creation text is hardcoded in English while other strings use
t(). Consider adding a translation key liket("label.create.add_to_labels", { name: query }).- {/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to - labels + {t("label.create.add", { name: query })}Note: You'll need to add the translation key with appropriate interpolation support.
181-182: Minor: Extra space in className.Double space between class names.
- <Loader className="spin h-3.5 w-3.5" /> + <Loader className="spin h-3.5 w-3.5" />
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
apps/web/core/components/common/layout/sidebar/property-list-item.tsx(2 hunks)apps/web/core/components/dropdowns/priority.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/label-list-item.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/root.tsx(1 hunks)apps/web/core/components/issues/issue-detail/label/select/label-select.tsx(2 hunks)apps/web/core/components/issues/issue-detail/parent-select.tsx(1 hunks)apps/web/core/components/issues/issue-detail/root.tsx(2 hunks)apps/web/core/components/issues/issue-detail/sidebar.tsx(3 hunks)apps/web/core/components/issues/peek-overview/properties.tsx(3 hunks)packages/i18n/src/locales/en/translations.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/parent-select.tsxpackages/i18n/src/locales/en/translations.tsapps/web/core/components/issues/issue-detail/root.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Enable TypeScript strict mode and ensure all files are fully typed
Files:
apps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/parent-select.tsxpackages/i18n/src/locales/en/translations.tsapps/web/core/components/issues/issue-detail/root.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsx
**/*.{js,jsx,ts,tsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Use Prettier with Tailwind plugin for code formatting, run
pnpm fix:format
Files:
apps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/parent-select.tsxpackages/i18n/src/locales/en/translations.tsapps/web/core/components/issues/issue-detail/root.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{js,jsx,ts,tsx}: Use ESLint with shared config across packages, adhering to max warnings limits per package
Use camelCase for variable and function names, PascalCase for components and types
Use try-catch with proper error types and log errors appropriately
Files:
apps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/parent-select.tsxpackages/i18n/src/locales/en/translations.tsapps/web/core/components/issues/issue-detail/root.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/issues/issue-detail/label/label-list-item.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/peek-overview/properties.tsxapps/web/core/components/issues/issue-detail/label/select/label-select.tsx
🧠 Learnings (12)
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Never use `bg-layer-2` or higher for content boxes and cards - always use the matching layer number; the exception for going one level above applies only to interactive form elements
Applied to files:
apps/web/core/components/issues/issue-detail/label/root.tsxapps/web/core/components/issues/issue-detail/sidebar.tsx
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Headers and main content sections within a page should be part of the same surface container (using semantic borders for visual separation if needed) rather than using separate surface backgrounds
Applied to files:
apps/web/core/components/issues/issue-detail/label/root.tsx
📚 Learning: 2025-11-25T10:18:05.172Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Prioritize using modern features and best practices introduced in TypeScript versions 5.0 through 5.8
Applied to files:
apps/web/core/components/dropdowns/priority.tsx
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/common/layout/sidebar/property-list-item.tsxapps/web/core/components/issues/peek-overview/properties.tsx
📚 Learning: 2025-10-09T20:43:07.762Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/core/components/new-user-popup.tsx:4-6
Timestamp: 2025-10-09T20:43:07.762Z
Learning: The `next-themes` library is React-compatible and can be used outside of Next.js applications. It's not Next.js-specific despite its name.
Applied to files:
apps/web/core/components/dropdowns/priority.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/web/core/components/dropdowns/priority.tsxapps/web/core/components/issues/peek-overview/properties.tsx
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use `-selected` state variants (e.g., `bg-layer-1-selected`) only when there is actual selection logic implemented, or use data attributes like `data-[selected]:bg-layer-1-selected`
Applied to files:
apps/web/core/components/issues/issue-detail/parent-select.tsxapps/web/core/components/issues/peek-overview/properties.tsx
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Sidebar menu items should use transparent backgrounds with hover states like `hover:bg-layer-1-hover` rather than base layer backgrounds, maintaining visual lightness while providing hover feedback
Applied to files:
apps/web/core/components/issues/issue-detail/parent-select.tsxapps/web/core/components/issues/issue-detail/sidebar.tsx
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Do not use hover state classes (e.g., `bg-layer-1-hover`) as base backgrounds - hover states should only be applied with the `hover:` prefix alongside the base background class
Applied to files:
apps/web/core/components/issues/issue-detail/parent-select.tsx
📚 Learning: 2025-10-10T13:25:14.810Z
Learnt from: gakshita
Repo: makeplane/plane PR: 7949
File: apps/web/core/components/issues/issue-modal/form.tsx:183-189
Timestamp: 2025-10-10T13:25:14.810Z
Learning: In `apps/web/core/components/issues/issue-modal/form.tsx`, the form reset effect uses a `dataResetProperties` dependency array prop (default: []) to give parent components explicit control over when the form resets. Do not suggest adding the `data` prop itself to the dependency array, as this would cause unwanted resets on every render when the data object reference changes, disrupting user input. The current pattern is intentional and allows the parent to trigger resets only when specific conditions are met.
Applied to files:
apps/web/core/components/issues/issue-detail/parent-select.tsxapps/web/core/components/issues/issue-detail/sidebar.tsxapps/web/core/components/issues/peek-overview/properties.tsx
📚 Learning: 2025-12-17T10:58:59.581Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: packages/tailwind-config/AGENTS.md:0-0
Timestamp: 2025-12-17T10:58:59.581Z
Learning: Applies to packages/tailwind-config/**/*.{ts,tsx} : Use the rare exception to go one level above for visual separation only in interactive form elements (inputs, buttons, switches) within modals - for example, a modal with `bg-surface-1` can use `bg-layer-2` for form inputs to achieve visual distinction
Applied to files:
apps/web/core/components/issues/issue-detail/parent-select.tsx
📚 Learning: 2025-12-12T15:20:36.519Z
Learnt from: CR
Repo: makeplane/plane PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-12T15:20:36.519Z
Learning: Applies to packages/shared-state/**/*.{ts,tsx} : Maintain MobX stores in `packages/shared-state` using reactive patterns
Applied to files:
apps/web/core/components/issues/issue-detail/sidebar.tsx
🧬 Code graph analysis (3)
apps/web/core/components/issues/issue-detail/sidebar.tsx (1)
packages/i18n/src/store/index.ts (1)
t(222-243)
apps/web/core/components/common/layout/sidebar/property-list-item.tsx (1)
packages/propel/src/icons/icon.tsx (1)
Icon(11-14)
apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (4)
packages/i18n/src/store/index.ts (1)
t(222-243)packages/propel/src/combobox/combobox.tsx (1)
Combobox(230-230)apps/web/core/store/label.store.ts (1)
projectLabels(93-101)packages/ui/src/loader.tsx (1)
Loader(32-32)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Agent
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Build packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (15)
apps/web/core/components/dropdowns/priority.tsx (1)
2-2: LGTM! Unused import removed.The removal of the
useThemeimport fromnext-themesis a good cleanup, as the hook is not used anywhere in this component.apps/web/core/components/issues/issue-detail/label/label-list-item.tsx (1)
38-46: LGTM! Consistent UI refinements.The changes update visual styling for consistency:
- Reduced border radius from
rounded-lgtorounded-smfor tighter visual design- Smaller icon size (
size-3instead ofsize-4) aligns with the compact layoutThese are purely cosmetic improvements with no functional impact.
packages/i18n/src/locales/en/translations.ts (1)
983-983: LGTM! Translation text updated.The change from "Select label" to "Add labels" reflects the updated label management UI and supports multi-label selection workflows.
apps/web/core/components/issues/issue-detail/label/root.tsx (1)
95-95: LGTM! Container layout standardized.The updates to the label container improve layout consistency:
w-fullensures full-width utilizationmin-h-7.5provides predictable minimum height matching other property items- Removal of
px-2suggests padding is now handled by child componentsThese changes align with the broader UI standardization in this PR.
apps/web/core/components/issues/issue-detail/parent-select.tsx (1)
78-79: LGTM! Background variants updated for visual consistency.The change from solid layer backgrounds (
bg-layer-1) to transparent variants (bg-layer-transparent-hoverandbg-layer-transparent-selected) maintains visual lightness while providing appropriate hover and selection feedback.Based on learnings, this approach is preferred for sidebar menu items and interactive elements to maintain a cleaner visual hierarchy.
apps/web/core/components/issues/issue-detail/root.tsx (1)
304-315: LGTM! Layout adjustments for better space utilization.The changes improve the issue detail layout:
- Line 304: Removing
max-w-2/3allows the main content area to use available space more effectively- Line 315: Reducing sidebar width from
md:w-1/3tomd:w-1/4at medium breakpoints provides more room for content while keeping the sidebar accessibleThese adjustments optimize the viewing experience without affecting functionality.
apps/web/core/components/issues/issue-detail/sidebar.tsx (3)
83-84: LGTM! Spacing adjustments for visual balance.The margin tweaks create better visual rhythm:
- Properties heading reduced from
mt-6tomt-5- Content area increased from
mt-3tomt-4These subtle adjustments improve the overall spacing hierarchy.
123-126: LGTM! Priority dropdown styling standardized.The updates create consistent styling across property items:
transparent-with-textvariant maintains visual lightness (previouslyborder-with-text)h-7.5provides predictable height matching other propertiessize-fullutility replaces verbosew-full h-fullfor concisenessThese changes align with the same updates in
peek-overview/properties.tsxfor visual consistency across issue detail views.
238-238: LGTM! Parent select height standardized.The change from
h-fulltoh-7.5provides consistent, predictable sizing that matches other sidebar property items.apps/web/core/components/issues/peek-overview/properties.tsx (3)
117-120: LGTM! Priority dropdown styling matches sidebar.The styling updates mirror those in
sidebar.tsx, ensuring visual consistency between the peek overview and full detail sidebar:
transparent-with-textvariant for lighter visual weighth-7.5for consistent property item heightsize-fullfor concise width and height specification
157-157: LGTM! Due date container now full-width.Adding
w-fullensures the date picker and alert icon utilize the full available width for proper alignment with other property items.
233-233: LGTM! Parent select height standardized.Consistent with the sidebar changes,
h-7.5replacesh-fullto provide predictable sizing across all property items.apps/web/core/components/issues/issue-detail/label/select/label-select.tsx (1)
184-191: Potential issue:value={query}may add raw query string to selection.The "Add label" option uses
value={query}, butonSelectexpects label IDs. If Combobox's selection fires despitee.preventDefault(), the query string could be added tovalues. Consider using a sentinel value (e.g.,value="__create__") and handling it inonChange, or ensure the click handler fully prevents default Combobox behavior.Verify that clicking this option doesn't inadvertently add the query string to the selected values array.
apps/web/core/components/common/layout/sidebar/property-list-item.tsx (2)
17-18: LGTM! Conditional rendering correctly handles both icon types.The implementation correctly distinguishes between function components and React nodes:
- When
Iconis a function component, it renders with controlled sizing (size-4 shrink-0)- When
Iconis a ReactNode, it renders the element directly (consumer provides styling)The layout adjustments (gap, width, height) align with the PR's UI refinement objectives.
5-5: Type-safe icon prop supports both components and nodes.The icon prop type change to
React.FC<{ className?: string }> | React.ReactNodeappropriately widens flexibility while remaining backward compatible—all previous component-only usages remain valid. The implementation correctly handles both rendering modes through typeof-based type narrowing.
| <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}> | ||
| {isLoading ? ( | ||
| <p className="text-center text-secondary">{t("common.loading")}</p> | ||
| ) : filteredOptions.length > 0 ? ( | ||
| filteredOptions.map((option) => ( | ||
| <Combobox.Option | ||
| key={option.value} | ||
| value={option.value} | ||
| className={({ selected }) => | ||
| `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${ | ||
| selected ? "text-primary" : "text-secondary" | ||
| }` | ||
| } | ||
| > | ||
| {({ selected }) => ( | ||
| <> | ||
| {option.content} | ||
| {selected && ( | ||
| <div className="flex-shrink-0"> | ||
| <Check className={`h-3.5 w-3.5`} /> | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| </Combobox.Option> | ||
| )) | ||
| ) : submitting ? ( | ||
| <Loader className="spin h-3.5 w-3.5" /> | ||
| ) : canCreateLabel ? ( | ||
| <Combobox.Option | ||
| value={query} | ||
| onClick={(e) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (!query.length) return; | ||
| handleAddLabel(query); | ||
| }} | ||
| className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`} | ||
| > | ||
| {query.length ? ( | ||
| <> | ||
| {/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to labels | ||
| </> | ||
| ) : ( | ||
| <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p> | ||
| t("label.create.type") | ||
| )} | ||
| </div> | ||
| </div> | ||
| </Combobox.Options> | ||
| </Combobox> | ||
| </> | ||
| </Combobox.Option> | ||
| ) : ( | ||
| <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p> | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
Duplicate code block renders dropdown content twice.
Lines 208-258 duplicate the exact same content from lines 155-206. This renders the options list twice inside Combobox.Options. Remove this entire block.
</div>
</div>
- <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
- {isLoading ? (
- <p className="text-center text-secondary">{t("common.loading")}</p>
- ) : filteredOptions.length > 0 ? (
- filteredOptions.map((option) => (
- <Combobox.Option
- key={option.value}
- value={option.value}
- className={({ selected }) =>
- `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
- selected ? "text-primary" : "text-secondary"
- }`
- }
- >
- {({ selected }) => (
- <>
- {option.content}
- {selected && (
- <div className="flex-shrink-0">
- <Check className={`h-3.5 w-3.5`} />
- </div>
- )}
- </>
- )}
- </Combobox.Option>
- ))
- ) : submitting ? (
- <Loader className="spin h-3.5 w-3.5" />
- ) : canCreateLabel ? (
- <Combobox.Option
- value={query}
- onClick={(e) => {
- e.preventDefault();
- e.stopPropagation();
- if (!query.length) return;
- handleAddLabel(query);
- }}
- className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
- >
- {query.length ? (
- <>
- {/* TODO: Translate here */}+ Add <span className="text-primary">"{query}"</span> to labels
- </>
- ) : (
- t("label.create.type")
- )}
- </Combobox.Option>
- ) : (
- <p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
- )}
- </div>
</Combobox.Options>
</Combobox>Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
around lines 208 to 258, remove the entire duplicated block that renders the
dropdown content (the conditional rendering that produces the options, loader,
create-item option, and no-results message) because it repeats the exact same
code from lines 155-206; keep the original single block (lines 155-206) inside
Combobox.Options so the list is rendered only once, ensure no other JSX
references this removed block, and run the app/tests to confirm no regressions.
aaryan610
changed the title
Description
This PR refactors the UI of the work itemd etails properties pane.
Type of Change
Summary by CodeRabbit
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.