feat: add Banner component - #1251
Merged
Merged
Conversation
Implements the Banner component in Ocean Design System Web, with size (large/small) and type (default/warning/negative/emphasys) variants, optional image, description, and buttons (max 2). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace buttons[] with primaryAction/secondaryAction explicit props (D1/D2) - Derive button variant from type (default→primary/tertiary, warning→primaryWarning/tertiaryWarning, negative→primaryCritical/tertiaryCritical, emphasys→secondary/inverse) - Remove backgroundColor prop (D3) - Default size to 'large' (D6) - Use Typography heading4/description instead of raw divs (D12) - Fix border-radius token: $border-radius-md → $border-radius-sm (D12) - Fix image width in small layout: 25% → 82px fixed (D11) - Fix spacing tokens: gap content→actions uses $spacing-stack-sm (large) / $spacing-stack-xxs-extra (small); title↔description margin uses $spacing-stack-xxxs (D12) - Fix emphasys description color: $color-interface-light-pure → $color-interface-light-up (D12) - Update tests and stories to match new API Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…update stories - Emphasys secondary action: use tertiary variant with $color-interface-light-pure override instead of nonexistent inverse style - Unify text-to-button spacing to 12px ($spacing-stack-xxs-extra) for both sizes - Add WithPrimaryAndSecondaryActions and WithPrimaryActionOnly story sections covering all 4 types Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace buttons[]/ButtonProps with primaryAction/secondaryAction/ActionProps - Remove backgroundColor prop reference - Mark size as optional with default 'large' - Fix description color tokens in types table (dark-down, not dark-deep) - Update button variant table: emphasys uses secondary/tertiary (not inverse) - Add button-variants-by-type table - Update story embed IDs to new story names - Update live code examples to use new props Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
heading4 herdava extrabold (800) e line-height loose (132%) via mixin global. Sobrescreve no escopo do banner para bold (700) e medium (124%) conforme Figma. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
description herdava regular (400) via mixin texts. Sobrescreve no escopo do banner com fontWeightMedium (600/SemiBold) conforme Figma. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… small Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…manho de tela Remove flex-wrap e o override de largura responsivo que faziam a imagem quebrar para baixo em telas menores. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…o componente Substitui seletores de classe customizada (ods-banner__title/description) pelas classes originais do Typography (ods-typography__heading4/description) para que os estilos sejam efetivamente aplicados, mantendo o escopo no .ods-banner. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Usa discriminated union: BannerLargeProps (image: string) | BannerSmallProps (image?: string). TypeScript impede o uso de large sem imagem em tempo de compilação. Atualiza testes, stories e documentação. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Corrige também o seletor que estava incorreto (buscava filho em vez de mesmo elemento). Usa .ods-typography__description dentro de &--emphasys. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
maarante-ux
marked this pull request as ready for review
June 22, 2026 15:30
danimuller20
approved these changes
Jun 25, 2026
lpeil
approved these changes
Jun 25, 2026
FabioRolin
approved these changes
Jun 26, 2026
|
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
4 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.
Descrição
Implementa o componente Banner no Ocean Design System Web, conforme especificação do PRD #1247 e Jira MR-494.
Mudanças
Bannerempackages/ocean-reactpackages/ocean-corepackages/ocean-docsVariantes implementadas
large(imagem no topo),small(imagem à direita)default,warning,negative,emphasysdescription,image,buttons(array, máx 2),backgroundColorJira
MR-494