feat: add condensed view support to Layout & Structure components#152
feat: add condensed view support to Layout & Structure components#152garrity-miepub merged 25 commits intomainfrom
Conversation
Add data-slot attributes to all 8 sub-components: AppHeader, Section, Title, Actions, Divider, IconButton, Search, and UserMenu. Add condensed CSS rules for reduced header height (2.5rem), tighter gaps, smaller icons, compact search trigger, and smaller avatar in user menu.
There was a problem hiding this comment.
Pull request overview
Adds condensed view styling support for AppHeader by introducing stable data-slot hooks on header subcomponents and defining condensed CSS overrides to reduce overall header density.
Changes:
- Added
data-slotattributes toAppHeaderand its subcomponents (section/title/actions/divider/icon button/search/user menu). - Introduced condensed-mode CSS rules to reduce header height, spacing, typography, and control sizing for
AppHeader.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/styles/condensed-view.css |
Adds condensed-mode CSS overrides for AppHeader layout/typography/control sizing via data-slot selectors. |
src/components/AppHeader/AppHeader.tsx |
Adds data-slot attributes to AppHeader subcomponents to support targeted condensed styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Extract branding (logo + company name) into a new AppHeaderBrand sub-component with data-slot attributes for app-header-brand, app-header-brand-logo, and app-header-brand-name. Update story to use the new component. Add condensed CSS for smaller logo and text.
Deploying ui with
|
| Latest commit: |
f4ad369
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://52e38e81.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-layou.ui-6d0.pages.dev |
Add data-slot attributes to UserMenu internals (avatar, name, email) replacing brittle positional CSS selectors. Fix icon button span selector to use :not(.absolute) so badge sizing isn't clobbered.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Add data-slot attributes to CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardMedia, CardBadge, CardActions, CardDivider, CardCollapsible, and CardStat (Card itself already had one). Fix existing Card condensed CSS to use padding shorthand instead of missing padding-left. Add condensed rules for smaller title/description text, tighter header/footer spacing, compact badges, card media margins, stat layout, and collapsible toggle.
Cap card-media images at 120px max-height. Add condensed rules for general text inside card-content (p, span, li, h3). Reduce card-title and card-description font sizes further. Add horizontal card image sizing. Add overlay text, footer price, stat icon, and content icon condensed rules. Tighten header gap and divider margins.
Add data-slot attributes to all 5 sub-components: header, body, footer, Info, Table, Actions, and DataCards. Add condensed CSS for tighter header padding, smaller title/count badge, compact info grid labels/values, tighter table cells, smaller action buttons with narrower icon badges, and compact data card metrics.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Change <span> to <div> for AppHeaderBrand logo wrapper (valid HTML) - Add :not(.p-0) to card condensed padding to preserve padding='none' - Remove span from card-content typography selector to avoid clobbering
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Add 7 data-slots: page-header, page-header-row, page-header-icon, page-header-title, page-header-subtitle, page-header-actions, page-header-content. Condensed CSS: tighter padding, smaller title/subtitle fonts, scaled-down icons, reduced gaps and margins.
Add 8 data-slots: quick-action, quick-action-icon, quick-action-content, quick-action-title, quick-action-subtitle, quick-action-group, quick-action-group-title, quick-action-group-grid. Condensed CSS: smaller card padding, compact icon (2rem), reduced title/subtitle fonts, tighter group grid gap and title margin.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Add 6 data-slots: quick-links-list, quick-links-icon, quick-links-label, quick-links-description, quick-links-badge, quick-links-chevron. Condensed CSS: tighter list/grid gaps, smaller icon/label/description/ badge text, compact badge padding, smaller chevron.
Prevents default submit behavior when buttons are inside forms. Applies to AppHeaderIconButton, AppHeaderSearch, AppHeaderUserMenu.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- DashboardWidget: replace ineffective gap with margin-top override for space-y-3 data-cards container - QuickLinksCard: align badge condition to != null matching chevron - SiteHeader CSS: remove empty rule blocks, replace with comments
Add 5 data-slots: step-indicator, step-indicator-circle, step-indicator-connector, step-indicator-label, step-indicator-description. Condensed CSS: circles 2rem to 1.25rem, icons 0.625rem, connectors 1px, labels 0.625rem, descriptions 0.5625rem, tighter gaps/margins. Current-step ring thinned to 1px offset to prevent connector overlap.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (1)
src/components/DashboardWidget/DashboardWidget.tsx:116
- The PR description’s DashboardWidget slot list doesn’t match the code/CSS: the code introduces
dashboard-widget-footer,dashboard-widget-info, anddashboard-widget-data-cards, while there are no explicitdashboard-widget-title/dashboard-widget-subtitleslots at all (title is just anh3). Please update the documented slot list to match the actual hooks (or add the missing slots if they’re required) to avoid consumers writing selectors for hooks that don’t exist.
{/* Header */}
<CardHeader
data-slot="dashboard-widget-header"
className={cn(
'border-border flex flex-row items-center justify-between gap-2 border-b px-4 py-3 pb-3',
accent && 'pl-6'
)}
>
<div className="flex items-center gap-2">
{icon && (
<span className="text-muted-foreground shrink-0">{icon}</span>
)}
<h3 className="text-foreground text-sm font-semibold tracking-wide uppercase">
{title}
</h3>
{count !== undefined && (
<span className="bg-primary-100 text-primary-900 dark:bg-primary-900/50 dark:text-primary-300 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold">
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Added data-slot attributes to all Table sub-components: - table, table-header, table-body, table-footer - table-row, table-head, table-cell, table-caption Condensed CSS reduces header height (1.75rem), cell padding (0.25rem 0.5rem), and font sizes for a compact table layout.
Added data-slot attributes to all Tabs sub-components: - tabs (root), tabs-list, tabs-trigger, tabs-trigger-icon, tabs-content Condensed CSS reduces trigger padding (0.25rem 0.75rem), font sizes, icon dimensions, and content margin for a compact tab layout. Works across all variants: underline, pills, enclosed.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- StepIndicator dark mode: rewrite selector to match when .dark is on body/html/root (not just as a descendant) - SiteHeader CompactHeader: add data-slot='site-header-compact-row' replacing brittle > div:first-child positional selector - PR description: updated to include Table and Tabs components
- Replace inline action buttons with CountBadge-style portal overflow menu using MoreHorizontalIcon trigger and portal-rendered dropdown - Add 'variant' prop to WidgetTableAction for danger styling - Fix condensed table padding: preserve 1rem horizontal padding in dashboard widget cells (needed due to -mx-4 bleed alignment) - Add higher-specificity override after generic Table condensed rules
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- DashboardWidget: row-specific aria-label on overflow menu trigger - DashboardWidget: use action.label as React key instead of index - SiteHeader: add data-slot='site-header-spacer' + condensed height - CompactHeader: add data-slot='site-header-compact-spacer' + condensed height - Spacers now match their respective condensed header heights (2.5rem / 2.25rem)
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 15 out of 15 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (1)
src/components/Tabs/Tabs.tsx:189
TabsListaddsdata-slot="tabs-list"for condensed-mode styling, but{...props}is spread after it, so callers can overridedata-slotand accidentally opt out of condensed selectors. If the goal is a stable hook, consider applyingdata-slotafter spreading props (while still mergingclassName) or omittingdata-slotfrom the forwarded props.
return (
<div
ref={(node) => {
// Combine refs
(listRef as React.MutableRefObject<HTMLDivElement | null>).current =
node;
if (typeof ref === 'function') {
ref(node);
} else if (ref) {
ref.current = node;
}
}}
role="tablist"
data-slot="tabs-list"
tabIndex={0}
onKeyDown={handleKeyDown}
className={cn(tabsListVariants({ variant }), className)}
{...props}
/>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
Add
data-slotattribute hooks andbody.condensedCSS density overrides to all Layout & Structure components, enabling a system-wide condensed view mode.Components Updated
AppHeader
app-header,app-header-section,app-header-title,app-header-actions,app-header-divider,app-header-icon-btn,app-header-search,app-header-user-menu,app-header-user-avatar,app-header-user-name,app-header-user-email,app-header-brand,app-header-brand-logo,app-header-brand-nameAppHeaderBrandsub-component for composable brand/logo displayCard
card,card-header,card-title,card-description,card-actions,card-content,card-footer,card-badge,card-media,card-divider,card-collapsible,card-stat:not(.p-0)exclusion), tighter typography, capped media heightDashboardWidget
dashboard-widget,dashboard-widget-header,dashboard-widget-title,dashboard-widget-subtitle,dashboard-widget-actions,dashboard-widget-body,dashboard-widget-tablePageHeader
page-header,page-header-row,page-header-icon,page-header-title,page-header-subtitle,page-header-actions,page-header-contentQuickAction
quick-action,quick-action-icon,quick-action-content,quick-action-title,quick-action-subtitle,quick-action-group,quick-action-group-title,quick-action-group-gridQuickLinksCard
quick-links-list,quick-links-icon,quick-links-label,quick-links-description,quick-links-badge,quick-links-chevronSiteFooter
site-footer-container,site-footer-main,site-footer-brand,site-footer-brand-logo,site-footer-description,site-footer-links,site-footer-link-section,site-footer-link-title,site-footer-social,site-footer-social-link,site-footer-newsletter,site-footer-newsletter-form,site-footer-bottom,site-footer-bottom-row,site-footer-copyright,site-footer-legal, plus SimpleFooter slotsSiteHeader
site-header,site-header-row,site-header-logo,site-header-logo-content,site-header-logo-icon,site-header-logo-name,site-header-nav,site-header-nav-link,site-header-auth,site-header-user-menu,site-header-user-avatar,site-header-user-dropdown,site-header-mobile-btn,site-header-compact,site-header-compact-row,site-header-compact-titleStepIndicator
step-indicator,step-indicator-circle,step-indicator-connector,step-indicator-label,step-indicator-descriptionTable
table,table-header,table-body,table-footer,table-row,table-head,table-cell,table-captionTabs
tabs,tabs-list,tabs-trigger,tabs-trigger-icon,tabs-contentPattern
All condensed CSS follows the same approach:
data-slotattributes on component elements for stable CSS targetingbody.condensed [data-slot='...'] { ... !important; }rules insrc/styles/condensed-view.css!importantrequired because Tailwind CSS 4's@layer utilitieslowers specificityTesting
Toggle condensed mode via
document.body.classList.toggle('condensed')in browser console, or use the Storybook stories to compare default vs condensed density.