From b6b32afe9a22e92972293d849033e7f8e180c696 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Mon, 11 May 2026 21:22:49 -0400 Subject: [PATCH 1/7] feat(banner): add pf-v6-banner --- .gitignore | 1 + elements/pf-v6-banner/demo/basic.html | 23 +++ elements/pf-v6-banner/demo/index.html | 9 ++ elements/pf-v6-banner/demo/status.html | 39 +++++ elements/pf-v6-banner/demo/sticky.html | 50 +++++++ elements/pf-v6-banner/pf-v6-banner.css | 188 +++++++++++++++++++++++++ elements/pf-v6-banner/pf-v6-banner.ts | 87 ++++++++++++ 7 files changed, 397 insertions(+) create mode 100644 elements/pf-v6-banner/demo/basic.html create mode 100644 elements/pf-v6-banner/demo/index.html create mode 100644 elements/pf-v6-banner/demo/status.html create mode 100644 elements/pf-v6-banner/demo/sticky.html create mode 100644 elements/pf-v6-banner/pf-v6-banner.css create mode 100644 elements/pf-v6-banner/pf-v6-banner.ts diff --git a/.gitignore b/.gitignore index db944ad73f..278d51f110 100644 --- a/.gitignore +++ b/.gitignore @@ -105,6 +105,7 @@ core/pfe-core/demo/* # AI .claude/settings.local.json +.claude/worktrees # Temp files *~ diff --git a/elements/pf-v6-banner/demo/basic.html b/elements/pf-v6-banner/demo/basic.html new file mode 100644 index 0000000000..91a4c58891 --- /dev/null +++ b/elements/pf-v6-banner/demo/basic.html @@ -0,0 +1,23 @@ +--- +name: Basic +description: Banners can be styled with one of 9 different colors. A basic banner should only be used when the banner color does not represent status or severity. +--- +Default banner +Red banner +Orangered banner +Orange banner +Yellow banner +Green banner +Teal banner +Blue banner +Purple banner + + + + diff --git a/elements/pf-v6-banner/demo/index.html b/elements/pf-v6-banner/demo/index.html new file mode 100644 index 0000000000..462905d585 --- /dev/null +++ b/elements/pf-v6-banner/demo/index.html @@ -0,0 +1,9 @@ +--- +name: Default +description: A default banner communicates a short snippet of information. +--- +Default banner + + diff --git a/elements/pf-v6-banner/demo/status.html b/elements/pf-v6-banner/demo/status.html new file mode 100644 index 0000000000..21686c2c72 --- /dev/null +++ b/elements/pf-v6-banner/demo/status.html @@ -0,0 +1,39 @@ +--- +name: Status +description: When a banner conveys status, use the status attribute. Include an icon and screen-reader-text for accessibility. +--- + + + Success banner + + + + + Warning banner + + + + + Danger banner + + + + + Info banner + + + + + Custom banner + + + + + diff --git a/elements/pf-v6-banner/demo/sticky.html b/elements/pf-v6-banner/demo/sticky.html new file mode 100644 index 0000000000..3af89c14fa --- /dev/null +++ b/elements/pf-v6-banner/demo/sticky.html @@ -0,0 +1,50 @@ +--- +name: Sticky +description: A sticky banner stays fixed at the top of its container as content scrolls. +--- +Sticky banner +
+

The Open Source Definition

+

https://opensource.org/osd/

+ +

Introduction

+

Open source doesn't just mean access to the source code. The distribution + terms of open-source software must comply with the following criteria:

+ +

1. Free Redistribution

+

The license shall not restrict any party from selling or giving away the + software as a component of an aggregate software distribution containing + programs from several different sources. The license shall not require a + royalty or other fee for such sale.

+ +

2. Source Code

+

The program must include source code, and must allow distribution in + source code as well as compiled form.

+ +

3. Derived Works

+

The license must allow modifications and derived works, and must allow + them to be distributed under the same terms as the license of the original + software.

+ +

4. Integrity of The Author's Source Code

+

The license may restrict source-code from being distributed in modified + form only if the license allows the distribution of "patch files" with the + source code for the purpose of modifying the program at build time.

+ +

5. No Discrimination Against Persons or Groups

+

The license must not discriminate against any person or group of + persons.

+ +

6. No Discrimination Against Fields of Endeavor

+

The license must not restrict anyone from making use of the program in a + specific field of endeavor.

+ +

7. Distribution of License

+

The rights attached to the program must apply to all to whom the program + is redistributed without the need for execution of an additional license by + those parties.

+
+ + diff --git a/elements/pf-v6-banner/pf-v6-banner.css b/elements/pf-v6-banner/pf-v6-banner.css new file mode 100644 index 0000000000..5c4d1e6186 --- /dev/null +++ b/elements/pf-v6-banner/pf-v6-banner.css @@ -0,0 +1,188 @@ +:host { + display: block; + box-sizing: border-box; +} + +:host([hidden]) { + display: none !important; +} + +:host([sticky]) { + position: sticky; + inset-block-start: 0; + z-index: var(--pf-v6-c-banner--m-sticky--ZIndex, + var(--pf-t--global--z-index--md, 300)); + box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow, + var(--pf-t--global--box-shadow--md)); +} + +#container { + --_bg: var(--pf-v6-c-banner--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, + light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d)))); + --_color: var(--pf-v6-c-banner--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, + light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff)))); + --_padding-block: var(--pf-v6-c-banner--PaddingBlockStart, + var(--pf-t--global--spacer--xs, 0.25rem)); + --_padding-inline: var(--pf-v6-c-banner--PaddingInlineStart, + var(--pf-t--global--spacer--md, 1rem)); + --_font-size: var(--pf-v6-c-banner--FontSize, + var(--pf-t--global--font--size--body--default, 0.875rem)); + --_border-color: var(--pf-v6-c-banner--BorderColor, + var(--pf-t--global--border--color--high-contrast, transparent)); + --_border-width: var(--pf-v6-c-banner--BorderWidth, + var(--pf-t--global--border--width--high-contrast--regular, 0)); + + flex-shrink: 0; + padding-block: var(--_padding-block); + padding-inline: var(--_padding-inline); + font-size: var(--_font-size); + color: var(--_color); + white-space: nowrap; + background-color: var(--_bg); + border-block: var(--_border-width) solid var(--_border-color); + + @media (min-width: 768px) { + --_padding-inline: var(--pf-v6-c-banner--md--PaddingInlineStart, + var(--pf-t--global--spacer--lg, 1.5rem)); + } + + /* Non-status color modifiers (before status so status takes precedence) */ + + &.red { + --_bg: var(--pf-v6-c-banner--m-red--BackgroundColor, + var(--pf-t--global--color--nonstatus--red--default, + light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8)))); + --_color: var(--pf-v6-c-banner--m-red--Color, + var(--pf-t--global--text--color--nonstatus--on-red--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.orangered { + --_bg: var(--pf-v6-c-banner--m-orangered--BackgroundColor, + var(--pf-t--global--color--nonstatus--orangered--default, + light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78)))); + --_color: var(--pf-v6-c-banner--m-orangered--Color, + var(--pf-t--global--text--color--nonstatus--on-orangered--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.orange { + --_bg: var(--pf-v6-c-banner--m-orange--BackgroundColor, + var(--pf-t--global--color--nonstatus--orange--default, + light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54)))); + --_color: var(--pf-v6-c-banner--m-orange--Color, + var(--pf-t--global--text--color--nonstatus--on-orange--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.yellow { + --_bg: var(--pf-v6-c-banner--m-yellow--BackgroundColor, + var(--pf-t--global--color--nonstatus--yellow--default, + light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17)))); + --_color: var(--pf-v6-c-banner--m-yellow--Color, + var(--pf-t--global--text--color--nonstatus--on-yellow--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.green { + --_bg: var(--pf-v6-c-banner--m-green--BackgroundColor, + var(--pf-t--global--color--nonstatus--green--default, + light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f)))); + --_color: var(--pf-v6-c-banner--m-green--Color, + var(--pf-t--global--text--color--nonstatus--on-green--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.teal { + --_bg: var(--pf-v6-c-banner--m-teal--BackgroundColor, + var(--pf-t--global--color--nonstatus--teal--default, + light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8)))); + --_color: var(--pf-v6-c-banner--m-teal--Color, + var(--pf-t--global--text--color--nonstatus--on-teal--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.blue { + --_bg: var(--pf-v6-c-banner--m-blue--BackgroundColor, + var(--pf-t--global--color--nonstatus--blue--default, + light-dark(var(--pf-t--color--blue--20, #b9dafc), var(--pf-t--color--blue--30, #92c5f9)))); + --_color: var(--pf-v6-c-banner--m-blue--Color, + var(--pf-t--global--text--color--nonstatus--on-blue--default, + var(--pf-t--color--gray--100, #151515))); + } + + &.purple { + --_bg: var(--pf-v6-c-banner--m-purple--BackgroundColor, + var(--pf-t--global--color--nonstatus--purple--default, + light-dark(var(--pf-t--color--purple--20, #d0c5f4), var(--pf-t--color--purple--30, #b6a6e9)))); + --_color: var(--pf-v6-c-banner--m-purple--Color, + var(--pf-t--global--text--color--nonstatus--on-purple--default, + var(--pf-t--color--gray--100, #151515))); + } + + /* Status modifiers (after color so status takes precedence at equal specificity) */ + + &.danger { + --_bg: var(--pf-v6-c-banner--m-danger--BackgroundColor, + var(--pf-t--global--color--status--danger--default, + light-dark(var(--pf-t--color--red-orange--60, #b1380b), var(--pf-t--color--red-orange--50, #f0561d)))); + --_color: var(--pf-v6-c-banner--m-danger--Color, + var(--pf-t--global--text--color--status--on-danger--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.success { + --_bg: var(--pf-v6-c-banner--m-success--BackgroundColor, + var(--pf-t--global--color--status--success--default, + light-dark(var(--pf-t--color--green--60, #3d7317), var(--pf-t--color--green--40, #87bb62)))); + --_color: var(--pf-v6-c-banner--m-success--Color, + var(--pf-t--global--text--color--status--on-success--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.warning { + --_bg: var(--pf-v6-c-banner--m-warning--BackgroundColor, + var(--pf-t--global--color--status--warning--default, + light-dark(var(--pf-t--color--yellow--30, #ffcc17), var(--pf-t--color--yellow--30, #ffcc17)))); + --_color: var(--pf-v6-c-banner--m-warning--Color, + var(--pf-t--global--text--color--status--on-warning--default, + light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.info { + --_bg: var(--pf-v6-c-banner--m-info--BackgroundColor, + var(--pf-t--global--color--status--info--default, + light-dark(var(--pf-t--color--purple--50, #5e40be), var(--pf-t--color--purple--30, #b6a6e9)))); + --_color: var(--pf-v6-c-banner--m-info--Color, + var(--pf-t--global--text--color--status--on-info--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } + + &.custom { + --_bg: var(--pf-v6-c-banner--m-custom--BackgroundColor, + var(--pf-t--global--color--status--custom--default, + light-dark(var(--pf-t--color--teal--60, #147878), var(--pf-t--color--teal--40, #63bdbd)))); + --_color: var(--pf-v6-c-banner--m-custom--Color, + var(--pf-t--global--text--color--status--on-custom--default, + light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f)))); + } +} + +::slotted(a) { + color: inherit; + text-decoration-line: underline; +} + +.sr-only { + position: absolute; + inline-size: 1px; + block-size: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts new file mode 100644 index 0000000000..de828d0446 --- /dev/null +++ b/elements/pf-v6-banner/pf-v6-banner.ts @@ -0,0 +1,87 @@ +import { LitElement, html, nothing, type TemplateResult } from 'lit'; + +import { classMap } from 'lit/directives/class-map.js'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; + +import style from './pf-v6-banner.css'; + +export type BannerColor = + | 'red' + | 'orangered' + | 'orange' + | 'yellow' + | 'green' + | 'teal' + | 'blue' + | 'purple'; + +export type BannerStatus = + | 'success' + | 'warning' + | 'danger' + | 'info' + | 'custom'; + +/** + * A banner provides a full-width container for communicating short, + * non-dismissible messages. Use a banner when you need to display a + * brief announcement that allows users to continue without interruption. + * + * Status banners SHOULD include an icon and `screen-reader-text` so + * screen readers can announce the status context (WCAG 1.3.1). Authors + * SHOULD AVOID using color alone to convey meaning (WCAG 1.4.1). + * + * The banner is not focusable. Slotted interactive content like links + * remains focusable via Tab. + * + * @summary Provides a full-width banner for brief, non-dismissible messages. + * @slot - Banner content, including text, links, or icons. For accessibility, + * status banners MUST include `screen-reader-text` and SHOULD include + * a status icon so sighted users can identify the status at a glance. + * @cssprop {} [--pf-v6-c-banner--BackgroundColor] - Overrides the banner background color. Defaults to `--pf-t--global--color--nonstatus--gray--default`. + * @cssprop {} [--pf-v6-c-banner--Color] - Overrides the banner text color. Defaults to `--pf-t--global--text--color--nonstatus--on-gray--default`. + * @cssprop {} [--pf-v6-c-banner--PaddingBlockStart] - Overrides the block padding. Defaults to `--pf-t--global--spacer--xs`. + * @cssprop {} [--pf-v6-c-banner--PaddingInlineStart] - Overrides the inline padding. Defaults to `--pf-t--global--spacer--md`. + * @cssprop {} [--pf-v6-c-banner--md--PaddingInlineStart] - Overrides the inline padding at the medium breakpoint. Defaults to `--pf-t--global--spacer--lg`. + * @cssprop {} [--pf-v6-c-banner--FontSize] - Overrides the font size. Defaults to `--pf-t--global--font--size--body--default`. + * @cssprop {} [--pf-v6-c-banner--BorderColor] - Overrides the block border color, visible in high-contrast mode. Defaults to `--pf-t--global--border--color--high-contrast`. + * @cssprop {} [--pf-v6-c-banner--BorderWidth] - Overrides the block border width, visible in high-contrast mode. Defaults to `--pf-t--global--border--width--high-contrast--regular`. + * @cssprop {} [--pf-v6-c-banner--m-sticky--ZIndex] - Overrides the z-index when sticky. Defaults to `--pf-t--global--z-index--md`. + * @cssprop [--pf-v6-c-banner--m-sticky--BoxShadow] - Overrides the box shadow when sticky. Defaults to `--pf-t--global--box-shadow--md`. + */ +@customElement('pf-v6-banner') +export class PfV6Banner extends LitElement { + static readonly styles: CSSStyleSheet[] = [style]; + + /** Non-status color for the banner background. Overridden by `status` if both are set. */ + @property({ reflect: true }) color?: BannerColor; + + /** Status style for the banner. Conveys semantic meaning and overrides `color`. */ + @property({ reflect: true }) status?: BannerStatus; + + /** Whether the banner sticks to the top of its container. */ + @property({ type: Boolean, reflect: true }) sticky = false; + + /** Text announced by screen readers to indicate the type of banner. */ + @property({ attribute: 'screen-reader-text' }) screenReaderText?: string; + + override render(): TemplateResult { + return html` +
+ ${!this.screenReaderText ? nothing + : html`${this.screenReaderText}`} + +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-v6-banner': PfV6Banner; + } +} From 7b0dfc3345707d1e9cd420b24d3c1ce87a7504fc Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 13 May 2026 17:06:49 +0300 Subject: [PATCH 2/7] style: format --- elements/pf-v6-banner/pf-v6-banner.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts index de828d0446..a526938fcb 100644 --- a/elements/pf-v6-banner/pf-v6-banner.ts +++ b/elements/pf-v6-banner/pf-v6-banner.ts @@ -67,13 +67,10 @@ export class PfV6Banner extends LitElement { @property({ attribute: 'screen-reader-text' }) screenReaderText?: string; override render(): TemplateResult { + const { color = '', status = '', screenReaderText } = this; return html` -
- ${!this.screenReaderText ? nothing - : html`${this.screenReaderText}`} +
+ ${screenReaderText}
`; From 98c00ade2c27ef5c6f733fa1a633edf87a34e19c Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 13 May 2026 17:08:12 +0300 Subject: [PATCH 3/7] style: unused import --- elements/pf-v6-banner/pf-v6-banner.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts index a526938fcb..29844912b9 100644 --- a/elements/pf-v6-banner/pf-v6-banner.ts +++ b/elements/pf-v6-banner/pf-v6-banner.ts @@ -1,4 +1,4 @@ -import { LitElement, html, nothing, type TemplateResult } from 'lit'; +import { LitElement, html, type TemplateResult } from 'lit'; import { classMap } from 'lit/directives/class-map.js'; import { customElement } from 'lit/decorators/custom-element.js'; From fb262b43c77db114e06cdae9f6cb67b6d0c1cc06 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 13 May 2026 13:28:55 -0400 Subject: [PATCH 4/7] chore: remove pf-v5-banner --- elements/pf-v5-banner/README.md | 60 --------- elements/pf-v5-banner/demo/index.html | 15 --- .../pf-v5-banner/demo/status-banners.html | 40 ------ elements/pf-v5-banner/demo/sticky.html | 55 -------- elements/pf-v5-banner/docs/pf-v5-banner.md | 59 --------- elements/pf-v5-banner/docs/screenshot.png | Bin 11435 -> 0 bytes elements/pf-v5-banner/pf-v5-banner.css | 117 ------------------ elements/pf-v5-banner/pf-v5-banner.ts | 69 ----------- elements/pf-v5-banner/test/pf-banner.e2e.ts | 25 ---- elements/pf-v5-banner/test/pf-banner.spec.ts | 86 ------------- 10 files changed, 526 deletions(-) delete mode 100644 elements/pf-v5-banner/README.md delete mode 100644 elements/pf-v5-banner/demo/index.html delete mode 100644 elements/pf-v5-banner/demo/status-banners.html delete mode 100644 elements/pf-v5-banner/demo/sticky.html delete mode 100644 elements/pf-v5-banner/docs/pf-v5-banner.md delete mode 100644 elements/pf-v5-banner/docs/screenshot.png delete mode 100644 elements/pf-v5-banner/pf-v5-banner.css delete mode 100644 elements/pf-v5-banner/pf-v5-banner.ts delete mode 100644 elements/pf-v5-banner/test/pf-banner.e2e.ts delete mode 100644 elements/pf-v5-banner/test/pf-banner.spec.ts diff --git a/elements/pf-v5-banner/README.md b/elements/pf-v5-banner/README.md deleted file mode 100644 index 75d8362cd5..0000000000 --- a/elements/pf-v5-banner/README.md +++ /dev/null @@ -1,60 +0,0 @@ -# Patternfly Elements Banner -A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible. - -Read more about Button in the [PatternFly Elements Banner documentation](https://patternflyelements.org/components/banner) - -## Installation -Load `` via CDN: - -```html - -``` -Or, if you are using [NPM](https://npm.im/), install it - -```bash -npm install @patternfly/elements -``` -Then once installed, import it to your application: - -```js -import '@patternfly/elements/pf-v5-banner/pf-v5-banner.js'; -``` - - -## Usage - -```html - - Default banner - -``` - - -## Attributes - -### Variant -Banners have five different variants. The available variants are `default`, `info`, `success`, `danger`, and `warning`. - -```html - - Info banner - -``` - -### Icon -Banners can have an icon attribute for a shorthand to Patternfly Icons. To see available icons, visit the [Patternfly Elements Icons documentation](https://patternflyelements.com/components/icons/). - -```html - - Info banner - -``` - -### Sticky -Banners can be sticky, so they stick to the top of the parent. - -```html - - Sticky banner - -``` diff --git a/elements/pf-v5-banner/demo/index.html b/elements/pf-v5-banner/demo/index.html deleted file mode 100644 index 0cbdbf711e..0000000000 --- a/elements/pf-v5-banner/demo/index.html +++ /dev/null @@ -1,15 +0,0 @@ -Default Banner -Blue Banner -Red Banner -Green Banner -Gold Banner - - - - diff --git a/elements/pf-v5-banner/demo/status-banners.html b/elements/pf-v5-banner/demo/status-banners.html deleted file mode 100644 index 1c2c3d68e4..0000000000 --- a/elements/pf-v5-banner/demo/status-banners.html +++ /dev/null @@ -1,40 +0,0 @@ - - - Default Banner - - - - - Info Banner - - - - - Danger Banner - - - - - Success Banner - - - - - Warning Banner - - - - - diff --git a/elements/pf-v5-banner/demo/sticky.html b/elements/pf-v5-banner/demo/sticky.html deleted file mode 100644 index 3f00ceaf4c..0000000000 --- a/elements/pf-v5-banner/demo/sticky.html +++ /dev/null @@ -1,55 +0,0 @@ -I stick to the top -
-

The Open Source Definition

- https://opensource.org/osd/ -
- -

Introduction

-

Open source doesn’t just mean access to the source code. The distribution terms of open-source software must comply with the following criteria:

- -

1. Free Redistribution

-

The license shall not restrict any party from selling or giving away the software as a component of an aggregate software distribution containing programs from several different sources. The license shall not require a royalty or other fee for such sale.

- - -

2. Source Code

-

The program must include source code, and must allow distribution in source code as well as compiled form. Where some form of a product is not distributed with source code, there must be a well-publicized means of obtaining the source code for no more than a reasonable reproduction cost, preferably downloading via the Internet without charge. The source code must be the preferred form in which a programmer would modify the program. Deliberately obfuscated source code is not allowed. Intermediate forms such as the output of a preprocessor or translator are not allowed.

- - -

3. Derived Works

-

The license must allow modifications and derived works, and must allow them to be distributed under the same terms as the license of the original software.

- - -

4. Integrity of The Author’s Source Code

-

The license may restrict source-code from being distributed in modified form only if the license allows the distribution of “patch files” with the source code for the purpose of modifying the program at build time. The license must explicitly permit distribution of software built from modified source code. The license may require derived works to carry a different name or version number from the original software.

- - -

5. No Discrimination Against Persons or Groups

-

The license must not discriminate against any person or group of persons.

- - -

6. No Discrimination Against Fields of Endeavor

-

The license must not restrict anyone from making use of the program in a specific field of endeavor. For example, it may not restrict the program from being used in a business, or from being used for genetic research.

- - -

7. Distribution of License

-

The rights attached to the program must apply to all to whom the program is redistributed without the need for execution of an additional license by those parties.

- - -

8. License Must Not Be Specific to a Product

-

The rights attached to the program must not depend on the program’s being part of a particular software distribution. If the program is extracted from that distribution and used or distributed within the terms of the program’s license, all parties to whom the program is redistributed should have the same rights as those that are granted in conjunction with the original software distribution.

- - -

9. License Must Not Restrict Other Software

-

The license must not place restrictions on other software that is distributed along with the licensed software. For example, the license must not insist that all other programs distributed on the same medium must be open-source software.

- - -

10. License Must Be Technology-Neutral

-

No provision of the license may be predicated on any individual technology or style of interface.

- -
-

The Open Source Definition was originally derived from the Debian Free Software Guidelines (DFSG).

-

Version 1.9, last modified, 2007-03-22

-

Here’s the historical “Annotated OSD” from the early 2000’s. - diff --git a/elements/pf-v5-banner/docs/pf-v5-banner.md b/elements/pf-v5-banner/docs/pf-v5-banner.md deleted file mode 100644 index c2c4924ee3..0000000000 --- a/elements/pf-v5-banner/docs/pf-v5-banner.md +++ /dev/null @@ -1,59 +0,0 @@ -{% renderOverview %} - Default -{% endrenderOverview %} - -{% band header="Usage" %} - {% htmlexample %} - Default - {% endhtmlexample %} - - - ### With a variant - Available variants are: default, info, danger, success, warning - - {% htmlexample %} - Default - Info - Danger - Success - Warning - {% endhtmlexample %} - - - ### Sticky - Banners can be set to stick to the top of their container by adding the `sticky` attribute. - - {% htmlexample %} - Sticky - {% endhtmlexample %} - - - ### With an icon - You can add a icon by using the shorthand icon attribute - - {% htmlexample %} - Info - {% endhtmlexample %} - - Or you can use the icon slot and slot in a `svg` or `pf-v5-icon` element - - {% htmlexample %} - - - Info - - {% endhtmlexample %} - -{% endband %} - -{% renderSlots %}{% endrenderSlots %} - -{% renderAttributes %}{% endrenderAttributes %} - -{% renderMethods %}{% endrenderMethods %} - -{% renderEvents %}{% endrenderEvents %} - -{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} - -{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-v5-banner/docs/screenshot.png b/elements/pf-v5-banner/docs/screenshot.png deleted file mode 100644 index db0887a28af428ec8d9c3a5160c05b61a4961cc0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 11435 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: void { - if (changed.has('icon') && this.icon) { - import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js'); - } - } - - override render(): TemplateResult<1> { - const { variant, icon } = this; - const hasIcon = !!icon || this.#slots.hasSlotted('icon'); - return html` - -

- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - 'pf-v5-banner': PfV5Banner; - } -} diff --git a/elements/pf-v5-banner/test/pf-banner.e2e.ts b/elements/pf-v5-banner/test/pf-banner.e2e.ts deleted file mode 100644 index c833252a2c..0000000000 --- a/elements/pf-v5-banner/test/pf-banner.e2e.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { test } from '@playwright/test'; -import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; -import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js'; - -const tagName = 'pf-v5-banner'; - -test.describe(tagName, () => { - test('snapshot', async ({ page }) => { - const componentPage = new PfeDemoPage(page, tagName); - await componentPage.navigate(); - await componentPage.snapshot(); - }); - - test('ssr', async ({ browser }) => { - const fixture = new SSRPage({ - tagName, - browser, - demoDir: new URL('../demo/', import.meta.url), - importSpecifiers: [ - `@patternfly/elements/${tagName}/${tagName}.js`, - ], - }); - await fixture.snapshots(); - }); -}); diff --git a/elements/pf-v5-banner/test/pf-banner.spec.ts b/elements/pf-v5-banner/test/pf-banner.spec.ts deleted file mode 100644 index 5a6bcd4d1e..0000000000 --- a/elements/pf-v5-banner/test/pf-banner.spec.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { expect, html } from '@open-wc/testing'; -import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { getColor, hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js'; -import { PfV5Banner } from '@patternfly/elements/pf-v5-banner/pf-v5-banner.js'; - -describe('', function() { - describe('simply instantiating', function() { - it('imperatively instantiates', function() { - expect(document.createElement('pf-v5-banner')).to.be.an.instanceof(PfV5Banner); - }); - - it('should upgrade', async function() { - const el = await createFixture(html` - Default - `); - const klass = customElements.get('pf-v5-banner'); - expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfV5Banner); - }); - - describe('without variant attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Default - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display default variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#4f5255')); - }); - }); - - describe('with variant="info" attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display info variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#73bcf7')); - }); - }); - - describe('with variant="danger" attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should display danger variant', async function() { - const container = element.shadowRoot!.querySelector('#container')!; - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#ffffff')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#c9190b')); - }); - }); - - describe('with valid icon attribute', function() { - let element: PfV5Banner; - beforeEach(async function() { - element = await createFixture(html` - Info - `); - await element.updateComplete; - }); - // TODO: remove assertions on shadow roots - it('should render an icon', async function() { - const icon = element.shadowRoot!.querySelector('pf-v5-icon'); - expect(icon).to.exist; - }); - }); - }); -}); From f8274dfda2d2f577a836710f1ae066d5cb325fab Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 13 May 2026 13:51:39 -0400 Subject: [PATCH 5/7] fix(banner): correct jsdoc to cem documentation comments --- elements/pf-v6-banner/pf-v6-banner.css | 64 +++++++++++++++++--------- elements/pf-v6-banner/pf-v6-banner.ts | 15 +----- 2 files changed, 43 insertions(+), 36 deletions(-) diff --git a/elements/pf-v6-banner/pf-v6-banner.css b/elements/pf-v6-banner/pf-v6-banner.css index 5c4d1e6186..cde10de3b1 100644 --- a/elements/pf-v6-banner/pf-v6-banner.css +++ b/elements/pf-v6-banner/pf-v6-banner.css @@ -10,29 +10,47 @@ :host([sticky]) { position: sticky; inset-block-start: 0; - z-index: var(--pf-v6-c-banner--m-sticky--ZIndex, - var(--pf-t--global--z-index--md, 300)); - box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow, - var(--pf-t--global--box-shadow--md)); + z-index: + /** Overrides the z-index when sticky */ + var(--pf-v6-c-banner--m-sticky--ZIndex, + var(--pf-t--global--z-index--md, 300)); + box-shadow: + /** Overrides the box shadow when sticky */ + var(--pf-v6-c-banner--m-sticky--BoxShadow, + var(--pf-t--global--box-shadow--md)); } #container { - --_bg: var(--pf-v6-c-banner--BackgroundColor, - var(--pf-t--global--color--nonstatus--gray--default, - light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d)))); - --_color: var(--pf-v6-c-banner--Color, - var(--pf-t--global--text--color--nonstatus--on-gray--default, - light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff)))); - --_padding-block: var(--pf-v6-c-banner--PaddingBlockStart, - var(--pf-t--global--spacer--xs, 0.25rem)); - --_padding-inline: var(--pf-v6-c-banner--PaddingInlineStart, - var(--pf-t--global--spacer--md, 1rem)); - --_font-size: var(--pf-v6-c-banner--FontSize, - var(--pf-t--global--font--size--body--default, 0.875rem)); - --_border-color: var(--pf-v6-c-banner--BorderColor, - var(--pf-t--global--border--color--high-contrast, transparent)); - --_border-width: var(--pf-v6-c-banner--BorderWidth, - var(--pf-t--global--border--width--high-contrast--regular, 0)); + --_bg: + /** Overrides the banner background color */ + var(--pf-v6-c-banner--BackgroundColor, + var(--pf-t--global--color--nonstatus--gray--default, + light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d)))); + --_color: + /** Overrides the banner text color */ + var(--pf-v6-c-banner--Color, + var(--pf-t--global--text--color--nonstatus--on-gray--default, + light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff)))); + --_padding-block: + /** Overrides the block padding */ + var(--pf-v6-c-banner--PaddingBlockStart, + var(--pf-t--global--spacer--xs, 0.25rem)); + --_padding-inline: + /** Overrides the inline padding */ + var(--pf-v6-c-banner--PaddingInlineStart, + var(--pf-t--global--spacer--md, 1rem)); + --_font-size: + /** Overrides the font size */ + var(--pf-v6-c-banner--FontSize, + var(--pf-t--global--font--size--body--default, 0.875rem)); + --_border-color: + /** Overrides the block border color, visible in high-contrast mode */ + var(--pf-v6-c-banner--BorderColor, + var(--pf-t--global--border--color--high-contrast, transparent)); + --_border-width: + /** Overrides the block border width, visible in high-contrast mode */ + var(--pf-v6-c-banner--BorderWidth, + var(--pf-t--global--border--width--high-contrast--regular, 0)); flex-shrink: 0; padding-block: var(--_padding-block); @@ -44,8 +62,10 @@ border-block: var(--_border-width) solid var(--_border-color); @media (min-width: 768px) { - --_padding-inline: var(--pf-v6-c-banner--md--PaddingInlineStart, - var(--pf-t--global--spacer--lg, 1.5rem)); + --_padding-inline: + /** Overrides the inline padding at the medium breakpoint */ + var(--pf-v6-c-banner--md--PaddingInlineStart, + var(--pf-t--global--spacer--lg, 1.5rem)); } /* Non-status color modifiers (before status so status takes precedence) */ diff --git a/elements/pf-v6-banner/pf-v6-banner.ts b/elements/pf-v6-banner/pf-v6-banner.ts index 29844912b9..ace38d1f9e 100644 --- a/elements/pf-v6-banner/pf-v6-banner.ts +++ b/elements/pf-v6-banner/pf-v6-banner.ts @@ -36,19 +36,6 @@ export type BannerStatus = * remains focusable via Tab. * * @summary Provides a full-width banner for brief, non-dismissible messages. - * @slot - Banner content, including text, links, or icons. For accessibility, - * status banners MUST include `screen-reader-text` and SHOULD include - * a status icon so sighted users can identify the status at a glance. - * @cssprop {} [--pf-v6-c-banner--BackgroundColor] - Overrides the banner background color. Defaults to `--pf-t--global--color--nonstatus--gray--default`. - * @cssprop {} [--pf-v6-c-banner--Color] - Overrides the banner text color. Defaults to `--pf-t--global--text--color--nonstatus--on-gray--default`. - * @cssprop {} [--pf-v6-c-banner--PaddingBlockStart] - Overrides the block padding. Defaults to `--pf-t--global--spacer--xs`. - * @cssprop {} [--pf-v6-c-banner--PaddingInlineStart] - Overrides the inline padding. Defaults to `--pf-t--global--spacer--md`. - * @cssprop {} [--pf-v6-c-banner--md--PaddingInlineStart] - Overrides the inline padding at the medium breakpoint. Defaults to `--pf-t--global--spacer--lg`. - * @cssprop {} [--pf-v6-c-banner--FontSize] - Overrides the font size. Defaults to `--pf-t--global--font--size--body--default`. - * @cssprop {} [--pf-v6-c-banner--BorderColor] - Overrides the block border color, visible in high-contrast mode. Defaults to `--pf-t--global--border--color--high-contrast`. - * @cssprop {} [--pf-v6-c-banner--BorderWidth] - Overrides the block border width, visible in high-contrast mode. Defaults to `--pf-t--global--border--width--high-contrast--regular`. - * @cssprop {} [--pf-v6-c-banner--m-sticky--ZIndex] - Overrides the z-index when sticky. Defaults to `--pf-t--global--z-index--md`. - * @cssprop [--pf-v6-c-banner--m-sticky--BoxShadow] - Overrides the box shadow when sticky. Defaults to `--pf-t--global--box-shadow--md`. */ @customElement('pf-v6-banner') export class PfV6Banner extends LitElement { @@ -71,7 +58,7 @@ export class PfV6Banner extends LitElement { return html`
${screenReaderText} - +
`; } From d441d78ad1d9fbc6a8ab86180031a45a6fd014c3 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 13 May 2026 13:52:45 -0400 Subject: [PATCH 6/7] chore: add changeset --- .changeset/smooth-webs-travel.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 .changeset/smooth-webs-travel.md diff --git a/.changeset/smooth-webs-travel.md b/.changeset/smooth-webs-travel.md new file mode 100644 index 0000000000..0e98815a32 --- /dev/null +++ b/.changeset/smooth-webs-travel.md @@ -0,0 +1,26 @@ +--- +"@patternfly/elements": major +--- + +✨ Added `` replacing ``. Banner now follows +PatternFly v6 design specs. + +```html + + Info banner content + +``` + +** Breaking Changes from v5 ** + +- Renamed tag from `` to `` +- `variant` attribute split into separate color and status attributes +- CSS custom properties renamed from `--pf-v5-c-banner--*` to `--pf-v6-c-banner--*` +- ✨ Added `color` attribute for decorative colors (red, orangered, orange, yellow, +green, teal, blue, purple) +- ✨ Added `status `attribute for semantic statuses (success, warning, danger, info, +custom) +- ✨ Added `screen-reader-text` attribute for visually-hidden accessible text +- Removed `variant` attribute (use color or status instead) +- Removed `icon` attribute and icon slot (compose icons in default slot) +- Removed container and icon CSS parts From ce239e8f40af3098317c612e0479bacf0f7ee128 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Thu, 14 May 2026 12:27:22 -0400 Subject: [PATCH 7/7] docs(banner): add README --- elements/pf-v6-banner/README.md | 51 +++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 elements/pf-v6-banner/README.md diff --git a/elements/pf-v6-banner/README.md b/elements/pf-v6-banner/README.md new file mode 100644 index 0000000000..e995a2253b --- /dev/null +++ b/elements/pf-v6-banner/README.md @@ -0,0 +1,51 @@ +# pf-v6-banner + +A full-width banner for communicating short, non-dismissible messages. + +## Usage + +### Default banner + +```html +Default banner +``` + +### Status banner with screen reader text + +```html + + An error has occurred. Contact support for help. + +``` + +### Sticky color banner + +```html + + This banner sticks to the top of its container. + +``` + +## Divergences from React `Banner` + +### Changed API + +| React prop | Web component | Difference | +|---|---|---| +| `isSticky` | `sticky` attribute | Renamed; dropped `is` prefix | +| `color` + `status` mutual exclusion | Both accepted | React enforces via TypeScript union types (`color` and `status` cannot both be set). The web component accepts both; `status` takes visual precedence via CSS cascade. | + +### Added + +| Web component API | Notes | +|---|---| +| `--pf-v6-c-banner--BackgroundColor` | Override the default background color | +| `--pf-v6-c-banner--Color` | Override the default text color | +| `--pf-v6-c-banner--FontSize` | Override the font size | +| `--pf-v6-c-banner--PaddingBlockStart` | Override the block padding | +| `--pf-v6-c-banner--PaddingInlineStart` | Override the inline padding | +| `--pf-v6-c-banner--BorderColor` | Override the border color (high-contrast mode) | +| `--pf-v6-c-banner--BorderWidth` | Override the border width (high-contrast mode) | +| `--pf-v6-c-banner--m-sticky--ZIndex` | Override the z-index when sticky | +| `--pf-v6-c-banner--m-sticky--BoxShadow` | Override the box shadow when sticky | +| Per-color/status CSS custom properties | Each color (e.g., `--pf-v6-c-banner--m-red--BackgroundColor`) and status variant has overridable background and text color properties |