diff --git a/docs/main.mjs b/docs/main.mjs index d56d42bf2d..36323bb558 100644 --- a/docs/main.mjs +++ b/docs/main.mjs @@ -13,7 +13,7 @@ import '@patternfly/elements/pf-v5-helper-text/pf-v5-helper-text.js'; import '@patternfly/elements/pf-v5-hint/pf-v5-hint.js'; import '@patternfly/elements/pf-v5-jump-links/pf-v5-jump-links.js'; import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js'; -import '@patternfly/elements/pf-v5-label/pf-v5-label.js'; +import '@patternfly/elements/pf-v6-label/pf-v6-label.js'; import '@patternfly/elements/pf-v5-modal/pf-v5-modal.js'; import '@patternfly/elements/pf-v5-panel/pf-v5-panel.js'; import '@patternfly/elements/pf-v5-popover/pf-v5-popover.js'; diff --git a/elements/pf-v5-label-group/README.md b/elements/pf-v5-label-group/README.md index 916f75e55d..c2a82fa00e 100644 --- a/elements/pf-v5-label-group/README.md +++ b/elements/pf-v5-label-group/README.md @@ -30,9 +30,9 @@ import '@patternfly/elements/pf-v5-label-group/pf-v5-label-group.js'; ```html - Security - Performance - Networking + Security + Performance + Networking ``` @@ -40,7 +40,7 @@ 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 index f77c341f9d..a5435b30cc 100644 --- a/elements/pf-v5-label-group/demo/index.html +++ b/elements/pf-v5-label-group/demo/index.html @@ -1,7 +1,7 @@ - Blue - Green - Orange + Blue + Green + Orange -``` - -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-label/pf-v5-label.js'; -``` - -## Usage - -Default -```html -

Some Text Your label text here

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

Some Text Your label text here

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

Some Text Your label text here

-``` - -Outline variant: -```html -

Some Text Your label text here

-``` - -> ### Conveying meaning to assistive technologies -> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that -> information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text -> hidden with the a class. - - -```html - - Some text Some additional info - -``` diff --git a/elements/pf-v5-label/demo/compact.html b/elements/pf-v5-label/demo/compact.html deleted file mode 100644 index ca72baf22a..0000000000 --- a/elements/pf-v5-label/demo/compact.html +++ /dev/null @@ -1,21 +0,0 @@ -
- 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 deleted file mode 100644 index 03a80c68a5..0000000000 --- a/elements/pf-v5-label/demo/filled-color.html +++ /dev/null @@ -1,32 +0,0 @@ -
- 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 deleted file mode 100644 index 936d743edc..0000000000 --- a/elements/pf-v5-label/demo/icon.html +++ /dev/null @@ -1,33 +0,0 @@ -
-
- 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-v5-label/demo/index.html b/elements/pf-v5-label/demo/index.html deleted file mode 100644 index a1bfef0c68..0000000000 --- a/elements/pf-v5-label/demo/index.html +++ /dev/null @@ -1,13 +0,0 @@ -
- Default -
- - - - diff --git a/elements/pf-v5-label/demo/link.html b/elements/pf-v5-label/demo/link.html deleted file mode 100644 index d2ba371cc4..0000000000 --- a/elements/pf-v5-label/demo/link.html +++ /dev/null @@ -1,14 +0,0 @@ -
- Blue - Green - Orange - Red Hat - Purple - Cyan - Gold - Grey -
- - diff --git a/elements/pf-v5-label/demo/outline-color.html b/elements/pf-v5-label/demo/outline-color.html deleted file mode 100644 index 1627872a8c..0000000000 --- a/elements/pf-v5-label/demo/outline-color.html +++ /dev/null @@ -1,20 +0,0 @@ -
- Blue - Green - Orange - Red - Purple - Cyan - Gold - Grey -
- - - - diff --git a/elements/pf-v5-label/demo/patternfly.html b/elements/pf-v5-label/demo/patternfly.html deleted file mode 100644 index 47e45906d8..0000000000 --- a/elements/pf-v5-label/demo/patternfly.html +++ /dev/null @@ -1,200 +0,0 @@ -
-

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-v5-label/docs/CHANGELOG.old.md b/elements/pf-v5-label/docs/CHANGELOG.old.md deleted file mode 100644 index a4484ee8c1..0000000000 --- a/elements/pf-v5-label/docs/CHANGELOG.old.md +++ /dev/null @@ -1,111 +0,0 @@ -# @patternfly/pfe-label - -## 1.0.0-next.7 - -### Minor Changes - -- af005e2ca: Made abstract props `color`, `icon`, and `variant` optional, removed `classes` protected property in favour of composition, refactored shadow CSS - -### Patch Changes - -- Updated dependencies [b841afe40] -- Updated dependencies [0fe6c52db] -- Updated dependencies [0fe6c52db] -- Updated dependencies [b841afe40] -- Updated dependencies [0fe6c52db] -- Updated dependencies [bbcfb687f] - - @patternfly/pfe-core@2.0.0-next.13 - - @patternfly/pfe-button@2.0.0-next.9 - -## 1.0.0-next.6 - -### Patch Changes - -- 7e95ddbe: - Abstracted base class property fields - - Removed reflected properties in pfe-tabs.ts opting for classMap() usage -- Updated dependencies [6b6e2617] -- Updated dependencies [6b6e2617] - - @patternfly/pfe-button@2.0.0-next.8 - - @patternfly/pfe-core@2.0.0-next.12 - -## 1.0.0-next.5 - -### Patch Changes - -- a4b92f42: Fix label style loading -- d4442a66: Moved all pfe css property referencing styles from the `BaseLabel.scss` into to `pfe-label.scss` -- 07ad1d3d: Updates use of `` -- Updated dependencies [07ad1d3d] -- Updated dependencies [07ad1d3d] - - @patternfly/pfe-icon@2.0.0-next.5 - - @patternfly/pfe-core@2.0.0-next.10 - - @patternfly/pfe-button@2.0.0-next.7 - -## 1.0.0-next.4 - -### Patch Changes - -- bfad8b4b: Updates dependencies -- Updated dependencies [bfad8b4b] -- Updated dependencies [bfad8b4b] -- Updated dependencies [a423b010] - - @patternfly/pfe-core@2.0.0-next.8 - - @patternfly/pfe-button@2.0.0-next.5 - - @patternfly/pfe-icon@2.0.0-next.4 - -## 1.0.0-next.3 - -### Major Changes - -- c619f99f: Changes to `` to align it with [PatternFly v4](https://patternfly.org/components/label). - - NEW: - Added `variant` attribute for `filled` and `outline` style variants - Added `compact` boolean attribute for compact style version - - BREAKING CHANGES: - The `pfelement` attribute and `PFElement` class are **removed** from the `` element by default. - The `outline` boolean attribute is **removed** - _All_ the `--pfe-*` css variables are **removed** in favour of their `--pf-*` equivalents. - - See the [docs](https://patternflyelements.org/components/label) for more info, - and the [demo](https://patternflyelements.org/components/label/demo) for usage examples. - -### Patch Changes - -- Updated dependencies [34ecd410] -- Updated dependencies [a730678c] - - @patternfly/pfe-core@2.0.0-next.6 - - @patternfly/pfe-button@2.0.0-next.4 - -## 1.0.0-next.2 - -### Patch Changes - -- 6a2a0407: [View commit message here](https://gist.github.com/heyMP/200fc0b840690541475923facba393ab) -- Updated dependencies [6a2a0407] - - @patternfly/pfe-core@2.0.0-next.4 - - @patternfly/pfe-icon@2.0.0-next.2 - -## 1.0.0-next.1 - -### Patch Changes - -- 447b2d75: Remove `esbuild` export condition, as this anyways was a runtime error -- Updated dependencies [447b2d75] - - @patternfly/pfe-core@2.0.0-next.3 - - @patternfly/pfe-icon@2.0.0-next.1 - -## 1.0.0-next.0 - -### Major Changes - -- 92257735: Initial release of pfe-label. - - `` is 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 pfe-icon and are available in a solid and outline style variant. - - ### NEW: Component! - - - Adds `` component with `color`, `icon` and `outline` attributes. - - See [docs](https://patternflyelements.org/components/label/) for more info diff --git a/elements/pf-v5-label/docs/pf-v5-label.md b/elements/pf-v5-label/docs/pf-v5-label.md deleted file mode 100644 index fd0467cc74..0000000000 --- a/elements/pf-v5-label/docs/pf-v5-label.md +++ /dev/null @@ -1,129 +0,0 @@ -{% renderInstallation %} {% endrenderInstallation %} - -{% renderOverview %} - Default -{% endrenderOverview %} - -{% band header="Usage" %} - ### Default - {% htmlexample %} - 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 - {% endhtmlexample %} - -
- - ### Conveying meaning to assistive technologies - Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with a class. - -
- - {% htmlexample %} - - - Red Warning - - {% endhtmlexample %} - - ### Outline variant - Swaps the color style for a outline styled variant - - {% htmlexample %} - Blue - Green - Orange - Red - Purple - Cyan - Gold - Default - {% endhtmlexample %} - - ### With icon as an attribute - Adds a optional fixed size `pf-v5-icon` to the label as a prefix - - {% htmlexample %} - 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-v5-icon` to the label. - - {% htmlexample %} - Globe - - - {% endhtmlexample %} - - {% htmlexample %} - Globe - - - {% endhtmlexample %} - - ### Compact style - Creates a compact style label which can be combined with color, variant and icon - - {% htmlexample %} - Globe - - - Green - Orange - Red - Purple - Cyan - Gold - Default - {% endhtmlexample %} -{% endband %} - -{% renderSlots %}{% endrenderSlots %} - -{% renderAttributes %}{% endrenderAttributes %} - -{% renderMethods %}{% endrenderMethods %} - -{% renderEvents %}{% endrenderEvents %} - -{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} - -{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-v5-label/docs/screenshot.png b/elements/pf-v5-label/docs/screenshot.png deleted file mode 100644 index 5e7131118e..0000000000 Binary files a/elements/pf-v5-label/docs/screenshot.png and /dev/null differ diff --git a/elements/pf-v5-label/pf-v5-label.css b/elements/pf-v5-label/pf-v5-label.css deleted file mode 100644 index f40ddc3b06..0000000000 --- a/elements/pf-v5-label/pf-v5-label.css +++ /dev/null @@ -1,320 +0,0 @@ -:host { - position: relative; - white-space: nowrap; - border: 0; - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--200, #8a8d90)); -} - -pf-v5-icon, ::slotted(pf-v5-icon) { - color: currentColor; -} - -:host, -#container { - display: inline-flex; - align-items: center; - vertical-align: middle; -} - -#container { - overflow: clip; - overflow-clip-margin: 6px; - 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; -} - -.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); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2)); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-blue__content--link--hover--before--BorderColor, - var(--pf-global--primary-color--100, #06c))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-blue__icon--Color, var(--pf-global--primary-color--100, #06c))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-blue__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-cyan__content--link--hover--before--BorderColor, - var(--pf-global--default-color--200, #009596))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-cyan__icon--Color, var(--pf-global--default-color--200, #009596))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-cyan__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-green__content--link--hover--before--BorderColor, - var(--pf-global--success-color--100, #3e8635))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-green__icon--Color, var(--pf-global--success-color--100, #3e8635))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-green__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-orange__content--link--hover--before--BorderColor, - var(--pf-global--palette--orange-300, #ec7a08))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-orange__icon--Color, var(--pf-global--palette--orange-300, #ec7a08))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-orange__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-purple__content--link--hover--before--BorderColor, - var(--pf-global--palette--purple-500, #6753ac))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-purple__icon--Color, var(--pf-global--palette--purple-500, #6753ac))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-purple__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-red__content--link--hover--before--BorderColor, - var(--pf-global--danger-color--100, #c9190b))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-red__icon--Color, var(--pf-global--danger-color--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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-red__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #d2d2d2))); -} - -.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)); - - --_label-link-hover-border-color: - var(--pf-v5-c-label__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-gold__content--link--hover--before--BorderColor, - var(--pf-global--palette--gold-300, #f4c145))); - - --_label-icon-color: var(--pf-v5-c-label__icon--Color, var(--pf-v5-c-label--m-gold__icon--Color, var(--pf-global--palette--gold-400, #f0ab00))); -} - -.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))); - - --_label-link-hover-border-color: - var(--pf-v5-c-label--m-outline__content--link--hover--before--BorderColor, - var(--pf-v5-c-label--m-outline--m-gold__content--link--hover--before--BorderColor, - var(--pf-global--BorderColor--100, #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)); - /** label icon color */ - color: var(--_label-icon-color); -} - -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); -} - -#link { - color: inherit; - text-decoration: none; - cursor: pointer; -} - -#container:has(#link:hover)::before, -#container:has(#link:focus)::before { - border-width: var(--pf-v5-c-label__content--link--hover--before--BorderWidth, 2px); - border-color: var(--_label-link-hover-border-color); -} - -svg { - vertical-align:-0.125em; - fill: currentColor; - height: 1em; - width: 1em; -} diff --git a/elements/pf-v5-label/pf-v5-label.ts b/elements/pf-v5-label/pf-v5-label.ts deleted file mode 100644 index d2358c129e..0000000000 --- a/elements/pf-v5-label/pf-v5-label.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { LitElement, html, isServer, type TemplateResult } 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 { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js'; - -import '@patternfly/elements/pf-v5-button/pf-v5-button.js'; - -import styles from './pf-v5-label.css'; - -export class LabelCloseEvent extends Event { - constructor() { - super('close', { bubbles: true, cancelable: true }); - } -} - -/** - * The **label** component allows users to add specific element captions for user - * clarity and convenience. - * @summary Allows users to display meta data in a stylized form. - * @alias Label - * @fires {LabelCloseEvent} close - when a removable label's close button is clicked - */ -@customElement('pf-v5-label') -export class PfV5Label extends LitElement { - static readonly styles: CSSStyleSheet[] = [styles]; - - static override 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: - | 'filled' - | 'outline' = 'filled'; - - /** - * Changes the color of the label - */ - @property() color: - | 'blue' - | 'cyan' - | 'green' - | 'orange' - | 'purple' - | 'red' - | 'grey' - | 'gold' = 'grey'; - - /** Shorthand for the `icon` slot, the value is icon name */ - @property() icon?: string; - - /** Flag indicating the label is compact */ - @property({ type: Boolean }) compact = false; - - /** Flag indicating the label text should be truncated */ - @property({ type: Boolean }) truncated = false; - - /** Flag indicating the label is removable */ - @property({ type: Boolean }) removable = false; - - /** Text label for a removable label's close button */ - @property({ attribute: 'close-button-label' }) closeButtonLabel?: string; - - /** When set, the label becomes a link. The label text renders inside an anchor element. */ - @property({ reflect: true }) href?: string; - - /** Represents the state of the anonymous and icon slots */ - #slots = new SlotController(this, null, 'icon'); - - override connectedCallback(): void { - super.connectedCallback(); - if (isServer) { - this.dispatchEvent(new Event('ssr:label', { bubbles: true })); - } - } - - override render(): TemplateResult<1> { - const { compact, truncated, href } = this; - const { variant, color, icon } = this; - const hasIcon = !!icon || this.#slots.hasSlotted('icon'); - const isLink = !!href; - return html` - - - - - - - ${isLink ? html` - - ` : html` - - `} - - - - - - - - - - `; - } - - #onClickClose() { - if (this.removable && this.dispatchEvent(new LabelCloseEvent())) { - this.remove(); - } - } -} - -export type LabelVariant = PfV5Label['variant']; - -export type LabelColor = PfV5Label['color']; - -declare global { - interface HTMLElementTagNameMap { - 'pf-v5-label': PfV5Label; - } -} diff --git a/elements/pf-v5-label/test/pf-label.e2e.ts b/elements/pf-v5-label/test/pf-label.e2e.ts deleted file mode 100644 index f75986a59b..0000000000 --- a/elements/pf-v5-label/test/pf-label.e2e.ts +++ /dev/null @@ -1,25 +0,0 @@ -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-v5-label'; - -test.describe(tagName, () => { - test('snapshot', async ({ page }) => { - const componentPage = new PfeDemoPage(page, tagName); - await componentPage.navigate(); - await componentPage.snapshot(); - }); - - test('ssr', async ({ browser }) => { - const fixture = new SSRPage({ - tagName, - browser, - demoDir: new URL('../demo/', import.meta.url), - importSpecifiers: [ - `@patternfly/elements/${tagName}/${tagName}.js`, - ], - }); - await fixture.snapshots(); - }); -}); diff --git a/elements/pf-v5-label/test/pf-label.spec.ts b/elements/pf-v5-label/test/pf-label.spec.ts deleted file mode 100644 index 51bd413ace..0000000000 --- a/elements/pf-v5-label/test/pf-label.spec.ts +++ /dev/null @@ -1,172 +0,0 @@ -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 { 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 -`; - -const exampleWithColorAttribute = html` - Red -`; - -const exampleWithColorAttributeEmpty = html` - Default -`; - -const exampleWithOutlineAttribute = html` - Default Outline -`; - -const exampleWithCompactAttribute = html` - Default Compact -`; - -const exampleWithHref = html` - Link Label -`; - - -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. - 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-v5-label')).to.be.an.instanceof(PfV5Label); - }); - - it('should upgrade', async function() { - const el = await createFixture(example); - const klass = customElements.get('pf-v5-label'); - expect(el) - .to.be.an.instanceOf(klass) - .and - .to.be.an.instanceOf(PfV5Label); - }); - - it('should display default variant', async function() { - const el = await createFixture(example); - await el.updateComplete; - const container = el.shadowRoot!.querySelector('#container')!; - const beforeStyles = getComputedStyle(container, '::before'); - - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5')); - expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)'); - }); - - it('should display color variant if color attribute is present', async function() { - const el = await createFixture(exampleWithColorAttribute); - await el.updateComplete; - const container = el.shadowRoot!.querySelector('#container')!; - const beforeStyles = getComputedStyle(container, '::before'); - - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#7d1007')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#faeae8')); - expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(201, 25, 11)'); - }); - - it('should display default variant if color attribute is present but empty', async function() { - const el = await createFixture( exampleWithColorAttributeEmpty); - await el.updateComplete; - const container = el.shadowRoot!.querySelector('#container')!; - const beforeStyles = getComputedStyle(container, '::before'); - - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5')); - expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)'); - }); - - it('should display outline variant if the attribute outline is present', async function() { - const el = await createFixture(exampleWithOutlineAttribute); - await el.updateComplete; - const container = el.shadowRoot!.querySelector('#container')!; - const beforeStyles = getComputedStyle(container, '::before'); - - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#ffffff')); - expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)'); - }); - - describe('with valid icon attribute', function() { - let element: PfV5Label; - beforeEach(async function() { - element = await createFixture(html` - Default Icon - `); - element.updateComplete; - }); - 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: PfV5Label; - beforeEach(async function() { - element = await createFixture(html` - Default - `); - element.updateComplete; - }); - 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); - await el.updateComplete; - const container = el.shadowRoot!.querySelector('#container')!; - const beforeStyles = getComputedStyle(container, '::before'); - const containerStyles = getComputedStyle(container); - - expect(getColor(container, 'color')).to.deep.equal(hexToRgb('#151515')); - expect(getColor(container, 'background-color')).to.deep.equal(hexToRgb('#f5f5f5')); - expect(beforeStyles.getPropertyValue('border-color')).to.equal('rgb(210, 210, 210)'); - - expect(containerStyles.getPropertyValue('padding-top')).to.equal('0px'); - expect(containerStyles.getPropertyValue('padding-right')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default - expect(containerStyles.getPropertyValue('padding-bottom')).to.equal('0px'); - expect(containerStyles.getPropertyValue('padding-left')).to.equal('8px'); // 0.5rem = 8px @ 16px browser default - }); - - describe('with href attribute', function() { - let element: PfV5Label; - beforeEach(async function() { - element = await createFixture(exampleWithHref); - await element.updateComplete; - }); - - it('should render an anchor element', function() { - const link = element.shadowRoot!.querySelector('#link'); - expect(link).to.be.an.instanceOf(HTMLAnchorElement); - }); - - it('should set the href on the anchor', function() { - const link = element.shadowRoot!.querySelector('#link') as HTMLAnchorElement; - expect(link.href).to.equal('https://example.com/'); - }); - - it('should not render an anchor when href is not set', async function() { - const el = await createFixture(example); - await el.updateComplete; - const link = el.shadowRoot!.querySelector('#link'); - expect(link).to.be.null; - }); - }); -}); diff --git a/elements/pf-v6-label/README.md b/elements/pf-v6-label/README.md new file mode 100644 index 0000000000..43811ffdce --- /dev/null +++ b/elements/pf-v6-label/README.md @@ -0,0 +1,60 @@ +# `` + +A label is a compact element for categorization, status, or metadata display. +Labels provide a visual way to describe or tag items using keywords. + +## Usage + +```html +Grey +Blue +Success +``` + +```html + + Removable outline + +``` + +```html + + Link label + +``` + +## Divergences from React `Label` + +### Not implemented + +| React prop | Notes | +|---|---| +| `isEditable` / `editableProps` | Complex inline editing pattern; deferred to a future release | +| `onEditComplete` / `onEditCancel` | Dependent on editable support | +| `render` | React-specific render prop for router integration; not applicable to web components | +| `tooltipPosition` | Tooltip integration for truncated labels; will integrate with `` in a future release | +| `closeBtn` / `closeBtnProps` | Custom close button node; the web component always renders a native ``} + ${!(!this.href && !this.clickable) ? html`` : html` + + + `} + ${!this.removable ? html`` : html` + `} + + `; + } + + #renderStatusIcon(): TemplateResult { + switch (this.status) { + case 'success': + return html``; + case 'warning': + return html``; + case 'danger': + return html``; + case 'info': + return html``; + case 'custom': + return html``; + default: + return html``; + } + } + + #onClose() { + if (this.removable && this.dispatchEvent(new LabelCloseEvent())) { + this.remove(); + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'pf-v6-label': PfV6Label; + } +}