feat(Alert, ConnectionStatus): add condensed view support#151
Merged
garrity-miepub merged 5 commits intomainfrom Mar 28, 2026
Merged
feat(Alert, ConnectionStatus): add condensed view support#151garrity-miepub merged 5 commits intomainfrom
garrity-miepub merged 5 commits intomainfrom
Conversation
Add data-slot attributes to Alert, AlertTitle, AlertDescription, and dismiss button. Add condensed CSS rules for tighter padding, smaller text, repositioned icon, and compact dismiss button.
Deploying ui with
|
| Latest commit: |
3faebb1
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c67b2f68.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-condensed-view-statu.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
Adds condensed-density support for the Alert component by introducing data-slot styling hooks and condensed CSS overrides, aligning Alert with the repo’s existing condensed-mode approach.
Changes:
- Add
data-slotattributes toAlert,AlertTitle,AlertDescription, and the dismiss button. - Add condensed-mode CSS rules for Alert spacing/typography/icon/dismiss button sizing and positioning.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/styles/condensed-view.css | Introduces condensed-mode overrides targeting new Alert data-slot hooks. |
| src/components/Alert/Alert.tsx | Adds data-slot attributes to enable condensed-mode styling. |
Comments suppressed due to low confidence (1)
src/components/Alert/Alert.tsx:82
data-slot="alert"is set before{...props}is spread, so a consumer-provideddata-slotinpropswill override it and break condensed-mode styling hooks that target[data-slot='alert']. Consider spreading{...props}earlier (or explicitly omitting/overridingdata-slotfromprops) to keep the slot stable.
<div
ref={ref}
role="alert"
data-slot="alert"
className={cn(
alertVariants({ variant }),
React.isValidElement(icon) && 'pl-11',
dismissible && 'pr-10',
className
)}
{...props}
>
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…efault Add data-slot attributes to ConnectionStatusOverlay, UpdateAvailableOverlay, ConnectionStatusBadge, and ConnectionStatusBar. Add condensed CSS rules for compact cards, tighter badge pill, and thinner status bar. Fix UpdateAvailableOverlay defaulting logoUrl to a non-existent asset path which caused 404s in Storybook — now defaults to undefined so the inline SVG fallback renders instead.
garrity-miepub
force-pushed
the
feature/condensed-view-status-indicators
branch
from
2e0a97c to
8311f1b
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Use p + p selectors for margin-top in overlay content paragraphs - Add svg.h-12 selector for UpdateAvailableOverlay SVG fallback icon - Change appName default from 'BlueHive' to 'App' (generic library)
garrity-miepub
changed the title
Add data-slot attributes to ServiceBadge (all 3 render paths), remove button, ServiceBadgeGroup, ServiceTagCloudBadges, SelectedServicesBadges, and DOTBadge. Add condensed CSS rules for tighter padding, smaller text, square corners, and reduced gap in group containers.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 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.
Condensed View: Status Indicators & Badges
Adds
data-slotattributes and condensed CSS rules for:Alert
data-sloton alert container, title, description, dismiss buttonpr-10override for dismissible alertsConnectionStatus
data-sloton all 4 sub-components (overlay, update overlay, badge, bar)logoUrldefault changed from broken path toundefined;appNamedefault changed to'App'ServiceBadge
data-sloton ServiceBadge (span/a/button paths), remove button, ServiceBadgeGroup, ServiceTagCloudBadges, SelectedServicesBadges, DOTBadgeAll rules in
src/styles/condensed-view.cssusingbody.condensed [data-slot='x']pattern with!important(required for Tailwind 4@layer utilitiesspecificity).