From 3baa4987bb684790087ff03e41d34f48c86edfce Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 19 Oct 2023 11:37:11 +0300 Subject: [PATCH] fix(label)!: remove BaseLabel Closes #2620 --- .changeset/remove-base-label.md | 4 ++ elements/package.json | 1 - elements/pf-label/BaseLabel.css | 44 ---------------- elements/pf-label/BaseLabel.ts | 53 ------------------- elements/pf-label/pf-label.css | 41 +++++++++++++-- elements/pf-label/pf-label.ts | 93 +++++++++++++++++---------------- 6 files changed, 90 insertions(+), 146 deletions(-) create mode 100644 .changeset/remove-base-label.md delete mode 100644 elements/pf-label/BaseLabel.css delete mode 100644 elements/pf-label/BaseLabel.ts diff --git a/.changeset/remove-base-label.md b/.changeset/remove-base-label.md new file mode 100644 index 0000000000..bc79ff2729 --- /dev/null +++ b/.changeset/remove-base-label.md @@ -0,0 +1,4 @@ +--- +"@patternfly/elements": major +--- +``: Removed `BaseLabel` class. Reimplement (recommended) or extend `PfLabel`. diff --git a/elements/package.json b/elements/package.json index 0cd47fe88f..192ad19080 100644 --- a/elements/package.json +++ b/elements/package.json @@ -35,7 +35,6 @@ "./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/BaseLabel.js": "./pf-label/BaseLabel.js", "./pf-label/pf-label.js": "./pf-label/pf-label.js", "./pf-modal/pf-modal.js": "./pf-modal/pf-modal.js", "./pf-panel/pf-panel.js": "./pf-panel/pf-panel.js", diff --git a/elements/pf-label/BaseLabel.css b/elements/pf-label/BaseLabel.css deleted file mode 100644 index 178d4ed79a..0000000000 --- a/elements/pf-label/BaseLabel.css +++ /dev/null @@ -1,44 +0,0 @@ -:host { - position: relative; - white-space: nowrap; - border: 0; -} - -pf-icon, ::slotted(pf-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; -} - -#container::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ""; -} - -[part=icon] { - display: none; - pointer-events: none; -} - -.hasIcon [part=icon] { - display: inline-flex; - width: 1em; -} - diff --git a/elements/pf-label/BaseLabel.ts b/elements/pf-label/BaseLabel.ts deleted file mode 100644 index a3f524c6cb..0000000000 --- a/elements/pf-label/BaseLabel.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { LitElement, html } from 'lit'; -import { classMap } from 'lit/directives/class-map.js'; - -import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; - -import styles from './BaseLabel.css'; - -/** - * Base label class -*/ -export abstract class BaseLabel extends LitElement { - static readonly styles = [styles]; - - abstract variant?: string; - - abstract color?: string; - - abstract icon?: string; - - /** Represents the state of the anonymous and icon slots */ - protected slots = new SlotController(this, null, 'icon'); - - override render() { - const { variant, color, icon } = this; - const hasIcon = !!icon || this.slots.hasSlotted('icon'); - return html` - - ${this.renderDefaultIcon?.()} - - ${this.renderSuffix?.() ?? ''} - - `; - } - - /** - * Fallback content for the icon slot. When the `icon` attribute is set, it - * should render an icon corresponding to the value. - * - * @example ```html - * - * ``` - */ - protected abstract renderDefaultIcon?(): unknown; - - /** - * Optional override to render content after the anonymous slot. - * @example ```html - * - * ``` - */ - protected abstract renderSuffix?(): unknown; -} diff --git a/elements/pf-label/pf-label.css b/elements/pf-label/pf-label.css index 8705c80cda..9ceb276661 100644 --- a/elements/pf-label/pf-label.css +++ b/elements/pf-label/pf-label.css @@ -1,10 +1,25 @@ -#pf-container { - display: contents; +:host { + position: relative; + white-space: nowrap; + border: 0; } +pf-icon, ::slotted(pf-icon) { + color: currentColor; +} + +:host, #container { - --pf-global--icon--FontSize--sm: 14px; + display: inline-flex; + align-items: center; + vertical-align: middle; +} +#container { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + border-width: 0; padding-top: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)); padding-left: var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); padding-bottom: var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)); @@ -15,13 +30,32 @@ border-radius: var(--pf-c-label--BorderRadius, 30em); max-width: var(--pf-c-label__content--MaxWidth, 100%); color: var(--pf-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-c-label--BorderRadius, 30em); border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-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 { --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0); --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)); @@ -30,7 +64,6 @@ --pf-global--icon--FontSize--sm: 12px; } - .blue { --pf-c-label__content--Color: var(--pf-c-label--m-blue__content--Color, var(--pf-global--info-color--200, #002952)); --pf-c-label--BackgroundColor: var(--pf-c-label--m-blue--BackgroundColor, var(--pf-global--palette--blue-50, #e7f1fa)); diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts index fa5309f3ee..be6627a713 100644 --- a/elements/pf-label/pf-label.ts +++ b/elements/pf-label/pf-label.ts @@ -1,31 +1,19 @@ -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 { ComposedEvent } from '@patternfly/pfe-core'; - -import { BaseLabel } from './BaseLabel.js'; +import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; import '@patternfly/elements/pf-button/pf-button.js'; import styles from './pf-label.css'; -export type LabelVariant = ( - | 'filled' - | 'outline' -); - -export type LabelColor = ( - | 'blue' - | 'cyan' - | 'green' - | 'orange' - | 'purple' - | 'red' - | 'grey' - | 'gold' -) +export class LabelCloseEvent extends Event { + constructor() { + super('close', { bubbles: true }); + } +} /** * The **label** component allows users to add specific element captions for user @@ -33,7 +21,7 @@ export type LabelColor = ( * * @summary Allows users to display meta data in a stylized form. * - * @fires close - when a removable label's close button is clicked + * @fires {LabelCloseEvent} close - when a removable label's close button is clicked * * @cssprop {} --pf-c-label--FontSize {@default `0.875em`} * @@ -112,22 +100,22 @@ export type LabelColor = ( * @cssprop {} --pf-c-label--m-compact--PaddingLeft {@default `0.5rem`} */ @customElement('pf-label') -export class PfLabel extends BaseLabel { - static readonly styles = [...BaseLabel.styles, styles]; +export class PfLabel extends LitElement { + static readonly styles = [styles]; - static readonly shadowRootOptions: ShadowRootInit = { ...BaseLabel.shadowRootOptions, delegatesFocus: true }; + static readonly shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true }; /** * Changes the style of the label. * - Filled: Colored background with colored border. * - Outline: White background with colored border. */ - @property() variant: LabelVariant = 'filled'; + @property() variant: 'filled' | 'outline' = 'filled'; /** * Changes the color of the label */ - @property() color: LabelColor = 'grey'; + @property() color: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold' = 'grey'; /** Shorthand for the `icon` slot, the value is icon name */ @property() icon?: string; @@ -144,34 +132,51 @@ export class PfLabel extends BaseLabel { /** Text label for a removable label's close button */ @property({ attribute: 'close-button-label' }) closeButtonLabel?: string; + /** Represents the state of the anonymous and icon slots */ + #slots = new SlotController(this, null, 'icon'); + override render() { const { compact, truncated } = this; + const { variant, color, icon } = this; + const hasIcon = !!icon || this.#slots.hasSlotted('icon'); return html` - ${super.render()} - `; - } - - protected override renderDefaultIcon() { - return !this.icon ? '' : html` - + + + + + + + + + + + + + `; } - protected override renderSuffix() { - return !this.removable ? '' : html` - - - - - - - - `; + #onClickClose() { + if (this.removable && this.dispatchEvent(new LabelCloseEvent())) { + this.remove(); + } } } +export type LabelVariant = PfLabel['variant']; + +export type LabelColor = PfLabel['color']; + declare global { interface HTMLElementTagNameMap { 'pf-label': PfLabel;