othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(components): Adds new components to ui-next documentation (#4974)

Browse Source
This commit is contained in:
Dan Rukas 2025-04-22 09:15:40 -04:00 committed by GitHub
parent 3b8faa8a76
commit 329d5b6237
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 681 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
extensions/default/src/DicomTagBrowser/DicomTagBrowser.tsx
View File

@ -128,7 +128,9 @@ const DicomTagBrowser = ({
<div className="mb-6 flex flex-row items-start pl-1">
<div className="flex w-full flex-row items-start gap-4">
<div className="flex w-1/3 flex-col">
<span className="text-muted-foreground flex h-6 items-center text-xs">Series</span>
<span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
Series
</span>
<Select
value={selectedDisplaySetInstanceUID}
onValueChange={value => onSelectChange({ value })}
@ -154,7 +156,7 @@ const DicomTagBrowser = ({
</div>
{shouldShowInstanceList && (
<div className="mx-auto mt-0.5 flex w-1/4 flex-col">
<span className="text-muted-foreground flex h-6 items-center text-xs">
<span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
Instance Number ({instanceNumber} of {activeDisplaySet?.images?.length})
</span>
<Slider
@ -170,7 +172,7 @@ const DicomTagBrowser = ({
</div>
)}
<div className="ml-auto mr-1 flex w-1/3 flex-col">
<span className="text-muted-foreground flex h-6 items-center text-xs">
<span className="text-muted-foreground flex h-6 items-center pb-2 text-base">
Search metadata
</span>
<InputFilter
@ -182,7 +184,7 @@ const DicomTagBrowser = ({
placeholder="Search metadata"
className="pl-9 pr-9"
/>
<InputFilter.ClearButton />
<InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
</InputFilter>
</div>
</div>

26
platform/docs/src/pages/colors-and-type.tsx
View File

@ -132,8 +132,9 @@ export default function ComponentShowcase() {
description="Colors and Typography"
>
<div className="text-foreground min-h-screen bg-black">
<div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
<a
href="/colors-and-type"
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
@ -183,9 +184,7 @@ export default function ComponentShowcase() {
</Card>
</a>
</div>
</div>
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
<h1 className="text-foreground ml-6 mb-6 text-5xl">Colors & Typography</h1>
<ShowcaseRow
@ -249,7 +248,7 @@ export default function ComponentShowcase() {
<span className="text-foreground text-lg">foreground</span>
</div>
<div className="flex items-center space-x-3">
<div className="bg-muted-foreground border-input h-[30px] w-[30px] rounded border"></div>
<div className="bg-muted-foreground h-[30px] w-[30px] rounded"></div>
<span className="text-foreground text-lg">muted-foreground</span>
</div>
</div>
@ -258,6 +257,23 @@ export default function ComponentShowcase() {
use 'muted-foreground' to create separation and readability.
</div>
</div>
<div className="mb-8 grid grid-cols-[28%,1fr] items-start gap-x-8">
<div className="space-y-2.5">
<div className="flex items-center space-x-3">
<div className="bg-input h-[30px] w-[30px] rounded"></div>
<span className="text-foreground text-lg">input</span>
</div>
<div className="flex items-center space-x-3">
<div className="bg-neutral h-[30px] w-[30px] rounded"></div>
<span className="text-foreground text-lg">neutral</span>
</div>
</div>
<div className="text-secondary-foreground flex items-center pt-1.5 text-lg">
Used for borders and UI elements. 'neutral' is typically used at 50% opacity for
elements such as scrollbars and will work over light and dark backgrounds
</div>
</div>
</ShowcaseRow>
<ShowcaseRow

85
platform/docs/src/pages/components-list.tsx
View File

@ -3,12 +3,25 @@ import '../css/custom.css';
import Layout from '@theme/Layout';
import { TooltipProvider } from '../../../ui-next/src/components/Tooltip';
// Import all showcase components
// Navigation card components
import { Card, CardHeader, CardTitle, CardDescription } from '../../../ui-next/src/components/Card';
import { Icons } from '../../../ui-next/src/components/Icons';
/* Showcase components (alphabetical) */
import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
import ButtonShowcase from './components/ButtonShowcase';
import CheckboxShowcase from './components/CheckboxShowcase';
import CinePlayerShowcase from './components/CinePlayerShowcase';
import ComboboxShowcase from './components/ComboboxShowcase';
import DataRowShowcase from './components/DataRowShowcase';
import DialogShowcase from './components/DialogShowcase';
import DropdownMenuShowcase from './components/DropdownMenuShowcase';
import HoverCardShowcase from './components/HoverCardShowcase';
import InputShowcase from './components/InputShowcase';
import LabelShowcase from './components/LabelShowcase';
import NumericMetaShowcase from './components/NumericMetaShowcase';
import PanelSectionShowcase from './components/PanelSectionShowcase';
import PopoverShowcase from './components/PopoverShowcase';
import ScrollAreaShowcase from './components/ScrollAreaShowcase';
import SelectShowcase from './components/SelectShowcase';
import SliderShowcase from './components/SliderShowcase';
@ -17,7 +30,8 @@ import TabsShowcase from './components/TabsShowcase';
import ToastShowcase from './components/ToastShowcase';
import ToolButtonShowcase from './components/ToolButtonShowcase';
import ToolButtonListShowcase from './components/ToolButtonListShowcase';
import NumericMetaShowcase from './components/NumericMetaShowcase';
import TooltipShowcase from './components/TooltipShowcase';
/**
* Components List page that displays all available UI components
*/
@ -30,15 +44,74 @@ export default function ComponentsList() {
<TooltipProvider>
<div className="text-foreground min-h-screen bg-black">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
<div className="ml-6 mb-6 text-base">
<h1 className="text-foreground mb-3 text-5xl">Components</h1>
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
<a
href="/colors-and-type"
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
>
<Card className="hover:bg-primary/30 w-full transition-colors">
<CardHeader>
<CardTitle className="text-foreground text-xl">
<Icons.ColorChange className="h-12 w-12" />
Colors & Typography
</CardTitle>
<CardDescription className="text-lg">
Color Palette and Typography Guidelines
</CardDescription>
</CardHeader>
</Card>
</a>
<a
href="/components-list"
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
>
<Card className="hover:bg-primary/30 w-full transition-colors">
<CardHeader>
<CardTitle className="text-foreground text-xl">
<Icons.ColorChange className="h-12 w-12" />
Components
</CardTitle>
<CardDescription className="text-lg">
Essential UI Components with Variants
</CardDescription>
</CardHeader>
</Card>
</a>
<a
href="/patterns"
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
>
<Card className="hover:bg-primary/30 w-full transition-colors">
<CardHeader>
<CardTitle className="text-foreground text-xl">
<Icons.ColorChange className="h-12 w-12" />
Patterns
</CardTitle>
<CardDescription className="text-lg">
Component-Based Layout Examples
</CardDescription>
</CardHeader>
</Card>
</a>
</div>
<TabsShowcase />
<h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1>
<AllinOneMenuShowcase />
<ButtonShowcase />
<CheckboxShowcase />
<CinePlayerShowcase />
<ComboboxShowcase />
<DataRowShowcase />
<DialogShowcase />
<DropdownMenuShowcase />
<HoverCardShowcase />
<InputShowcase />
<LabelShowcase />
<NumericMetaShowcase />
<PanelSectionShowcase />
<PopoverShowcase />
<ScrollAreaShowcase />
<SelectShowcase />
<SliderShowcase />
@ -47,7 +120,7 @@ export default function ComponentsList() {
<ToastShowcase />
<ToolButtonShowcase />
<ToolButtonListShowcase />
<NumericMetaShowcase />
<TooltipShowcase />
</div>
</div>
</TooltipProvider>

142
platform/docs/src/pages/components/AllinOneMenuShowcase.tsx Normal file
View File

@ -0,0 +1,142 @@
import React from 'react';
import AllInOneMenu, {
IconMenu,
SubMenu,
ItemPanel,
Item,
DividerItem,
HorizontalDirection,
VerticalDirection,
} from '../../../../ui-next/src/components/AllInOneMenu';
import { Switch } from '../../../../ui-next/src/components/Switch';
import ShowcaseRow from './ShowcaseRow';
/**
* Pure‑UI mock of the in‑app Window/Level menu.
* Clickable, but all actions are inert.
*/
export default function AllinOneMenuShowcase() {
/* Helpers to build common static items so the JSX stays concise */
const renderColorLUTItems = () =>
[
'Grayscale',
'X Ray',
'HSV',
'Hot Iron',
'Red Hot',
'S PET',
'Perfusion',
'Rainbow',
'SUV',
'GE 256',
'GE',
'Siemens',
].map(name => <Item key={name} label={name} />);
const renderWindowPresetItems = () =>
[
{ desc: 'Soft tissue', wl: '400 / 40' },
{ desc: 'Lung', wl: '1500 / -600' },
{ desc: 'Liver', wl: '150 / 90' },
{ desc: 'Bone', wl: '2500 / 480' },
{ desc: 'Brain', wl: '80 / 40' },
].map(p => (
<Item
key={p.desc}
label={p.desc}
secondaryLabel={p.wl}
/>
));
return (
<ShowcaseRow
title="All In One Menu"
description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
<ItemPanel label="Display">
<Item label="Display Color bar" rightIcon={<Switch disabled />} />
<DividerItem />
<SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
<ItemPanel label="Color LUTs">
<Item label="Preview in viewport" rightIcon={<Switch disabled />} />
<DividerItem />
<Item label="Grayscale" />
<Item label="X Ray" />
<Item label="HSV" />
<Item label="Hot Iron" />
<Item label="Red Hot" />
<Item label="S PET" />
<Item label="Perfusion" />
<Item label="Rainbow" />
<Item label="SUV" />
<Item label="GE 256" />
<Item label="GE" />
<Item label="Siemens" />
</ItemPanel>
</SubMenu>
<SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
<ItemPanel label="CT Presets">
<Item label="Soft tissue" secondaryLabel="400 / 40" />
<Item label="Lung" secondaryLabel="1500 / ‑600" />
<Item label="Liver" secondaryLabel="150 / 90" />
<Item label="Bone" secondaryLabel="2500 / 480" />
<Item label="Brain" secondaryLabel="80 / 40" />
</ItemPanel>
</SubMenu>
</ItemPanel>
</IconMenu>`}
>
<div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
<IconMenu
icon="viewport-window-level"
iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
horizontalDirection={HorizontalDirection.LeftToRight}
verticalDirection={VerticalDirection.TopToBottom}
menuStyle={{ width: 212, maxHeight: 500 }}
>
<ItemPanel label="Display">
<Item
label="Display Color bar"
rightIcon={
<Switch
checked={false}
disabled
className="pointer-events-none"
/>
}
useIconSpace={false}
/>
<DividerItem />
<SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
<ItemPanel
label="Color LUTs"
maxHeight="calc(100vh - 250px)"
className="flex flex-col"
>
<Item
label="Preview in viewport"
rightIcon={
<Switch
checked={false}
disabled
className="pointer-events-none"
/>
}
/>
<DividerItem />
{renderColorLUTItems()}
</ItemPanel>
</SubMenu>
<SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
<ItemPanel label="CT Presets">{renderWindowPresetItems()}</ItemPanel>
</SubMenu>
</ItemPanel>
</IconMenu>
<span className="text-muted-foreground ml-3 text-sm">
Click the icon to explore an example
</span>
</div>
</ShowcaseRow>
);
}

37
platform/docs/src/pages/components/CinePlayerShowcase.tsx Normal file
View File

@ -0,0 +1,37 @@
import React, { useState } from 'react';
import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer';
import ShowcaseRow from './ShowcaseRow';
/**
* CinePlayerShowcase displays a playable/pausable cine player with FPS control.
*/
export default function CinePlayerShowcase() {
const [isPlaying, setIsPlaying] = useState(false);
const [fps, setFps] = useState(24);
return (
<ShowcaseRow
title="Cine Player"
description="Play, pause, scrub through dynamic image series and adjust FPS."
code={`
<CinePlayer
className="w-[300px]"
isPlaying={isPlaying}
frameRate={fps}
onPlayPauseChange={setIsPlaying}
onFrameRateChange={setFps}
onClose={() => console.log('close clicked')}
/>
`}
>
<CinePlayer
className="w-[300px]"
isPlaying={isPlaying}
frameRate={fps}
onPlayPauseChange={setIsPlaying}
onFrameRateChange={setFps}
onClose={() => console.log('close clicked')}
/>
</ShowcaseRow>
);
}

105
platform/docs/src/pages/components/ComboboxShowcase.tsx Normal file
View File

@ -0,0 +1,105 @@
import React from 'react';
import { Combobox } from '../../../../ui-next/src/components/Combobox/Combobox';
import ShowcaseRow from './ShowcaseRow';
/**
* ComboboxShowcase demonstrates the searchable Combobox component with a
* comprehensive “Modality” list.
*/
export default function ComboboxShowcase() {
const modalities = [
'AR',
'ASMT',
'AU',
'BDUS',
'BI',
'BMD',
'CR',
'CT',
'CTPROTOCOL',
'DG',
'DOC',
'DX',
'ECG',
'EPS',
'ES',
'FID',
'GM',
'HC',
'HD',
'IO',
'IOL',
'IVOCT',
'IVUS',
'KER',
'KO',
'LEN',
'LS',
'MG',
'MR',
'M3D',
'NM',
'OAM',
'OCT',
'OP',
'OPM',
'OPT',
'OPTBSV',
'OPTENF',
'OPV',
'OSS',
'OT',
'PLAN',
'PR',
'PT',
'PX',
'REG',
'RESP',
'RF',
'RG',
'RTDOSE',
'RTIMAGE',
'RTINTENT',
'RTPLAN',
'RTRAD',
'RTRECORD',
'RTSEGANN',
'RTSTRUCT',
'RWV',
'SEG',
'SM',
'SMR',
'SR',
'SRF',
'STAIN',
'TEXTUREMAP',
'TG',
'US',
'VA',
'XA',
'XC',
].map(m => ({ value: m, label: m }));
return (
<ShowcaseRow
title="Combobox"
description="Searchable dropdown built with Command + Popover primitives."
code={`
const modalities = [
'AR','ASMT','AU','BDUS','BI','BMD','CR','CT','CTPROTOCOL','DG','DOC','DX','ECG','EPS','ES','FID',
'GM','HC','HD','IO','IOL','IVOCT','IVUS','KER','KO','LEN','LS','MG','MR','M3D','NM','OAM','OCT',
'OP','OPM','OPT','OPTBSV','OPTENF','OPV','OSS','OT','PLAN','PR','PT','PX','REG','RESP','RF','RG',
'RTDOSE','RTIMAGE','RTINTENT','RTPLAN','RTRAD','RTRECORD','RTSEGANN','RTSTRUCT','RWV','SEG','SM',
'SMR','SR','SRF','STAIN','TEXTUREMAP','TG','US','VA','XA','XC',
].map(m => ({ value: m, label: m }));
<Combobox data={modalities} placeholder="Modality" />
`}
>
<Combobox
data={modalities}
placeholder="Modality"
/>
</ShowcaseRow>
);
}

82
platform/docs/src/pages/components/DialogShowcase.tsx Normal file
View File

@ -0,0 +1,82 @@
import React from 'react';
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogClose,
} from '../../../../ui-next/src/components/Dialog/Dialog';
import { Button } from '../../../../ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow';
/**
* DialogShowcase demonstrates a simple Radix‑based dialog.
*/
export default function DialogShowcase() {
return (
<ShowcaseRow
title="Dialog"
description="Modal dialog with header, content, and footer actions."
code={`
<Dialog>
<DialogTrigger asChild>
<Button variant="default">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Example Dialog</DialogTitle>
</DialogHeader>
<DialogDescription>
This is a short message inside the dialog.
</DialogDescription>
<DialogFooter>
<DialogClose asChild>
<Button variant="secondary" className="min-w-[60px]">Cancel</Button>
</DialogClose>
<DialogClose asChild>
<Button variant="default" className="min-w-[60px]">OK</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
`}
>
<Dialog>
<DialogTrigger asChild>
<Button variant="default">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Example Dialog</DialogTitle>
</DialogHeader>
<DialogDescription>This is a short message inside the dialog.</DialogDescription>
<DialogFooter>
<DialogClose asChild>
<Button
variant="secondary"
className="min-w-[60px]"
>
Cancel
</Button>
</DialogClose>
<DialogClose asChild>
<Button
variant="default"
className="min-w-[60px]"
>
OK
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
</ShowcaseRow>
);
}

39
platform/docs/src/pages/components/HoverCardShowcase.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react';
import {
HoverCard,
HoverCardTrigger,
HoverCardContent,
} from '../../../../ui-next/src/components/HoverCard/HoverCard';
import { Button } from '../../../../ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow';
/**
* HoverCardShowcase demonstrates a Hover Card that appears on pointer hover.
*/
export default function HoverCardShowcase() {
return (
<ShowcaseRow
title="Hover Card"
description="Lightweight, non‑modal surface that appears on hover or focus."
code={`
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">Hover me</Button>
</HoverCardTrigger>
<HoverCardContent>
<p className="text-sm">Hello there! I'm a hover card.</p>
</HoverCardContent>
</HoverCard>
`}
>
<HoverCard>
<HoverCardTrigger asChild>
<Button variant="link">Hover me</Button>
</HoverCardTrigger>
<HoverCardContent>
<p className="text-sm">Hello there! I'm a hover card.</p>
</HoverCardContent>
</HoverCard>
</ShowcaseRow>
);
}

27
platform/docs/src/pages/components/LabelShowcase.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import { Label } from '../../../../ui-next/src/components/Label/Label';
import { Switch } from '../../../../ui-next/src/components/Switch';
import ShowcaseRow from './ShowcaseRow';
/**
* LabelShowcase pairs a Label with a Switch inline.
*/
export default function LabelShowcase() {
return (
<ShowcaseRow
title="Label"
description="Labels clarify the purpose of controls and improve accessibility."
code={`
<Switch defaultChecked id="preview-switch" />
<Label htmlFor="preview-switch" className="ml-2">
Preview edits before creating
</Label>
`}
>
<div className="flex items-center gap-2">
<Switch defaultChecked id="preview-switch" />
<Label htmlFor="preview-switch">Preview edits before creating</Label>
</div>
</ShowcaseRow>
);
}

10
platform/docs/src/pages/components/NumericMetaShowcase.tsx
View File

@ -45,7 +45,7 @@ export default function NumericShowcase() {
<Numeric.NumberInput className="w-32 text-center" />
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="number"
min={0}
@ -136,7 +136,7 @@ const [dimensionGroupNumber, setDimensionGroupNumber] = useState(1);
</div>
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="stepper"
value={dimensionGroupNumber}
@ -229,7 +229,7 @@ const [controlledValue, setControlledValue] = useState(0);
<Numeric.SingleRange showNumberInput />
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="singleRange"
min={0}
@ -314,7 +314,7 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
<Numeric.DoubleRange />
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="doubleRange"
min={0}
@ -407,7 +407,7 @@ const [controlledValues, setControlledValues] = useState<[number, number]>([0, 1
<Numeric.DoubleRange showNumberInputs />
</Numeric.Container>`}
>
<div className="bg-popover flex w-[300px] flex-col space-y-4 rounded p-4">
<div className="bg-muted flex w-[300px] flex-col space-y-4 rounded p-4">
<Numeric.Container
mode="number"
min={0}

52
platform/docs/src/pages/components/PanelSectionShowcase.tsx Normal file
View File

@ -0,0 +1,52 @@
// docs/src/pages/components/PanelSectionShowcase.tsx
import React from 'react';
import { PanelSection } from '../../../../ui-next/src/components/PanelSection/PanelSection';
import { Button } from '../../../../ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow';
/**
* PanelSectionShowcase displays an expandable/collapsible panel section.
*/
export default function PanelSectionShowcase() {
return (
<ShowcaseRow
title="Panel Section"
description="Collapsible panels for grouping controls or metadata inside side‑panels."
code={`
<PanelSection defaultOpen>
<PanelSection.Header>Series Information</PanelSection.Header>
<PanelSection.Content>
<div className="p-2 space-y-1 text-sm text-muted-foreground">
<div>Images: 120</div>
<div>Modality: MR</div>
<div>Body Part: Brain</div>
<Button variant="link" size="xs">Load another series</Button>
</div>
</PanelSection.Content>
</PanelSection>
`}
>
<PanelSection
defaultOpen
className="bg-muted w-[280px]"
>
<PanelSection.Header className="bg-popover">Series Information</PanelSection.Header>
<PanelSection.Content>
<div className="text-muted-foreground space-y-1 p-2 text-sm">
<div className="pl-2">
<div>Images: 120</div>
<div>Modality: MR</div>
<div>Body Part: Brain</div>
</div>
<Button
variant="ghost"
size="sm"
>
Load more information
</Button>
</div>
</PanelSection.Content>
</PanelSection>
</ShowcaseRow>
);
}

43
platform/docs/src/pages/components/PopoverShowcase.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
import {
Popover,
PopoverTrigger,
PopoverContent,
} from '../../../../ui-next/src/components/Popover/Popover';
import { Button } from '../../../../ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow';
/**
* PopoverShowcase presents a simple Popover that appears after clicking a button.
*/
export default function PopoverShowcase() {
return (
<ShowcaseRow
title="Popover"
description="Transient panel that appears over content—great for small forms, extra details, or actions."
code={`
<Popover>
<PopoverTrigger asChild>
<Button variant="default">Open Popover</Button>
</PopoverTrigger>
<PopoverContent className="w-60">
<p className="text-sm">
Hello! I’m a Popover. Click outside or press Esc to close me.
</p>
</PopoverContent>
</Popover>
`}
>
<Popover>
<PopoverTrigger asChild>
<Button variant="default">Open Popover</Button>
</PopoverTrigger>
<PopoverContent className="w-60">
<p className="text-sm">
Hello! I’m a Popover. Click outside or press&nbsp;Esc to close me.
</p>
</PopoverContent>
</Popover>
</ShowcaseRow>
);
}

5
platform/docs/src/pages/components/TabsShowcase.tsx
View File

@ -12,7 +12,7 @@ export default function TabsShowcase() {
title="Tabs"
description="Tabs (or segmented controls) can be used to provide navigation options or allow users to switch between multiple options (e.g., tool settings) "
code={`
<Tabs className="w-[400px]" onValueChange={newValue => console.log(newValue)}>
<Tabs defaultValue="circle" className="w-[400px]" onValueChange={newValue => console.log(newValue)}>
<TabsList>
<TabsTrigger value="circle">Circle</TabsTrigger>
<Separator orientation="vertical" />
@ -24,6 +24,7 @@ export default function TabsShowcase() {
`}
>
<Tabs
defaultValue="circle"
className="w-[400px]"
onValueChange={newValue => console.log(newValue)}
>
@ -37,4 +38,4 @@ export default function TabsShowcase() {
</Tabs>
</ShowcaseRow>
);
}
}

35
platform/docs/src/pages/components/TooltipShowcase.tsx Normal file
View File

@ -0,0 +1,35 @@
import React from 'react';
import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../ui-next/src/components/Tooltip';
import { Button } from '../../../../ui-next/src/components/Button';
import ShowcaseRow from './ShowcaseRow';
/**
* TooltipShowcase component displays Tooltip variants and examples
*/
export default function TooltipShowcase() {
return (
<ShowcaseRow
title="Tooltip"
description="Tooltips reveal helper text when users hover, focus, or tap an element."
code={`
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">?</Button>
</TooltipTrigger>
<TooltipContent>
Tooltip content
</TooltipContent>
</Tooltip>
`}
>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon">?</Button>
</TooltipTrigger>
<TooltipContent>
Tooltip content
</TooltipContent>
</Tooltip>
</ShowcaseRow>
);
}

7
platform/docs/src/pages/patterns.tsx
View File

@ -27,8 +27,9 @@ export default function ComponentShowcase() {
description="Patterns and example layouts"
>
<div className="text-foreground min-h-screen bg-black">
<div className="mx-auto my-4 max-w-5xl pt-6 pb-3">
<div className="grid grid-cols-1 gap-5 md:grid-cols-3">
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
{/* Navigation cards */}
<div className="mb-8 grid grid-cols-1 gap-5 md:grid-cols-3">
<a
href="/colors-and-type"
className="focus:ring-primary block rounded-lg text-inherit no-underline hover:no-underline focus:outline-none focus:ring-2"
@ -78,9 +79,7 @@ export default function ComponentShowcase() {
</Card>
</a>
</div>
</div>
<div className="mx-auto my-4 max-w-5xl pt-4 pb-6">
<h1 className="text-foreground ml-6 mb-6 text-5xl">Patterns</h1>
<ShowcaseRow

2
platform/ui-next/src/components/AllInOneMenu/DividerItem.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
const DividerItem = () => {
return (
<div className="flex h-3.5 shrink-0 items-center px-2">
<div className="bg-primary-dark h-[2px] w-full"></div>
<div className="bg-background h-[2px] w-full"></div>
</div>
);
};

2
platform/ui-next/src/components/Icons/Sources/Clear.tsx
View File

@ -14,7 +14,7 @@ export const Clear = (props: IconProps) => (
fillRule="evenodd"
>
<circle
fill="#0944B3"
fill="currentColor"
cx="9.5"
cy="9.5"
r="9.5"