docs(site): add ui-next component documentation and upgrade Docusaurus#6102
Open
dan-rukas wants to merge 46 commits into
Open
docs(site): add ui-next component documentation and upgrade Docusaurus#6102dan-rukas wants to merge 46 commits into
dan-rukas wants to merge 46 commits into
Conversation
The explicit hook call crashes in Docusaurus 3.10 when sidebar context is missing. DocCardList without props auto-detects its items internally.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Regenerate pnpm-lock.yaml under pnpm 11.5.2 to reconcile the workspace after merging master into docs-ui-next. Remove the no-op "resolutions" field from platform/docs/package.json
Use useLocation() instead of window.location.pathname in ComponentLayout SSR-safe and reactive to client-side navigation.
offsetTop is relative to the nearest positioned ancestor, not the document — drifts when layout uses sticky/fixed. Also throttles the scroll handler with requestAnimationFrame.
- CodeBlock: add clipboard fallback for insecure origins, timer cleanup, and aria-label on copy button - InteractivePicker: add tablist/tab/tabpanel roles and aria-selected - DataRow: add missing required description prop to props table - Toast: split into separate toast() options and Toaster props sections - colors-and-theming: fix default --background to 0 0% 0% (pure black)
✅ Deploy Preview for ohif-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughUpgrades Docusaurus to 3.10.1, adds ChangesComponent Documentation System and Infrastructure
Migration Guide DocCardList and Link Fixes
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 17
🧹 Nitpick comments (2)
platform/docs/src/pages/components/_layout/InteractivePicker.tsx (1)
25-47: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winComplete the tabs ARIA pattern (or remove tab roles).
This currently applies tab roles without the required relationships/focus behavior (
id↔aria-controls,aria-labelledby, activetabIndexmanagement). Please either fully implement the tabs pattern or keep semantic buttons without tab roles.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@platform/docs/src/pages/components/_layout/InteractivePicker.tsx` around lines 25 - 47, The InteractivePicker component applies ARIA tab roles without fully implementing the required tabs pattern. Either complete the implementation by adding: unique id attributes to each tab button, aria-controls on buttons pointing to the tabpanel element, aria-labelledby on the tabpanel referencing the active tab's id, and managing tabIndex values on the tab buttons (0 for active, -1 for inactive) to enable proper keyboard navigation; OR remove all tab-related role attributes (role="tablist" on the parent div, role="tab" on each button, and role="tabpanel" on the panel div) and keep them as standard semantic buttons without the ARIA tab pattern.platform/docs/src/pages/colors-and-theming.tsx (1)
981-984: 🚀 Performance & Scalability | 🔵 TrivialRemove the
BrowserOnlywrapper; the page is server-renderable.
BrowserOnlywith an empty fallback prevents static rendering of the entire page. However, the layout components (ComponentLayout,PageHeader,Section) contain no browser globals, and all browser API calls (clipboard copy, scroll tracking) are properly isolated in event handlers anduseEffecthooks, which don't execute during SSR. The page can be statically rendered and will work correctly once hydrated.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@platform/docs/src/pages/colors-and-theming.tsx` around lines 981 - 984, The ThemingPage function currently wraps ThemingPageContent with the BrowserOnly component and an empty fallback, which prevents static rendering of the page. Since all browser API calls are properly isolated in event handlers and useEffect hooks within the layout components, the page is safe to render on the server. Remove the BrowserOnly wrapper and return ThemingPageContent directly instead to enable static rendering while maintaining correct behavior after hydration.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@platform/docs/src/css/custom.css`:
- Line 222: The font-family declarations containing 'Inter' have unnecessary
quotes around the font name, which violates the Stylelint
font-family-name-quotes rule. Remove the single quotes around Inter in both
font-family declarations (at line 222 and line 607) so that the font name
appears unquoted while keeping the comma and sans-serif fallback intact. This
applies to both instances where font-family is set to 'Inter', sans-serif.
- Around line 606-634: The current CSS reset selector targets all direct body
children except for Docusaurus, script, style, and link elements, which is too
broad and causes unrelated portals or injected UI to lose their styles. Narrow
this reset by adding a marker class to the portal container or content element
used by the component demos, and then update all the selectors (the one using
:where(body > :not(`#__docusaurus`)...), the wildcard selectors, and the form
element selector) to target only elements with that marker class instead of all
direct body children. This way the reset will only apply to showcase-owned
portals.
In `@platform/docs/src/pages/colors-and-theming.tsx`:
- Around line 267-274: The "Copy Theme" link label is not unique across all
theme rows, making it difficult for assistive technology users to distinguish
between identical actions. Modify the text content displayed in the link
(currently showing "Copy Theme" or "Copied!") to include the theme name
alongside the action label so each button has a descriptive and unique
accessible name that screen readers can properly announce.
- Around line 215-218: The grid with fixed gridTemplateColumns of '24px 200px
1fr' will overflow on narrow mobile viewports. Modify the grid container div to
use responsive column definitions that collapse to a single or two-column layout
on mobile devices, and reserve the current three-column layout only for larger
screens using md: breakpoint variants. Additionally, consider wrapping the grid
in overflow-x-auto or adjusting the grid template to use smaller flexible
columns that adapt to the viewport width instead of the fixed 200px token
column.
- Around line 354-372: The Accordion component needs to expose its expanded
state to screen readers for better accessibility. Add the aria-expanded
attribute to the button element, setting it to the open state variable to
indicate whether the accordion is expanded or collapsed. Additionally, create a
stable panel id by combining the component's id prop with a suffix (such as
"panel"), add this id to the content div that displays when open is true, and
add the aria-controls attribute to the button element to reference this panel id
so assistive technologies can associate the button with the content it controls.
In `@platform/docs/src/pages/components/_layout/CodeBlock.tsx`:
- Around line 8-10: The component has a memory leak where the setTimeout at line
26 continues running after unmount, causing setCopied to update state on an
unmounted component. To fix this, import useEffect from React at the top of the
file, then add a useEffect hook that returns a cleanup function. In the cleanup
function, check if timerRef.current exists and clear it using
clearTimeout(timerRef.current). This ensures that whenever the component
unmounts or the effect re-runs, any pending timeout is properly cancelled before
setCopied attempts to run.
In `@platform/docs/src/pages/components/_layout/ComponentLayout.tsx`:
- Around line 76-79: The active-link comparison at lines 76–79 uses currentPath
directly from useLocation().pathname without accounting for Docusaurus baseUrl
normalization. When a non-root baseUrl is configured, pathname includes the
baseUrl prefix while item.href values do not, causing the comparison to fail.
Fix this by normalizing currentPath by removing the baseUrl prefix before
comparing it to item.href. Use the useBaseUrl hook to retrieve the baseUrl
value, then strip it from currentPath before performing the equality checks
against item.href and item.href + '/'.
In `@platform/docs/src/pages/components/data-row.tsx`:
- Line 19: The selectedId state initialized with useState on line 19 is inferred
as type string, but the code later sets it to null for row deselection (line
164), causing a TypeScript type error. Update the useState hook to explicitly
specify the state type as string or null by adding a generic type parameter to
useState that accepts both string and null values, ensuring the type annotation
matches the actual usage where selectedId can be either a string ID or null.
In `@platform/docs/src/pages/components/dropdown-menu.tsx`:
- Around line 162-171: The code snippet in the dropdown-menu documentation is
missing the Button import in the import statement block. The example shows usage
of Button component in the DropdownMenuTrigger but the import block only
includes DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
DropdownMenuItem, and DropdownMenuSeparator. Add Button to the import list from
'`@ohif/ui-next`' so that users can successfully copy-paste and run the example
without errors.
In `@platform/docs/src/pages/components/hover-card.tsx`:
- Around line 220-247: The code example in the hover-card.tsx file is missing
imports for components that are used in the snippet. Add Button, Icons, and
CardDescription to the import statement at the beginning of the code block. The
Button component is used in the HoverCardTrigger elements, the Icons component
is used for the CloudSettings icon, and CardDescription is used in the
CardHeader. Update the import block to include these missing imports from the
'`@ohif/ui-next`' package alongside the existing HoverCard, HoverCardTrigger,
HoverCardContent, Card, CardHeader, CardTitle, and CardContent imports.
In `@platform/docs/src/pages/components/icons.tsx`:
- Around line 241-246: The clear-search button that clears the search query when
clicked lacks an aria-label attribute, making it inaccessible for users relying
on screen readers. Add an aria-label attribute to the button element (the one
with onClick={() => setSearchQuery('')}) with a descriptive value like "Clear
search" to provide an accessible name that assistive technology users can
understand.
- Around line 164-168: The handleCopyIcon function calls
navigator.clipboard.writeText without error handling or fallback, which can
cause unhandled promise rejections if the Clipboard API is unavailable or fails.
Wrap the clipboard operation in a try-catch block and implement a fallback
mechanism (such as the one already used in the CodeBlock.tsx file) to handle
cases where the modern Clipboard API is not supported or throws an error,
ensuring the copy functionality degrades gracefully.
In `@platform/docs/src/pages/components/label.tsx`:
- Around line 77-80: The code snippet includes an import statement that only
imports Label from '`@ohif/ui-next`', but the example usage below includes an
Input component on line 80 which is not imported. Update the import statement to
include both Label and Input components, so the complete import reads something
like importing both Label and Input from '`@ohif/ui-next`' to make the usage
example valid and complete.
In `@platform/docs/src/pages/components/popover.tsx`:
- Around line 120-129: The code snippet shows an import statement that includes
Popover, PopoverTrigger, and PopoverContent, but the example usage includes a
Button component that is not imported. Add Button to the import destructuring
statement on line 120 so that the copied example will work correctly without
missing dependencies.
In `@platform/docs/src/pages/components/select.tsx`:
- Around line 71-77: In the "With label" example block, the Label and
SelectTrigger components are not properly associated for accessibility. Add an
htmlFor attribute to the Label component with a unique identifier value, and add
a matching id attribute to the SelectTrigger component. This creates a proper
semantic association between the label and the select trigger, improving
accessibility for users relying on screen readers.
In `@platform/docs/src/pages/components/smart-scrollbar.tsx`:
- Around line 181-183: The handleWheel function does not guard against cases
where deltaY equals zero, causing unintended index decrements. Add an early
return check at the beginning of the handleWheel callback to exit immediately if
deltaY is 0, preventing the index from being modified when there is no wheel
movement.
In `@platform/docs/src/pages/components/tooltip.tsx`:
- Around line 119-127: The import statement for Tooltip, TooltipTrigger,
TooltipContent, and TooltipProvider from '`@ohif/ui-next`' is missing the Button
import that is used in the code example. Add Button to the destructured imports
in the import statement from '`@ohif/ui-next`' so that the Button component is
available when used in the example code.
---
Nitpick comments:
In `@platform/docs/src/pages/colors-and-theming.tsx`:
- Around line 981-984: The ThemingPage function currently wraps
ThemingPageContent with the BrowserOnly component and an empty fallback, which
prevents static rendering of the page. Since all browser API calls are properly
isolated in event handlers and useEffect hooks within the layout components, the
page is safe to render on the server. Remove the BrowserOnly wrapper and return
ThemingPageContent directly instead to enable static rendering while maintaining
correct behavior after hydration.
In `@platform/docs/src/pages/components/_layout/InteractivePicker.tsx`:
- Around line 25-47: The InteractivePicker component applies ARIA tab roles
without fully implementing the required tabs pattern. Either complete the
implementation by adding: unique id attributes to each tab button, aria-controls
on buttons pointing to the tabpanel element, aria-labelledby on the tabpanel
referencing the active tab's id, and managing tabIndex values on the tab buttons
(0 for active, -1 for inactive) to enable proper keyboard navigation; OR remove
all tab-related role attributes (role="tablist" on the parent div, role="tab" on
each button, and role="tabpanel" on the panel div) and keep them as standard
semantic buttons without the ARIA tab pattern.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9dcb9a57-70d8-4cee-ab9f-6afcd26995e8
⛔ Files ignored due to path filters (7)
platform/docs/static/img/theming-color-roles.pngis excluded by!**/*.pngplatform/docs/static/img/theming-dialog-01-select-theme.pngis excluded by!**/*.pngplatform/docs/static/img/theming-dialog-02-default.pngis excluded by!**/*.pngplatform/docs/static/img/theming-dialog-03-custom.pngis excluded by!**/*.pngplatform/docs/static/img/theming-layers.pngis excluded by!**/*.pngplatform/docs/static/img/theming-themes.pngis excluded by!**/*.pngpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (86)
platform/docs/docs/migration-guide/3p10-to-3p11/index.mdplatform/docs/docs/migration-guide/3p12-to-3p13/index.mdplatform/docs/docs/migration-guide/3p8-to-3p9/1-segmentation/index.mdplatform/docs/docs/migration-guide/3p8-to-3p9/index.mdplatform/docs/docs/migration-guide/3p9-to-3p10/3-UI/1a-Colors.mdplatform/docs/docs/migration-guide/3p9-to-3p10/3-UI/3-Migration-3p10-Input.mdplatform/docs/docs/migration-guide/index.mdplatform/docs/docusaurus.config.jsplatform/docs/package.jsonplatform/docs/src/css/custom.cssplatform/docs/src/pages/colors-and-theming.tsxplatform/docs/src/pages/colors-and-type.tsxplatform/docs/src/pages/components-list.tsxplatform/docs/src/pages/components.tsxplatform/docs/src/pages/components/AllinOneMenuShowcase.tsxplatform/docs/src/pages/components/ButtonShowcase.tsxplatform/docs/src/pages/components/CheckboxShowcase.tsxplatform/docs/src/pages/components/CinePlayerShowcase.tsxplatform/docs/src/pages/components/ComboboxShowcase.tsxplatform/docs/src/pages/components/DataRowShowcase.tsxplatform/docs/src/pages/components/DialogShowcase.tsxplatform/docs/src/pages/components/DropdownMenuShowcase.tsxplatform/docs/src/pages/components/HoverCardShowcase.tsxplatform/docs/src/pages/components/InputShowcase.tsxplatform/docs/src/pages/components/LabelShowcase.tsxplatform/docs/src/pages/components/NumericMetaShowcase.tsxplatform/docs/src/pages/components/PanelSectionShowcase.tsxplatform/docs/src/pages/components/PopoverShowcase.tsxplatform/docs/src/pages/components/ScrollAreaShowcase.tsxplatform/docs/src/pages/components/SelectShowcase.tsxplatform/docs/src/pages/components/ShowcaseRow.tsxplatform/docs/src/pages/components/SliderShowcase.tsxplatform/docs/src/pages/components/SwitchShowcase.tsxplatform/docs/src/pages/components/TabsShowcase.tsxplatform/docs/src/pages/components/ToastShowcase.tsxplatform/docs/src/pages/components/ToolButtonListShowcase.tsxplatform/docs/src/pages/components/ToolButtonShowcase.tsxplatform/docs/src/pages/components/TooltipShowcase.tsxplatform/docs/src/pages/components/_layout/CodeBlock.tsxplatform/docs/src/pages/components/_layout/ComponentLayout.tsxplatform/docs/src/pages/components/_layout/ExampleBlock.tsxplatform/docs/src/pages/components/_layout/InteractivePicker.tsxplatform/docs/src/pages/components/_layout/PageHeader.tsxplatform/docs/src/pages/components/_layout/PropsTable.tsxplatform/docs/src/pages/components/_layout/Section.tsxplatform/docs/src/pages/components/_layout/TableOfContents.tsxplatform/docs/src/pages/components/_layout/sidebar-config.tsplatform/docs/src/pages/components/all-in-one-menu.tsxplatform/docs/src/pages/components/button.tsxplatform/docs/src/pages/components/checkbox.tsxplatform/docs/src/pages/components/cine-player.tsxplatform/docs/src/pages/components/combobox.tsxplatform/docs/src/pages/components/data-row.tsxplatform/docs/src/pages/components/dialog.tsxplatform/docs/src/pages/components/dropdown-menu.tsxplatform/docs/src/pages/components/hover-card.tsxplatform/docs/src/pages/components/icons.tsxplatform/docs/src/pages/components/index.tsxplatform/docs/src/pages/components/input.tsxplatform/docs/src/pages/components/label.tsxplatform/docs/src/pages/components/numeric.tsxplatform/docs/src/pages/components/panel-section.tsxplatform/docs/src/pages/components/popover.tsxplatform/docs/src/pages/components/scroll-area.tsxplatform/docs/src/pages/components/select.tsxplatform/docs/src/pages/components/slider.tsxplatform/docs/src/pages/components/smart-scrollbar.tsxplatform/docs/src/pages/components/switch-toggle.tsxplatform/docs/src/pages/components/tabs.tsxplatform/docs/src/pages/components/toast.tsxplatform/docs/src/pages/components/tool-button-list.tsxplatform/docs/src/pages/components/tool-button.tsxplatform/docs/src/pages/components/tooltip.tsxplatform/docs/src/pages/patterns.tsxplatform/docs/src/pages/patterns/DataRowExample.tsxplatform/docs/src/pages/patterns/index.tsxplatform/docs/src/pages/patterns/patterns-measurements.tsxplatform/docs/src/pages/patterns/patterns-segmentation.tsxplatform/docs/src/pages/patterns/patterns-split-panel.tsxplatform/docs/src/pages/patterns/patterns-tmtv.tsxplatform/docs/tailwind.config.jsplatform/docs/versioned_docs/version-3.11/migration-guide/3p8-to-3p9/1-segmentation/index.mdplatform/docs/versioned_docs/version-3.11/migration-guide/3p8-to-3p9/index.mdplatform/docs/versioned_docs/version-3.11/migration-guide/3p9-to-3p10/3-UI/1a-Colors.mdplatform/docs/versioned_docs/version-3.11/migration-guide/3p9-to-3p10/3-UI/3-Migration-3p10-Input.mdplatform/docs/versioned_docs/version-3.11/migration-guide/index.md
💤 Files with no reviewable changes (34)
- platform/docs/src/pages/components/ToolButtonShowcase.tsx
- platform/docs/src/pages/patterns/patterns-measurements.tsx
- platform/docs/src/pages/components/SwitchShowcase.tsx
- platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
- platform/docs/src/pages/components/SliderShowcase.tsx
- platform/docs/src/pages/components/ScrollAreaShowcase.tsx
- platform/docs/src/pages/components/SelectShowcase.tsx
- platform/docs/src/pages/components/TooltipShowcase.tsx
- platform/docs/src/pages/components/CheckboxShowcase.tsx
- platform/docs/src/pages/patterns/DataRowExample.tsx
- platform/docs/src/pages/components/InputShowcase.tsx
- platform/docs/src/pages/components/PanelSectionShowcase.tsx
- platform/docs/src/pages/patterns/index.tsx
- platform/docs/src/pages/components/DataRowShowcase.tsx
- platform/docs/src/pages/components/ComboboxShowcase.tsx
- platform/docs/src/pages/colors-and-type.tsx
- platform/docs/src/pages/components/PopoverShowcase.tsx
- platform/docs/src/pages/components/ShowcaseRow.tsx
- platform/docs/src/pages/components/HoverCardShowcase.tsx
- platform/docs/src/pages/components/ButtonShowcase.tsx
- platform/docs/src/pages/components-list.tsx
- platform/docs/src/pages/components/TabsShowcase.tsx
- platform/docs/src/pages/patterns/patterns-split-panel.tsx
- platform/docs/src/pages/components/DialogShowcase.tsx
- platform/docs/src/pages/components/DropdownMenuShowcase.tsx
- platform/docs/src/pages/components/ToastShowcase.tsx
- platform/docs/src/pages/patterns/patterns-tmtv.tsx
- platform/docs/src/pages/patterns.tsx
- platform/docs/src/pages/components/CinePlayerShowcase.tsx
- platform/docs/src/pages/components.tsx
- platform/docs/src/pages/patterns/patterns-segmentation.tsx
- platform/docs/src/pages/components/ToolButtonListShowcase.tsx
- platform/docs/src/pages/components/NumericMetaShowcase.tsx
- platform/docs/src/pages/components/LabelShowcase.tsx
| .theme-doc-markdown h5 { | ||
| color: var(--ifm-color-primary); | ||
| font-weight: 400; | ||
| font-family: 'Inter', sans-serif; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove the quotes around Inter to satisfy Stylelint.
Both changed declarations trip font-family-name-quotes; use Inter, sans-serif.
Proposed fix
- font-family: 'Inter', sans-serif;
+ font-family: Inter, sans-serif;- font-family: 'Inter', sans-serif;
+ font-family: Inter, sans-serif;Also applies to: 607-607
🧰 Tools
🪛 Stylelint (17.13.0)
[error] 222-222: Expected no quotes around "Inter" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@platform/docs/src/css/custom.css` at line 222, The font-family declarations
containing 'Inter' have unnecessary quotes around the font name, which violates
the Stylelint font-family-name-quotes rule. Remove the single quotes around
Inter in both font-family declarations (at line 222 and line 607) so that the
font name appears unquoted while keeping the comma and sans-serif fallback
intact. This applies to both instances where font-family is set to 'Inter',
sans-serif.
Source: Linters/SAST tools
Comment on lines
+215
to
+218
| <div className="mb-5 grid items-start gap-x-3" style={{ gridTemplateColumns: '24px 200px 1fr' }}> | ||
| <Swatch color={color} /> | ||
| <code className="bg-transparent pl-0 pt-0.5 text-sm text-[#7cacf8]">{token}</code> | ||
| <div className="text-secondary-foreground text-lg">{children}</div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Add mobile fallbacks for the fixed desktop grids.
The 200px token column, ml-[248px] offsets, and six-column theme grids can overflow narrow docs viewports. Add responsive variants or horizontal wrappers.
Proposed direction
- <div className="mb-5 grid items-start gap-x-3" style={{ gridTemplateColumns: '24px 200px 1fr' }}>
+ <div className="mb-5 grid grid-cols-[24px_minmax(0,1fr)] items-start gap-x-3 gap-y-1 md:grid-cols-[24px_200px_minmax(0,1fr)]">
<Swatch color={color} />
<code className="bg-transparent pl-0 pt-0.5 text-sm text-[`#7cacf8`]">{token}</code>
- <div className="text-secondary-foreground text-lg">{children}</div>
+ <div className="text-secondary-foreground col-start-2 text-lg md:col-start-auto">{children}</div>
</div>Also gate the left offsets with md:ml-[248px] and wrap the theme grids in overflow-x-auto or provide smaller-column mobile layouts.
Also applies to: 514-516, 668-727
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@platform/docs/src/pages/colors-and-theming.tsx` around lines 215 - 218, The
grid with fixed gridTemplateColumns of '24px 200px 1fr' will overflow on narrow
mobile viewports. Modify the grid container div to use responsive column
definitions that collapse to a single or two-column layout on mobile devices,
and reserve the current three-column layout only for larger screens using md:
breakpoint variants. Additionally, consider wrapping the grid in overflow-x-auto
or adjusting the grid template to use smaller flexible columns that adapt to the
viewport width instead of the fixed 200px token column.
Comment on lines
+181
to
+183
| const handleWheel = useCallback((deltaY: number) => { | ||
| setCurrentIndex(prev => Math.max(0, Math.min(TOTAL_SLICES - 1, prev + (deltaY > 0 ? 1 : -1)))); | ||
| }, []); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Guard the zero-delta wheel path.
When deltaY === 0, the current expression still decrements the index. Add an early return to avoid unintended index changes.
Suggested patch
const handleWheel = useCallback((deltaY: number) => {
+ if (deltaY === 0) return;
setCurrentIndex(prev => Math.max(0, Math.min(TOTAL_SLICES - 1, prev + (deltaY > 0 ? 1 : -1))));
}, []);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const handleWheel = useCallback((deltaY: number) => { | |
| setCurrentIndex(prev => Math.max(0, Math.min(TOTAL_SLICES - 1, prev + (deltaY > 0 ? 1 : -1)))); | |
| }, []); | |
| const handleWheel = useCallback((deltaY: number) => { | |
| if (deltaY === 0) return; | |
| setCurrentIndex(prev => Math.max(0, Math.min(TOTAL_SLICES - 1, prev + (deltaY > 0 ? 1 : -1)))); | |
| }, []); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@platform/docs/src/pages/components/smart-scrollbar.tsx` around lines 181 -
183, The handleWheel function does not guard against cases where deltaY equals
zero, causing unintended index decrements. Add an early return check at the
beginning of the handleWheel callback to exit immediately if deltaY is 0,
preventing the index from being modified when there is no wheel movement.
- Replace broad body-child CSS reset with targeted selectors for Radix popper, Dialog (.showcase-portal), and Sonner portals - Add unmount cleanup for CodeBlock copy timer - Add clipboard fallback and clear-search aria-label on Icons page
The displayed copy-paste examples on the dropdown-menu, hover-card, label, popover, and tooltip pages omitted components they reference (Button, Input, Icons, CardDescription). Add the missing imports so each snippet runs as shown.
Member
Author
|
Addressed the substantive items from Code Rabbit:
Leaving these as intentional for this docs PR:
Status of the 17 CodeRabbit commentsAddressed (12): portal CSS scope · CodeBlock timer cleanup · Icons clipboard fallback · Icons clear-search Declined — intentional (5): |
also Removed migration guide
Member
Author
|
Updated the PR description to include the latest updates to documentation including |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
Replaces the monolithic component showcase page with 26 individual, well-documented component pages for the ui-next library. Also upgrades Docusaurus from 3.7.0 to 3.10.1, fixes runtime crashes on migration guide pages, and resolves CSS isolation issues so ui-next components render correctly on documentation pages.
Deploy preview: https://ohif-ui-next-docs.netlify.app/
Changes & Results
Component documentation system
26 component pages — each at
/components/[name]with:Components documented:
Shared layout system (
_layout/directory):ComponentLayout.tsx— Three-column layout: left sidebar, content area, right TOCsidebar-config.ts— Navigation structure (Foundations, Components sections)TableOfContents.tsx— Scroll-aware right-hand nav, readsh2headings from the pagePageHeader.tsx,Section.tsx,InteractivePicker.tsx,CodeBlock.tsx,ExampleBlock.tsx,PropsTable.tsx— Shared building blocks used across all pagesIconography page (
/components/icons):Colors & Theming page (
/colors-and-theming):Overview page (
/components):Docusaurus 3.7.0 to 3.10.1
All
@docusaurus/*packages updated from 3.7.0 to 3.10.1;pnpm-lock.yamlregenerated for the dependency bump. Key config change:v4.useCssCascadeLayers: truewraps Infima in a CSS layer, enabling the component isolation strategy below.Fix: Migration guide page crash
Migration guide index pages crashed with
Hook useDocsSidebar is called outside the <DocsSidebarProvider>. Switched to prop-less<DocCardList />which auto-detects its sidebar category in Docusaurus 3.x.Fix: CSS isolation for ui-next components
Two layers of CSS interference caused ui-next components to render incorrectly on documentation pages: Infima's global element selectors bleeding into components, and missing Tailwind Preflight resets.
Fix:
revert-layer—.showcase-isolatedclass reverts all Infima styles inside component demostailwindcss-scoped-preflightto scope Preflight resets inside.showcase-isolatedonly:where()selectors (zero specificity) to extend CSS resets to Radix portal containers without overriding Tailwind utility classes.markdown/.theme-doc-markdownto prevent bleed into showcase areasAlso synced
custom.csstheme tokens to match current ui-next values, added the full opacity scale (fixesbg-primary/85etc.), and removed stale CSS blocks.Old showcase system removed (34 files)
Removed the monolithic
/components-listpage, the original/componentslanding, all 23*Showcase.tsxmodules,ShowcaseRow.tsx,/colors-and-type, and/patternswith its 6-file subdirectory. All replaced by the new per-component pages.Testing
/components/button— interactive variant picker, props table, code example/components/dialog— open dialog, verify buttons inside have correct styling (blue background, no browser borders)/components/icons— search icons, toggle sizes, click to copy name/componentsoverview page: accessible from top nav "Components" link/colors-and-theming— renders inside sidebar layout with TOC/configuration/url) — headings, lists, styles unchangedProduction build:
Checklist
PR
semantic-release format and guidelines.
Code
etc.)
Public Documentation Updates
additions or removals.
Tested Environment