From 9fb2279ab04af138e95f491f28189aa0d9fd771f Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 22 Sep 2024 09:31:43 +0300 Subject: [PATCH 1/9] feat(alert): dpo tokens --- .changeset/short-maps-beg.md | 6 ++ elements/rh-alert/demo/deprecated-states.html | 39 +++++++++++++ elements/rh-alert/demo/states.html | 24 ++++---- elements/rh-alert/rh-alert.css | 11 +++- elements/rh-alert/rh-alert.ts | 57 ++++++++++++++++--- package-lock.json | 8 +-- package.json | 2 +- 7 files changed, 119 insertions(+), 28 deletions(-) create mode 100644 .changeset/short-maps-beg.md create mode 100644 elements/rh-alert/demo/deprecated-states.html diff --git a/.changeset/short-maps-beg.md b/.changeset/short-maps-beg.md new file mode 100644 index 0000000000..c645750bab --- /dev/null +++ b/.changeset/short-maps-beg.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": minor +--- +``: added new states: `info`, `neutral`, and `caution`, and deprecated +`note` (now an alias to `info`), `default` (now an alias to `neutral`), and +`error` (now an alias to `danger`). diff --git a/elements/rh-alert/demo/deprecated-states.html b/elements/rh-alert/demo/deprecated-states.html new file mode 100644 index 0000000000..fe7f03d278 --- /dev/null +++ b/elements/rh-alert/demo/deprecated-states.html @@ -0,0 +1,39 @@ +
+ +

Error - alias of Danger

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est + egestas, a sollicitudin mauris tincidunt.

+ Dismiss + Confirm + + + +

Default - alias of Neutral

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est + egestas, a sollicitudin mauris tincidunt.

+ Dismiss + Confirm + + + +

Note - alias of Info

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est + egestas, a sollicitudin mauris tincidunt.

+ Dismiss + Confirm + +
+ + + + diff --git a/elements/rh-alert/demo/states.html b/elements/rh-alert/demo/states.html index 45f88b9813..f699858d77 100644 --- a/elements/rh-alert/demo/states.html +++ b/elements/rh-alert/demo/states.html @@ -1,46 +1,46 @@
- -

Default

+ +

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm - -

Default

+ +

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm - -

Info

+ +

Caution

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm - -

Success

+ +

Neutral

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm - -

Warning

+ +

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm - -

Danger

+ +

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css index ed14f60075..20d743164f 100644 --- a/elements/rh-alert/rh-alert.css +++ b/elements/rh-alert/rh-alert.css @@ -82,9 +82,9 @@ footer ::slotted(rh-button[variant='link' i]) { } #container.info { - --_border-color: var(--rh-color-status-note); + --_border-color: var(--rh-color-status-info); --_icon-color: var(--rh-color-icon-status-info); - --_header-color: var(--rh-color-status-note); + --_header-color: var(--rh-color-status-info); --_background-color: var(--rh-color-surface-status-info); } @@ -95,6 +95,13 @@ footer ::slotted(rh-button[variant='link' i]) { --_background-color: var(--rh-color-surface-status-success); } +#container.caution { + --_border-color: var(--rh-color-status-caution); + --_icon-color: var(--rh-color-icon-status-caution); + --_header-color: var(--rh-color-status-caution); + --_background-color: var(--rh-color-surface-status-caution); +} + #container.warning { --_border-color: var(--rh-color-status-warning); --_icon-color: var(--rh-color-icon-status-warning); diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index d749d423da..8978851b1e 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -5,6 +5,7 @@ import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { repeat } from 'lit/directives/repeat.js'; import { classMap } from 'lit/directives/class-map.js'; +import { observes } from '@patternfly/pfe-core/decorators.js'; import { getRandomId } from '@patternfly/pfe-core/functions/random.js'; import '@rhds/elements/rh-surface/rh-surface.js'; @@ -23,12 +24,12 @@ interface ToastOptions { } const ICONS = new Map(Object.entries({ - default: 'notification-fill', - error: 'error-fill', + neutral: 'notification-fill', success: 'check-circle-fill', + caution: 'warning-fill', warning: 'warning-fill', danger: 'error-fill', - info: 'information-fill', + note: 'information-fill', })); export class AlertCloseEvent extends Event { @@ -129,20 +130,38 @@ export class RhAlert extends LitElement { } private get icon() { - return ICONS.get(this.state.toLowerCase()) ?? ''; + const state = this.state.toLowerCase() as this['state']; + switch (state) { + case 'info': return ICONS.get('note'); + case 'default': return ICONS.get('neutral'); + case 'error': return ICONS.get('danger'); + default: return ICONS.get(state); + } } /** * Communicates the urgency of a message and is denoted by various styling configurations. * - * - `default` - Indicates generic information or a message with no severity. - * - `info` - Indicates helpful information or a message with very little to no severity. - * - `success` - Indicates a success state, like if a process was completed without errors. - * - `warning` - Indicates a caution state, like a non-blocking error that might need to be fixed. + * - `neutral` - Indicates generic information or a message with no severity. * - `danger` - Indicates a danger state, like an error that is blocking a user from completing a task. + * - `warning` - Indicates a warning state, like a non-blocking error that might need to be fixed. + * - `caution` - Indicates an action or notice which should immediately draw the attention + * - `neutral` - Default state, with no specific meaning + * - `note` - Indicates helpful information or a message with very little to no severity. + * - `success` - Indicates a success state, like if a process was completed without errors. */ @property({ reflect: true }) - state: 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info' = 'default'; + state: + | 'danger' + | 'warning' + | 'caution' + | 'neutral' + | 'note' + | 'success' + | 'info' // deprecated + | 'default' // deprecated + | 'error' = // deprecated + 'neutral'; /** * The alternate Inline alert style includes a border instead of a line which @@ -171,6 +190,26 @@ export class RhAlert extends LitElement { } } + /** Ensures that state is consistent, regardless of input */ + @observes('state') + private stateChanged() { + const state = this.state.toLowerCase(); + switch (state) { + case 'info': this.state = 'note'; break; + case 'default': this.state = 'neutral'; break; + case 'error': this.state = 'danger'; break; + case 'danger': + case 'warning': + case 'caution': + case 'neutral': + case 'note': + case 'success': + return; + default: + this.state = 'neutral'; + } + } + render() { const hasActions = this.#slots.hasSlotted('actions'); const hasBody = this.#slots.hasSlotted(SlotController.default as unknown as string); diff --git a/package-lock.json b/package-lock.json index 80b80eadd4..84f5e25804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "@lit/context": "^1.1.2", "@patternfly/pfe-core": "^4.0.1", "@rhds/icons": "^1.1.2", - "@rhds/tokens": "^2.1.0-next.14", + "@rhds/tokens": "^2.1.0-next.15", "lit": "^3.2.0", "prism-esm": "^1.29.0-fix.6", "tslib": "^2.7.0", @@ -4633,9 +4633,9 @@ "license": "MIT" }, "node_modules/@rhds/tokens": { - "version": "2.1.0-next.14", - "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.0-next.14.tgz", - "integrity": "sha512-vTb435EmN12NO9hqjgarcJMOcxdJ+LtRh/sakv1SVUgzFl6ZcJJUrL98gMDep0pt8mlnHEIVzNC+cOqQdBFRPA==", + "version": "2.1.0-next.15", + "resolved": "https://registry.npmjs.org/@rhds/tokens/-/tokens-2.1.0-next.15.tgz", + "integrity": "sha512-4sIXxYAIsKsX/F5fQmX/bOh82AqlZabQtiDmYx8w6n7e65YBggVGYOO4DpXyaNN0PtuZRcbuw1YHQABDH+8xSg==", "dependencies": { "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "highlight.js": "^11.10.0", diff --git a/package.json b/package.json index b976116942..a45f25b76f 100644 --- a/package.json +++ b/package.json @@ -291,7 +291,7 @@ "@lit/context": "^1.1.2", "@patternfly/pfe-core": "^4.0.1", "@rhds/icons": "^1.1.2", - "@rhds/tokens": "^2.1.0-next.14", + "@rhds/tokens": "^2.1.0-next.15", "lit": "^3.2.0", "prism-esm": "^1.29.0-fix.6", "tslib": "^2.7.0", From 9abdabbaf248612d45e4d583fe9428837b67c772 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 23 Sep 2024 17:04:00 +0300 Subject: [PATCH 2/9] fix: handle deprecated statuses --- elements/rh-alert/rh-alert.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index 8978851b1e..510014aff2 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -191,18 +191,20 @@ export class RhAlert extends LitElement { } /** Ensures that state is consistent, regardless of input */ - @observes('state') + @observes('state', { waitFor: 'updated' }) private stateChanged() { const state = this.state.toLowerCase(); switch (state) { - case 'info': this.state = 'note'; break; + // the first three are deprecated pre-DPO status names + case 'note': this.state = 'info'; break; case 'default': this.state = 'neutral'; break; case 'error': this.state = 'danger'; break; + // the following are DPO-approved status names case 'danger': case 'warning': case 'caution': case 'neutral': - case 'note': + case 'info': case 'success': return; default: From 04acd9bb62c2800cd86a3a596f69dfcb059f87a4 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 23 Sep 2024 17:20:56 +0300 Subject: [PATCH 3/9] fix: recombobulate status names --- elements/rh-alert/rh-alert.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index 510014aff2..9db779eaf7 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -156,9 +156,9 @@ export class RhAlert extends LitElement { | 'warning' | 'caution' | 'neutral' - | 'note' + | 'info' | 'success' - | 'info' // deprecated + | 'note' // deprecated | 'default' // deprecated | 'error' = // deprecated 'neutral'; From b55395c0f64189bdc290246c7d70f08b4a944bc7 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 23 Sep 2024 17:52:05 +0300 Subject: [PATCH 4/9] docs: update jsdoc --- elements/rh-alert/rh-alert.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index 9db779eaf7..6b1447fb67 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -146,8 +146,7 @@ export class RhAlert extends LitElement { * - `danger` - Indicates a danger state, like an error that is blocking a user from completing a task. * - `warning` - Indicates a warning state, like a non-blocking error that might need to be fixed. * - `caution` - Indicates an action or notice which should immediately draw the attention - * - `neutral` - Default state, with no specific meaning - * - `note` - Indicates helpful information or a message with very little to no severity. + * - `info` - Indicates helpful information or a message with very little to no severity. * - `success` - Indicates a success state, like if a process was completed without errors. */ @property({ reflect: true }) From 56c00c7fa20602e276de85c9aec5c47cb2f7fc0c Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 25 Sep 2024 08:33:45 +0300 Subject: [PATCH 5/9] docs: ssr compatible 11ty demos --- docs/elements/demo.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/elements/demo.html b/docs/elements/demo.html index 6855056ba3..10e9764ccf 100644 --- a/docs/elements/demo.html +++ b/docs/elements/demo.html @@ -29,6 +29,11 @@ import '/assets/javascript/dsd-polyfill.js'; import '@lit-labs/ssr-client/lit-element-hydrate-support.js'; import 'element-internals-polyfill'; + // include these, which are often internal to elements, to avoid SSR defer-hydration bugs + import '@rhds/elements/rh-icon/rh-icon.js'; + import '@rhds/elements/rh-surface/rh-surface.js'; + // load up the demo and picker + import '@rhds/elements/lib/elements/rh-context-picker/rh-context-picker.js'; import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js'; From f6c8370f3f9622e1bba9e3b7804b592c1e49edde Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 25 Sep 2024 09:11:25 +0300 Subject: [PATCH 6/9] fix(alert): ssr compat --- elements/rh-alert/rh-alert.ts | 58 +++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 26 deletions(-) diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index 6b1447fb67..41c28e4ec4 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -1,11 +1,10 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; -import { type CSSResult, LitElement, html, render } from 'lit'; +import { type CSSResult, LitElement, html, isServer, render } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { repeat } from 'lit/directives/repeat.js'; import { classMap } from 'lit/directives/class-map.js'; -import { observes } from '@patternfly/pfe-core/decorators.js'; import { getRandomId } from '@patternfly/pfe-core/functions/random.js'; import '@rhds/elements/rh-surface/rh-surface.js'; @@ -189,15 +188,12 @@ export class RhAlert extends LitElement { } } - /** Ensures that state is consistent, regardless of input */ - @observes('state', { waitFor: 'updated' }) - private stateChanged() { - const state = this.state.toLowerCase(); - switch (state) { + #aliasState(state: string) { + switch (state.toLowerCase()) { // the first three are deprecated pre-DPO status names - case 'note': this.state = 'info'; break; - case 'default': this.state = 'neutral'; break; - case 'error': this.state = 'danger'; break; + case 'note': return 'info'; + case 'default': return 'neutral'; + case 'error': return 'danger'; // the following are DPO-approved status names case 'danger': case 'warning': @@ -205,33 +201,43 @@ export class RhAlert extends LitElement { case 'neutral': case 'info': case 'success': - return; + return state as this['state']; default: - this.state = 'neutral'; + return 'neutral'; + } + } + + override connectedCallback() { + super.connectedCallback(); + if (!isServer) { + this.requestUpdate(); } } render() { - const hasActions = this.#slots.hasSlotted('actions'); - const hasBody = this.#slots.hasSlotted(SlotController.default as unknown as string); - const { state, variant = '' } = this; + const _isServer = isServer && !this.hasUpdated; + const hasActions = _isServer || this.#slots.hasSlotted('actions'); + const hasBody = + _isServer || this.#slots.hasSlotted(SlotController.default as unknown as string); + const { variant = '' } = this; + const state = this.#aliasState(this.state); return html` + class="${classMap({ + hasBody, + on: true, + light: true, + [state]: true, + [variant]: !!variant, + })}" + role="alert" + aria-hidden="false" + color-palette="lightest">
-
+
${!this.dismissable && this.variant !== 'toast' ? '' : html` From dfe53cae23caa664f5192f4101054c3ddb6a4211 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 26 Sep 2024 14:39:09 +0300 Subject: [PATCH 7/9] fix(alert): neutral grays --- elements/rh-alert/rh-alert.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css index 20d743164f..d4c73906f1 100644 --- a/elements/rh-alert/rh-alert.css +++ b/elements/rh-alert/rh-alert.css @@ -81,6 +81,13 @@ footer ::slotted(rh-button[variant='link' i]) { font-family: var(--_font-family); } +#container.neutral { + --_border-color: var(--rh-color-status-neutral); + --_icon-color: var(--rh-color-icon-status-neutral); + --_header-color: var(--rh-color-status-neutral); + --_background-color: var(--rh-color-surface-status-neutral); +} + #container.info { --_border-color: var(--rh-color-status-info); --_icon-color: var(--rh-color-icon-status-info); From 6f78f4c1f4c25a778c783323e373e4148b130a8f Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 26 Sep 2024 14:40:50 +0300 Subject: [PATCH 8/9] fix(alert): crayons for headings --- elements/rh-alert/rh-alert.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css index d4c73906f1..7b5e63ee12 100644 --- a/elements/rh-alert/rh-alert.css +++ b/elements/rh-alert/rh-alert.css @@ -84,42 +84,42 @@ footer ::slotted(rh-button[variant='link' i]) { #container.neutral { --_border-color: var(--rh-color-status-neutral); --_icon-color: var(--rh-color-icon-status-neutral); - --_header-color: var(--rh-color-status-neutral); + --_header-color: var(--rh-color-text-primary); --_background-color: var(--rh-color-surface-status-neutral); } #container.info { --_border-color: var(--rh-color-status-info); --_icon-color: var(--rh-color-icon-status-info); - --_header-color: var(--rh-color-status-info); + --_header-color: var(--rh-color-purple-70); --_background-color: var(--rh-color-surface-status-info); } #container.success { --_border-color: var(--rh-color-status-success); --_icon-color: var(--rh-color-icon-status-success); - --_header-color: var(--rh-color-status-success); + --_header-color: var(--rh-color-green-70); --_background-color: var(--rh-color-surface-status-success); } #container.caution { --_border-color: var(--rh-color-status-caution); --_icon-color: var(--rh-color-icon-status-caution); - --_header-color: var(--rh-color-status-caution); + --_header-color: var(--rh-color-orange-70); --_background-color: var(--rh-color-surface-status-caution); } #container.warning { --_border-color: var(--rh-color-status-warning); --_icon-color: var(--rh-color-icon-status-warning); - --_header-color: var(--rh-color-status-warning); + --_header-color: var(--rh-color-yello-70); --_background-color: var(--rh-color-surface-status-warning); } #container.danger { --_border-color: var(--rh-color-status-danger); --_icon-color: var(--rh-color-icon-status-danger); - --_header-color: var(--rh-color-status-danger); + --_header-color: var(--rh-color-red-orange-70); --_background-color: var(--rh-color-surface-status-danger); } From 9137494c6573c5ca562696a85a55d261a480a08e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 26 Sep 2024 14:47:43 +0300 Subject: [PATCH 9/9] fix(alert): typo in css --- elements/rh-alert/rh-alert.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-alert/rh-alert.css b/elements/rh-alert/rh-alert.css index 7b5e63ee12..3bde308959 100644 --- a/elements/rh-alert/rh-alert.css +++ b/elements/rh-alert/rh-alert.css @@ -112,7 +112,7 @@ footer ::slotted(rh-button[variant='link' i]) { #container.warning { --_border-color: var(--rh-color-status-warning); --_icon-color: var(--rh-color-icon-status-warning); - --_header-color: var(--rh-color-yello-70); + --_header-color: var(--rh-color-yellow-70); --_background-color: var(--rh-color-surface-status-warning); }