@patternfly/elements 4.2.0 → 4.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/elements",
   "license": "MIT",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "description": "PatternFly Elements",
   "customElements": "custom-elements.json",
   "type": "module",
@@ -15,6 +15,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/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",
@@ -31,6 +32,8 @@
     "./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",
     "./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
     "./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
+    "./pf-helper-text/pf-helper-text.js": "./pf-helper-text/pf-helper-text.js",
+    "./pf-hint/pf-hint.js": "./pf-hint/pf-hint.js",
     "./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
     "./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
@@ -113,9 +116,13 @@
     "!test/*"
   ],
   "contributors": [
+    "Ajinyka Shinde <sajinkya359@gmail.com>",
+    "Avigail Chubara (https://github.com/chubara62372)",
     "Benny Powers <bennyp@redhat.com>",
+    "Daly Betzalel (https://github.com/dali327519294)",
     "Daniel Faucette",
     "Diwanshi Pandey <diwanshipandey@gmail.com> (https://github.com/diwanshi)",
+    "Gili Greenberger (https://github.com/Gili-Greenberger)",
     "Ivana Rodriguez (https://github.com/eyevana)",
     "Kendall Totten",
     "Kyle Buchanan <kylebuch8@gmail.com> (https://github.com/kylebuch8)",
@@ -124,17 +131,16 @@
     "Michael Clayton <mclayton@redhat.com>",
     "Michael Potter",
     "Nikki Massaro Kauffman <nmassaro@redhat.com> (https://github.com/nikkimk)",
+    "Rohit Bharmal (https://github.com/Rohit2601)",
     "Steven Spriggs <sspriggs@redhat.com",
-    "castastrophe (https://github.com/castastrophe)",
     "Wes Ruvalcaba",
-    "Rohit Bharmal (https://github.com/Rohit2601)",
-    "Ajinyka Shinde <sajinkya359@gmail.com>"
+    "castastrophe (https://github.com/castastrophe)"
   ],
   "dependencies": {
-    "@lit/context": "^1.1.5",
+    "@lit/context": "^1.1.6",
     "@patternfly/icons": "^1.0.3",
-    "@patternfly/pfe-core": "^5.0.2",
-    "lit": "^3.3.0",
+    "@patternfly/pfe-core": "^5.0.5",
+    "lit": "^3.3.2",
     "tslib": "^2.8.1"
   }
 }

package/pf-accordion/pf-accordion-header.js

@@ -309,7 +309,7 @@ PfAccordionHeader.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
 };
-PfAccordionHeader.version = "4.2.0";
+PfAccordionHeader.version = "4.3.0";
 __decorate([
     property({ reflect: true })
 ], PfAccordionHeader.prototype, "bordered", void 0);

package/pf-accordion/pf-accordion-panel.js

@@ -113,7 +113,7 @@ let PfAccordionPanel = class PfAccordionPanel extends LitElement {
     }
 };
 PfAccordionPanel.styles = [style];
-PfAccordionPanel.version = "4.2.0";
+PfAccordionPanel.version = "4.3.0";
 __decorate([
     property({ type: Boolean, reflect: true })
 ], PfAccordionPanel.prototype, "expanded", void 0);

package/pf-accordion/pf-accordion.js

@@ -454,7 +454,7 @@ _PfAccordion_getIndex = function _PfAccordion_getIndex(el) {
     return -1;
 };
 PfAccordion.styles = [style];
-PfAccordion.version = "4.2.0";
+PfAccordion.version = "4.3.0";
 __decorate([
     property({ reflect: true, type: Boolean })
 ], PfAccordion.prototype, "single", void 0);

package/pf-alert/pf-alert.css

@@ -0,0 +1,193 @@
+[hidden] {
+  display: none !important;
+}
+
+:host {
+	--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, #fff);
+	--pf-c-alert--GridTemplateColumns: max-content 1fr max-content;
+	--pf-c-alert--GridTemplateAreas: "icon title close" ". description description" ". action action";
+	--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);
+	--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);
+	--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 close" ". . description description" ". . action action";
+	--pf-c-alert--m-expandable__description--action-group--PaddingTop: var(--pf-c-alert__action-group--PaddingTop-base);
+	--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);
+	color: var(--pf-global--Color--100, #151515);
+	position: relative;
+	display: grid;
+	padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
+	font-size: var(--pf-c-alert__FontSize);
+	background-color: var(--pf-c-alert--BackgroundColor);
+	border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
+	box-shadow: var(--pf-c-alert--BoxShadow);
+	grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
+	grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+: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);
+}
+
+:host([inline]) {
+  --pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow);
+  --pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor);
+}
+
+:host([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);
+}
+
+:host([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);
+}
+
+:host([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);
+}
+
+#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);
+}
+
+#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);
+  --pf-icon--size: var(--pf-c-alert__icon--FontSize);
+  color: var(--pf-c-alert__icon--Color);
+  pf-icon,
+  ::slotted(pf-icon) {
+    translate: 0 0.125em;
+  }
+}
+
+#title {
+  grid-area: title;
+  font-weight: var(--pf-c-alert__title--FontWeight);
+  color: var(--pf-c-alert__title--Color);
+  word-break: break-word;
+  ::slotted(*) {
+    color: inherit;
+    font-weight: inherit;
+  }
+  :is(h1,h2,h3,h4,h5,h6),
+  ::slotted(:is(h1,h2,h3,h4,h5,h6)) {
+    margin-block: 0 !important;
+  }
+}
+
+#close {
+  grid-area: close;
+}
+
+#description {
+  grid-area: description;
+  padding-top: var(--pf-c-alert__description--PaddingTop);
+  word-break: break-word;
+}
+
+#actions {
+  grid-area: action;
+  --pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);
+
+  & ::slotted(a) {
+    text-decoration: none;
+    color: #06c;
+    margin-inline-end: 1rem;
+  }
+
+  & ::slotted(a:hover),
+  & ::slotted(a:focus),
+  & ::slotted(a:active) {
+    color: #004080;
+  }
+}

package/pf-alert/pf-alert.d.ts

@@ -0,0 +1,95 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+export declare class PfAlertCloseEvent extends Event {
+    reason: 'closed' | 'timeout';
+    constructor(reason?: 'closed' | 'timeout');
+}
+/**
+ * An **alert** is a notification that provides brief information to the user
+ * without blocking their workflow.
+ *
+ * @fires close - When an alert is closed e.g. when close button is clicked or when the alert times
+ *                out. Cancel the event to prevent the alert from being removed.
+ */
+export declare class PfAlert extends LitElement {
+    #private;
+    static readonly styles: CSSStyleSheet[];
+    /**
+     * Use the `timeout` property to automatically dismiss an alert after a period
+     * of time. If set to `true`, the timeout will be 8000 milliseconds. Provide a
+     * specific value to dismiss the alert after a different number of
+     * milliseconds.
+     */
+    timeout: number | true;
+    /**
+     * PatternFly supports several alert variants for different scenarios.
+     * Each variant has an associated status icon, background, and alert title
+     * coded to communicate the severity of an alert. Use the variant property to
+     * apply the following styling options. If no variant is specified, then the
+     * variant will be set to "default".
+     *
+     * - **Default** - Use for generic messages with no associated severity
+     * - **Info** - Use for general informational messages
+     * - **Success** - Use to indicate that a task or process has been completed successfully
+     * - **Warning** - Use to indicate that a non-critical error has occurred
+     * - **Danger** - Use to indicate that a critical or blocking error has occurred
+     */
+    variant: 'warning' | 'custom' | 'neutral' | 'info' | 'success' | 'danger';
+    /**
+     * Use the `icon` attribute to replace a default alert icon with a custom icon.
+     * The `icon` attribute is overridden by the `icon` slot.
+     */
+    icon?: string;
+    /**
+     * The title of the alert. Overridden by the title slot.
+     */
+    titleText?: string;
+    /**
+     * The heading level of the alert's title. Overridden by the title slot.
+     * Default: 3
+     */
+    titleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Use inline alerts to display an alert inline with content. All alert
+     * variants may use the `inline` attribute to position alerts in content-heavy
+     * areas, such as within forms, wizards, or drawers.
+     */
+    inline: boolean;
+    /**
+     * Use the `plain` attribute to make any inline alert plain. Plain styling
+     * removes the colored background but keeps colored text and icons.
+     */
+    plain: boolean;
+    /**
+     * An alert can contain additional, hidden information that is made visible
+     * when users click a caret icon. This information can be expanded and
+     * collapsed each time the icon is clicked.
+     *
+     * It is not recommended to use an expandable alert with a timeout in a toast
+     * alert group because the alert could timeout before users have time to
+     * interact with and view the entire alert.
+     *
+     * See the toast alert considerations section of the alert accessibility
+     * documentation to understand the accessibility risks associated with using
+     * toast alerts.
+     */
+    expandable: boolean;
+    /**
+     * True when an expandable alert is expanded
+     */
+    expanded: boolean;
+    /**
+     * When true, the alert displays a close button
+     * Clicking the close button removes the alert
+     */
+    dismissable: boolean;
+    disconnectedCallback(): void;
+    render(): TemplateResult<1>;
+    protected timeoutChanged(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-alert': PfAlert;
+    }
+}