Skip to content

Commit 9225773

Browse files
zeroedinbennypowers
zeroedin
authored and
bennypowers
committed
feat(label): add pfe-label component
Co-Authored-By: Steven Spriggs <[email protected]>
1 parent 1d22cdb commit 9225773

File tree

14 files changed

+878
-65
lines changed

14 files changed

+878
-65
lines changed

‎.changeset/shiny-dots-rescue.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
"@patternfly/pfe-label": major
3+
---
4+
5+
Initial release of pfe-label.
6+
7+
`<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.
8+
9+
### NEW: Component!
10+
- Adds `<pfe-label>` component with `color`, `icon` and `outline` attributes.
11+
12+
See [docs](https://patternflyelements.org/components/label/) for more info

‎elements/pfe-label/README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# Label
2+
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.
3+
4+
Read more about Label in the [PatternFly Elements Label documentation](https://patternflyelements.org/components/label)
5+
6+
## Installation
7+
8+
Load `<pfe-label>` via CDN:
9+
10+
```html
11+
<script src="https://unpkg.com/@patternfly/pfe-label?module"></script>
12+
```
13+
14+
Or, if you are using [NPM](https://npm.im), install it
15+
16+
```bash
17+
npm install @patternfly/pfe-label
18+
```
19+
20+
Then once installed, import it to your application:
21+
22+
```js
23+
import '@patternfly/pfe-label';
24+
```
25+
26+
## Usage
27+
28+
Default
29+
```html
30+
<p>Some Text <pfe-label>Your label text here</pfe-label>
31+
```
32+
33+
Color Options: `grey (default), blue ,green, orange, red, purple, cyan`
34+
```html
35+
<p>Some Text <pfe-label color="red">Your label text here</pfe-label>
36+
```
37+
38+
With and Icon:
39+
```html
40+
<p>Some Text <pfe-label icon="web-icon-globe">Your label text here</pfe-label>
41+
```
42+
43+
Outline variant:
44+
```html
45+
<p>Some Text <pfe-label outline>Your label text here</pfe-label>
46+
```
47+
48+
49+
50+
> ### Conveying meaning to assistive technologies
51+
> 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
52+
> 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
53+
> hidden with the a class.
54+
55+
56+
```html
57+
<pfe-label color="red">
58+
Some text <span class="visually-hidden-class">Some additional info</span>
59+
</pfe-label>
60+
```

‎elements/pfe-label/custom-elements-manifest.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
2+
3+
export default pfeCustomElementsManifestConfig({
4+
globs: ['pfe-*.ts'],
5+
});

‎elements/pfe-label/demo/demo.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* :host is the html-include element hosting this demo */
2+
:host {
3+
display: block;
4+
}
5+
6+
.example {
7+
margin-top: 2rem;
8+
}
9+
10+
.inline-example {
11+
max-width: 20em;
12+
outline: 1px dotted red;
13+
padding: 1.2em;
14+
position: relative;
15+
}
16+
17+
.inline-example:before {
18+
content: "max-width: 20em;";
19+
position: absolute;
20+
top: -1.6em;
21+
left: 0;
22+
background-color: red;
23+
font-size: 0.8em;
24+
color: white;
25+
padding: 0 0.5em;
26+
}
27+
28+
.visually-hidden-class {
29+
position: absolute !important;
30+
width: 1px !important;
31+
height: 1px !important;
32+
padding: 0 !important;
33+
margin: -1px !important;
34+
overflow: hidden !important;
35+
clip: rect(0, 0, 0, 0) !important;
36+
white-space: nowrap !important;
37+
border: 0 !important;
38+
}

‎elements/pfe-label/demo/pfe-label.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<link rel="stylesheet" href="/elements/pfe-label/demo/demo.css"/>
2+
3+
<pfe-band color="lightest" size="small">
4+
<h2 slot="header">Default</h2>
5+
<pfe-label>Default</pfe-label>
6+
<div class="example">
7+
Example:
8+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;pfe-label&gt;Default&lt;/pfe-label&gt;</code></div></pfe-codeblock>
9+
</div>
10+
</pfe-band>
11+
12+
<pfe-band color="lightest" size="small">
13+
<h2 slot="header">Color Options</h2>
14+
<pfe-label color="blue">Blue label</pfe-label>
15+
<pfe-label color="green">Green label</pfe-label>
16+
<pfe-label color="orange">Orange label</pfe-label>
17+
<pfe-label color="red">
18+
Red <span class="visually-hidden-class">Hat</span>&nbsp;label
19+
</pfe-label>
20+
<pfe-label color="purple">Purple label</pfe-label>
21+
<pfe-label color="cyan">Cyan label</pfe-label>
22+
<pfe-label color="grey">Grey label</pfe-label>
23+
<div class="example">
24+
Example:
25+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;pfe-label color="blue"&gt;Blue label&lt;/pfe-label&gt;</code></div></pfe-codeblock>
26+
</div>
27+
</pfe-band>
28+
29+
<pfe-band color="lightest" size="small">
30+
<h2 slot="header">Outline versions </h2>
31+
<pfe-label outline>Default</pfe-label>
32+
<pfe-label color="blue" outline>Blue label</pfe-label>
33+
<pfe-label color="green" outline>Green label</pfe-label>
34+
<pfe-label color="orange" outline>Orange label</pfe-label>
35+
<pfe-label color="red" outline>Red label</pfe-label>
36+
<pfe-label color="purple" outline>Purple label</pfe-label>
37+
<pfe-label color="cyan" outline>Cyan label</pfe-label>
38+
<pfe-label color="grey" outline>Grey label</pfe-label>
39+
<div class="example">
40+
Example:
41+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;pfe-label color="red" outline&gt;Red label&lt;/pfe-label&gt;</code></div></pfe-codeblock>
42+
</div>
43+
</pfe-band>
44+
45+
<pfe-band color="lightest" size="small">
46+
<h2 slot="header">With Icon</h2>
47+
<pfe-label icon="web-icon-alert-danger" outline>Default</pfe-label>
48+
<pfe-label color="blue" icon="web-icon-alert-success">Blue label</pfe-label>
49+
<pfe-label color="green" icon="rh-icon-virtual-storage-stack" outline>Green label</pfe-label>
50+
<pfe-label color="orange" icon="web-icon-globe">Orange label</pfe-label>
51+
<pfe-label color="red" icon="rh-icon-gear" outline>Red label</pfe-label>
52+
<pfe-label color="purple" icon="rh-icon-hand-thumbs-up">Purple label</pfe-label>
53+
<pfe-label color="cyan" icon="web-icon-close" outline>Cyan label</pfe-label>
54+
<pfe-label color="grey" icon="web-icon-github">Grey label</pfe-label>
55+
<div class="example">
56+
Example:
57+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;pfe-label color="green" icon="rh-icon-virtual-storage-stack" outline&gt;Green label&lt;/pfe-label&gt;</code></div></pfe-codeblock>
58+
</div>
59+
60+
Empty Icon Attribute Example:
61+
<pfe-label color="red" icon="">No Icon</pfe-label>
62+
<div class="example">
63+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;pfe-label color="red" icon=""&gt;No Icon&lt;/pfe-label&gt;</code></div></pfe-codeblock>
64+
</div>
65+
66+
</pfe-band>
67+
68+
<pfe-band color="lightest" size="small">
69+
<h2 slot="header">Labels are inline-flex and will wrap at max width of parent element</h2>
70+
<p class="inline-example"><pfe-label outline>Default</pfe-label>
71+
<pfe-label color="blue">Blue label</pfe-label>
72+
<pfe-label color="green" outline>Green label</pfe-label>
73+
<pfe-label color="orange">Orange label</pfe-label>
74+
<pfe-label color="red" outline>Red label</pfe-label>
75+
Some intertwined text
76+
<pfe-label color="orange" icon="web-icon-globe">Orange label</pfe-label>
77+
<pfe-label color="red" icon="rh-icon-gear">Red label</pfe-label>
78+
<pfe-label color="purple" icon="rh-icon-hand-thumbs-up">Purple label</pfe-label>
79+
amongst the labels
80+
<pfe-label color="cyan" icon="web-icon-close" outline>Cyan label</pfe-label>
81+
<pfe-label color="grey" icon="web-icon-github">Grey label</pfe-label>
82+
</p>
83+
84+
<h1 style="display: flex; align-items: center; gap: 0.5rem;">In a h1 header <pfe-label color="red" icon="web-icon-open">Red</pfe-label></h1>
85+
<pfe-codeblock><div codeblock-container code-language="html"><code>&lt;h1 style="display: flex; align-items: center; gap: 0.5rem;"&gt;Header Text &lt;pfe-label color="red" ...&gt;Label Text&lt;/pfe-label&gt;&lt;/h1&gt;</code></div></pfe-codeblock>
86+
<h2 style="display: flex; align-items: center; gap: 0.5rem;">In a h2 header <pfe-label color="cyan" icon="web-icon-close" outline>Cyan</pfe-label></h2>
87+
<h3 style="display: flex; align-items: center; gap: 0.5rem;">In a h3 header <pfe-label color="purple" icon="web-icon-globe">Purple</pfe-label></h3>
88+
</pfe-band>

‎elements/pfe-label/demo/pfe-label.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '@patternfly/pfe-label';
2+
import '@patternfly/pfe-codeblock';
3+
import '@patternfly/pfe-band';
4+
5+
const root = document.querySelector('[data-demo="pfe-label"]')?.shadowRoot ?? document;
6+
7+
root.querySelector('pfe-label');

‎elements/pfe-label/docs/index.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{% renderOverview %}
2+
<pfe-label>Default</pfe-label>
3+
{% endrenderOverview %}
4+
5+
{% band header="Usage" %}
6+
7+
### Default
8+
<pfe-label>Default</pfe-label>
9+
```html
10+
<pfe-label>Default</pfe-label>
11+
```
12+
13+
### With a color
14+
Available colors are: grey (default), red, blue, green, orange, purple, cyan
15+
16+
<pfe-label color="red">Red</pfe-label>
17+
18+
```html
19+
<pfe-label color="red">Red</pfe-label>
20+
```
21+
22+
> ### Conveying meaning to assistive technologies
23+
> 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
24+
> 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
25+
> hidden with the a class.
26+
27+
```html
28+
<pfe-label color="red">Red <span class="visually-hidden-class">Warning</span></pfe-label>
29+
```
30+
31+
32+
### With an icon
33+
This adds a optional fixed size `pfe-icon` to the label as a prefix
34+
35+
<pfe-label color="blue" icon="web-icon-globe">Globe</pfe-label>
36+
37+
38+
```html
39+
<pfe-label color="blue" icon="web-icon-globe">Globe</pfe-label>
40+
```
41+
42+
Read more about Icon in the [PatternFly Elements Icon documentation](https://patternflyelements.org/components/icon)
43+
44+
### Outline variant
45+
Swaps the color style for a outline styled variant
46+
47+
<pfe-label color="red" outline>Red</pfe-label>
48+
49+
```html
50+
<pfe-label color="red" outline>Red</pfe-label>
51+
```
52+
53+
{% endband %}
54+
55+
{% renderSlots %}{% endrenderSlots %}
56+
57+
{% renderAttributes %}{% endrenderAttributes %}
58+
59+
{% renderMethods %}{% endrenderMethods %}
60+
61+
{% renderEvents %}{% endrenderEvents %}
62+
63+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
64+
65+
{% renderCssParts %}{% endrenderCssParts %}

‎elements/pfe-label/package.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"name": "@patternfly/pfe-label",
3+
"version": "0.0.0",
4+
"description": "PatternFly Elements | Label",
5+
"customElements": "custom-elements.json",
6+
"license": "MIT",
7+
"type": "module",
8+
"main": "./pfe-label.js",
9+
"module": "./pfe-label.js",
10+
"types": "./pfe-label.d.ts",
11+
"directories": {
12+
"test": "tests"
13+
},
14+
"exports": {
15+
".": {
16+
"esbuild": "./pfe-label.ts",
17+
"default": "./pfe-label.js"
18+
},
19+
"./*": {
20+
"esbuild": "./*.ts",
21+
"default": "./*.js"
22+
}
23+
},
24+
"publishConfig": {
25+
"access": "public",
26+
"registry": "https://registry.npmjs.org/"
27+
},
28+
"scripts": {
29+
"⚙️-----UTIL-------⚙️": "❓ Manages the repo",
30+
"clean": "git clean -fX -e node_modules -e tsconfig.tsbuildinfo",
31+
"🚚-----DIST-------🚚": "❓ Publish packages",
32+
"prepublishOnly": "npm run build",
33+
"👷‍♀️-----BUILD------👷‍♀️": "❓ Prepare dist artifacts",
34+
"analyze": "cem analyze",
35+
"build": "run-s build:*",
36+
"build:clean": "npm run clean",
37+
"build:esbuild": "node ../../scripts/build.js --include pfe-label",
38+
"build:analyze": "npm run analyze",
39+
"build:types": "tsc -b .",
40+
"🧑‍🔬-----TEST-------🧑‍🔬": "❓ Test packages",
41+
"test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js",
42+
"👷‍♀️-----DEV--------👷‍♀️": "❓ Development aids",
43+
"test:watch": "npm test -- --watch",
44+
"watch:analyze": "npm run analyze -- --watch",
45+
"watch:types": "tsc -w"
46+
},
47+
"keywords": [
48+
"custom elements",
49+
"design systems",
50+
"web components"
51+
],
52+
"dependencies": {
53+
"@patternfly/pfe-core": "^2.0.0 || ^2.0.0-next.0",
54+
"@patternfly/pfe-icon": "^2.0.0 || ^2.0.0-next.0",
55+
"lit": "^2.1.2"
56+
}
57+
}

0 commit comments

Comments
 (0)