feat: add condensed view for text & data display components by garrity-miepub · Pull Request #146 · mieweb/ui

garrity-miepub · 2026-03-24T02:58:15Z

Add a Storybook toolbar density selector (Standard/Condensed) that toggles a 'condensed' CSS class on the iframe body, enabling pure-CSS density overrides for maximum information density on screen.

Storybook toolbar:

Add density globalType with collapse icon and Standard/Condensed options
Add initialGlobals for density (Storybook 10 format)
Toggle body.condensed class in applyGlobalTheme decorator

Components updated with data-slot attributes:

Badge, CountBadge, Avatar, InventoryManager, PatientHeader
ProviderUsersTable (+ RowActionsMenu overflow menu refactor)
Card, ServiceCard, AddServiceCard, ServiceGrid
StripeBadge, StripeSecureBadge
Timeline (TimelineProgress, TimelineEventList, OrderConfirmation)
AGGrid

Condensed CSS overrides in base.css (body.condensed selectors):

Reduced padding, font sizes, border-radius across all components
Tighter grid gaps for ServiceGrid
Smallfeat: add condensed density view for medical prws Add a Storybook toolbar density selector (Standard/Condenser a 'condensed' CSS class on the iframe body, enabling pure-CSS density oveevoverrides for maximum information density on s card layout

condensed-1.mov

Add a Storybook toolbar density selector (Standard/Condensed) that toggles a 'condensed' CSS class on the iframe body, enabling pure-CSS density overrides for maximum information density on screen. Storybook toolbar: - Add density globalType with collapse icon and Standard/Condensed options - Add initialGlobals for density (Storybook 10 format) - Toggle body.condensed class in applyGlobalTheme decorator Components updated with data-slot attributes: - Badge, CountBadge, Avatar, InventoryManager, PatientHeader - ProviderUsersTable (+ RowActionsMenu overflow menu refactor) - Card, ServiceCard, AddServiceCard, ServiceGrid - StripeBadge, StripeSecureBadge - Timeline (TimelineProgress, TimelineEventList, OrderConfirmation) - AGGrid Condensed CSS overrides in base.css (body.condensed selectors): - Reduced padding, font sizes, border-radius across all components - Tighter grid gaps for ServiceGrid - Smallfeat: add condensed density view for medical prws Add a Storybook toolbar density selector (Standard/Condenser a 'condensed' CSS class on the iframe body, enabling pure-CSS density oveevoverrides for maximum information density on s card layout

Copilot

Pull request overview

Adds a Storybook-level “Density” toggle (Standard/Condensed) that applies a condensed class to the preview iframe body, enabling scoped CSS overrides for a higher-density “medical professional” UI view.

Changes:

Add Storybook density global + initialGlobals, and toggle body.condensed from the preview decorator.
Introduce extensive body.condensed … overrides in src/styles/base.css for many components.
Add data-slot attributes to multiple components to provide stable CSS hooks for condensed overrides.

Reviewed changes

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

Show a summary per file

File	Description
`src/styles/base.css`	Adds condensed-density CSS overrides scoped under `body.condensed` and `data-slot` hooks.
`src/components/Timeline/Timeline.tsx`	Adds `data-slot` hooks for condensed styling of timeline subcomponents.
`src/components/StripeBadge/StripeBadge.tsx`	Adds `data-slot` hooks for condensed styling of Stripe badges.
`src/components/ServiceGrid/ServiceGrid.tsx`	Adds `data-slot` hook for condensed grid spacing overrides.
`src/components/ServiceCard/ServiceCard.tsx`	Adds `data-slot` hooks and adjusts AddServiceCard min-height (now affects all densities).
`src/components/ProviderUsersTable/ProviderUsersTable.tsx`	Adds `data-slot` hook and refactors row actions into an overflow menu.
`src/components/PatientHeader/PatientHeader.tsx`	Adds `data-slot` hook for condensed header overrides.
`src/components/InventoryManager/InventoryManager.tsx`	Adds `data-slot` hook for condensed layout overrides.
`src/components/CountBadge/CountBadge.tsx`	Adds `data-slot` hooks (and replaces prior `data-count-badge` attribute).
`src/components/Card/Card.tsx`	Adds `data-slot` hook so condensed styles can target Card consistently.
`src/components/Badge/Badge.tsx`	Adds `data-slot` hook for condensed badge overrides.
`src/components/Avatar/Avatar.tsx`	Adds `data-slot` hooks for condensed avatar + avatar-group overrides.
`src/components/AGGrid/AGGrid.tsx`	Adds `data-slot` hook for condensed AG Grid overrides.
`.storybook/preview.tsx`	Adds density globals + toggles `body.condensed` from Storybook globals.

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

src/components/CountBadge/CountBadge.tsx

src/components/ProviderUsersTable/ProviderUsersTable.tsx

src/components/ServiceCard/ServiceCard.tsx

…ck-outside by open state, revert AddServiceCard min-height

cloudflare-workers-and-pages · 2026-03-24T18:03:57Z

Deploying ui with Cloudflare Pages

Latest commit:	`9d6a3f7`
Status:	✅ Deploy successful!
Preview URL:	https://a026b5f7.ui-6d0.pages.dev
Branch Preview URL:	https://feature-condensed-view-text.ui-6d0.pages.dev

View logs

Copilot

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.

Copilot · 2026-03-24T18:25:33Z

src/styles/base.css

+
+body.condensed [data-slot='card'] {
+  border-radius: 0.375rem;
+  padding: 0.375rem !important;


body.condensed [data-slot='card'] forces padding: 0.375rem !important, which overrides Card's padding variants and the pl-4 left padding that Card applies when accent is set. In condensed mode this can cause accented cards to lose the left inset and have content overlap the accent bar. Consider scoping the condensed padding override so it preserves accent padding (e.g., add a follow-up rule that restores padding-left for accented cards) or avoid overriding padding on the base Card and instead target only the specific card variants/components that need condensed spacing.

Suggested change

padding: 0.375rem !important;

padding-top: 0.375rem !important;

padding-right: 0.375rem !important;

padding-bottom: 0.375rem !important;

Fixed in 7f7e58e. Changed the padding shorthand to directional properties (padding-top, padding-right, padding-bottom) with !important, leaving padding-left untouched. This preserves the pl-4 left inset that Card applies when the accent prop is set, so accented cards won't have content overlapping the accent bar in condensed mode.

Copilot · 2026-03-24T18:25:34Z

src/components/ProviderUsersTable/ProviderUsersTable.tsx

+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => setOpen((v) => !v)}
+        aria-label="Row actions"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="h-7 w-7"
+      >


RowActionsMenu's trigger uses the shared <Button> component without an explicit type. Since Button renders a native <button> and doesn't set a default type, this will default to type="submit" when rendered inside a <form>, potentially causing unintended submissions. Set type="button" on this trigger button (and any other non-submit action buttons) to make the behavior safe when embedded in forms.

Fixed in 7f7e58e. Added type="button" to the RowActionsMenu trigger <Button> so it won't default to type="submit" when rendered inside a <form>. The menu item buttons already had type="button" set correctly.

Copilot

Pull request overview

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

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

src/styles/base.css

.storybook/preview.tsx

src/components/ProviderUsersTable/ProviderUsersTable.tsx

- Card: use directional padding (top/right/bottom) instead of shorthand so accent pl-4 left padding is preserved in condensed mode - ProviderUsersTable: add type="button" to RowActionsMenu trigger to prevent implicit form submission - CountBadge: add data-slot="count-badge-menu-scroll" to scroll container and update CSS selector (replaces brittle .max-h-[240px]) - PatientHeader: remove dead gap rule on non-flex space-y-2.5 container; keep working > * + * margin override - AGGrid: scrollbars now use opacity fade instead of collapsing to 0 height/width, with :focus-within fallback for keyboard/touch users - Storybook: include density in URL globals parsing so ?globals=density:condensed works on initial page load

…w-text-data-display-components

- Replace hand-rolled menu (useState, useRef, useEffect click-outside, useEscapeKey, custom role=menu div, raw button elements) with the existing Dropdown/DropdownItem/DropdownSeparator components - Gets focus management, ARIA attributes, keyboard nav, dark mode, and consistent styling for free - Add DropdownSeparator between normal and destructive actions - Remove unused imports: React, cn, useEscapeKey - Net reduction: ~65 lines of custom code Addresses Copilot review comment #7 on PR #146 (a11y regression).

Copilot

Pull request overview

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

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

src/components/ProviderUsersTable/ProviderUsersTable.tsx

src/styles/base.css

src/components/ProviderUsersTable/ProviderUsersTable.tsx

- useClickOutside: add optional 'enabled' parameter (default true); listeners only attach when enabled, reducing global listener count - Dropdown: pass isOpen to useClickOutside so listeners are only active while the menu is open (benefits all Dropdown consumers) - ProviderUsersTable: use optional chaining (onResendInvite?., onRemove?.) for strict TS safety in RowActionsMenu callbacks

Copilot AI review requested due to automatic review settings March 24, 2026 02:58

Copilot started reviewing on behalf of garrity-miepub March 24, 2026 02:58 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

src/components/CountBadge/CountBadge.tsx Show resolved Hide resolved

src/components/ProviderUsersTable/ProviderUsersTable.tsx Outdated Show resolved Hide resolved

src/components/ServiceCard/ServiceCard.tsx Outdated Show resolved Hide resolved

fix: address Copilot review - restore data-count-badge attr, gate cli…

2e3f414

…ck-outside by open state, revert AddServiceCard min-height

style: fix prettier formatting in 4 files

e72df2a

Copilot AI review requested due to automatic review settings March 24, 2026 18:20

Copilot started reviewing on behalf of garrity-miepub March 24, 2026 18:21 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

feat: add condensed density support for WebChartReportViewer

39c8363

garrity-miepub marked this pull request as ready for review March 24, 2026 19:02

Copilot AI review requested due to automatic review settings March 24, 2026 19:02

Copilot started reviewing on behalf of garrity-miepub March 24, 2026 19:03 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

garrity-miepub added 3 commits March 24, 2026 15:14

Merge remote-tracking branch 'origin/main' into feature/condensed-vie…

6069e9b

…w-text-data-display-components

Copilot AI review requested due to automatic review settings March 24, 2026 19:53

Copilot started reviewing on behalf of garrity-miepub March 24, 2026 19:53 View session

Copilot AI reviewed Mar 24, 2026

View reviewed changes

src/components/ProviderUsersTable/ProviderUsersTable.tsx Show resolved Hide resolved

src/styles/base.css Show resolved Hide resolved

src/components/ProviderUsersTable/ProviderUsersTable.tsx Show resolved Hide resolved

garrity-miepub changed the title ~~feat: add condensed density view for medical professional UI~~ feat: add condensed view for text & data display components Mar 24, 2026

garrity-miepub merged commit 7249a4c into main Mar 24, 2026
10 checks passed

garrity-miepub deleted the feature/condensed-view-text-data-display-components branch March 24, 2026 21:47

garrity-miepub mentioned this pull request Mar 24, 2026

feat: add condensed view for form & input components #147

Draft

-  padding: 0.375rem !important;
+  padding-top: 0.375rem !important;
+  padding-right: 0.375rem !important;
+  padding-bottom: 0.375rem !important;

Conversation

garrity-miepub commented Mar 24, 2026

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!

Uh oh!

cloudflare-workers-and-pages bot commented Mar 24, 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

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

garrity-miepub Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 24, 2026

Choose a reason for hiding this comment

Uh oh!

garrity-miepub Mar 24, 2026

Choose a reason for hiding this comment

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cloudflare-workers-and-pages bot commented Mar 24, 2026 •

edited

Loading