feat(condensed): add condensed view support for Feature Module components#161
Merged
Merged
Conversation
- AIChat: data-slots on root, header, header-icon, messages, input, suggestions container/buttons, empty state icon - AIChatModal: data-slots on trigger button and modal container - AIMessage: data-slots on message wrapper, avatar, bubble, thinking block, code block, typing indicator, timestamp - MCPToolCall: data-slots on tool call container, tool icon, status icon, content, result section, parameters section - Condensed CSS: ~330 lines covering all AI sub-components with smaller padding, fonts, icons, gaps, and avatar collapse to sm
Contributor
There was a problem hiding this comment.
Pull request overview
Adds condensed-density support for the AI chat UI by introducing data-slot hooks on AI components and providing corresponding overrides in condensed-view.css, aligning AI components with the repo’s existing condensed styling approach.
Changes:
- Added
data-slotattributes across AIChat, AIChatModal, AIMessage, and MCPToolCall sub-elements to enable stable condensed-mode targeting. - Added condensed CSS overrides for AI component layout/typography (header, messages, input, suggested actions, empty state, tool call UI).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/condensed-view.css | Adds condensed overrides for AIChat/AIMessage/MCPToolCall/AIChatModal UI elements. |
| src/components/AI/MCPToolCall.tsx | Adds data-slot hooks for tool call container, icon, status icon, content, result, and parameters. |
| src/components/AI/AIMessage.tsx | Adds data-slot hooks for message wrapper, avatar, bubble, thinking block, code block, typing indicator, and timestamp. |
| src/components/AI/AIChatModal.tsx | Adds data-slot hooks for the floating trigger and modal container. |
| src/components/AI/AIChat.tsx | Adds data-slot hooks for chat root, header, header icon, messages area, input area, and suggestions. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The badge selector (> span:first-child) was incorrectly targeting the pulse animation span instead of the notification badge. Changed to target the badge via its positioning classes (.-top-1.-right-1).
Deploying ui with
|
| Latest commit: |
2812ecf
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c9196df9.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-featu.ui-6d0.pages.dev |
1. Badge selector: added data-slot='ai-chat-trigger-badge' instead of fragile class-based or positional selectors 2. Header button padding: scoped compact padding to icon-only buttons via data-slot='ai-chat-header-action', preserving Stop button sizing 3. Brittle .px-4 selector: removed, moved padding to existing ai-chat-suggestions data-slot 4. Broad span selector: scoped to > .flex > span to target only the status line, avoiding conflict with parameter text
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
1. Suggestions double-padding: added data-slot='ai-chat-input-suggestions' on the wrapper div; ai-chat-suggestions now only controls gap, wrapper controls padding — no cumulative padding across contexts 2. Tool error selector: expanded to cover ToolResultDisplay error classes (bg-red-50, dark:bg-red-900/20) in addition to top-level error block
- 11 data-slots: checkr-integration, checkr-header, checkr-header-icon, checkr-error, checkr-status-summary, checkr-actions, checkr-reports-card, checkr-reports-header, checkr-report-row, checkr-reports-footer, checkr-empty-state, checkr-not-connected - Condensed CSS: smaller header icon/title, tighter report rows, smaller checkboxes/badges, compact status summary dots, reduced padding on card sections, smaller empty/disconnected states
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…state useEffect was calling setSelectedReports(new Set()) unconditionally, but when reports=[] (default), every render creates a new array ref that re-triggers the effect. The new Set() also creates a new ref, causing another render → infinite loop. Fix: use functional update that only creates a new Set when the previous one had items (prev.size > 0), returning the same ref otherwise to break the cycle.
…onent The Dashboard story had a hand-rolled Sidebar function with raw HTML that didn't use data-slot attributes, so condensed view had no effect. Replaced with the library's Sidebar, SidebarHeader, SidebarContent, SidebarNav, SidebarNavItem, SidebarFooter components which already have data-slots and condensed CSS support. Also wraps AppShell in SidebarProvider and replaces the manual hamburger button with SidebarMobileToggle.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (1)
src/components/Dashboard/Dashboard.stories.tsx:75
- This PR is described as adding condensed-view support for AI components, but this file also refactors the Dashboard story shell to use the shared Sidebar/SidebarProvider components. If this change is intentional, please update the PR description/scope (or split into a separate PR) so reviewers can track why the Dashboard story is being modified here.
import {
Sidebar as SidebarComponent,
SidebarHeader,
SidebarContent,
SidebarNav,
SidebarNavItem,
SidebarFooter,
SidebarMobileToggle,
} from '../Sidebar';
import { SidebarProvider } from '../Sidebar/SidebarProvider';
// ============================================================================
// Meta
// ============================================================================
const meta: Meta = {
title: 'Product/Feature Modules/Dashboard',
parameters: {
layout: 'fullscreen',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ider import Add data-slot attributes and condensed CSS overrides for: - EmployeeProfileCard (avatar, name, title, details, toggle) - OrderSidebarTabs (tabs, tab buttons) - OrderDetailSidebar (sidebar layout, content area) Fix Dashboard story to import SidebarProvider from the barrel '../Sidebar' instead of the deep path '../Sidebar/SidebarProvider'.
garrity-miepub
changed the title
Add data-slot attributes to ErrorPage, ServerErrorPage, and ActionButton. Add ~100 lines of condensed CSS for smaller illustrations, error codes, titles, descriptions, action buttons, and error details. Fix: target <a> action buttons via parent selector since Button component hardcodes data-slot='button', overriding any custom data-slot. Mirror the global button condensed dimensions on the <a> tags for visual consistency.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 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 data-slot='order-sidebar-profile' to the profile wrapper in OrderDetailSidebar and update condensed CSS to target it directly instead of coupling to the Tailwind .px-3 utility class.
Add data-slot attributes and condensed CSS overrides for: - LoadingPage (root, indicator, message, sub-message) - LoadingOverlay (root, backdrop, message) - LoadingDots (container, dots) - LoadingBar (root, track, percentage) - LoadingSkeleton (items) - CardSkeleton (root, inner skeletons) - PulseIndicator (root)
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add 17 data-slot attributes across OnboardingWizard, OnboardingStepQuestion, and OnboardingCompletion components - Add ~100 lines of condensed CSS covering header, loading, content, footer, step question, and completion sections - Reduce story preview container from 700px to 350px in condensed mode
Add scoped min-width: 100px rule for [data-slot='button'] inside error-page-actions to match the <a> variant, preventing inconsistent widths in mixed action rows.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 12 out of 12 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add 12 data-slot attributes covering tabs, search, actions, loading, empty state, and items container - Add ~95 lines of condensed CSS including order item text/padding reduction - All 7 items now visible on screen in condensed mode vs ~5 in default
- Add 14 data-slot attributes across PaymentMethodCard, PaymentMethodBank, and PaymentMethodList components - Add ~120 lines of condensed CSS covering card/bank headers, details, footers, grid layout, and empty state
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 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 7 data-slot attributes across ProductVersion (inline/stacked/minimal variants) and ProductVersionBadge - Add ~50 lines of condensed CSS covering all variants, environment badges, and badge component
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.
Comments suppressed due to low confidence (2)
src/components/PaymentMethod/PaymentMethod.tsx:157
- For a
divwithrole="button", handling the Space key should calle.preventDefault()(typically on keydown) to avoid the page scrolling and to better match native button behavior. Consider preventing default for the Space key (and/or moving Space activation toonKeyUpper ARIA button patterns).
data-slot="payment-card"
onClick={handleSelect}
role={selectable ? 'button' : undefined}
tabIndex={selectable ? 0 : undefined}
onKeyDown={
selectable
? (e) => {
if (e.key === 'Enter' || e.key === ' ') handleSelect();
}
: undefined
src/components/PaymentMethod/PaymentMethod.tsx:346
- Same as PaymentMethodCard: Space key activation should prevent default to avoid page scroll when using
role="button"on adiv. Adde.preventDefault()for Space (and/or use keyup for Space) so keyboard interaction matches native buttons.
data-slot="payment-bank"
onClick={handleSelect}
role={selectable ? 'button' : undefined}
tabIndex={selectable ? 0 : undefined}
onKeyDown={
selectable
? (e) => {
if (e.key === 'Enter' || e.key === ' ') handleSelect();
}
: undefined
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.
Comments suppressed due to low confidence (1)
src/components/PaymentMethod/PaymentMethod.tsx:346
- Same issue as
PaymentMethodCard: the Space key handler on the custom<div role="button">should calle.preventDefault()to avoid page scrolling and match native button keyboard interaction.
onClick={handleSelect}
role={selectable ? 'button' : undefined}
tabIndex={selectable ? 0 : undefined}
onKeyDown={
selectable
? (e) => {
if (e.key === 'Enter' || e.key === ' ') handleSelect();
}
: undefined
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Summary
Add condensed view support (
data-slotattributes + condensed CSS overrides) to multiple Feature Module components:AI Components
CheckrIntegration
reports=[](default) by using a functional state updateDashboard
EmployeeProfile
ErrorPage
<a>tags styled to match the global Button condensed dimensionsLoadingPage
OnboardingWizard
OrderList
PaymentMethod
ProductVersion
ServiceGeneralSettings
min-height/max-heightfor condensed sizing; "days" suffix repositioned next to number in turnaround fieldServiceShippingSettings
min-height/max-height; address grid gap tightened in condensed modeCSS
~1600 lines of condensed overrides in
condensed-view.csscovering all the above components.