feat(circuit-ui): Callout component#3733
Open
matoous wants to merge 2 commits into
Open
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 48a0a68 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
matoous
force-pushed
the
md/callout-component
branch
from
6c51f79 to
6e9d93f
Compare
Contributor
|
Size Change: +721 B (+0.09%) Total Size: 837 kB 📦 View Changed
ℹ️ View Unchanged
|
matoous
force-pushed
the
md/callout-component
branch
from
6e9d93f to
537ad78
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3733 +/- ##
==========================================
+ Coverage 93.48% 93.49% +0.01%
==========================================
Files 201 202 +1
Lines 4540 4547 +7
Branches 1780 1782 +2
==========================================
+ Hits 4244 4251 +7
Misses 267 267
Partials 29 29
🚀 New features to boost your workflow:
|
matoous
force-pushed
the
md/callout-component
branch
from
537ad78 to
d36567c
Compare
matoous
force-pushed
the
md/callout-component
branch
from
d36567c to
36dc335
Compare
matoous
force-pushed
the
md/callout-component
branch
from
36dc335 to
c17579b
Compare
matoous
force-pushed
the
md/callout-component
branch
from
c17579b to
c6dfb44
Compare
matoous
commented
Jul 1, 2026
Contributor
Author
There was a problem hiding this comment.
note: mostly adopted for InlineNotification.
matoous
force-pushed
the
md/callout-component
branch
from
c6dfb44 to
dcb2fe7
Compare
matoous
force-pushed
the
md/callout-component
branch
from
dcb2fe7 to
c324245
Compare
sirineJ
reviewed
Jul 3, 2026
|
|
||
| <Story of={Stories.Base} /> | ||
| <Props /> | ||
|
|
Contributor
There was a problem hiding this comment.
We usually structure this page in two main sections (When to use, How to use) and them some optional ones (Related components, Accessibility, or any component specific guidelines)
When to use ideally lists one or two valid use cases, gives some tips about copy and content, and can suggest more suitable components for similar but not so accurate usages. In the example of the Callout, we can suggest using the NotificationInline for semantic feedback to user actions (danger, success and warning), and the NotificationBanner for dismissible content or content with a CTA.
How to use details things like variants, different states and possible customisation of the component.
Contributor
Author
There was a problem hiding this comment.
Updated, thanks! Can you please check if my changes match the desired structure?
|
|
||
| ### Callouts with rich content | ||
|
|
||
| The callout body supports arbitrary React nodes. |
Contributor
There was a problem hiding this comment.
Although in theory yes, I think we can recommend that interactive content should be limited to links.
| <Icon aria-hidden="true" size="24" /> | ||
| </div> | ||
| <span className={utilClasses.hideVisually}>{iconLabel}</span> | ||
| <Body as="div" className={classes.content}> |
Contributor
Author
There was a problem hiding this comment.
Because I initially had body as a string (not div and support for arbitrary react nodes) and forgot to fix this when refactoring 🤦 fixed.
| import { Callout, type CalloutProps } from './Callout.js'; | ||
|
|
||
| export default { | ||
| title: 'Components/Callout', |
Contributor
There was a problem hiding this comment.
Suggested change
| title: 'Components/Callout', | |
| title: 'Notifications/Callout', |
Contributor
Author
There was a problem hiding this comment.
This is where I had it initially and then moved it under Components. Given Callout is more meant for a static content, it felt a little out of place under Notifications and I was afraid it might make it easier to use accidentally NotificationInline instead of Callout and vice versa.
I updated it, but let me know what do you thing about the thought above.
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
2 participants
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.
Purpose
On text-heavy websites we sometimes want to call out a specific feature, warning, and similar. One example being our developer portal: https://developer.sumup.com/online-payments/testing. This use-case doesn't align well with the existing
InlineNotificationwhich comes the closest in desired style but has different purpose that shouldn't be overloaded.Approach and changes
Adds a new
Calloutcomponent that is close in implementation toInlineNotificationbut:promovarianticonactionRelated (internal Slack thread): https://sumup.slack.com/archives/CURHLN94K/p1782128993767939
Definition of done