feat(ProviderCard): add condensed view support#168
Draft
garrity-miepub wants to merge 2 commits intomainfrom
Draft
feat(ProviderCard): add condensed view support#168garrity-miepub wants to merge 2 commits intomainfrom
garrity-miepub wants to merge 2 commits intomainfrom
Conversation
Contributor
garrity-miepub
commented
Apr 8, 2026
garrity-miepub
commented
- 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
- 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
Deploying ui with
|
| Latest commit: |
9f8a294
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0bc906af.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-provi-8bpu.ui-6d0.pages.dev |
There was a problem hiding this comment.
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-slothooks to keyProviderCardsub-elements (root, logo, content, header, address, phone, services, footer) plusProviderCardGrid. - Added
data-varianton theProviderCardroot for variant-aware condensed CSS targeting. - Implemented condensed CSS overrides for
compact,list, andfeaturedvariants (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
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.