ECHOES-1395 Add an illustration prop to Popovers

[jeremy-davis-sonarsource]

---

Summary by Gitar

• Components:
  • Added illustration prop to Popover with container and styling support
• Documentation:
  • Added comprehensive TSDoc comments and example usage for Popover

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	1b7ed35
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a7c34432fcce6000807355c
😎 Deploy Preview	https://deploy-preview-748--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1395

[david-cho-lerat-sonarsource]

1 question about centering, but 👍

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube

[gitar-bot]

Code Review ✅ Approved 6 resolved / 6 findings

Adds an illustration prop and comprehensive TSDoc comments to Popovers, addressing the hardcoded margin and arrow tint findings. No issues found.

✅ 6 resolved

✅ Quality: Hardcoded marginTop value bypasses cssVar in story

📄 stories/Popover-stories.tsx:87
The inline style style={{ marginTop: '30vh' }} uses a raw hardcoded length instead of routing through the cssVar design-token helper, which the project conventions require even for inline style props. Since 30vh is a viewport-relative demo hack (to give the illustration-bearing popover room to render above the trigger), consider using a decorator/wrapper for demo positioning or a token-based spacing value rather than a hardcoded literal.

✅ Bug: Arrow tint no longer matches illustration background color

📄 src/components/popover/PopoverStyles.tsx:78 📄 src/components/popover/PopoverStyles.tsx:94
The illustration container's background changed to cssVar('color-background-neutral-subtle-default') (line 94), but the arrow tint at line 78 still fills with cssVar('color-surface-disabled'). The comment on lines 71-74 states the arrow should match the illustration background, so the arrow next to an illustration will now render a mismatched color. Update the arrow fill on line 78 to cssVar('color-background-neutral-subtle-default') to keep them consistent.

✅ Bug: Arrow tinted for illustration even when none is provided

📄 src/components/popover/Popover.tsx:161 📄 src/components/popover/PopoverStyles.tsx:73-77
data-has-illustration={isDefined(illustration)} passes a boolean; React renders data-* attributes with a false value as the string "false" rather than omitting them (only null/undefined are dropped). The CSS selectors &[data-has-illustration] match on attribute presence, so the arrow gets fill: color-surface-disabled even when no illustration is set (on bottom side, or left/right + align start). Fix by only emitting the attribute when true, e.g. data-has-illustration={isDefined(illustration) || undefined}, or match the value explicitly with &[data-has-illustration='true'].

✅ Quality: Use isDefined() for illustration render guard

📄 src/components/popover/Popover.tsx:145
Per the component conventions, conditional-render guards should use the isDefined() helper (already imported here) rather than raw truthiness. The newly added {illustration && (...)} should be {isDefined(illustration) && (...)} for consistency with line 161.

✅ Quality: children and className props lack TSDoc

📄 src/components/popover/Popover.tsx:56-57
This PR adds TSDoc to the PopoverProps interface, but children and className remain the only undocumented public props. Add /** */ doc comments to complete the interface documentation.

...and 1 more resolved from earlier reviews

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}