feat(Banner): add pill variant

[kmcfaul]

What: Closes #12393

Adds isPill prop.
Adds example & test.

Summary by CodeRabbit

• New Features
  • Banners can now be displayed with a rounded pill-shaped style for enhanced visual design options.
• Documentation
  • Updated Banner examples demonstrating the new pill-shaped variant with multiple styling combinations.
• Tests
  • Added test coverage for the pill banner styling feature.

[coderabbitai]

Walkthrough

The PR adds pill-shaped variants to the Banner component. BannerProps gains an optional isPill prop; the component conditionally applies the pill modifier class. Tests verify correct class application; documentation and an example component demonstrate pill banner usage across default, red, and success states.

Changes

Banner pill variant

Layer / File(s)	Summary
Banner pill prop contract and styling packages/react-core/src/components/Banner/Banner.tsx	BannerProps interface adds optional isPill?: boolean prop. The Banner component destructures isPill with default false and conditionally includes styles.modifiers.pill in the className when isPill is truthy.
Tests, documentation, and example packages/react-core/src/components/Banner/__tests__/Banner.test.tsx, packages/react-core/src/components/Banner/examples/Banner.md, packages/react-core/src/components/Banner/examples/BannerPill.tsx	New test cases assert pill modifier class presence when isPill is true and absence when false or undefined. Banner.md adds a Pill subsection. BannerPill.tsx exports a new example component demonstrating three pill variants: default, red, and success with check-circle icon and Flex-based layout.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• thatblindgeye
• wise-king-sullyman
• mcoker

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(Banner): add pill variant' clearly summarizes the main change of adding a pill variant to the Banner component.
Linked Issues check	✅ Passed	The PR successfully implements the requirement from issue #12393 by adding the isPill prop, applying the pill modifier class, and including tests and documentation.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the pill variant feature specified in issue #12393; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/react-core/src/components/Banner/examples/BannerPill.tsx (1)

12-19: 💤 Low value

Avoid duplicating visible text in screenReaderText.

screenReaderText="Success pill banner" duplicates the visible "Success pill banner" content, so assistive tech announces it twice. Per the Banner docs, screenReaderText should convey the status/severity (e.g., "Success"), not repeat the visible label.

♻️ Suggested change

-    <Banner isPill screenReaderText="Success pill banner" status="success">
+    <Banner isPill screenReaderText="Success" status="success">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/react-core/src/components/Banner/examples/BannerPill.tsx` around
lines 12 - 19, The Banner currently passes screenReaderText="Success pill
banner" which duplicates the visible label; change the screenReaderText prop on
the Banner component to a concise status word (e.g., "Success") so assistive
tech does not announce the visible content twice—update the Banner usage in
BannerPill.tsx (the Banner component instance) to set screenReaderText to
"Success" (or another short severity token) and keep the visible children
unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/react-core/src/components/Banner/examples/BannerPill.tsx`:
- Around line 12-19: The Banner currently passes screenReaderText="Success pill
banner" which duplicates the visible label; change the screenReaderText prop on
the Banner component to a concise status word (e.g., "Success") so assistive
tech does not announce the visible content twice—update the Banner usage in
BannerPill.tsx (the Banner component instance) to set screenReaderText to
"Success" (or another short severity token) and keep the visible children
unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 973ddabc-0c3b-4d6c-95ec-ae8dda1d694e

📥 Commits

Reviewing files that changed from the base of the PR and between 4ca2e04 and f5b9919.

📒 Files selected for processing (4)

• packages/react-core/src/components/Banner/Banner.tsx
• packages/react-core/src/components/Banner/__tests__/Banner.test.tsx
• packages/react-core/src/components/Banner/examples/Banner.md
• packages/react-core/src/components/Banner/examples/BannerPill.tsx

[patternfly-build]

Preview: https://pf-react-pr-12440.surge.sh

A11y report: https://pf-react-pr-12440-a11y.surge.sh