From 33afe494a8433664f70e2b1cdf721b689f484413 Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Mon, 28 Aug 2023 14:00:57 -0400 Subject: [PATCH 01/12] feat: init commit with pf-alert --- elements/package.json | 1 + elements/pf-alert/README.md | 11 + elements/pf-alert/demo/demo.css | 4 + elements/pf-alert/demo/pf-alert.html | 18 + elements/pf-alert/demo/pf-alert.js | 1 + elements/pf-alert/docs/pf-alert.md | 17 + elements/pf-alert/pf-alert.css | 471 ++++++++++++++++++++++++ elements/pf-alert/pf-alert.ts | 106 ++++++ elements/pf-alert/test/pf-alert.e2e.ts | 12 + elements/pf-alert/test/pf-alert.spec.ts | 21 ++ 10 files changed, 662 insertions(+) create mode 100644 elements/pf-alert/README.md create mode 100644 elements/pf-alert/demo/demo.css create mode 100644 elements/pf-alert/demo/pf-alert.html create mode 100644 elements/pf-alert/demo/pf-alert.js create mode 100644 elements/pf-alert/docs/pf-alert.md create mode 100644 elements/pf-alert/pf-alert.css create mode 100644 elements/pf-alert/pf-alert.ts create mode 100644 elements/pf-alert/test/pf-alert.e2e.ts create mode 100644 elements/pf-alert/test/pf-alert.spec.ts diff --git a/elements/package.json b/elements/package.json index 0cd47fe88f..197c32786e 100644 --- a/elements/package.json +++ b/elements/package.json @@ -16,6 +16,7 @@ "./pf-accordion/pf-accordion-header.js": "./pf-accordion/pf-accordion-header.js", "./pf-accordion/pf-accordion-panel.js": "./pf-accordion/pf-accordion-panel.js", "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js", + "./pf-alert/pf-alert.js": "./pf-alert/pf-alert.js", "./pf-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.js", "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js", "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js", diff --git a/elements/pf-alert/README.md b/elements/pf-alert/README.md new file mode 100644 index 0000000000..06287b9df3 --- /dev/null +++ b/elements/pf-alert/README.md @@ -0,0 +1,11 @@ +# Alert +Add a description of the component here. + +## Usage +Describe how best to use this web component along with best practices. + +```html + + + +``` diff --git a/elements/pf-alert/demo/demo.css b/elements/pf-alert/demo/demo.css new file mode 100644 index 0000000000..148b952da4 --- /dev/null +++ b/elements/pf-alert/demo/demo.css @@ -0,0 +1,4 @@ +pf-alert { + padding: 0.5rem; + display: block; +} diff --git a/elements/pf-alert/demo/pf-alert.html b/elements/pf-alert/demo/pf-alert.html new file mode 100644 index 0000000000..83a7d11d43 --- /dev/null +++ b/elements/pf-alert/demo/pf-alert.html @@ -0,0 +1,18 @@ + + + + + + + + + +

+ Inline +

+ + + + + + diff --git a/elements/pf-alert/demo/pf-alert.js b/elements/pf-alert/demo/pf-alert.js new file mode 100644 index 0000000000..d49aff6635 --- /dev/null +++ b/elements/pf-alert/demo/pf-alert.js @@ -0,0 +1 @@ +import '@patternfly/elements/pf-alert/pf-alert.js'; diff --git a/elements/pf-alert/docs/pf-alert.md b/elements/pf-alert/docs/pf-alert.md new file mode 100644 index 0000000000..61f5ec0add --- /dev/null +++ b/elements/pf-alert/docs/pf-alert.md @@ -0,0 +1,17 @@ +{% renderOverview %} + +{% endrenderOverview %} + +{% band header="Usage" %}{% endband %} + +{% renderSlots %}{% endrenderSlots %} + +{% renderAttributes %}{% endrenderAttributes %} + +{% renderMethods %}{% endrenderMethods %} + +{% renderEvents %}{% endrenderEvents %} + +{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} + +{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-alert/pf-alert.css b/elements/pf-alert/pf-alert.css new file mode 100644 index 0000000000..9d80cd5380 --- /dev/null +++ b/elements/pf-alert/pf-alert.css @@ -0,0 +1,471 @@ +/* :host { + --pf-global--Color--100: var(--pf-global--Color--dark-100, #151515); + --pf-global--Color--200: var(--pf-global--Color--dark-200, #6a6e73); + --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100, #d2d2d2); + --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100, #0066cc); + --pf-global--link--Color: var(--pf-global--link--Color--dark, #0066cc); + --pf-global--link--Color--hover: var(--pf-global--link--Color--dark--hover, #004080); + --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100, #ffffff); + --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)); + --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100, #ffffff); + --pf-c-alert--GridTemplateColumns: max-content 1fr max-content; + --pf-c-alert--GridTemplateAreas: + "icon title action" + ". description description" + ". actiongroup actiongroup"; + --pf-c-alert--BorderTopWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-alert--BorderTopColor: var(--pf-global--default-color--200, #009596); + --pf-c-alert--PaddingTop: var(--pf-global--spacer--md, 1rem); + --pf-c-alert--PaddingRight: var(--pf-global--spacer--md, 1rem); + --pf-c-alert--PaddingBottom: var(--pf-global--spacer--md, 1rem); + --pf-c-alert--PaddingLeft: var(--pf-global--spacer--md, 1rem); + --pf-c-alert__FontSize: var(--pf-global--FontSize--sm, 0.875rem); + --pf-c-alert__toggle--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem) - 0.0625rem); + --pf-c-alert__toggle--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)); + --pf-c-alert__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md, 1rem)); + --pf-c-alert__toggle-icon--Rotate: 0; + --pf-c-alert__toggle-icon--Transition: var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)); + --pf-c-alert__icon--Color: var(--pf-global--default-color--200, #009596); + --pf-c-alert__icon--MarginTop: 0.0625rem; + --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem); + --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--bold, 700); + --pf-c-alert__title--Color: var(--pf-global--default-color--300, #003737); + --pf-c-alert__title--max-lines: 1; + --pf-c-alert__action--MarginTop: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); + --pf-c-alert__action--MarginBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) * -1); + --pf-c-alert__action--TranslateY: 0.125rem; + --pf-c-alert__action--MarginRight: calc(var(--pf-global--spacer--sm, 0.5rem) * -1); + --pf-c-alert__description--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); + --pf-c-alert__action-group--PaddingTop-base: var(--pf-global--spacer--xs, 0.25rem); + --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base, 0.25rem); + --pf-c-alert__description--action-group--PaddingTop-base: var(--pf-global--spacer--md, 1rem); + --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base, 1rem); + --pf-c-alert__action-group__c-button--not-last-child--MarginRight: var(--pf-global--spacer--lg, 1.5rem); + --pf-c-alert--m-success--BorderTopColor: var(--pf-global--success-color--100, #3e8635); + --pf-c-alert--m-success__icon--Color: var(--pf-global--success-color--100, #3e8635); + --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--200, #1e4f18); + --pf-c-alert--m-danger--BorderTopColor: var(--pf-global--danger-color--100, #c9190b); + --pf-c-alert--m-danger__icon--Color: var(--pf-global--danger-color--100, #c9190b); + --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--200, #a30000); + --pf-c-alert--m-warning--BorderTopColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-c-alert--m-warning__icon--Color: var(--pf-global--warning-color--100, #f0ab00); + --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--200, #795600); + --pf-c-alert--m-info--BorderTopColor: var(--pf-global--info-color--100, #2b9af3); + --pf-c-alert--m-info__icon--Color: var(--pf-global--info-color--100, #2b9af3); + --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--200, #002952); + --pf-c-alert--m-inline--BoxShadow: none; + --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--cyan-50, #f2f9f9); + --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--green-50, #f3faf2); + --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--red-50, #faeae8); + --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--gold-50, #fdf7e7); + --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa); + --pf-c-alert--m-inline--m-plain--BorderTopWidth: 0; + --pf-c-alert--m-inline--m-plain--BackgroundColor: transparent; + --pf-c-alert--m-inline--m-plain--PaddingTop: 0; + --pf-c-alert--m-inline--m-plain--PaddingRight: 0; + --pf-c-alert--m-inline--m-plain--PaddingBottom: 0; + --pf-c-alert--m-inline--m-plain--PaddingLeft: 0; + --pf-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content; + --pf-c-alert--m-expandable--GridTemplateAreas: + "toggle icon title action" + ". . description description" + ". . actiongroup actiongroup"; + --pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base, 0.25rem); + --pf-c-alert--m-expanded__toggle-icon--Rotate: 90deg; + --pf-c-alert--m-expanded__description--action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop-base, 1rem); +} */ +/* +#container { + color: var(--pf-global--Color--100, #151515); + position: relative; + display: grid; + padding: var(--pf-c-alert--PaddingTop, 1rem) var(--pf-c-alert--PaddingRight, 1rem) var(--pf-c-alert--PaddingBottom, 1rem) var(--pf-c-alert--PaddingLeft, 1rem); + font-size: var(--pf-c-alert__FontSize, 0.875rem) !important; + background-color: var(--pf-c-alert--BackgroundColor, #ffffff); + border-top: var(--pf-c-alert--BorderTopWidth, 2px) solid var(--pf-c-alert--BorderTopColor, #009596); + box-shadow: var(--pf-c-alert--BoxShadow, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)); + grid-template-columns: var(--pf-c-alert--GridTemplateColumns, max-content 1fr max-content); + grid-template-areas: var(--pf-c-alert--GridTemplateAreas); +} + +::slotted(:is(h1, h2, h3, h4, h5, h6)), +#header > * { + font-size: var(--pf-c-alert__FontSize, 0.875rem) !important; +} + + +.pf-c-alert.pf-m-success, +:host([variant="success"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color); + --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor); +} +.pf-c-alert.pf-m-danger, +:host([variant="danger"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color); + --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor); +} +.pf-c-alert.pf-m-warning, +:host([variant="warning"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color); + --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor); +} +.pf-c-alert.pf-m-info, +:host([variant="info"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color); + --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor); +} +.pf-c-alert.pf-m-inline { + --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow); + --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor); +} +.pf-c-alert.pf-m-plain { + --pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth); + --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--m-plain--BackgroundColor); + --pf-c-alert--PaddingTop: var(--pf-c-alert--m-inline--m-plain--PaddingTop); + --pf-c-alert--PaddingRight: var(--pf-c-alert--m-inline--m-plain--PaddingRight); + --pf-c-alert--PaddingBottom: var(--pf-c-alert--m-inline--m-plain--PaddingBottom); + --pf-c-alert--PaddingLeft: var(--pf-c-alert--m-inline--m-plain--PaddingLeft); +} +.pf-c-alert.pf-m-expandable { + --pf-c-alert--GridTemplateColumns: var(--pf-c-alert--m-expandable--GridTemplateColumns); + --pf-c-alert--GridTemplateAreas: var(--pf-c-alert--m-expandable--GridTemplateAreas); + --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expandable__description--action-group--PaddingTop); +} +.pf-c-alert.pf-m-expanded { + --pf-c-alert__toggle-icon--Rotate: var(--pf-c-alert--m-expanded__toggle-icon--Rotate); + --pf-c-alert__description--action-group--PaddingTop: var(--pf-c-alert--m-expanded__description--action-group--PaddingTop); +} +.pf-c-alert__toggle { + margin-top: var(--pf-c-alert__toggle--MarginTop); + margin-bottom: var(--pf-c-alert__toggle--MarginBottom); + margin-left: var(--pf-c-alert__toggle--MarginLeft); +} +.pf-c-alert__toggle-icon { + display: inline-block; + transition: var(--pf-c-alert__toggle-icon--Transition); + transform: rotate(var(--pf-c-alert__toggle-icon--Rotate)); +} +.pf-c-alert__icon, +#left-column, +#icon { + grid-area: icon; + display: flex; + margin-top: var(--pf-c-alert__icon--MarginTop); + margin-right: var(--pf-c-alert__icon--MarginRight); + font-size: var(--pf-c-alert__icon--FontSize); + color: var(--pf-c-alert__icon--Color); +} +.pf-c-alert__title, +#header { + grid-area: title; + font-weight: var(--pf-c-alert__title--FontWeight); + color: var(--pf-c-alert__title--Color); + word-break: break-word; +} +.pf-c-alert__title.pf-m-truncate { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--pf-c-alert__title--max-lines); + overflow: hidden; +} +.pf-c-alert__description, +#description { + grid-area: description; + padding-top: var(--pf-c-alert__description--PaddingTop); + word-break: break-word; +} +.pf-c-alert__description + .pf-c-alert__action-group { + --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop); +} +.pf-c-alert__action { + grid-area: action; + margin-top: var(--pf-c-alert__action--MarginTop); + margin-right: var(--pf-c-alert__action--MarginRight); + margin-bottom: var(--pf-c-alert__action--MarginBottom); + transform: translateY(var(--pf-c-alert__action--TranslateY)); +} +.pf-c-alert__action > .pf-c-button { + --pf-c-button--LineHeight: 1; +} +.pf-c-alert__action-group, +footer { + grid-area: actiongroup; + padding-top: var(--pf-c-alert__action-group--PaddingTop); +} +.pf-c-alert__action-group > .pf-c-button { + --pf-c-button--m-link--m-inline--hover--TextDecoration: none; +} +.pf-c-alert__action-group > .pf-c-button:not(:last-child) { + margin-right: var(--pf-c-alert__action-group__c-button--not-last-child--MarginRight); +} +.pf-m-overpass-font .pf-c-alert__title { + --pf-c-alert__title--FontWeight: var(--pf-global--FontWeight--normal, 400); +} +:where(.pf-theme-dark) .pf-c-alert { + --pf-c-alert--BackgroundColor: var(--pf-global--palette--black-600, #36373a); + --pf-c-alert__title--Color: var(--pf-global--default-color--200, #009596); + --pf-c-alert--m-success__title--Color: var(--pf-global--success-color--100, #3e8635); + --pf-c-alert--m-danger__title--Color: var(--pf-global--danger-color--100, #fe5142); + --pf-c-alert--m-warning__title--Color: var(--pf-global--warning-color--100, #f0ab00); + --pf-c-alert--m-info__title--Color: var(--pf-global--info-color--100, #2b9af3); + --pf-c-alert--m-inline--BackgroundColor: var(--pf-global--palette--black-600, #36373a); + --pf-c-alert--m-inline--m-success--BackgroundColor: var(--pf-global--palette--black-600, #36373a); + --pf-c-alert--m-inline--m-danger--BackgroundColor: var(--pf-global--palette--black-600, #36373a); + --pf-c-alert--m-inline--m-warning--BackgroundColor: var(--pf-global--palette--black-600, #36373a); + --pf-c-alert--m-inline--m-info--BackgroundColor: var(--pf-global--palette--black-600, #36373a); +} +.pf-c-alert-group { + --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm, 0.5rem); + --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl, 3rem); + --pf-c-alert-group--m-toast--Right: var(--pf-global--spacer--xl, 2rem); + --pf-c-alert-group--m-toast--MaxWidth: 37.5rem; + --pf-c-alert-group--m-toast--ZIndex: var(--pf-global--ZIndex--2xl, 600); + --pf-c-alert-group__overflow-button--BorderWidth: 0; + --pf-c-alert-group__overflow-button--PaddingTop: var(--pf-global--spacer--lg, 1.5rem); + --pf-c-alert-group__overflow-button--PaddingRight: var(--pf-global--spacer--md, 1rem); + --pf-c-alert-group__overflow-button--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem); + --pf-c-alert-group__overflow-button--PaddingLeft: var(--pf-global--spacer--md, 1rem); + --pf-c-alert-group__overflow-button--Color: var(--pf-global--link--Color, #0066cc); + --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)) ; + --pf-c-alert-group__overflow-button--BackgroundColor: var(--pf-global--BackgroundColor--100, #ffffff); + --pf-c-alert-group__overflow-button--hover--Color: var(--pf-global--link--Color--hover, #004080); + --pf-c-alert-group__overflow-button--hover--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)) , var(--pf-global--BoxShadow--lg-bottom); + --pf-c-alert-group__overflow-button--focus--Color: var(--pf-global--link--Color--hover, #004080); + --pf-c-alert-group__overflow-button--focus--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)) , var(--pf-global--BoxShadow--lg-bottom); + --pf-c-alert-group__overflow-button--active--Color: var(--pf-global--link--Color--hover, #004080); + --pf-c-alert-group__overflow-button--active--BoxShadow: var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)) , var(--pf-global--BoxShadow--lg-bottom); +} +.pf-c-alert-group > * + * { + margin-top: var(--pf-c-alert-group__item--MarginTop); +} +.pf-c-alert-group.pf-m-toast { + position: fixed; + top: var(--pf-c-alert-group--m-toast--Top); + right: var(--pf-c-alert-group--m-toast--Right); + z-index: var(--pf-c-alert-group--m-toast--ZIndex); + width: calc(100% - var(--pf-c-alert-group--m-toast--Right) * 2); + max-width: var(--pf-c-alert-group--m-toast--MaxWidth); +} +.pf-c-alert-group__overflow-button { + position: relative; + width: 100%; + padding: var(--pf-c-alert-group__overflow-button--PaddingTop) var(--pf-c-alert-group__overflow-button--PaddingRight) var(--pf-c-alert-group__overflow-button--PaddingBottom) var(--pf-c-alert-group__overflow-button--PaddingLeft); + color: var(--pf-c-alert-group__overflow-button--Color); + background-color: var(--pf-c-alert-group__overflow-button--BackgroundColor); + border-width: var(--pf-c-alert-group__overflow-button--BorderWidth); + box-shadow: var(--pf-c-alert-group__overflow-button--BoxShadow); +} +.pf-c-alert-group__overflow-button:hover { + --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--hover--Color); + --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--hover--BoxShadow); +} +.pf-c-alert-group__overflow-button:focus { + --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--focus--Color); + --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--focus--BoxShadow); +} +.pf-c-alert-group__overflow-button:active { + --pf-c-alert-group__overflow-button--Color: var(--pf-c-alert-group__overflow-button--active--Color); + --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow); +} */ + + + +:host { + --pf-c-alert__title--Color: var(--pf-c-alert__title--Color, var(--pf-global--default-color--300, #003737)); + --pf-c-alert__icon--Color: var(--pf-c-alert__icon--Color, var(--pf-global--default-color--200, #009596)); +} + +:host([hidden]) { + display: none; +} + +:host([variant="info"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-info--BorderTopColor, #2b9af3); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-info__icon--Color, var(--pf-global--info-color--100, #2b9af3)); + --pf-c-alert__title--Color: var(--pf-c-alert--m-info__title--Color, var(--pf-global--info-color--200, #002952)); +} + +:host([variant="info"][inline]) { + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-info--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa)); +} + +:host([variant="success"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor, var(--pf-global--success-color--100, #3e8635)); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-success__icon--Color, var(--pf-global--success-color--100, #3e8635)); + --pf-c-alert__title--Color: var(--pf-c-alert--m-success__title--Color, var(--pf-global--success-color--200, #1e4f18)); +} + +:host([variant="success"][inline]) { + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-success--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2)); +} + +:host([variant="warning"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-warning--BorderTopColor, var(--pf-global--warning-color--100, #f0ab00)); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-warning__icon--Color, var(--pf-global--warning-color--100, #f0ab00)); + --pf-c-alert__title--Color: var(--pf-c-alert--m-warning__title--Color, var(--pf-global--warning-color--200, #795600)); +} + +:host([variant="warning"][inline]) { + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-warning--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7)); +} + +:host([variant="danger"]) { + --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-danger--BorderTopColor, var(--pf-global--danger-color--100, #c9190b)); + --pf-c-alert__icon--Color: var(--pf-c-alert--m-danger__icon--Color, var(--pf-global--danger-color--100, #c9190b)); + --pf-c-alert__title--Color: var(--pf-c-alert--m-danger__title--Color, var(--pf-global--danger-color--200, #7d1007)); +} + +:host([variant="danger"][inline]) { + --pf-c-alert--m-inline--BackgroundColor: var(--pf-c-alert--m-inline--m-danger--BackgroundColor, var(--pf-global--palette--blue-50, #faeae8)); +} + + +:host([toast]), +:host([variant="toast"]){ + --pf-c-alert--m-inline--BackgroundColor: var(--rh-color-surface-lightest, #ffffff); + + max-width: 550px; +} + +:host([inline]) { + --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor); +} + +#container { + color: var(--pf-global--Color--100, #151515); + position: relative; + display: grid; + grid-template-columns: min-content 1fr; + gap: var(--rh-space-xs, 4px); + padding: var(--pf-c-alert--PaddingTop, 1rem) var(--pf-c-alert--PaddingRight, 1rem) var(--pf-c-alert--PaddingBottom, 1rem) var(--pf-c-alert--PaddingLeft, 1rem); + font-size: var(--pf-c-alert__FontSize, 0.875rem) !important; + background-color: var(--pf-c-alert--BackgroundColor, #ffffff); + border-width: 0; + border-block: solid var(--pf-c-alert--BorderTopColor, #009596); + border-block-width: var(--pf-c-alert--BorderTopWidth, 2px) 0; + box-shadow: var(--pf-c-alert--BoxShadow, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)); + + font-family: + var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, + "RedHatTextUpdated", + helvetica, + arial, + sans-serif); +} + +#left-column { + display: inline-block; + vertical-align: top; +} + +#middle-column { + display: inline-block; + vertical-align: top; +} + +header { + display: flex; + align-items: center; + justify-content: flex-start; + height: 100%; + font-weight: var(--pf-c-alert__title--FontWeight); +} + +header ::slotted(*) { + font-family: var(--_font-family) !important; + font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important; + font-weight: var(--rh-font-weight-heading-bold, 700) !important; + margin: 0 !important; + padding-block: 2px 4px !important; +} + +#header-actions { + margin-right: var(--rh-space-xs, 4px); +} + +#header { + color: var(--pf-c-alert__title--Color); +} + +#icon { + display: flex; + align-items: center; + justify-content: center; + width: var(--rh-size-icon-02, 24px); + height: var(--rh-size-icon-02, 24px); + color: var(--pf-c-alert__icon--Color, var(--pf-global--default-color--200, #009596)); +} + +#icon > svg { + font-size: var(--pf-c-alert__icon--FontSize, var(--pf-global--icon--FontSize--md, 1.125rem)); +} + +#close-button { + color: var(--rh-color-text-secondary-on-light, #4d4d4d); + background-color: transparent; + border: none; + height: var(--rh-length-xl, 24px); + width: var(--rh-length-xl, 24px); + cursor: pointer; +} + +#close-button:hover { + color: var(--rh-color-text-primary-on-light, #151515); +} + +#description { + font-size: var(--rh-font-size-body-text-sm, 0.875rem); +} + +#description > ::slotted(*) { + margin-block: 0 !important; + padding: 0 !important; +} + +footer.hasActions { + margin-top: var(--rh-space-lg, 16px); +} + +footer ::slotted([slot="actions"]) { + margin-inline-end: var(--rh-space-xl, 24px) !important; + padding: 0 !important; + border: none !important; + background-color: transparent !important; + color: var(--rh-color-interactive-blue-darker, #0066cc) !important; + font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important; + font-family: var(--_font-family) !important; +} + +/* TODO: separate focus and hover styles */ +footer ::slotted([slot="actions"]:focus) { + text-decoration: underline !important; + color: var(--rh-color-interactive-blue-darkest, #004080) !important; +} + +footer ::slotted([slot="actions"]:hover) { + cursor: pointer !important; + text-decoration: underline !important; + color: var(--rh-color-interactive-blue-darkest, #004080) !important; +} + +:host(:not([variant])) #container, +:host([toast]) #container, +:host([variant="toast"]) #container { + border-left: 0; + border-bottom: none; + border-right: 0; +} + +:host([toast]) #container, +:host([variant="toast"]) #container { + box-shadow: var(--rh-box-shadow-lg, 0 6px 8px 2px rgba(21, 21, 21, 0.3)); +} diff --git a/elements/pf-alert/pf-alert.ts b/elements/pf-alert/pf-alert.ts new file mode 100644 index 0000000000..8abeb4beab --- /dev/null +++ b/elements/pf-alert/pf-alert.ts @@ -0,0 +1,106 @@ +import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; + +import { LitElement, html, svg } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; +import { classMap } from 'lit/directives/class-map.js'; + +import styles from './pf-alert.css'; +import { ComposedEvent } from '@patternfly/pfe-core'; + +const ICONS = { + default: { viewBox: '0 0 896 1024', path: 'M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z' }, + error: { viewBox: '0 0 512 512', path: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' }, + success: { viewBox: '0 0 512 512', path: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z' }, + warning: { viewBox: '0 0 576 512', path: 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' }, + danger: { viewBox: '0 0 512 512', path: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' }, + info: { viewBox: '0 0 512 512', path: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' }, + close: { viewBox: '0 0 352 512', path: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z' }, + get(name: 'close' | 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info') { + const { viewBox, path } = ICONS[name]; + return svg` + `; + } +}; + +export class AlertCloseEvent extends ComposedEvent { + constructor() { + super('close', { + cancelable: true + }); + } +} + +/** + * Alert + * @slot - Place element content here + */ +@customElement('pf-alert') +export class PfAlert extends LitElement { + static readonly styles = [styles]; + + @property({ reflect: true }) title = ''; + + @property({ reflect: true }) + variant: 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info' = 'default'; + + @property({ reflect: true, type: Boolean }) inline = false; + + @property({ reflect: true, type: Boolean }) dismissable = false; + + #slots = new SlotController(this, 'header', null, 'actions'); + + #closeHandler() { + const event = new AlertCloseEvent(); + if (this.dispatchEvent(event)) { + this.remove(); + } + } + + private get icon() { + return ICONS.get(this.variant) ?? ``; + } + + render() { + const hasActions = this.#slots.hasSlotted('actions'); + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-alert': PfAlert; + } +} diff --git a/elements/pf-alert/test/pf-alert.e2e.ts b/elements/pf-alert/test/pf-alert.e2e.ts new file mode 100644 index 0000000000..179e90fd87 --- /dev/null +++ b/elements/pf-alert/test/pf-alert.e2e.ts @@ -0,0 +1,12 @@ +import { test } from '@playwright/test'; +import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; + +const tagName = 'pf-alert'; + +test.describe(tagName, () => { + test('snapshot', async ({ page }) => { + const componentPage = new PfeDemoPage(page, tagName); + await componentPage.navigate(); + await componentPage.snapshot(); + }); +}); diff --git a/elements/pf-alert/test/pf-alert.spec.ts b/elements/pf-alert/test/pf-alert.spec.ts new file mode 100644 index 0000000000..23972ec599 --- /dev/null +++ b/elements/pf-alert/test/pf-alert.spec.ts @@ -0,0 +1,21 @@ +import { expect, html } from '@open-wc/testing'; +import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; +import { PfAlert } from '@patternfly/elements/pf-alert/pf-alert.js'; + +describe('', function() { + describe('simply instantiating', function() { + let element: PfAlert; + it('imperatively instantiates', function() { + expect(document.createElement('pf-alert')).to.be.an.instanceof(PfAlert); + }); + + it('should upgrade', async function() { + element = await createFixture(html``); + const klass = customElements.get('pf-alert'); + expect(element) + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(PfAlert); + }); + }); +}); From df55c1d1a9f1773709f8dd1fec6d50fd2d9bbba0 Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Mon, 11 Sep 2023 16:42:36 -0400 Subject: [PATCH 02/12] feat: truncated title and timeout --- elements/pf-alert/demo/demo.css | 11 ++++++ elements/pf-alert/demo/pf-alert.html | 23 ++++++++++- elements/pf-alert/demo/pf-alert.js | 33 ++++++++++++++++ elements/pf-alert/pf-alert.css | 18 ++++++++- elements/pf-alert/pf-alert.ts | 59 +++++++++++++++++++++++----- 5 files changed, 131 insertions(+), 13 deletions(-) diff --git a/elements/pf-alert/demo/demo.css b/elements/pf-alert/demo/demo.css index 148b952da4..cd1ecdebf5 100644 --- a/elements/pf-alert/demo/demo.css +++ b/elements/pf-alert/demo/demo.css @@ -2,3 +2,14 @@ pf-alert { padding: 0.5rem; display: block; } + +pf-button { + display: block; + padding-block: 1em; +} + +#timeout-alerts { + min-height: 200px; + border: 1px solid #000; + margin: 0.5rem; +} diff --git a/elements/pf-alert/demo/pf-alert.html b/elements/pf-alert/demo/pf-alert.html index 83a7d11d43..200ae6ecd5 100644 --- a/elements/pf-alert/demo/pf-alert.html +++ b/elements/pf-alert/demo/pf-alert.html @@ -1,7 +1,7 @@ - + @@ -11,8 +11,27 @@

Inline

- + + +

+ Truncated Title +

+ + + +

+ Timeout +

+ +Create default timeout alert +Create inline timeout alert + + + +Create custom timeout alert + +
diff --git a/elements/pf-alert/demo/pf-alert.js b/elements/pf-alert/demo/pf-alert.js index d49aff6635..b4b8e51669 100644 --- a/elements/pf-alert/demo/pf-alert.js +++ b/elements/pf-alert/demo/pf-alert.js @@ -1 +1,34 @@ import '@patternfly/elements/pf-alert/pf-alert.js'; +import '@patternfly/elements/pf-button/pf-button.js'; + +const createTimeoutAlert = document.getElementById('create-timeout-alert'); +const createInlintTimeoutAlert = document.getElementById('create-timeout-inline-alert'); +const timeoutRange = document.getElementById('timeout-range'); +const timeoutValue = document.getElementById('timeout-value'); +const createCustomTimeoutAlert = document.getElementById('create-custom-timeout-alert'); +const timeoutAlertsSection = document.getElementById('timeout-alerts'); + +createTimeoutAlert.addEventListener('click', () => { + const pfeAlert = document.createElement('pf-alert'); + pfeAlert.title = 'Default Timeout Alert 8000ms'; + pfeAlert.timeout = true; + timeoutAlertsSection.appendChild(pfeAlert); +}); + +createInlintTimeoutAlert.addEventListener('click', () => { + const pfeAlert = document.createElement('pf-alert'); + pfeAlert.title = 'Inline Timeout Alert 8000ms'; + pfeAlert.timeout = true; + timeoutAlertsSection.appendChild(pfeAlert); +}); + +createCustomTimeoutAlert.addEventListener('click', () => { + const pfeAlert = document.createElement('pf-alert'); + pfeAlert.title = `Custom Timeout Alert ${timeoutRange.value}ms`; + pfeAlert.timeout = timeoutRange.value; + timeoutAlertsSection.appendChild(pfeAlert); +}); + +timeoutRange.addEventListener('change', () => { + timeoutValue.innerText = timeoutRange.value; +}); diff --git a/elements/pf-alert/pf-alert.css b/elements/pf-alert/pf-alert.css index 9d80cd5380..4e7a29991d 100644 --- a/elements/pf-alert/pf-alert.css +++ b/elements/pf-alert/pf-alert.css @@ -340,6 +340,20 @@ footer { --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor); } +#container.truncateTitle { + display: block; +} + +.truncateTitle #middle-column { + display: block; +} + +.truncateTitle #header { + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + #container { color: var(--pf-global--Color--100, #151515); position: relative; @@ -353,7 +367,7 @@ footer { border-block: solid var(--pf-c-alert--BorderTopColor, #009596); border-block-width: var(--pf-c-alert--BorderTopWidth, 2px) 0; box-shadow: var(--pf-c-alert--BoxShadow, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)); - + font-family: var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatTextUpdated", @@ -405,7 +419,7 @@ header ::slotted(*) { color: var(--pf-c-alert__icon--Color, var(--pf-global--default-color--200, #009596)); } -#icon > svg { +#icon > svg { font-size: var(--pf-c-alert__icon--FontSize, var(--pf-global--icon--FontSize--md, 1.125rem)); } diff --git a/elements/pf-alert/pf-alert.ts b/elements/pf-alert/pf-alert.ts index 8abeb4beab..5814f27efd 100644 --- a/elements/pf-alert/pf-alert.ts +++ b/elements/pf-alert/pf-alert.ts @@ -1,6 +1,6 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; -import { LitElement, html, svg } from 'lit'; +import { LitElement, html, svg, type PropertyValues } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -9,14 +9,13 @@ import styles from './pf-alert.css'; import { ComposedEvent } from '@patternfly/pfe-core'; const ICONS = { - default: { viewBox: '0 0 896 1024', path: 'M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z' }, - error: { viewBox: '0 0 512 512', path: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' }, + custom: { viewBox: '0 0 896 1024', path: 'M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z' }, success: { viewBox: '0 0 512 512', path: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z' }, warning: { viewBox: '0 0 576 512', path: 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' }, danger: { viewBox: '0 0 512 512', path: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z' }, info: { viewBox: '0 0 512 512', path: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z' }, close: { viewBox: '0 0 352 512', path: 'M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z' }, - get(name: 'close' | 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info') { + get(name: 'close' | 'custom' | 'success' | 'warning' | 'danger' | 'info') { const { viewBox, path } = ICONS[name]; return svg` { + const parsed = Number.parseInt(value); + if (Number.isNaN(parsed)) { + return 8000; + } else { + return Number.parseInt(value); + } +}; + /** * Alert * @slot - Place element content here @@ -48,15 +56,44 @@ export class PfAlert extends LitElement { @property({ reflect: true }) title = ''; + /** + * The amount of time, in milliseconds, the alert will be visible before automatically closing. + * If set to `undefined`, the alert will not automatically close. + * If set to `true`, the alert will close after 8 seconds. + * */ + @property({ reflect: true }) timeout: string | undefined = undefined; + @property({ reflect: true }) - variant: 'default' | 'error' | 'success' | 'warning' | 'danger' | 'info' = 'default'; + variant: 'custom' | 'success' | 'warning' | 'danger' | 'info' = 'custom'; @property({ reflect: true, type: Boolean }) inline = false; @property({ reflect: true, type: Boolean }) dismissable = false; + @property({ + type: Boolean, + reflect: true, + attribute: 'truncate-title', + }) truncateTitle = false; + #slots = new SlotController(this, 'header', null, 'actions'); + connectedCallback() { + super.connectedCallback(); + if (typeof this.timeout !== 'undefined') { + setTimeout(() => { + this.remove(); + }, parseTimeout(this.timeout)); + } + } + + + override willUpdate() { + if (this.truncateTitle) { + import('@patternfly/elements/pf-tooltip/pf-tooltip.js'); + } + } + #closeHandler() { const event = new AlertCloseEvent(); if (this.dispatchEvent(event)) { @@ -69,17 +106,21 @@ export class PfAlert extends LitElement { } render() { + const { truncateTitle, title, icon, dismissable } = this; const hasActions = this.#slots.hasSlotted('actions'); return html` -