feat(BusinessHours): add condensed view support#165
Conversation
Add data-slot attributes to all BusinessHours sub-components and condensed CSS overrides for tighter spacing, smaller fonts, and compact layout across all variants (default, card, compact, inline, expandable summary). Data-slots added: - business-hours (container) - business-hours-header, business-hours-title - business-hours-status (OpenStatusBadge) - business-hours-content, business-hours-schedule - business-hours-day-row, business-hours-day-name, business-hours-day-hours - business-hours-timezone, business-hours-text - business-hours-compact, business-hours-summary, business-hours-summary-content
There was a problem hiding this comment.
Pull request overview
Adds condensed-view support for the BusinessHours display components by introducing data-slot hooks in the TSX and corresponding condensed CSS overrides, enabling tighter spacing/typography in condensed mode.
Changes:
- Added
data-slotattributes acrossBusinessHours,DayScheduleRow,OpenStatusBadge,CompactHours, andHoursSummarysubtrees. - Added a new condensed CSS section targeting the
business-hours-*slots to reduce font sizes, padding, and spacing.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/styles/condensed-view.css | Adds condensed-mode overrides for the new business-hours-* slot hooks. |
| src/components/BusinessHours/BusinessHours.tsx | Adds data-slot attributes to BusinessHours and related sub-components to support condensed styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Scope all BusinessHours condensed selectors under [data-slot='business-hours'] parent to prevent style bleeding into BusinessHoursEditor which shares slot names like business-hours-day-name. - Add missing business-hours-title wrapper in the 'no hours available' render path for consistent condensed styling.
Deploying ui with
|
| Latest commit: |
6298ec1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4c2797bd.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-provi.ui-6d0.pages.dev |
Add data-slot attributes and condensed CSS overrides for tighter spacing, smaller fonts, compact avatars, and reduced card padding. Data-slots added: - employer-contact-card (Card root) - employer-contact-header (header with title + add button) - employer-contact-list (contacts container) - employer-contact-item (individual contact row) - employer-contact-info (name/role text) - employer-contact-actions (email/call buttons) - employer-contact-empty (empty state)
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add explicit line-height to scoped business-hours-day-name to prevent inheriting unscoped editor rule. - Remove dead gap:0 on business-hours-schedule (block layout with space-y, gap has no effect). - Add data-slot="employer-contact-header" to loading-state CardHeader for consistent condensed styling across states.
Add data-slot attributes and condensed CSS overrides following the OrderList pattern — compact search, smaller logos, tight item padding, smaller fonts for info/stats, and reduced spacing. Data-slots added: - employer-list (container) - employer-list-header (search + add button row) - employer-list-search (search input wrapper) - employer-list-empty (empty state) - employer-list-items (list container) - employer-list-item (individual employer row) - employer-list-item-content (inner flex row) - employer-list-item-info (name/email/date block) - employer-list-item-stats (employee/pending counts)
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Extend OpenStatusBadge condensed selectors to cover compact and summary variants (not just main BusinessHours container). - Scope business-hours-content padding to card variant only (.rounded-lg) to avoid adding padding to non-card variants. - Add explicit data-slot='employer-list-item-logo' to both img and fallback initial div, replacing brittle DOM-structure selectors. - Update PR description to list all 3 components.
- Add 8 data-slot attributes: employer-pricing-card (root), employer-pricing-header, employer-pricing-title, employer-pricing-base-price, employer-pricing-tiers, employer-pricing-tier-row, employer-pricing-notes, employer-pricing-actions. - Add ~110 lines condensed CSS: tighter card padding, smaller price/text, compact tier rows, reduced notes callout, smaller action buttons.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 5 out of 5 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 14 data-slot attributes: employer-view (root), employer-view-header-card, employer-view-header, employer-view-logo, employer-view-info, employer-view-stats, employer-view-address-card, employer-view-contact-card, employer-view-orders-card, employer-view-order-row, employer-view-invoices-card, employer-view-invoice-row, employer-view-contacts-card, employer-view-contact-row. - Add ~310 lines condensed CSS: compact header with smaller logo (2.25rem), tighter stats grid, smaller tabs, compact card headers/content across all four tab panels, tighter order/invoice/contact rows with smaller badges and buttons.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
garrity-miepub
force-pushed
the
feature/condensed-view-provider
branch
from
954dc9c to
28a2845
Compare
Remove baseUrl (redundant in TS 5.x+ — paths resolve relative to tsconfig location by default). Eliminates deprecation warning in both IDE and CLI.
garrity-miepub
force-pushed
the
feature/condensed-view-provider
branch
from
28a2845 to
062c840
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot='help-support-success' to success callout, replacing .rounded-lg.bg-green-100 selector - Add data-slot='employer-view-edit-btn' to Edit Employer button, replacing fragile child-combinator selector - Update PR description to list all 7 components
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 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.
…ata-slots - EmployerList: .mt-0.5 → h3 + * (structural sibling selector) - EmployerList: p.text-lg/p.text-xs → p:first-of-type/p:last-of-type - InvoiceList: add data-slot='invoice-list-actions', replace .flex child combinator
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot='invoice-payment' to loading skeleton - Add data-slot='invoice-payment-grid' to two-column layout, replace .grid selector - Add data-slot='invoice-payment-success-icon', replace .rounded-full selectors - Replace .text-sm/.text-lg with structural selectors in totals section - Update PR description to list all 8 components
- 10 data-slots across header, actions, card, provider, meta, bill-to, line-items, totals, notes - Scoped font-size rules under invoice-view-card to beat card-content .font-medium specificity (0,3,1 trap)
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 11 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 10 data-slots: notification-center (root), header, empty, list, item, item-row, icon, content, meta, footer - Add ~108 lines condensed CSS: reduced padding, smaller fonts, compact icon circles, tighter spacing - Root slot on both loading and main render paths
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 12 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Add data-slot to badges container for targeted styling - Fix unread dot selector (span) accidentally shrinking Badge spans to 6px height — use :not([data-slot]) to only target the dot - Add condensed badge sizing (smaller font, padding, gap) - Add title text truncation in condensed mode - Add overflow:hidden on content title row
- EmployerPricingCard: .text-sm/.text-xs → span / span:nth-child(2) - EmployerView order-row: p.font-medium/p.text-sm/p.text-xs → p:first-child / p:nth-child(2) / p:last-child - EmployerView invoice-row: p.font-medium/p.text-sm/p.font-semibold → structural selectors scoped by div position - InvoiceList: p.text-xs → p + p (adjacent sibling) - InvoicePaymentPage: .grid → data-slot="invoice-payment-card-row"
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…tors - employer-view-contact-row: p.font-medium → p:first-of-type, p.text-sm → p + p - invoice-payment-summary: .text-sm → > div:first-child
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| body.condensed [data-slot='help-support-contact-item'] p.font-medium { | ||
| font-size: 0.75rem !important; | ||
| line-height: 1rem !important; | ||
| } | ||
|
|
||
| body.condensed [data-slot='help-support-contact-item'] a, | ||
| body.condensed [data-slot='help-support-contact-item'] p.text-sm { | ||
| font-size: 0.6875rem !important; | ||
| line-height: 0.9375rem !important; | ||
| } | ||
|
|
||
| body.condensed [data-slot='help-support-contact-item'] p.text-xs { |
There was a problem hiding this comment.
These condensed overrides for HelpSupport contact items rely on Tailwind utility classes (p.font-medium, p.text-sm, p.text-xs) to find the label/value/availability nodes. That’s brittle (class refactors can silently break condensed view) and conflicts with the PR’s stated preference for structural selectors. Prefer targeting these nodes structurally within [data-slot='help-support-contact-item'] or add dedicated data-slots (e.g., contact-label/contact-value/contact-availability) and target those instead.
| body.condensed [data-slot='help-support-contact-item'] p.font-medium { | |
| font-size: 0.75rem !important; | |
| line-height: 1rem !important; | |
| } | |
| body.condensed [data-slot='help-support-contact-item'] a, | |
| body.condensed [data-slot='help-support-contact-item'] p.text-sm { | |
| font-size: 0.6875rem !important; | |
| line-height: 0.9375rem !important; | |
| } | |
| body.condensed [data-slot='help-support-contact-item'] p.text-xs { | |
| body.condensed [data-slot='help-support-contact-item'] > :not(svg) > p:first-of-type { | |
| font-size: 0.75rem !important; | |
| line-height: 1rem !important; | |
| } | |
| body.condensed [data-slot='help-support-contact-item'] > :not(svg) > a, | |
| body.condensed [data-slot='help-support-contact-item'] > :not(svg) > p:first-of-type + p:not(:last-of-type), | |
| body.condensed [data-slot='help-support-contact-item'] > :not(svg) > p:first-of-type + p:last-of-type:first-child { | |
| font-size: 0.6875rem !important; | |
| line-height: 0.9375rem !important; | |
| } | |
| body.condensed [data-slot='help-support-contact-item'] > :not(svg) > p:last-of-type:not(:first-of-type) { |
|
|
||
| /* ── Stripe branding ── */ | ||
|
|
||
| body.condensed [data-slot='invoice-payment-form'] form > p.text-xs { |
There was a problem hiding this comment.
This selector for Stripe branding depends on the .text-xs Tailwind utility class (form > p.text-xs). Since utility classes are implementation details, condensed styling can break with harmless refactors. Prefer adding a stable data-slot to the Stripe branding <p> and targeting that, or use a more structural selector (e.g., the branding paragraph’s position within the form) scoped under [data-slot='invoice-payment-form'].
| body.condensed [data-slot='invoice-payment-form'] form > p.text-xs { | |
| body.condensed [data-slot='invoice-payment-form'] form > p:last-of-type { |
Condensed View — Provider Components
Adds
data-slotattributes and condensed CSS overrides for the following Provider components:Pattern
•
data-slot="component-element"on JSX elements•
body.condensed [data-slot='component-element'] { ... !important; }insrc/styles/condensed-view.css• Block containers using
gapget explicitdisplay: flex; flex-direction: columnto ensure gap works• Prefer structural selectors over Tailwind class selectors for long-term maintainability