feat(condensed): add condensed view support for Provider components by garrity-miepub · Pull Request #168 · mieweb/ui

garrity-miepub · 2026-04-08T02:03:00Z

Summary

Add data-slot attributes and condensed CSS overrides for all Provider components:

ProviderCard / ProviderCardGrid — 10 data-slots, data-variant for variant-aware CSS, compact/list/featured condensed styling
ProviderDetailHeader — 11 data-slots, condensed action bar, breadcrumb, logo (2.5rem), social links, book button
ProviderOverview — 6 data-slots (including loading skeleton), condensed stats grid, quick actions, recent activity
ProviderSearchBar / HeroSearchBar — 5 data-slots, condensed input row (2rem buttons), compact hero variant (smaller title/subtitle)
ProviderSearchFilters / ServiceMultiSelect / CompactFilterBar / ActiveFilters — 5 data-slots, condensed inputs (1.75rem), compact filter bar, smaller active filter pills
ProviderSettings — 5 data-slots, condensed header/tabs/cards/inputs/toggles across General, Notifications, Scheduling, and Payments tabs
RecurringServiceCard — 6 data-slots, condensed header/body/grid/modal/add button
ReportDashboard — 7 data-slots (including loading skeleton), condensed metrics/charts/top-lists/services/employers
ScheduleCalendar — 7 data-slots, condensed header/grid/day-headers/time-labels/appointments/legend
ServiceAccordion — 8 data-slots, condensed category headers/content/links/subcategories, plus ServiceTagCloud and ServiceList

All components use structural data-slot selectors in condensed-view.css with body.condensed scoping. Props spread order ensures data-slot/data-variant cannot be overridden by consumers.

- Add 10 data-slot attributes to ProviderCard, ProviderCardGrid - Add data-variant attribute for variant-aware CSS targeting - Add condensed CSS overrides for all 3 variants (compact, list, featured) - Condense logo, content padding, header, address, phone, services, footer - Featured variant strips p-6 padding and matches compact density

cloudflare-workers-and-pages · 2026-04-08T02:04:21Z

Deploying ui with Cloudflare Pages

Latest commit:	`01bcee5`
Status:	✅ Deploy successful!
Preview URL:	https://ce58ca1a.ui-6d0.pages.dev
Branch Preview URL:	https://feature-condensed-view-provi-8bpu.ui-6d0.pages.dev

View logs

Copilot

Pull request overview

Adds condensed-mode styling hooks and CSS overrides for ProviderCard/ProviderCardGrid so the component can be density-adjusted in the existing body.condensed styling system.

Changes:

Added data-slot hooks to key ProviderCard sub-elements (root, logo, content, header, address, phone, services, footer) plus ProviderCardGrid.
Added data-variant on the ProviderCard root for variant-aware condensed CSS targeting.
Implemented condensed CSS overrides for compact, list, and featured variants (logo sizing, padding, typography, spacing, grid gap, and empty-state sizing).

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 CSS rules targeting the new ProviderCard/ProviderCardGrid `data-slot`/`data-variant` hooks.
src/components/ProviderCard/ProviderCard.tsx	Adds `data-slot` and `data-variant` attributes to ProviderCard elements for condensed-view styling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…mponents Tooltip wraps triggers in <div class='relative inline-flex'>, breaking structural selectors (> span, > div > div). - Add data-slot='provider-card-verified' to VerifiedBadge span - Add data-slot='provider-card-safe-notice' to SafeFromWildfiresNotice div - Replace structural selectors with data-slot selectors in condensed CSS

- Add 11 data-slot attributes across all sub-components - Add condensed CSS for action bar, breadcrumb, mobile back button, logo (2.5rem), provider name, social links, verified badge, address, book button, report/claim links, compact header variant - Logo reduced from 8rem to 2.5rem in condensed mode

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Move {...props} before data-slot/data-variant in ProviderCard to prevent consumer override of internal attributes - Scope book button CSS to provider-detail-content instead of provider-detail-header to avoid affecting action bar buttons

- Add 6 data-slot attributes (root, header, stats grid, stat card, quick actions card, recent activity card) - Add condensed CSS for header logo, stat cards, quick actions, recent activity items, card headers/content

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/components/ProviderOverview/ProviderOverview.tsx:446

StatCard uses role="button"/tabIndex=0, but the keyboard handler only triggers on Enter. For button-like divs, Space should also activate the action (and typically calls preventDefault() on Space to avoid page scroll). Consider updating onKeyDown to handle both Enter and Space for better keyboard accessibility.

      data-slot="provider-overview-stat"
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onClick={onClick}
      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
      className={`rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900 ${onClick ? 'cursor-pointer hover:border-gray-300 dark:hover:border-gray-600' : ''} `}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Replace gap with margin-top overrides for activity list (space-y-3 uses margins, not gap on block containers) - Add data-slot attributes to loading skeleton branch for consistent condensed styling during loading states

- Add 5 data-slots: provider-search, provider-search-input, provider-search-results, provider-search-hero, provider-search-hero-title - Condensed CSS: smaller input row (2rem buttons), compact hero variant (0.9375rem title, 0.6875rem subtitle, 20rem max-width)

Copilot

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.

…ats grid

- Add 4 data-slots: provider-search-filters, provider-service-select, provider-compact-filter, provider-active-filters - Condensed CSS: smaller inputs (1.75rem height), compact labels, tighter CompactFilterBar (1.5rem inputs), smaller ActiveFilters pills

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

src/components/ProviderOverview/ProviderOverview.tsx:452

StatCard uses role="button" on a <div> but its onKeyDown only activates on Enter. For keyboard accessibility, Space should also activate (and should call preventDefault() to avoid page scroll). Update the key handler to treat Space the same as Enter when onClick is provided.

    <div
      data-slot="provider-overview-stat"
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onClick={onClick}
      onKeyDown={(e) => e.key === 'Enter' && onClick?.()}
      className={`rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-900 ${onClick ? 'cursor-pointer hover:border-gray-300 dark:hover:border-gray-600' : ''} `}

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…iceTag selector - Scope a[href*='maps'] to provider-detail-content to avoid hitting Directions action button in ActionButtonsBar - Add data-slot='provider-service-tag' on ServiceTag span and target it directly instead of broad 'span' selector that hit dropdown options

- Add 5 data-slots: provider-settings, provider-settings-header, provider-settings-notifications, provider-settings-scheduling, provider-settings-payments (plus skeleton) - Condensed CSS: smaller header (1rem title), compact tabs, tighter cards/inputs/labels, smaller toggle rows, compact payment method cards

Copilot

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…s root spacing - Wrap Quick Actions and Recent Activity Cards in div wrappers so data-slot doesn't override Card's built-in data-slot='card' - Replace gap (no effect on block container) with margin-top on provider-settings root > * + * for proper condensed spacing - Update PR description to include ProviderSearchFilters + ProviderSettings

- Add 6 data-slots: recurring-service-card, recurring-service-header, recurring-service-body, recurring-service-add, recurring-service-modal, recurring-service-grid - Condensed CSS: compact card (1px border, 0.5rem radius), smaller header/body/field values, tighter grid gap, compact modal form

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Add 7 data-slots: report-dashboard, report-dashboard-header, report-dashboard-metrics, report-dashboard-chart, report-dashboard-top-lists, report-dashboard-services, report-dashboard-employers (plus skeleton) - Chart/Services/Employers Cards wrapped in divs to preserve Card's built-in data-slot='card' - Condensed CSS: compact header, smaller metric cards (1.125rem value), shorter chart (8rem), smaller ranked items with thinner progress bars

… className - ProviderSettings: move data-slot off TabsContent onto inner div wrappers for Notifications, Scheduling, and Payments tabs (preserves built-in data-slot='tabs-content') - ProviderSettings: replace template literal className with cn() utility - ProviderOverview: replace template literal className with cn() utility - Both files: add import { cn } from '../../utils/cn'

- 7 data-slots: schedule-calendar, schedule-calendar-header, schedule-calendar-grid, schedule-calendar-day-headers, schedule-calendar-time-labels, schedule-calendar-appointment, schedule-calendar-legend - Condensed CSS: compact header (0.5rem padding, 1.75rem buttons), narrower time labels (2.75rem), shorter hour rows (2.5rem), smaller appointment text, compact legend - Switch className to cn() utility for safe undefined handling

Copilot

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.

- 8 data-slots: service-accordion, service-accordion-category, service-accordion-category-header, service-accordion-category-content, service-accordion-subcategory, service-accordion-link, service-tag-cloud, service-list - Condensed CSS: compact headers (0.5rem padding), smaller text (0.8125rem), tighter content/link spacing, smaller icons, compact tag cloud pills, reduced list row height - Covers all variants (default, bordered, cards) and sub-components (ServiceTagCloud, ServiceList, ServiceLink)

…Name - Move data-slot from Card to wrapper div for both ServiceCard and AddServiceCard (preserves Card's built-in data-slot='card') - Switch template literal className to cn() utility - Update condensed CSS selectors to target [data-slot='card'] child

Copilot

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/ScheduleCalendar/ScheduleCalendar.tsx:368

This element uses role="button"/tabIndex={0} but only activates on Enter. For keyboard accessibility it should also activate on Space (and typically call e.preventDefault() for Space to avoid page scroll).

                      <div
                        key={appointment.id}
                        data-slot="schedule-calendar-appointment"
                        role="button"
                        tabIndex={0}
                        className={`absolute right-1 left-1 cursor-pointer overflow-hidden rounded border-l-4 px-2 py-1 text-xs text-white ${getStatusColor(appointment.status)}`}
                        style={{
                          top: position.top,
                          height: position.height,
                          minHeight: '1.5rem',
                        }}
                        onClick={() => onAppointmentClick?.(appointment)}
                        onKeyDown={(e) =>
                          e.key === 'Enter' && onAppointmentClick?.(appointment)
                        }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- 5 data-slots: service-pricing-manager, service-pricing-header, service-pricing-filters, service-pricing-table, service-pricing-row - Condensed CSS: compact header (1.125rem title), tighter filter card, smaller inputs/buttons, compact table rows and badges - Switch className to cn() utility, fix duplicate Modal open prop

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

…pacing)

Copilot AI review requested due to automatic review settings April 8, 2026 02:03

Copilot started reviewing on behalf of garrity-miepub April 8, 2026 02:03 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

Comment thread src/styles/condensed-view.css Outdated

garrity-miepub added 2 commits April 7, 2026 22:11

Copilot AI review requested due to automatic review settings April 8, 2026 21:56

Copilot started reviewing on behalf of garrity-miepub April 8, 2026 21:56 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

Comment thread src/components/ProviderCard/ProviderCard.tsx Outdated

garrity-miepub added 2 commits April 8, 2026 18:19

fix: address Copilot review on PR #168

e676290

- Move {...props} before data-slot/data-variant in ProviderCard to prevent consumer override of internal attributes - Scope book button CSS to provider-detail-content instead of provider-detail-header to avoid affecting action bar buttons

feat(ProviderOverview): add condensed view support

bba6b34

- Add 6 data-slot attributes (root, header, stats grid, stat card, quick actions card, recent activity card) - Add condensed CSS for header logo, stat cards, quick actions, recent activity items, card headers/content

Copilot AI review requested due to automatic review settings April 8, 2026 22:37

Copilot started reviewing on behalf of garrity-miepub April 8, 2026 22:37 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

Comment thread src/components/ProviderOverview/ProviderOverview.tsx

garrity-miepub added 2 commits April 8, 2026 19:26

fix(ProviderOverview): address Copilot review on PR #168

ca97b97

- Replace gap with margin-top overrides for activity list (space-y-3 uses margins, not gap on block containers) - Add data-slot attributes to loading skeleton branch for consistent condensed styling during loading states

Copilot AI review requested due to automatic review settings April 9, 2026 00:35

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 00:36 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/components/ProviderOverview/ProviderOverview.tsx Outdated

Comment thread src/styles/condensed-view.css

garrity-miepub changed the title ~~feat(ProviderCard): add condensed view support~~ feat(condensed): add condensed view support for Provider components Apr 9, 2026

garrity-miepub added 2 commits April 8, 2026 20:44

fix(condensed): add missing data-slot to ProviderOverview skeleton st…

da58fe0

…ats grid

Copilot AI review requested due to automatic review settings April 9, 2026 00:56

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 00:57 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

Comment thread src/styles/condensed-view.css Outdated

garrity-miepub added 2 commits April 8, 2026 21:22

Copilot AI review requested due to automatic review settings April 9, 2026 01:46

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 01:47 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

Comment thread src/components/ProviderOverview/ProviderOverview.tsx Outdated

Comment thread src/components/ProviderOverview/ProviderOverview.tsx Outdated

Comment thread src/styles/condensed-view.css

garrity-miepub added 2 commits April 8, 2026 21:58

Copilot AI review requested due to automatic review settings April 9, 2026 02:14

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 02:15 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

garrity-miepub added 3 commits April 8, 2026 22:26

Copilot AI review requested due to automatic review settings April 9, 2026 03:00

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 03:01 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/components/ScheduleCalendar/ScheduleCalendar.tsx

garrity-miepub added 2 commits April 8, 2026 23:15

Copilot AI review requested due to automatic review settings April 9, 2026 03:50

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 03:50 View session

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/components/ReportDashboard/ReportDashboard.tsx Outdated

Comment thread src/components/ReportDashboard/ReportDashboard.tsx

garrity-miepub added 2 commits April 9, 2026 00:04

fix: use cn() for ReportDashboard className to avoid undefined class

a86f6e2

Copilot AI review requested due to automatic review settings April 9, 2026 04:10

Copilot started reviewing on behalf of garrity-miepub April 9, 2026 04:10 View session

garrity-miepub marked this pull request as ready for review April 9, 2026 04:14

Copilot AI reviewed Apr 9, 2026

View reviewed changes

Comment thread src/styles/condensed-view.css Outdated

fix: remove ineffective gap on provider-overview (uses margin-based s…

01bcee5

…pacing)

garrity-miepub merged commit 53981d2 into main Apr 9, 2026
10 checks passed

garrity-miepub deleted the feature/condensed-view-provider-continued branch April 9, 2026 04:20

Conversation

garrity-miepub commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

cloudflare-workers-and-pages Bot commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying ui with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

garrity-miepub commented Apr 8, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Apr 8, 2026 •

edited

Loading