Skip to content

Commit b3b0eda

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 5141a6b commit b3b0eda

10 files changed

Lines changed: 1080 additions & 127 deletions

File tree

‎apps/apollo-vertex/app/patterns/_meta.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export default {
22
"ai-chat": "AI Chat",
3+
"page-header": "Page Header",
34
shell: "Shell",
45
};

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

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

‎apps/apollo-vertex/registry.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -852,6 +852,20 @@
852852
}
853853
]
854854
},
855+
{
856+
"name": "page-header",
857+
"type": "registry:ui",
858+
"title": "Page Header",
859+
"description": "A compound page header with back button, title, metadata fields, and collapsible action buttons that overflow into a dropdown.",
860+
"dependencies": ["class-variance-authority", "lucide-react"],
861+
"registryDependencies": ["@uipath/button", "@uipath/dropdown-menu"],
862+
"files": [
863+
{
864+
"path": "registry/page-header/page-header.tsx",
865+
"type": "registry:ui"
866+
}
867+
]
868+
},
855869
{
856870
"name": "popover",
857871
"type": "registry:ui",

0 commit comments

Comments
 (0)