chore: lint unraid ui #1638
chore: lint unraid ui #1638
Conversation
WalkthroughThis PR predominantly reorders Tailwind utility classes across many Vue components. Two minor behavioral adjustments are included: a static “Loading Notifications...” message appears during the loading state in Error.vue, and DialogContent/DialogScrollContent add a fullscreen-aware animation path. No public APIs are changed. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Claude finished @elibosley's task —— View job Code Review AnalysisReviewing the diff/changeset for critical issues only (bugs, security, breaking changes, data loss risks). Todo List:
Review FindingsAfter analyzing the diffs from multiple representative files, the changes are purely CSS class reordering for Tailwind CSS consistency. The changes include:
✅ No critical issues found in changes These are cosmetic formatting changes that maintain identical functionality. No bugs, security issues, breaking changes, or data loss risks were identified in the modified lines. |
|
🚀 Storybook has been deployed to staging: https://unraid-ui-storybook-staging.unraid-workers.workers.dev |
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
![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 (3)
unraid-ui/src/components/ui/select/SelectContent.vue (1)
38-42: Non-standard Tailwind syntax unsupported Replace the parentheses-based arbitrary values with valid bracket syntax (e.g.h-[var(--reka-select-trigger-height)]andmin-w-[var(--reka-select-trigger-width)]) or add a plugin/config that enables the currenth-(…)/min-w-(…)syntax. [unraid-ui/src/components/ui/select/SelectContent.vue:51]unraid-ui/src/components/common/loading/Error.vue (1)
39-42: Don’t hardcode “Loading Notifications…” in a generic loader; expose it via a slot.This component is used broadly; a notification-specific string reduces reusability and could be misleading.
Apply this diff to make the text overridable:
<div v-if="loading" class="contents"> <LoadingSpinner /> - <p>Loading Notifications...</p> + <!-- Optional named slot for loading text --> + <slot name="loading-text" /> </div>(Consumers can provide
<template #loading-text>Loading Notifications...</template>only where appropriate.)unraid-ui/src/forms/SteppedLayout.vue (1)
44-48: Possible lost reactivity by destructuring injected store.
const { core } = jsonformsmay stop tracking ifjsonforms.coreis replaced (common with JSON Forms). Use a ref/toRef so computed values update reliably.[ suggest_essential_refactor ]
Apply this diff and adjust usages:-import { computed, inject, ref, type Ref } from 'vue'; +import { computed, inject, ref, toRef, type Ref } from 'vue'; -const { core } = jsonforms; // Extract core state +const core = toRef(jsonforms, 'core'); // keep reactivity to core replacementThen update reads of
core(outside the changed hunk) tocore.value?.data?.configStep.
🧹 Nitpick comments (15)
unraid-ui/src/forms/HorizontalLayout.vue (1)
27-30: Defensive read of uischema elements (optional).Guard against missing uischema to avoid a runtime error.
- return layout.layout.value.uischema.elements || []; + return layout.layout.value.uischema?.elements ?? [];unraid-ui/src/components/common/loading/Spinner.vue (1)
11-16: Respect prefers-reduced-motion and add ARIA hints (optional).Consider stopping animation for users who prefer reduced motion and expose status to AT.
- 'text-primary inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]', + 'text-primary inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-none',- role="status" + role="status" aria-live="polite" aria-busy="true"unraid-ui/src/components/form/number/NumberFieldDecrement.vue (1)
25-25: Class reordering is fine; verify disabled state matches Reka UI.If RekaNumberFieldDecrement sets
data-disabled(common in headless libs) instead of the nativedisabledattr, the currentdisabled:*utilities won’t apply. Consider supporting both to be safe.Apply this diff if needed:
- 'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20', + 'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20 data-disabled:cursor-not-allowed data-disabled:opacity-20',unraid-ui/src/components/ui/select/SelectItem.vue (1)
26-26: LGTM; class reorder only.No functional changes. Optional: if RTL support is a goal, consider logical paddings (
ps-8 pe-2) instead ofpl-8 pr-2.unraid-ui/src/forms/StringArrayField.vue (1)
44-61: Avoid index as v-for key to prevent input state mis-association on delete.Using the array index as the key can cause inputs to retain the wrong value/focus after removals. Prefer a stable key derived from the item (or introduce ids if duplicates are possible).
Minimal, low-risk improvement:
- <div v-for="(item, index) in items" :key="index" class="flex gap-2"> + <div v-for="(item, index) in items" :key="`${index}:${item}`" class="flex gap-2">If duplicates are common, consider evolving items to
{ id, value }withid: crypto.randomUUID()on add.unraid-ui/src/forms/FormErrors.vue (1)
15-17: Addrole="alert"for better a11y of validation errorsEnsures errors are announced by screen readers as they appear.
Apply:
- <div v-if="normalizedErrors.length > 0" class="mt-2 text-sm text-red-500"> + <div v-if="normalizedErrors.length > 0" class="mt-2 text-sm text-red-500" role="alert">unraid-ui/src/components/form/input/Input.vue (1)
27-27: Confirm nonstandard utility “outline-hidden”.Tailwind’s common token is
outline-none. Ifoutline-hiddenis a custom util, ignore; otherwise, consider aligning.unraid-ui/src/components/form/number/NumberFieldInput.vue (1)
16-16: Optional: dropflexif unused.If no children rely on flex formatting for this input,
flexcan be removed.unraid-ui/src/components/common/stepper/StepperSeparator.vue (1)
23-23: Suggestion: enforce class order via tooling.To avoid churn, ensure eslint-plugin-tailwindcss or Prettier Tailwind sorting is configured consistently across the repo.
unraid-ui/src/components/form/lightswitch/Lightswitch.vue (1)
21-22: Consider using focus-visible for outline suppression.You use
focus:outline-hiddenhere while other files usefocus-visible:outline-hidden. Preferfocus-visibleto avoid hiding outlines for mouse users and to stay consistent.Apply:
- '... focus:ring-offset-2 focus:outline-hidden', + '... focus:ring-offset-2 focus-visible:outline-hidden',unraid-ui/src/components/brand/BrandButton.vue (1)
73-73: Add pointer-events-none to the fill overlay; confirm gradient utility name.
- Prevents accidental hit-testing if stacking/context changes. Also, verify
bg-linear-to-ris intentional (custom alias) vs Tailwind’sbg-gradient-to-r.- class="from-unraid-red to-orange absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 rounded-md bg-linear-to-r opacity-100 transition-all group-hover:!opacity-60 group-focus:!opacity-60" + class="from-unraid-red to-orange pointer-events-none absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 rounded-md bg-linear-to-r opacity-100 transition-all group-hover:!opacity-60 group-focus:!opacity-60"unraid-ui/src/components/form/combobox/ComboboxItem.vue (1)
24-24: Verify non-standard Tailwind token "outline-hidden"Tailwind core exposes outline-none (not outline-hidden). If "outline-hidden" isn’t added via plugin/safelist, this utility will be dropped in production builds.
Apply if unintentional:
- 'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', + 'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',unraid-ui/src/components/ui/accordion/AccordionContent.vue (1)
15-15: Confirm intent: consumer classes apply to inner wrapper, not rootAs written,
props.classaffects the inner div only. If the contract is to allow callers to style the root AccordionContent, shiftprops.classto the root and keep padding on the inner wrapper.Optional change:
- <AccordionContent - v-bind="delegatedProps" - class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all" - > - <div :class="cn('pt-0 pb-4', props.class)"> + <AccordionContent + v-bind="delegatedProps" + :class="cn('data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all', props.class)" + > + <div class="pt-0 pb-4">Also applies to: 17-17
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue (1)
35-35: Optional: respect reduced-motion users for menu animationsConsider guarding animation/transition utilities with motion-safe/motion-reduce variants.
Apply within this line:
-'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md' +'bg-popover text-popover-foreground motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-reduce:transition-none motion-reduce:transform-none z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md'unraid-ui/src/components/form/number/NumberFieldIncrement.vue (1)
25-25: Optional a11y: add an accessible nameIcon-only control may be silent to AT. Provide an aria-label or sr-only text.
Example:
<RekaNumberFieldIncrement aria-label="Increment value" ...> <slot> <span class="sr-only">Increment</span> <Plus class="h-4 w-4" aria-hidden="true" /> </slot> </RekaNumberFieldIncrement>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (64)
unraid-ui/src/components/brand/BrandButton.vue(2 hunks)unraid-ui/src/components/common/dialog/Dialog.vue(1 hunks)unraid-ui/src/components/common/loading/Bar.vue(1 hunks)unraid-ui/src/components/common/loading/Error.vue(2 hunks)unraid-ui/src/components/common/loading/Spinner.vue(1 hunks)unraid-ui/src/components/common/popover/PopoverContent.vue(1 hunks)unraid-ui/src/components/common/scroll-area/ScrollBar.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetContent.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetDescription.vue(1 hunks)unraid-ui/src/components/common/sheet/SheetTitle.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperDescription.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperIndicator.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperSeparator.vue(1 hunks)unraid-ui/src/components/common/stepper/StepperTrigger.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsContent.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsList.vue(1 hunks)unraid-ui/src/components/common/tabs/TabsTrigger.vue(1 hunks)unraid-ui/src/components/common/tooltip/TooltipContent.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxGroup.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxInput.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxItem.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxList.vue(1 hunks)unraid-ui/src/components/form/combobox/ComboboxSeparator.vue(1 hunks)unraid-ui/src/components/form/input/Input.vue(1 hunks)unraid-ui/src/components/form/label/Label.vue(1 hunks)unraid-ui/src/components/form/lightswitch/Lightswitch.vue(1 hunks)unraid-ui/src/components/form/number/NumberField.vue(1 hunks)unraid-ui/src/components/form/number/NumberFieldContent.vue(1 hunks)unraid-ui/src/components/form/number/NumberFieldDecrement.vue(1 hunks)unraid-ui/src/components/form/number/NumberFieldIncrement.vue(1 hunks)unraid-ui/src/components/form/number/NumberFieldInput.vue(1 hunks)unraid-ui/src/components/form/switch/Switch.vue(1 hunks)unraid-ui/src/components/layout/CardWrapper.vue(1 hunks)unraid-ui/src/components/layout/PageContainer.vue(1 hunks)unraid-ui/src/components/layout/SettingsGrid.vue(1 hunks)unraid-ui/src/components/ui/accordion/AccordionContent.vue(1 hunks)unraid-ui/src/components/ui/dialog/DialogContent.vue(2 hunks)unraid-ui/src/components/ui/dialog/DialogDescription.vue(1 hunks)unraid-ui/src/components/ui/dialog/DialogScrollContent.vue(2 hunks)unraid-ui/src/components/ui/dialog/DialogTitle.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue(1 hunks)unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue(1 hunks)unraid-ui/src/components/ui/select/SelectContent.vue(1 hunks)unraid-ui/src/components/ui/select/SelectGroup.vue(1 hunks)unraid-ui/src/components/ui/select/SelectItem.vue(1 hunks)unraid-ui/src/components/ui/select/SelectLabel.vue(1 hunks)unraid-ui/src/components/ui/select/SelectSeparator.vue(1 hunks)unraid-ui/src/components/ui/select/SelectTrigger.vue(1 hunks)unraid-ui/src/forms/AccordionLayout.vue(1 hunks)unraid-ui/src/forms/ComboBoxField.vue(3 hunks)unraid-ui/src/forms/FormErrors.vue(1 hunks)unraid-ui/src/forms/HorizontalLayout.vue(1 hunks)unraid-ui/src/forms/LabelRenderer.vue(1 hunks)unraid-ui/src/forms/MultiSelect.vue(5 hunks)unraid-ui/src/forms/ObjectArrayField.vue(4 hunks)unraid-ui/src/forms/PreconditionsLabel.vue(1 hunks)unraid-ui/src/forms/SteppedLayout.vue(1 hunks)unraid-ui/src/forms/StringArrayField.vue(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/components/**/*.vue
📄 CodeRabbit inference engine (.cursor/rules/web-testing-rules.mdc)
Some Vue files may require explicit imports like ref or computed due to Nuxt auto-imports not applying in tests
Files:
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vueunraid-ui/src/components/form/number/NumberField.vueunraid-ui/src/components/layout/SettingsGrid.vueunraid-ui/src/components/form/lightswitch/Lightswitch.vueunraid-ui/src/components/common/stepper/StepperDescription.vueunraid-ui/src/components/form/number/NumberFieldContent.vueunraid-ui/src/components/common/stepper/StepperTrigger.vueunraid-ui/src/components/layout/PageContainer.vueunraid-ui/src/components/ui/dialog/DialogTitle.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vueunraid-ui/src/components/ui/accordion/AccordionContent.vueunraid-ui/src/components/common/loading/Bar.vueunraid-ui/src/components/ui/dialog/DialogDescription.vueunraid-ui/src/components/common/scroll-area/ScrollBar.vueunraid-ui/src/components/ui/select/SelectSeparator.vueunraid-ui/src/components/common/stepper/StepperIndicator.vueunraid-ui/src/components/ui/select/SelectLabel.vueunraid-ui/src/components/form/combobox/ComboboxSeparator.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vueunraid-ui/src/components/common/tabs/TabsList.vueunraid-ui/src/components/common/stepper/StepperSeparator.vueunraid-ui/src/components/common/loading/Spinner.vueunraid-ui/src/components/form/number/NumberFieldDecrement.vueunraid-ui/src/components/common/sheet/SheetTitle.vueunraid-ui/src/components/common/sheet/SheetContent.vueunraid-ui/src/components/ui/select/SelectItem.vueunraid-ui/src/components/form/number/NumberFieldIncrement.vueunraid-ui/src/components/common/loading/Error.vueunraid-ui/src/components/ui/select/SelectGroup.vueunraid-ui/src/components/common/sheet/SheetDescription.vueunraid-ui/src/components/common/tabs/TabsContent.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vueunraid-ui/src/components/form/combobox/ComboboxItem.vueunraid-ui/src/components/common/dialog/Dialog.vueunraid-ui/src/components/form/label/Label.vueunraid-ui/src/components/common/tooltip/TooltipContent.vueunraid-ui/src/components/common/tabs/TabsTrigger.vueunraid-ui/src/components/brand/BrandButton.vueunraid-ui/src/components/form/switch/Switch.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vueunraid-ui/src/components/ui/dialog/DialogContent.vueunraid-ui/src/components/ui/select/SelectTrigger.vueunraid-ui/src/components/common/popover/PopoverContent.vueunraid-ui/src/components/form/combobox/ComboboxInput.vueunraid-ui/src/components/layout/CardWrapper.vueunraid-ui/src/components/ui/select/SelectContent.vueunraid-ui/src/components/ui/dialog/DialogScrollContent.vueunraid-ui/src/components/form/input/Input.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vueunraid-ui/src/components/form/number/NumberFieldInput.vueunraid-ui/src/components/form/combobox/ComboboxList.vueunraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vueunraid-ui/src/components/form/combobox/ComboboxGroup.vue
🧠 Learnings (6)
📚 Learning: 2025-02-21T18:59:47.977Z
Learnt from: mdatelle
PR: unraid/api#1183
File: web/components/Modal.vue:120-120
Timestamp: 2025-02-21T18:59:47.977Z
Learning: In the Modal.vue component, the modal's width is controlled through the `maxWidth` prop (defaults to 'sm:max-w-lg'). The parent containers with `w-screen` and `w-full` classes ensure proper width behavior, making additional width classes on the inner modal content div redundant.
Applied to files:
unraid-ui/src/components/layout/PageContainer.vue
📚 Learning: 2024-12-06T17:38:40.999Z
Learnt from: elibosley
PR: unraid/api#974
File: web/components/Loading/Error.vue:1-3
Timestamp: 2024-12-06T17:38:40.999Z
Learning: In Nuxt.js projects, components are automatically imported, so explicit import statements for components like `LoadingSpinner` in `web/components/Loading/Error.vue` are not necessary.
Applied to files:
unraid-ui/src/components/common/loading/Spinner.vueunraid-ui/src/components/common/loading/Error.vue
📚 Learning: 2024-11-01T17:52:55.311Z
Learnt from: pujitm
PR: unraid/api#941
File: web/components/Notifications/Item.vue:0-0
Timestamp: 2024-11-01T17:52:55.311Z
Learning: In the `web/components/Notifications/Item.vue` component, ensure that when delete or archive mutations fail, the notification remains displayed, and an error message is shown below the action buttons to inform the user.
Applied to files:
unraid-ui/src/components/common/loading/Error.vue
📚 Learning: 2024-12-06T17:34:16.133Z
Learnt from: pujitm
PR: unraid/api#974
File: web/components/Loading/Error.vue:50-50
Timestamp: 2024-12-06T17:34:16.133Z
Learning: In this project, the `Button` component from `~/components/shadcn/Button.vue` is autoloaded and does not need to be imported manually in components like `web/components/Loading/Error.vue`.
Applied to files:
unraid-ui/src/components/common/loading/Error.vue
📚 Learning: 2025-02-06T17:24:58.784Z
Learnt from: mdatelle
PR: unraid/api#1122
File: web/components/UserProfile/DropdownLaunchpad.vue:38-42
Timestamp: 2025-02-06T17:24:58.784Z
Learning: In the DropdownLaunchpad.vue component, the current implementation of conditional icon rendering using `h(BrandLoading, { variant: 'white' })` is a temporary fix to maintain build stability, with a proper refactoring being handled in a separate branch.
Applied to files:
unraid-ui/src/components/brand/BrandButton.vue
📚 Learning: 2025-02-18T18:38:24.981Z
Learnt from: zackspear
PR: unraid/api#1143
File: web/pages/webComponents.vue:28-29
Timestamp: 2025-02-18T18:38:24.981Z
Learning: In Vue components, when there's a repeating pattern of heading + content + divider, prefer using a wrapper component that takes the heading as a prop and content via slots, rather than duplicating the structure. This improves maintainability and reduces code duplication.
Applied to files:
unraid-ui/src/components/form/combobox/ComboboxGroup.vue
🔇 Additional comments (71)
unraid-ui/src/forms/HorizontalLayout.vue (1)
34-34: LGTM — class order only.No behavior change; utilities remain identical.
unraid-ui/src/components/common/sheet/SheetDescription.vue (1)
16-16: LGTM — class reorder is safe.Purely presentational; keeps override-friendly base + props.class order.
unraid-ui/src/components/common/stepper/StepperDescription.vue (1)
22-22: LGTM — class reorder only.No functional impact; keeps base styles before consumer overrides.
unraid-ui/src/components/common/tabs/TabsTrigger.vue (1)
22-22: LGTM — standardized utility order.No behavior change; ring and active-state utilities unaffected by order.
unraid-ui/src/components/ui/select/SelectGroup.vue (1)
13-13: LGTM on Tailwind order tweak.Purely cosmetic reorder; no behavioral changes.
unraid-ui/src/forms/LabelRenderer.vue (1)
77-77: LGTM on wrapper class order change.No impact beyond readability/consistency.
unraid-ui/src/components/common/loading/Bar.vue (1)
8-8: LGTM; cosmetic Tailwind reorder.ARIA usage unchanged and appropriate for an indeterminate skeleton.
unraid-ui/src/components/form/number/NumberFieldContent.vue (1)
15-17: LGTM: class-order normalization only.Reordering the decrement/increment padding variants is a no-op; selectors don’t conflict. No behavioral impact.
unraid-ui/src/components/ui/dialog/DialogTitle.vue (1)
17-17: LGTM: non-functional Tailwind token reorder.Props forwarding and reactivity remain intact.
unraid-ui/src/components/common/sheet/SheetTitle.vue (1)
16-16: LGTM: reordered utility classes.Explicit import of
computedsatisfies the tests/auto-import guideline.unraid-ui/src/components/common/dialog/Dialog.vue (1)
86-87: LGTM: fullscreen class string reorder preserves intent.
max-w-nonestill comes aftersizeClasses.fullin thecn(...)call, so it continues to overridemax-w-fullwhensize === 'full'. No change in runtime behavior.unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue (1)
11-11: LGTM: trigger class order reshuffle.No API/behavioral change.
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue (1)
17-17: LGTM: purely presentational reorder.Class order change is no-op; cn usage and delegated props remain correct and consistent with SelectSeparator.
unraid-ui/src/components/layout/SettingsGrid.vue (1)
13-16: LGTM: Tailwind class reorder only.No functional impact; layout utilities and selector group remain intact.
unraid-ui/src/forms/StringArrayField.vue (1)
65-65: LGTM: class order nit only.No behavioral change to the Add Item button.
unraid-ui/src/components/ui/select/SelectSeparator.vue (1)
13-14: LGTM: presentational-only class reorder.Delegation and cn merge stay unchanged; matches DropdownMenuSeparator.
unraid-ui/src/components/ui/select/SelectLabel.vue (1)
10-12: LGTM: class token swap only.No impact on layout or accessibility; slot structure unchanged.
unraid-ui/src/components/common/stepper/StepperTrigger.vue (1)
23-25: LGTM — class reorder onlyNo conflicting utilities introduced; behavior unchanged.
unraid-ui/src/components/layout/PageContainer.vue (1)
13-15: LGTM — class reorder onlyContainer sizing via
w-full+:class="maxWidth"remains intact.unraid-ui/src/components/common/tabs/TabsList.vue (1)
20-22: LGTM — class reorder onlyNo semantic or accessibility impact from the change.
unraid-ui/src/components/form/label/Label.vue (1)
20-22: LGTM — class reorder onlyNo behavior change; props forwarding unaffected.
unraid-ui/src/components/form/input/Input.vue (1)
27-27: LGTM — class reordering only.No logic or API changes; utility set remains equivalent.
unraid-ui/src/components/form/number/NumberFieldInput.vue (1)
16-16: LGTM — cosmetic reorder.Classes and variants preserved; no behavioral change.
unraid-ui/src/components/form/combobox/ComboboxSeparator.vue (1)
17-17: LGTM — order-only change.No risk; props forwarding and slot intact.
unraid-ui/src/components/common/stepper/StepperSeparator.vue (1)
23-23: LGTM — order-only change with variants preserved.
group-data-*variants are unchanged; visual behavior remains consistent.unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue (1)
25-25: LGTM — animation/layout tokens reordered.Same utilities retained; no side-effects expected.
unraid-ui/src/components/common/popover/PopoverContent.vue (1)
38-39: Safe to reorder—cn uses twMerge for Tailwind class merging.unraid-ui/src/components/ui/dialog/DialogDescription.vue (1)
15-15: LGTM — purely cosmetic order change.No behavior change; explicit imports present (good for tests without Nuxt auto-imports).
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue (1)
20-21: LGTM — class order shuffle only.No functional differences; explicit imports are correct.
unraid-ui/src/components/common/stepper/StepperIndicator.vue (1)
23-31: LGTM — order-only change.No behavior change; states and slots unaffected.
unraid-ui/src/components/form/switch/Switch.vue (2)
30-31: LGTM: class reordering is non-functional.No conflicting utilities; merging via
cnremains safe.
38-39: LGTM: thumb classes unchanged functionally.Order swap does not affect behavior.
unraid-ui/src/components/form/combobox/ComboboxInput.vue (1)
33-34: LGTM: reorder only.No precedence conflicts; same utility set.
unraid-ui/src/components/form/combobox/ComboboxList.vue (1)
36-41: Removeoutline-hiddenavailability check — it’s a built-in Tailwind CSS v4 utility.
No custom definition or plugin is required; continue usingoutline-hiddenas intended.Likely an incorrect or invalid review comment.
unraid-ui/src/forms/ComboBoxField.vue (3)
93-94: LGTM: cosmetic reorder.No behavioral change.
102-103: LGTM; ensureoutline-hiddenexists.Same note as elsewhere; otherwise swap to
outline-none.
116-117: LGTM; consistency with the above item.Mirrors the same class set/order.
unraid-ui/src/components/brand/BrandButton.vue (2)
80-83: LGTM — outline gradient block reorder is non-functional.
100-103: LGTM — iconRight hover/focus reveal unchanged; order-only.unraid-ui/src/components/common/sheet/SheetContent.vue (3)
49-50: LGTM — overlay classes reordered; behavior intact.
55-55: LGTM — close button class order only.
56-56: LGTM — icon classes reorder only.unraid-ui/src/forms/PreconditionsLabel.vue (1)
35-36: LGTM — purely class order changes.unraid-ui/src/components/common/scroll-area/ScrollBar.vue (2)
26-31: LGTM — scrollbar container class order change only.
33-33: LGTM — thumb classes reordered; no functional impact.unraid-ui/src/components/common/tabs/TabsContent.vue (1)
19-21: LGTM — TabsContent class list reordered; semantics unchanged.unraid-ui/src/forms/AccordionLayout.vue (1)
8-8: Order-only Tailwind changes look goodUtility reordering preserves the same set of classes; no behavior change expected.
Also applies to: 10-10, 15-15, 20-20
unraid-ui/src/components/form/combobox/ComboboxGroup.vue (1)
26-26: LGTM on class reorderingNo functional differences; descendant selector tokens remain intact.
Also applies to: 31-31
unraid-ui/src/components/ui/dialog/DialogScrollContent.vue (1)
35-35: Dialog class reordering: OKOverlay/content/close-button class moves are cosmetic; behavior and a11y remain unchanged.
Also applies to: 40-41, 63-65
unraid-ui/src/components/common/loading/Error.vue (2)
37-37: Class reordering is fine.
46-46: Icon class reordering is fine.unraid-ui/src/forms/SteppedLayout.vue (2)
145-145: Class reordering on StepperDescription is fine.
150-151: Class reordering on StepperSeparator is fine.unraid-ui/src/components/ui/select/SelectTrigger.vue (2)
20-21: Root class reordering is fine.
27-27: Icon class reordering is fine.unraid-ui/src/components/common/tooltip/TooltipContent.vue (1)
41-41: Tooltip class reordering is fine.unraid-ui/src/components/layout/CardWrapper.vue (2)
22-22: Root class reordering is fine.
27-29: Variant class reordering is fine.unraid-ui/src/components/ui/dialog/DialogContent.vue (2)
36-36: LGTM on class reordering and icon sizing.Overlay/close button class reorders are safe; no behavioral impact.
Also applies to: 57-60
42-49: No object/array class bindings found on DialogContent; fullscreen detection change isn’t required.Likely an incorrect or invalid review comment.
unraid-ui/src/forms/ObjectArrayField.vue (1)
171-171: LGTM: stylistic Tailwind reordering only.No logic changes. Visuals and interactions remain intact.
Also applies to: 199-201, 209-209, 217-224, 243-247
unraid-ui/src/forms/MultiSelect.vue (1)
103-103: LGTM: class-order tweaks only.All adjustments are presentational; selection behavior unchanged.
Also applies to: 122-122, 143-143, 175-176, 182-182, 206-206, 214-214
unraid-ui/src/components/form/number/NumberField.vue (1)
23-23: LGTM: non-functional class order change.No impact on layout or behavior.
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue (1)
28-28: LGTM: ordering of utilities only.Focus/spacing semantics preserved; no API or behavior change.
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue (1)
35-35: LGTM: class reordering onlyUtility order change is non-functional; tokens unchanged. Safe.
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue (3)
27-27: LGTM: reordered utilitiesFocus and spacing utilities reordered only; no behavior change.
34-34: LGTM: icon size class swap is a no-opSwapping h-4 and w-4 order doesn’t affect rendering.
27-27: Remove utility check—outline-hiddenis a built-in Tailwind CSS v4 class, no custom plugin required.unraid-ui/src/components/form/number/NumberFieldIncrement.vue (1)
25-25: LGTM: class order change onlyNo functional/visual change expected; explicit computed import satisfies test env guideline.
unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue (2)
21-21: LGTM: utility sortReordering only; tokens unchanged. Safe.
21-21: Confirm Tailwind’s customoutline-hiddenutility is available
No localtailwind.config.*found—ensureoutline-hiddenis defined in your Tailwind config or plugin (e.g., at the monorepo root).
| :class=" | ||
| cn( | ||
| 'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0', | ||
| 'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Prevent leaking the local inset prop to the underlying Reka component
Currently inset is forwarded via v-bind and may render as an unknown DOM attribute. Omit it from forwarded props.
Outside this line, update the setup block:
// in <script setup>
const delegatedProps = reactiveOmit(props, 'class', 'inset');🤖 Prompt for AI Agents
In unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue around line
21, the local prop "inset" is being forwarded to the underlying Reka component
and may become an unknown DOM attribute; omit it from forwarded props by
creating a delegatedProps reactive object that excludes 'class' and 'inset'
(e.g., use reactiveOmit(props, 'class', 'inset')) in the <script setup> and use
that delegatedProps for v-bind on the Reka component so "inset" is not passed
through.
Summary by CodeRabbit
New Features
UX
Style