Skip to content

Commit 37a1cb6

Browse files
author
Sara Dahan
committed
feat(label-group): add Functionality
1 parent 7348fd0 commit 37a1cb6

12 files changed

+511
-70
lines changed

‎.changeset/yummy-eagles-itch.md‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,26 @@
22
"@patternfly/elements": minor
33
---
44

5-
✨ Introduced `<pf-label-group>`.
5+
Introduced `<pf-label-group>` with add-label functionality.
66

77
A label group displays multiple labels together, helping users visualize related categories, filters, or items.
88
Each label can be removed individually, and the entire group can also be cleared at once.
99
The element automatically handles overflow for long lists of labels and supports both horizontal and vertical layouts.
1010

11-
Use this when you need to show multiple tags, filters, or categorized items that users can remove or adjust dynamically.
11+
This release adds support for **adding new labels** dynamically through different modes:
12+
13+
- `none`: No add-label UI.
14+
- `autoNoEdit`: Automatically adds a new label without user input.
15+
- `fromList`: Shows a dropdown list of predefined labels to choose from.
16+
- `customForm`: Opens a custom form for entering a new label's text, color, icon, and dismissable option.
17+
18+
Use this when you need to show multiple tags, filters, or categorized items that users can remove, add, or adjust dynamically.
1219
Avoid using it for single, standalone labels — consider using `<pf-label>` instead.
1320

1421
```html
15-
<pf-label-group label="Filters">
22+
<pf-label-group label="Filters" add-label-mode="fromList">
1623
<pf-label removable>Security</pf-label>
1724
<pf-label removable>Performance</pf-label>
1825
<pf-label removable>Networking</pf-label>
1926
</pf-label-group>
27+

‎elements/pf-label-group/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,26 @@ import '@patternfly/elements/pf-label-group/pf-label-group.js';
3737

3838
Displays a group of labels, showing only the first two and an overflow label like “1 more” that expands on click.
3939

40+
## Adding Labels
41+
42+
`<pf-label-group>` supports adding new labels dynamically through the `addLabelMode` attribute:
43+
44+
- `none` (default): No label addition.
45+
- `autoNoEdit`: Adds labels automatically without user editing.
46+
- `fromList`: Allows adding labels from a predefined list.
47+
- `customForm`: Lets users add custom labels via a form.
48+
49+
Example:
50+
51+
```html
52+
<pf-label-group add-label-mode="fromList">
53+
<span slot="category">Filters</span>
54+
<pf-label removable>Security</pf-label>
55+
<pf-label removable>Performance</pf-label>
56+
</pf-label-group>
57+
58+
Use this feature when you want users to dynamically add new tags or filters to the group.
59+
4060
---
4161

4262

elements/pf-label-group/demo/label-group.html renamed to elements/pf-label-group/demo/index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
<pf-label-group open num-labels="5">
1+
<pf-label-group open>
22
<pf-label color="blue">Blue Label</pf-label>
33
<pf-label color="green">Green Label</pf-label>
44
<pf-label color="orange">Orange Label</pf-label>
5-
<pf-label color="red">Red Label</pf-label>
65
</pf-label-group>
76

87
<script type="module">

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

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

‎elements/pf-label-group/demo/label-group-add-label-custom-form.html‎

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

‎elements/pf-label-group/demo/label-group-add-label-from-list.html‎

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

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ <h2 slot="category">group name</h2>
99
import '@patternfly/elements/pf-label-group/pf-label-group.js';
1010
import '@patternfly/elements/pf-label/pf-label.js';
1111
import '@patternfly/elements/pf-button/pf-button.js';
12-
</script>
12+
import '@patternfly/elements/pf-modal/pf-modal.js';
13+
import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
14+
</script>

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

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

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<pf-label-group>
32
<h2 slot="category">label group with a very long name</h2>
43
<pf-label color="yellow" icon="info-circle" removable>label-1</pf-label>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
<pf-label-group closeable num-labels="3">
1+
<pf-label-group num-labels="3">
32
<h2 slot="category">group name</h2>
43
<pf-label color="orange" icon="info-circle" removable>label-1</pf-label>
54
<pf-label color="purple" icon="info-circle" removable>label-2</pf-label>

0 commit comments

Comments
 (0)