Skip to content

Commit 0cf415e

Browse files
creilly11235claude
creilly11235
and
claude
committed
feat(apollo-vertex): add page-header component to vertex registry
Port page-header compound component from vertical-medical-mrs to the apollo-vertex shadcn registry. Includes back navigation, title/description, metadata fields, collapsible actions with overflow dropdown, and skeleton loading state. Update shell preview with PageHeader in InvoiceDashboard and add InvoiceDetail page with back navigation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent b47ce00 commit 0cf415e

8 files changed

Lines changed: 1236 additions & 127 deletions

File tree

‎apps/apollo-vertex/app/vertex-components/page-header/page.mdx‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import { PageHeaderListDemo, PageHeaderDetailDemo, PageHeaderFullDemo, PageHeaderSkeletonDemo, ScaledPreview } from '@/templates/PageHeaderTemplate';
2+
3+
# Page Header
4+
5+
A compound page header with back navigation, title, metadata fields, and collapsible action buttons that automatically overflow into a dropdown when space is tight.
6+
7+
<div className="not-prose my-8 rounded-lg border overflow-hidden">
8+
<ScaledPreview width={1200}>
9+
<PageHeaderListDemo />
10+
</ScaledPreview>
11+
</div>
12+
13+
<div className="not-prose my-8 rounded-lg border overflow-hidden">
14+
<ScaledPreview width={1200}>
15+
<PageHeaderDetailDemo />
16+
</ScaledPreview>
17+
</div>
18+
19+
With metadata fields (scaled to simulate full-width layout):
20+
21+
<div className="not-prose my-8 rounded-lg border overflow-hidden">
22+
<ScaledPreview width={1200}>
23+
<PageHeaderFullDemo />
24+
</ScaledPreview>
25+
</div>
26+
27+
Skeleton loading state (scaled):
28+
29+
<div className="not-prose my-8 rounded-lg border overflow-hidden">
30+
<ScaledPreview width={1200}>
31+
<PageHeaderSkeletonDemo />
32+
</ScaledPreview>
33+
</div>
34+
35+
## Features
36+
37+
- **Back Navigation**: Built-in back button with customizable icon
38+
- **Title & Description**: Page title with optional description text
39+
- **Metadata Fields**: Label/value pairs displayed inline with responsive wrapping
40+
- **Collapsible Actions**: Buttons that automatically overflow into a dropdown based on available space
41+
- **Skeleton Loading**: Full skeleton variant for loading states
42+
- **Responsive**: Wraps gracefully on smaller screens
43+
44+
## Installation
45+
46+
```bash
47+
npx shadcn@latest add @uipath/page-header
48+
```
49+
50+
## Usage
51+
52+
### Basic Header
53+
54+
```tsx
55+
import {
56+
PageHeader,
57+
PageHeaderNav,
58+
PageHeaderBackButton,
59+
PageHeaderTitle,
60+
PageHeaderActions,
61+
} from '@/components/ui/page-header';
62+
import { Button } from '@/components/ui/button';
63+
64+
function MyPage() {
65+
return (
66+
<PageHeader bordered>
67+
<PageHeaderNav>
68+
<PageHeaderBackButton onClick={() => history.back()} />
69+
<PageHeaderTitle>Page Title</PageHeaderTitle>
70+
</PageHeaderNav>
71+
<PageHeaderActions>
72+
<Button>Save</Button>
73+
</PageHeaderActions>
74+
</PageHeader>
75+
);
76+
}
77+
```
78+
79+
### With Metadata Fields
80+
81+
```tsx
82+
import {
83+
PageHeader,
84+
PageHeaderNav,
85+
PageHeaderBackButton,
86+
PageHeaderTitle,
87+
PageHeaderContent,
88+
PageHeaderField,
89+
PageHeaderFieldLabel,
90+
PageHeaderFieldValue,
91+
PageHeaderActions,
92+
} from '@/components/ui/page-header';
93+
import { Button } from '@/components/ui/button';
94+
95+
function DetailPage() {
96+
return (
97+
<PageHeader bordered>
98+
<PageHeaderNav>
99+
<PageHeaderBackButton />
100+
<PageHeaderTitle>Record Summary</PageHeaderTitle>
101+
</PageHeaderNav>
102+
103+
<PageHeaderContent>
104+
<PageHeaderField>
105+
<PageHeaderFieldLabel>Status</PageHeaderFieldLabel>
106+
<PageHeaderFieldValue>In Progress</PageHeaderFieldValue>
107+
</PageHeaderField>
108+
<PageHeaderField>
109+
<PageHeaderFieldLabel>Template</PageHeaderFieldLabel>
110+
<PageHeaderFieldValue>Clinical Review v2</PageHeaderFieldValue>
111+
</PageHeaderField>
112+
</PageHeaderContent>
113+
114+
<PageHeaderActions>
115+
<Button>Save</Button>
116+
</PageHeaderActions>
117+
</PageHeader>
118+
);
119+
}
120+
```
121+
122+
### With Collapsible Actions
123+
124+
Actions that automatically collapse into an overflow dropdown when space is limited:
125+
126+
```tsx
127+
import {
128+
PageHeader,
129+
PageHeaderNav,
130+
PageHeaderTitle,
131+
PageHeaderActions,
132+
PageHeaderCollapsibleActions,
133+
type CollapsibleAction,
134+
} from '@/components/ui/page-header';
135+
import { Button } from '@/components/ui/button';
136+
import { DropdownMenuItem } from '@/components/ui/dropdown-menu';
137+
import { Download, Share2 } from 'lucide-react';
138+
139+
const actions: CollapsibleAction[] = [
140+
{
141+
key: 'share',
142+
button: (
143+
<Button variant="outline" size="sm">
144+
<Share2 className="size-4 mr-1.5" />
145+
Share
146+
</Button>
147+
),
148+
menuItem: (
149+
<DropdownMenuItem>
150+
<Share2 className="size-4" />
151+
Share
152+
</DropdownMenuItem>
153+
),
154+
},
155+
{
156+
key: 'download',
157+
button: (
158+
<Button variant="outline" size="sm">
159+
<Download className="size-4 mr-1.5" />
160+
Download
161+
</Button>
162+
),
163+
menuItem: (
164+
<DropdownMenuItem>
165+
<Download className="size-4" />
166+
Download
167+
</DropdownMenuItem>
168+
),
169+
},
170+
];
171+
172+
function MyPage() {
173+
return (
174+
<PageHeader bordered>
175+
<PageHeaderNav>
176+
<PageHeaderTitle>Document</PageHeaderTitle>
177+
</PageHeaderNav>
178+
<PageHeaderActions>
179+
<PageHeaderCollapsibleActions items={actions} />
180+
<Button size="sm">Save</Button>
181+
</PageHeaderActions>
182+
</PageHeader>
183+
);
184+
}
185+
```
186+
187+
### Skeleton Loading State
188+
189+
```tsx
190+
import { PageHeaderSkeleton } from '@/components/ui/page-header';
191+
192+
function LoadingPage() {
193+
return (
194+
<PageHeaderSkeleton
195+
bordered
196+
backButton
197+
titleWidth="w-48"
198+
fields={3}
199+
actions={2}
200+
/>
201+
);
202+
}
203+
```
204+
205+
## Sub-components
206+
207+
| Component | Description |
208+
|-----------|-------------|
209+
| `PageHeader` | Root container with size variants and optional border |
210+
| `PageHeaderNav` | Left section containing back button and title |
211+
| `PageHeaderBackButton` | Back arrow button (customizable icon) |
212+
| `PageHeaderTitleGroup` | Wrapper for title + description |
213+
| `PageHeaderTitle` | Page title with size variants (`default`, `lg`) |
214+
| `PageHeaderDescription` | Subtitle text below the title (clamped to 2 lines with hover tooltip) |
215+
| `PageHeaderContent` | Metadata fields section with responsive layout |
216+
| `PageHeaderField` | Individual field wrapper |
217+
| `PageHeaderFieldLabel` | Field label text |
218+
| `PageHeaderFieldValue` | Field value text |
219+
| `PageHeaderActions` | Right section for action buttons |
220+
| `PageHeaderActionsOverflow` | Simple overflow dropdown for extra actions |
221+
| `PageHeaderCollapsibleActions` | Smart overflow that measures available space |
222+
| `PageHeaderSkeleton` | Full loading skeleton |
223+
| `PageHeaderFieldSkeleton` | Individual field skeleton |

‎apps/apollo-vertex/registry.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -829,6 +829,24 @@
829829
}
830830
]
831831
},
832+
{
833+
"name": "page-header",
834+
"type": "registry:ui",
835+
"title": "Page Header",
836+
"description": "A compound page header with back button, title, metadata fields, and collapsible action buttons that overflow into a dropdown.",
837+
"dependencies": ["lucide-react"],
838+
"registryDependencies": [
839+
"@uipath/button",
840+
"@uipath/dropdown-menu",
841+
"@uipath/skeleton"
842+
],
843+
"files": [
844+
{
845+
"path": "registry/page-header/page-header.tsx",
846+
"type": "registry:ui"
847+
}
848+
]
849+
},
832850
{
833851
"name": "popover",
834852
"type": "registry:ui",

0 commit comments

Comments
 (0)