feat(PatientHeader): add showCountBadges prop; hide zero-count badges

[garrity-miepub]

• CountBadge: render nothing when count is 0 (new showZero prop opts back in); add data-slot=count-badge-root on the wrapper
• PatientHeader: new showCountBadges prop (default true); when false, count badges in the actions slot are hidden while custom action buttons remain visible
• Stories: HiddenCountBadges, WithZeroCounts, ZeroCount + control

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	b1f6543
Status:	✅  Deploy successful!
Preview URL:	https://9e4081e7.ui-6d0.pages.dev
Branch Preview URL:	https://feature-patient-header-count.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Adds configurability around rendering count badges by (1) hiding zero-count badges by default in CountBadge (with an opt-in), and (2) allowing PatientHeader to hide only count badges in its actions slot while leaving other custom actions visible.

Changes:

• CountBadge: introduce showZero prop and return null when count === 0 unless opted in; add a data-slot marker on the wrapper.
• PatientHeader: introduce showCountBadges prop and conditionally hide count badges via a wrapper selector.
• Storybook: add stories/controls demonstrating hidden count badges and zero-count behavior.

Reviewed changes

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

File	Description
src/components/PatientHeader/PatientHeader.tsx	Adds showCountBadges prop and Tailwind selector to hide count badges in the actions slot.
src/components/PatientHeader/PatientHeader.stories.tsx	Adds stories to demonstrate hiding count badges and zero-count behavior.
src/components/CountBadge/CountBadge.tsx	Adds showZero prop, hides zero-count badges by default, and adds a data-slot marker for styling.
src/components/CountBadge/CountBadge.stories.tsx	Adds a story demonstrating default hidden zero-count badges and showZero opt-in.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

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

Suppressed comments (2)

src/components/CountBadge/CountBadge.tsx:673

• CountBadge can render null when hidden is true, but useAnchoredPosition still receives open: Boolean(showMenu && open). If the badge was open when count becomes 0, the hook may still register scroll/resize observers for one render even though the anchor/floating nodes are no longer rendered. Consider deriving a menuOpen value that also checks !hidden and passing that to useAnchoredPosition so positioning work/listeners stop immediately when the badge becomes hidden.

    const showMenu = items && items.length > 0;
    const hidden = count === 0 && !showZero;

    // Close the popover when the badge becomes hidden so document listeners
    // (Escape/outside-click) don't stay active and the menu doesn't reappear

src/components/PatientHeader/PatientHeader.stories.tsx:289

• HiddenCountBadges claims it demonstrates that “custom actions still render”, but it currently reuses Default.args where actions is only CountBadges. That means the story doesn’t actually validate the intended behavior (count badges hidden while other action buttons remain visible). Update the story’s actions to include at least one non-CountBadge action (e.g. a Button) alongside a CountBadge.

/** Count badges hidden via `showCountBadges={false}` — custom actions still render. */
export const HiddenCountBadges: Story = {
  args: {
    ...Default.args,
    showCountBadges: false,

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

Suppressed comments (1)

src/components/PatientHeader/PatientHeader.tsx:706

• showCountBadges={false} hides CountBadge roots via CSS, but CountBadge menus are rendered in a createPortal(..., document.body) when open is true. If a user opens a badge menu and showCountBadges later flips to false, the badge root becomes display:none while the portal menu can remain open and potentially jump to (0,0) due to a hidden anchor. Consider forcing a remount of the actions subtree when showCountBadges changes so any open badge menus unmount/close.

                    'order-4 w-full md:order-2 md:w-auto md:shrink-0',
                    'mt-1 md:mt-0',
                    '[&_button[data-count-badge]]:gap-1.5 [&_button[data-count-badge]]:px-2 [&_button[data-count-badge]]:py-0.5 [&_button[data-count-badge]]:text-xs',
                    'md:[&_button[data-count-badge]]:gap-2 md:[&_button[data-count-badge]]:px-3 md:[&_button[data-count-badge]]:py-1 md:[&_button[data-count-badge]]:text-sm',
                    // Hide count badges (but not other custom actions) when disabled
                    !showCountBadges &&
                      '[&_[data-slot=count-badge-root]]:hidden'