From 67f8ed4ed5a3f4e185c58675694fd1c573172f57 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 19 Oct 2023 13:35:59 +0300 Subject: [PATCH 1/3] fix(clipboard-copy)!: remove BaseClipboardCopy Closes #2611 --- .changeset/remove-base-clipboard-copy.md | 5 ++ elements/package.json | 1 - .../pf-clipboard-copy/BaseClipboardCopy.css | 6 -- .../pf-clipboard-copy/BaseClipboardCopy.ts | 29 ---------- .../pf-clipboard-copy/pf-clipboard-copy.css | 6 ++ .../pf-clipboard-copy/pf-clipboard-copy.ts | 56 ++++++++++++------- 6 files changed, 47 insertions(+), 56 deletions(-) create mode 100644 .changeset/remove-base-clipboard-copy.md delete mode 100644 elements/pf-clipboard-copy/BaseClipboardCopy.css delete mode 100644 elements/pf-clipboard-copy/BaseClipboardCopy.ts diff --git a/.changeset/remove-base-clipboard-copy.md b/.changeset/remove-base-clipboard-copy.md new file mode 100644 index 0000000000..dc2cbd20a0 --- /dev/null +++ b/.changeset/remove-base-clipboard-copy.md @@ -0,0 +1,5 @@ +--- +"@patternfly/elements": major +--- +``: Removed `BaseClipboardCopy` class. Reimplement (recommended) or extend `PfClipboardCopy`. + diff --git a/elements/package.json b/elements/package.json index 357d3d1111..f688ae6835 100644 --- a/elements/package.json +++ b/elements/package.json @@ -28,7 +28,6 @@ "./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/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js", "./pf-clipboard-copy/pf-clipboard-copy.js": "./pf-clipboard-copy/pf-clipboard-copy.js", "./pf-code-block/BaseCodeBlock.js": "./pf-code-block/BaseCodeBlock.js", "./pf-code-block/pf-code-block.js": "./pf-code-block/pf-code-block.js", diff --git a/elements/pf-clipboard-copy/BaseClipboardCopy.css b/elements/pf-clipboard-copy/BaseClipboardCopy.css deleted file mode 100644 index a90e4b1cad..0000000000 --- a/elements/pf-clipboard-copy/BaseClipboardCopy.css +++ /dev/null @@ -1,6 +0,0 @@ -[hidden], -[inert], -[inert]::slotted(*) { - display: none !important; -} - diff --git a/elements/pf-clipboard-copy/BaseClipboardCopy.ts b/elements/pf-clipboard-copy/BaseClipboardCopy.ts deleted file mode 100644 index 5dfcdc0b69..0000000000 --- a/elements/pf-clipboard-copy/BaseClipboardCopy.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { LitElement } from 'lit'; -import { ComposedEvent } from '@patternfly/pfe-core'; -import styles from './BaseClipboardCopy.css'; - -export class ClipboardCopyCopiedEvent extends ComposedEvent { - constructor( - public text: string - ) { - super('copy'); - } -} - -/** - * Clipboard Copy - * @slot - Place element content here - */ -export abstract class BaseClipboardCopy extends LitElement { - static readonly styles = [styles]; - - abstract value: string; - - /** - * Copy the current value to the clipboard. - */ - async copy() { - await navigator.clipboard.writeText(this.value); - this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value)); - } -} diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.css b/elements/pf-clipboard-copy/pf-clipboard-copy.css index 295220cc8a..c15223b0b2 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.css +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.css @@ -3,6 +3,12 @@ flex-direction: column; } +[hidden], +[inert], +[inert]::slotted(*) { + display: none !important; +} + #input-group, #wrapper, pf-tooltip, diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index d62525b97b..e04f163d13 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -1,11 +1,9 @@ -import { html } from 'lit'; +import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; -import { BaseClipboardCopy } from './BaseClipboardCopy.js'; - import styles from './pf-clipboard-copy.css'; import '@patternfly/elements/pf-button/pf-button.js'; @@ -14,6 +12,12 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js'; const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); +export class ClipboardCopyCopiedEvent extends Event { + constructor(public text: string) { + super('copy', { bubbles: true }); + } +} + /** * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard. * @@ -21,44 +25,52 @@ const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); * @slot actions - Place additional action buttons here */ @customElement('pf-clipboard-copy') -export class PfClipboardCopy extends BaseClipboardCopy { - static readonly styles = [...BaseClipboardCopy.styles, styles]; +export class PfClipboardCopy extends LitElement { + static readonly styles = [styles]; - static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true }; + static shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; - @property({ attribute: 'click-tip' }) clickTip = 'Copied'; + /** Tooltip message to display when clicking the copy button */ + @property({ attribute: 'click-tip' }) clickTip = 'Successfully copied to clipboard!'; - @property({ attribute: 'hover-tip' }) hoverTip = 'Copy'; + /** Tooltip message to display when hover the copy button */ + @property({ attribute: 'hover-tip' }) hoverTip = 'Copy to clipboard'; - @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input'; + /** Accessible label to use on the text input. */ + @property({ attribute: 'accessible-text-label' }) accessibleTextLabel = 'Copyable input'; - @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content'; + /** Accessible label to use on the toggle button. */ + @property({ attribute: 'accessible-toggle-label' }) accessibleToggleLabel = 'Show content'; + /** Delay in ms before the tooltip appears. */ @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300; + /** Delay in ms before the tooltip disappears. */ @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500; + /** Flag to determine if inline clipboard copy should be block styling */ @property({ type: Boolean, reflect: true }) block = false; + /** Flag to determine if clipboard copy content includes code */ @property({ type: Boolean, reflect: true }) code = false; + /** Flag to determine if clipboard copy is in the expanded state */ @property({ type: Boolean, reflect: true }) expanded = false; - /** - * Implies not `inline`. - */ + /** Implies not `inline`. */ @property({ type: Boolean, reflect: true }) expandable = false; + /** Flag to show if the input is read only. */ @property({ type: Boolean, reflect: true }) readonly = false; - /** - * Implies not expandable. Overrules `expandable`. - */ + /** Implies not expandable. Overrules `expandable`. */ @property({ type: Boolean, reflect: true }) inline = false; + /** Flag to determine if inline clipboard copy should have compact styling */ @property({ type: Boolean, reflect: true }) compact = false; - @property() override value = ''; + /** String to copy */ + @property() value = ''; #copied = false; @@ -96,7 +108,7 @@ export class PfClipboardCopy extends BaseClipboardCopy { ?disabled="${expanded || readonly}" .value="${this.value}" @input="${this.#onChange}" - aria-label="${this.textAriaLabel}"> + aria-label="${this.accessibleTextLabel}"> Date: Sun, 31 Mar 2024 13:20:14 +0300 Subject: [PATCH 2/3] fix(clipboard-copy): use pfv4 styles --- elements/form-control.css | 127 +++++++++++++++ elements/package.json | 2 + .../pf-clipboard-copy/pf-clipboard-copy.css | 151 ++++++++---------- .../pf-clipboard-copy/pf-clipboard-copy.ts | 37 ++--- 4 files changed, 215 insertions(+), 102 deletions(-) create mode 100644 elements/form-control.css diff --git a/elements/form-control.css b/elements/form-control.css new file mode 100644 index 0000000000..cbb3e0206a --- /dev/null +++ b/elements/form-control.css @@ -0,0 +1,127 @@ +:host { + --pf-c-form-control--Color: var(--pf-global--Color--100, #151515); + --pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem); + --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5); + --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + --pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0); + --pf-c-form-control--BorderRadius: 0; + --pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff); + --pf-c-form-control--Width: 100%; + --pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)); + --pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem); + --pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + --pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + --pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base); + --pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base); + --pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + --pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth)); + --pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + --pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth)); + --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c); + --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73); + --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515); + --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73); + --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0); + --pf-c-form-control--disabled--BorderColor: transparent; + --pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0); + --pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + --pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm)); + --pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90); + --pf-c-form-control--readonly--m-plain--BackgroundColor: transparent; + --pf-c-form-control--readonly--m-plain--inset--base: 0; + --pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth)); + --pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635); + --pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem); + --pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft)); + --pf-c-form-control--success--BackgroundPositionY: center; + --pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY); + --pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize); + --pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize); + --pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY); + --pf-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"); + --pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth)); + --pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00); + --pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem); + --pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem)); + --pf-c-form-control--m-warning--BackgroundPositionY: center; + --pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY); + --pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem; + --pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize); + --pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY); + --pf-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"); + --pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px); + --pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth)); + --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b); + --pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem); + --pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft)); + --pf-c-form-control--invalid--BackgroundPositionY: center; + --pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY); + --pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize); + --pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize); + --pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY); + --pf-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"); + --pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat; + --pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background); + --pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem); + --pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight); + --pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize); + --pf-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"); + --pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer)); + --pf-c-form-control--m-icon--BackgroundUrl: none; + --pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base)); + --pf-c-form-control--m-icon--BackgroundPositionY: center; + --pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize); + --pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize); + --pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem); + --pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer)); + --pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX)); + --pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl); + --pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY); + --pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY); + --pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl); + --pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY); + --pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY); + --pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl); + --pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY); + --pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY); + --pf-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"); + --pf-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"); + --pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth)); + --pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth)); + --pf-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"); + --pf-c-form-control__select--BackgroundSize: .625em; + --pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px); + --pf-c-form-control__select--BackgroundPositionY: center; + --pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY); + --pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + --pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem)); + --pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + --pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem); + --pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem); + --pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem)); + --pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width); + --pf-c-form-control--textarea--Height: auto; + --pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft); + --pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft); + --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft); + --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' 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%0A"); + --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("data:image/svg+xml,%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.346 7.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%0A"); + --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' 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.346 7.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%0A"); + --pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23151515' 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%0A"); + --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M505 442.7 405.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%0A"); + --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' 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%0A"); + --pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' 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.4-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%0A"); + --pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize); + --pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px); + --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg)); + --pf-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); + --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg)); +} diff --git a/elements/package.json b/elements/package.json index f688ae6835..ba56e75740 100644 --- a/elements/package.json +++ b/elements/package.json @@ -10,6 +10,8 @@ "types": "./pfe.d.ts", "exports": { ".": "./pfe.min.js", + "./form-control.css": "./form-control.css", + "./form-control.css.js": "./form-control.css.js", "./pf-accordion/BaseAccordion.js": "./pf-accordion/BaseAccordion.js", "./pf-accordion/BaseAccordionHeader.js": "./pf-accordion/BaseAccordionHeader.js", "./pf-accordion/BaseAccordionPanel.js": "./pf-accordion/BaseAccordionPanel.js", diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.css b/elements/pf-clipboard-copy/pf-clipboard-copy.css index c15223b0b2..c60e357cde 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.css +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.css @@ -1,6 +1,30 @@ -.container { - display: flex; - flex-direction: column; +:host { + --pf-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s; + --pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg; + --pf-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-global--spacer--md, 1rem); + --pf-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-global--spacer--md, 1rem); + --pf-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-global--spacer--md, 1rem); + --pf-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-global--spacer--md, 1rem); + --pf-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff); + --pf-c-clipboard-copy__expandable-content--BorderTopWidth: 0; + --pf-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px); + --pf-c-clipboard-copy__expandable-content--BorderColor: var(--pf-global--BorderColor--100, #d2d2d2); + --pf-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs, 0.25rem)); + --pf-c-clipboard-copy--m-inline--PaddingTop: 0; + --pf-c-clipboard-copy--m-inline--PaddingBottom: 0; + --pf-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-global--spacer--xs, 0.25rem); + --pf-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0); + --pf-c-clipboard-copy__text--m-code--FontFamily: var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace); + --pf-c-clipboard-copy__text--m-code--FontSize: var(--pf-global--FontSize--sm, 0.875rem); + --pf-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)); + --pf-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-global--spacer--form-element, 0.375rem)); + --pf-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem); + --pf-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem); + --pf-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem); + --pf-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem); + --pf-icon--size: var(--pf-global--FontSize--md, 1rem); } [hidden], @@ -9,10 +33,13 @@ display: none !important; } +#container { + flex-direction: column; +} + +#container, #input-group, -#wrapper, -pf-tooltip, -pf-button { +#wrapper { display: flex; } @@ -20,87 +47,64 @@ pf-button { display: inline-flex; } -pf-button { - height: 100%; -} - -pf-tooltip::part(invoker) { - display: flex; - height: 100%; -} - -:host { - --pf-icon--size: var(--pf-global--FontSize--md, 1rem); -} - #input-group > * + * { margin-left: -1px; } input { - color: var(--pf-c-form-control--Color, - var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515))); + color: var(--pf-c-form-control--Color); width: var(--pf-c-form-control--Width); padding: - var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))) - var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem))) - var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))) - var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem))); + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingRight) + var(--pf-c-form-control--PaddingBottom) + var(--pf-c-form-control--PaddingLeft); font-size: var(--pf-c-form-control--FontSize); line-height: var(--pf-c-form-control--LineHeight); background-color: var(--pf-c-form-control--BackgroundColor); background-repeat: no-repeat; - border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid; + border: var(--pf-c-form-control--BorderWidth) solid; border-color: - var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0)) - var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0)) - var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90)) - var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0)); - border-radius: var(--pf-c-form-control--BorderRadius, 0); + var(--pf-c-form-control--BorderTopColor) + var(--pf-c-form-control--BorderRightColor) + var(--pf-c-form-control--BorderBottomColor) + var(--pf-c-form-control--BorderLeftColor); + border-radius: var(--pf-c-form-control--BorderRadius); margin: 0; appearance: none; - height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px); + height: var(--pf-c-form-control--Height); text-overflow: ellipsis; flex: 1 1 auto; } input[disabled] { - background-color: var(--pf-c-form-control--readonly--BackgroundColor, - var(--pf-global--disabled-color--300, #f0f0f0)); + background-color: var(--pf-c-form-control--readonly--BackgroundColor); } textarea { display: flex; flex: 1 1 auto; padding: - var(--pf-c-clipboard-copy__expandable-content--PaddingTop, - var(--pf-global--spacer--md, 1rem)) - var(--pf-c-clipboard-copy__expandable-content--PaddingRight, - var(--pf-global--spacer--md, 1rem)) - var(--pf-c-clipboard-copy__expandable-content--PaddingBottom, - var(--pf-global--spacer--md, 1rem)) - var(--pf-c-clipboard-copy__expandable-content--PaddingLeft, - var(--pf-global--spacer--md, 1rem)); + var(--pf-c-clipboard-copy__expandable-content--PaddingTop) + var(--pf-c-clipboard-copy__expandable-content--PaddingRight) + var(--pf-c-clipboard-copy__expandable-content--PaddingBottom) + var(--pf-c-clipboard-copy__expandable-content--PaddingLeft); word-wrap: break-word; - background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff)); + background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor); background-clip: padding-box; - border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2)); + border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor); border-width: - var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0) - var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth, - var(--pf-global--BorderWidth--sm, 1px)) - var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth, - var(--pf-global--BorderWidth--sm, 1px)) - var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth, - var(--pf-global--BorderWidth--sm, 1px)); + var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth) + var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth) + var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth) + var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth); box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow); margin: 0; color: inherit; font-family: inherit; } -.container.code textarea { +#container.code textarea { font-family: var(--pf-global--FontFamily--monospace, var(--pf-global--FontFamily--redhat--monospace, "RedHatMono", @@ -113,36 +117,24 @@ textarea { monospace)); } -.container.expanded #expand-button pf-icon { +#container.expanded #expand-button pf-icon { rotate: 90deg; } -.container.inline { +#container.inline { display: inline; - background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor, - var(--pf-global--BackgroundColor--200, #f0f0f0)); - padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px); - padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px); - padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft, - var(--pf-global--spacer--xs, 0.25rem)); + background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor); + padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop); + padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom); + padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft); word-break: break-word; white-space: normal; } -#input-group { - display: flex; - height: 100%; -} - -.container:is(.compact, .inline) #input-group { +#container:is(.compact, .inline) #input-group { display: contents; } -.container:is(.compact, .inline) pf-tooltip, -.container:is(.compact, .inline) pf-tooltip::part(invoker) { - display: inline-flex; -} - .container:is(.compact, .inline) #input-group { background-color: var(--pf-c-button--m-plain--BackgroundColor, var(--pf-global--BackgroundColor--200, #f0f0f0)); @@ -150,20 +142,15 @@ textarea { .container.compact.block { display: block; - background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor, - var(--pf-global--BackgroundColor--200, #f0f0f0)); + background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor); } .container:is(.compact, .inline) #copy-button, .container:is(.compact, .inline) slot[name="actions"]::slotted(*) { - --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop, - var(--pf-global--spacer--xs, 0.25rem)); - --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight, - var(--pf-global--spacer--xs, 0.25rem)); - --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom, - var(--pf-global--spacer--xs, 0.25rem)); - --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft, - var(--pf-global--spacer--sm, 0.5rem)); + --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop) !important; + --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight) !important; + --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom) !important; + --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft) !important; margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop)); margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom)); } diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index e04f163d13..7cc77b130c 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import styles from './pf-clipboard-copy.css'; +import formControlStyles from '../form-control.css'; import '@patternfly/elements/pf-button/pf-button.js'; import '@patternfly/elements/pf-icon/pf-icon.js'; @@ -26,9 +27,9 @@ export class ClipboardCopyCopiedEvent extends Event { */ @customElement('pf-clipboard-copy') export class PfClipboardCopy extends LitElement { - static readonly styles = [styles]; + static readonly styles = [formControlStyles, styles]; - static shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + static override readonly shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; /** Tooltip message to display when clicking the copy button */ @property({ attribute: 'click-tip' }) clickTip = 'Successfully copied to clipboard!'; @@ -90,33 +91,29 @@ export class PfClipboardCopy extends LitElement { render() { const { expanded, expandable, inline, compact, code, block, readonly } = this; return html` -
+
+ variant="control" + label="EXPAND" + ?inert="${!expandable}" + @click="${this.#onClick}">
${this.value} - + - + icon="copy" + variant="${ifDefined(!(inline || compact) ? 'control' : undefined)}" + label="${this.hoverTip}" + @click="${this.copy}"> ${this.#copied ? this.clickTip : this.hoverTip} From 5532aebbae1d968e3844aabc568d674b6aa2902e Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 31 Mar 2024 13:24:05 +0300 Subject: [PATCH 3/3] fix(clipboard-copy)!: rename ClipboardCopyCopiedEvent to PfClipboardCopyCopiedEvent --- .changeset/remove-base-clipboard-copy.md | 32 ++++++++++++++++++- .../pf-clipboard-copy/pf-clipboard-copy.ts | 5 +-- 2 files changed, 34 insertions(+), 3 deletions(-) diff --git a/.changeset/remove-base-clipboard-copy.md b/.changeset/remove-base-clipboard-copy.md index dc2cbd20a0..f121291d7d 100644 --- a/.changeset/remove-base-clipboard-copy.md +++ b/.changeset/remove-base-clipboard-copy.md @@ -1,5 +1,35 @@ --- "@patternfly/elements": major --- -``: Removed `BaseClipboardCopy` class. Reimplement (recommended) or extend `PfClipboardCopy`. +``: Removed `BaseClipboardCopy` class. +Reimplement (recommended) or extend `PfClipboardCopy`. +Renames `AvatarLoadEvent` to `PfAvatarLoadEvent` and moves it to `pf-avatar.js`. + +**Before**: + +```js +import { + ClipboardCopyCopiedEvent +} from '@patternfly/elements/pf-clipboard-copy/BaseClipboardCopy.js'; + +addEventListener('copy', function(event) { + if (event instanceof ClipboardCopyCopiedEvent) { + // ... + } +}); +``` + +**After**: + +```js +import { + PfClipboardCopyCopiedEvent +} from '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js'; + +addEventListener('copy', function(event) { + if (event instanceof PfClipboardCopyCopiedEvent) { + // ... + } +}); +``` diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index 7cc77b130c..6a0edb6ddc 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -13,7 +13,7 @@ import '@patternfly/elements/pf-tooltip/pf-tooltip.js'; const sleep = (ms?: number) => new Promise(r => setTimeout(r, ms)); -export class ClipboardCopyCopiedEvent extends Event { +export class PfClipboardCopyCopiedEvent extends Event { constructor(public text: string) { super('copy', { bubbles: true }); } @@ -24,6 +24,7 @@ export class ClipboardCopyCopiedEvent extends Event { * * @slot - Place content to copy here, or use the `value` attribute * @slot actions - Place additional action buttons here + * @fires {PfClipboardCopyCopiedEvent} copy - when the text snippet is successfully copied. */ @customElement('pf-clipboard-copy') export class PfClipboardCopy extends LitElement { @@ -156,7 +157,7 @@ export class PfClipboardCopy extends LitElement { */ async copy() { await navigator.clipboard.writeText(this.value); - this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value)); + this.dispatchEvent(new PfClipboardCopyCopiedEvent(this.value)); await sleep(this.entryDelay); this.#copied = true; this.requestUpdate();