Skip to content

Commit 8cfa3ef

Browse files
Michal7290Michal7290
committed
feat(label-group): change the demos
1 parent 626f9f2 commit 8cfa3ef

File tree

5 files changed

+245
-132
lines changed

5 files changed

+245
-132
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@ <h2 slot="category">group name</h2>
2121
newLabel.setAttribute('color', 'grey');
2222
newLabel.setAttribute('icon', 'info-circle');
2323
newLabel.setAttribute('removable', 'true');
24-
const count = labelGroup.querySelectorAll('pf-label:not([slot])').length;
25-
newLabel.textContent = `label-${count}`;
24+
newLabel.textContent = `new-label`;
2625
const firstLabel = labelGroup.querySelector('pf-label:not([slot])');
2726
if (firstLabel) labelGroup.insertBefore(newLabel, firstLabel);
2827
else labelGroup.appendChild(newLabel);

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

Lines changed: 151 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ <h2 slot="category">group name</h2>
33
<pf-label color="red" icon="info-circle" removable>label-1</pf-label>
44
<pf-label color="green" icon="info-circle" removable>label-2</pf-label>
55
<pf-label color="blue" icon="info-circle" removable>label-3</pf-label>
6-
7-
<pf-label id="add-button" color="blue" variant="outline" dismissible="false" >
6+
<pf-label id="add-button" class="add-button" color="blue" variant="outline" dismissible="false" >
87
Add label </pf-label>
98
</pf-label-group>
109

@@ -13,62 +12,66 @@ <h2 slot="category">group name</h2>
1312
import '@patternfly/elements/pf-label/pf-label.js';
1413
import '@patternfly/elements/pf-button/pf-button.js';
1514
import '@patternfly/elements/pf-modal/pf-modal.js';
15+
import '@patternfly/elements/pf-select/pf-select.js';
16+
import '@patternfly/elements/pf-icon/pf-icon.js';
1617

1718
const group = document.getElementById('label-group');
1819
const addButton = document.getElementById('add-button');
1920
console.log('addButton', addButton);
2021

22+
2123

2224
// create a modal element with form controls and buttons, return it
2325
function createModal() {
2426
const modal = document.createElement('pf-modal');
27+
modal.id = 'custom-label-modal';
28+
modal.setAttribute('variant', 'small');
2529
modal.setAttribute('aria-describedby', 'custom-label-modal-description');
2630
console.log('modal is created');
2731

2832
modal.innerHTML = `
29-
<h2 slot="header">Add a new label</h2>
30-
<p slot="header" id="custom-label-modal-description">Fill in the details below to create your custom label.</p>
33+
<h2 slot="header">Add label</h2>
34+
3135
3236
<form id="add-label-form">
3337
<label>
3438
Label text:
35-
<input id="label-text" class="pf-c-form-control" value="New label" />
39+
<input id="label-text" class="pf-c-form-control" />
3640
</label>
3741
3842
<label>
3943
Color:
40-
<select id="label-color" class="pf-c-form-control">
41-
<option value="blue">Blue</option>
42-
<option value="cyan">Cyan</option>
43-
<option value="green">Green</option>
44-
<option value="orange">Orange</option>
45-
<option value="purple">Purple</option>
46-
<option value="red">Red</option>
47-
<option value="grey" selected>Grey</option>
48-
<option value="gold">Gold</option>
49-
</select>
44+
<pf-select id="color-select" class="pf-c-form-control">
45+
<pf-option value="Grey" selected>Grey</pf-option>
46+
<pf-option value="Blue">Blue</pf-option>
47+
<pf-option value="Cyan">Cyan</pf-option>
48+
<pf-option value="Green">Green</pf-option>
49+
<pf-option value="Orange">Orange</pf-option>
50+
<pf-option value="Purple">Purple</pf-option>
51+
<pf-option value="Red">Red</pf-option>
52+
<pf-option value="Gold">Gold</pf-option>
53+
</pf-select>
5054
</label>
5155
5256
<label>
5357
Icon:
54-
<select id="label-icon" class="pf-c-form-control">
55-
<option value="">None</option>
56-
<option value="info">Info</option>
57-
<option value="check">Check</option>
58-
<option value="exclamation">Exclamation</option>
59-
<option value="star">Star</option>
60-
</select>
58+
<pf-select id="icon-select" class="pf-c-form-control">
59+
<pf-option value=""><span style="opacity:.7">No Icon</span></pf-option>
60+
<pf-option value="info-circle"><pf-icon name="info-circle" style="width:1rem;height:1rem;vertical-align:middle;margin-right:0.5rem;"></pf-icon>Info</pf-option>
61+
<pf-option value="check-circle"><pf-icon name="check-circle" style="width:1rem;height:1rem;vertical-align:middle;margin-right:0.5rem;"></pf-icon>Check</pf-option>
62+
<pf-option value="exclamation-circle"><pf-icon name="exclamation-circle" style="width:1rem;height:1rem;vertical-align:middle;margin-right:0.5rem;"></pf-icon>Warning</pf-option>
63+
</pf-select>
6164
</label>
6265
63-
<div>
66+
<div class="radio-group">
6467
<label>Dismissable:</label>
6568
<div>
6669
<label><input type="radio" name="dismissable" value="true" /> Yes</label>
6770
<label><input type="radio" name="dismissable" value="false" checked /> No</label>
6871
</div>
6972
</div>
7073
71-
<div>
74+
<div class="radio-group">
7275
<label>Label type:</label>
7376
<div>
7477
<label><input type="radio" name="filled" value="true" checked /> Filled</label>
@@ -90,10 +93,10 @@ <h2 slot="header">Add a new label</h2>
9093

9194
function resetForm(form) {
9295
const inputText = form.querySelector('#label-text');
93-
const selectColor = form.querySelector('#label-color');
94-
const selectIcon = form.querySelector('#label-icon');
95-
if (inputText) inputText.value = 'New label';
96-
if (selectColor) selectColor.value = 'grey';
96+
const selectColor = form.querySelector('#color-select');
97+
const selectIcon = form.querySelector('#icon-select');
98+
if (inputText) inputText.value = '';
99+
if (selectColor) selectColor.value = 'Grey';
97100
if (selectIcon) selectIcon.value = '';
98101
const dismissNo = form.querySelector('input[name="dismissable"][value="false"]');
99102
const filledYes = form.querySelector('input[name="filled"][value="true"]');
@@ -107,8 +110,8 @@ <h2 slot="header">Add a new label</h2>
107110

108111
const form = modal.querySelector('#add-label-form');
109112
const inputText = modal.querySelector('#label-text');
110-
const selectColor = modal.querySelector('#label-color');
111-
const selectIcon = modal.querySelector('#label-icon');
113+
const selectColor = modal.querySelector('#color-select');
114+
const selectIcon = modal.querySelector('#icon-select');
112115
const modalAdd = modal.querySelector('#modal-add');
113116
const modalCancel = modal.querySelector('#modal-cancel');
114117

@@ -127,7 +130,7 @@ <h2 slot="header">Add a new label</h2>
127130

128131
modalAdd.addEventListener('click', () => {
129132
const text = (inputText.value || '').trim() || 'New label';
130-
const color = selectColor.value;
133+
const color = selectColor.value.toLowerCase();
131134
const icon = selectIcon.value;
132135
const dismissable = !!form.querySelector('input[name="dismissable"]:checked') &&
133136
form.querySelector('input[name="dismissable"]:checked').value === 'true';
@@ -166,13 +169,129 @@ <h2 slot="header">Add a new label</h2>
166169
align-items: center;
167170
gap: 4px;
168171
transition: border 0.2s ease;
172+
169173
border-radius: 0.99rem;
170174
}
171175
pf-modal#custom-label-modal {
172176
--pf-c-modal--BoxShadow: 0 0 15px rgba(0,0,0,0.2);
173177
--pf-c-modal-box--BorderRadius: 8px;
174178
--pf-c-modal-box--Padding: 1rem;
175-
width: 200px;
179+
180+
font-size: 0.875rem;
181+
}
182+
183+
184+
pf-modal#custom-label-modal h2[slot="header"] {
185+
margin: 0;
186+
font-size: 1.5rem;
187+
}
188+
189+
#add-label-form {
190+
display: flex;
191+
flex-direction: column;
192+
gap: 1rem;
193+
margin-top: 0.5rem;
194+
}
195+
#label-text {
196+
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
197+
font-size: var(--pf-global--FontSize--md, 16px);
198+
font-weight: var(--pf-global--FontWeight--normal, 400);
199+
line-height: 1.6;
200+
color: var(--pf-global--Color--100, #151515);
201+
202+
background-color: var(--pf-theme--color--surface--lightest, #fff);
203+
border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
204+
border-radius: 0.25rem;
205+
box-shadow: 0 0 0 1px var(--pf-c-select__toggle--focus--before--BorderBottomColor, rgb(54, 57, 59));
206+
padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);
207+
min-height: 44px;
208+
min-width: 44px;
209+
210+
width: 100%;
211+
box-sizing: border-box;
212+
}
213+
#label-text:focus {
214+
outline: none;
215+
border-bottom-color: var(--pf-c-select__toggle--focus--before--BorderBottomColor, #06c);
216+
border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth, 2px);
217+
218+
}
219+
220+
221+
#add-label-form input{
222+
padding: 0.25rem 0.25rem;
223+
font-size: 1rem;
224+
border: 1px solid #d2d2d2;
225+
border-radius: 4px;
226+
box-sizing: border-box;
227+
}
228+
229+
#add-label-form .radio-group {
230+
display: flex;
231+
flex-direction: column;
232+
align-items: flex-start;
233+
gap: 0.5rem;
234+
margin-top: 0.25rem;
235+
}
236+
237+
#add-label-form .radio-group > label {
238+
display: inline-flex;
239+
flex-direction: row;
240+
align-items: center;
241+
gap: 0.25rem;
242+
cursor: pointer;
243+
width: auto;
244+
}
245+
246+
/* #add-label-form .radio-group > label input[type="radio"] {
247+
margin: 0;
248+
flex: 0 0 auto;
249+
width: auto;
250+
height: auto;
251+
appearance: auto;
252+
} */
253+
254+
#add-label-form .radio-group > label input[type="radio"] {
255+
accent-color: var(--pf-global--primary-color--100, #0066cc);
256+
}
257+
258+
#add-label-form .radio-group > label .radio-text {
259+
display: inline-block;
260+
white-space: nowrap;
261+
}
262+
263+
pf-modal #custom-label-modal [slot="footer"] {
264+
display: flex;
265+
justify-content: flex-end;
266+
gap: 0.5rem;
267+
margin-top: 1rem;
268+
position: static;
269+
}
270+
271+
pf-modal#custom-label-modal pf-button {
272+
font-size: 0.85rem;
273+
padding: 0.25rem 0.5rem;
274+
}
275+
276+
#add-label-form label {
277+
font-weight: bold;
176278
font-size: 0.875rem;
279+
display: flex;
280+
flex-direction: column;
281+
margin-bottom: 0.05rem;
282+
margin-top: 0.15rem;
283+
}
284+
285+
#add-label-form pf-select {
286+
display: inline-block;
287+
width: fit-content;
288+
}
289+
290+
#color-select {
291+
min-width: 7rem;
292+
}
293+
294+
#icon-select {
295+
min-width: 12rem;
177296
}
178297
</style>

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

Lines changed: 87 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
<pf-label-group add-label-mode="fromList">
1+
<pf-label-group id="label-group">
22
<h2 slot="category">group name</h2>
33
<pf-label color="red" icon="info-circle" removable>label-1</pf-label>
44
<pf-label color="green" icon="info-circle" removable>label-2</pf-label>
55
<pf-label color="blue" icon="info-circle" removable>label-3</pf-label>
6+
<pf-label id="add-button" color="blue" variant="outline" dismissible="false">Add label</pf-label>
67
</pf-label-group>
78

89
<script type="module">
@@ -11,4 +12,89 @@ <h2 slot="category">group name</h2>
1112
import '@patternfly/elements/pf-button/pf-button.js';
1213
import '@patternfly/elements/pf-modal/pf-modal.js';
1314
import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
15+
16+
// Create a small dropdown control with a list of available labels to add
17+
const group = document.getElementById('label-group');
18+
const dropdown = document.createElement('pf-dropdown');
19+
dropdown.id = 'add-dropdown';
20+
dropdown.innerHTML = `
21+
<pf-dropdown-item data-text="Label-text-1" data-color="grey" data-icon="">Label-text-1</pf-dropdown-item>
22+
<pf-dropdown-item data-text="Label-text-2" data-color="blue" data-icon="info-circle">Label-text-2</pf-dropdown-item>
23+
<pf-dropdown-item data-text="Label-text-3" data-color="green" data-icon="check-circle">Label-text-3</pf-dropdown-item>
24+
<pf-dropdown-item data-text="Label-text-4" data-color="red" data-icon="exclamation-circle">Label-text-4</pf-dropdown-item>
25+
`;
26+
27+
// place the dropdown inside the label group and use the existing add-button as the toggle
28+
29+
30+
group.appendChild(dropdown);
31+
32+
const addButton = document.getElementById('add-button');
33+
if (addButton) {
34+
addButton.setAttribute('slot', 'toggle');
35+
dropdown.appendChild(addButton);
36+
}
37+
38+
// add handler: when an item is clicked, create and insert a new pf-label
39+
dropdown.addEventListener('click', (event) => {
40+
const item = event.target.closest('pf-dropdown-item');
41+
if (!item) return;
42+
const text = item.getAttribute('data-text') || item.textContent.trim();
43+
const color = item.getAttribute('data-color') || '';
44+
const icon = item.getAttribute('data-icon') || '';
45+
46+
const newLabel = document.createElement('pf-label');
47+
newLabel.textContent = text;
48+
if (color) newLabel.setAttribute('color', color);
49+
if (icon) newLabel.setAttribute('icon', icon);
50+
newLabel.setAttribute('removable', 'true');
51+
52+
const firstLabel = group.querySelector('pf-label:not([slot])');
53+
if (firstLabel) group.insertBefore(newLabel, firstLabel);
54+
else group.appendChild(newLabel);
55+
// close the dropdown if it exposes an API
56+
try { dropdown.hide?.(); } catch (e) {}
57+
});
1458
</script>
59+
60+
<style>
61+
/* Make the add-button match the pf-label defaults so it looks identical */
62+
#add-button {
63+
--pf-c-label--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
64+
--pf-c-label--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
65+
--pf-c-label--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
66+
--pf-c-label--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
67+
--pf-c-label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
68+
--pf-c-label--BorderRadius: 30em;
69+
70+
/* Fallback explicit rules to ensure consistent rendering in demos */
71+
font-size: 0.875rem;
72+
padding: 0.25rem 0.5rem;
73+
min-height: auto;
74+
line-height: normal;
75+
display: inline-flex;
76+
align-items: center;
77+
gap: 0.25rem;
78+
box-sizing: border-box;
79+
}
80+
81+
/* When the label is slotted into a pf-dropdown toggle, the dropdown
82+
applies toggle padding/font-size — override those for this demo so
83+
the add-button looks identical to other labels without changing
84+
the element attributes. */
85+
pf-dropdown ::slotted(#add-button) {
86+
--pf-c-label--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
87+
--pf-c-label--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
88+
--pf-c-label--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
89+
--pf-c-label--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
90+
--pf-c-label--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
91+
--pf-c-label--BorderRadius: 30em;
92+
93+
font-size: 0.875rem !important;
94+
padding: 0.25rem 0.5rem !important;
95+
line-height: normal !important;
96+
box-sizing: border-box !important;
97+
}
98+
99+
</style>
100+

0 commit comments

Comments
 (0)