feat(ui-banner): add Banner component by git-nandor · Pull Request #2779 · instructure/instructure-ui

git-nandor · 2026-11-03T14:12:44Z

Summary

New @instructure/ui-banner package with a Banner v1 component
Registered in @instructure/ui/v11_7 and the docs app

Test Plan

Docs → Banner: compare the examples with the Figma designs.
RTL: the icon box and the close button mirror
Dismissing: close button, Escape with focus inside, open={false} from outside and timeout
Screen reader: the "Add Banner" example announces the title and the content through the live region

Fixes INSTUI-5210

🤖 Generated with Claude Code

github-actions · 2026-11-03T14:16:44Z

PR Preview Action v1.8.2
🚀 View preview at https://instructure.design/pr-preview/pr-2779/
Built to branch `gh-pages` at 2026-11-11 23:07 UTC. Preview will be ready when the GitHub Pages deployment is complete.

github-actions · 2026-11-03T14:20:21Z

Visual regression report

Cypress suite: ✅ Passing

Visual diff: ✅ No changes.

Status	Count
Unchanged	111
Changed	0
New	3
Removed	0

Accessibility (axe): ✅ No violations.

📊 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.

_{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.}

matyasf · 2026-11-06T14:36:02Z

+    ...rest
+  } = props
+
+  const [open, setOpen] = useState(true)


its a bit of an edge case, but <Banner open={false} shows the Banner. I think its OK, since there is no code to open a closed banner, so it does not make sense to render a Banner, that is always closed.

matyasf

overall it looks good, but there are a couple of smaller changes needed

matyasf · 2026-11-06T14:56:04Z

+      // JAWS ignores `aria-relevant` and reads the removed node unless the
+      // attributes are removed and reapplied


This is very likely not true! The comment is copied from Alert, which copied it from Canvas from a 2016 (!!) commit https://github.com/instructure/canvas-lms/blob/master/ui/shared/rails-flash-notifications/jquery/helper.ts#L156
Please test this in JAWS and remove it (from Alert too!) if its not needed

Thanks you're right. The node removal was missing, and the attributes were immediately added back. React only removes the node afterwards, so the code wasn't actually doing anything.

matyasf · 2026-11-06T15:06:16Z

+
+  if (transition === 'none') {
+    return open ? (
+      <Fragment>


Do not use <Fragment>, use just <>, this is our convention

matyasf · 2026-11-06T15:07:54Z

+  /**
+   * The first row of the Banner, displayed above the content.
+   */
+  title?: ReactNode


Cant we make this just a string? We can widen the type later if needed

matyasf · 2026-11-06T15:08:34Z

+  /**
+   * Close button label, setting it renders the close button.
+   */
+  renderCloseButtonLabel?: Renderable


Cant we make this just a string? We can widen the type later if needed

matyasf · 2026-11-06T15:13:34Z

+The Banner component highlights a non-urgent message, like a new feature or a
+tip. For status messages (info, success, warning, error) use [Alert](Alert)
+instead.


I would also add where it should be used. in the page flow? at the top?

matyasf · 2026-11-06T15:14:11Z

+  renderCloseButtonLabel="Close"
+  margin="0 0 general.spaceMd"
+>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod


Can you ask design for some of the examples for a more realistic text, so its easier to understand what this should be used for?

matyasf · 2026-11-06T15:15:51Z

+            title="Banner header"
+            renderIcon={DiamondInstUIIcon}
+            renderCloseButtonLabel="Close"


please add here variants that do not render the close button and have no title

matyasf · 2026-11-06T15:16:09Z

+  const variants = ['relaxed', 'compact'] as const
+  return (
+    <main className="flex gap-8 p-8 flex-col items-start axe-test">
+      {variants.map((variant) => (


its a bit overkill to do a loop for 2 variants..

Add new Banner component Co-Authored-By: Claude <noreply@anthropic.com>

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

Both props hold plain text, so renderCloseButtonLabel becomes closeButtonLabel and no longer accepts a render function. Co-Authored-By: Claude <noreply@anthropic.com>

The attributes were set again before React removed the announcement node, so the region looked the same at removal as without the reset. The Canvas code it came from removes the node in between and was written for JAWS with Internet Explorer. Co-Authored-By: Claude <noreply@anthropic.com>

… text Co-Authored-By: Claude <noreply@anthropic.com>

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

git-nandor self-assigned this Nov 3, 2026

github-actions Bot pushed a commit that referenced this pull request Nov 3, 2026

visual-regression: PR #2779 (c121bad) c121bad

850146f

git-nandor force-pushed the INSTUI-5210_new_banner_component branch from cad3ddc to d965f74 Compare November 4, 2026 07:55

github-actions Bot pushed a commit that referenced this pull request Nov 4, 2026

visual-regression: PR #2779 (26fe6d9) 26fe6d9

3cab250

git-nandor marked this pull request as ready for review November 4, 2026 08:42

git-nandor requested review from danegivens, joyenjoyer and matyasf November 4, 2026 08:42

danegivens approved these changes Nov 4, 2026

View reviewed changes

matyasf reviewed Nov 6, 2026

View reviewed changes

matyasf requested changes Nov 6, 2026

View reviewed changes

git-nandor and others added 6 commits November 11, 2026 17:06

feat(ui-banner): add Banner component

c3f30f5

Add new Banner component Co-Authored-By: Claude <noreply@anthropic.com>

test(ui-banner): add Banner tests and regression page

3aba78d

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

refactor(ui-banner): type title and closeButtonLabel as strings

2940769

Both props hold plain text, so renderCloseButtonLabel becomes closeButtonLabel and no longer accepts a render function. Co-Authored-By: Claude <noreply@anthropic.com>

docs(ui-banner): explain when to use a Banner and replace placeholder…

84df518

… text Co-Authored-By: Claude <noreply@anthropic.com>

test(ui-banner): add regression variants without title and close button

065c323

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

git-nandor force-pushed the INSTUI-5210_new_banner_component branch from d965f74 to 065c323 Compare November 11, 2026 23:04

github-actions Bot pushed a commit that referenced this pull request Nov 11, 2026

visual-regression: PR #2779 (e66a229) e66a229

7422686

git-nandor requested a review from matyasf November 12, 2026 07:44

git-nandor assigned matyasf Nov 12, 2026

		// JAWS ignores `aria-relevant` and reads the removed node unless the
		// attributes are removed and reapplied

Conversation

git-nandor commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Uh oh!

github-actions Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-11-11 23:07 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

github-actions Bot commented Nov 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Visual regression report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

matyasf left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

git-nandor commented Nov 3, 2026 •

edited

Loading

github-actions Bot commented Nov 3, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-11-11 23:07 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions Bot commented Nov 3, 2026 •

edited

Loading