diff --git a/.changeset/rename-all-elements.md b/.changeset/rename-all-elements.md new file mode 100644 index 0000000000..c97bd07b5e --- /dev/null +++ b/.changeset/rename-all-elements.md @@ -0,0 +1,12 @@ +--- +"@patternfly/elements": major +--- + +All elements are now versioned with a `pf-v5-` prefix. + +This is a breaking change. Update your HTML to use the new element names, +e.g. `` becomes ``, `` becomes +``, etc. + +CSS custom properties are also renamed from `--pf-c-*` to `--pf-v5-c-*`. +Global tokens (`--pf-global--*`) are unchanged. diff --git a/elements/package.json b/elements/package.json index be137e3b38..5cef63faad 100644 --- a/elements/package.json +++ b/elements/package.json @@ -12,65 +12,65 @@ ".": "./pfe.min.js", "./form-control.css": "./form-control.css", "./form-control.css.js": "./form-control.css.js", - "./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", - "./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js", - "./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js", - "./pf-button/pf-button.js": "./pf-button/pf-button.js", - "./pf-card/pf-card.js": "./pf-card/pf-card.js", - "./pf-chip/pf-chip.js": "./pf-chip/pf-chip.js", - "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js", - "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js", - "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js", - "./pf-dropdown/context.js": "./pf-dropdown/context.js", - "./pf-dropdown/pf-dropdown-group.js": "./pf-dropdown/pf-dropdown-group.js", - "./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-v5-accordion/pf-v5-accordion-header.js": "./pf-v5-accordion/pf-v5-accordion-header.js", + "./pf-v5-accordion/pf-v5-accordion-panel.js": "./pf-v5-accordion/pf-v5-accordion-panel.js", + "./pf-v5-accordion/pf-v5-accordion.js": "./pf-v5-accordion/pf-v5-accordion.js", + "./pf-v5-alert/pf-v5-alert.js": "./pf-v5-alert/pf-v5-alert.js", + "./pf-v5-avatar/pf-v5-avatar.js": "./pf-v5-avatar/pf-v5-avatar.js", + "./pf-v5-back-to-top/pf-v5-back-to-top.js": "./pf-v5-back-to-top/pf-v5-back-to-top.js", + "./pf-v5-background-image/pf-v5-background-image.js": "./pf-v5-background-image/pf-v5-background-image.js", + "./pf-v5-badge/pf-v5-badge.js": "./pf-v5-badge/pf-v5-badge.js", + "./pf-v5-banner/pf-v5-banner.js": "./pf-v5-banner/pf-v5-banner.js", + "./pf-v5-button/pf-v5-button.js": "./pf-v5-button/pf-v5-button.js", + "./pf-v5-card/pf-v5-card.js": "./pf-v5-card/pf-v5-card.js", + "./pf-v5-chip/pf-v5-chip.js": "./pf-v5-chip/pf-v5-chip.js", + "./pf-v5-chip/pf-v5-chip-group.js": "./pf-v5-chip/pf-v5-chip-group.js", + "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js": "./pf-v5-clipboard-copy/pf-v5-clipboard-copy.js", + "./pf-v5-code-block/pf-v5-code-block.js": "./pf-v5-code-block/pf-v5-code-block.js", + "./pf-v5-dropdown/context.js": "./pf-v5-dropdown/context.js", + "./pf-v5-dropdown/pf-v5-dropdown-group.js": "./pf-v5-dropdown/pf-v5-dropdown-group.js", + "./pf-v5-dropdown/pf-v5-dropdown-item.js": "./pf-v5-dropdown/pf-v5-dropdown-item.js", + "./pf-v5-dropdown/pf-v5-dropdown-menu.js": "./pf-v5-dropdown/pf-v5-dropdown-menu.js", + "./pf-v5-dropdown/pf-v5-dropdown.js": "./pf-v5-dropdown/pf-v5-dropdown.js", + "./pf-v5-helper-text/pf-v5-helper-text.js": "./pf-v5-helper-text/pf-v5-helper-text.js", + "./pf-v5-hint/pf-v5-hint.js": "./pf-v5-hint/pf-v5-hint.js", + "./pf-v5-icon/pf-v5-icon.js": "./pf-v5-icon/pf-v5-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", - "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js", - "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js", - "./pf-label-group/pf-label-group.js": "./pf-label-group/pf-label-group.js", - "./pf-label/pf-label.js": "./pf-label/pf-label.js", - "./pf-select/pf-select.js": "./pf-select/pf-select.js", - "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js", - "./pf-select/pf-option-group.js": "./pf-select/pf-option-group.js", - "./pf-select/pf-option.js": "./pf-select/pf-option.js", - "./pf-modal/pf-modal.js": "./pf-modal/pf-modal.js", - "./pf-panel/pf-panel.js": "./pf-panel/pf-panel.js", - "./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js", - "./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js", - "./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js", - "./pf-search-input/pf-search-input.js": "./pf-search-input/pf-search-input.js", - "./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js", - "./pf-switch/pf-switch.js": "./pf-switch/pf-switch.js", - "./pf-table/context.js": "./pf-table/context.js", - "./pf-table/pf-caption.js": "./pf-table/pf-caption.js", - "./pf-table/pf-table.js": "./pf-table/pf-table.js", - "./pf-table/pf-tbody.js": "./pf-table/pf-tbody.js", - "./pf-table/pf-td.js": "./pf-table/pf-td.js", - "./pf-table/pf-th.js": "./pf-table/pf-th.js", - "./pf-table/pf-thead.js": "./pf-table/pf-thead.js", - "./pf-table/pf-tr.js": "./pf-table/pf-tr.js", - "./pf-tabs/context.js": "./pf-tabs/context.js", - "./pf-tabs/pf-tab-panel.js": "./pf-tabs/pf-tab-panel.js", - "./pf-tabs/pf-tab.js": "./pf-tabs/pf-tab.js", - "./pf-tabs/pf-tabs.js": "./pf-tabs/pf-tabs.js", - "./pf-text-area/pf-text-area.js": "./pf-text-area/pf-text-area.js", - "./pf-text-input/pf-text-input.js": "./pf-text-input/pf-text-input.js", - "./pf-tile/pf-tile.js": "./pf-tile/pf-tile.js", - "./pf-timestamp/pf-timestamp.js": "./pf-timestamp/pf-timestamp.js", - "./pf-tooltip/pf-tooltip.js": "./pf-tooltip/pf-tooltip.js", - "./pf-popover/pf-popover.js": "./pf-popover/pf-popover.js", + "./pf-v5-jump-links/pf-v5-jump-links-item.js": "./pf-v5-jump-links/pf-v5-jump-links-item.js", + "./pf-v5-jump-links/pf-v5-jump-links-list.js": "./pf-v5-jump-links/pf-v5-jump-links-list.js", + "./pf-v5-jump-links/pf-v5-jump-links.js": "./pf-v5-jump-links/pf-v5-jump-links.js", + "./pf-v5-label-group/pf-v5-label-group.js": "./pf-v5-label-group/pf-v5-label-group.js", + "./pf-v5-label/pf-v5-label.js": "./pf-v5-label/pf-v5-label.js", + "./pf-v5-select/pf-v5-select.js": "./pf-v5-select/pf-v5-select.js", + "./pf-v5-select/pf-v5-listbox.js": "./pf-v5-select/pf-v5-listbox.js", + "./pf-v5-select/pf-v5-option-group.js": "./pf-v5-select/pf-v5-option-group.js", + "./pf-v5-select/pf-v5-option.js": "./pf-v5-select/pf-v5-option.js", + "./pf-v5-modal/pf-v5-modal.js": "./pf-v5-modal/pf-v5-modal.js", + "./pf-v5-panel/pf-v5-panel.js": "./pf-v5-panel/pf-v5-panel.js", + "./pf-v5-progress-stepper/pf-v5-progress-step.js": "./pf-v5-progress-stepper/pf-v5-progress-step.js", + "./pf-v5-progress-stepper/pf-v5-progress-stepper.js": "./pf-v5-progress-stepper/pf-v5-progress-stepper.js", + "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js", + "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js", + "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js", + "./pf-v5-switch/pf-v5-switch.js": "./pf-v5-switch/pf-v5-switch.js", + "./pf-v5-table/context.js": "./pf-v5-table/context.js", + "./pf-v5-table/pf-v5-caption.js": "./pf-v5-table/pf-v5-caption.js", + "./pf-v5-table/pf-v5-table.js": "./pf-v5-table/pf-v5-table.js", + "./pf-v5-table/pf-v5-tbody.js": "./pf-v5-table/pf-v5-tbody.js", + "./pf-v5-table/pf-v5-td.js": "./pf-v5-table/pf-v5-td.js", + "./pf-v5-table/pf-v5-th.js": "./pf-v5-table/pf-v5-th.js", + "./pf-v5-table/pf-v5-thead.js": "./pf-v5-table/pf-v5-thead.js", + "./pf-v5-table/pf-v5-tr.js": "./pf-v5-table/pf-v5-tr.js", + "./pf-v5-tabs/context.js": "./pf-v5-tabs/context.js", + "./pf-v5-tabs/pf-v5-tab-panel.js": "./pf-v5-tabs/pf-v5-tab-panel.js", + "./pf-v5-tabs/pf-v5-tab.js": "./pf-v5-tabs/pf-v5-tab.js", + "./pf-v5-tabs/pf-v5-tabs.js": "./pf-v5-tabs/pf-v5-tabs.js", + "./pf-v5-text-area/pf-v5-text-area.js": "./pf-v5-text-area/pf-v5-text-area.js", + "./pf-v5-text-input/pf-v5-text-input.js": "./pf-v5-text-input/pf-v5-text-input.js", + "./pf-v5-tile/pf-v5-tile.js": "./pf-v5-tile/pf-v5-tile.js", + "./pf-v5-timestamp/pf-v5-timestamp.js": "./pf-v5-timestamp/pf-v5-timestamp.js", + "./pf-v5-tooltip/pf-v5-tooltip.js": "./pf-v5-tooltip/pf-v5-tooltip.js", + "./pf-v5-popover/pf-v5-popover.js": "./pf-v5-popover/pf-v5-popover.js", "./react/*": "./react/*" }, "publishConfig": { diff --git a/elements/pf-accordion/demo/content-attributes.html b/elements/pf-accordion/demo/content-attributes.html deleted file mode 100644 index b8373ab1f8..0000000000 --- a/elements/pf-accordion/demo/content-attributes.html +++ /dev/null @@ -1,36 +0,0 @@ -
- - - - -

Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam ultrices, - faucibus erat id, maximus nunc.

- - - - -

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

- - - - -

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

- - -

Level One - Item 4, Slotted (no shadow header)

- - -

Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.

- - -
- - - - diff --git a/elements/pf-accordion/pf-accordion-header.css b/elements/pf-accordion/pf-accordion-header.css deleted file mode 100644 index 6ff1d60026..0000000000 --- a/elements/pf-accordion/pf-accordion-header.css +++ /dev/null @@ -1,169 +0,0 @@ -:host { - --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 10px); - - /** - * Sets the font color for the accordion header. - */ - color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515)); - background-color: var(--pf-global--BackgroundColor--100, #ffffff); -} - -:host([large]) { - /** Sets the top padding for the accordion header. */ - --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem); - /** Sets the right padding for the accordion header. */ - --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** Sets the bottom padding for the accordion header. */ - --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem); - /** Sets the left padding for the accordion header. */ - --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); - /** Sets the font family for the accordion header. */ - --pf-c-accordion__toggle--FontFamily: - var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, - "RedHatDisplayUpdated", - "Overpass", - overpass, - helvetica, - arial, - sans-serif - ); - /** Sets the font size for the accordion header. */ - --pf-c-accordion__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem); - --pf-c-accordion__toggle--hover-text--Color: var(--pf-global--Color--100, #151515); - --pf-c-accordion__toggle--active-text--Color: var(--pf-global--Color--100, #151515); - --pf-c-accordion__toggle--active-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - --pf-c-accordion__toggle--focus-text--Color: var(--pf-global--Color--100, #151515); - --pf-c-accordion__toggle--focus-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - --pf-c-accordion__toggle--expanded-text--Color: var(--pf-global--Color--100, #151515); - --pf-c-accordion__toggle--expanded-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - --pf-icon--size: var(--pf-c-accordion__toggle--IconSize, 12px); -} - -#heading { - font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400)); - font-size: 100%; - padding: 0; - margin: 0; -} - -button, -a { - cursor: pointer; -} - -.toggle, -.toggle:before, -.toggle:after { - padding: 0; - margin: 0; - /** Sets the background color for the accordion header toggle element. */ - background-color: var(--pf-c-accordion__toggle--BackgroundColor, transparent); -} - -.icon { - /** - * Sets the transition animation for the accordion header. - */ - transition: var(--pf-c-accordion__toggle-icon--Transition, 0.2s ease-in 0s); -} - -.toggle { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - border: 0; - padding: - var(--pf-c-accordion__toggle--PaddingTop, var(--pf-global--spacer--md, 0.5rem)) - var(--pf-c-accordion__toggle--PaddingRight, var(--pf-global--spacer--md, 1rem)) - var(--pf-c-accordion__toggle--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem)) - var(--pf-c-accordion__toggle--PaddingLeft, var(--pf-global--spacer--md, 1rem)); - font-family: - var(--pf-c-accordion__toggle--FontFamily, - var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, - "RedHatTextUpdated", - helvetica, - arial, - sans-serif)); - font-size: var(--pf-c-accordion__toggle--FontSize, var(--pf-global--FontSize--lg, 1rem)); - /** - * Sets the font weight for the accordion header. - */ - font-weight: var(--pf-c-accordion__toggle--FontWeight, var(--pf-global--FontWeight--normal, 400)); - color: var(--pf-c-accordion__toggle--Color, var(--pf-global--Color--100, #151515)); -} - -.toggle[aria-expanded="true"] { - --pf-c-accordion__toggle--after--BackgroundColor: - /** - * Sets the hover expanded before background color for the accordion header. - */ - var( - --pf-c-accordion__toggle--expanded--before--BackgroundColor, - var( - --pf-global--primary-color--100, - #0066cc - ) - ); -} - -.toggle:after { - top: var(--pf-c-accordion__toggle--before--Top, -1px); - /** - * Sets the sidebar width for the accordion header. - */ - width: var(--pf-c-accordion__toggle--before--Width, var(--pf-global--BorderWidth--lg, 3px)); - /** - * Sets the background color for the after element for the accordion header toggle element. - */ - background-color: var(--pf-c-accordion__toggle--after--BackgroundColor, transparent); - content: ""; - position: absolute; - bottom: 0; - left: 0; -} - -span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - /** - * Sets the max width for the text inside the accordion header. - */ - max-width: var(--pf-c-accordion__toggle-text--MaxWidth, - calc(100% - var(--pf-global--spacer--lg, 1.5rem))); -} - -.toggle[aria-expanded="true"] .icon { - /** - * Sets the expanded icon rotation degrees for the accordion header. - */ - rotate: var(--pf-c-accordion__toggle--expanded-icon--Rotate, 90deg); -} - -.toggle:hover, -.toggle:active, -.toggle:focus { - /** - * Sets the active background color for the accordion header. - */ - background-color: - var(--pf-c-accordion__toggle--active--BackgroundColor, - var(--pf-global--BackgroundColor--200, #f0f0f0)); -} - -.toggle:hover span, -.toggle:focus span, -.toggle:active span { - /** - * Sets the active text color for the accordion header. - */ - color: var(--pf-c-accordion__toggle--active-text--Color, var(--pf-global--link--Color, #0066cc)); -} - -.toggle:focus span, -.toggle:active span { - font-weight: var(--pf-c-accordion__toggle--active-text--FontWeight, - var(--pf-global--FontWeight--semi-bold, 700)); -} diff --git a/elements/pf-accordion/pf-accordion-panel.css b/elements/pf-accordion/pf-accordion-panel.css deleted file mode 100644 index b418e27695..0000000000 --- a/elements/pf-accordion/pf-accordion-panel.css +++ /dev/null @@ -1,85 +0,0 @@ -:host { - display: none; - position: relative; - overflow: hidden; - will-change: height; - color: var(--pf-global--Color--100, #151515); - /** Background color for accordion panel */ - background-color: - var( - --pf-c-accordion--BackgroundColor, - var(--pf-global--BackgroundColor--light-100, #ffffff) - ); -} - -.body { - /** Padding for accordion panel body */ - padding: - /** Top padding for panel content */ - var(--pf-c-accordion__panel-body--PaddingTop, var(--pf-global--spacer--sm, 0.5rem)) - /** Right padding for panel content */ - var(--pf-c-accordion__panel-body--PaddingRight, var(--pf-global--spacer--md, 1rem)) - /** Bottom padding for panel content */ - var(--pf-c-accordion__panel-body--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem)) - /** Left padding for panel content */ - var(--pf-c-accordion__panel-body--PaddingLeft, var(--pf-global--spacer--md, 1rem)); -} - -.body:after { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - /** Before width for panel content */ - width: var(--pf-c-accordion__panel-body--before--Width, var(--pf-global--BorderWidth--lg, 3px)); - /** Background color for panel content before element */ - background-color: var(--pf-c-accordion__panel-body--before--BackgroundColor, transparent); -} - -:host([large]) { - --pf-c-accordion__panel-body--PaddingTop: - var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop, 0); - --pf-c-accordion__panel-body--PaddingRight: - var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight, 1rem); - --pf-c-accordion__panel-body--PaddingBottom: - var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom, 1.5rem); - --pf-c-accordion__panel-body--PaddingLeft: - var(--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft, 1.5rem); - --pf-c-accordion__panel--FontSize: - var(--pf-c-accordion--m-display-lg__expanded-content--FontSize, 1rem); - --pf-c-accordion__panel--Color: - var(--pf-c-accordion--m-display-lg__expanded-content--Color, #151515); -} - -:host([large]) .body:last-child { - --pf-c-accordion__panel-body--PaddingBottom: - var(--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom, 1.5rem); -} - -.content { - /** Font color for panel content */ - color: var(--pf-c-accordion__panel--Color, var(--pf-global--Color--dark-200, #6a6e73)); - /** Font size for panel content */ - font-size: var(--pf-c-accordion__panel--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); -} - -:host([fixed]) { - overflow-y: auto; - /** Maximum height for panel content when fixed */ - max-height: var(--pf-c-accordion__panel--m-fixed--MaxHeight, 9.375rem); -} - -:host([expanded]) { - display: block; - position: relative; -} - -.content[expanded], -:host([expanded]) .content { - /** Sidebar color for panel when expanded */ - --pf-c-accordion__panel-body--before--BackgroundColor: - var( - --pf-c-accordion__panel--content-body--before--BackgroundColor, - var(--pf-global--primary-color--100, #0066cc)); -} diff --git a/elements/pf-accordion/pf-accordion.css b/elements/pf-accordion/pf-accordion.css deleted file mode 100644 index cd9d61c94f..0000000000 --- a/elements/pf-accordion/pf-accordion.css +++ /dev/null @@ -1,153 +0,0 @@ -:host { - /** BackgroundColor for the accordion */ - --pf-c-accordion--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); - /** PaddingTop for the toggle */ - --pf-c-accordion__toggle--PaddingTop: var(--pf-global--spacer--sm, 0.5rem); - /** PaddingRight for the toggle */ - --pf-c-accordion__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** PaddingBottom for the toggle */ - --pf-c-accordion__toggle--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem); - /** PaddingLeft for the toggle */ - --pf-c-accordion__toggle--PaddingLeft: var(--pf-global--spacer--md, 1rem); - /** BackgroundColor for the toggle before element */ - --pf-c-accordion__toggle--before--BackgroundColor: transparent; - /** Top position for the toggle before element */ - --pf-c-accordion__toggle--before--Top: 0; - /** BackgroundColor for the toggle on hover */ - --pf-c-accordion__toggle--hover--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0); - /** BackgroundColor for the toggle on focus */ - --pf-c-accordion__toggle--focus--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0); - /** BackgroundColor for the toggle when active */ - --pf-c-accordion__toggle--active--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0); - /** Width for the toggle before element */ - --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg, 3px); - /** BackgroundColor for the toggle before element when expanded */ - --pf-c-accordion__toggle--m-expanded--before--BackgroundColor: var(--pf-global--primary-color--100, #06c); - /** MaxWidth for the toggle text */ - --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem)); - /** Color for the toggle text on hover */ - --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color, #06c); - /** Color for the toggle text when active */ - --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color, #06c); - /** FontWeight for the toggle text when active */ - --pf-c-accordion__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); - /** Color for the toggle text on focus */ - --pf-c-accordion__toggle--focus__toggle-text--Color: var(--pf-global--link--Color, #06c); - /** FontWeight for the toggle text on focus */ - --pf-c-accordion__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); - /** Color for the toggle text when expanded */ - --pf-c-accordion__toggle--m-expanded__toggle-text--Color: var(--pf-global--link--Color, #06c); - /** FontWeight for the toggle text when expanded */ - --pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); - /** Transition for the toggle icon */ - --pf-c-accordion__toggle-icon--Transition: .2s ease-in 0s; - /** Rotate value for the toggle icon when expanded */ - --pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg; - /** Color for the expanded content */ - --pf-c-accordion__expanded-content--Color: var(--pf-global--Color--200, #6a6e73); - /** FontSize for the expanded content */ - --pf-c-accordion__expanded-content--FontSize: var(--pf-global--FontSize--sm, 0.875rem); - /** BackgroundColor for the expanded content body before element when expanded */ - --pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor: var(--pf-global--primary-color--100, #06c); - /** MaxHeight for the expanded content when fixed */ - --pf-c-accordion__expanded-content--m-fixed--MaxHeight: 9.375rem; - /** PaddingTop for the expanded content body */ - --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-global--spacer--sm, 0.5rem); - /** PaddingRight for the expanded content body */ - --pf-c-accordion__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** PaddingBottom for the expanded content body */ - --pf-c-accordion__expanded-content-body--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem); - /** PaddingLeft for the expanded content body */ - --pf-c-accordion__expanded-content-body--PaddingLeft: var(--pf-global--spacer--md, 1rem); - /** PaddingTop for nested expanded content body */ - --pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop: 0; - /** BackgroundColor for the expanded content body before element */ - --pf-c-accordion__expanded-content-body--before--BackgroundColor: transparent; - /** Width for the expanded content body before element */ - --pf-c-accordion__expanded-content-body--before--Width: var(--pf-global--BorderWidth--lg, 3px); - /** Top position for the expanded content body before element */ - --pf-c-accordion__expanded-content-body--before--Top: 0; - /** PaddingTop for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--PaddingTop: var(--pf-global--spacer--md, 1rem); - /** PaddingRight for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** PaddingBottom for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--PaddingBottom: var(--pf-global--spacer--md, 1rem); - /** PaddingLeft for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); - /** FontFamily for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--FontFamily: var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif); - /** FontSize for the toggle in large display mode */ - --pf-c-accordion--m-display-lg__toggle--FontSize: var(--pf-global--FontSize--xl, 1.25rem); - /** Color for the toggle text on hover in large display mode */ - --pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color: var(--pf-global--Color--100, #151515); - /** Color for the toggle text when active in large display mode */ - --pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color: var(--pf-global--Color--100, #151515); - /** FontWeight for the toggle text when active in large display mode */ - --pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - /** Color for the toggle text on focus in large display mode */ - --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color: var(--pf-global--Color--100, #151515); - /** FontWeight for the toggle text on focus in large display mode */ - --pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - /** Color for the toggle text when expanded in large display mode */ - --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color: var(--pf-global--Color--100, #151515); - /** FontWeight for the toggle text when expanded in large display mode */ - --pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-global--FontWeight--normal, 400); - /** FontSize for the expanded content in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content--FontSize: var(--pf-global--FontSize--md, 1rem); - /** Color for the expanded content in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content--Color: var(--pf-global--Color--100, #151515); - /** PaddingTop for the expanded content body in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop: 0; - /** PaddingRight for the expanded content body in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** PaddingBottom for the expanded content body in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom: var(--pf-global--spacer--md, 1rem); - /** PaddingBottom for the last child of expanded content body in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem); - /** PaddingLeft for the expanded content body in large display mode */ - --pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); - /** BorderTopWidth for the bordered variant */ - --pf-c-accordion--m-bordered--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px); - /** BorderTopColor for the bordered variant */ - --pf-c-accordion--m-bordered--BorderTopColor: var(--pf-global--BorderColor--100, #d2d2d2); - /** Top position for the toggle before element in bordered variant */ - --pf-c-accordion--m-bordered__toggle--before--Top: calc(-1 * var(--pf-global--BorderWidth--sm, 1px)); - /** BorderColor for the toggle after element in bordered variant */ - --pf-c-accordion--m-bordered__toggle--after--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2); - /** BorderTopWidth for the toggle after element in bordered variant */ - --pf-c-accordion--m-bordered__toggle--after--BorderTopWidth: 0; - /** BorderBottomWidth for the toggle after element in bordered variant */ - --pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); - /** BorderBottomWidth for the last child after element in bordered expanded content */ - --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); - /** BorderBottomColor for the last child after element in bordered expanded content */ - --pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2); - color: var(--pf-global--Color--100, #151515); - background-color: var(--pf-c-accordion--BackgroundColor); -} - -:host([bordered]) ::slotted(pf-accordion-header:first-child), -:host([large]) ::slotted(pf-accordion-header:first-child) { - display: block; - border-top: 1px solid var(--accordion__bordered--Color); - border-bottom: 1px solid var(--accordion__bordered--Color); -} - -:host([bordered]) ::slotted(pf-accordion-header:not(:first-child)), -:host([large]) ::slotted(pf-accordion-header:not(:first-child)) { - display: block; - border-bottom: 1px solid var(--accordion__bordered--Color); -} - -:host([bordered]) ::slotted(pf-accordion-header:is([expanded])), -:host([large]) ::slotted(pf-accordion-header:is([expanded])) { - display: block; - border-bottom: 0; -} - -:host([bordered]) ::slotted(pf-accordion-panel:is([expanded])), -:host([large]) ::slotted(pf-accordion-panel:is([expanded])) { - display: block; - border-bottom: 1px solid var(--accordion__bordered--Color); -} diff --git a/elements/pf-alert/README.md b/elements/pf-alert/README.md deleted file mode 100644 index 19d47e3dfb..0000000000 --- a/elements/pf-alert/README.md +++ /dev/null @@ -1,38 +0,0 @@ -# pf-alert - -The `pf-alert` web component displays PatternFly-styled alerts. It can be used inline in pages or as a toast notification (if a static helper is provided separately). Alerts support several visual **variants** (for example: `info`, `success`, `warning`, `danger`), an optional title slot, body content, and an **action links** slot for interactive controls. Alerts can also be **closable** and **expandable**. - -## Installation - -Import the element in your page or application as an ES module: - -```html - -``` - -## Basic usage - -Inline alert example: - -```html - - Operation Success - - The operation completed successfully. - - - - System Update - - A new system update is available. - -
- Update Now - Later -
- -``` - - diff --git a/elements/pf-alert/demo/custom-icons.html b/elements/pf-alert/demo/custom-icons.html deleted file mode 100644 index 856ef7bc6c..0000000000 --- a/elements/pf-alert/demo/custom-icons.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - diff --git a/elements/pf-alert/demo/index.html b/elements/pf-alert/demo/index.html deleted file mode 100644 index 3c3ae5e2eb..0000000000 --- a/elements/pf-alert/demo/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - diff --git a/elements/pf-alert/demo/inline.html b/elements/pf-alert/demo/inline.html deleted file mode 100644 index 9798050f4b..0000000000 --- a/elements/pf-alert/demo/inline.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - diff --git a/elements/pf-alert/demo/plain.html b/elements/pf-alert/demo/plain.html deleted file mode 100644 index 6510c7c6be..0000000000 --- a/elements/pf-alert/demo/plain.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - - - - - diff --git a/elements/pf-alert/pf-alert.css b/elements/pf-alert/pf-alert.css deleted file mode 100644 index e6cb4bbfb5..0000000000 --- a/elements/pf-alert/pf-alert.css +++ /dev/null @@ -1,193 +0,0 @@ -[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; - } -} diff --git a/elements/pf-avatar/demo/index.html b/elements/pf-avatar/demo/index.html deleted file mode 100644 index bb29db1674..0000000000 --- a/elements/pf-avatar/demo/index.html +++ /dev/null @@ -1,13 +0,0 @@ -
- -
- - - - diff --git a/elements/pf-avatar/pf-avatar.css b/elements/pf-avatar/pf-avatar.css deleted file mode 100644 index eb7b6aba00..0000000000 --- a/elements/pf-avatar/pf-avatar.css +++ /dev/null @@ -1,80 +0,0 @@ -:host { - display: inline-block; - /** Border color for avatar */ - --pf-c-avatar--BorderColor: transparent; - /** Border width for avatar */ - --pf-c-avatar--BorderWidth: 0; - /** Border radius for avatar */ - --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em); - /** Width for avatar */ - --pf-c-avatar--Width: 2.25rem; - /** Height for avatar */ - --pf-c-avatar--Height: 2.25rem; - /** Width for small avatar */ - --pf-c-avatar--m-sm--Width: 1.5rem; - /** Height for small avatar */ - --pf-c-avatar--m-sm--Height: 1.5rem; - /** Width for medium avatar */ - --pf-c-avatar--m-md--Width: 2.25rem; - /** Height for medium avatar */ - --pf-c-avatar--m-md--Height: 2.25rem; - /** Width for large avatar */ - --pf-c-avatar--m-lg--Width: 4.5rem; - /** Height for large avatar */ - --pf-c-avatar--m-lg--Height: 4.5rem; - /** Width for extra large avatar */ - --pf-c-avatar--m-xl--Width: 8rem; - /** Height for extra large avatar */ - --pf-c-avatar--m-xl--Height: 8rem; - --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2); - --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px); - /** Border color for dark avatar */ - --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255); - --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px); - width: var(--pf-c-avatar--Width); - height: var(--pf-c-avatar--Height); - border-radius: var(--pf-c-avatar--BorderRadius); -} - -:host([hidden]), -[hidden] { - display: none !important; -} - -svg, -img { - display: inline; - object-fit: cover; - width: var(--pf-c-avatar--Width); - height: var(--pf-c-avatar--Height); - border-radius: var(--pf-c-avatar--BorderRadius); - border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor); -} - -:host([border]) { - --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px); -} - -:host([border="dark"]) { - --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor); -} - -:host([size="sm"]) { - --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width); - --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height); -} - -:host([size="md"]) { - --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width); - --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height); -} - -:host([size="lg"]) { - --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width); - --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height); -} - -:host([size="xl"]) { - --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width); - --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height); -} diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css deleted file mode 100644 index 2d708fee8c..0000000000 --- a/elements/pf-back-to-top/pf-back-to-top.css +++ /dev/null @@ -1,75 +0,0 @@ -:host { - display: inline-block; - position: absolute; - /** Right position for back to top */ - right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem)); - /** Bottom position for back to top */ - bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem)); -} - -[part="trigger"] { - /** Box shadow for back to top button */ - box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18))); - - /** Font size for back to top button */ - --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem)); - /** Border radius for back to top button */ - --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius, var(--pf-global--BorderRadius--lg, 30em)); - /** Top padding for back to top button */ - --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)); - /** Right padding for back to top button */ - --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)); - /** Bottom padding for back to top button */ - --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)); - /** Left padding for back to top button */ - --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); -} - -a { - display: inline-flex; - align-items: center; - justify-content: center; - /** Primary color for back to top button */ - color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff)); - /** Primary background color for back to top button */ - background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c)); - text-decoration: none; - font-size: var(--pf-c-button--FontSize); - padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft); - border-radius: var(--pf-c-button--BorderRadius); - /** End icon margin left for back to top button */ - gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem)); -} - -a:hover { - --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff)); - --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080)); -} - -a:focus { - --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff)); - --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080)); -} - -[part="trigger"][hidden] { - display: none; -} - -pf-icon { - /* override icon size as default sm variant is incorrect */ - --pf-icon--size: var(--pf-c-button--FontSize); - vertical-align: -0.125rem; -} - -span { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem)); -} - -@media (min-width: 768px) { - :host { - --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem)); - } -} diff --git a/elements/pf-badge/demo/read.html b/elements/pf-badge/demo/read.html deleted file mode 100644 index 92a7897db3..0000000000 --- a/elements/pf-badge/demo/read.html +++ /dev/null @@ -1,15 +0,0 @@ -
- 7 - 24 - 240 - 999 -
- - - diff --git a/elements/pf-badge/demo/unread.html b/elements/pf-badge/demo/unread.html deleted file mode 100644 index 97d0f734ca..0000000000 --- a/elements/pf-badge/demo/unread.html +++ /dev/null @@ -1,15 +0,0 @@ -
- 7 - 24 - 240 - 999 -
- - - diff --git a/elements/pf-banner/demo/index.html b/elements/pf-banner/demo/index.html deleted file mode 100644 index 6d00374a8d..0000000000 --- a/elements/pf-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-banner/pf-banner.css b/elements/pf-banner/pf-banner.css deleted file mode 100644 index 3ca89aba31..0000000000 --- a/elements/pf-banner/pf-banner.css +++ /dev/null @@ -1,117 +0,0 @@ -:host { - display: block; - /** Top padding for banner */ - --pf-c-banner--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); - /** Right padding for banner */ - --pf-c-banner--PaddingRight: var(--pf-global--spacer--md, 1rem); - /** Right padding for banner on medium screens */ - --pf-c-banner--md--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); - /** Bottom padding for banner */ - --pf-c-banner--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); - /** Left padding for banner */ - --pf-c-banner--PaddingLeft: var(--pf-global--spacer--md, 1rem); - /** Left padding for banner on medium screens */ - --pf-c-banner--md--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); - /** Font size for banner */ - --pf-c-banner--FontSize: var(--pf-global--FontSize--sm, 0.875rem); - /** Text color for banner */ - --pf-c-banner--Color: var(--pf-global--Color--100, #151515); - /** Background color for banner */ - --pf-c-banner--BackgroundColor: var(--pf-global--BackgroundColor--dark-400, #4f5255); - /** Link color for banner (references banner color) */ - --pf-c-banner--link--Color: var(--pf-c-banner--Color); - /** Link text decoration for banner */ - --pf-c-banner--link--TextDecoration: underline; - /** Link hover color for banner (references banner color) */ - --pf-c-banner--link--hover--Color: var(--pf-c-banner--Color); - /** Link hover font weight for banner */ - --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); - /** Disabled link color for banner (references banner color) */ - --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color); - /** Disabled link text decoration for banner */ - --pf-c-banner--link--disabled--TextDecoration: none; - /** Background color for info banner */ - --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200, #73bcf7); - /** Background color for danger banner */ - --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100, #c9190b); - /** Background color for success banner */ - --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100, #3e8635); - /** Background color for warning banner */ - --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00); - /** Z-index for sticky banner */ - --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md, 300); - /** Box shadow for sticky banner */ - --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom); -} - -#container, -#container.default { - color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff)); - overflow: hidden; - text-overflow: ellipsis; - padding: - var(--pf-c-banner--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)) - var(--pf-c-banner--PaddingRight, var(--pf-global--spacer--md, 1rem)) - var(--pf-c-banner--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)) - var(--pf-c-banner--PaddingLeft, var(--pf-global--spacer--md, 1rem)); - font-size: var(--pf-c-banner--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); - color: var(--pf-global--Color--100, var(--pf-global--Color--light-100, #ffffff)); - white-space: nowrap; - background-color: var(--pf-c-banner--BackgroundColor, var(--pf-global--BackgroundColor--dark-400, #4f5255)); - - --pf-icon--size: 1em; -} - -#container.info { - color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)); - --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor, var(--pf-global--palette--blue-200, #73bcf7)); -} - -#container.danger { - --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor, var(--pf-global--danger-color--100, #c9190b)); -} - -#container.success { - --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor, var(--pf-global--success-color--100, #3e8635)); -} - -#container.warning { - color: var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)); - --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor, var(--pf-global--warning-color--100, #f0ab00)); -} - -#container.hasIcon { - display: var(--pf-l-flex--Display, flex); - flex-wrap: var(--pf-l-flex--FlexWrap, wrap); - align-items: var(--pf-l-flex--AlignItems, baseline); - gap: var(--pf-l-flex--spacer, var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem))); -} - -:host([sticky]) { - position: sticky; - top: 0; - z-index: var(--pf-c-banner--m-sticky--ZIndex, var(--pf-global--ZIndex--md, 300)); - box-shadow: - var(--pf-c-banner--m-sticky--BoxShadow, - var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))); -} - -pf-icon, -::slotted(pf-icon), -::slotted(svg) { - position: relative; - inset-block-start: 0.125em; -} - -::slotted(svg) { - height: 1em; - width: 1em; - fill: currentcolor; -} - -@media (min-width: 768px) { - #container { - --pf-c-banner--PaddingRight: var(--pf-c-banner--md--PaddingRight, var(--pf-global--spacer--lg, 1.5rem)); - --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem)); - } -} diff --git a/elements/pf-button/README.md b/elements/pf-button/README.md deleted file mode 100644 index c1529c93f8..0000000000 --- a/elements/pf-button/README.md +++ /dev/null @@ -1,61 +0,0 @@ -# PatternFly Elements Button - -`` is a web component wrapper around a standard HTML ` - - - + + + Do more with Find it Fix it capabilities Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies. - + {% endhtmlexample %} ### Complete example A hint with all available slots. {% htmlexample %} - - - - - + + + + + Link - - + + - - + + Disabled link - - - + + + Do more with Find it Fix it capabilities Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies. - + Try it for 90 days - - + + {% endhtmlexample %} {% endband %} diff --git a/elements/pf-v5-hint/pf-v5-hint.css b/elements/pf-v5-hint/pf-v5-hint.css new file mode 100644 index 0000000000..2a5d34cf10 --- /dev/null +++ b/elements/pf-v5-hint/pf-v5-hint.css @@ -0,0 +1,120 @@ +:host { + display: block; + + /* Container */ + --pf-v5-c-hint--GridRowGap: var(--pf-global--spacer--md, 1rem); + --pf-v5-c-hint--PaddingTop: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint--PaddingRight: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint--PaddingBottom: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint--PaddingLeft: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa); + --pf-v5-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4); + --pf-v5-c-hint--BorderWidth: 1px; + --pf-v5-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px); + --pf-v5-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)); + + /* Title */ + --pf-v5-c-hint__title--FontSize: 1.125rem; + --pf-v5-c-hint__title--FontWeight: var(--pf-global--FontWeight--semi-bold, 700); + --pf-v5-c-hint__title--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-hint__title--LineHeight: var(--pf-global--LineHeight--md, 1.5); + + /* Body */ + --pf-v5-c-hint__body--FontSize: 1rem; + --pf-v5-c-hint__body--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-hint__body--LineHeight: var(--pf-global--LineHeight--md, 1.5); + + /* Footer */ + --pf-v5-c-hint__footer--MarginTop: 0; + --pf-v5-c-hint__footer--child--MarginRight: 1rem; + + /* Actions */ + --pf-v5-c-hint__actions--Top: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint__actions--Right: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-hint__actions--MarginLeft: 3rem; + --pf-v5-c-hint__actions--c-dropdown--MarginTop: calc(0.375rem * -1); +} + +#container { + position: relative; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--pf-v5-c-hint--GridRowGap); + padding: + var(--pf-v5-c-hint--PaddingTop) + var(--pf-v5-c-hint--PaddingRight) + var(--pf-v5-c-hint--PaddingBottom) + var(--pf-v5-c-hint--PaddingLeft); + background-color: var(--pf-v5-c-hint--BackgroundColor); + border: var(--pf-v5-c-hint--BorderWidth) solid var(--pf-v5-c-hint--BorderColor); + border-radius: var(--pf-v5-c-hint--BorderRadius); + box-shadow: var(--pf-v5-c-hint--BoxShadow); + overflow: visible; +} + +#container > * { + grid-column: 1; +} + +#actions { + grid-column: 2; + grid-row: 1 / -1; + align-self: start; + position: relative; + z-index: 1000; +} + +#actions ::slotted(pf-v5-dropdown) { + margin-top: var(--pf-v5-c-hint__actions--c-dropdown--MarginTop); + --pf-v5-c-dropdown__menu--MinWidth: auto; + --pf-v5-c-dropdown__menu--Left: auto; + --pf-v5-c-dropdown__menu--Right: 0; +} + +#title { + font-size: var(--pf-v5-c-hint__title--FontSize); + font-weight: var(--pf-v5-c-hint__title--FontWeight); + color: var(--pf-v5-c-hint__title--Color); + line-height: var(--pf-v5-c-hint__title--LineHeight); +} + +#body { + font-size: var(--pf-v5-c-hint__body--FontSize); + color: var(--pf-v5-c-hint__body--Color); + line-height: var(--pf-v5-c-hint__body--LineHeight); +} + +#footer { + margin-top: var(--pf-v5-c-hint__footer--MarginTop); + font-size: var(--pf-v5-c-hint__body--FontSize); + line-height: var(--pf-v5-c-hint__body--LineHeight); +} + +#footer ::slotted(*) { + margin-right: var(--pf-v5-c-hint__footer--child--MarginRight); +} + +#footer ::slotted(*:last-child) { + margin-right: 0; +} + +/* Hidden elements */ +[hidden] { + display: none !important; +} + +/* Link styling within hint */ +::slotted(a) { + color: var(--pf-global--link--Color, #06c); + text-decoration: none; +} + +::slotted(a:hover) { + color: var(--pf-global--link--Color--hover, #004080); + text-decoration: underline; +} + +/* Button styling in footer */ +::slotted(pf-v5-button) { + --pf-v5-c-button--m-link--Color: var(--pf-global--link--Color, #06c); +} diff --git a/elements/pf-hint/pf-hint.ts b/elements/pf-v5-hint/pf-v5-hint.ts similarity index 86% rename from elements/pf-hint/pf-hint.ts rename to elements/pf-v5-hint/pf-v5-hint.ts index d3fe94a80a..c9a1348e0e 100644 --- a/elements/pf-hint/pf-hint.ts +++ b/elements/pf-v5-hint/pf-v5-hint.ts @@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; -import styles from './pf-hint.css'; +import styles from './pf-v5-hint.css'; /** * A **hint** is in-app messaging that provides a one-step reminder, explanation, @@ -14,8 +14,8 @@ import styles from './pf-hint.css'; * @summary Provides inline contextual help or information to users * @alias Hint */ -@customElement('pf-hint') -export class PfHint extends LitElement { +@customElement('pf-v5-hint') +export class PfV5Hint extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; #slots = new SlotController(this, 'title', null, 'footer', 'actions'); @@ -31,27 +31,27 @@ export class PfHint extends LitElement { })}>
+ class="pf-v5-c-hint__body">
@@ -63,6 +63,6 @@ export class PfHint extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-hint': PfHint; + 'pf-v5-hint': PfV5Hint; } } diff --git a/elements/pf-hint/test/pf-hint.e2e.ts b/elements/pf-v5-hint/test/pf-hint.e2e.ts similarity index 95% rename from elements/pf-hint/test/pf-hint.e2e.ts rename to elements/pf-v5-hint/test/pf-hint.e2e.ts index f6c748476f..2e258a693c 100644 --- a/elements/pf-hint/test/pf-hint.e2e.ts +++ b/elements/pf-v5-hint/test/pf-hint.e2e.ts @@ -2,7 +2,7 @@ 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-hint'; +const tagName = 'pf-v5-hint'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-hint/test/pf-hint.spec.ts b/elements/pf-v5-hint/test/pf-hint.spec.ts similarity index 71% rename from elements/pf-hint/test/pf-hint.spec.ts rename to elements/pf-v5-hint/test/pf-hint.spec.ts index b7b7fc2302..70673798b3 100644 --- a/elements/pf-hint/test/pf-hint.spec.ts +++ b/elements/pf-v5-hint/test/pf-hint.spec.ts @@ -1,31 +1,31 @@ import { expect, html } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { PfHint } from '@patternfly/elements/pf-hint/pf-hint.js'; +import { PfV5Hint } from '@patternfly/elements/pf-v5-hint/pf-v5-hint.js'; import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; -describe('', function() { +describe('', function() { describe('simply instantiating', function() { it('imperatively instantiates', function() { - expect(document.createElement('pf-hint')).to.be.an.instanceof(PfHint); + expect(document.createElement('pf-v5-hint')).to.be.an.instanceof(PfV5Hint); }); it('should upgrade', async function() { - const el = await createFixture(html` - Basic hint + const el = await createFixture(html` + Basic hint `); - const klass = customElements.get('pf-hint'); + const klass = customElements.get('pf-v5-hint'); expect(el) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfHint); + .to.be.an.instanceOf(PfV5Hint); }); }); describe('basic hint', function() { - let element: PfHint; + let element: PfV5Hint; beforeEach(async function() { - element = await createFixture(html` - Welcome to the new documentation experience. + element = await createFixture(html` + Welcome to the new documentation experience. `); }); @@ -36,13 +36,13 @@ describe('', function() { }); describe('hint with title', function() { - let element: PfHint; + let element: PfV5Hint; beforeEach(async function() { - element = await createFixture(html` - + element = await createFixture(html` + Do more with Find it Fix it capabilities Upgrade to Red Hat Smart Management. - + `); await element.updateComplete; }); @@ -54,14 +54,14 @@ describe('', function() { }); describe('hint with footer', function() { - let element: PfHint; + let element: PfV5Hint; beforeEach(async function() { - element = await createFixture(html` - + element = await createFixture(html` + Do more with Find it Fix it capabilities Upgrade to Red Hat Smart Management. Try it for 90 days - + `); await element.updateComplete; }); @@ -73,14 +73,14 @@ describe('', function() { }); describe('hint with actions', function() { - let element: PfHint; + let element: PfV5Hint; beforeEach(async function() { - element = await createFixture(html` - + element = await createFixture(html` + Do more with Find it Fix it capabilities Upgrade to Red Hat Smart Management. - + `); await element.updateComplete; }); diff --git a/elements/pf-icon/README.md b/elements/pf-v5-icon/README.md similarity index 82% rename from elements/pf-icon/README.md rename to elements/pf-v5-icon/README.md index f739929014..2afba8733d 100644 --- a/elements/pf-icon/README.md +++ b/elements/pf-v5-icon/README.md @@ -4,10 +4,10 @@ Read more about Icon in the [PatternFly Elements Icon documentation][docs] ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im/@patternfly/elements/), install it @@ -19,7 +19,7 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-icon/pf-icon.js'; +import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js'; ``` ## Usage @@ -30,17 +30,17 @@ the accessibility tree with `aria-hidden="true"` or `role="presentation"`, if it presentational and expressed using accessible text copy elsewhere. ```html - + ``` ### Fallback Content If you wish to display some content while the icon loads (or while JS is disabled), -you can slot it into ``. For instance, when using a checkmark icon in a +you can slot it into ``. For instance, when using a checkmark icon in a server status table, you may wish to display a checkmark emoji if JS is disabled. ```html -✅ +✅ ``` ### Icon Sets @@ -54,9 +54,9 @@ Icon comes with three built-in icon sets: Use the `set` attribute to pick an alternative icon set. ```html - - - + + + ``` It is possible to add custom icon sets or override the default sets. @@ -64,7 +64,7 @@ Icon sets are defined in detail in [the docs][icon-sets]. ### Bundling and custom loading behaviour -When bundling `` with other modules (e.g. using webpack, rollup, +When bundling `` with other modules (e.g. using webpack, rollup, esbuild, vite, or similar tools), icon imports will be code-split into chunks, as they are imported from the `@patternfly/icons` package. Ensure that your bundler is configured to permit dynamic imports, or mark the `@patternfly/icons` diff --git a/elements/pf-icon/demo/custom-icon-sets.html b/elements/pf-v5-icon/demo/custom-icon-sets.html similarity index 63% rename from elements/pf-icon/demo/custom-icon-sets.html rename to elements/pf-v5-icon/demo/custom-icon-sets.html index 9e62817bd6..1a940f2eda 100644 --- a/elements/pf-icon/demo/custom-icon-sets.html +++ b/elements/pf-v5-icon/demo/custom-icon-sets.html @@ -4,17 +4,17 @@

Custom Icon Sets

icon set name and the icon name, and returning a URL (object) to a javascript module whose default export is a lit renderable.

- - + + + + + diff --git a/elements/pf-icon/demo/sets.html b/elements/pf-v5-icon/demo/sets.html similarity index 87% rename from elements/pf-icon/demo/sets.html rename to elements/pf-v5-icon/demo/sets.html index 2e20f2aefb..a86ea0fcfa 100644 --- a/elements/pf-icon/demo/sets.html +++ b/elements/pf-v5-icon/demo/sets.html @@ -8,12 +8,12 @@

Default Icon Sets

- + diff --git a/elements/pf-icon/docs/CHANGELOG.old.md b/elements/pf-v5-icon/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-icon/docs/CHANGELOG.old.md rename to elements/pf-v5-icon/docs/CHANGELOG.old.md diff --git a/elements/pf-icon/docs/pf-icon.md b/elements/pf-v5-icon/docs/pf-icon.md similarity index 78% rename from elements/pf-icon/docs/pf-icon.md rename to elements/pf-v5-icon/docs/pf-icon.md index c6578df53b..3463cf47dc 100644 --- a/elements/pf-icon/docs/pf-icon.md +++ b/elements/pf-v5-icon/docs/pf-icon.md @@ -1,17 +1,17 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - - - - + + + + {% endrenderOverview %} {% band header="Usage" %} @@ -22,10 +22,10 @@ presentational and expressed using accessible text copy elsewhere. {% htmlexample %} - - - - + + + + {% endhtmlexample %} ### Size @@ -33,10 +33,10 @@ multiples of font size. `sm`, `md`, etc are fixed pixel-based sizes. {% htmlexample %} - - - - + + + + {% endhtmlexample %} {% endband %} @@ -49,9 +49,9 @@ Icon comes with three built-in icon sets: Use the `set` attribute to pick an alternative icon set. ```html - - - + + + ``` ### Register a New Icon Set @@ -68,10 +68,10 @@ type IconResolveFunction = (set: string, icon: string) => Promise | Node; ``` ```javascript -import { PfIcon } from '@patternfly/pf-icon'; +import { PfIcon } from '@patternfly/pf-v5-icon'; // Or, in a non-module context: -// const PfIcon = await customElements.whenDefined('pf-icon'); +// const PfIcon = await customElements.whenDefined('pf-v5-icon'); PfIcon.addIconSet('local', (set, icon) => import(`/assets/icons/${set}-${icon}.js`)) @@ -107,14 +107,14 @@ like to override the default icon sets across the entire page, you can use `addIconSet` with the `fas`, `far`, and `patternfly` set names: ```js -import { PfIcon } from '@patternfly/pf-icon'; +import { PfIcon } from '@patternfly/pf-v5-icon'; PfIcon.resolve = (set, icon) => import(`/icons/${set}-${icon}.js`)) .then(mod => mod.default); ``` -Now when `` is loaded from the [RedHat DX +Now when `` is loaded from the [RedHat DX CDN](https://redhatstatic.com/dx/), it will automatically load icon modules from the CDN as well. @@ -138,7 +138,7 @@ keep lazy loading for the rest of the page. ```html

- + Hot News!

@@ -149,7 +149,7 @@ keep lazy loading for the rest of the page.

- + Contact Us

... @@ -160,19 +160,19 @@ keep lazy loading for the rest of the page. {% renderSlots %} If you wish to display some content while the icon loads (or while JS is -disabled), you can slot it into ``. For instance, when using a +disabled), you can slot it into ``. For instance, when using a checkmark icon in a server status table, you may wish to display a checkmark emoji if JS is disabled. ```html -✅ +✅ ``` It's recommended to use the icon name in the default slot, or `aria-label(ledby)` so that the icon is accessible to screen readers. ```html -check +check ``` {% endrenderSlots %} diff --git a/elements/pf-icon/docs/screenshot.png b/elements/pf-v5-icon/docs/screenshot.png similarity index 100% rename from elements/pf-icon/docs/screenshot.png rename to elements/pf-v5-icon/docs/screenshot.png diff --git a/elements/pf-icon/pf-icon.css b/elements/pf-v5-icon/pf-v5-icon.css similarity index 77% rename from elements/pf-icon/pf-icon.css rename to elements/pf-v5-icon/pf-v5-icon.css index 5abec7c804..b749fd22f0 100644 --- a/elements/pf-icon/pf-icon.css +++ b/elements/pf-v5-icon/pf-v5-icon.css @@ -27,9 +27,9 @@ svg { #container, svg { /** size of the icon */ - width: var(--pf-icon--size, var(--_size)); - height: var(--pf-icon--size, var(--_size)); - min-width: var(--pf-icon--size, var(--_size)); - min-height: var(--pf-icon--size, var(--_size)); + width: var(--pf-v5-icon--size, var(--_size)); + height: var(--pf-v5-icon--size, var(--_size)); + min-width: var(--pf-v5-icon--size, var(--_size)); + min-height: var(--pf-v5-icon--size, var(--_size)); } diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-v5-icon/pf-v5-icon.ts similarity index 89% rename from elements/pf-icon/pf-icon.ts rename to elements/pf-v5-icon/pf-v5-icon.ts index 4bc8885513..64434c8eb7 100644 --- a/elements/pf-icon/pf-icon.ts +++ b/elements/pf-v5-icon/pf-v5-icon.ts @@ -5,7 +5,7 @@ import { state } from 'lit/decorators/state.js'; import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; -import style from './pf-icon.css'; +import style from './pf-v5-icon.css'; type Renderable = unknown; @@ -40,13 +40,13 @@ export class IconResolveError extends ErrorEvent { * @fires load - Fired when an icon is loaded and rendered * @fires error - Fired when an icon fails to load */ -@customElement('pf-icon') -export class PfIcon extends LitElement { +@customElement('pf-v5-icon') +export class PfV5Icon extends LitElement { public static readonly styles: CSSStyleSheet[] = [style]; private static onIntersect: IntersectionObserverCallback = records => records.forEach(({ isIntersecting, target }) => { - const icon = target as PfIcon; + const icon = target as PfV5Icon; icon.#intersecting = isIntersecting; ric(() => { if (icon.#intersecting) { @@ -59,11 +59,11 @@ export class PfIcon extends LitElement { import(`@patternfly/icons/${set}/${icon}.js`) .then(mod => mod.default.cloneNode(true)); - private static io = new IntersectionObserver(PfIcon.onIntersect); + private static io = new IntersectionObserver(PfV5Icon.onIntersect); private static resolvers = new Map(); - private static instances = new Set(); + private static instances = new Set(); /** * Register a new icon set @@ -71,12 +71,12 @@ export class PfIcon extends LitElement { * @param resolver - A function that returns the URL of an icon * @example returning a URL object * ```js - * PfIcon.addIconSet('rh', (set, icon) => + * PfV5Icon.addIconSet('rh', (set, icon) => * new URL(`./icons/${set}/${icon}.js`, import.meta.url)); * ``` * @example returning a string * ```js - * PfIcon.addIconSet('rh', (set, icon) => + * PfV5Icon.addIconSet('rh', (set, icon) => * `/assets/icons/${set}/${icon}.js`); * ``` */ @@ -106,13 +106,13 @@ export class PfIcon extends LitElement { * @returns The icon content, a node or anything else which lit-html can render * @example resolving an icon node from an icon module * ```js - * PfIcon.resolve = (set, icon) => + * PfV5Icon.resolve = (set, icon) => * import(`/assets/icons/${set}/${icon}.js`) * .then(mod => mod.default.cloneNode(true)); * ``` * @example resolving a named export from an icon collection module * ```js - * PfIcon.resolve = (set, icon) => + * PfV5Icon.resolve = (set, icon) => * import(`/assets/icons.js`) * .then(module => module[icon]?.cloneNode(true)); * ``` @@ -128,14 +128,14 @@ export class PfIcon extends LitElement { * } * return iconCache.get(key); * } - * PfIcon.resolve = (set, icon) => + * PfV5Icon.resolve = (set, icon) => * fetch(`/assets/icons/${set}/${icon}.svg`) * .then(response => response.text()) * .then(svg => getCachedIconOrNewNode(set, icon, svg)) * .then(node => node.content.cloneNode(true)); * ``` */ - public static resolve: IconResolverFunction = PfIcon.defaultResolve; + public static resolve: IconResolverFunction = PfV5Icon.defaultResolve; /** Icon set */ @property() set = 'fas'; @@ -162,7 +162,7 @@ export class PfIcon extends LitElement { #logger = new Logger(this); #lazyLoad() { - PfIcon.io.observe(this); + PfV5Icon.io.observe(this); if (this.#intersecting) { this.load(); } @@ -183,7 +183,7 @@ export class PfIcon extends LitElement { connectedCallback(): void { super.connectedCallback(); - PfIcon.instances.add(this); + PfV5Icon.instances.add(this); } willUpdate(changed: PropertyValues): void { @@ -194,8 +194,8 @@ export class PfIcon extends LitElement { disconnectedCallback(): void { super.disconnectedCallback(); - PfIcon.io.unobserve(this); - PfIcon.instances.delete(this); + PfV5Icon.io.unobserve(this); + PfV5Icon.instances.delete(this); } render(): TemplateResult<1> { @@ -215,7 +215,7 @@ export class PfIcon extends LitElement { protected async load(): Promise { const { set, icon } = this; - const resolver = PfIcon.resolvers.get(set) ?? PfIcon.resolve; + const resolver = PfV5Icon.resolvers.get(set) ?? PfV5Icon.resolve; if (set && icon && typeof resolver === 'function') { try { this.content = await resolver(set, icon); @@ -230,6 +230,6 @@ export class PfIcon extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-icon': PfIcon; + 'pf-v5-icon': PfV5Icon; } } diff --git a/elements/pf-icon/test/.gitignore b/elements/pf-v5-icon/test/.gitignore similarity index 100% rename from elements/pf-icon/test/.gitignore rename to elements/pf-v5-icon/test/.gitignore diff --git a/elements/pf-icon/test/pf-icon.e2e.ts b/elements/pf-v5-icon/test/pf-icon.e2e.ts similarity index 95% rename from elements/pf-icon/test/pf-icon.e2e.ts rename to elements/pf-v5-icon/test/pf-icon.e2e.ts index 54a8cca6c8..3b42e38234 100644 --- a/elements/pf-icon/test/pf-icon.e2e.ts +++ b/elements/pf-v5-icon/test/pf-icon.e2e.ts @@ -2,7 +2,7 @@ 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-icon'; +const tagName = 'pf-v5-icon'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-icon/test/pf-icon.spec.ts b/elements/pf-v5-icon/test/pf-icon.spec.ts similarity index 77% rename from elements/pf-icon/test/pf-icon.spec.ts rename to elements/pf-v5-icon/test/pf-icon.spec.ts index 15ab3ae12c..02dd2d391b 100644 --- a/elements/pf-icon/test/pf-icon.spec.ts +++ b/elements/pf-v5-icon/test/pf-icon.spec.ts @@ -3,7 +3,7 @@ import { html, render, type TemplateResult } from 'lit'; import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; -import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js'; +import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-icon.js'; import '@patternfly/pfe-tools/test/stub-logger.js'; @@ -21,7 +21,7 @@ import bike from './rh-icon-bike.js'; const TEST_ICONS = { aed, api, atom, bike }; -async function expectIconsEqual(element: PfIcon, tpl: TemplateResult) { +async function expectIconsEqual(element: PfV5Icon, tpl: TemplateResult) { await oneEvent(element, 'load'); const rootNode = render(tpl, document.createDocumentFragment()); const actual = element.shadowRoot?.querySelector('svg'); @@ -29,52 +29,52 @@ async function expectIconsEqual(element: PfIcon, tpl: TemplateResult) { expect(actual?.outerHTML).to.equal(expected?.outerHTML); } -describe('', function() { - let element: PfIcon; +describe('', function() { + let element: PfV5Icon; beforeEach(async function() { - element = await fixture(html``); + element = await fixture(html``); }); afterEach(function() { - PfIcon.reset(); + PfV5Icon.reset(); }); it('imperatively instantiates', function() { - expect(document.createElement('pf-icon')).to.be.an.instanceof(PfIcon); + expect(document.createElement('pf-v5-icon')).to.be.an.instanceof(PfV5Icon); }); it('should upgrade', function() { - expect(element, 'pf-icon should be an instance of PfIcon') - .to.be.an.instanceOf(customElements.get('pf-icon')) + expect(element, 'pf-v5-icon should be an instance of PfV5Icon') + .to.be.an.instanceOf(customElements.get('pf-v5-icon')) .and - .to.be.an.instanceOf(PfIcon); + .to.be.an.instanceOf(PfV5Icon); }); describe('addIconSet', function() { describe('when 1st argument is not a string', function() { beforeEach(function() { - PfIcon.addIconSet( + PfV5Icon.addIconSet( // @ts-expect-error: testing bad input {}, () => void 0, ); }); it('should warn', function() { - expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the first argument to addIconSet must be a string.`); + expect(Logger.warn).to.have.been.calledOnceWith(`[PfV5Icon]: the first argument to addIconSet must be a string.`); }); }); describe('when 2nd argument is not a function', function() { beforeEach(function() { - PfIcon.addIconSet( + PfV5Icon.addIconSet( 'rh', // @ts-expect-error: testing bad input 'haha' ); }); it('should warn', function() { - expect(Logger.warn).to.have.been.calledOnceWith(`[PfIcon]: the second argument to addIconSet must be a function.`); + expect(Logger.warn).to.have.been.calledOnceWith(`[PfV5Icon]: the second argument to addIconSet must be a function.`); }); }); @@ -83,7 +83,7 @@ describe('', function() { // replace the default built-in icon set resolveIconName function // with one that loads local icons. we don't want tests dependent on // prod servers. - PfIcon.addIconSet('rh', (_, icon: string) => TEST_ICONS[icon as keyof typeof TEST_ICONS]); + PfV5Icon.addIconSet('rh', (_, icon: string) => TEST_ICONS[icon as keyof typeof TEST_ICONS]); element.set = 'rh'; }); @@ -103,7 +103,7 @@ describe('', function() { .to.have.attribute('hidden'); }); - it('should change color when pf-icon\'s color CSS property is changed', async function() { + it('should change color when pf-v5-icon\'s color CSS property is changed', async function() { const newColor = 'rgb(11, 12, 13)'; element.style.setProperty('color', newColor); element.icon = 'atom'; @@ -115,7 +115,7 @@ describe('', function() { }); describe('changing size attribute', function() { - const sizes: PfIcon['size'][] = ['sm', 'md', 'lg', 'xl']; + const sizes: PfV5Icon['size'][] = ['sm', 'md', 'lg', 'xl']; let lastSize = { width: 0, height: 0 }; for (const size of sizes) { @@ -131,13 +131,13 @@ describe('', function() { }); describe('when the icon has a custom set attribute', function() { - let element: PfIcon; + let element: PfV5Icon; before(async function() { - element = await fixture(html``); + element = await fixture(html``); }); describe('then the icon set is registered', function() { beforeEach(async function() { - PfIcon.addIconSet('asdfasdf', () => + PfV5Icon.addIconSet('asdfasdf', () => import(`./rh-icon-${'bike'}.js`) .then(m => m.default)); await oneEvent(element, 'load'); @@ -149,12 +149,12 @@ describe('', function() { }); describe('when the icon has a fallback content', function() { - let element: PfIcon; + let element: PfV5Icon; before(async function() { element = await fixture(html` - +

Image failed to load.

. - `); + `); await oneEvent(element, 'error'); }); it('should display the fallback', function() { diff --git a/elements/pf-icon/test/rh-icon-aed.js b/elements/pf-v5-icon/test/rh-icon-aed.js similarity index 100% rename from elements/pf-icon/test/rh-icon-aed.js rename to elements/pf-v5-icon/test/rh-icon-aed.js diff --git a/elements/pf-icon/test/rh-icon-api.js b/elements/pf-v5-icon/test/rh-icon-api.js similarity index 100% rename from elements/pf-icon/test/rh-icon-api.js rename to elements/pf-v5-icon/test/rh-icon-api.js diff --git a/elements/pf-icon/test/rh-icon-atom.js b/elements/pf-v5-icon/test/rh-icon-atom.js similarity index 100% rename from elements/pf-icon/test/rh-icon-atom.js rename to elements/pf-v5-icon/test/rh-icon-atom.js diff --git a/elements/pf-icon/test/rh-icon-bike.js b/elements/pf-v5-icon/test/rh-icon-bike.js similarity index 100% rename from elements/pf-icon/test/rh-icon-bike.js rename to elements/pf-v5-icon/test/rh-icon-bike.js diff --git a/elements/pf-jump-links/README.md b/elements/pf-v5-jump-links/README.md similarity index 66% rename from elements/pf-jump-links/README.md rename to elements/pf-v5-jump-links/README.md index a9305b1685..386aa42edc 100644 --- a/elements/pf-jump-links/README.md +++ b/elements/pf-v5-jump-links/README.md @@ -6,10 +6,10 @@ Read more about Jump Links in the [documentation][docs]. ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im), install it @@ -21,7 +21,7 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-jump-links/pf-jump-links.js'; +import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js'; ``` [docs]: https://patternflyelements.org/components/jump-links diff --git a/elements/pf-v5-jump-links/demo/centered-list.html b/elements/pf-v5-jump-links/demo/centered-list.html new file mode 100644 index 0000000000..eeb51f4c59 --- /dev/null +++ b/elements/pf-v5-jump-links/demo/centered-list.html @@ -0,0 +1,18 @@ +
+ + Inactive section + Active section + Inactive section + +
+ + + + diff --git a/elements/pf-v5-jump-links/demo/expandable-vertical-with-subsection.html b/elements/pf-v5-jump-links/demo/expandable-vertical-with-subsection.html new file mode 100644 index 0000000000..37f11644de --- /dev/null +++ b/elements/pf-v5-jump-links/demo/expandable-vertical-with-subsection.html @@ -0,0 +1,27 @@ +
+ + Inactive section + + Section with active subsection + + Active subsection + Inactive subsection + Inactive subsection + + + Inactive section + Inactive section + +
+ + + + diff --git a/elements/pf-v5-jump-links/demo/index.html b/elements/pf-v5-jump-links/demo/index.html new file mode 100644 index 0000000000..b3dd03adcd --- /dev/null +++ b/elements/pf-v5-jump-links/demo/index.html @@ -0,0 +1,18 @@ +
+ + Inactive section + Active section + Inactive section + +
+ + + + diff --git a/elements/pf-v5-jump-links/demo/label.html b/elements/pf-v5-jump-links/demo/label.html new file mode 100644 index 0000000000..d19a38cecd --- /dev/null +++ b/elements/pf-v5-jump-links/demo/label.html @@ -0,0 +1,24 @@ +
+ + Inactive section + Active section + Inactive section + + + Inactive section + Active section + Inactive section + +
+ + + + diff --git a/elements/pf-jump-links/demo/scrollspy-with-subsections.html b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html similarity index 91% rename from elements/pf-jump-links/demo/scrollspy-with-subsections.html rename to elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html index 49b3e60f4f..2d6ed3490d 100644 --- a/elements/pf-jump-links/demo/scrollspy-with-subsections.html +++ b/elements/pf-v5-jump-links/demo/scrollspy-with-subsections.html @@ -2,23 +2,23 @@

Main title

- +
@@ -61,7 +61,7 @@

Heading 2

recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

- Button + Button

Heading 3

@@ -94,7 +94,7 @@

Heading 4

- Submit + Submit

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum @@ -143,12 +143,12 @@

Heading 5

+ + diff --git a/elements/pf-v5-jump-links/demo/vertical.html b/elements/pf-v5-jump-links/demo/vertical.html new file mode 100644 index 0000000000..2df88f90c7 --- /dev/null +++ b/elements/pf-v5-jump-links/demo/vertical.html @@ -0,0 +1,18 @@ +
+ + Inactive section + Active section + Inactive section + +
+ + + + diff --git a/elements/pf-jump-links/docs/CHANGELOG.old.md b/elements/pf-v5-jump-links/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-jump-links/docs/CHANGELOG.old.md rename to elements/pf-v5-jump-links/docs/CHANGELOG.old.md diff --git a/elements/pf-v5-jump-links/docs/pf-jump-links.md b/elements/pf-v5-jump-links/docs/pf-jump-links.md new file mode 100644 index 0000000000..91b33ae7e7 --- /dev/null +++ b/elements/pf-v5-jump-links/docs/pf-jump-links.md @@ -0,0 +1,99 @@ +{% renderInstallation %} {% endrenderInstallation %} + +{% renderOverview %} +
+

Basic

+ + Inactive section + Active section + Inactive section + +
+{% endrenderOverview %} + +{% band header="Usage" %} +
+

With centered list

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

With label

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

Vertical

+ {% htmlexample %} + + Inactive section + Active section + Inactive section + + {% endhtmlexample %} +
+ +
+

Expandable vertical with subsection

+ {% htmlexample %} + + Inactive section + + Section with active subsection + + Active subsection + Inactive subsection + Inactive subsection + + + Inactive section + Inactive section + + {% endhtmlexample %} +
+ +
+

Expandable vertical with Scrollspy

+ {% htmlexample %} + + Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + + {% endhtmlexample %} +
+{%endband %} + +{% renderSlots %}{% endrenderSlots %} +{% renderSlots for="pf-v5-jump-links-list", level=3, header="Slots on `pf-v5-jump-links-list`" %}{% endrenderSlots %} +{% renderSlots for="pf-v5-jump-links-item", level=3, header="Slots on `pf-v5-jump-links-item`" %}{% endrenderSlots %} + +{% renderAttributes %}{% endrenderAttributes %} + +{% renderProperties %}{% endrenderProperties %} + +{% renderMethods %}{% endrenderMethods %} + +{% renderEvents %}{% endrenderEvents %} + +{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} + +{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-jump-links/docs/screenshot.png b/elements/pf-v5-jump-links/docs/screenshot.png similarity index 100% rename from elements/pf-jump-links/docs/screenshot.png rename to elements/pf-v5-jump-links/docs/screenshot.png diff --git a/elements/pf-v5-jump-links/pf-v5-jump-links-item.css b/elements/pf-v5-jump-links/pf-v5-jump-links-item.css new file mode 100644 index 0000000000..d2063f3f7e --- /dev/null +++ b/elements/pf-v5-jump-links/pf-v5-jump-links-item.css @@ -0,0 +1,75 @@ +:host { + display: block; +} + +#container { + display: contents; +} + +slot:not([name]) { + display: flex; + flex-direction: column; + row-gap: var(--pf-global--spacer--md, 1rem); +} + +a { + position: relative; + display: flex; + cursor: pointer; + flex: 1; + /** Top padding around the link */ + padding-block-start: var(--pf-v5-c-jump-links__link--PaddingTop, + var(--pf-global--spacer--md, 1rem)); + /** Right padding around the link */ + padding-inline-end: var(--pf-v5-c-jump-links__link--PaddingRight, + var(--pf-global--spacer--md, 1rem)); + /** Bottom padding around the link */ + padding-block-end: var(--pf-v5-c-jump-links__link--PaddingBottom, + var(--pf-global--spacer--md, 1rem)); + /** Left padding around the link */ + padding-inline-start: var(--pf-v5-c-jump-links__link--PaddingLeft, + var(--pf-global--spacer--md, 1rem)); + text-decoration: none; + /** Outline offset for jump links link */ + outline-offset: var(--pf-v5-c-jump-links__link--OutlineOffset, + calc(-1 * var(--pf-global--spacer--sm, 0.5rem))); + /** Color for jump links link text */ + color: var(--pf-v5-c-jump-links__link-text--Color, + var(--pf-global--Color--200, #6a6e73)); +} + +a::before { + position: absolute; + inset: 0; + pointer-events: none; + content: ""; + border-color: var(--pf-v5-c-jump-links__link--before--BorderColor, transparent); + border-style: solid; + border-width: + var(--pf-v5-c-jump-links__link--before--BorderTopWidth, + var(--pf-v5-c-jump-links__list--before--BorderTopWidth, + var(--pf-global--BorderWidth--sm, 1px))) + var(--pf-v5-c-jump-links__link--before--BorderRightWidth, 0) + var(--pf-v5-c-jump-links__link--before--BorderBottomWidth, 0) + var(--pf-v5-c-jump-links__link--before--BorderLeftWidth, 0); +} + +a:hover { + --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--hover__link-text--Color, + var(--pf-global--Color--100, #151515)); +} + +a:focus { + --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__link--focus__link-text--Color, + var(--pf-global--Color--100, #151515)); +} + +:host([active]) { + --pf-v5-c-jump-links__link--before--BorderTopWidth: var(--pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth, + var(--pf-global--BorderWidth--lg, 3px)); + --pf-v5-c-jump-links__link--before--BorderLeftWidth: var(--pf-v5-c-jump-links__item--m-current__link--before--BorderLeftWidth, 0); + --pf-v5-c-jump-links__link--before--BorderColor: var(--pf-v5-c-jump-links__item--m-current__link--before--BorderColor, + var(--pf-global--primary-color--100, #06c)); + --pf-v5-c-jump-links__link-text--Color: var(--pf-v5-c-jump-links__item--m-current__link-text--Color, + var(--pf-global--Color--100, #151515)); +} diff --git a/elements/pf-jump-links/pf-jump-links-item.ts b/elements/pf-v5-jump-links/pf-v5-jump-links-item.ts similarity index 88% rename from elements/pf-jump-links/pf-jump-links-item.ts rename to elements/pf-v5-jump-links/pf-v5-jump-links-item.ts index 474367757a..2a0c862683 100644 --- a/elements/pf-jump-links/pf-jump-links-item.ts +++ b/elements/pf-v5-jump-links/pf-v5-jump-links-item.ts @@ -6,12 +6,12 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; -import style from './pf-jump-links-item.css'; +import style from './pf-v5-jump-links-item.css'; import { observes } from '@patternfly/pfe-core/decorators/observes.js'; -@customElement('pf-jump-links-item') -export class PfJumpLinksItem extends LitElement { +@customElement('pf-v5-jump-links-item') +export class PfV5JumpLinksItem extends LitElement { static readonly styles: CSSStyleSheet[] = [style]; static override readonly shadowRootOptions: ShadowRootInit = { @@ -55,6 +55,6 @@ export class PfJumpLinksItem extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-jump-links-item': PfJumpLinksItem; + 'pf-v5-jump-links-item': PfV5JumpLinksItem; } } diff --git a/elements/pf-v5-jump-links/pf-v5-jump-links-list.css b/elements/pf-v5-jump-links/pf-v5-jump-links-list.css new file mode 100644 index 0000000000..4000176fc9 --- /dev/null +++ b/elements/pf-v5-jump-links/pf-v5-jump-links-list.css @@ -0,0 +1,18 @@ +:host { + display: block; +} + +#container { + display: contents; + --pf-v5-c-jump-links__list--PaddingTop: 0; + --pf-v5-c-jump-links__list--PaddingBottom: 0; + /** Top padding around each link */ + --pf-v5-c-jump-links__link--PaddingTop: var(--pf-v5-c-jump-links__list__list__link--PaddingTop, + var(--pf-global--spacer--sm, 0.5rem)); + /** Bottom padding around each link */ + --pf-v5-c-jump-links__link--PaddingBottom: var(--pf-v5-c-jump-links__list__list__link--PaddingBottom, + var(--pf-global--spacer--sm, 0.5rem)); + /** Left padding around each link */ + --pf-v5-c-jump-links__link--PaddingLeft: var(--pf-v5-c-jump-links__list__list__link--PaddingLeft, + var(--pf-global--spacer--lg, 1.5rem)); +} diff --git a/elements/pf-jump-links/pf-jump-links-list.ts b/elements/pf-v5-jump-links/pf-v5-jump-links-list.ts similarity index 69% rename from elements/pf-jump-links/pf-jump-links-list.ts rename to elements/pf-v5-jump-links/pf-v5-jump-links-list.ts index 3253f493c1..e95d653ee3 100644 --- a/elements/pf-jump-links/pf-jump-links-list.ts +++ b/elements/pf-v5-jump-links/pf-v5-jump-links-list.ts @@ -1,10 +1,10 @@ import { html, LitElement, type TemplateResult } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; -import style from './pf-jump-links-list.css'; +import style from './pf-v5-jump-links-list.css'; -@customElement('pf-jump-links-list') -export class PfJumpLinksList extends LitElement { +@customElement('pf-v5-jump-links-list') +export class PfV5JumpLinksList extends LitElement { static readonly styles: CSSStyleSheet[] = [style]; render(): TemplateResult<1> { @@ -17,6 +17,6 @@ export class PfJumpLinksList extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-jump-links-list': PfJumpLinksList; + 'pf-v5-jump-links-list': PfV5JumpLinksList; } } diff --git a/elements/pf-jump-links/pf-jump-links.css b/elements/pf-v5-jump-links/pf-v5-jump-links.css similarity index 53% rename from elements/pf-jump-links/pf-jump-links.css rename to elements/pf-v5-jump-links/pf-v5-jump-links.css index 9a25810914..27501fa401 100644 --- a/elements/pf-jump-links/pf-jump-links.css +++ b/elements/pf-v5-jump-links/pf-v5-jump-links.css @@ -17,21 +17,21 @@ slot { position: relative; /** Controls the display type of the list container */ - display: var(--pf-c-jump-links__list--Display, flex); + display: var(--pf-v5-c-jump-links__list--Display, flex); /** Controls the direction of items in the list */ - flex-direction: var(--pf-c-jump-links__list--FlexDirection, row); + flex-direction: var(--pf-v5-c-jump-links__list--FlexDirection, row); /** Padding around the list of links */ - padding-block-start: var(--pf-c-jump-links__list--PaddingTop, 0); + padding-block-start: var(--pf-v5-c-jump-links__list--PaddingTop, 0); /** Right padding for the list */ - padding-inline-end: var(--pf-c-jump-links__list--PaddingRight, + padding-inline-end: var(--pf-v5-c-jump-links__list--PaddingRight, var(--pf-global--spacer--md, 1rem)); /** Bottom padding for the list */ - padding-block-end: var(--pf-c-jump-links__list--PaddingBottom, 0); + padding-block-end: var(--pf-v5-c-jump-links__list--PaddingBottom, 0); /** Left padding for the list */ - padding-inline-start: var(--pf-c-jump-links__list--PaddingLeft, + padding-inline-start: var(--pf-v5-c-jump-links__list--PaddingLeft, var(--pf-global--spacer--md, 1rem)); /** Controls visibility of the list */ - visibility: var(--pf-c-jump-links__list--Visibility, visible); + visibility: var(--pf-v5-c-jump-links__list--Visibility, visible); } slot::before { @@ -43,54 +43,54 @@ slot::before { pointer-events: none; content: ""; /** Border color for the list pseudo-element */ - border: solid var(--pf-c-jump-links__list--before--BorderColor, + border: solid var(--pf-v5-c-jump-links__list--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2)); border-width: /** Top border width for the list pseudo-element */ - var(--pf-c-jump-links__list--before--BorderTopWidth, + var(--pf-v5-c-jump-links__list--before--BorderTopWidth, var(--pf-global--BorderWidth--sm, 1px)) /** Right border width for the list pseudo-element */ - var(--pf-c-jump-links__list--before--BorderRightWidth, 0) + var(--pf-v5-c-jump-links__list--before--BorderRightWidth, 0) /** Bottom border width for the list pseudo-element */ - var(--pf-c-jump-links__list--before--BorderBottomWidth, 0) + var(--pf-v5-c-jump-links__list--before--BorderBottomWidth, 0) /** Left border width for the list pseudo-element */ - var(--pf-c-jump-links__list--before--BorderLeftWidth, 0); + var(--pf-v5-c-jump-links__list--before--BorderLeftWidth, 0); } :host([vertical]) #container { /** Top padding for vertical layout */ - --pf-c-jump-links__list--PaddingTop: - var(--pf-c-jump-links--m-vertical__list--PaddingTop, + --pf-v5-c-jump-links__list--PaddingTop: + var(--pf-v5-c-jump-links--m-vertical__list--PaddingTop, var(--pf-global--spacer--md, 1rem) ); /** Right padding for vertical layout */ - --pf-c-jump-links__list--PaddingRight: - var(--pf-c-jump-links--m-vertical__list--PaddingRight,0); + --pf-v5-c-jump-links__list--PaddingRight: + var(--pf-v5-c-jump-links--m-vertical__list--PaddingRight,0); /** Bottom padding for vertical layout */ - --pf-c-jump-links__list--PaddingBottom: - var(--pf-c-jump-links--m-vertical__list--PaddingBottom, + --pf-v5-c-jump-links__list--PaddingBottom: + var(--pf-v5-c-jump-links--m-vertical__list--PaddingBottom, var(--pf-global--spacer--md, 1rem) ); /** Left padding for vertical layout */ - --pf-c-jump-links__list--PaddingLeft: - var(--pf-c-jump-links--m-vertical__list--PaddingLeft, 0); + --pf-v5-c-jump-links__list--PaddingLeft: + var(--pf-v5-c-jump-links--m-vertical__list--PaddingLeft, 0); /** Top border width for vertical layout */ - --pf-c-jump-links__list--before--BorderTopWidth: - var(--pf-c-jump-links--m-vertical__list--before--BorderTopWidth, 0); + --pf-v5-c-jump-links__list--before--BorderTopWidth: + var(--pf-v5-c-jump-links--m-vertical__list--before--BorderTopWidth, 0); /** Left border width for vertical layout */ - --pf-c-jump-links__list--before--BorderLeftWidth: - var(--pf-c-jump-links--m-vertical__list--before--BorderLeftWidth, + --pf-v5-c-jump-links__list--before--BorderLeftWidth: + var(--pf-v5-c-jump-links--m-vertical__list--before--BorderLeftWidth, var(--pf-global--BorderWidth--sm, 1px)); /** Top border width for current item in vertical layout */ - --pf-c-jump-links__item--m-current__link--before--BorderTopWidth: - var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0); + --pf-v5-c-jump-links__item--m-current__link--before--BorderTopWidth: + var(--pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderTopWidth, 0); /** Left border width for current item in vertical layout */ - --pf-c-jump-links__item--m-current__link--before--BorderLeftWidth: - var(--pf-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth, + --pf-v5-c-jump-links__item--m-current__link--before--BorderLeftWidth: + var(--pf-v5-c-jump-links--m-vertical__item--m-current__link--before--BorderLeftWidth, var(--pf-global--BorderWidth--lg, 3px) ); /** Flex direction for vertical layout */ - --pf-c-jump-links__list--FlexDirection: var(--pf-c-jump-links--m-vertical__list--FlexDirection, column); + --pf-v5-c-jump-links__list--FlexDirection: var(--pf-v5-c-jump-links--m-vertical__list--FlexDirection, column); } :host([centered]) #container { @@ -104,14 +104,14 @@ slot::before { :host(:not([expandable])) #label { display: block; width: 100%; - margin-block-end: var(--pf-c-jump-links__label--MarginBottom, + margin-block-end: var(--pf-v5-c-jump-links__label--MarginBottom, var(--pf-global--spacer--md, 1rem)); } :host([expandable]) { /** Base margin for the toggle button */ - --pf-c-jump-links--m-expanded__toggle--MarginBottom: - calc(var(--pf-c-jump-links__toggle--MarginBottom--base, + --pf-v5-c-jump-links--m-expanded__toggle--MarginBottom: + calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base, calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)) ) + var(--pf-global--spacer--md, 1rem)); } @@ -119,57 +119,57 @@ slot::before { summary { display: block; /** Padding around the expandable jump links disclosure widget. */ - margin-block-start: var(--pf-c-jump-links__toggle--MarginTop, + margin-block-start: var(--pf-v5-c-jump-links__toggle--MarginTop, calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))); /** Bottom margin for the toggle */ - margin-block-end: var(--pf-c-jump-links__toggle--MarginBottom, - var(--pf-c-jump-links__toggle--MarginBottom--base, + margin-block-end: var(--pf-v5-c-jump-links__toggle--MarginBottom, + var(--pf-v5-c-jump-links__toggle--MarginBottom--base, calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)))); /** Left margin for the toggle */ - margin-inline-start: var(--pf-c-jump-links__toggle--MarginLeft); + margin-inline-start: var(--pf-v5-c-jump-links__toggle--MarginLeft); /** Color of the toggle text */ - color: var(--pf-c-jump-links__toggle-text--Color, + color: var(--pf-v5-c-jump-links__toggle-text--Color, var(--pf-global--Color--100, #151515)); /** Padding around the expandable jump links disclosure widget. */ padding: - var(--pf-c-button--PaddingTop, + var(--pf-v5-c-button--PaddingTop, var(--pf-global--spacer--form-element, 0.375rem)) /** Right padding for the button */ - var(--pf-c-button--PaddingRight, + var(--pf-v5-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)) /** Bottom padding for the button */ - var(--pf-c-button--PaddingBottom, + var(--pf-v5-c-button--PaddingBottom, var(--pf-global--spacer--form-element, 0.375rem)) /** Left padding for the button */ - var(--pf-c-button--PaddingLeft, + var(--pf-v5-c-button--PaddingLeft, var(--pf-global--spacer--md, 1rem)); } -summary pf-icon { +summary pf-v5-icon { /** Rotation angle for the toggle icon */ - rotate: var(--pf-c-jump-links__toggle-icon--Rotate, 0); + rotate: var(--pf-v5-c-jump-links__toggle-icon--Rotate, 0); /** Transition for the toggle icon */ - transition: var(--pf-c-jump-links__toggle-icon--Transition, + transition: var(--pf-v5-c-jump-links__toggle-icon--Transition, var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))); } summary span { /** Left margin for the toggle text */ - margin-inline-start: var(--pf-c-jump-links__toggle-text--MarginLeft, + margin-inline-start: var(--pf-v5-c-jump-links__toggle-text--MarginLeft, var(--pf-global--spacer--md, 1rem)); } :host([expanded]) #container { /** Bottom margin for expanded toggle */ - --pf-c-jump-links__toggle--MarginBottom: var(--pf-c-jump-links--m-expanded__toggle--MarginBottom, - calc(var(--pf-c-jump-links__toggle--MarginBottom--base, + --pf-v5-c-jump-links__toggle--MarginBottom: var(--pf-v5-c-jump-links--m-expanded__toggle--MarginBottom, + calc(var(--pf-v5-c-jump-links__toggle--MarginBottom--base, calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))) + var(--pf-global--spacer--md, 1rem))); /** Rotation for expanded toggle icon */ - --pf-c-jump-links__toggle-icon--Rotate: var(--pf-c-jump-links--m-expanded__toggle-icon--Rotate, + --pf-v5-c-jump-links__toggle-icon--Rotate: var(--pf-v5-c-jump-links--m-expanded__toggle-icon--Rotate, 90deg); /** Color for expanded toggle icon */ - --pf-c-jump-links__toggle-icon--Color: var(--pf-c-jump-links--m-expanded__toggle-icon--Color, + --pf-v5-c-jump-links__toggle-icon--Color: var(--pf-v5-c-jump-links--m-expanded__toggle-icon--Color, var(--pf-global--Color--100, #151515)); - --pf-c-jump-links__toggle-icon--Rotate: 90deg; + --pf-v5-c-jump-links__toggle-icon--Rotate: 90deg; } diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-v5-jump-links/pf-v5-jump-links.ts similarity index 82% rename from elements/pf-jump-links/pf-jump-links.ts rename to elements/pf-v5-jump-links/pf-v5-jump-links.ts index fad3b547d8..34c2bb506a 100644 --- a/elements/pf-jump-links/pf-jump-links.ts +++ b/elements/pf-v5-jump-links/pf-v5-jump-links.ts @@ -5,19 +5,19 @@ import { property } from 'lit/decorators/property.js'; import { ScrollSpyController } from '@patternfly/pfe-core/controllers/scroll-spy-controller.js'; import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js'; -import { PfJumpLinksItem } from './pf-jump-links-item.js'; +import { PfV5JumpLinksItem } from './pf-v5-jump-links-item.js'; -import '@patternfly/elements/pf-icon/pf-icon.js'; +import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js'; -import style from './pf-jump-links.css'; +import style from './pf-v5-jump-links.css'; /** * **Jump links** allow users to navigate to sections within a page. * @alias Jump Links * @fires toggle - when the `expanded` disclosure widget is toggled */ -@customElement('pf-jump-links') -export class PfJumpLinks extends LitElement { +@customElement('pf-v5-jump-links') +export class PfV5JumpLinks extends LitElement { static readonly styles: CSSStyleSheet[] = [style]; /** Whether the element features a disclosure widget around the nav items */ @@ -38,7 +38,7 @@ export class PfJumpLinks extends LitElement { /** Label to add to nav element. */ @property() label?: string; - #kids = this.querySelectorAll?.(':is(pf-jump-links-item, pf-jump-links-list)'); + #kids = this.querySelectorAll?.(':is(pf-v5-jump-links-item, pf-v5-jump-links-list)'); get #items() { return Array.from(this.#kids ?? []) @@ -54,7 +54,7 @@ export class PfJumpLinks extends LitElement { #spy = new ScrollSpyController(this, { rootMargin: `${this.offset}px 0px 0px 0px`, - tagNames: ['pf-jump-links-item'], + tagNames: ['pf-v5-jump-links-item'], }); protected override async getUpdateComplete(): Promise { @@ -70,7 +70,7 @@ export class PfJumpLinks extends LitElement { } override firstUpdated(): void { - const active = this.querySelector?.('pf-jump-links-item[active]'); + const active = this.querySelector?.('pf-v5-jump-links-item[active]'); if (active) { this.#setActiveItem(active); } @@ -87,17 +87,17 @@ export class PfJumpLinks extends LitElement { @@ -109,12 +109,12 @@ export class PfJumpLinks extends LitElement { } #onSelect(event: Event) { - if (event.target instanceof PfJumpLinksItem) { + if (event.target instanceof PfV5JumpLinksItem) { this.#setActiveItem(event.target); } } - #setActiveItem(item: PfJumpLinksItem) { + #setActiveItem(item: PfV5JumpLinksItem) { const itemLink = item.shadowRoot?.querySelector?.('a') ?? null; if (itemLink) { this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(itemLink); @@ -133,6 +133,6 @@ export class PfJumpLinks extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-jump-links': PfJumpLinks; + 'pf-v5-jump-links': PfV5JumpLinks; } } diff --git a/elements/pf-jump-links/test/pf-jump-links.e2e.ts b/elements/pf-v5-jump-links/test/pf-jump-links.e2e.ts similarity index 86% rename from elements/pf-jump-links/test/pf-jump-links.e2e.ts rename to elements/pf-v5-jump-links/test/pf-jump-links.e2e.ts index 739c64c4e8..44b535b9c0 100644 --- a/elements/pf-jump-links/test/pf-jump-links.e2e.ts +++ b/elements/pf-v5-jump-links/test/pf-jump-links.e2e.ts @@ -2,12 +2,12 @@ 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-jump-links'; +const tagName = 'pf-v5-jump-links'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { const componentPage = new PfeDemoPage(page, tagName); - await componentPage.navigate({ selector: 'pf-jump-links-nav' }); + await componentPage.navigate({ selector: 'pf-v5-jump-links-nav' }); await componentPage.snapshot(); }); diff --git a/elements/pf-v5-jump-links/test/pf-jump-links.spec.ts b/elements/pf-v5-jump-links/test/pf-jump-links.spec.ts new file mode 100644 index 0000000000..9b67c533ae --- /dev/null +++ b/elements/pf-v5-jump-links/test/pf-jump-links.spec.ts @@ -0,0 +1,98 @@ +import { expect, html, nextFrame } from '@open-wc/testing'; +import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; +import { sendKeys } from '@web/test-runner-commands'; + +import { PfV5JumpLinks } from '../pf-v5-jump-links.js'; +import { PfV5JumpLinksItem } from '../pf-v5-jump-links-item.js'; +import { PfV5JumpLinksList } from '../pf-v5-jump-links-list.js'; + +import '@patternfly/pfe-tools/test/stub-logger.js'; +import { allUpdates } from '@patternfly/pfe-tools/test/utils.js'; + +describe('', function() { + let element: PfV5JumpLinks; + let firstItem: PfV5JumpLinksItem; + let secondItem: PfV5JumpLinksItem; + + beforeEach(async function() { + element = await createFixture(html` + + Inactive section + Active section + Inactive section + + `); + await allUpdates(element); + [firstItem, secondItem] = element.querySelectorAll('pf-v5-jump-links-item'); + }); + + it('imperatively instantiates', function() { + expect(document.createElement('pf-v5-jump-links')).to.be.an.instanceof(PfV5JumpLinks); + expect(document.createElement('pf-v5-jump-links-item')).to.be.an.instanceof(PfV5JumpLinksItem); + expect(document.createElement('pf-v5-jump-links-list')).to.be.an.instanceof(PfV5JumpLinksList); + }); + + describe('tabbing to first item', function() { + let initialActiveElement: Element | null; + beforeEach(async function() { + initialActiveElement = document.activeElement; + await sendKeys({ press: 'Tab' }); + await nextFrame(); + }); + + it('should focus the first jump-links-item', function() { + expect(document.activeElement).to.equal(firstItem); + }); + + describe('pressing right arrow key', function() { + beforeEach(async function() { + await sendKeys({ press: 'ArrowRight' }); + await allUpdates(element); + await nextFrame(); + }); + it('should focus a jump-links-item', function() { + expect(document.activeElement).to.be.an.instanceof(PfV5JumpLinksItem); + }); + it('should change focus when keyboard navigation is used', function() { + expect(document.activeElement).to.not.equal(initialActiveElement); + }); + it('should focus the second jump links item', function() { + expect(document.activeElement).to.equal(secondItem); + }); + }); + }); +}); + +describe('', function() { + let element: PfV5JumpLinksItem; + + beforeEach(async function() { + element = await createFixture(html` + + `); + }); + + it('should upgrade', async function() { + expect(element) + .to.be.an.instanceof(customElements.get('pf-v5-jump-links-item')) + .and + .to.be.an.instanceof(PfV5JumpLinksItem); + }); +}); + +describe('', function() { + let element: PfV5JumpLinksList; + + beforeEach(async function() { + element = await createFixture(html` + + `); + }); + + it('should upgrade', async function() { + expect(element) + .to.be.an.instanceof(customElements.get('pf-v5-jump-links-list')) + .and + .to.be.an.instanceof(PfV5JumpLinksList); + }); +}); diff --git a/elements/pf-label-group/README.md b/elements/pf-v5-label-group/README.md similarity index 56% rename from elements/pf-label-group/README.md rename to elements/pf-v5-label-group/README.md index f966d3d3c8..916f75e55d 100644 --- a/elements/pf-label-group/README.md +++ b/elements/pf-v5-label-group/README.md @@ -8,10 +8,10 @@ Read more about Label Group in the [PatternFly Elements Label Group documentatio ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im), install it @@ -23,24 +23,24 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-label-group/pf-label-group.js'; +import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js'; ``` ## Usage ```html - - Security - Performance - Networking - + + Security + Performance + Networking + ``` With a category: ```html - + Filters - Security - Performance - + Security + Performance + ``` diff --git a/elements/pf-v5-label-group/demo/index.html b/elements/pf-v5-label-group/demo/index.html new file mode 100644 index 0000000000..f77c341f9d --- /dev/null +++ b/elements/pf-v5-label-group/demo/index.html @@ -0,0 +1,9 @@ + + Blue + Green + Orange + + + diff --git a/elements/pf-v5-label-group/demo/label-group-closeable.html b/elements/pf-v5-label-group/demo/label-group-closeable.html new file mode 100644 index 0000000000..cd7da14974 --- /dev/null +++ b/elements/pf-v5-label-group/demo/label-group-closeable.html @@ -0,0 +1,10 @@ + + Filters + Security + Performance + Networking + + + diff --git a/elements/pf-v5-label-group/demo/label-group-vertical.html b/elements/pf-v5-label-group/demo/label-group-vertical.html new file mode 100644 index 0000000000..4633541e7e --- /dev/null +++ b/elements/pf-v5-label-group/demo/label-group-vertical.html @@ -0,0 +1,10 @@ + + Group + Label 1 + Label 2 + Label 3 + + + diff --git a/elements/pf-v5-label-group/demo/label-group-with-a-very-long-name.html b/elements/pf-v5-label-group/demo/label-group-with-a-very-long-name.html new file mode 100644 index 0000000000..3a6e7d131b --- /dev/null +++ b/elements/pf-v5-label-group/demo/label-group-with-a-very-long-name.html @@ -0,0 +1,10 @@ + + Label group with a very long category name + Label 1 + Label 2 + Label 3 + + + diff --git a/elements/pf-v5-label-group/demo/label-group-with-overflow-labels.html b/elements/pf-v5-label-group/demo/label-group-with-overflow-labels.html new file mode 100644 index 0000000000..c50d98afb1 --- /dev/null +++ b/elements/pf-v5-label-group/demo/label-group-with-overflow-labels.html @@ -0,0 +1,13 @@ + + Tags + Label 1 + Label 2 + Label 3 + Label 4 + Label 5 + Label 6 + + + diff --git a/elements/pf-label-group/docs/pf-label-group.md b/elements/pf-v5-label-group/docs/pf-label-group.md similarity index 89% rename from elements/pf-label-group/docs/pf-label-group.md rename to elements/pf-v5-label-group/docs/pf-label-group.md index 58771e058a..8a867f5b03 100644 --- a/elements/pf-label-group/docs/pf-label-group.md +++ b/elements/pf-v5-label-group/docs/pf-label-group.md @@ -1,5 +1,5 @@ {% renderOverview %} - + {% endrenderOverview %} {% band header="Usage" %}{% endband %} diff --git a/elements/pf-v5-label-group/pf-v5-label-group.css b/elements/pf-v5-label-group/pf-v5-label-group.css new file mode 100644 index 0000000000..eee2a9e953 --- /dev/null +++ b/elements/pf-v5-label-group/pf-v5-label-group.css @@ -0,0 +1,100 @@ +:host { + --pf-v5-c-label-group__list--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1); + --pf-v5-c-label-group__list--MarginRight: calc(var(--pf-global--spacer--xs, 0.25rem) * -1); + --pf-v5-c-label-group--m-category--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-label-group--m-category--PaddingRight: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-label-group--m-category--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-label-group--m-category--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-label-group--m-category--BorderRadius: var(--pf-global--BorderRadius--sm, 3px); + --pf-v5-c-label-group--m-category--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0); + --pf-v5-c-label-group__label--MarginRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-label-group__label--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + --pf-v5-c-label-group__label--MaxWidth: 18ch; + --pf-v5-c-label-group__close--MarginTop: calc(var(--pf-global--spacer--xs, 0.25rem) * -1); + --pf-v5-c-label-group__close--MarginBottom: calc(var(--pf-global--spacer--xs, 0.25rem) * -1); + --pf-v5-c-label-group__list-item--MarginRight: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-label-group__list-item--MarginBottom: var(--pf-global--spacer--xs, 0.25rem); + display: inline-flex; + flex-wrap: wrap; + align-items: center; + min-width: 0; + max-width: 100%; + color: var(--pf-global--Color--100, #151515); +} + +[hidden], +.empty, +::slotted([hidden]), +::slotted([overflow-hidden]) { + display: none !important; +} + +#outer { + display: inline-flex; + flex: 1; + flex-wrap: wrap; + align-items: center; + min-width: 0; + column-gap: var(--pf-global--spacer--xs, 0.25rem); + border-radius: var(--pf-global--BorderRadius--sm, 3px); + padding: 0 !important; +} + +#outer.has-category { + padding: + var(--pf-v5-c-label-group--m-category--PaddingTop) + var(--pf-v5-c-label-group--m-category--PaddingRight) + var(--pf-v5-c-label-group--m-category--PaddingBottom) + var(--pf-v5-c-label-group--m-category--PaddingLeft) !important; + background-color: var(--pf-v5-c-label-group--m-category--BackgroundColor); +} + +#labels { + margin-inline-end: var(--pf-v5-c-label-group__list--MarginRight); + margin-block-end: var(--pf-v5-c-label-group__list--MarginBottom); + font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif); + font-size: var(--pf-global--FontSize--sm, 14px); + font-weight: var(--pf-global--FontWeight--normal, 400); + line-height: 1.6; +} + +#labels ::slotted(pf-v5-label) { + display: inline-flex; + min-width: 0; + margin-inline-end: var(--pf-v5-c-label-group__list-item--MarginRight); + margin-block-end: var(--pf-v5-c-label-group__list-item--MarginBottom); +} + +::slotted([slot="category"]) { + display: inline-block; + max-inline-size: var(--pf-v5-c-label-group__label--MaxWidth); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle; + margin-inline-end: var(--pf-v5-c-label-group__label--MarginRight); + font-size: var(--pf-v5-c-label-group__label--FontSize); +} + +:host([orientation="vertical"]) #outer { + flex-direction: column; + align-items: flex-start; +} + +#close-button { + --pf-v5-icon--size: 16px; + margin-block: var(--pf-v5-c-label-group__close--MarginTop) var(--pf-v5-c-label-group__close--MarginBottom); + inset-block-start: 0.125em; +} + +.visually-hidden { + border: 0; + clip: rect(0, 0, 0, 0); + block-size: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + inline-size: 1px; +} diff --git a/elements/pf-label-group/pf-label-group.ts b/elements/pf-v5-label-group/pf-v5-label-group.ts similarity index 82% rename from elements/pf-label-group/pf-label-group.ts rename to elements/pf-v5-label-group/pf-v5-label-group.ts index 9a6446c48e..7a0c7f9694 100644 --- a/elements/pf-label-group/pf-label-group.ts +++ b/elements/pf-v5-label-group/pf-v5-label-group.ts @@ -6,17 +6,17 @@ import { classMap } from 'lit/directives/class-map.js'; import { observes } from '@patternfly/pfe-core/decorators/observes.js'; import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js'; -import { PfLabel } from '../pf-label/pf-label.js'; +import { PfV5Label } from '../pf-v5-label/pf-v5-label.js'; -import styles from './pf-label-group.css'; +import styles from './pf-v5-label-group.css'; -export class PfLabelGroupExpandEvent extends Event { +export class PfV5LabelGroupExpandEvent extends Event { constructor() { super('expand', { bubbles: true, cancelable: true }); } } -export class PfLabelGroupRemoveEvent extends Event { +export class PfV5LabelGroupRemoveEvent extends Event { constructor() { super('remove', { bubbles: true, cancelable: true }); } @@ -39,16 +39,16 @@ const REMAINING_RE = /\$\{\s*remaining\s*\}/g; * * @summary Groups multiple labels with overflow, category, and close support. * - * @fires {PfLabelGroupExpandEvent} expand - Fires when label group is expanded to show all labels - * @fires {PfLabelGroupRemoveEvent} remove - Fires when label group is closed/removed + * @fires {PfV5LabelGroupExpandEvent} expand - Fires when label group is expanded to show all labels + * @fires {PfV5LabelGroupRemoveEvent} remove - Fires when label group is closed/removed * * @slot category * Category name text for label group category. * If this slot is populated, the label group will have category styling applied. - * @slot - `` elements. + * @slot - `` elements. */ -@customElement('pf-label-group') -export class PfLabelGroup extends LitElement { +@customElement('pf-v5-label-group') +export class PfV5LabelGroup extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; static override readonly shadowRootOptions: ShadowRootInit = { @@ -86,8 +86,8 @@ export class PfLabelGroup extends LitElement { /** Label count tracked during SSR via child events. */ _ssrLabelCount = 0; - get #overflowLabel(): PfLabel | null { - return this.renderRoot?.querySelector?.('#overflow') ?? null; + get #overflowLabel(): PfV5Label | null { + return this.renderRoot?.querySelector?.('#overflow') ?? null; } get #closeButton(): HTMLButtonElement | null { @@ -100,11 +100,11 @@ export class PfLabelGroup extends LitElement { return slot?.assignedNodes({ flatten: true }) ?? []; } - get #labels(): NodeListOf | PfLabel[] { + get #labels(): NodeListOf | PfV5Label[] { if (isServer) { - return [] as PfLabel[]; + return [] as PfV5Label[]; } - return this.querySelectorAll('pf-label:not([slot]):not([overflow-label])'); + return this.querySelectorAll('pf-v5-label:not([slot]):not([overflow-label])'); } get #labelCount(): number { @@ -153,22 +153,22 @@ export class PfLabelGroup extends LitElement { ?hidden="${!this.accessibleLabel}">${this.accessibleLabel ?? ''} - ${this.#remaining < 1 ? '' : this.open ? this.expandedText - : this.collapsedText.replace(REMAINING_RE, this.#remaining.toString())} - + + @click="${this.#onCloseClick}">
`; } @@ -182,7 +182,7 @@ export class PfLabelGroup extends LitElement { } #onCloseClick() { - this.dispatchEvent(new PfLabelGroupRemoveEvent()); + this.dispatchEvent(new PfV5LabelGroupRemoveEvent()); } async #onMoreClick(event: Event) { @@ -193,7 +193,7 @@ export class PfLabelGroup extends LitElement { if (this.#overflowLabel) { this.#tabindex.atFocusedItemIndex = this.#tabindex.items.indexOf(this.#overflowLabel); } - this.dispatchEvent(new PfLabelGroupExpandEvent()); + this.dispatchEvent(new PfV5LabelGroupExpandEvent()); } #onSlotchange() { @@ -201,7 +201,7 @@ export class PfLabelGroup extends LitElement { } #onRemove(event: Event) { - if (event instanceof PfLabelGroupRemoveEvent) { + if (event instanceof PfV5LabelGroupRemoveEvent) { this.remove(); } } @@ -215,6 +215,6 @@ export class PfLabelGroup extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-label-group': PfLabelGroup; + 'pf-v5-label-group': PfV5LabelGroup; } } diff --git a/elements/pf-label-group/test/pf-label-group.e2e.ts b/elements/pf-v5-label-group/test/pf-label-group.e2e.ts similarity index 95% rename from elements/pf-label-group/test/pf-label-group.e2e.ts rename to elements/pf-v5-label-group/test/pf-label-group.e2e.ts index 790889b1d6..4f70a1ebeb 100644 --- a/elements/pf-label-group/test/pf-label-group.e2e.ts +++ b/elements/pf-v5-label-group/test/pf-label-group.e2e.ts @@ -2,7 +2,7 @@ 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-label-group'; +const tagName = 'pf-v5-label-group'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-label-group/test/pf-label-group.spec.ts b/elements/pf-v5-label-group/test/pf-label-group.spec.ts similarity index 63% rename from elements/pf-label-group/test/pf-label-group.spec.ts rename to elements/pf-v5-label-group/test/pf-label-group.spec.ts index 5a79c3a6d1..a2578da959 100644 --- a/elements/pf-label-group/test/pf-label-group.spec.ts +++ b/elements/pf-v5-label-group/test/pf-label-group.spec.ts @@ -1,7 +1,7 @@ import { expect, html } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; import { a11ySnapshot, querySnapshotAll } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; -import { PfLabelGroup } from '../pf-label-group.js'; +import { PfV5LabelGroup } from '../pf-v5-label-group.js'; import { sendKeys } from '@web/test-runner-commands'; function press(key: string) { @@ -10,33 +10,33 @@ function press(key: string) { }; } -describe('', function() { - let element: PfLabelGroup; +describe('', function() { + let element: PfV5LabelGroup; describe('simply instantiating', function() { it('imperatively instantiates', function() { - expect(document.createElement('pf-label-group')).to.be.an.instanceof(PfLabelGroup); + expect(document.createElement('pf-v5-label-group')).to.be.an.instanceof(PfV5LabelGroup); }); it('should upgrade', async function() { - element = await createFixture(html``); - const klass = customElements.get('pf-label-group'); + element = await createFixture(html``); + const klass = customElements.get('pf-v5-label-group'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfLabelGroup); + .to.be.an.instanceOf(PfV5LabelGroup); }); }); describe('with 4 labels', function() { beforeEach(async function() { - element = await createFixture(html` - - Label 1 - Label 2 - Label 3 - Label 4 - + element = await createFixture(html` + + Label 1 + Label 2 + Label 3 + Label 4 + `); }); @@ -66,13 +66,13 @@ describe('', function() { const updateComplete = () => element.updateComplete; beforeEach(async function() { - element = await createFixture(html` - - Label 1 - Label 2 - Label 3 - Label 4 - + element = await createFixture(html` + + Label 1 + Label 2 + Label 3 + Label 4 + `); }); @@ -101,15 +101,15 @@ describe('', function() { describe('with 4 labels and custom text attributes', function() { beforeEach(async function() { - element = await createFixture(html` - (html` + - Label 1 - Label 2 - Label 3 - Label 4 - + Label 1 + Label 2 + Label 3 + Label 4 + `); }); @@ -120,13 +120,13 @@ describe('', function() { describe('with 4 labels and `num-labels="2"` attribute', function() { beforeEach(async function() { - element = await createFixture(html` - - Label 1 - Label 2 - Label 3 - Label 4 - + element = await createFixture(html` + + Label 1 + Label 2 + Label 3 + Label 4 + `); }); @@ -138,13 +138,13 @@ describe('', function() { describe('with 4 labels and `num-labels="4"` attribute', function() { beforeEach(async function() { - element = await createFixture(html` - - Label 1 - Label 2 - Label 3 - Label 4 - + element = await createFixture(html` + + Label 1 + Label 2 + Label 3 + Label 4 + `); }); @@ -156,12 +156,12 @@ describe('', function() { describe('with category', function() { beforeEach(async function() { - element = await createFixture(html` - + element = await createFixture(html` + Group - Label 1 - Label 2 - + Label 1 + Label 2 + `); }); diff --git a/elements/pf-label/README.md b/elements/pf-v5-label/README.md similarity index 66% rename from elements/pf-label/README.md rename to elements/pf-v5-label/README.md index c349b4da7e..5a235a419e 100644 --- a/elements/pf-label/README.md +++ b/elements/pf-v5-label/README.md @@ -1,17 +1,17 @@ # Label An inline-block element component that provides a distinct visual style for metadata in a UI. Commonly used as visual representations for tags, labels can -include an optional pf-icon and are available in a solid and outline style +include an optional pf-v5-icon and are available in a solid and outline style variant. Read more about Label in the [PatternFly Elements Label documentation](https://patternflyelements.org/components/label) ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im), install it @@ -23,29 +23,29 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-label/pf-label.js'; +import '@patternfly/elements/pf-v5-label/pf-v5-label.js'; ``` ## Usage Default ```html -

Some Text Your label text here

+

Some Text Your label text here

``` Color Options: `grey (default), blue ,green, orange, red, purple, cyan` ```html -

Some Text Your label text here

+

Some Text Your label text here

``` With and Icon: ```html -

Some Text Your label text here

+

Some Text Your label text here

``` Outline variant: ```html -

Some Text Your label text here

+

Some Text Your label text here

``` > ### Conveying meaning to assistive technologies @@ -55,7 +55,7 @@ Outline variant: ```html - + Some text Some additional info - + ``` diff --git a/elements/pf-v5-label/demo/compact.html b/elements/pf-v5-label/demo/compact.html new file mode 100644 index 0000000000..ca72baf22a --- /dev/null +++ b/elements/pf-v5-label/demo/compact.html @@ -0,0 +1,21 @@ +
+ Default + Blue label + Green label + Orange label + Red label + Purple label + Cyan label + Gold label + Grey label +
+ + + + diff --git a/elements/pf-v5-label/demo/filled-color.html b/elements/pf-v5-label/demo/filled-color.html new file mode 100644 index 0000000000..03a80c68a5 --- /dev/null +++ b/elements/pf-v5-label/demo/filled-color.html @@ -0,0 +1,32 @@ +
+ Blue + Green + Orange + Red Hat + Purple + Cyan + Gold + Grey +
+ + + + diff --git a/elements/pf-v5-label/demo/icon.html b/elements/pf-v5-label/demo/icon.html new file mode 100644 index 0000000000..936d743edc --- /dev/null +++ b/elements/pf-v5-label/demo/icon.html @@ -0,0 +1,33 @@ +
+
+ Default + Blue label + Green label + Orange label + Red label + Purple label + Cyan label + Gold label +
+ +
+ Default + Blue label + Green label + Orange label + Red label + Purple label + Cyan label + Gold label +
+
+ + + + diff --git a/elements/pf-label/demo/index.html b/elements/pf-v5-label/demo/index.html similarity index 52% rename from elements/pf-label/demo/index.html rename to elements/pf-v5-label/demo/index.html index 9050ebf7f6..a1bfef0c68 100644 --- a/elements/pf-label/demo/index.html +++ b/elements/pf-v5-label/demo/index.html @@ -1,9 +1,9 @@
- Default + Default
diff --git a/elements/pf-v5-label/demo/patternfly.html b/elements/pf-v5-label/demo/patternfly.html new file mode 100644 index 0000000000..47e45906d8 --- /dev/null +++ b/elements/pf-v5-label/demo/patternfly.html @@ -0,0 +1,200 @@ +
+

Filled

+ Grey + Grey icon + Grey removable + Grey icon removable + Grey link + Grey link removable + Grey label with icon that overflows +
+ +
+

Blue

+ Blue + Blue icon + Blue removable + Blue icon removable + Blue link + Blue link removable + Blue label with icon that overflows +
+ +
+

Green

+ Green + Green icon + Green removable + Green icon removable + Green link + Green link removable + Green label with icon that overflows +
+ +
+

Orange

+ Orange + Orange icon + Orange removable + Orange icon removable + Orange link + Orange link removable + Orange label with icon that overflows +
+ +
+

Red

+ Red + Red icon + Red removable + Red icon removable + Red link + Red link removable + Red label with icon that overflows +
+ +
+

Purple

+ Purple + Purple icon + Purple removable + Purple icon removable + Purple link + Purple link removable + Purple label with icon that overflows +
+ +
+

Cyan

+ Cyan + Cyan icon + Cyan removable + Cyan icon removable + Cyan link + Cyan link removable + Cyan label with icon that overflows +
+ +
+

Gold

+ Gold + Gold icon + Gold removable + Gold icon removable + Gold link + Gold link removable + Gold label with icon that overflows +
+ +
+

Outline

+ Grey + Grey icon + Grey removable + Grey icon removable + Grey link + Grey link removable + Grey label with icon that overflows +
+ +
+

Outline Blue

+ Blue + Blue icon + Blue removable + Blue icon removable + Blue link + Blue link removable + Blue label with icon that overflows +
+ +
+

Outline Green

+ Green + Green icon + Green removable + Green icon removable + Green link + Green link removable + Green label with icon that overflows +
+ +
+

Outline Orange

+ Orange + Orange icon + Orange removable + Orange icon removable + Orange link + Orange link removable + Orange label with icon that overflows +
+ +
+

Outline Red

+ Red + Red icon + Red removable + Red icon removable + Red link + Red link removable + Red label with icon that overflows +
+ +
+

Outline Purple

+ Purple + Purple icon + Purple removable + Purple icon removable + Purple link + Purple link removable + Purple label with icon that overflows +
+ +
+

Outline Cyan

+ Cyan + Cyan icon + Cyan removable + Cyan icon removable + Cyan link + Cyan link removable + Cyan label with icon that overflows +
+ +
+

Outline Gold

+ Gold + Gold icon + Gold removable + Gold icon removable + Gold link + Gold link removable + Gold label with icon that overflows +
+ +
+

Outline Compact

+ Gold + Gold icon + Gold removable + Gold icon removable + Gold link + Gold link removable + Gold label with icon that overflows +
+ + + + diff --git a/elements/pf-label/docs/CHANGELOG.old.md b/elements/pf-v5-label/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-label/docs/CHANGELOG.old.md rename to elements/pf-v5-label/docs/CHANGELOG.old.md diff --git a/elements/pf-label/docs/pf-label.md b/elements/pf-v5-label/docs/pf-label.md similarity index 67% rename from elements/pf-label/docs/pf-label.md rename to elements/pf-v5-label/docs/pf-label.md index 34c7ae8423..fd0467cc74 100644 --- a/elements/pf-label/docs/pf-label.md +++ b/elements/pf-v5-label/docs/pf-label.md @@ -1,26 +1,26 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - Default + Default {% endrenderOverview %} {% band header="Usage" %} ### Default {% htmlexample %} - Default + Default {% endhtmlexample %} ### With a color Available colors are: grey (default), blue, green, orange, red, purple, cyan, gold {% htmlexample %} - Blue - Green - Orange - Red - Purple - Cyan - Gold + Blue + Green + Orange + Red + Purple + Cyan + Gold {% endhtmlexample %}
@@ -42,39 +42,39 @@ width: 1px; } - + Red Warning - + {% endhtmlexample %} ### Outline variant Swaps the color style for a outline styled variant {% htmlexample %} - Blue - Green - Orange - Red - Purple - Cyan - Gold - Default + Blue + Green + Orange + Red + Purple + Cyan + Gold + Default {% endhtmlexample %} ### With icon as an attribute - Adds a optional fixed size `pf-icon` to the label as a prefix + Adds a optional fixed size `pf-v5-icon` to the label as a prefix {% htmlexample %} - Globe + Globe {% endhtmlexample %} Read more about Icon in the [PatternFly Elements Icon documentation](https://patternflyelements.org/components/icon) ### With user defined image using `slot="icon"` - Adds user defined SVG or `pf-icon` to the label. + Adds user defined SVG or `pf-v5-icon` to the label. {% htmlexample %} - Globe + Globe - + {% endhtmlexample %} {% htmlexample %} - Globe - - + Globe + + {% endhtmlexample %} ### Compact style Creates a compact style label which can be combined with color, variant and icon {% htmlexample %} - Globe + Globe - - Green - Orange - Red - Purple - Cyan - Gold - Default + + Green + Orange + Red + Purple + Cyan + Gold + Default {% endhtmlexample %} {% endband %} diff --git a/elements/pf-label/docs/screenshot.png b/elements/pf-v5-label/docs/screenshot.png similarity index 100% rename from elements/pf-label/docs/screenshot.png rename to elements/pf-v5-label/docs/screenshot.png diff --git a/elements/pf-v5-label/pf-v5-label.css b/elements/pf-v5-label/pf-v5-label.css new file mode 100644 index 0000000000..ca373b887b --- /dev/null +++ b/elements/pf-v5-label/pf-v5-label.css @@ -0,0 +1,248 @@ +:host { + position: relative; + white-space: nowrap; + border: 0; +} + +pf-v5-icon, ::slotted(pf-v5-icon) { + color: currentColor; +} + +:host, +#container { + display: inline-flex; + align-items: center; + vertical-align: middle; +} + +#container { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-width: 0; + /** label top padding */ + padding-top: var(--pf-v5-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)); + /** label left padding */ + padding-left: var(--pf-v5-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); + /** label bottom padding */ + padding-bottom: var(--pf-v5-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)); + /** label right padding */ + padding-right: var(--pf-v5-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)); + /** label font size */ + font-size: var(--pf-v5-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); + /** label text color */ + color: var(--pf-v5-c-label--Color, var(--pf-global--Color--100, #151515)); + /** label background color */ + background-color: var(--pf-v5-c-label--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5)); + /** label border radius */ + border-radius: var(--pf-v5-c-label--BorderRadius, 30em); + /** label content max width */ + max-width: var(--pf-v5-c-label__content--MaxWidth, 100%); + /** label content text color */ + color: var(--pf-v5-c-label__content--Color, var(--pf-global--Color--100, #151515)); + + --pf-global--icon--FontSize--sm: 14px; +} + +#container::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + content: ""; + border-radius: var(--pf-v5-c-label--BorderRadius, 30em); + /** label content border width and color */ + border: var(--pf-v5-c-label__content--before--BorderWidth, 1px) solid var(--pf-v5-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2)); +} + +[part=icon] { + display: none; + pointer-events: none; +} + +.hasIcon [part=icon] { + display: inline-flex; + width: 1em; +} + +.compact { + /** compact label top padding */ + --pf-v5-c-label--PaddingTop: var(--pf-v5-c-label--m-compact--PaddingTop, 0); + /** compact label right padding */ + --pf-v5-c-label--PaddingRight: var(--pf-v5-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)); + /** compact label bottom padding */ + --pf-v5-c-label--PaddingBottom: var(--pf-v5-c-label--m-compact--PaddingBottom, 0); + /** compact label left padding */ + --pf-v5-c-label--PaddingLeft: var(--pf-v5-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); + --pf-global--icon--FontSize--sm: 12px; +} + +.blue { + /** blue label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952)); + /** blue label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa)); + /** blue label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-blue__content--before--BorderColor, var(--pf-global--palette--blue-100, #bee1f4)); +} + +.blue.outline { + /** outline blue label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-blue__content--Color, var(--pf-global--primary-color--100, #06c))); +} + +.cyan { + /** cyan label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-cyan__content--Color, var(--pf-global--default-color--300, #003737)); + /** cyan label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-cyan--BackgroundColor, var(--pf-global--palette--cyan-50, #f2f9f9)); + /** cyan label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-cyan__content--before--BorderColor, var(--pf-global--palette--cyan-100, #a2d9d9)); +} + +.cyan.outline { + /** outline cyan label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-cyan__content--Color, var(--pf-global--palette--cyan-400, #005f60))) +} + +.green { + /** green label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-green__content--Color,var(--pf-global--success-color--200, #1e4f18)); + /** green label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-green--BackgroundColor, var(--pf-global--palette--green-50, #f3faf2)); + /** green label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-green__content--before--BorderColor, var(--pf-global--palette--green-100, #bde5b8)); +} + +.green.outline{ + /** outline green label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-green__content--Color, var(--pf-global--success-color--100, #3e8635))) +} + +.orange { + /** orange label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-orange__content--Color, var(--pf-global--palette--orange-700, #3b1f00)); + /** orange label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-orange--BackgroundColor, var(--pf-global--palette--orange-50, #fff6ec)); + /** orange label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-orange__content--before--BorderColor, var(--pf-global--palette--orange-100, #f4b678)); +} + +.orange.outline { + /** outline orange label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-orange__content--Color, var(--pf-global--palette--orange-500, #8f4700))) +} + +.purple { + /** purple label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-purple__content--Color, var(--pf-global--palette--purple-700, #1f0066)); + /** purple label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-purple--BackgroundColor, var(--pf-global--palette--purple-50, #f2f0fc)); + /** purple label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-purple__content--before--BorderColor, var(--pf-global--palette--purple-100, #cbc1ff)); +} + +.purple.outline { + /** outline purple label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-purple__content--Color, var(--pf-global--palette--purple-500, #6753ac))) +} + +.red { + /** red label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-red__content--Color, var(--pf-global--palette--red-300, #7d1007)); + /** red label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-red--BackgroundColor, var(--pf-global--palette--red-50, #faeae8)); + /** red label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-red__content--before--BorderColor, var(--pf-global--palette--red-100, #c9190b)); +} + +.red.outline { + /** outline red label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-red__content--Color, var(--pf-global--danger-color--100, #c9190b))) +} + +.gold { + /** gold label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-gold__content--Color, var(--pf-global--palette--gold-700, #3d2c00)); + /** gold label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-gold--BackgroundColor, var(--pf-global--palette--gold-50, #fdf7e7)); + /** gold label content border color */ + --pf-v5-c-label__content--before--BorderColor: var(--pf-v5-c-label--m-gold__content--before--BorderColor, var(--pf-global--palette--gold-100, #f9e0a2)); +} + +.gold.outline { + /** outline gold label content text color */ + --pf-v5-c-label__content--Color: var(--pf-v5-c-label--m-outline__content--Color, var(--pf-v5-c-label--m-outline--m-gold__content--Color, var(--pf-global--palette--gold-600, #795600))) +} + +.outline { + /** outline label background color */ + --pf-v5-c-label--BackgroundColor: var(--pf-v5-c-label--m-outline--BackgroundColor, #ffffff); + --pf-v5-c-label__content--before--BorderColor: var(--pf-global--palette--black-300, #d2d2d2); +} + +.hasIcon [part=icon] { + left: var(--pf-v5-c-label--PaddingLeft, var(--pf-global--spacer--md, 1rem)); + margin-inline-end: var(--pf-v5-c-label__icon--MarginRight, var(--pf-global--spacer--xs, 0.25rem)); +} + +.blue .hasIcon [part=icon] { + /** blue label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c))); +} + +.cyan .hasIcon [part=icon] { + /** cyan label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596))); +} + +.green .hasIcon [part=icon] { + /** green label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635))); +} + +.orange .hasIcon [part=icon] { + /** orange label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08))); +} + +.purple .hasIcon [part=icon] { + /** purple label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac))); +} + +.red .hasIcon [part=icon] { + /** red label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-red__icon--Color, var(--pf-global--danger-color--100, #c9190b))); +} + +.gold .hasIcon [part=icon] { + /** gold label icon color */ + color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00))); +} + +pf-v5-button { + --pf-v5-c-button--FontSize: var(--pf-v5-c-label__c-button--FontSize, + var(--pf-global--FontSize--xs, 0.75rem)); + --pf-v5-c-button--PaddingTop: var(--pf-v5-c-label__c-button--PaddingTop, + var(--pf-global--spacer--xs, 0.25rem)); + --pf-v5-c-button--PaddingRight: var(--pf-v5-c-label__c-button--PaddingRight, + var(--pf-global--spacer--sm, 0.5rem)); + --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-label__c-button--PaddingBottom, + var(--pf-global--spacer--xs, 0.25rem)); + --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-label__c-button--PaddingLeft, + var(--pf-global--spacer--sm, 0.5rem)); + margin-top: var(--pf-v5-c-label__c-button--MarginTop, -0.5rem); + margin-right: var(--pf-v5-c-label__c-button--MarginRight, -0.5rem); + margin-bottom: var(--pf-v5-c-label__c-button--MarginBottom, -0.5rem); + margin-left: var(--pf-v5-c-label__c-button--MarginLeft, 0.25rem); +} + +svg { + vertical-align:-0.125em; + fill: currentColor; + height: 1em; + width: 1em; +} diff --git a/elements/pf-label/pf-label.ts b/elements/pf-v5-label/pf-v5-label.ts similarity index 90% rename from elements/pf-label/pf-label.ts rename to elements/pf-v5-label/pf-v5-label.ts index eea234bd62..c5c65c0c86 100644 --- a/elements/pf-label/pf-label.ts +++ b/elements/pf-v5-label/pf-v5-label.ts @@ -5,9 +5,9 @@ import { classMap } from 'lit/directives/class-map.js'; import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; -import '@patternfly/elements/pf-button/pf-button.js'; +import '@patternfly/elements/pf-v5-button/pf-v5-button.js'; -import styles from './pf-label.css'; +import styles from './pf-v5-label.css'; export class LabelCloseEvent extends Event { constructor() { @@ -22,8 +22,8 @@ export class LabelCloseEvent extends Event { * @alias Label * @fires {LabelCloseEvent} close - when a removable label's close button is clicked */ -@customElement('pf-label') -export class PfLabel extends LitElement { +@customElement('pf-v5-label') +export class PfV5Label extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; static override readonly shadowRootOptions: ShadowRootInit = { @@ -96,21 +96,21 @@ export class PfLabel extends LitElement { summary: container for the label icon --> - + .icon="${this.icon || undefined as unknown as string}"> - - + `; @@ -123,12 +123,12 @@ export class PfLabel extends LitElement { } } -export type LabelVariant = PfLabel['variant']; +export type LabelVariant = PfV5Label['variant']; -export type LabelColor = PfLabel['color']; +export type LabelColor = PfV5Label['color']; declare global { interface HTMLElementTagNameMap { - 'pf-label': PfLabel; + 'pf-v5-label': PfV5Label; } } diff --git a/elements/pf-label/test/pf-label.e2e.ts b/elements/pf-v5-label/test/pf-label.e2e.ts similarity index 95% rename from elements/pf-label/test/pf-label.e2e.ts rename to elements/pf-v5-label/test/pf-label.e2e.ts index b0e512b6dd..f75986a59b 100644 --- a/elements/pf-label/test/pf-label.e2e.ts +++ b/elements/pf-v5-label/test/pf-label.e2e.ts @@ -2,7 +2,7 @@ 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-label'; +const tagName = 'pf-v5-label'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-label/test/pf-label.spec.ts b/elements/pf-v5-label/test/pf-label.spec.ts similarity index 71% rename from elements/pf-label/test/pf-label.spec.ts rename to elements/pf-v5-label/test/pf-label.spec.ts index b7866eba29..5103774def 100644 --- a/elements/pf-label/test/pf-label.spec.ts +++ b/elements/pf-v5-label/test/pf-label.spec.ts @@ -1,57 +1,57 @@ 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 { PfLabel } from '@patternfly/elements/pf-label/pf-label.js'; -import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js'; +import { PfV5Label } from '@patternfly/elements/pf-v5-label/pf-v5-label.js'; +import { PfV5Icon } from '@patternfly/elements/pf-v5-icon/pf-v5-icon.js'; import '@patternfly/pfe-tools/test/stub-logger.js'; const example = html` - Default + Default `; const exampleWithColorAttribute = html` - Red + Red `; const exampleWithColorAttributeEmpty = html` - Default + Default `; const exampleWithOutlineAttribute = html` - Default Outline + Default Outline `; const exampleWithCompactAttribute = html` - Default Compact + Default Compact `; -describe('', function() { +describe('', function() { before(function() { // replace the default built-in icon set resolveIconName function // with one that loads local icons. we don't want tests dependent on // prod servers. - PfIcon.addIconSet('rh', function(name: string) { - return new URL(`/elements/pf-icon/test/${name.replace('rh', 'rh-icon')}.svg`); + PfV5Icon.addIconSet('rh', function(name: string) { + return new URL(`/elements/pf-v5-icon/test/${name.replace('rh', 'rh-icon')}.svg`); }); }); it('imperatively instantiates', function() { - expect(document.createElement('pf-label')).to.be.an.instanceof(PfLabel); + expect(document.createElement('pf-v5-label')).to.be.an.instanceof(PfV5Label); }); it('should upgrade', async function() { - const el = await createFixture(example); - const klass = customElements.get('pf-label'); + const el = await createFixture(example); + const klass = customElements.get('pf-v5-label'); expect(el) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfLabel); + .to.be.an.instanceOf(PfV5Label); }); it('should display default variant', async function() { - const el = await createFixture(example); + const el = await createFixture(example); await el.updateComplete; const container = el.shadowRoot!.querySelector('#container')!; const beforeStyles = getComputedStyle(container, '::before'); @@ -62,7 +62,7 @@ describe('', function() { }); it('should display color variant if color attribute is present', async function() { - const el = await createFixture(exampleWithColorAttribute); + const el = await createFixture(exampleWithColorAttribute); await el.updateComplete; const container = el.shadowRoot!.querySelector('#container')!; const beforeStyles = getComputedStyle(container, '::before'); @@ -73,7 +73,7 @@ describe('', function() { }); it('should display default variant if color attribute is present but empty', async function() { - const el = await createFixture( exampleWithColorAttributeEmpty); + const el = await createFixture( exampleWithColorAttributeEmpty); await el.updateComplete; const container = el.shadowRoot!.querySelector('#container')!; const beforeStyles = getComputedStyle(container, '::before'); @@ -84,7 +84,7 @@ describe('', function() { }); it('should display outline variant if the attribute outline is present', async function() { - const el = await createFixture(exampleWithOutlineAttribute); + const el = await createFixture(exampleWithOutlineAttribute); await el.updateComplete; const container = el.shadowRoot!.querySelector('#container')!; const beforeStyles = getComputedStyle(container, '::before'); @@ -95,37 +95,37 @@ describe('', function() { }); describe('with valid icon attribute', function() { - let element: PfLabel; + let element: PfV5Label; beforeEach(async function() { - element = await createFixture(html` - Default Icon + element = await createFixture(html` + Default Icon `); element.updateComplete; }); - it('should render a pf-icon', async function() { - const icon = element.shadowRoot!.querySelector('pf-icon')!; + it('should render a pf-v5-icon', async function() { + const icon = element.shadowRoot!.querySelector('pf-v5-icon')!; expect(icon.hidden).to.be.false; expect(icon.icon).to.equal(element.icon); }); }); describe('with empty icon attribute', function() { - let element: PfLabel; + let element: PfV5Label; beforeEach(async function() { - element = await createFixture(html` - Default + element = await createFixture(html` + Default `); element.updateComplete; }); - it('should not render a pf-icon', async function() { - const icon = element.shadowRoot!.querySelector('pf-icon')!; + it('should not render a pf-v5-icon', async function() { + const icon = element.shadowRoot!.querySelector('pf-v5-icon')!; expect(icon.hidden).to.be.true; expect(icon.icon).to.be.undefined; }); }); it('should display compact version if the attribute is-compact is present', async function() { - const el = await createFixture(exampleWithCompactAttribute); + const el = await createFixture(exampleWithCompactAttribute); await el.updateComplete; const container = el.shadowRoot!.querySelector('#container')!; const beforeStyles = getComputedStyle(container, '::before'); diff --git a/elements/pf-modal/README.md b/elements/pf-v5-modal/README.md similarity index 79% rename from elements/pf-modal/README.md rename to elements/pf-v5-modal/README.md index f8ec3b3459..95875cfe7e 100644 --- a/elements/pf-modal/README.md +++ b/elements/pf-v5-modal/README.md @@ -1,15 +1,15 @@ # PatternFly Elements Modal -`pf-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window. +`pf-v5-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window. Read more about Modal in the [PatternFly Elements Modal documentation](https://patternflyelements.org/components/modal) ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im), install it @@ -21,7 +21,7 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-modal/pf-modal.js'; +import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js'; ``` ## Usage @@ -29,14 +29,14 @@ import '@patternfly/elements/pf-modal/pf-modal.js'; Open a modal dialog with the `showModal()` method, or by setting the `open` boolean attribute. ```html - +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - + ``` @@ -45,18 +45,18 @@ document.querySelector('pf-modal').showModal(); You may assign a button-like trigger element to the modal by setting the modal element's `trigger` attribute to the trigger's ID. ```html - +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - + ``` You may also imperatively set the trigger element with the `setTrigger()` method: ```js -const modal = document.querySelector('pf-modal'); +const modal = document.querySelector('pf-v5-modal'); const trigger = document.querySelector('button#my-trigger'); modal.setTrigger(trigger); ``` diff --git a/elements/pf-modal/demo/custom-header-footer.html b/elements/pf-v5-modal/demo/custom-header-footer.html similarity index 68% rename from elements/pf-modal/demo/custom-header-footer.html rename to elements/pf-v5-modal/demo/custom-header-footer.html index 8701e84c4f..3e261a9558 100644 --- a/elements/pf-modal/demo/custom-header-footer.html +++ b/elements/pf-v5-modal/demo/custom-header-footer.html @@ -1,5 +1,5 @@
- +

With custom header/footer content.

Allows for custom content in the header and/or footer by slotting HTML.

When static text describing the modal is available, it can be wrapped @@ -9,21 +9,21 @@

With custom header/footer content.

aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- + Custom modal footer.

- - Show modal + + Show modal
@@ -52,8 +52,8 @@

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/custom-icon.html b/elements/pf-v5-modal/demo/custom-icon.html similarity index 63% rename from elements/pf-modal/demo/custom-icon.html rename to elements/pf-v5-modal/demo/custom-icon.html index 27189df3e0..13ef0b7292 100644 --- a/elements/pf-modal/demo/custom-icon.html +++ b/elements/pf-v5-modal/demo/custom-icon.html @@ -1,24 +1,24 @@
- +

- + Modal Header

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - Show modal + + Show modal
@@ -47,8 +47,8 @@

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/description.html b/elements/pf-v5-modal/demo/description.html similarity index 84% rename from elements/pf-modal/demo/description.html rename to elements/pf-v5-modal/demo/description.html index 8db4de88d2..def4b6f5dc 100644 --- a/elements/pf-modal/demo/description.html +++ b/elements/pf-v5-modal/demo/description.html @@ -1,5 +1,5 @@
- +

Modal with description

A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body. @@ -31,20 +31,20 @@

Modal with description

mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -73,8 +73,8 @@

Modal with description

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/index.html b/elements/pf-v5-modal/demo/index.html similarity index 65% rename from elements/pf-modal/demo/index.html rename to elements/pf-v5-modal/demo/index.html index 9574c1cad7..75f26f00a6 100644 --- a/elements/pf-modal/demo/index.html +++ b/elements/pf-v5-modal/demo/index.html @@ -1,25 +1,25 @@
- +

Simple modal header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -48,8 +48,8 @@

Simple modal header

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/no-header.html b/elements/pf-v5-modal/demo/no-header.html similarity index 67% rename from elements/pf-modal/demo/no-header.html rename to elements/pf-v5-modal/demo/no-header.html index 88393b031c..8f9f731fe9 100644 --- a/elements/pf-modal/demo/no-header.html +++ b/elements/pf-v5-modal/demo/no-header.html @@ -1,19 +1,19 @@
- +

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - Show modal + + Show modal
@@ -42,8 +42,8 @@ } body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/overflowing-content.html b/elements/pf-v5-modal/demo/overflowing-content.html similarity index 84% rename from elements/pf-modal/demo/overflowing-content.html rename to elements/pf-v5-modal/demo/overflowing-content.html index 8a4e790cc1..2ae883cc2c 100644 --- a/elements/pf-modal/demo/overflowing-content.html +++ b/elements/pf-v5-modal/demo/overflowing-content.html @@ -1,7 +1,7 @@

If the content that you're passing to the modal is likely to overflow the modal content area, it is still accessible via keyboard scrolling.

- +

Modal with overflowing content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut @@ -30,20 +30,20 @@

Modal with overflowing content

mollis risus at ligula finibus, vitae volutpat ex auctor. Morbi vel cursus felis. Maecenas lobortis porttitor odio, non venenatis risus varius vitae. Proin gravida mi odio, sed pretium neque luctus vitae. Mauris ut libero bibendum, finibus dui non, rutrum sapien. Quisque ac bibendum erat. Vestibulum tincidunt risus nisi.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -72,8 +72,8 @@

Modal with overflowing content

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/styling.html b/elements/pf-v5-modal/demo/styling.html similarity index 62% rename from elements/pf-modal/demo/styling.html rename to elements/pf-v5-modal/demo/styling.html index 1b5bfaa3bf..470867efcb 100644 --- a/elements/pf-modal/demo/styling.html +++ b/elements/pf-v5-modal/demo/styling.html @@ -1,26 +1,26 @@
-

--pf-c-modal-box--Width CSS Custom Property

- +

--pf-v5-c-modal-box--Width CSS Custom Property

+

Width 50% header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -49,8 +49,8 @@

Width 50% header

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/top-aligned.html b/elements/pf-v5-modal/demo/top-aligned.html similarity index 65% rename from elements/pf-modal/demo/top-aligned.html rename to elements/pf-v5-modal/demo/top-aligned.html index 32ec70ae0c..d02185346e 100644 --- a/elements/pf-modal/demo/top-aligned.html +++ b/elements/pf-v5-modal/demo/top-aligned.html @@ -1,26 +1,26 @@

Top aligned

- +

Top modal header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -49,8 +49,8 @@

Top modal header

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/trigger-attribute.html b/elements/pf-v5-modal/demo/trigger-attribute.html similarity index 69% rename from elements/pf-modal/demo/trigger-attribute.html rename to elements/pf-v5-modal/demo/trigger-attribute.html index e26fe0e851..f26847f645 100644 --- a/elements/pf-modal/demo/trigger-attribute.html +++ b/elements/pf-v5-modal/demo/trigger-attribute.html @@ -1,30 +1,30 @@

You may set an external button as the trigger by setting its' ID as the modal's trigger attribute.

- +

External trigger

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - + Confirm + Cancel +

Arbitrary content can intervene between the external trigger and the modal element, as long as they are within the same root.

- Show modal with external trigger + Show modal with external trigger
@@ -53,8 +53,8 @@

External trigger

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/variants.html b/elements/pf-v5-modal/demo/variants.html similarity index 66% rename from elements/pf-modal/demo/variants.html rename to elements/pf-v5-modal/demo/variants.html index 1b89ddea75..211d8caab0 100644 --- a/elements/pf-modal/demo/variants.html +++ b/elements/pf-v5-modal/demo/variants.html @@ -1,56 +1,56 @@

Small

- +

Small modal header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal

Medium

- +

Medium modal header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal

Large

- +

Large modal header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- Confirm - Cancel - - Show modal + Confirm + Cancel + + Show modal
@@ -79,8 +79,8 @@

Large modal header

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/demo/warning-alert.html b/elements/pf-v5-modal/demo/warning-alert.html similarity index 62% rename from elements/pf-modal/demo/warning-alert.html rename to elements/pf-v5-modal/demo/warning-alert.html index f2a55e6ed1..547dff0071 100644 --- a/elements/pf-modal/demo/warning-alert.html +++ b/elements/pf-v5-modal/demo/warning-alert.html @@ -1,24 +1,24 @@
- +

- + Modal Header

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - Show modal + + Show modal
@@ -47,8 +47,8 @@

} body { - --pf-modal--MinWidth: 800px; - --pf-modal--MaxWidth: 800px; - --pf-modal--MaxHeight: 800px; + --pf-v5-modal--MinWidth: 800px; + --pf-v5-modal--MaxWidth: 800px; + --pf-v5-modal--MaxHeight: 800px; } diff --git a/elements/pf-modal/docs/CHANGELOG.old.md b/elements/pf-v5-modal/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-modal/docs/CHANGELOG.old.md rename to elements/pf-v5-modal/docs/CHANGELOG.old.md diff --git a/elements/pf-modal/docs/pf-modal.md b/elements/pf-v5-modal/docs/pf-modal.md similarity index 82% rename from elements/pf-modal/docs/pf-modal.md rename to elements/pf-v5-modal/docs/pf-modal.md index 09e5685a97..dada4b71a5 100644 --- a/elements/pf-modal/docs/pf-modal.md +++ b/elements/pf-v5-modal/docs/pf-modal.md @@ -1,22 +1,22 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - - Open modal + + Open modal {% endrenderOverview %} {% band header="Usage" %} {% htmlexample %} - +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - - Open modal + + Open modal {% endhtmlexample %} {% endband %} @@ -24,30 +24,30 @@ {% renderAttributes %} {% htmlexample %} - +

Small modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - - Open a small modal + + Open a small modal {% endhtmlexample %} {% htmlexample %} - +

Medium modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - - Open a medium modal + + Open a medium modal {% endhtmlexample %} {% htmlexample %} - +

Large modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Learn more - - Open a large modal + + Open a large modal {% endhtmlexample %} {% endrenderAttributes %} diff --git a/elements/pf-modal/docs/screenshot.png b/elements/pf-v5-modal/docs/screenshot.png similarity index 100% rename from elements/pf-modal/docs/screenshot.png rename to elements/pf-v5-modal/docs/screenshot.png diff --git a/elements/pf-modal/pf-modal.css b/elements/pf-v5-modal/pf-v5-modal.css similarity index 71% rename from elements/pf-modal/pf-modal.css rename to elements/pf-v5-modal/pf-v5-modal.css index df415d3880..26145802be 100644 --- a/elements/pf-modal/pf-modal.css +++ b/elements/pf-v5-modal/pf-v5-modal.css @@ -1,7 +1,7 @@ :host { display: block; position: relative; - --_spacer-align-top: var(--pf-c-modal-box--m-align-top--spacer, + --_spacer-align-top: var(--pf-v5-c-modal-box--m-align-top--spacer, var(--pf-global--spacer--sm, 0.5rem)); --_height-offset: min(var(--_spacer-align-top), var(--pf-global--spacer--2xl, 3rem)); } @@ -20,7 +20,7 @@ section { align-items: center; justify-content: center; /** Z-index for modal box */ - z-index: var(--pf-c-modal-box--ZIndex, + z-index: var(--pf-v5-c-modal-box--ZIndex, var(--pf-global--ZIndex--xl, 500)); } @@ -36,7 +36,7 @@ section { width: 100%; top: 0; left: 0; - background-color: var(--pf-c-backdrop--BackgroundColor, + background-color: var(--pf-v5-c-backdrop--BackgroundColor, var(--pf-global--BackgroundColor--dark-transparent-100, rgba(3, 3, 3, 0.62))); } @@ -46,25 +46,25 @@ section { margin: 0 auto; /** Width of modal */ - width: var(--pf-c-modal-box--Width, + width: var(--pf-v5-c-modal-box--Width, calc(100% - var(--pf-global--spacer--xl,2rem))); /** Max width of modal */ - max-width: var(--pf-c-modal-box--MaxWidth, + max-width: var(--pf-v5-c-modal-box--MaxWidth, calc(100% - var(--pf-global--spacer--xl,2rem))); /** Max height of modal */ - max-height: var(--pf-c-modal-box--MaxHeight, + max-height: var(--pf-v5-c-modal-box--MaxHeight, calc(100% - var(--pf-global--spacer--2xl,3rem))); /** Box shadow for modal */ - box-shadow: var(--pf-c-modal-box--BoxShadow, + box-shadow: var(--pf-v5-c-modal-box--BoxShadow, var(--pf-global--BoxShadow--xl, 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1))); /** Background color for modal */ - background-color: var(--pf-c-modal-box--BackgroundColor, + background-color: var(--pf-v5-c-modal-box--BackgroundColor, var(--pf-global--BackgroundColor--100, var(--pf-global--BackgroundColor--100, #fff))); @@ -80,26 +80,26 @@ section { :host([width="small"]) [part=dialog], :host([variant="small"]) [part=dialog] { /** Max width for small modal */ - --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth, 35rem); + --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-sm--sm--MaxWidth, 35rem); } :host([width="medium"]) [part=dialog], :host([variant="medium"]) [part=dialog] { /** Max width for medium modal */ - --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width, 52.5rem); + --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-md--Width, 52.5rem); } :host([width="large"]) [part=dialog], :host([variant="large"]) [part=dialog] { /** Max width for large modal */ - --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth, 70rem); + --pf-v5-c-modal-box--Width: var(--pf-v5-c-modal-box--m-lg--lg--MaxWidth, 70rem); } [part=content] { overflow-y: auto; overscroll-behavior: contain; - max-height: var(--pf-c-modal-box--MaxHeight, + max-height: var(--pf-v5-c-modal-box--MaxHeight, calc(100vh - var(--pf-global--spacer--2xl, 3rem))); @@ -113,7 +113,7 @@ section { header { position: sticky; top: 0; - background-color: var(--pf-c-modal-box--BackgroundColor, + background-color: var(--pf-v5-c-modal-box--BackgroundColor, var(--pf-global--BackgroundColor--100, var(--pf-global--BackgroundColor--100, #fff))); @@ -121,12 +121,12 @@ header { header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) { /** Font size for modal title */ - font-size: var(--pf-c-modal-box__title--FontSize, + font-size: var(--pf-v5-c-modal-box__title--FontSize, var(--pf-global--FontSize--2xl, 1.5rem)); font-weight: var(--pf-global--FontWeight--normal, 400); /** Font family for modal title */ - font-family: var(--pf-c-modal-box__title--FontFamily, + font-family: var(--pf-v5-c-modal-box__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif))); @@ -143,23 +143,23 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) { cursor: pointer; line-height: 24px; padding-block: - var(--pf-c-button--PaddingTop, + var(--pf-v5-c-button--PaddingTop, var(--pf-global--spacer--form-element, 0.375rem)); padding-inline: - var(--pf-c-button--PaddingRight, + var(--pf-v5-c-button--PaddingRight, var(--pf-global--spacer--md, 1rem)); top: 0; right: calc(var(--pf-global--spacer--lg, 1.5rem) / -3); - color: var(--pf-c-button--m-plain--Color, + color: var(--pf-v5-c-button--m-plain--Color, var(--pf-global--Color--200, #6a6e73)); - font-size: var(--pf-c-button--FontSize, + font-size: var(--pf-v5-c-button--FontSize, var(--pf-global--FontSize--md, 1rem)); } [part=close-button]:is(:focus-within, :focus-visible, :hover) { - color: var(--pf-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515)); + color: var(--pf-v5-c-button--m-plain--focus--Color, var(--pf-global--Color--100, #151515)); } [part=close-button] > svg { @@ -171,20 +171,20 @@ header ::slotted(:is(h1,h2,h3,h4,h5,h6)[slot="header"]) { :host([position="top"]) #dialog { align-self: start; - margin-block: var(--pf-c-modal-box--m-align-top--MarginTop, - var(--pf-c-modal-box--m-align-top--spacer, + margin-block: var(--pf-v5-c-modal-box--m-align-top--MarginTop, + var(--pf-v5-c-modal-box--m-align-top--spacer, 2rem)); margin-inline: var(--pf-global--spacer--md, 1rem); width: 100%; - max-width: var(--pf-c-modal-box--m-align-top--MaxWidth, + max-width: var(--pf-v5-c-modal-box--m-align-top--MaxWidth, calc(100% - min( - var(--pf-c-modal-box--m-align-top--spacer, 2rem) * 2, + var(--pf-v5-c-modal-box--m-align-top--spacer, 2rem) * 2, var(--pf-global--spacer--xl, 2rem)))); - max-height: var(--pf-c-modal-box--m-align-top--MaxHeight, + max-height: var(--pf-v5-c-modal-box--m-align-top--MaxHeight, calc(100% - var(--_height-offset) - var(--_spacer-align-top))); } diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-v5-modal/pf-v5-modal.ts similarity index 98% rename from elements/pf-modal/pf-modal.ts rename to elements/pf-v5-modal/pf-v5-modal.ts index ae7024cfe2..7d83083fa5 100644 --- a/elements/pf-modal/pf-modal.ts +++ b/elements/pf-v5-modal/pf-v5-modal.ts @@ -11,7 +11,7 @@ import { getRandomId } from '@patternfly/pfe-core/functions/random.js'; import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; -import style from './pf-modal.css'; +import style from './pf-v5-modal.css'; export class ModalCancelEvent extends ComposedEvent { constructor() { @@ -42,8 +42,8 @@ export class ModalOpenEvent extends ComposedEvent { * @fires {ModalOpenEvent} open - Fires when a user clicks on the trigger or manually opens a modal. * @fires {ModalCloseEvent} close - Fires when either a user clicks on either the close button or the overlay or manually closes a modal. */ -@customElement('pf-modal') -export class PfModal extends LitElement { +@customElement('pf-v5-modal') +export class PfV5Modal extends LitElement { static override readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true, @@ -229,7 +229,7 @@ export class PfModal extends LitElement { const { open, overlay, dialog } = this; if (open) { const path = event.composedPath(); - const { closeOnOutsideClick } = this.constructor as typeof PfModal; + const { closeOnOutsideClick } = this.constructor as typeof PfV5Modal; if (closeOnOutsideClick && path.includes(overlay!) && !path.includes(dialog!)) { event.preventDefault(); @@ -315,6 +315,6 @@ export class PfModal extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-modal': PfModal; + 'pf-v5-modal': PfV5Modal; } } diff --git a/elements/pf-modal/test/pf-modal.e2e.ts b/elements/pf-v5-modal/test/pf-modal.e2e.ts similarity index 96% rename from elements/pf-modal/test/pf-modal.e2e.ts rename to elements/pf-v5-modal/test/pf-modal.e2e.ts index 391383f3cf..6191e4c5c0 100644 --- a/elements/pf-modal/test/pf-modal.e2e.ts +++ b/elements/pf-v5-modal/test/pf-modal.e2e.ts @@ -2,7 +2,7 @@ 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-modal'; +const tagName = 'pf-v5-modal'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-modal/test/pf-modal.spec.ts b/elements/pf-v5-modal/test/pf-modal.spec.ts similarity index 82% rename from elements/pf-modal/test/pf-modal.spec.ts rename to elements/pf-v5-modal/test/pf-modal.spec.ts index c1115ca940..4a12e80128 100644 --- a/elements/pf-modal/test/pf-modal.spec.ts +++ b/elements/pf-v5-modal/test/pf-modal.spec.ts @@ -1,58 +1,58 @@ import { expect, nextFrame, html } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; import { setViewport } from '@web/test-runner-commands'; -import { PfModal } from '@patternfly/elements/pf-modal/pf-modal.js'; +import { PfV5Modal } from '@patternfly/elements/pf-v5-modal/pf-v5-modal.js'; import '@patternfly/pfe-tools/test/stub-logger.js'; // One element, defined here, is used // in multiple tests. It's torn down and recreated each time. const TEMPLATES = { - testElement: html``, + testElement: html``, smallModal: html` - +

Small modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- + `, mediumModal: html` - +

Medium modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- + `, largeModal: html` - +

Large modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- + `, }; -describe('', function() { +describe('', function() { it('imperatively instantiates', function() { - expect(document.createElement('pf-modal')).to.be.an.instanceof(PfModal); + expect(document.createElement('pf-v5-modal')).to.be.an.instanceof(PfV5Modal); }); it('should upgrade', async function() { - const el = await createFixture(TEMPLATES.testElement); - expect(el, 'pf-modal should be an instance of PfModal') - .to.be.an.instanceOf(customElements.get('pf-modal')) + const el = await createFixture(TEMPLATES.testElement); + expect(el, 'pf-v5-modal should be an instance of PfV5Modal') + .to.be.an.instanceOf(customElements.get('pf-v5-modal')) .and - .to.be.an.instanceOf(PfModal); + .to.be.an.instanceOf(PfV5Modal); }); // Example test. it('should apply attributes correctly', async function() { // Use the same markup that's declared at the top of the file. - const el = await createFixture(html` - + const el = await createFixture(html` +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- + `); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; const button = el.shadowRoot!.querySelector('[part=close-button]')!; @@ -65,12 +65,12 @@ describe('', function() { }); it('should open the modal window when the trigger is clicked', async function() { - const el = await createFixture(html` - + const el = await createFixture(html` +

Modal with a header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - Open a modal + + Open a modal `); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; const trigger = document.getElementById('trigger')!; @@ -88,7 +88,7 @@ describe('', function() { }); it('should remove the hidden attribute from the host on upgrade', async function() { - const el = await createFixture(TEMPLATES.testElement); + const el = await createFixture(TEMPLATES.testElement); await new Promise(r => setTimeout(r, 25)); // test for the hidden attribute on the host @@ -102,7 +102,7 @@ describe('', function() { describe('with variant=small attribute', function() { it('has small modal width', async function() { - const el = await createFixture(TEMPLATES.smallModal); + const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -111,7 +111,7 @@ describe('', function() { describe('with variant=medium attribute', function() { it('has medium modal width', async function() { - const el = await createFixture(TEMPLATES.mediumModal); + const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -120,7 +120,7 @@ describe('', function() { describe('with variant=large attribute', function() { it('has large modal width', async function() { - const el = await createFixture(TEMPLATES.largeModal); + const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -135,7 +135,7 @@ describe('', function() { describe('with variant=small attribute', function() { it('has small modal width', async function() { - const el = await createFixture(TEMPLATES.smallModal); + const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -144,7 +144,7 @@ describe('', function() { describe('with variant=medium attribute', function() { it('has medium modal width', async function() { - const el = await createFixture(TEMPLATES.mediumModal); + const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -153,7 +153,7 @@ describe('', function() { describe('with variant=large attribute', function() { it('has large modal width', async function() { - const el = await createFixture(TEMPLATES.largeModal); + const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -168,7 +168,7 @@ describe('', function() { describe('with variant=small attribute', function() { it('has small modal width', async function() { - const el = await createFixture(TEMPLATES.smallModal); + const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -177,7 +177,7 @@ describe('', function() { describe('with variant=medium attribute', function() { it('has medium modal width', async function() { - const el = await createFixture(TEMPLATES.mediumModal); + const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -186,7 +186,7 @@ describe('', function() { describe('with variant=large attribute', function() { it('has large modal width', async function() { - const el = await createFixture(TEMPLATES.largeModal); + const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -201,7 +201,7 @@ describe('', function() { describe('with variant=small attribute', function() { it('has small modal width', async function() { - const el = await createFixture(TEMPLATES.smallModal); + const el = await createFixture(TEMPLATES.smallModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -210,7 +210,7 @@ describe('', function() { describe('with variant=medium attribute', function() { it('has medium modal width', async function() { - const el = await createFixture(TEMPLATES.mediumModal); + const el = await createFixture(TEMPLATES.mediumModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); @@ -219,7 +219,7 @@ describe('', function() { describe('with variant=large attribute', function() { it('has large modal width', async function() { - const el = await createFixture(TEMPLATES.largeModal); + const el = await createFixture(TEMPLATES.largeModal); const modalWindow = el.shadowRoot!.querySelector('#dialog')!; expect(getComputedStyle(modalWindow).getPropertyValue('max-width')) .to.equal('calc(100% - 32px)'); diff --git a/elements/pf-panel/README.md b/elements/pf-v5-panel/README.md similarity index 80% rename from elements/pf-panel/README.md rename to elements/pf-v5-panel/README.md index f2eeb4dd94..5c2ec71f2d 100644 --- a/elements/pf-panel/README.md +++ b/elements/pf-v5-panel/README.md @@ -4,7 +4,7 @@ Panel contains content with optional header and footer content. ## Usage ```html - +

Panel content

- + ``` diff --git a/elements/pf-panel/demo/bordered.html b/elements/pf-v5-panel/demo/bordered.html similarity index 54% rename from elements/pf-panel/demo/bordered.html rename to elements/pf-v5-panel/demo/bordered.html index 5dc10860a0..1d521901ce 100644 --- a/elements/pf-panel/demo/bordered.html +++ b/elements/pf-v5-panel/demo/bordered.html @@ -1,11 +1,11 @@
- +

Main content

- +
diff --git a/elements/pf-popover/demo/icons.html b/elements/pf-v5-popover/demo/icons.html similarity index 60% rename from elements/pf-popover/demo/icons.html rename to elements/pf-v5-popover/demo/icons.html index f29104ed8f..7a299ea8c2 100644 --- a/elements/pf-popover/demo/icons.html +++ b/elements/pf-v5-popover/demo/icons.html @@ -1,43 +1,43 @@
Icon attribute - - Toggle popover - + Toggle popover +
Icon slot - - + +

Popover with icon

Popovers are triggered by click rather than hover.
Popover footer
- Toggle popover - + Toggle popover +
Custom Icon Set - - + +
Popover heading
Popovers are triggered by click rather than hover.
Popover footer - Toggle popover - + Toggle popover +
-Hover to cite +Hover to cite - + Richard M. Stallman Free software is a political movement; open source is a development model. - + ``` - - Lit - + + Lit + ```js import { LitElement, html } from 'lit'; -import '@patternfly/elements/pf-button/pf-button.js'; -import '@patternfly/elements/pf-popover/pf-popover.js'; +import '@patternfly/elements/pf-v5-button/pf-v5-button.js'; +import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js'; class Citer extends LitElement { render() { return html` - Hover to Cite + Hover to Cite - + Richard M. Stallman Free software is a political movement; open source is a development model. - + `; } - get #popover() { return this.shadowRoot.querySelector('pf-popover'); } + get #popover() { return this.shadowRoot.querySelector('pf-v5-popover'); } #onMouseover() { this.#popover.show(); } @@ -87,13 +87,13 @@ class Citer extends LitElement { } ``` - - React - + + React + ```jsx -import { Button } from '@patternfly/elements/react/pf-button/pf-button.js'; -import { Popover } from '@patternfly/elements/react/pf-popover/pf-popover.js'; +import { Button } from '@patternfly/elements/react/pf-v5-button/pf-v5-button.js'; +import { Popover } from '@patternfly/elements/react/pf-v5-popover/pf-v5-popover.js'; import { useRef } from 'react'; @@ -117,8 +117,8 @@ export function Citer() { } ``` - - + + {% endband %} {% renderSlots %}{% endrenderSlots %} diff --git a/elements/pf-popover/docs/screenshot.png b/elements/pf-v5-popover/docs/screenshot.png similarity index 100% rename from elements/pf-popover/docs/screenshot.png rename to elements/pf-v5-popover/docs/screenshot.png diff --git a/elements/pf-v5-popover/pf-v5-popover.css b/elements/pf-v5-popover/pf-v5-popover.css new file mode 100644 index 0000000000..621f623a79 --- /dev/null +++ b/elements/pf-v5-popover/pf-v5-popover.css @@ -0,0 +1,224 @@ +:host { + display: inline; + /** Width of the arrow */ + --_floating-arrow-size: var(--pf-v5-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem)); + /** Heading font color */ + --_header-text-color: var(--pf-v5-c-popover__title-text--Color, inherit); + /** Heading icon font color */ + --_header-icon-color: var(--pf-v5-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515)); + --_animation-speed: var(--pf-v5-popover--animation-speed, 300ms); + --_z-index: var(--pf-v5-popover--z-index, 9999); +} + +.visually-hidden { + position: fixed; + top: 0; + left: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +[hidden] { + display: none !important; +} + +#container { + display: inline-flex; + position: relative; +} + +#trigger { + display: inline-block; + position: relative; +} + +#arrow { + display: block; + position: absolute; + /** Arrow background color */ + background-color: var(--pf-v5-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff)); + /** Arrow box shadow */ + box-shadow: var( + --pf-v5-c-popover__arrow--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)) + ); + content: ''; + /** Height of the arrow */ + height: var(--pf-v5-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem)); + /** Width of the arrow */ + width: var(--pf-v5-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem)); + rotate: 45deg; + z-index: -1; + pointer-events: none; +} + +#popover { + display: block; + position: absolute; + opacity: 0; + z-index: -1; + transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s; + left: 0; + top: 0; + translate: var(--_floating-content-translate); + /** Popover box shadow */ + box-shadow: var( + --pf-v5-c-popover--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)) + ); + border: 0; + padding: 0; + visibility: hidden; +} + +#popover[open] { + opacity: 1; + z-index: var(--_z-index); + visibility: visible; +} + +[part='content'] { + position: relative; + /** Popover padding (top, right, bottom, left) */ + padding: var(--pf-v5-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem)) + var(--pf-v5-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem)) + var(--pf-v5-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem)) + var(--pf-v5-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem)); + word-break: break-word; + /** Popover line height */ + line-height: var(--pf-v5-c-popover--line-height, 1.5); + /** Popover font-size */ + font-size: var(--pf-v5-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); + color: var(--pf-v5-c-popover__content--Color, var(--pf-global--Color--100, #151515)); + /** Popover background color */ + background-color: var(--pf-v5-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff)); + /** Popover max-width */ + max-width: var( + --pf-v5-c-popover--MaxWidth, + calc(var(--pf-v5-c-popover__content--PaddingLeft, 1rem) + var(--pf-v5-c-popover__content--PaddingRight, 1rem) + 18.75rem) + ); + /** Popover min-width */ + min-width: var( + --pf-v5-c-popover--MinWidth, + calc(var(--pf-v5-c-popover__content--PaddingLeft, 1rem) + var(--pf-v5-c-popover__content--PaddingRight, 1rem) + 18.75rem) + ); + width: max-content; +} + +[part='close-button'] { + cursor: pointer; + position: absolute; + /** Close button right position */ + right: var( + --pf-v5-c-popover--c-button--Right, + calc(var(--pf-v5-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem)) + ); + /** Close button top position */ + top: var( + --pf-v5-c-popover--c-button--Top, + calc(var(--pf-v5-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem)) + ); +} + +[part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) { + /** Padding between close button and its immediate sibling */ + padding-right: var(--pf-v5-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem)); +} + +[part='header'] { + display: flex; + align-items: baseline; +} + +[part='icon'] { + color: var(--_header-icon-color); + /** Heading icon right margin */ + margin-right: var(--pf-v5-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem)); +} + +[part='icon'] ::slotted(*), +[part='icon'] * { + vertical-align: -0.125em; +} + +[part='icon'], +[part='heading']::slotted(:is(h2, h3, h4, h5, h6)), +[part='heading'] :is(h2, h3, h4, h5, h6) { + /** Header font-size */ + font-size: var(--pf-v5-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem)); + font-weight: var(--pf-global--FontWeight--normal, 400); + --pf-v5-icon--size: var( + --pf-v5-c-popover__title--FontSize, + var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em)) + ); +} + +[part='heading']::slotted(:is(h2, h3, h4, h5, h6)), +[part='heading'] :is(h2, h3, h4, h5, h6) { + color: var(--_header-text-color); + margin-top: 0; + /** Header bottom margin */ + margin-bottom: var(--pf-v5-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem)); + /** Header line height */ + line-height: var(--pf-v5-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5)); + /** Header font-family */ + font-family: var( + --pf-v5-c-popover__title--FontFamily, + var( + --pf-global--FontFamily--heading--sans-serif, + 'RedHatDisplay', + 'Overpass', + overpass, + helvetica, + arial, + sans-serif + ) + ); +} + +[part='body'] { + display: block; + word-wrap: break-word; +} + +[part='footer'] { + /** Footer top margin */ + margin-top: var(--pf-v5-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem)); +} + +:host([alert-severity='default']) { + /** Default alert heading color */ + --_header-text-color: var(--pf-v5-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737)); + /** Default alert icon color */ + --_header-icon-color: var(--pf-v5-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596)); +} + +:host([alert-severity='info']) { + /** Info alert heading color */ + --_header-text-color: var(--pf-v5-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952)); + /** Info alert icon color */ + --_header-icon-color: var(--pf-v5-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3)); +} + +:host([alert-severity='warning']) { + /** Warning alert icon color */ + --_header-icon-color: var(--pf-v5-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00)); + /** Warning alert heading color */ + --_header-text-color: var(--pf-v5-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600)); +} + +:host([alert-severity='success']) { + /** Success alert icon color */ + --_header-icon-color: var(--pf-v5-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635)); + /** Success alert heading color */ + --_header-text-color: var(--pf-v5-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18)); +} + +:host([alert-severity='danger']) { + /** Danger alert icon color */ + --_header-icon-color: var(--pf-v5-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b)); + /** Danger alert heading color */ + --_header-text-color: var(--pf-v5-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000)); +} diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-v5-popover/pf-v5-popover.ts similarity index 95% rename from elements/pf-popover/pf-popover.ts rename to elements/pf-v5-popover/pf-v5-popover.ts index d459d46452..cc2c294c46 100644 --- a/elements/pf-popover/pf-popover.ts +++ b/elements/pf-v5-popover/pf-v5-popover.ts @@ -13,9 +13,9 @@ import { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js'; import { bound } from '@patternfly/pfe-core/decorators/bound.js'; import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js'; -import '@patternfly/elements/pf-button/pf-button.js'; +import '@patternfly/elements/pf-v5-button/pf-v5-button.js'; -import styles from './pf-popover.css'; +import styles from './pf-v5-popover.css'; type HeadingLevel = 2 | 3 | 4 | 5 | 6; @@ -50,11 +50,11 @@ export class PopoverShownEvent extends ComposedEvent { * @summary Toggle the visibility of helpful or contextual information. * @alias Popover */ -@customElement('pf-popover') -export class PfPopover extends LitElement { +@customElement('pf-v5-popover') +export class PfV5Popover extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; - private static instances = new Set(); + private static instances = new Set(); private static alertIcons = new Map(Object.entries({ default: 'bell', @@ -67,7 +67,7 @@ export class PfPopover extends LitElement { static { if (!isServer) { document.addEventListener('click', function(event) { - for (const instance of PfPopover.instances) { + for (const instance of PfV5Popover.instances) { if (!instance.noOutsideClick) { instance.#outsideClick(event); } @@ -241,7 +241,7 @@ export class PfPopover extends LitElement { `; const headerIcon = this.icon - ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) + ?? PfV5Popover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''; return html` @@ -265,7 +265,7 @@ export class PfPopover extends LitElement {
- - + ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`
@@ -283,9 +283,9 @@ export class PfPopover extends LitElement { - + size="md"> ${!this.alertSeverity ? nothing : html` `} @@ -310,7 +310,7 @@ export class PfPopover extends LitElement { disconnectedCallback(): void { super.disconnectedCallback(); - PfPopover.instances.delete(this); + PfV5Popover.instances.delete(this); this.#referenceTrigger?.removeEventListener('click', this.toggle); this.#referenceTrigger?.removeEventListener('keydown', this.#onKeydown); } @@ -395,7 +395,7 @@ export class PfPopover extends LitElement { }); this._popover?.show(); this.dispatchEvent(new PopoverShownEvent()); - PfPopover.instances.add(this); + PfV5Popover.instances.add(this); } /** @@ -406,7 +406,7 @@ export class PfPopover extends LitElement { await this.#float.hide(); this._popover?.close(); this.dispatchEvent(new PopoverHiddenEvent()); - PfPopover.instances.delete(this); + PfV5Popover.instances.delete(this); this.#hideDialog = true; this.requestUpdate(); } @@ -414,6 +414,6 @@ export class PfPopover extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-popover': PfPopover; + 'pf-v5-popover': PfV5Popover; } } diff --git a/elements/pf-popover/test/pf-popover.e2e.ts b/elements/pf-v5-popover/test/pf-popover.e2e.ts similarity index 95% rename from elements/pf-popover/test/pf-popover.e2e.ts rename to elements/pf-v5-popover/test/pf-popover.e2e.ts index 78709c9997..2033dd201e 100644 --- a/elements/pf-popover/test/pf-popover.e2e.ts +++ b/elements/pf-v5-popover/test/pf-popover.e2e.ts @@ -2,7 +2,7 @@ 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-popover'; +const tagName = 'pf-v5-popover'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-popover/test/pf-popover.spec.ts b/elements/pf-v5-popover/test/pf-popover.spec.ts similarity index 86% rename from elements/pf-popover/test/pf-popover.spec.ts rename to elements/pf-v5-popover/test/pf-popover.spec.ts index bd44cd1722..3c8ac3daba 100644 --- a/elements/pf-popover/test/pf-popover.spec.ts +++ b/elements/pf-v5-popover/test/pf-popover.spec.ts @@ -2,8 +2,8 @@ import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testi import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js'; import { sendKeys, resetMouse } from '@web/test-runner-commands'; -import { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js'; -import { PfButton } from '@patternfly/elements/pf-button/pf-button.js'; +import { PfV5Popover } from '@patternfly/elements/pf-v5-popover/pf-v5-popover.js'; +import { PfV5Button } from '@patternfly/elements/pf-v5-button/pf-v5-button.js'; function press(key: string) { return async function() { @@ -11,12 +11,12 @@ function press(key: string) { }; } -describe('', function() { - let element: PfPopover; +describe('', function() { + let element: PfV5Popover; /** create a simple test fixture */ async function setupSimpleInstance() { - element = await fixture(html``); + element = await fixture(html``); } /** Wait on the element's update cycle */ @@ -30,7 +30,7 @@ describe('', function() { } function resetElement() { - document.querySelectorAll('pf-popover').forEach(e => e.remove()); + document.querySelectorAll('pf-v5-popover').forEach(e => e.remove()); // @ts-expect-error: resetting test state, so we don't mind the ts error. element = undefined; } @@ -41,16 +41,16 @@ describe('', function() { describe('simply instantiating', function() { beforeEach(setupSimpleInstance); it('should upgrade', async function() { - const klass = customElements.get('pf-popover'); + const klass = customElements.get('pf-v5-popover'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfPopover); + .to.be.an.instanceOf(PfV5Popover); }); it('should be accessible', expectA11yAxe); it('imperatively instantiates', function() { - expect(document.createElement('pf-popover')) - .to.be.an.instanceof(PfPopover); + expect(document.createElement('pf-v5-popover')) + .to.be.an.instanceof(PfV5Popover); }); it('should not report anything to assistive technology', async function() { const snapshot = await a11ySnapshot(); @@ -69,12 +69,12 @@ describe('', function() { /** create a test fixture with slotted trigger and content attrs */ beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() { - element = await fixture(html` - (html` + - Toggle popover - + Toggle popover + `); }); @@ -88,12 +88,12 @@ describe('', function() { describe('tabbing to the trigger', function() { beforeEach(resetElement); beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() { - element = await fixture(html` - (html` + - Toggle popover - + Toggle popover + `); }); @@ -102,7 +102,7 @@ describe('', function() { beforeEach(updateComplete); it('doesn\'t steal tab order', function() { - expect(document.activeElement).to.be.an.instanceof(PfButton); + expect(document.activeElement).to.be.an.instanceof(PfV5Button); }); describe('and pressing Enter', function() { @@ -156,16 +156,16 @@ describe('', function() { beforeEach(async function() { const container = await fixture(html`
- + footer="Popover footer">
`); - element = container.querySelector('pf-popover')!; + element = container.querySelector('pf-v5-popover')!; btn1 = container.querySelector('#btn-1')!; btn2 = container.querySelector('#btn-2')!; }); diff --git a/elements/pf-v5-progress-stepper/README.md b/elements/pf-v5-progress-stepper/README.md new file mode 100644 index 0000000000..c1bf817dc6 --- /dev/null +++ b/elements/pf-v5-progress-stepper/README.md @@ -0,0 +1,41 @@ +# PatternFly Elements Progress Stepper + +A component that gives the user a visual representation of the current state of +their progress through an application (typically a multistep form). + +Read more about Progress Stepper in the [PatternFly Elements Progress Steps +documentation][docs]. + +## 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-progress-stepper/pf-v5-progress-stepper.js'; +``` + +## Usage + +```html + + Completed + Issue + Failure + Running + Last + +``` + +[docs]: https://patternflyelements.org/components/progress-stepper diff --git a/elements/pf-v5-progress-stepper/demo/alignment.html b/elements/pf-v5-progress-stepper/demo/alignment.html new file mode 100644 index 0000000000..77e9fdbfe5 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/alignment.html @@ -0,0 +1,38 @@ +
+

With alignment

+ + + + First Step + Second Step + Third Step + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/compact.html b/elements/pf-v5-progress-stepper/demo/compact.html new file mode 100644 index 0000000000..4145a1f056 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/compact.html @@ -0,0 +1,38 @@ +
+

Compact

+ + + + First Step + Second Step + Third Step + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/custom-icons.html b/elements/pf-v5-progress-stepper/demo/custom-icons.html new file mode 100644 index 0000000000..95225c30a8 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/custom-icons.html @@ -0,0 +1,18 @@ +
+ + Successful completion + In process + Pending + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/danger.html b/elements/pf-v5-progress-stepper/demo/danger.html new file mode 100644 index 0000000000..a967fe6679 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/danger.html @@ -0,0 +1,20 @@ +
+ + First Step + Second Step + Third Step + Fourth Step + Fifth Step + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/index.html b/elements/pf-v5-progress-stepper/demo/index.html new file mode 100644 index 0000000000..b2d3b2f222 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/index.html @@ -0,0 +1,18 @@ +
+ + First Step + Second Step + Third Step + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/info.html b/elements/pf-v5-progress-stepper/demo/info.html new file mode 100644 index 0000000000..aa93f3a16b --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/info.html @@ -0,0 +1,37 @@ +
+ + First Step + Second Step + Third Step + Fourth Step + Fifth Step + +
+ + + + diff --git a/elements/pf-v5-progress-stepper/demo/step-descriptions.html b/elements/pf-v5-progress-stepper/demo/step-descriptions.html new file mode 100644 index 0000000000..b77dec2d55 --- /dev/null +++ b/elements/pf-v5-progress-stepper/demo/step-descriptions.html @@ -0,0 +1,18 @@ +
+ + First Step + Second Step + Third Step + +
+ + + + diff --git a/elements/pf-progress-stepper/docs/CHANGELOG.old.md b/elements/pf-v5-progress-stepper/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-progress-stepper/docs/CHANGELOG.old.md rename to elements/pf-v5-progress-stepper/docs/CHANGELOG.old.md diff --git a/elements/pf-v5-progress-stepper/docs/pf-progress-stepper.md b/elements/pf-v5-progress-stepper/docs/pf-progress-stepper.md new file mode 100644 index 0000000000..4803153f39 --- /dev/null +++ b/elements/pf-v5-progress-stepper/docs/pf-progress-stepper.md @@ -0,0 +1,37 @@ +{% renderInstallation %} {% endrenderInstallation %} + +{% renderOverview %} + + Completed + Issue + Failure + Running + Last + +{% endrenderOverview %} + +{% band header="Usage" %} + {% htmlexample %} + + Completed + Issue + Failure + Running + Last + + {% endhtmlexample %} +{% endband %} + +{% renderSlots %}{% endrenderSlots %} + +{% renderSlots for='pf-v5-progress-step', header='Slots on `pf-v5-progress-step`' %}{% endrenderSlots %} + +{% renderAttributes %}{% endrenderAttributes %} + +{% renderMethods %}{% endrenderMethods %} + +{% renderEvents %}{% endrenderEvents %} + +{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} + +{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-progress-stepper/docs/screenshot.png b/elements/pf-v5-progress-stepper/docs/screenshot.png similarity index 100% rename from elements/pf-progress-stepper/docs/screenshot.png rename to elements/pf-v5-progress-stepper/docs/screenshot.png diff --git a/elements/pf-v5-progress-stepper/pf-v5-progress-step.css b/elements/pf-v5-progress-stepper/pf-v5-progress-step.css new file mode 100644 index 0000000000..10e2bd49ed --- /dev/null +++ b/elements/pf-v5-progress-stepper/pf-v5-progress-step.css @@ -0,0 +1,124 @@ +[hidden] { + display: none !important; +} + +#icon { + z-index: var(--pf-v5-c-progress-stepper__step-icon--ZIndex); + display: flex; + align-items: center; + justify-content: center; + width: var(--pf-v5-c-progress-stepper__step-icon--Width); + height: var(--pf-v5-c-progress-stepper__step-icon--Height); + color: var(--pf-v5-c-progress-stepper__step-icon--Color); + background-color: var(--pf-v5-c-progress-stepper__step-icon--BackgroundColor); + border: var(--pf-v5-c-progress-stepper__step-icon--BorderWidth) solid var(--pf-v5-c-progress-stepper__step-icon--BorderColor); + border-radius: 50%; + font-size: var(--pf-v5-c-progress-stepper__step-icon--FontSize); + --pf-v5-icon--size: 1.125em; +} + +#main { + position: var(--pf-v5-c-progress-stepper__step-main--Position, initial); + min-width: 0; + margin: var(--pf-v5-c-progress-stepper__step-main--MarginTop) var(--pf-v5-c-progress-stepper__step-main--MarginRight) var(--pf-v5-c-progress-stepper__step-main--MarginBottom) var(--pf-v5-c-progress-stepper__step-main--MarginLeft); + text-align: var(--pf-v5-c-progress-stepper--step-main--TextAlign, auto); + overflow-wrap: anywhere; +} + +:host(:not([current])) #main.compact { + position: fixed; + top: 0; + left: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + margin-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom); +} + +:host([current]) #main.compact { + grid-column: 1/-1; + grid-row: 1/2; +} + +#title { + font-size: var(--pf-v5-c-progress-stepper__step-title--FontSize); + font-weight: var(--pf-v5-c-progress-stepper__step-title--FontWeight); + color: var(--pf-v5-c-progress-stepper__step-title--Color); + text-align: var(--pf-v5-c-progress-stepper__step-title--TextAlign); + border: 0; +} + +#description { + margin-top: var(--pf-v5-c-progress-stepper__step-description--MarginTop); + font-size: var(--pf-v5-c-progress-stepper__step-description--FontSize); + color: var(--pf-v5-c-progress-stepper__step-description--Color); + text-align: var(--pf-v5-c-progress-stepper__step-description--TextAlign); + display: block; +} + +:host { + display: contents; +} + +#connector { + position: relative; + display: flex; + justify-content: var(--pf-v5-c-progress-stepper__step-connector--JustifyContent); + width: 100%; +} + +#connector.compact { + min-width: var(--pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth); + grid-row: var(--pf-v5-c-progress-stepper--m-compact__step-connector--GridRow); + padding-bottom: var(--pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom); +} + +:host(:not(:last-of-type)) #main::before { + content: var(--pf-v5-c-progress-stepper__step-main--before--Content); + position: absolute; + top: calc(100% + var(--pf-v5-c-progress-stepper__step-main--MarginTop)); + left: calc(50% - var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) / 2); + width: auto; + height: calc(var(--pf-v5-c-progress-stepper__step-main--MarginTop) + var(--pf-v5-c-progress-stepper__step-main--MarginBottom)); + border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor); +} + +:host(:not(:last-of-type)) #connector::before { + position: absolute; + top: var(--pf-v5-c-progress-stepper__step-connector--before--Top); + left: var(--pf-v5-c-progress-stepper__step-connector--before--Left); + width: var(--pf-v5-c-progress-stepper__step-connector--before--Width); + height: var(--pf-v5-c-progress-stepper__step-connector--before--Height); + content: var(--pf-v5-c-progress-stepper__step-connector--before--Content); + border-right: var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderRightColor); + border-bottom: var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth) solid var(--pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor); + transform: var(--pf-v5-c-progress-stepper__step-connector--before--Transform); +} + +:host([current]) { + --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight); + --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-current__step-title--Color); +} + +:host([variant="success"]) { + --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-global--success-color--100, #3e8635); +} + +:host([variant="info"]) { + --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-global--info-color--100, #2b9af3); +} + +:host([variant="warning"]) { + --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-global--warning-color--100, #f0ab00); +} + +:host([variant="danger"]) { + --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-progress-stepper__step-title--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--Color); + --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color); + --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color); + --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor); + --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor); + --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor); +} diff --git a/elements/pf-progress-stepper/pf-progress-step.ts b/elements/pf-v5-progress-stepper/pf-v5-progress-step.ts similarity index 81% rename from elements/pf-progress-stepper/pf-progress-step.ts rename to elements/pf-v5-progress-stepper/pf-v5-progress-step.ts index 6ebe9e2a1f..421e9497d6 100644 --- a/elements/pf-progress-stepper/pf-progress-step.ts +++ b/elements/pf-v5-progress-stepper/pf-v5-progress-step.ts @@ -1,5 +1,5 @@ import type { PropertyValues, TemplateResult } from 'lit'; -import type { PfProgressStepper } from './pf-progress-stepper.js'; +import type { PfV5ProgressStepper } from './pf-v5-progress-stepper.js'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; @@ -10,7 +10,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; -import style from './pf-progress-step.css'; +import style from './pf-v5-progress-step.css'; const ICONS = new Map(Object.entries({ success: { icon: 'check-circle' }, @@ -27,9 +27,9 @@ const ICONS = new Map(Object.entries({ * @slot icon * Overrides the icon property */ -@customElement('pf-progress-step') -export class PfProgressStep extends LitElement { - protected static parentTagName = 'pf-progress-stepper'; +@customElement('pf-v5-progress-step') +export class PfV5ProgressStep extends LitElement { + protected static parentTagName = 'pf-v5-progress-stepper'; static readonly styles: CSSStyleSheet[] = [style]; @@ -56,14 +56,14 @@ export class PfProgressStep extends LitElement { const hasDescription = !!(this.description ?? this.#slots.hasSlotted('description')); const icon = this.icon ?? ICONS.get(this.variant ?? 'default')?.icon; const set = this.iconSet ?? ICONS.get(this.variant ?? 'default')?.set; - const { parentTagName } = (this.constructor as typeof PfProgressStep); - const { compact = false } = this.closest?.(parentTagName) ?? {}; + const { parentTagName } = (this.constructor as typeof PfV5ProgressStep); + const { compact = false } = this.closest?.(parentTagName) ?? {}; return html`
- + set="${ifDefined(set)}">
@@ -82,6 +82,6 @@ export class PfProgressStep extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-progress-step': PfProgressStep; + 'pf-v5-progress-step': PfV5ProgressStep; } } diff --git a/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.css b/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.css new file mode 100644 index 0000000000..08765561a2 --- /dev/null +++ b/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.css @@ -0,0 +1,324 @@ +[hidden] { + display: none !important; +} + +:host { + /** Grid auto flow for vertical layout */ + --pf-v5-c-progress-stepper--m-vertical--GridAutoFlow: row; + /** Grid template columns for vertical layout */ + --pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr; + /** Top position for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top: 0; + /** Left position for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left: calc(var(--pf-v5-c-progress-stepper__step-icon--Width) / 2); + /** Width for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width: auto; + /** Height for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height: 100%; + /** Right border width for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth: var(--pf-global--BorderWidth--md, 2px); + /** Right border color for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor: var(--pf-global--BorderColor--100, #d2d2d2); + /** Bottom border width for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth: 0; + /** Bottom border color for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor: transparent; + /** Transform for vertical step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform: translateX(-50%); + /** Top margin for vertical step main content */ + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem); + /** Right margin for vertical step main content */ + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: 0; + /** Bottom margin for vertical step main content */ + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom: var(--pf-global--spacer--xl, 2rem); + /** Left margin for vertical step main content */ + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem); + /** Grid template columns for vertical compact layout */ + --pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns: 1fr; + /** Padding bottom for vertical compact step connector */ + --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); + /** Grid row for vertical compact step connector */ + --pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow: auto; + /** Right margin for vertical compact step main content */ + --pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight: 0; + /** Right margin for vertical centered step main content */ + --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight: 0; + /** Left margin for vertical centered step main content */ + --pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft: 0; + /** Grid auto flow for horizontal layout */ + --pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow: column; + /** Grid template columns for horizontal layout */ + --pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns: initial; + /** Top position for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top: calc(var(--pf-v5-c-progress-stepper__step-icon--Height) / 2); + /** Left position for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Left: 0; + /** Width for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Width: 100%; + /** Height for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height: auto; + /** Right border width for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth: 0; + /** Right border color for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor: unset; + /** Bottom border width for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Bottom border color for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor: var(--pf-global--BorderColor--100, #d2d2d2); + /** Transform for horizontal step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform: translateY(-50%); + /** Top margin for horizontal step main content */ + --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop: var(--pf-global--spacer--xs, 0.25rem); + /** Right margin for horizontal step main content */ + --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem); + /** Bottom margin for horizontal step main content */ + --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom: 0; + /** Left margin for horizontal step main content */ + --pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft: 0; + /** Grid template columns for horizontal compact layout */ + --pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns: repeat(auto-fill, 1.75rem); + /** Padding bottom for horizontal compact step connector */ + --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom: 0; + /** Grid row for horizontal compact step connector */ + --pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow: 2; + /** Grid auto flow for compact layout */ + --pf-v5-c-progress-stepper--m-compact--GridAutoFlow: row; + /** Top margin for compact step main content */ + --pf-v5-c-progress-stepper--m-compact__step-main--MarginTop: 0; + /** Bottom margin for compact step main content */ + --pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom: var(--pf-global--spacer--xs, 0.25rem); + /** Minimum width for compact step connector */ + --pf-v5-c-progress-stepper--m-compact__step-connector--MinWidth: 1.75rem; + /** Width for compact step icon */ + --pf-v5-c-progress-stepper--m-compact__step-icon--Width: 1.125rem; + /** Font size for compact step icon */ + --pf-v5-c-progress-stepper--m-compact__step-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem); + /** Font size for compact step title */ + --pf-v5-c-progress-stepper--m-compact__step-title--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + /** Font weight for compact step title */ + --pf-v5-c-progress-stepper--m-compact__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400); + /** Top margin for compact pficon */ + --pf-v5-c-progress-stepper--m-compact__pficon--MarginTop: 2px; + /** Top margin for compact exclamation triangle icon */ + --pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop: -3px; + /** Left position for centered step connector pseudo-element */ + --pf-v5-c-progress-stepper--m-center__step-connector--before--Left: 50%; + /** Grid template columns for centered layout */ + --pf-v5-c-progress-stepper--m-center--GridTemplateColumns: 1fr; + /** Justify content for centered step connector */ + --pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent: center; + /** Right margin for centered step main content */ + --pf-v5-c-progress-stepper--m-center__step-main--MarginRight: var(--pf-global--spacer--xs, 0.25rem); + /** Left margin for centered step main content */ + --pf-v5-c-progress-stepper--m-center__step-main--MarginLeft: var(--pf-global--spacer--xs, 0.25rem); + /** Text alignment for centered step main content */ + --pf-v5-c-progress-stepper--m-center__step-main--TextAlign: center; + /** Right margin for centered step description */ + --pf-v5-c-progress-stepper--m-center__step-description--MarginRight: 0; + /** Left margin for centered step description */ + --pf-v5-c-progress-stepper--m-center__step-description--MarginLeft: 0; + /** Grid template rows */ + --pf-v5-c-progress-stepper--GridTemplateRows: auto 1fr; + /** Justify content for step connector */ + --pf-v5-c-progress-stepper__step-connector--JustifyContent: start; + /** Z-index for step icon */ + --pf-v5-c-progress-stepper__step-icon--ZIndex: var(--pf-global--ZIndex--xs, 100); + /** Width of the step icon */ + --pf-v5-c-progress-stepper__step-icon--Width: 1.75rem; + /** Height of the step icon */ + --pf-v5-c-progress-stepper__step-icon--Height: var(--pf-v5-c-progress-stepper__step-icon--Width); + /** Font size of the step icon */ + --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-global--FontSize--md, 1rem); + /** Color of the step icon */ + --pf-v5-c-progress-stepper__step-icon--Color: var(--pf-global--Color--100, #151515); + /** Background color of the step icon */ + --pf-v5-c-progress-stepper__step-icon--BackgroundColor: var(--pf-global--BackgroundColor--light-200, #fafafa); + /** Border width of the step icon */ + --pf-v5-c-progress-stepper__step-icon--BorderWidth: var(--pf-global--BorderWidth--md, 2px); + /** Border color of the step icon */ + --pf-v5-c-progress-stepper__step-icon--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2); + /** Top margin for pficon */ + --pf-v5-c-progress-stepper__pficon--MarginTop: 3px; + /** Top margin for exclamation triangle icon */ + --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: -5px; + /** Color of the step title */ + --pf-v5-c-progress-stepper__step-title--Color: var(--pf-global--Color--100, #151515); + /** Text alignment of the step title */ + --pf-v5-c-progress-stepper__step-title--TextAlign: left; + /** Font size of the step title */ + --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-global--FontSize--md, 1rem); + /** Font weight of the step title */ + --pf-v5-c-progress-stepper__step-title--FontWeight: var(--pf-global--FontWeight--normal, 400); + /** Font weight for current step title */ + --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-global--FontWeight--bold, 700); + /** Color for current step title */ + --pf-v5-c-progress-stepper__step--m-current__step-title--Color: var(--pf-global--Color--100, #151515); + /** Color for pending step title */ + --pf-v5-c-progress-stepper__step--m-pending__step-title--Color: var(--pf-global--Color--200, #6a6e73); + /** Color for danger step title */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--Color: var(--pf-global--danger-color--100, #c9190b); + /** Text decoration color for help text step title */ + --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200, #8a8d90); + /** Text decoration thickness for help text step title */ + --pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm, 1px); + /** Text underline offset for help text step title */ + --pf-v5-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset: 0.25rem; + /** Text decoration color for help text step title on hover */ + --pf-v5-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100, #151515); + /** Text decoration color for help text step title on focus */ + --pf-v5-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100, #151515); + /** Color for help text step title on hover */ + --pf-v5-c-progress-stepper__step-title--m-help-text--hover--Color: var(--pf-global--Color--100, #151515); + /** Color for help text step title on focus */ + --pf-v5-c-progress-stepper__step-title--m-help-text--focus--Color: var(--pf-global--Color--100, #151515); + /** Color for danger help text step title on hover */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color: var(--pf-global--danger-color--200, #a30000); + /** Color for danger help text step title on focus */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color: var(--pf-global--danger-color--200, #a30000); + /** Text decoration color for danger help text step title */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor: var(--pf-global--danger-color--100, #c9190b); + /** Text decoration color for danger help text step title on hover */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor: var(--pf-global--danger-color--200, #a30000); + /** Text decoration color for danger help text step title on focus */ + --pf-v5-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecoerationColor: var(--pf-global--danger-color--200, #a30000); + /** Top margin for step description */ + --pf-v5-c-progress-stepper__step-description--MarginTop: var(--pf-global--spacer--xs, 0.25rem); + /** Font size of the step description */ + --pf-v5-c-progress-stepper__step-description--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + /** Color of the step description */ + --pf-v5-c-progress-stepper__step-description--Color: var(--pf-global--Color--200, #6a6e73); + /** Text alignment of the step description */ + --pf-v5-c-progress-stepper__step-description--TextAlign: left; + /** Grid auto flow (defaults to vertical) */ + --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow); + /** Grid template columns (defaults to vertical) */ + --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns); + /** Top position for step connector pseudo-element (defaults to vertical) */ + --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top); + --pf-v5-c-progress-stepper__step-connector--before--Left: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left); + --pf-v5-c-progress-stepper__step-connector--before--Width: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width); + --pf-v5-c-progress-stepper__step-connector--before--Height: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor); + --pf-v5-c-progress-stepper__step-connector--before--Transform: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform); + --pf-v5-c-progress-stepper__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop); + --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight); + --pf-v5-c-progress-stepper__step-main--MarginBottom: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom); + --pf-v5-c-progress-stepper__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft); + --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns); + --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow); + --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom); + --pf-v5-c-progress-stepper--m-center__step-connector--before--Content: none; + --pf-v5-c-progress-stepper--m-center__step-main--before--Content: ''; + --pf-v5-c-progress-stepper__step-connector--before--Content: ''; + --pf-v5-c-progress-stepper__step-main--before--Content: none; + position: relative; + display: grid; + grid-auto-flow: var(--pf-v5-c-progress-stepper--GridAutoFlow); + grid-template-columns: var(--pf-v5-c-progress-stepper--GridTemplateColumns); + grid-template-rows: var(--pf-v5-c-progress-stepper--GridTemplateRows); + grid-auto-columns: 1fr; +} + +@media (min-width: 768px) { + :host { + --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-horizontal--GridAutoFlow, column); + --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-horizontal--GridTemplateColumns, initial); + --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Top); + --pf-v5-c-progress-stepper__step-connector--before--Left: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Left); + --pf-v5-c-progress-stepper__step-connector--before--Width: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Width); + --pf-v5-c-progress-stepper__step-connector--before--Height: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Height); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor); + --pf-v5-c-progress-stepper__step-connector--before--Transform: var(--pf-v5-c-progress-stepper--m-horizontal__step-connector--before--Transform); + --pf-v5-c-progress-stepper__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginTop); + --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginRight); + --pf-v5-c-progress-stepper__step-main--MarginBottom: var(--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginBottom); + --pf-v5-c-progress-stepper__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-horizontal__step-main--MarginLeft); + --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns); + --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow); + --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-v5-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom); + --pf-v5-c-progress-stepper__step-connector--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Content); + --pf-v5-c-progress-stepper__step-main--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-main--before--Content); + --pf-v5-c-progress-stepper--m-center__step-connector--before--Content: ''; + --pf-v5-c-progress-stepper--m-center__step-main--before--Content: none; + } +} + +:host([center]) { + --pf-v5-c-progress-stepper__step-connector--JustifyContent: var(--pf-v5-c-progress-stepper--m-center__step-connector--JustifyContent); + --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-center__step-main--MarginRight); + --pf-v5-c-progress-stepper__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-center__step-main--MarginLeft); + --pf-v5-c-progress-stepper--step-main--TextAlign: var(--pf-v5-c-progress-stepper--m-center__step-main--TextAlign, auto); + --pf-v5-c-progress-stepper__step-title--TextAlign: var(--pf-v5-c-progress-stepper--m-center__step-title--TextAlign, auto); + --pf-v5-c-progress-stepper__step-description--MarginRight: var(--pf-v5-c-progress-stepper--m-center__step-description--MarginRight); + --pf-v5-c-progress-stepper__step-description--MarginLeft: var(--pf-v5-c-progress-stepper--m-center__step-description--MarginLeft); + --pf-v5-c-progress-stepper__step-description--TextAlign: var(--pf-v5-c-progress-stepper--m-center__step-description--TextAlign, auto); + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginRight); + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft); + --pf-v5-c-progress-stepper__step-connector--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Content); + --pf-v5-c-progress-stepper__step-main--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-main--before--Content); + --pf-v5-c-progress-stepper__step-connector--before--Left: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left); + + grid-template-columns: var(--pf-v5-c-progress-stepper--m-center--GridTemplateColumns); +} + +:host([center]:not([compact])) { + --pf-v5-c-progress-stepper__step-main--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-main--before--Content); + --pf-v5-c-progress-stepper__step-connector--before--Content: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Content); +} + +:host([vertical]) ::slotted(pf-v5-progress-step) { + flex-direction: row; + align-items: flex-start; +} + +:host([vertical]) { + --pf-v5-c-progress-stepper--GridAutoFlow: var(--pf-v5-c-progress-stepper--m-vertical--GridAutoFlow); + --pf-v5-c-progress-stepper--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--GridTemplateColumns); + --pf-v5-c-progress-stepper__step-connector--before--Top: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Top); + --pf-v5-c-progress-stepper__step-connector--before--Left: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Left); + --pf-v5-c-progress-stepper__step-connector--before--Width: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Width); + --pf-v5-c-progress-stepper__step-connector--before--Height: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Height); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightWidth: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderRightColor: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomWidth: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth); + --pf-v5-c-progress-stepper__step-connector--before--BorderBottomColor: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor); + --pf-v5-c-progress-stepper__step-connector--before--Transform: var(--pf-v5-c-progress-stepper--m-vertical__step-connector--before--Transform); + --pf-v5-c-progress-stepper__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginTop); + --pf-v5-c-progress-stepper__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight); + --pf-v5-c-progress-stepper__step-main--MarginBottom: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginBottom); + --pf-v5-c-progress-stepper__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft); + --pf-v5-c-progress-stepper--m-compact--GridTemplateColumns: var(--pf-v5-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns); + --pf-v5-c-progress-stepper--m-compact__step-connector--GridRow: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow); + --pf-v5-c-progress-stepper--m-compact__step-connector--PaddingBottom: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom); + --pf-v5-c-progress-stepper__step-connector--before--Content: ''; + --pf-v5-c-progress-stepper__step-main--before--Content: none; + --pf-v5-c-progress-stepper--m-center__step-connector--before--Content: none; + --pf-v5-c-progress-stepper--m-center__step-main--before--Content: ''; + --pf-v5-c-progress-stepper__step-main--Position: relative; +} + +:host([vertical][center]) { + --pf-v5-c-progress-stepper__step-connector--before--Left: var(--pf-v5-c-progress-stepper--m-center__step-connector--before--Left); +} + +:host([compact]) { + --pf-v5-c-progress-stepper__step-main--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginTop); + --pf-v5-c-progress-stepper__step-main--MarginBottom: var(--pf-v5-c-progress-stepper--m-compact__step-main--MarginBottom); + --pf-v5-c-progress-stepper__step-icon--Width: var(--pf-v5-c-progress-stepper--m-compact__step-icon--Width); + --pf-v5-c-progress-stepper__step-icon--FontSize: var(--pf-v5-c-progress-stepper--m-compact__step-icon--FontSize); + --pf-v5-c-progress-stepper__step-title--FontSize: var(--pf-v5-c-progress-stepper--m-compact__step-title--FontSize); + --pf-v5-c-progress-stepper__step--m-current__step-title--FontWeight: var(--pf-v5-c-progress-stepper--m-compact__step-title--FontWeight); + --pf-v5-c-progress-stepper__pficon--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__pficon--MarginTop); + --pf-v5-c-progress-stepper__fa-exclamation-triangle--MarginTop: var(--pf-v5-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop); + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginLeft: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginLeft); + --pf-v5-c-progress-stepper--m-vertical__step-main--MarginRight: var(--pf-v5-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight); + display: inline-grid; + grid-template-columns: var(--pf-v5-c-progress-stepper--m-compact--GridTemplateColumns); + grid-auto-flow: var(--pf-v5-c-progress-stepper--m-compact--GridAutoFlow); +} diff --git a/elements/pf-progress-stepper/pf-progress-stepper.ts b/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.ts similarity index 71% rename from elements/pf-progress-stepper/pf-progress-stepper.ts rename to elements/pf-v5-progress-stepper/pf-v5-progress-stepper.ts index e82097e188..ff4eb936eb 100644 --- a/elements/pf-progress-stepper/pf-progress-stepper.ts +++ b/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.ts @@ -2,20 +2,20 @@ import { LitElement, html, type PropertyValues, type TemplateResult } from 'lit' import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; -import style from './pf-progress-stepper.css'; +import style from './pf-v5-progress-stepper.css'; -import { PfProgressStep } from './pf-progress-step.js'; +import { PfV5ProgressStep } from './pf-v5-progress-step.js'; import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; -import '@patternfly/elements/pf-icon/pf-icon.js'; +import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js'; /** * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow. * @alias Progress Stepper */ -@customElement('pf-progress-stepper') -export class PfProgressStepper extends LitElement { - protected static childTagName = 'pf-progress-step'; +@customElement('pf-v5-progress-stepper') +export class PfV5ProgressStepper extends LitElement { + protected static childTagName = 'pf-v5-progress-step'; static readonly styles: CSSStyleSheet[] = [style]; @@ -38,10 +38,10 @@ export class PfProgressStepper extends LitElement { #mo = new MutationObserver(() => this.#onMutation()); get value(): number { - const { childTagName } = (this.constructor as typeof PfProgressStepper); - const steps = this.querySelectorAll?.(childTagName) ?? []; + const { childTagName } = (this.constructor as typeof PfV5ProgressStepper); + const steps = this.querySelectorAll?.(childTagName) ?? []; const current = this.querySelector?.(`${childTagName}[current]`); - const n = Array.from(steps).indexOf(current as PfProgressStep) + 1; + const n = Array.from(steps).indexOf(current as PfV5ProgressStep) + 1; return (n / steps.length) * 100; } @@ -62,13 +62,13 @@ export class PfProgressStepper extends LitElement { updated(changed: PropertyValues): void { if (changed.has('compact')) { - this.querySelectorAll?.('pf-progress-step').forEach(step => step.requestUpdate()); + this.querySelectorAll?.('pf-v5-progress-step').forEach(step => step.requestUpdate()); } } } declare global { interface HTMLElementTagNameMap { - 'pf-progress-stepper': PfProgressStepper; + 'pf-v5-progress-stepper': PfV5ProgressStepper; } } diff --git a/elements/pf-progress-stepper/test/pf-progress-stepper.e2e.ts b/elements/pf-v5-progress-stepper/test/pf-progress-stepper.e2e.ts similarity index 94% rename from elements/pf-progress-stepper/test/pf-progress-stepper.e2e.ts rename to elements/pf-v5-progress-stepper/test/pf-progress-stepper.e2e.ts index c218f62249..9686044a19 100644 --- a/elements/pf-progress-stepper/test/pf-progress-stepper.e2e.ts +++ b/elements/pf-v5-progress-stepper/test/pf-progress-stepper.e2e.ts @@ -2,7 +2,7 @@ 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-progress-stepper'; +const tagName = 'pf-v5-progress-stepper'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-v5-progress-stepper/test/pf-progress-stepper.spec.ts b/elements/pf-v5-progress-stepper/test/pf-progress-stepper.spec.ts new file mode 100644 index 0000000000..dec24386de --- /dev/null +++ b/elements/pf-v5-progress-stepper/test/pf-progress-stepper.spec.ts @@ -0,0 +1,21 @@ +import { html, expect } from '@open-wc/testing'; + +import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; + +import { PfV5ProgressStepper } from '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js'; +import { PfV5ProgressStep } from '../pf-v5-progress-step.js'; + +describe('', function() { + it('imperatively instantiates', function() { + expect(document.createElement('pf-v5-progress-stepper')).to.be.an.instanceof(PfV5ProgressStepper); + expect(document.createElement('pf-v5-progress-step')).to.be.an.instanceof(PfV5ProgressStep); + }); + + it('it should upgrade', async function() { + const el = await createFixture(html``); + expect(el) + .to.be.an.instanceOf(customElements.get('pf-v5-progress-stepper')) + .and + .to.be.an.instanceOf(PfV5ProgressStepper); + }); +}); diff --git a/elements/pf-progress/README.md b/elements/pf-v5-progress/README.md similarity index 65% rename from elements/pf-progress/README.md rename to elements/pf-v5-progress/README.md index b03913e672..688ff7ecbb 100644 --- a/elements/pf-progress/README.md +++ b/elements/pf-v5-progress/README.md @@ -6,10 +6,10 @@ Read more about Progress in the [PatternFly Elements Progress documentation][doc ## Installation -Load `` via CDN: +Load `` via CDN: ```html - + ``` Or, if you are using [NPM](https://npm.im), install it @@ -21,13 +21,13 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-progress/pf-progress.js'; +import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js'; ``` ## Usage ```html - + ``` [docs]: https://patternflyelements.org/components/progress diff --git a/elements/pf-v5-progress/demo/index.html b/elements/pf-v5-progress/demo/index.html new file mode 100644 index 0000000000..6707c5b632 --- /dev/null +++ b/elements/pf-v5-progress/demo/index.html @@ -0,0 +1,5 @@ + + + diff --git a/elements/pf-progress/demo/kitchen-sink.css b/elements/pf-v5-progress/demo/kitchen-sink.css similarity index 74% rename from elements/pf-progress/demo/kitchen-sink.css rename to elements/pf-v5-progress/demo/kitchen-sink.css index 6271c537ff..ccd286b44c 100644 --- a/elements/pf-progress/demo/kitchen-sink.css +++ b/elements/pf-v5-progress/demo/kitchen-sink.css @@ -1,4 +1,4 @@ -pf-progress { +pf-v5-progress { padding-bottom: 0.25rem; display: block; } \ No newline at end of file diff --git a/elements/pf-v5-progress/demo/kitchen-sink.html b/elements/pf-v5-progress/demo/kitchen-sink.html new file mode 100644 index 0000000000..ca3b20d5ab --- /dev/null +++ b/elements/pf-v5-progress/demo/kitchen-sink.html @@ -0,0 +1,141 @@ + + + +

pf-v5-progress

+ +

Default States

+ + + +

Value

+ + +

Description

+ + +

Aria-label

+ + +

Max

+ + +

Min

+ + +

Size (sm, lg)

+ + + +

Measure Location (Inside, Outside, None)

+ + + + +

Variant (Sucess, danger, warning)

+ + + + +

Variant (Success, Danger, Warning) and Size (sm, lg)

+ + + + + + + +

Variant (Success, Danger, Warning) and Measure Location (Inside, Outside, None)

+ + + + + + + + + + +

Variant (Success, Danger, Warning), Size (sm, lg) and Measure Location (Inside, Outside, None)

+ + + + + + + + + + + + + + + + + + + +

Label w/ no description

+ +

Value

+ + + + +

Size (sm, lg)

+ + + + + + + +

Measure Location (Inside, Outside)

+ + + + + + + +

Variant (Sucess, danger, warning)

+ + + + + + + + + + +

Variant (Success, Danger, Warning) and Size (sm, lg)

+ + + + + + + + + + + + + + + + + + + +

Truncated description

+ + + diff --git a/elements/pf-progress/demo/truncated-description.html b/elements/pf-v5-progress/demo/truncated-description.html similarity index 73% rename from elements/pf-progress/demo/truncated-description.html rename to elements/pf-v5-progress/demo/truncated-description.html index 72d7e9f0f3..ab77ce90a0 100644 --- a/elements/pf-progress/demo/truncated-description.html +++ b/elements/pf-v5-progress/demo/truncated-description.html @@ -1,20 +1,20 @@
- + >
diff --git a/elements/pf-progress/docs/pf-progress.md b/elements/pf-v5-progress/docs/pf-progress.md similarity index 72% rename from elements/pf-progress/docs/pf-progress.md rename to elements/pf-v5-progress/docs/pf-progress.md index 5214bf4444..e66c25db5e 100644 --- a/elements/pf-progress/docs/pf-progress.md +++ b/elements/pf-v5-progress/docs/pf-progress.md @@ -1,38 +1,38 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - + {% endrenderOverview %} {% band header="Usage" %} ### Success variant {% htmlexample %} - + {% endhtmlexample %} ### Inside measurement {% htmlexample %} - + {% endhtmlexample %} ### Large size {% htmlexample %} - + {% endhtmlexample %} ### Inside measurement {% htmlexample %} - + {% endhtmlexample %} ### Truncated Description {% htmlexample %} - + > {% endhtmlexample %} {% endband %} diff --git a/elements/pf-progress/pf-progress.css b/elements/pf-v5-progress/pf-v5-progress.css similarity index 52% rename from elements/pf-progress/pf-progress.css rename to elements/pf-v5-progress/pf-v5-progress.css index dd32a0e915..2088aefb98 100644 --- a/elements/pf-progress/pf-progress.css +++ b/elements/pf-v5-progress/pf-v5-progress.css @@ -9,63 +9,63 @@ --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33; /* WARNING: not a recognized token value */ /** Gap between sections of progress bar */ - --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem); + --pf-v5-c-progress--GridGap: var(--pf-global--spacer--md, 1rem); /** Color of progress bar */ - --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc); + --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc); /** Height of progress bar */ - --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem); + --pf-v5-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem); /** Background color of progress bar */ - --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff); + --pf-v5-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff); /** Color of status icon */ - --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515); /** Margin left of status icon */ - --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem); /** Height of progress bar indicator */ - --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height); + --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress__bar--Height); /** Background color of progress bar indicator */ - --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor); + --pf-v5-c-progress__indicator--BackgroundColor: var(--pf-v5-c-progress__bar--before--BackgroundColor); /** Background color of progress bar when variant is success */ - --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635); /** Background color of progress bar when variant is warning */ - --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00); /** Background color of progress bar when variant is danger */ - --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b); /** Color of status icon when variant is success */ - --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635); /** Color of status icon when variant is warning */ - --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00); /** Color of status icon when variant is danger */ - --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b); /** Color of progress bar measure when variant is success and measure location is inside */ - --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff); + --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff); /** Font size of progress bar measure when measure location is outside */ - --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + --pf-v5-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Height of progress bar when size is small */ - --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem); /** Font size of progress bar description when size is small */ - --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + --pf-v5-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem); /** Height of progress bar when size is large */ - --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem); + --pf-v5-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem); display: grid; align-items: end; - grid-gap: var(--pf-c-progress--GridGap); + grid-gap: var(--pf-v5-c-progress--GridGap); grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; width: 100%; } .sm { - --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height); - --pf-c-progress__indicator--Height: var(--pf-c-progress--m-sm__bar--Height); + --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-sm__bar--Height); + --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress--m-sm__bar--Height); } .sm #description { - font-size: var(--pf-c-progress--m-sm__description--FontSize); + font-size: var(--pf-v5-c-progress--m-sm__description--FontSize); } .lg { - --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height); - --pf-c-progress__indicator--Height: var(--pf-c-progress--m-lg__bar--Height); + --pf-v5-c-progress__bar--Height: var(--pf-v5-c-progress--m-lg__bar--Height); + --pf-v5-c-progress__indicator--Height: var(--pf-v5-c-progress--m-lg__bar--Height); } .outside #description { @@ -81,7 +81,7 @@ .outside progress, .outside span { display: inline-block; - font-size: var(--pf-c-progress--m-outside__measure--FontSize); + font-size: var(--pf-v5-c-progress--m-outside__measure--FontSize); grid-column: 1/2; } @@ -110,21 +110,21 @@ } #container.success { - --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor); + --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-success__bar--BackgroundColor); --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity); - --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color); + --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-success__status-icon--Color); } #container.warning { - --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor); + --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-warning__bar--BackgroundColor); --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity); - --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color); + --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-warning__status-icon--Color); } #container.danger { - --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor); + --pf-v5-c-progress__bar--before--BackgroundColor: var(--pf-v5-c-progress--m-danger__bar--BackgroundColor); --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity); - --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color); + --pf-v5-c-progress__status-icon--Color: var(--pf-v5-c-progress--m-danger__status-icon--Color); } #description { @@ -148,9 +148,9 @@ justify-content: end; } -pf-icon { - margin-left: var(--pf-c-progress__status-icon--MarginLeft); - color: var(--pf-c-progress__status-icon--Color); +pf-v5-icon { + margin-left: var(--pf-v5-c-progress__status-icon--MarginLeft); + color: var(--pf-v5-c-progress__status-icon--Color); } progress { @@ -158,21 +158,21 @@ progress { grid-column: 1/3; grid-row: 2/3; align-self: center; - height: var(--pf-c-progress__bar--Height); - background-color: var(--pf-c-progress__bar--BackgroundColor); + height: var(--pf-v5-c-progress__bar--Height); + background-color: var(--pf-v5-c-progress__bar--BackgroundColor); } .indicator { position: absolute; top: 0; left: 0; - height: var(--pf-c-progress__indicator--Height); - background-color: var(--pf-c-progress__indicator--BackgroundColor); + height: var(--pf-v5-c-progress__indicator--Height); + background-color: var(--pf-v5-c-progress__indicator--BackgroundColor); } .indicator { width: 100%; - height: var(--pf-c-progress__bar--Height); + height: var(--pf-v5-c-progress__bar--Height); display: block; } @@ -181,7 +181,7 @@ span { grid-column: 1/3; grid-row: 2/3; text-align: center; - color: var(--pf-c-progress--m-success--m-inside__measure--Color); + color: var(--pf-v5-c-progress--m-success--m-inside__measure--Color); } span::after { @@ -198,7 +198,7 @@ progress[value] { background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity); width: 100%; - height: var(--pf-c-progress__bar--Height); + height: var(--pf-v5-c-progress__bar--Height); } progress:not([value]) { @@ -212,18 +212,18 @@ progress[value]::-webkit-progress-bar { } progress[value]::-moz-progress-bar { - background: var(--pf-c-progress__bar--before--BackgroundColor); + background: var(--pf-v5-c-progress__bar--before--BackgroundColor); } progress[value]::-webkit-progress-value { background-size: 100% 100%; background-image: linear-gradient( 90deg, - var(--pf-c-progress__bar--before--BackgroundColor) 100%, - var(--pf-c-progress__bar--before--BackgroundColor) 100% + var(--pf-v5-c-progress__bar--before--BackgroundColor) 100%, + var(--pf-v5-c-progress__bar--before--BackgroundColor) 100% ); } -pf-tooltip { +pf-v5-tooltip { height: 0.01px; } diff --git a/elements/pf-progress/pf-progress.ts b/elements/pf-v5-progress/pf-v5-progress.ts similarity index 89% rename from elements/pf-progress/pf-progress.ts rename to elements/pf-v5-progress/pf-v5-progress.ts index 973b8d02d9..2791b1601c 100644 --- a/elements/pf-progress/pf-progress.ts +++ b/elements/pf-v5-progress/pf-v5-progress.ts @@ -6,7 +6,7 @@ import { property } from 'lit/decorators/property.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; -import styles from './pf-progress.css'; +import styles from './pf-v5-progress.css'; const ICONS = new Map(Object.entries({ success: { icon: 'circle-check' }, @@ -19,8 +19,8 @@ const ICONS = new Map(Object.entries({ * @summary Display completion status of ongoing process or task. * @alias Progress */ -@customElement('pf-progress') -export class PfProgress extends LitElement { +@customElement('pf-v5-progress') +export class PfV5Progress extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; #internals = this.attachInternals(); @@ -71,10 +71,10 @@ export class PfProgress extends LitElement { this.#internals.ariaValueNow = this.#calculatedPercentage.toString(); } if (this.#icon) { - import('@patternfly/elements/pf-icon/pf-icon.js'); + import('@patternfly/elements/pf-v5-icon/pf-v5-icon.js'); } if (this.descriptionTruncated) { - import('@patternfly/elements/pf-tooltip/pf-tooltip.js'); + import('@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js'); } } @@ -97,18 +97,18 @@ export class PfProgress extends LitElement { ${!descriptionTruncated ? '' : html` - + `} ${measureLocation === 'none' ? '' : html` `} @@ -131,6 +131,6 @@ export class PfProgress extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-progress': PfProgress; + 'pf-v5-progress': PfV5Progress; } } diff --git a/elements/pf-progress/test/pf-progress.e2e.ts b/elements/pf-v5-progress/test/pf-progress.e2e.ts similarity index 95% rename from elements/pf-progress/test/pf-progress.e2e.ts rename to elements/pf-v5-progress/test/pf-progress.e2e.ts index 2da4cdda68..5aa242fb07 100644 --- a/elements/pf-progress/test/pf-progress.e2e.ts +++ b/elements/pf-v5-progress/test/pf-progress.e2e.ts @@ -2,7 +2,7 @@ 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-progress'; +const tagName = 'pf-v5-progress'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-progress/test/pf-progress.spec.ts b/elements/pf-v5-progress/test/pf-progress.spec.ts similarity index 57% rename from elements/pf-progress/test/pf-progress.spec.ts rename to elements/pf-v5-progress/test/pf-progress.spec.ts index 3265c59949..bc0b45a15f 100644 --- a/elements/pf-progress/test/pf-progress.spec.ts +++ b/elements/pf-v5-progress/test/pf-progress.spec.ts @@ -1,21 +1,21 @@ import { expect, html, fixture } from '@open-wc/testing'; -import { PfProgress } from '@patternfly/elements/pf-progress/pf-progress.js'; +import { PfV5Progress } from '@patternfly/elements/pf-v5-progress/pf-v5-progress.js'; -describe('', function() { - let element: PfProgress; +describe('', function() { + let element: PfV5Progress; beforeEach(async function() { - element = await fixture(html` - (html` + - + `); }); it('should upgrade', async function() { - const klass = customElements.get('pf-progress'); - expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfProgress); + const klass = customElements.get('pf-v5-progress'); + expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfV5Progress); }); it('should be accessible', async function() { @@ -23,17 +23,17 @@ describe('', function() { }); it('should set the correct value on the progress bar', async function() { - const element = await fixture(html` - - + const element = await fixture(html` + + `); expect(element.value).to.equal(33); }); it('should set the correct title on the progress bar', async function() { - const element = await fixture(html` - - + const element = await fixture(html` + + `); expect(element.title).to.equal('Progress title'); }); @@ -42,9 +42,9 @@ describe('', function() { const max = Math.floor(Math.random() * 100); const value = Math.floor(Math.random() * (max)); - const element = await fixture(html` - - + const element = await fixture(html` + + `); expect(element.value).to.equal(value); expect(element.max).to.equal(max); diff --git a/elements/pf-search-input/README.md b/elements/pf-v5-search-input/README.md similarity index 61% rename from elements/pf-search-input/README.md rename to elements/pf-v5-search-input/README.md index 3b4180e2ce..4310350042 100644 --- a/elements/pf-search-input/README.md +++ b/elements/pf-v5-search-input/README.md @@ -5,11 +5,11 @@ A search input lets users type in words to find specific items or information. A A search input consists of a text field where users can type to find specific content or items. Unlike selects or dropdowns, which offer predefined options, a search input lets users enter their own keywords to filter or locate results. It includes a clear (×) button to easily remove the current input, allowing users to start a new search quickly. ```html - - Alabama - New Jersey - New York - New Mexico - North Carolina - + + Alabama + New Jersey + New York + New Mexico + North Carolina + ``` diff --git a/elements/pf-v5-search-input/demo/disabled.html b/elements/pf-v5-search-input/demo/disabled.html new file mode 100644 index 0000000000..6db81b0db3 --- /dev/null +++ b/elements/pf-v5-search-input/demo/disabled.html @@ -0,0 +1,34 @@ +
+
+ + Blue + Green + Magenta + Orange + Purple + Periwinkle + Pink + Red + Yellow + + Search +
+
+ + + + \ No newline at end of file diff --git a/elements/pf-v5-search-input/demo/index.html b/elements/pf-v5-search-input/demo/index.html new file mode 100644 index 0000000000..94abec8be0 --- /dev/null +++ b/elements/pf-v5-search-input/demo/index.html @@ -0,0 +1,42 @@ +
+ + What is Red Hat Enterprise Linux? + How does Red Hat OpenShift work? + Why use Red Hat Ansible for automation? + Where can Red Hat OpenShift be deployed? + When should you use Red Hat Enterprise Linux? + What is Red Hat Satellite? + How does Red Hat integrate with AWS and other clouds? + Why choose Red Hat over other Linux vendors? + Where can I learn Red Hat technologies? + When does support end for RHEL versions? + What are Red Hat certifications? + How do you secure a RHEL server? + Why use OpenShift instead of vanilla Kubernetes? + Where is Red Hat headquartered? + When should you use Red Hat CoreOS? + What is Red Hat Insights? + How do you manage Red Hat subscriptions? + Why is RHEL considered enterprise-grade? + Where can I download RHEL for testing? + When was Red Hat founded? + +
+ + + + \ No newline at end of file diff --git a/elements/pf-v5-search-input/demo/pf-search-input-with-submit.html b/elements/pf-v5-search-input/demo/pf-search-input-with-submit.html new file mode 100644 index 0000000000..563212ff17 --- /dev/null +++ b/elements/pf-v5-search-input/demo/pf-search-input-with-submit.html @@ -0,0 +1,62 @@ +
+
+ + Alabama + New Jersey + New York + New Mexico + North Carolina + Alabama 1 + New Jersey 1 + New York 1 + New Mexico 1 + North Carolina 1 + Alabama 2 + New Jersey 2 + New York 2 + New Mexico 2 + North Carolina 2 + Alabama 3 + New Jersey 3 + New York 3 + New Mexico 3 + North Carolina 3 + + Search +
+
+ + + + + \ No newline at end of file diff --git a/elements/pf-search-input/docs/pf-search-input.md b/elements/pf-v5-search-input/docs/pf-search-input.md similarity index 61% rename from elements/pf-search-input/docs/pf-search-input.md rename to elements/pf-v5-search-input/docs/pf-search-input.md index 9a37f81ec5..6b84d6d1f3 100644 --- a/elements/pf-search-input/docs/pf-search-input.md +++ b/elements/pf-v5-search-input/docs/pf-search-input.md @@ -1,24 +1,24 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - - Blue - Black - Brown - Bronze - Green - Magenta - Orange - Purple - Periwinkle - Pink - Red - Yellow - + + Blue + Black + Brown + Bronze + Green + Magenta + Orange + Purple + Periwinkle + Pink + Red + Yellow + {% endrenderOverview %} {% band header="Usage" %} @@ -26,17 +26,17 @@ import '@patternfly/elements/pf-search-input/pf-search-input.js'; #### Search Input {% htmlexample %} - {% renderFile "./elements/pf-search-input/demo/index.html" %} + {% renderFile "./elements/pf-v5-search-input/demo/index.html" %} {% endhtmlexample %} #### Search Input Form {% htmlexample %} - {% renderFile "./elements/pf-search-input/demo/pf-search-input-with-submit.html" %} + {% renderFile "./elements/pf-v5-search-input/demo/pf-v5-search-input-with-submit.html" %} {% endhtmlexample %} #### Disabled {% htmlexample %} - {% renderFile "./elements/pf-search-input/demo/disabled.html" %} + {% renderFile "./elements/pf-v5-search-input/demo/disabled.html" %} {% endhtmlexample %} {% endband %} @@ -76,16 +76,16 @@ Listbox options use the [APG's Roving tabindex](https://www.w3.org/WAI/ARIA/apg/ {% endband %} -{% renderSlots for="pf-search-input", header="Slots on `pf-search-input`" %}{% endrenderSlots %} -{% renderAttributes for="pf-search-input", header="Attributes on `pf-search-input`" %}{% endrenderAttributes %} -{% renderMethods for="pf-search-input", header="Methods on `pf-search-input`" %}{% endrenderMethods %} -{% renderEvents for="pf-search-input", header="Events on `pf-search-input`" %}{% endrenderEvents %} -{% renderCssCustomProperties for="pf-search-input", header="CSS Custom Properties on `pf-search-input`" %}{% endrenderCssCustomProperties %} -{% renderCssParts for="pf-search-input", header="CSS Parts on `pf-search-input`" %}{% endrenderCssParts %} - -{% renderSlots for="pf-option", header="Slots on `pf-option`" %}{% endrenderSlots %} -{% renderAttributes for="pf-option", header="Attributes on `pf-option`" %}{% endrenderAttributes %} -{% renderMethods for="pf-option", header="Methods on `pf-option`" %}{% endrenderMethods %} -{% renderEvents for="pf-option", header="Events on `pf-option`" %}{% endrenderEvents %} -{% renderCssCustomProperties for="pf-option", header="CSS Custom Properties on `pf-option`" %}{% endrenderCssCustomProperties %} -{% renderCssParts for="pf-option", header="CSS Parts on `pf-option`" %}{% endrenderCssParts %} +{% renderSlots for="pf-v5-search-input", header="Slots on `pf-v5-search-input`" %}{% endrenderSlots %} +{% renderAttributes for="pf-v5-search-input", header="Attributes on `pf-v5-search-input`" %}{% endrenderAttributes %} +{% renderMethods for="pf-v5-search-input", header="Methods on `pf-v5-search-input`" %}{% endrenderMethods %} +{% renderEvents for="pf-v5-search-input", header="Events on `pf-v5-search-input`" %}{% endrenderEvents %} +{% renderCssCustomProperties for="pf-v5-search-input", header="CSS Custom Properties on `pf-v5-search-input`" %}{% endrenderCssCustomProperties %} +{% renderCssParts for="pf-v5-search-input", header="CSS Parts on `pf-v5-search-input`" %}{% endrenderCssParts %} + +{% renderSlots for="pf-v5-option", header="Slots on `pf-v5-option`" %}{% endrenderSlots %} +{% renderAttributes for="pf-v5-option", header="Attributes on `pf-v5-option`" %}{% endrenderAttributes %} +{% renderMethods for="pf-v5-option", header="Methods on `pf-v5-option`" %}{% endrenderMethods %} +{% renderEvents for="pf-v5-option", header="Events on `pf-v5-option`" %}{% endrenderEvents %} +{% renderCssCustomProperties for="pf-v5-option", header="CSS Custom Properties on `pf-v5-option`" %}{% endrenderCssCustomProperties %} +{% renderCssParts for="pf-v5-option", header="CSS Parts on `pf-v5-option`" %}{% endrenderCssParts %} diff --git a/elements/pf-search-input/docs/screenshot.png b/elements/pf-v5-search-input/docs/screenshot.png similarity index 100% rename from elements/pf-search-input/docs/screenshot.png rename to elements/pf-v5-search-input/docs/screenshot.png diff --git a/elements/pf-v5-search-input/pf-v5-search-input.css b/elements/pf-v5-search-input/pf-v5-search-input.css new file mode 100644 index 0000000000..faf2fcbd6f --- /dev/null +++ b/elements/pf-v5-search-input/pf-v5-search-input.css @@ -0,0 +1,308 @@ +:host { + font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif); + font-size: var(--pf-global--FontSize--md, 16px); + font-weight: var(--pf-global--FontWeight--normal, 400); + color: var(--pf-global--Color--100, #151515); + --_pf-option-checkboxes-display: none; + --_pf-option-svg-display: block; + --pf-v5-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem); + --pf-v5-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem); + --pf-v5-c-search-input__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-search-input__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px); + --pf-v5-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem); + --pf-v5-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400); + --pf-v5-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5); + --pf-v5-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); + --pf-v5-c-search-input__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-v5-c-search-input__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-v5-c-search-input__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-v5-c-search-input__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-v5-c-search-input__toggle--before--BorderWidth: initial; + --pf-v5-c-search-input__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-v5-c-search-input__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-v5-c-search-input__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + --pf-v5-c-search-input__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-v5-c-search-input__toggle--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-search-input__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c); + --pf-v5-c-search-input__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c); + --pf-v5-c-search-input__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c); + --pf-v5-c-search-input__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c); + --pf-v5-c-search-input__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0); + --pf-v5-c-search-input__toggle--m-plain--before--BorderColor: transparent; + --pf-v5-c-search-input__toggle--m-placeholder--Color: transparent; + --pf-v5-c-search-input--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b); + --pf-v5-c-search-input--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635); + --pf-v5-c-search-input--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-v5-c-search-input--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00); + --pf-v5-c-search-input__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-search-input__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem)); + --pf-v5-c-search-input__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73); + --pf-v5-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73); + --pf-v5-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem); + --pf-v5-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515); + --pf-v5-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-search-input__menu-content--MaxHeight: 20rem; +} + +:host, +#outer { + display: flex; + flex-direction: column; + align-items: stretch; + inline-size: 100%; +} + +:host([hidden]), +*[hidden] { + display: none !important; +} + +:host([aria-disabled="true"]) { + pointer-events: none; + cursor: not-allowed; +} + +#outer.disabled { + color: var(--pf-global--Color--dark-200, #6a6e73); +} + +#outer { + position: relative; +} + +#listbox-container { + display: inline-flex; + position: absolute; + background-color: var(--pf-v5-theme--color--surface--lightest, #fff) !important; + opacity: 0; + --_active-descendant-color: var(--pf-v5-theme--color--surface--lighter, #f0f0f0) !important; + box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06); +} + +#outer.expanded #listbox-container { + opacity: 1; + z-index: 9999 !important; + max-block-size: var(--pf-v5-c-search-input__menu-content--MaxHeight, 20rem); + overflow-y: scroll; +} + +#listbox { + display: flex; + flex-direction: column; + position: relative; + inline-size: 100%; +} + +#listbox slot.disabled { + color: var(--pf-v5-c-list__item-icon--Color, #6a6e73) !important; + background-color: var(--pf-v5-theme--color--surface--lighter, #f0f0f0) !important; + border-color: var(--pf-v5-theme--color--surface--lighter, #f0f0f0) !important; + pointer-events: none; + cursor: not-allowed; + + --_active-descendant-color: transparent; + --_svg-color: var(--pf-v5-c-list__item-icon--Color, #6a6e73) !important; +} + +#toggle { + background-color: var(--pf-v5-c-search-input__toggle--BackgroundColor, #fff) !important; +} + +#toggle, +#toggle-input { + display: flex; + font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif); + font-size: var(--pf-v5-c-search-input__toggle--FontSize, 1rem); + font-weight: var(--pf-v5-c-search-input__toggle--FontWeight, 400); + line-height: var(--pf-v5-c-search-input__toggle--LineHeight, 1.5); +} + +#toggle { + border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2); + border-bottom-color: var(--pf-v5-theme--color--text, #151515); + justify-content: space-between; +} + +.disabled #toggle { + color: var(--pf-global--Color--dark-200, #6a6e73) !important; + background-color: var(--pf-v5-theme--color--surface--lighter, #f0f0f0) !important; + border-color: var(--pf-v5-theme--color--surface--lighter, #f0f0f0) !important; + caret-color: transparent; +} + +#toggle-input { + background: transparent; + border: none; + text-align: left; + border-radius: 0; + padding-inline-start: 3rem; +} + +#toggle-input { + justify-content: space-between; + inline-size: 100%; + box-sizing: border-box; + block-size: 2.25rem; +} + +.disabled #toggle-input { + pointer-events: none; + cursor: not-allowed; +} + +.close-button { + --pf-v5-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-v5-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); + --pf-v5-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); + + color: currentColor; + background-color: transparent; + max-block-size: 2.25rem; + max-inline-size: 2.25rem; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + border-radius: 0px; + position: relative; + + pf-v5-icon { + position: relative; + inset-block-start: 5px; + } +} + +.close-button-container { + block-size: 2.25rem; + inline-size: 2.25rem; +} + +#toggle-text { + flex: 1 1 auto; +} + +#description { + display: block; +} + +#listbox.checkboxes { + --_pf-option-checkboxes-display: none; + --_pf-option-svg-display: none; +} + +.visually-hidden { + border: 0; + clip: rect(0, 0, 0, 0); + block-size: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + inline-size: 1px; +} + +::slotted(hr) { + --pf-v5-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px); + --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor); + --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base); + --pf-v5-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2); + --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base); + --pf-v5-c-divider--after--FlexBasis: 100%; + --pf-v5-c-divider--after--Inset: 0%; + --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%; + --pf-v5-c-divider--m-horizontal--Display: flex; + --pf-v5-c-divider--m-horizontal--FlexDirection: row; + --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height); + --pf-v5-c-divider--m-horizontal--after--Width: auto; + --pf-v5-c-divider--m-vertical--Display: inline-flex; + --pf-v5-c-divider--m-vertical--FlexDirection: column; + --pf-v5-c-divider--m-vertical--after--Height: auto; + --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base); + --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display); + --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display); + --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection); + --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width); + --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height); + display: var(--pf-v5-c-divider--Display, flex); + flex-direction: var(--pf-v5-c-divider--FlexDirection); + border: 0; + inline-size: 100%; + margin-top: var(--pf-v5-c-search-input-menu--c-divider--MarginTop); + margin-bottom: var(--pf-v5-c-search-input-menu--c-divider--MarginBottom); +} + +::slotted(hr)::after { + content: ''; + inline-size: var(--pf-v5-c-divider--after--Width, 100%) !important; + block-size: var(--pf-v5-c-divider--after--Height, 1px); + background-color: var(--pf-v5-c-divider--after--BackgroundColor); + flex: 1 0 100%; +} + +div.search-icon { + position: absolute; + inset-block-start: 50%; + inset-inline-start: var(--pf-global--spacer--md, 1rem); + transform: translateY(-50%); + display: flex; + align-items: center; +} + +#outer:focus-within { + #toggle { + border-bottom: none; + border-bottom-left-radius: 4px; + + #toggle-input { + border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-v5-theme--color--accent, #0066cc); + } + } + + .close-button-container { + position: relative; + + &::after { + content: ''; + inline-size: 36px; + block-size: var(--pf-global--spacer--xs, 0.125rem); + inset-block-end: 0px; + inset-inline-start: 0px; + background-color: var(--pf-v5-theme--color--accent, #0066cc); + position: absolute; + } + } +} + +::slotted(pf-v5-option[selected]) { + --_pf-option-svg-display: none; + --_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff); +} \ No newline at end of file diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-v5-search-input/pf-v5-search-input.ts similarity index 88% rename from elements/pf-search-input/pf-search-input.ts rename to elements/pf-v5-search-input/pf-v5-search-input.ts index fe0fb9a192..3252d0ee8b 100644 --- a/elements/pf-search-input/pf-search-input.ts +++ b/elements/pf-v5-search-input/pf-v5-search-input.ts @@ -14,11 +14,11 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals- import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js'; import { observes } from '@patternfly/pfe-core/decorators/observes.js'; -import { PfOption } from '../pf-select/pf-option.js'; -import styles from './pf-search-input.css'; +import { PfV5Option } from '../pf-v5-select/pf-v5-option.js'; +import styles from './pf-v5-search-input.css'; -/** Fired when a `` element's value changes */ -export class PfSearchChangeEvent extends Event { +/** Fired when a `` element's value changes */ +export class PfV5SearchChangeEvent extends Event { constructor() { super('change', { bubbles: true }); } @@ -39,8 +39,8 @@ export class PfSearchChangeEvent extends Event { * @fires open - when the menu toggles open * @fires close - when the menu toggles closed */ -@customElement('pf-search-input') -export class PfSearchInput extends LitElement { +@customElement('pf-v5-search-input') +export class PfV5SearchInput extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; static readonly formAssociated = true; @@ -80,7 +80,7 @@ export class PfSearchInput extends LitElement { @query('#listbox-container') private _listboxContainer?: HTMLElement; - @query('#placeholder') private _placeholder?: PfOption; + @query('#placeholder') private _placeholder?: PfV5Option; #internals = InternalsController.of(this); @@ -105,7 +105,7 @@ export class PfSearchInput extends LitElement { requestShowListbox: () => this.#showListbox(), requestHideListbox: () => void (this.expanded &&= false), setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden), - isItem: item => item instanceof PfOption, + isItem: item => item instanceof PfV5Option, setItemActive: (item, active) => this.#setItemActive(item, active), setItemSelected: (item, selected) => this.#setItemSelected(item, selected), }); @@ -119,14 +119,14 @@ export class PfSearchInput extends LitElement { } /** List of options */ - get options(): PfOption[] { + get options(): PfV5Option[] { if (isServer) { return []; // TODO: expose a DOM property to allow setting options in SSR scenarios } else { return [ this._placeholder, - ...Array.from(this.querySelectorAll('pf-option')), - ].filter((x): x is PfOption => !!x && !x.hidden); + ...Array.from(this.querySelectorAll('pf-v5-option')), + ].filter((x): x is PfV5Option => !!x && !x.hidden); } } @@ -141,7 +141,7 @@ export class PfSearchInput extends LitElement { class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
- search + search
- - close - + set="patternfly">close +
${this.#combobox.renderItemsToShadowRoot()} - +
@@ -198,7 +198,7 @@ export class PfSearchInput extends LitElement { @observes('value') private valueChanged() { this.#internals.setFormValue(this.value ?? ''); - this.dispatchEvent(new PfSearchChangeEvent()); + this.dispatchEvent(new PfV5SearchChangeEvent()); } async #doExpand() { @@ -266,7 +266,7 @@ export class PfSearchInput extends LitElement { #onSubmit(event: KeyboardEvent) { if (event.key === 'Enter' || event.key === ' ') { - this.dispatchEvent(new PfSearchChangeEvent()); + this.dispatchEvent(new PfV5SearchChangeEvent()); } } @@ -274,7 +274,7 @@ export class PfSearchInput extends LitElement { this.value = value; // it's necessary to reset the 'selected' state of combobox // since otherwise, combobox controller will attempt to prevent us from - // re-selecting the last-selected item, even though pf-search-input + // re-selecting the last-selected item, even though pf-v5-search-input // doesn't have a selected property this.#combobox.selected = []; } @@ -307,7 +307,7 @@ export class PfSearchInput extends LitElement { } } - #setItemSelected(item: PfOption, selected: boolean) { + #setItemSelected(item: PfV5Option, selected: boolean) { item.selected = selected; if (selected) { this._toggleInput!.value = item.value; @@ -315,7 +315,7 @@ export class PfSearchInput extends LitElement { } } - #setItemActive(item: PfOption, active: boolean) { + #setItemActive(item: PfV5Option, active: boolean) { item.active = active; if (this.expanded && active) { item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' }); @@ -334,6 +334,6 @@ export class PfSearchInput extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-search-input': PfSearchInput; + 'pf-v5-search-input': PfV5SearchInput; } } diff --git a/elements/pf-search-input/test/pf-search-input.e2e.ts b/elements/pf-v5-search-input/test/pf-search-input.e2e.ts similarity index 94% rename from elements/pf-search-input/test/pf-search-input.e2e.ts rename to elements/pf-v5-search-input/test/pf-search-input.e2e.ts index b1d9dbb21a..04d688a4e4 100644 --- a/elements/pf-search-input/test/pf-search-input.e2e.ts +++ b/elements/pf-v5-search-input/test/pf-search-input.e2e.ts @@ -2,7 +2,7 @@ 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-search-input'; +const tagName = 'pf-v5-search-input'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-search-input/test/pf-search-input.spec.ts b/elements/pf-v5-search-input/test/pf-search-input.spec.ts similarity index 86% rename from elements/pf-search-input/test/pf-search-input.spec.ts rename to elements/pf-v5-search-input/test/pf-search-input.spec.ts index 47089be493..6317a2e001 100644 --- a/elements/pf-search-input/test/pf-search-input.spec.ts +++ b/elements/pf-v5-search-input/test/pf-search-input.spec.ts @@ -1,6 +1,6 @@ import { aTimeout, expect, html, nextFrame } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; -import { PfSearchInput } from '../pf-search-input.js'; +import { PfV5SearchInput } from '../pf-v5-search-input.js'; import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; import { sendKeys } from '@web/test-runner-commands'; import { clickElementAtCenter, clickElementAtOffset } from '@patternfly/pfe-tools/test/utils.js'; @@ -12,22 +12,22 @@ function press(key: string) { } // a11yShapshot does not surface the options -function getVisibleOptionValues(element: PfSearchInput): string[] { +function getVisibleOptionValues(element: PfV5SearchInput): string[] { return element.options.filter(x => !x.hidden).map(x => x.value); } // a11yShapshot does not surface the options -function getActiveOption(element: PfSearchInput) { +function getActiveOption(element: PfV5SearchInput) { return element.options.find(x => x.active); } /** * NOTE because of the copy-to-shadow-root shtick in ActivedescendantController, * we can't just pick an option (from light dom); - * @param element pf-select + * @param element pf-v5-select * @param index item index */ -async function clickItemAtIndex(element: PfSearchInput, index: number) { +async function clickItemAtIndex(element: PfV5SearchInput, index: number) { const itemHeight = 44; await clickElementAtOffset(element, [ 10, @@ -38,34 +38,34 @@ async function clickItemAtIndex(element: PfSearchInput, index: number) { } -describe('', function() { +describe('', function() { describe('simply instantiating', function() { - let element: PfSearchInput; + let element: PfV5SearchInput; it('imperatively instantiates', function() { - expect(document.createElement('pf-search-input')).to.be.an.instanceof(PfSearchInput); + expect(document.createElement('pf-v5-search-input')).to.be.an.instanceof(PfV5SearchInput); }); it('should upgrade', async function() { - element = await createFixture(html``); - const klass = customElements.get('pf-search-input'); + element = await createFixture(html``); + const klass = customElements.get('pf-v5-search-input'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfSearchInput); + .to.be.an.instanceOf(PfV5SearchInput); }); }); describe('with accessible-label attribute and 3 items', function() { - let element: PfSearchInput; + let element: PfV5SearchInput; const updateComplete = () => element.updateComplete; beforeEach(async function() { - element = await createFixture(html` - - 1 - 2 - 3 - `); + element = await createFixture(html` + + 1 + 2 + 3 + `); }); it('passes aXe audit', async function() { @@ -114,16 +114,16 @@ describe('', function() { }); describe('with 3 items and associated
@@ -222,7 +222,7 @@ export class PfTabs extends LitElement { } } - select(tab: PfTab | number): void { + select(tab: PfV5Tab | number): void { if (typeof tab === 'number') { this.activeIndex = tab; } else { @@ -233,6 +233,6 @@ export class PfTabs extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-tabs': PfTabs; + 'pf-v5-tabs': PfV5Tabs; } } diff --git a/elements/pf-tabs/test/pf-tabs.e2e.ts b/elements/pf-v5-tabs/test/pf-tabs.e2e.ts similarity index 96% rename from elements/pf-tabs/test/pf-tabs.e2e.ts rename to elements/pf-v5-tabs/test/pf-tabs.e2e.ts index 1f37415eb2..64edd14624 100644 --- a/elements/pf-tabs/test/pf-tabs.e2e.ts +++ b/elements/pf-v5-tabs/test/pf-tabs.e2e.ts @@ -2,7 +2,7 @@ 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-tabs'; +const tagName = 'pf-v5-tabs'; test.describe(tagName, () => { // Run tests in this file with portrait-like viewport. diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-v5-tabs/test/pf-tabs.spec.ts similarity index 77% rename from elements/pf-tabs/test/pf-tabs.spec.ts rename to elements/pf-v5-tabs/test/pf-tabs.spec.ts index 419f3b28cd..9cdae6e254 100644 --- a/elements/pf-tabs/test/pf-tabs.spec.ts +++ b/elements/pf-v5-tabs/test/pf-tabs.spec.ts @@ -5,9 +5,9 @@ import { setViewport, sendKeys } from '@web/test-runner-commands'; import { allUpdates } from '@patternfly/pfe-tools/test/utils.js'; -import { PfTabs } from '../pf-tabs.js'; -import { PfTab } from '../pf-tab.js'; -import { PfTabPanel } from '../pf-tab-panel.js'; +import { PfV5Tabs } from '../pf-v5-tabs.js'; +import { PfV5Tab } from '../pf-v5-tab.js'; +import { PfV5TabPanel } from '../pf-v5-tab-panel.js'; import '@patternfly/pfe-tools/test/stub-logger.js'; @@ -17,44 +17,44 @@ function press(key: string) { }; } -describe('', function() { +describe('', function() { it('instantiates imperatively', function() { - expect(document.createElement('pf-tabs')).to.be.an.instanceof(PfTabs); - expect(document.createElement('pf-tab')).to.be.an.instanceof(PfTab); - expect(document.createElement('pf-tab-panel')).to.be.an.instanceof(PfTabPanel); + expect(document.createElement('pf-v5-tabs')).to.be.an.instanceof(PfV5Tabs); + expect(document.createElement('pf-v5-tab')).to.be.an.instanceof(PfV5Tab); + expect(document.createElement('pf-v5-tab-panel')).to.be.an.instanceof(PfV5TabPanel); }); it('should upgrade', async function() { - const el = await createFixture(html``); - expect(el, 'pf-tabs should be an instance of PfeTabs') - .to.be.an.instanceOf(customElements.get('pf-tabs')) + const el = await createFixture(html``); + expect(el, 'pf-v5-tabs should be an instance of PfeTabs') + .to.be.an.instanceOf(customElements.get('pf-v5-tabs')) .and - .to.be.an.instanceOf(PfTabs); + .to.be.an.instanceOf(PfV5Tabs); }); describe('with three valid tab pairs', function() { - let element: PfTabs; + let element: PfV5Tabs; const updateComplete = () => allUpdates(element); beforeEach(async function() { - element = await createFixture(html` - - tab-1 - panel-1 - tab-2 - panel-2 - tab-3 - panel-3 - + element = await createFixture(html` + + tab-1 + panel-1 + tab-2 + panel-2 + tab-3 + panel-3 + `); }); beforeEach(updateComplete); it('should apply aria attributes on initialization', function() { - const tabs = element.querySelectorAll('pf-tab'); - const panels = element.querySelectorAll('pf-tab-panel'); + const tabs = element.querySelectorAll('pf-v5-tab'); + const panels = element.querySelectorAll('pf-v5-tab-panel'); tabs.forEach(function(tab: Element, index: number) { const tabId = tab.getAttribute('id'); const tabControls = tab.getAttribute('aria-controls'); @@ -72,11 +72,11 @@ describe('', function() { beforeEach(updateComplete); beforeEach(nextFrame); it('should activate the first focusable tab', function() { - expect(element.querySelector('pf-tab')).to.have.attribute('active'); + expect(element.querySelector('pf-v5-tab')).to.have.attribute('active'); }); it('should activate the first tab panel', function() { - expect(element.querySelector('pf-tab')).to.not.have.attribute('hidden'); + expect(element.querySelector('pf-v5-tab')).to.not.have.attribute('hidden'); }); }); @@ -97,7 +97,7 @@ describe('', function() { describe('setting the second tab\'s `active` attribute', function() { beforeEach(function() { - const [, tab] = element.querySelectorAll('pf-tab'); + const [, tab] = element.querySelectorAll('pf-v5-tab'); tab!.active = true; }); @@ -105,21 +105,21 @@ describe('', function() { beforeEach(nextFrame); it('should activate the second tab', function() { - const [, tab] = element.querySelectorAll('pf-tab'); + const [, tab] = element.querySelectorAll('pf-v5-tab'); expect(tab).to.have.attribute('active'); }); it('should activate its panel', function() { - const [, tab] = element.querySelectorAll('pf-tab'); + const [, tab] = element.querySelectorAll('pf-v5-tab'); expect(tab).to.not.have.attribute('hidden'); }); it('should deactivate previously active tab', function() { - expect(element.querySelector('pf-tab')).to.not.have.attribute('active'); + expect(element.querySelector('pf-v5-tab')).to.not.have.attribute('active'); }); it('should hide previously active panel', function() { - expect(element.querySelector('pf-tab-panel')).to.have.attribute('hidden'); + expect(element.querySelector('pf-v5-tab-panel')).to.have.attribute('hidden'); }); }); @@ -132,7 +132,7 @@ describe('', function() { beforeEach(nextFrame); it('should activate the third tab', function() { - const [,, tab] = element.querySelectorAll('pf-tab'); + const [,, tab] = element.querySelectorAll('pf-v5-tab'); expect(tab).to.have.attribute('active'); }); @@ -143,7 +143,7 @@ describe('', function() { describe('then setting the first tab\'s `disabled` attribute', function() { beforeEach(async function() { - element.querySelector('pf-tab')!.disabled = true; + element.querySelector('pf-v5-tab')!.disabled = true; }); beforeEach(updateComplete); @@ -156,13 +156,13 @@ describe('', function() { describe('and clicking the disabled tab', function() { beforeEach(async function() { - element.querySelector('pf-tab')!.click(); + element.querySelector('pf-v5-tab')!.click(); }); beforeEach(updateComplete); it('should not activate', function() { - const [first] = element.querySelectorAll('pf-tab'); + const [first] = element.querySelectorAll('pf-v5-tab'); expect(first).to.not.have.attribute('active'); }); @@ -180,7 +180,7 @@ describe('', function() { beforeEach(updateComplete); it('should not activate the first tab', function() { - expect(element.querySelector('pf-tab')).to.not.have.attribute('active'); + expect(element.querySelector('pf-v5-tab')).to.not.have.attribute('active'); }); it('should present the third panel to the ax tree', async function() { @@ -225,7 +225,7 @@ describe('', function() { describe(`when navigated by keyboard`, function() { describe('when focused on the first tab', function() { beforeEach(async function() { - element.querySelector('pf-tab')!.focus(); + element.querySelector('pf-v5-tab')!.focus(); }); describe('pressing ArrowRight', function() { @@ -236,7 +236,7 @@ describe('', function() { beforeEach(updateComplete); it('should activate the next tab', function() { - const [first, second, third] = element.querySelectorAll('pf-tab'); + const [first, second, third] = element.querySelectorAll('pf-v5-tab'); expect(first).to.not.have.attribute('active'); expect(second).to.have.attribute('active'); expect(third).to.not.have.attribute('active'); @@ -253,7 +253,7 @@ describe('', function() { }); it('should activate the last tab', function() { - const [first, second, third] = element.querySelectorAll('pf-tab'); + const [first, second, third] = element.querySelectorAll('pf-v5-tab'); expect(first).to.not.have.attribute('active'); expect(second).to.not.have.attribute('active'); expect(third).to.have.attribute('active'); @@ -271,7 +271,7 @@ describe('', function() { beforeEach(updateComplete); it('should activate the first tab', function() { - const [first, second, third] = element.querySelectorAll('pf-tab'); + const [first, second, third] = element.querySelectorAll('pf-v5-tab'); expect(first).to.have.attribute('active'); expect(second).to.not.have.attribute('active'); expect(third).to.not.have.attribute('active'); @@ -300,14 +300,14 @@ describe('', function() { beforeEach(updateComplete); it('should not activate second tab', function() { - const [first, second, third] = element.querySelectorAll('pf-tab'); + const [first, second, third] = element.querySelectorAll('pf-v5-tab'); expect(first).to.have.attribute('active'); expect(second).to.not.have.attribute('active'); expect(third).to.not.have.attribute('active'); }); it('should focus the second tab', function() { - const [, second] = element.querySelectorAll('pf-tab'); + const [, second] = element.querySelectorAll('pf-v5-tab'); expect(document.activeElement).to.equal(second); }); @@ -317,7 +317,7 @@ describe('', function() { beforeEach(updateComplete); it('should activate second tab', function() { - const [first, second, third] = element.querySelectorAll('pf-tab'); + const [first, second, third] = element.querySelectorAll('pf-v5-tab'); expect(first).to.not.have.attribute('active'); expect(second).to.have.attribute('active'); expect(third).to.not.have.attribute('active'); @@ -330,22 +330,22 @@ describe('', function() { }); describe('when no active tab is given and the first tab is disabled', function() { - let element: PfTabs; + let element: PfV5Tabs; beforeEach(async function() { - element = await createFixture(html` - - - - - - - - - - - - + element = await createFixture(html` + + + + + + + + + + + + `); }); diff --git a/elements/pf-text-area/README.md b/elements/pf-v5-text-area/README.md similarity index 80% rename from elements/pf-text-area/README.md rename to elements/pf-v5-text-area/README.md index e1774bb0a3..2f70231bab 100644 --- a/elements/pf-text-area/README.md +++ b/elements/pf-v5-text-area/README.md @@ -5,7 +5,7 @@ Add a description of the component here. Describe how best to use this web component along with best practices. ```html - + - + ``` diff --git a/elements/pf-v5-text-area/demo/auto-resizing.html b/elements/pf-v5-text-area/demo/auto-resizing.html new file mode 100644 index 0000000000..9aaa9233eb --- /dev/null +++ b/elements/pf-v5-text-area/demo/auto-resizing.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/disabled.html b/elements/pf-v5-text-area/demo/disabled.html new file mode 100644 index 0000000000..262fdd3e75 --- /dev/null +++ b/elements/pf-v5-text-area/demo/disabled.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/horizontally-resizable.html b/elements/pf-v5-text-area/demo/horizontally-resizable.html new file mode 100644 index 0000000000..60984833ac --- /dev/null +++ b/elements/pf-v5-text-area/demo/horizontally-resizable.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/index.html b/elements/pf-v5-text-area/demo/index.html new file mode 100644 index 0000000000..9e708345cb --- /dev/null +++ b/elements/pf-v5-text-area/demo/index.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/invalid.html b/elements/pf-v5-text-area/demo/invalid.html new file mode 100644 index 0000000000..87484f4a2e --- /dev/null +++ b/elements/pf-v5-text-area/demo/invalid.html @@ -0,0 +1,9 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/readonly.html b/elements/pf-v5-text-area/demo/readonly.html new file mode 100644 index 0000000000..2e99ff43d9 --- /dev/null +++ b/elements/pf-v5-text-area/demo/readonly.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-v5-text-area/demo/validated.html b/elements/pf-v5-text-area/demo/validated.html new file mode 100644 index 0000000000..607f7dd464 --- /dev/null +++ b/elements/pf-v5-text-area/demo/validated.html @@ -0,0 +1,13 @@ +
+ + Validate +
+ + + diff --git a/elements/pf-v5-text-area/demo/vertically-resizable.html b/elements/pf-v5-text-area/demo/vertically-resizable.html new file mode 100644 index 0000000000..5f8849c86d --- /dev/null +++ b/elements/pf-v5-text-area/demo/vertically-resizable.html @@ -0,0 +1,6 @@ + + + + diff --git a/elements/pf-text-area/docs/pf-text-area.md b/elements/pf-v5-text-area/docs/pf-text-area.md similarity index 65% rename from elements/pf-text-area/docs/pf-text-area.md rename to elements/pf-v5-text-area/docs/pf-text-area.md index a8f40467bb..45afbf4d7c 100644 --- a/elements/pf-text-area/docs/pf-text-area.md +++ b/elements/pf-v5-text-area/docs/pf-text-area.md @@ -1,42 +1,42 @@ {% renderOverview %} - + {% endrenderOverview %} {% band header="Usage" %} ### Basic {% htmlexample %} - + {% endhtmlexample %} ### With Placeholder {% htmlexample %} - + {% endhtmlexample %} ### Required {% htmlexample %} - + {% endhtmlexample %} ### Disabled state {% htmlexample %} - + {% endhtmlexample %} ### Resize Vertical {% htmlexample %} - + {% endhtmlexample %} ### Resize Horizontal {% htmlexample %} - + {% endhtmlexample %} {% endband %} diff --git a/elements/pf-v5-text-area/pf-v5-text-area.css b/elements/pf-v5-text-area/pf-v5-text-area.css new file mode 100644 index 0000000000..1b2783e247 --- /dev/null +++ b/elements/pf-v5-text-area/pf-v5-text-area.css @@ -0,0 +1,318 @@ +:host { + display: block; + + /* .pf-v5-c-form-control */ + /** Form control text color */ + --pf-v5-c-form-control--Color: var(--pf-global--Color--100, #151515); + /** Form control font size */ + --pf-v5-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem); + /** Form control line height */ + --pf-v5-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5); + /** Form control border width */ + --pf-v5-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px); + /** Form control top border color */ + --pf-v5-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0); + /** Form control right border color */ + --pf-v5-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0); + /** Form control bottom border color */ + --pf-v5-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + /** Form control left border color */ + --pf-v5-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0); + /** Form control border radius */ + --pf-v5-c-form-control--BorderRadius: 0; + /** Form control background color */ + --pf-v5-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); + /** Form control width */ + --pf-v5-c-form-control--Width: 100%; + /** Form control height */ + --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom)); + /** Form control base inset */ + --pf-v5-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem); + /** Form control top padding */ + --pf-v5-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + /** Form control bottom padding */ + --pf-v5-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + /** Form control right padding */ + --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--inset--base); + /** Form control left padding */ + --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--inset--base); + /** Form control hover bottom border color */ + --pf-v5-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + /** Form control focus bottom border width */ + --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Form control focus bottom padding */ + --pf-v5-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-v5-c-form-control--focus--BorderBottomWidth)); + /** Form control focus bottom border color */ + --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + /** Form control expanded bottom border width */ + --pf-v5-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Form control expanded bottom padding */ + --pf-v5-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-v5-c-form-control--focus--BorderBottomWidth)); + /** Form control expanded bottom border color */ + --pf-v5-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + /** Form control placeholder color */ + --pf-v5-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73); + /** Form control placeholder child color */ + --pf-v5-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515); + /** Form control disabled color */ + --pf-v5-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73); + /** Form control disabled background color */ + --pf-v5-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0); + /** Form control disabled border color */ + --pf-v5-c-form-control--disabled--BorderColor: transparent; + /** Form control readonly background color */ + --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0); + /** Form control readonly hover bottom border color */ + --pf-v5-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + /** Form control readonly focus bottom padding */ + --pf-v5-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + /** Form control readonly focus bottom border width */ + --pf-v5-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); + /** Form control readonly focus bottom border color */ + --pf-v5-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + /** Form control readonly plain background color */ + --pf-v5-c-form-control--readonly--m-plain--BackgroundColor: transparent; + /** Form control readonly plain base inset */ + --pf-v5-c-form-control--readonly--m-plain--inset--base: 0; + /** Form control success bottom border width */ + --pf-v5-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Form control success bottom padding */ + --pf-v5-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-v5-c-form-control--success--BorderBottomWidth)); + /** Form control success bottom border color */ + --pf-v5-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + /** Form control success right padding */ + --pf-v5-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem); + /** Form control success background X position */ + --pf-v5-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--PaddingLeft)); + /** Form control success background Y position */ + --pf-v5-c-form-control--success--BackgroundPositionY: center; + /** Form control success background position */ + --pf-v5-c-form-control--success--BackgroundPosition: var(--pf-v5-c-form-control--success--BackgroundPositionX) var(--pf-v5-c-form-control--success--BackgroundPositionY); + /** Form control success background X size */ + --pf-v5-c-form-control--success--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize); + /** Form control success background Y size */ + --pf-v5-c-form-control--success--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize); + /** Form control success background size */ + --pf-v5-c-form-control--success--BackgroundSize: var(--pf-v5-c-form-control--success--BackgroundSizeX) var(--pf-v5-c-form-control--success--BackgroundSizeY); + /** Form control success background URL */ + --pf-v5-c-form-control--success--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='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'/%3E%3C/svg%3E"); + /** Form control warning bottom border width */ + --pf-v5-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Form control warning bottom padding */ + --pf-v5-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth)); + /** Form control warning bottom border color */ + --pf-v5-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + /** Form control warning right padding */ + --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem); + /** Form control warning background X position */ + --pf-v5-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-v5-c-form-control--PaddingLeft) - 0.0625rem)); + /** Form control warning background Y position */ + --pf-v5-c-form-control--m-warning--BackgroundPositionY: center; + /** Form control warning background position */ + --pf-v5-c-form-control--m-warning--BackgroundPosition: var(--pf-v5-c-form-control--m-warning--BackgroundPositionX) var(--pf-v5-c-form-control--m-warning--BackgroundPositionY); + /** Form control warning background X size */ + --pf-v5-c-form-control--m-warning--BackgroundSizeX: 1.25rem; + /** Form control warning background Y size */ + --pf-v5-c-form-control--m-warning--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize); + /** Form control warning background size */ + --pf-v5-c-form-control--m-warning--BackgroundSize: var(--pf-v5-c-form-control--m-warning--BackgroundSizeX) var(--pf-v5-c-form-control--m-warning--BackgroundSizeY); + /** Form control warning background URL */ + --pf-v5-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='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'/%3E%3C/svg%3E"); + /** Form control invalid bottom border width */ + --pf-v5-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + /** Form control invalid bottom padding */ + --pf-v5-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-v5-c-form-control--invalid--BorderBottomWidth)); + /** Form control invalid bottom border color */ + --pf-v5-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + /** Form control invalid right padding */ + --pf-v5-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem); + /** Form control invalid background X position */ + --pf-v5-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--PaddingLeft)); + /** Form control invalid background Y position */ + --pf-v5-c-form-control--invalid--BackgroundPositionY: center; + /** Form control invalid background position */ + --pf-v5-c-form-control--invalid--BackgroundPosition: var(--pf-v5-c-form-control--invalid--BackgroundPositionX) var(--pf-v5-c-form-control--invalid--BackgroundPositionY); + /** Form control invalid background X size */ + --pf-v5-c-form-control--invalid--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize); + /** Form control invalid background Y size */ + --pf-v5-c-form-control--invalid--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize); + /** Form control invalid background size */ + --pf-v5-c-form-control--invalid--BackgroundSize: var(--pf-v5-c-form-control--invalid--BackgroundSizeX) var(--pf-v5-c-form-control--invalid--BackgroundSizeY); + /** Form control invalid background URL */ + --pf-v5-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='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'/%3E%3C/svg%3E"); + /** Form control invalid exclamation background */ + --pf-v5-c-form-control--invalid--exclamation--Background: var(--pf-v5-c-form-control--invalid--BackgroundUrl) var(--pf-v5-c-form-control--invalid--BackgroundPosition) / var(--pf-v5-c-form-control--invalid--BackgroundSize) no-repeat; + /** Form control invalid background */ + --pf-v5-c-form-control--invalid--Background: var(--pf-v5-c-form-control--BackgroundColor) var(--pf-v5-c-form-control--invalid--exclamation--Background); + /** Form control search left padding */ + --pf-v5-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem); + /** Form control search background position */ + --pf-v5-c-form-control--m-search--BackgroundPosition: var(--pf-v5-c-form-control--PaddingRight); + /** Form control search background size */ + --pf-v5-c-form-control--m-search--BackgroundSize: var(--pf-v5-c-form-control--FontSize) var(--pf-v5-c-form-control--FontSize); + /** Form control search background URL */ + --pf-v5-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E"); + /** Form control icon right padding */ + --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer)); + /** Form control icon background URL */ + --pf-v5-c-form-control--m-icon--BackgroundUrl: none; + /** Form control icon background X position */ + --pf-v5-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--inset--base)); + /** Form control icon background Y position */ + --pf-v5-c-form-control--m-icon--BackgroundPositionY: center; + /** Form control icon background X size */ + --pf-v5-c-form-control--m-icon--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize); + /** Form control icon background Y size */ + --pf-v5-c-form-control--m-icon--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize); + /** Form control icon spacer */ + --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem); + /** Form control icon padding right */ + --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--invalid--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer)); + /** Form control icon background X position */ + --pf-v5-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-v5-c-form-control--m-icon--BackgroundPositionX) - var(--pf-v5-c-form-control--m-icon--icon--spacer) - var(--pf-v5-c-form-control--invalid--BackgroundSizeX)); + /** Form control icon invalid background URL */ + --pf-v5-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-v5-c-form-control--invalid--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl); + /** Form control icon invalid background position */ + --pf-v5-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-v5-c-form-control--invalid--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY); + /** Form control icon invalid background size */ + --pf-v5-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-v5-c-form-control--invalid--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY); + /** Form control icon success background URL */ + --pf-v5-c-form-control--m-icon--success--BackgroundUrl: var(--pf-v5-c-form-control--success--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl); + /** Form control icon success background position */ + --pf-v5-c-form-control--m-icon--success--BackgroundPosition: var(--pf-v5-c-form-control--success--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY); + /** Form control icon success background size */ + --pf-v5-c-form-control--m-icon--success--BackgroundSize: var(--pf-v5-c-form-control--success--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY); + /** Form control icon warning background URL */ + --pf-v5-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-v5-c-form-control--m-warning--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl); + /** Form control icon warning background position */ + --pf-v5-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-v5-c-form-control--m-warning--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY); + /** Form control icon warning background size */ + --pf-v5-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-v5-c-form-control--m-warning--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY); + /** Form control calendar background URL */ + --pf-v5-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E"); + /** Form control clock background URL */ + --pf-v5-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E"); + /** Form control select right padding */ + --pf-v5-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-v5-c-form-control--BorderWidth) + var(--pf-v5-c-form-control--BorderWidth)); + /** Form control select left padding */ + --pf-v5-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-v5-c-form-control--BorderWidth)); + /** Form control select background URL */ + --pf-v5-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E"); + /** Form control select background size */ + --pf-v5-c-form-control__select--BackgroundSize: .625em; + /** Form control select background X position */ + --pf-v5-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px); + /** Form control select background Y position */ + --pf-v5-c-form-control__select--BackgroundPositionY: center; + /** Form control select background position */ + --pf-v5-c-form-control__select--BackgroundPosition: var(--pf-v5-c-form-control__select--BackgroundPositionX) var(--pf-v5-c-form-control__select--BackgroundPositionY); + /** Form control select success right padding */ + --pf-v5-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + /** Form control select success background position */ + --pf-v5-c-form-control__select--success--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem)); + /** Form control select warning right padding */ + --pf-v5-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + /** Form control select warning background position */ + --pf-v5-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem); + /** Form control select invalid right padding */ + --pf-v5-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + /** Form control select invalid background position */ + --pf-v5-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem)); + /** Form control textarea width */ + --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width); + /** Form control textarea height */ + --pf-v5-c-form-control--textarea--Height: auto; + /** Form control textarea success background Y position */ + --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft); + /** Form control textarea warning background Y position */ + --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft); + /** Form control textarea invalid background Y position */ + --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft); + /** Form control icon sprite success background URL */ + --pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success); + /** Form control icon sprite warning background URL */ + --pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning); + /** Form control icon sprite invalid background URL */ + --pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid); + /** Form control icon sprite select background URL */ + --pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select); + /** Form control icon sprite search background URL */ + --pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search); + /** Form control icon sprite calendar background URL */ + --pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar); + /** Form control icon sprite clock background URL */ + --pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock); + /** Form control icon sprite select background size */ + --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize); + /** Form control icon sprite select background X position */ + --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px); + /** Form control icon sprite select success background position */ + --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg)); + /** Form control icon sprite select warning background position */ + --pf-v5-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg) + 0.0625rem); + /** Form control icon sprite select invalid background position */ + --pf-v5-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg)); +} + +textarea { + --pf-v5-c-form-control--success--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--success--BackgroundPositionY); + --pf-v5-c-form-control--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--invalid--BackgroundPositionY); + --pf-v5-c-form-control--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY); + + width: var(--pf-v5-c-form-control--textarea--Width); + height: var(--pf-v5-c-form-control--textarea--Height); + vertical-align: bottom; + color: var(--pf-v5-c-form-control--Color); + width: var(--pf-v5-c-form-control--Width); + padding: var(--pf-v5-c-form-control--PaddingTop) var(--pf-v5-c-form-control--PaddingRight) var(--pf-v5-c-form-control--PaddingBottom) var(--pf-v5-c-form-control--PaddingLeft); + font-size: var(--pf-v5-c-form-control--FontSize); + line-height: var(--pf-v5-c-form-control--LineHeight); + background-color: var(--pf-v5-c-form-control--BackgroundColor); + background-repeat: no-repeat; + border: var(--pf-v5-c-form-control--BorderWidth) solid; + border-color: var(--pf-v5-c-form-control--BorderTopColor) var(--pf-v5-c-form-control--BorderRightColor) var(--pf-v5-c-form-control--BorderBottomColor) var(--pf-v5-c-form-control--BorderLeftColor); + border-radius: var(--pf-v5-c-form-control--BorderRadius); + appearance: none; +} + +textarea::placeholder { + color: var(--pf-v5-c-form-control--placeholder--Color); +} + +textarea:hover { + --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--hover--BorderBottomColor); +} + +textarea:focus { + --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--focus--BorderBottomColor); + + padding-bottom: var(--pf-v5-c-form-control--focus--PaddingBottom); + border-bottom-width: var(--pf-v5-c-form-control--focus--BorderBottomWidth); +} + +textarea:invalid { + --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--invalid--PaddingRight); + --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--invalid--BorderBottomColor); + + padding-bottom: var(--pf-v5-c-form-control--invalid--PaddingBottom); + background-image: var(--pf-v5-c-form-control--invalid--BackgroundUrl); + background-position: var(--pf-v5-c-form-control--invalid--BackgroundPosition); + background-size: var(--pf-v5-c-form-control--invalid--BackgroundSize); + border-bottom-width: var(--pf-v5-c-form-control--invalid--BorderBottomWidth); +} + +textarea:disabled { + --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--disabled--BackgroundColor); + color: var(--pf-v5-c-form-control--disabled--Color); + cursor: not-allowed; + border-color: var(--pf-v5-c-form-control--disabled--BorderColor); +} + +textarea[readonly] { + background-color: var(--pf-v5-c-form-control--readonly--BackgroundColor); +} + +.vertical { resize: vertical; } +.horizontal { resize: horizontal; } +.both { resize: both; } + diff --git a/elements/pf-text-area/pf-text-area.ts b/elements/pf-v5-text-area/pf-v5-text-area.ts similarity index 92% rename from elements/pf-text-area/pf-text-area.ts rename to elements/pf-v5-text-area/pf-v5-text-area.ts index 951bf58644..594a3612d6 100644 --- a/elements/pf-text-area/pf-text-area.ts +++ b/elements/pf-v5-text-area/pf-v5-text-area.ts @@ -6,15 +6,15 @@ import { classMap } from 'lit/directives/class-map.js'; import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; -import styles from './pf-text-area.css'; +import styles from './pf-v5-text-area.css'; import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; /** * A **text area** component is used for entering a paragraph of text that is longer than one line. * @alias Text Area */ -@customElement('pf-text-area') -export class PfTextArea extends LitElement { +@customElement('pf-v5-text-area') +export class PfV5TextArea extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; static readonly formAssociated = true; @@ -109,8 +109,8 @@ export class PfTextArea extends LitElement { } #autoSetHeight() { - this.#input.style.setProperty('--pf-c-form-control--textarea--Height', `auto`); - this.#input.style.setProperty('--pf-c-form-control--textarea--Height', `${this.#input.scrollHeight}px`); + this.#input.style.setProperty('--pf-v5-c-form-control--textarea--Height', `auto`); + this.#input.style.setProperty('--pf-v5-c-form-control--textarea--Height', `${this.#input.scrollHeight}px`); } #setValidityFromInput() { @@ -146,6 +146,6 @@ export class PfTextArea extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-text-area': PfTextArea; + 'pf-v5-text-area': PfV5TextArea; } } diff --git a/elements/pf-text-area/test/pf-text-area.e2e.ts b/elements/pf-v5-text-area/test/pf-text-area.e2e.ts similarity index 95% rename from elements/pf-text-area/test/pf-text-area.e2e.ts rename to elements/pf-v5-text-area/test/pf-text-area.e2e.ts index ea473cf51a..80b348f75f 100644 --- a/elements/pf-text-area/test/pf-text-area.e2e.ts +++ b/elements/pf-v5-text-area/test/pf-text-area.e2e.ts @@ -2,7 +2,7 @@ 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-text-area'; +const tagName = 'pf-v5-text-area'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-text-area/test/pf-text-area.spec.ts b/elements/pf-v5-text-area/test/pf-text-area.spec.ts similarity index 78% rename from elements/pf-text-area/test/pf-text-area.spec.ts rename to elements/pf-v5-text-area/test/pf-text-area.spec.ts index 158e8e2831..083c0c12a6 100644 --- a/elements/pf-text-area/test/pf-text-area.spec.ts +++ b/elements/pf-v5-text-area/test/pf-text-area.spec.ts @@ -2,27 +2,27 @@ import { expect, html } from '@open-wc/testing'; import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js'; import { sendKeys } from '@web/test-runner-commands'; -import { PfTextArea } from '@patternfly/elements/pf-text-area/pf-text-area.js'; +import { PfV5TextArea } from '@patternfly/elements/pf-v5-text-area/pf-v5-text-area.js'; -describe('', function() { +describe('', function() { describe('simply instantiating', function() { - let element: PfTextArea; + let element: PfV5TextArea; it('imperatively instantiates', function() { - expect(document.createElement('pf-text-area')).to.be.an.instanceof(PfTextArea); + expect(document.createElement('pf-v5-text-area')).to.be.an.instanceof(PfV5TextArea); }); it('should upgrade', async function() { - element = await createFixture(html``); - const klass = customElements.get('pf-text-area'); + element = await createFixture(html``); + const klass = customElements.get('pf-v5-text-area'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfTextArea); + .to.be.an.instanceOf(PfV5TextArea); }); }); describe('in a fieldset', function() { - let element: PfTextArea; + let element: PfV5TextArea; let fieldset: HTMLFieldSetElement; let form: HTMLFormElement; @@ -31,13 +31,13 @@ describe('', function() {
- +
`); fieldset = form.querySelector('fieldset')!; - element = form.querySelector('pf-text-area')!; + element = form.querySelector('pf-v5-text-area')!; form.querySelector('input')?.focus(); await element.updateComplete; }); @@ -60,7 +60,7 @@ describe('', function() { expect(document.activeElement) .to .not - .be.an.instanceof(PfTextArea); + .be.an.instanceof(PfV5TextArea); }); }); @@ -86,7 +86,7 @@ describe('', function() { it('does focus the button', function() { expect(document.activeElement) .to - .be.an.instanceof(PfTextArea); + .be.an.instanceof(PfV5TextArea); }); }); }); diff --git a/elements/pf-text-input/README.md b/elements/pf-v5-text-input/README.md similarity index 74% rename from elements/pf-text-input/README.md rename to elements/pf-v5-text-input/README.md index 47f195b63b..4bc633db40 100644 --- a/elements/pf-text-input/README.md +++ b/elements/pf-v5-text-input/README.md @@ -4,6 +4,6 @@ A **text input** is used to gather free-form text from a user. ```html ``` diff --git a/elements/pf-text-input/demo/demo.css b/elements/pf-v5-text-input/demo/demo.css similarity index 100% rename from elements/pf-text-input/demo/demo.css rename to elements/pf-v5-text-input/demo/demo.css diff --git a/elements/pf-text-input/demo/disabled.html b/elements/pf-v5-text-input/demo/disabled.html similarity index 59% rename from elements/pf-text-input/demo/disabled.html rename to elements/pf-v5-text-input/demo/disabled.html index 433c8f7986..baa3c06125 100644 --- a/elements/pf-text-input/demo/disabled.html +++ b/elements/pf-v5-text-input/demo/disabled.html @@ -1,20 +1,20 @@
Disabled - +
Disabled by fieldset - +
diff --git a/elements/pf-v5-text-input/demo/invalid.html b/elements/pf-v5-text-input/demo/invalid.html new file mode 100644 index 0000000000..dc41b11b49 --- /dev/null +++ b/elements/pf-v5-text-input/demo/invalid.html @@ -0,0 +1,14 @@ +
+ Invalid + +
+ + + + diff --git a/elements/pf-text-input/demo/kitchen-sink.html b/elements/pf-v5-text-input/demo/kitchen-sink.html similarity index 57% rename from elements/pf-text-input/demo/kitchen-sink.html rename to elements/pf-v5-text-input/demo/kitchen-sink.html index 914368d699..bfe72f71dd 100644 --- a/elements/pf-text-input/demo/kitchen-sink.html +++ b/elements/pf-v5-text-input/demo/kitchen-sink.html @@ -1,32 +1,32 @@
- +
Disabled - + value="disabled text input example">
Left Truncated - + value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.">
Read only - + value="read only text input example">
@@ -34,20 +34,20 @@
Invalid - +
Icon variants - - - - - - - + + + + + + + custom-icon-dimensions="24px 24px">
diff --git a/elements/pf-v5-text-input/demo/read-only.html b/elements/pf-v5-text-input/demo/read-only.html new file mode 100644 index 0000000000..fcee62c732 --- /dev/null +++ b/elements/pf-v5-text-input/demo/read-only.html @@ -0,0 +1,18 @@ +
+ Read only + + + +
+ + + + diff --git a/elements/pf-text-input/demo/status-icon-sprite.svg b/elements/pf-v5-text-input/demo/status-icon-sprite.svg similarity index 100% rename from elements/pf-text-input/demo/status-icon-sprite.svg rename to elements/pf-v5-text-input/demo/status-icon-sprite.svg diff --git a/elements/pf-text-input/demo/validation.html b/elements/pf-v5-text-input/demo/validation.html similarity index 58% rename from elements/pf-text-input/demo/validation.html rename to elements/pf-v5-text-input/demo/validation.html index 2a436c8eba..a33abdab7c 100644 --- a/elements/pf-text-input/demo/validation.html +++ b/elements/pf-v5-text-input/demo/validation.html @@ -1,17 +1,17 @@
Invalid - - Validate on Blur? + - Validate + required> + Validate
diff --git a/elements/pf-tile/demo/icon.html b/elements/pf-v5-tile/demo/icon.html similarity index 76% rename from elements/pf-tile/demo/icon.html rename to elements/pf-v5-tile/demo/icon.html index 6232afca6f..6c59d6faa3 100644 --- a/elements/pf-tile/demo/icon.html +++ b/elements/pf-v5-tile/demo/icon.html @@ -1,26 +1,26 @@
-

pf-icon or svgs

- - +

pf-v5-icon or svgs

+ +

Default

Subtext goes here

- - + +

Selected

Subtext goes here

- - + +

Disabled

Subtext goes here

- +
diff --git a/elements/pf-timestamp/demo/custom-format.html b/elements/pf-v5-timestamp/demo/custom-format.html similarity index 62% rename from elements/pf-timestamp/demo/custom-format.html rename to elements/pf-v5-timestamp/demo/custom-format.html index 3496c027ef..094a64fc00 100644 --- a/elements/pf-timestamp/demo/custom-format.html +++ b/elements/pf-v5-timestamp/demo/custom-format.html @@ -1,5 +1,5 @@
-

+

diff --git a/elements/pf-v5-timestamp/demo/index.html b/elements/pf-v5-timestamp/demo/index.html new file mode 100644 index 0000000000..1b50e9d610 --- /dev/null +++ b/elements/pf-v5-timestamp/demo/index.html @@ -0,0 +1,13 @@ +
+

+
+ + + + diff --git a/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html b/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html new file mode 100644 index 0000000000..a74706684f --- /dev/null +++ b/elements/pf-v5-timestamp/demo/relative-format-with-tooltip.html @@ -0,0 +1,25 @@ +
+

+ + + + +

+

+ + + + +

+
+ + + + diff --git a/elements/pf-v5-timestamp/demo/relative-format.html b/elements/pf-v5-timestamp/demo/relative-format.html new file mode 100644 index 0000000000..9f6e90d2d6 --- /dev/null +++ b/elements/pf-v5-timestamp/demo/relative-format.html @@ -0,0 +1,18 @@ +
+

+

+

+

+

+

+
+ + + + diff --git a/elements/pf-v5-timestamp/demo/tooltip.html b/elements/pf-v5-timestamp/demo/tooltip.html new file mode 100644 index 0000000000..4f692c36aa --- /dev/null +++ b/elements/pf-v5-timestamp/demo/tooltip.html @@ -0,0 +1,25 @@ +
+

+ + + + +

+

+ + + + +

+
+ + + + diff --git a/elements/pf-timestamp/docs/CHANGELOG.old.md b/elements/pf-v5-timestamp/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-timestamp/docs/CHANGELOG.old.md rename to elements/pf-v5-timestamp/docs/CHANGELOG.old.md diff --git a/elements/pf-timestamp/docs/pf-timestamp.md b/elements/pf-v5-timestamp/docs/pf-timestamp.md similarity index 59% rename from elements/pf-timestamp/docs/pf-timestamp.md rename to elements/pf-v5-timestamp/docs/pf-timestamp.md index 821d5bbce9..ea081ec503 100644 --- a/elements/pf-timestamp/docs/pf-timestamp.md +++ b/elements/pf-v5-timestamp/docs/pf-timestamp.md @@ -3,11 +3,11 @@ {% renderOverview %} A timestamp provides consistent formats for displaying date and time values. - Default: + Default: - With a locale of es: + With a locale of es: - Relative time: + Relative time: {% endrenderOverview %} {% band header="Usage" %} @@ -15,7 +15,7 @@ By default, a timestamp will display the current date and time based on the current locale if the date attribute is not set. {% htmlexample %} - + {% endhtmlexample %} ### Basic formats @@ -24,31 +24,31 @@ You can also set the `display-suffix` attribute to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format. {% htmlexample %} - + {% endhtmlexample %} {% htmlexample %} - + {% endhtmlexample %} {% htmlexample %} - + {% endhtmlexample %} {% htmlexample %} - - + {% endhtmlexample %} ### Custom format The format of the displayed content can be further customized by setting the custom-format attributes. Read [datetime format options](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) for a list of options that can be set. {% htmlexample %} - + + ``` Or, if you are using [NPM](https://npm.im), install it @@ -23,7 +23,7 @@ npm install @patternfly/elements Then once installed, import it to your application: ```js -import '@patternfly/elements/pf-tooltip/pf-tooltip.js'; +import '@patternfly/elements/pf-v5-tooltip/pf-v5-tooltip.js'; ``` ## Usage @@ -31,34 +31,34 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js'; ### Basic Tooltip ```html - This is An Element + This is An Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
- + ``` ### Tooltip With Left Positioning (also available: top, right, bottom) ```html - This is An Element + This is An Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
- + ``` ### Tooltip With Left Positioning And Offset ```html - +
This is An Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.
- + ``` diff --git a/elements/pf-v5-tooltip/demo/block-triggers.html b/elements/pf-v5-tooltip/demo/block-triggers.html new file mode 100644 index 0000000000..1a728b26b2 --- /dev/null +++ b/elements/pf-v5-tooltip/demo/block-triggers.html @@ -0,0 +1,60 @@ +
+

Toggle Container Width

+ + + +
+ +
+

Block Triggers

+

Tooltips can wrap block-level elements. + Tooltips which wrap focusable content must not have a tabindex greater than -1. +

+
    +
  • Left Tooltip
    • +
  • Left Start Tooltip
    • +
  • Left End Tooltip
    • +
  • Right Tooltip
    • +
  • Right Start Tooltip
    • +
  • Right End Tooltip
    • +
  • Top Tooltip
    • +
  • Top Start Tooltip
    • +
  • Top End Tooltip
    • +
  • Bottom Tooltip
    • +
  • Bottom Start Tooltip
    • +
  • Bottom End Tooltip
    • +
+
+ + + + diff --git a/elements/pf-v5-tooltip/demo/custom-styles.html b/elements/pf-v5-tooltip/demo/custom-styles.html new file mode 100644 index 0000000000..390c36cc39 --- /dev/null +++ b/elements/pf-v5-tooltip/demo/custom-styles.html @@ -0,0 +1,60 @@ +
+

Toggle Container Width

+ + + +
+ +
+

Tooltips can be styled using CSS custom properties. For example, a tooltip may have + + custom text color + , + + a custom shadow + , or + + custom content padding + . +

+
+ + + + diff --git a/elements/pf-tooltip/demo/flip.html b/elements/pf-v5-tooltip/demo/flip.html similarity index 68% rename from elements/pf-tooltip/demo/flip.html rename to elements/pf-v5-tooltip/demo/flip.html index d22999a3c0..7350a12512 100644 --- a/elements/pf-tooltip/demo/flip.html +++ b/elements/pf-v5-tooltip/demo/flip.html @@ -1,9 +1,9 @@
- - Tooltip! - + Tooltip! +
- - Tooltip! - + Tooltip! +
No flip
@@ -63,33 +63,33 @@ font-weight: bold; } - #custom-styles pf-tooltip:nth-of-type(1) { - --pf-c-tooltip__content--Color: lightblue; + #custom-styles pf-v5-tooltip:nth-of-type(1) { + --pf-v5-c-tooltip__content--Color: lightblue; } - #custom-styles pf-tooltip:nth-of-type(2) { - --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--lg, + #custom-styles pf-v5-tooltip:nth-of-type(2) { + --pf-v5-c-tooltip--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)); } - #custom-styles pf-tooltip:nth-of-type(3) { - --pf-c-tooltip__content--PaddingTop: 2rem; - --pf-c-tooltip__content--PaddingRight: 2rem; - --pf-c-tooltip__content--PaddingBottom: 2rem; - --pf-c-tooltip__content--PaddingLeft: 2rem; + #custom-styles pf-v5-tooltip:nth-of-type(3) { + --pf-v5-c-tooltip__content--PaddingTop: 2rem; + --pf-v5-c-tooltip__content--PaddingRight: 2rem; + --pf-v5-c-tooltip__content--PaddingBottom: 2rem; + --pf-v5-c-tooltip__content--PaddingLeft: 2rem; } diff --git a/elements/pf-tooltip/demo/index.html b/elements/pf-v5-tooltip/demo/index.html similarity index 73% rename from elements/pf-tooltip/demo/index.html rename to elements/pf-v5-tooltip/demo/index.html index d5132a3d01..7b8c713c8b 100644 --- a/elements/pf-tooltip/demo/index.html +++ b/elements/pf-v5-tooltip/demo/index.html @@ -1,21 +1,21 @@

Toggle Container Width

- +

- A Tooltip + A Tooltip is a piece of flow content with an associated secondary piece of hidden flow content. Tooltips which wrap non-interactive content must have a tabindex of 0.

+ + diff --git a/elements/pf-tooltip/demo/slotted-content.html b/elements/pf-v5-tooltip/demo/slotted-content.html similarity index 77% rename from elements/pf-tooltip/demo/slotted-content.html rename to elements/pf-v5-tooltip/demo/slotted-content.html index 050e09c216..220cfce0af 100644 --- a/elements/pf-tooltip/demo/slotted-content.html +++ b/elements/pf-v5-tooltip/demo/slotted-content.html @@ -1,26 +1,26 @@

Toggle Container Width

- +

A tooltip may contain - + HTML content Slotted content can be formatted, using HTML tags like em, strong, or code. - by using the content slot. + by using the content slot. Slotted content must be phrasing content, so no <p>s.

+ + diff --git a/elements/pf-tooltip/docs/CHANGELOG.old.md b/elements/pf-v5-tooltip/docs/CHANGELOG.old.md similarity index 100% rename from elements/pf-tooltip/docs/CHANGELOG.old.md rename to elements/pf-v5-tooltip/docs/CHANGELOG.old.md diff --git a/elements/pf-tooltip/docs/pf-tooltip.md b/elements/pf-v5-tooltip/docs/pf-tooltip.md similarity index 61% rename from elements/pf-tooltip/docs/pf-tooltip.md rename to elements/pf-v5-tooltip/docs/pf-tooltip.md index f84341ad92..1be3099d3d 100644 --- a/elements/pf-tooltip/docs/pf-tooltip.md +++ b/elements/pf-v5-tooltip/docs/pf-tooltip.md @@ -1,133 +1,133 @@ {% renderInstallation %} {% endrenderInstallation %} {% renderOverview %} - ### Default - Tooltip + ### Default + Tooltip
This is some content
- + {% endrenderOverview %} {% band header="Usage" %} ### Left Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Left-Start Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Left-End Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Right Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Right-Start Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Right-End Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Top Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Top-Start Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Top-End Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Bottom Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Bottom-Start Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} ### Bottom-End Tooltip {% htmlexample %} - - Tooltip + + Tooltip
This is some content
- + {% endhtmlexample %} {% endband %} diff --git a/elements/pf-tooltip/docs/screenshot.png b/elements/pf-v5-tooltip/docs/screenshot.png similarity index 100% rename from elements/pf-tooltip/docs/screenshot.png rename to elements/pf-v5-tooltip/docs/screenshot.png diff --git a/elements/pf-tooltip/pf-tooltip.css b/elements/pf-v5-tooltip/pf-v5-tooltip.css similarity index 82% rename from elements/pf-tooltip/pf-tooltip.css rename to elements/pf-v5-tooltip/pf-v5-tooltip.css index 85342283d2..7fe60ddfdc 100644 --- a/elements/pf-tooltip/pf-tooltip.css +++ b/elements/pf-v5-tooltip/pf-v5-tooltip.css @@ -11,7 +11,7 @@ position: relative; max-width: 100%; /** Tooltip arrow width */ - --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem); + --_floating-arrow-size: var(--pf-v5-c-tooltip__arrow--Width, 0.5rem); } #tooltip, @@ -37,32 +37,32 @@ left: 0; will-change: opacity; /** Sets the font color for the tooltip content */ - line-height: var(--pf-c-tooltip--line-height, 1.5); + line-height: var(--pf-v5-c-tooltip--line-height, 1.5); /** Maximum width for the tooltip */ - max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem); + max-width: var(--pf-v5-c-tooltip--MaxWidth, 18.75rem); /** Box shadow for the tooltip */ - box-shadow: var(--pf-c-tooltip--BoxShadow, + box-shadow: var(--pf-v5-c-tooltip--BoxShadow, var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))); /** Tooltip padding (top, right, bottom, left) */ padding: - var(--pf-c-tooltip__content--PaddingTop, + var(--pf-v5-c-tooltip__content--PaddingTop, var(--pf-global--spacer--sm, 0.5rem)) - var(--pf-c-tooltip__content--PaddingRight, + var(--pf-v5-c-tooltip__content--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)) - var(--pf-c-tooltip__content--PaddingBottom, + var(--pf-v5-c-tooltip__content--PaddingBottom, var(--pf-global--spacer--sm, 0.5rem)) - var(--pf-c-tooltip__content--PaddingLeft, + var(--pf-v5-c-tooltip__content--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); /** Font size for the tooltip content */ - font-size: var(--pf-c-tooltip__content--FontSize, + font-size: var(--pf-v5-c-tooltip__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem)); /** Sets the font color for the tooltip content */ - color: var(--pf-c-tooltip__content--Color, + color: var(--pf-v5-c-tooltip__content--Color, var(--pf-global--Color--light-100, #ffffff)); /** Sets the background color for the tooltip content */ - background-color: var(--pf-c-tooltip__content--BackgroundColor, + background-color: var(--pf-v5-c-tooltip__content--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515)); } @@ -73,7 +73,7 @@ width: var(--_floating-arrow-size); height: var(--_floating-arrow-size); will-change: left top right bottom; - background-color: var(--pf-c-tooltip__content--BackgroundColor, + background-color: var(--pf-v5-c-tooltip__content--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515)); } diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-v5-tooltip/pf-v5-tooltip.ts similarity index 97% rename from elements/pf-tooltip/pf-tooltip.ts rename to elements/pf-v5-tooltip/pf-v5-tooltip.ts index c4632c8202..12f1682dba 100644 --- a/elements/pf-tooltip/pf-tooltip.ts +++ b/elements/pf-v5-tooltip/pf-v5-tooltip.ts @@ -14,7 +14,7 @@ import { bound } from '@patternfly/pfe-core/decorators/bound.js'; import { StringListConverter } from '@patternfly/pfe-core'; -import styles from './pf-tooltip.css'; +import styles from './pf-v5-tooltip.css'; const EnterEvents = ['focusin', 'tap', 'click', 'mouseenter']; const ExitEvents = ['focusout', 'blur', 'mouseleave']; @@ -25,8 +25,8 @@ const ExitEvents = ['focusout', 'blur', 'mouseleave']; * @summary Toggle the visibility of helpful or contextual information. * @alias Tooltip */ -@customElement('pf-tooltip') -export class PfTooltip extends LitElement { +@customElement('pf-v5-tooltip') +export class PfV5Tooltip extends LitElement { static readonly styles: CSSStyleSheet[] = [styles]; /** The position of the tooltip, relative to the invoking content */ @@ -179,6 +179,6 @@ export class PfTooltip extends LitElement { declare global { interface HTMLElementTagNameMap { - 'pf-tooltip': PfTooltip; + 'pf-v5-tooltip': PfV5Tooltip; } } diff --git a/elements/pf-tooltip/test/pf-tooltip.e2e.ts b/elements/pf-v5-tooltip/test/pf-tooltip.e2e.ts similarity index 95% rename from elements/pf-tooltip/test/pf-tooltip.e2e.ts rename to elements/pf-v5-tooltip/test/pf-tooltip.e2e.ts index 0c645f9bba..e51a80a7fb 100644 --- a/elements/pf-tooltip/test/pf-tooltip.e2e.ts +++ b/elements/pf-v5-tooltip/test/pf-tooltip.e2e.ts @@ -2,7 +2,7 @@ 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-tooltip'; +const tagName = 'pf-v5-tooltip'; test.describe(tagName, () => { test('snapshot', async ({ page }) => { diff --git a/elements/pf-tooltip/test/pf-tooltip.spec.ts b/elements/pf-v5-tooltip/test/pf-tooltip.spec.ts similarity index 76% rename from elements/pf-tooltip/test/pf-tooltip.spec.ts rename to elements/pf-v5-tooltip/test/pf-tooltip.spec.ts index db8ae23c17..06317a94d9 100644 --- a/elements/pf-tooltip/test/pf-tooltip.spec.ts +++ b/elements/pf-v5-tooltip/test/pf-tooltip.spec.ts @@ -1,12 +1,12 @@ import { expect, html, fixture } from '@open-wc/testing'; import type { A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; -import { PfTooltip } from '../pf-tooltip.js'; +import { PfV5Tooltip } from '../pf-v5-tooltip.js'; import { setViewport, sendMouse } from '@web/test-runner-commands'; import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; -describe('', function() { - let element: PfTooltip; +describe('', function() { + let element: PfV5Tooltip; let snapshot: A11yTreeSnapshot; beforeEach(async function() { @@ -14,22 +14,22 @@ describe('', function() { }); it('imperatively instantiates', function() { - expect(document.createElement('pf-tooltip')).to.be.an.instanceof(PfTooltip); + expect(document.createElement('pf-v5-tooltip')).to.be.an.instanceof(PfV5Tooltip); }); it('should upgrade', async function() { - element = await fixture(html``); - const klass = customElements.get('pf-tooltip'); + element = await fixture(html``); + const klass = customElements.get('pf-v5-tooltip'); expect(element) .to.be.an.instanceOf(klass) .and - .to.be.an.instanceOf(PfTooltip); + .to.be.an.instanceOf(PfV5Tooltip); }); describe('typical usage', function() { beforeEach(async function() { - element = await fixture(html` - Tooltip + element = await fixture(html` + Tooltip `); snapshot = await a11ySnapshot(); });