Skip to content

Commit 8e3236a

Browse files
author
Sara Dahan
committed
docs(label-group): add demos for closeable,overflow,vertical,header overflow, and basic label groups
1 parent 8514436 commit 8e3236a

11 files changed

+172
-35
lines changed

‎.changeset/config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
2-
"$schema": "https://unpkg.com/@changesets/config@1.6.3/schema.json",
2+
"$schema": "https://unpkg.com/@changesets/config@3.1.1/schema.json",
33
"changelog": "@changesets/cli/changelog",
44
"commit": false,
5+
"fixed": [],
56
"linked": [],
6-
"prettier": false,
77
"access": "restricted",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",

‎elements/pf-label-group/demo/label-group-closeable.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
<pf-label-group closeable >
3+
<h2 slot="category-name">group name</h2>
4+
<pf-label color="red" icon="info-circle" removable>label-3</pf-label>
5+
<pf-label color="green" icon="info-circle" removable>label-4</pf-label>
6+
<pf-label color="blue" icon="info-circle" removable>label-5</pf-label>
7+
</pf-label-group>
8+
9+
<script type="module">
10+
import '@patternfly/elements/pf-label-group/pf-label-group.js';
11+
import '@patternfly/elements/pf-label/pf-label.js';
12+
import '@patternfly/elements/pf-button/pf-button.js';
13+
</script>

‎elements/pf-label-group/demo/label-group-vartical.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
<pf-label-group orientation="vertical" >
3+
<h2 slot="category-name">group name</h2>
4+
5+
<pf-label color="orange" icon="info-circle" removable>label-1</pf-label>
6+
<pf-label color="red" icon="info-circle" removable>label-2</pf-label>
7+
<pf-label color="green" icon="info-circle" removable>label-3</pf-label>
8+
</pf-label-group>
9+
10+
<script type="module">
11+
import '@patternfly/elements/pf-label-group/pf-label-group.js';
12+
import '@patternfly/elements/pf-label/pf-label.js';
13+
import '@patternfly/elements/pf-button/pf-button.js';
14+
</script>

‎elements/pf-label-group/demo/label-group-with-a-very-long-name.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
<pf-label-group >
3+
<h2 slot="category-name">label group with a very long name</h2>
4+
<pf-label color="yellow" icon="info-circle" removable>label-3</pf-label>
5+
<pf-label color="red" icon="info-circle" removable>label-4</pf-label>
6+
<pf-label color="blue" icon="info-circle" removable>label-5</pf-label>
7+
</pf-label-group>
8+
9+
<script type="module">
10+
import '@patternfly/elements/pf-label-group/pf-label-group.js';
11+
import '@patternfly/elements/pf-label/pf-label.js';
12+
import '@patternfly/elements/pf-button/pf-button.js';
13+
</script>

‎elements/pf-label-group/demo/label-group-with-overflow-labels.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
<pf-label-group closeable num-labels="3" >
3+
<h2 slot="category-name">group name</h2>
4+
5+
<pf-label color="orange" icon="info-circle" removable>label-1</pf-label>
6+
<pf-label color="purple" icon="info-circle" removable>label-2</pf-label>
7+
<pf-label color="blue" icon="info-circle" removable>label-3</pf-label>
8+
<pf-label color="red" icon="info-circle" removable>label-4</pf-label>
9+
<pf-label color="blue" icon="info-circle" removable>label-7</pf-label>
10+
<pf-label color="green" icon="info-circle" removable>label-7</pf-label>
11+
</pf-label-group>
12+
13+
<script type="module">
14+
import '@patternfly/elements/pf-label-group/pf-label-group.js';
15+
import '@patternfly/elements/pf-label/pf-label.js';
16+
import '@patternfly/elements/pf-button/pf-button.js';
17+
</script>

‎elements/pf-label-group/demo/label-group.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<pf-label-group open num-labels="5">
2+
<pf-label color="blue">Blue Label</pf-label>
3+
<pf-label color="green">Green Label</pf-label>
4+
<pf-label color="orange">Orange Label</pf-label>
5+
<pf-label color="red">Red Label</pf-label>
6+
7+
</pf-label-group>
8+
9+
<script type="module">
10+
import '@patternfly/elements/pf-label-group/pf-label-group.js';
11+
import '@patternfly/elements/pf-label/pf-label.js';
12+
import '@patternfly/elements/pf-button/pf-button.js';
13+
</script>

‎elements/pf-label-group/demo/pf-label-group.html‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎elements/pf-label-group/pf-label-group.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,11 @@ pf-button {
5050
border: 1px solid #d2d2d2;
5151
border-radius: 6px;
5252
background-color: #fff;
53+
54+
align-items: center;
5355
}
5456

57+
5558
:host([orientation="horizontal"]) #outer {
5659
flex-direction: row;
5760
}
@@ -61,18 +64,15 @@ pf-button {
6164
align-items: flex-start;
6265
}
6366

64-
/* הכותרת ב-slotted category-name */
6567
::slotted([slot="category-name"]) {
6668
display: inline-block;
67-
max-width: 16ch; /* מגביל את הרוחב כדי שיוכל להיחתך */
69+
max-width: 16ch;
6870
overflow: hidden;
6971
text-overflow: ellipsis;
7072
white-space: nowrap;
7173
vertical-align: middle;
7274
cursor: default;
7375
}
7476

75-
/* מאפשר להוסיף tooltip טבעי של הדפדפן */
7677
::slotted([slot="category-name"][title]):hover {
77-
/* אין צורך בסגנון נוסף – הדפדפן מציג tooltip לבד */
7878
}

‎elements/pf-label-group/pf-label-group.ts‎

Lines changed: 87 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,41 @@ import { query } from 'lit/decorators/query.js';
1111
import { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';
1212
import { observes } from '@patternfly/pfe-core/decorators/observes.js';
1313
import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
14-
import { PfLabel } from '../pf-label/pf-label.js';
14+
import type { PfLabel } from '@patternfly/elements/pf-label/pf-label.js';
1515

16+
/**
17+
* Event fired when the label group is expanded to show all labels.
18+
*/
1619
export class PfLabelGroupExpandEvent extends Event {
1720
constructor() {
1821
super('expand', { bubbles: true, cancelable: true });
1922
}
2023
}
2124

25+
/**
26+
* Regex used to replace the `${remaining}` variable in collapsed text.
27+
*/
2228
const REMAINING_RE = /\$\{\s*remaining\s*\}/g;
2329

30+
/**
31+
* A **label group** is a collection of labels that can be grouped by category
32+
* and used to represent one or more values assigned to a single attribute.
33+
* When the number of labels exceeds `numLabels`, additional labels will be hidden
34+
* using an overflow label.
35+
*
36+
* @fires expand - Fired when label group is expanded to show all labels
37+
*
38+
* @slot category-name - Category name text for label group category. If supplied, label group will have category styling applied
39+
* @slot - Default slot for `<pf-label>` elements
40+
*
41+
* @example
42+
* <pf-label-group num-labels="2 ">
43+
* <span slot="category-name">Fruit Types</span>
44+
* <pf-label>Apple</pf-label>
45+
* <pf-label>Banana</pf-label>
46+
* <pf-label>Orange</pf-label>
47+
* </pf-label-group>
48+
*/
2449
@customElement('pf-label-group')
2550
export class PfLabelGroup extends LitElement {
2651
static readonly styles: CSSStyleSheet[] = [styles];
@@ -30,25 +55,64 @@ export class PfLabelGroup extends LitElement {
3055
delegatesFocus: true,
3156
};
3257

58+
/**
59+
* Orientation of the label group.
60+
* @default 'horizontal'
61+
*/
3362
@property() orientation: 'horizontal' | 'vertical' = 'horizontal';
63+
64+
/**
65+
* Accessible label for the label group when no category name is provided.
66+
* @default ''
67+
*/
3468
@property({ attribute: 'accessible-label', type: String }) accessibleLabel = '';
69+
70+
/**
71+
* Accessible label for the close button.
72+
* @default 'Close'
73+
*/
3574
@property({ attribute: 'accessible-close-label', type: String }) accessibleCloseLabel = 'Close';
75+
76+
/**
77+
* Text for collapsed overflow label. Use `${remaining}` to indicate number of hidden labels.
78+
* @default '${remaining} more'
79+
*/
3680
@property({ attribute: 'collapsed-text', type: String }) collapsedText = '${remaining} more';
81+
82+
/**
83+
* Text for expanded overflow label.
84+
* @default 'show less'
85+
*/
3786
@property({ attribute: 'expanded-text', type: String }) expandedText = 'show less';
87+
88+
/**
89+
* Number of labels to show before creating an overflow label.
90+
* @default 3
91+
*/
3892
@property({ attribute: 'num-labels', type: Number }) numLabels = 3;
93+
94+
/**
95+
* Whether the overflow labels are visible (expanded state).
96+
* @default false
97+
*/
3998
@property({ reflect: true, type: Boolean }) open = false;
40-
@property({ reflect: true, type: Boolean }) closeable = true;
99+
100+
/**
101+
* Whether the label group can be closed.
102+
* @default true
103+
*/
104+
@property({ reflect: true, type: Boolean }) closeable = false;
41105

42106
@property() private _overflowText = '';
43107

44108
@query('#close-button') private _button?: HTMLButtonElement;
109+
45110
@queryAssignedNodes({
46111
slot: 'category-name',
47112
flatten: true,
48113
})
49114
private _categorySlotted?: HTMLElement[];
50115

51-
52116
get #labels(): NodeListOf<PfLabel> {
53117
return this.querySelectorAll<PfLabel>('pf-label:not([slot]):not([overflow-label])');
54118
}
@@ -79,18 +143,18 @@ export class PfLabelGroup extends LitElement {
79143
<slot id="labels" @slotchange="${this.#onSlotchange}"></slot>
80144
81145
${this._overflowText ?
82-
html`<pf-label
146+
html`<pf-label
83147
id="overflow"
84148
aria-controls="labels"
85149
overflow-label
86150
@click="${this.#onMoreClick}"
87151
>
88152
${this._overflowText}
89153
</pf-label>`
90-
: ''}
154+
: ''}
91155
92156
${this.closeable ?
93-
html`<pf-button
157+
html`<pf-button
94158
id="close-button"
95159
plain
96160
icon="times-circle"
@@ -99,11 +163,14 @@ export class PfLabelGroup extends LitElement {
99163
aria-describedby="category"
100164
@click="${this.#onCloseClick}"
101165
></pf-button>`
102-
: ''}
166+
: ''}
103167
</div>
104168
`;
105169
}
106170

171+
/**
172+
* Updates labels when relevant properties change
173+
*/
107174
@observes('accessibleCloseLabel')
108175
@observes('numLabels')
109176
@observes('closeable')
@@ -118,7 +185,7 @@ export class PfLabelGroup extends LitElement {
118185
}
119186

120187
/**
121-
* Tooltip logic for truncated category title
188+
* Tooltip logic for truncated category title.
122189
*/
123190
async #onCategorySlotChange() {
124191
await this.updateComplete;
@@ -132,6 +199,10 @@ export class PfLabelGroup extends LitElement {
132199
}
133200
}
134201

202+
/**
203+
* Handles overflow label's click event.
204+
* @param {Event} event - Click event
205+
*/
135206
async #onMoreClick(event: Event) {
136207
event.stopPropagation();
137208
this.open = !this.open;
@@ -144,12 +215,18 @@ export class PfLabelGroup extends LitElement {
144215
this.dispatchEvent(new PfLabelGroupExpandEvent());
145216
}
146217

218+
/**
219+
* Handles label group close.
220+
*/
147221
#onCloseClick() {
148222
if (this.isConnected) {
149223
this.remove();
150224
}
151225
}
152226

227+
/**
228+
* Updates which labels are hidden based on `numLabels` and `open`.
229+
*/
153230
#updateOverflow() {
154231
const labels = Array.from(this.#labels);
155232
labels.forEach((label, i) => {
@@ -162,8 +239,8 @@ export class PfLabelGroup extends LitElement {
162239
this._overflowText = rem < 1 ?
163240
''
164241
: this.open ?
165-
this.expandedText
166-
: this.collapsedText.replace(REMAINING_RE, rem.toString());
242+
this.expandedText
243+
: this.collapsedText.replace(REMAINING_RE, rem.toString());
167244

168245
if (rem < 1 && this.open) {
169246
this.open = false;

‎package-lock.json‎

Lines changed: 5 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)