[WEB-8150] feat(banner): dedicated dismiss slot, per-placement title weight, and icon-sizing fixes#226
Open
codingwolf-at wants to merge 6 commits into
Open
[WEB-8150] feat(banner): dedicated dismiss slot, per-placement title weight, and icon-sizing fixes#226codingwolf-at wants to merge 6 commits into
codingwolf-at wants to merge 6 commits into
Conversation
- Modified the `BannerTitle` component to accept a `placement` prop, allowing for dynamic styling based on its position within the banner. - Adjusted related stories to utilize the new `placement` prop, ensuring consistent rendering across different banner configurations. - Changed the `magnitude` prop of `IconButton` in banner stories from "md" to "sm" for a more compact appearance. - Enhanced the `bannerTitleVariants` to define styles based on the `placement`, improving visual consistency.
|
📚 Storybook preview: https://pr-226-propel-storybook.vamsi-906.workers.dev |
- Added a decorator to the Banner stories to standardize the layout with consistent spacing. - Replaced div wrappers with fragments in multiple story render functions to simplify the structure. - Ensured that the visual presentation of the Banner component remains consistent across different story variations.
…ability - Introduced an `onDismiss` prop to the Banner component, allowing for a dedicated dismiss control instead of appending a dismiss button to actions. - Updated stories to utilize the new `onDismiss` functionality, enhancing the clarity of the dismiss action. - Adjusted documentation to reflect the changes in dismiss control structure, ensuring consistency with Figma design specifications.
…iations - Updated the `Tones` story to display banner tones side by side for both `inline` and `page` placements, improving visual clarity. - Enhanced documentation to clarify the layout differences between the two placements, ensuring better understanding of component behavior. - Adjusted the `BannerProps` documentation to include layout considerations for the actions group, emphasizing the importance of viewport width in design.
…umentation - Refactored the Banner component to streamline icon rendering logic, allowing for a single `BannerIcon` wrapper to handle default and custom icons. - Updated the `IconButton` in stories to use a smaller magnitude for a more compact appearance. - Enhanced comments in `variants.ts` to clarify the purpose and styling of the banner's description block, ensuring better alignment with potential design needs.
codingwolf-at
changed the title
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
anmolsinghbhatia
requested changes
Jul 15, 2026
| placement: { | ||
| page: "[--node-size:1.25rem]", | ||
| // Figma: 16×16 icon, 2px top/bottom padding on the slot (hugs to 16×20). | ||
| page: "py-0.5 [--node-size:1rem]", |
There was a problem hiding this comment.
The Figma page banner uses a 20px leading icon (inline is 16px). This makes the page glyph 16px with vertical padding, so it will render undersized—can we retain --node-size: 1.25rem for page OR Can we add a variant if there’s a use case for a 16x16 size ?
| <IconButton | ||
| prominence="ghost" | ||
| tone="neutral" | ||
| magnitude="sm" |
There was a problem hiding this comment.
Figma uses a 24px/16px dismiss control for page and 20px/14px for inline. Hardcoding sm makes the page control undersized—could the magnitude derive from placement?
… placement - Added an `onDismiss` prop to the Banner component for improved dismiss control in stories. - Adjusted the `magnitude` of the `IconButton` based on the placement prop, enhancing visual consistency. - Updated comments in `variants.ts` to clarify icon sizing based on placement, aligning with design specifications.
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.
Summary
Finalizes the
Bannercomponent for the design system. Adds a first-class dismisscontrol, makes the title's weight placement-aware, corrects the leading-icon sizing to
match Figma, and simplifies/expands the Storybook coverage.
What changed
Component API (
components/banner)onDismiss?: () => voidprop. Renders the dedicated "Close" control Figma modelsas its own always-last anatomy node — a ghost, icon-only
IconButton(magnitude="sm",aria-label="Dismiss") fixed at the trailing edge, after anyactions. Consumers ownvisibility; the handler fires on click, the banner does not self-hide.
actionsis now CTA-only. Docs clarify the Figma cap of three CTAs(primary/secondary/tertiary) and note that the non-wrapping actions group assumes a wide
viewport (see Known limitations).
undefined→ tone default,null→ hidden, node → custom) so a singleBannerIconwrapper renders it — no nestedternary/duplicated wrapper.
Elements & tokens (
elements/banner)BannerTitlegains aplacementprop (+BannerTitleVariantProps): title weight isnow per-placement (page medium / inline regular) via its own composite text token instead
of inheriting from the body column.
per Figma), replacing the previous 20px node size.
bannerDescriptionVariantsdocumented as an intentional empty cva (no Figma designuses a description yet; it inherits body styling and stays as a named part for future use).
Stories
Dismissible,WithActions,DismissibleInteraction) migrated toonDismiss;DismissibleInteractionplay test asserts the handler fires.Tonesnow shows bothinlineandpageplacements (their neutral surfaces differ).w-180column decorator hoisted to meta, per-story wrappersreduced to fragments, gap unified.
Anatomydismiss aligned tomagnitude="sm".Testing
vp check— clean (format, lint, types).Type of Change
Screenshots and Media (if applicable)
Figma URL