Skip to content

feat(ui-banner): add Banner component (WIP) - #2713

Open
adamlobler wants to merge 2 commits into
masterfrom
feature/banner-component
Open

adamlobler wants to merge 2 commits into
masterfrom
feature/banner-component

Conversation

@adamlobler

Copy link
Copy Markdown
Collaborator

Adds a new promotional Banner component built on tokens already registered in instructure-design-tokens across all four themes. Supports violet/sea colors, relaxed/compact density, an optional dismiss control, an optional header and decorative icon slot, and primary/secondary action slots.

Wires the component into the ui umbrella package (v11_7 export) and adds a regression-test page and Cypress spec entry.

🤖 Generated with Claude Code

adamlobler and others added 2 commits September 8, 2026 16:15
Adds a new promotional Banner component built on tokens already registered
in instructure-design-tokens across all four themes. Supports violet/sea
colors, relaxed/compact density, an optional dismiss control, an optional
header and decorative icon slot, and primary/secondary action slots.

Wires the component into the ui umbrella package (v11_7 export) and adds
a regression-test page and Cypress spec entry.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
v1.5.0 predates the Banner component's tokens, so ui-banner's build:types
failed in CI with "Property 'Banner' does not exist on type 'ComponentTypes'".
v1.8.0 includes Banner's tokens across all four themes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://instructure.design/pr-preview/pr-2713/

Built to branch gh-pages at 2026-09-08 14:29 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot pushed a commit that referenced this pull request Sep 8, 2026
@github-actions

github-actions Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Visual regression report

Cypress suite:Failing — see the run logs.

Visual diff: ⚠️ Changes detected.

Status Count
Unchanged 93
Changed 3
New 3
Removed 0

Accessibility (axe): ⚠️ 1 violation on 1 screenshot.

Impact Issue Rule Elements Screenshots
serious Text contrast is too low color-contrast 1 1

📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches.

Diff images (3)

badge-canvas.png — 1573 pixels differ

calendar-canvas.png — 478 pixels differ

tooltip-dark.png — 881 pixels differ

Baselines come from the visual-baselines branch. They refresh on every merge to master. The Cypress suite line covers the a11y and console-error assertions — a ❌ there means the suite found real issues even if the visual diff is clean.

@adamlobler adamlobler self-assigned this Sep 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant