Skip to content

Commit 2eeae64

Browse files
Michal7290Michal7290
committed
feat(label-group): add demo to add label
1 parent 37a1cb6 commit 2eeae64

File tree

2 files changed

+193
-4
lines changed

2 files changed

+193
-4
lines changed

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,39 @@
1-
<pf-label-group closeable add-label-mode="autoNoEdit">
1+
<pf-label-group id="label-group" closeable>
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+
7+
<pf-label id="add-button" color="blue" variant="outline" dismissible="false" >
8+
Add label </pf-label>
69
</pf-label-group>
710

11+
812
<script type="module">
913
import '@patternfly/elements/pf-label-group/pf-label-group.js';
1014
import '@patternfly/elements/pf-label/pf-label.js';
1115
import '@patternfly/elements/pf-button/pf-button.js';
1216
import '@patternfly/elements/pf-modal/pf-modal.js';
1317
import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
18+
document.getElementById('add-button').addEventListener('click', () => {
19+
const labelGroup = document.getElementById('label-group');
20+
const newLabel = document.createElement('pf-label');
21+
newLabel.setAttribute('color', 'grey');
22+
newLabel.setAttribute('icon', 'info-circle');
23+
newLabel.setAttribute('removable', 'true');
24+
const count = labelGroup.querySelectorAll('pf-label:not([slot])').length;
25+
newLabel.textContent = `label-${count}`;
26+
const firstLabel = labelGroup.querySelector('pf-label:not([slot])');
27+
if (firstLabel) labelGroup.insertBefore(newLabel, firstLabel);
28+
else labelGroup.appendChild(newLabel);
29+
});
1430
</script>
31+
<style>
32+
#add-button {
33+
cursor: pointer;
34+
align-items: center;
35+
gap: 4px;
36+
transition: border 0.2s ease;
37+
border-radius: 0.99rem;
38+
}
39+
</style>

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

Lines changed: 167 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,178 @@
1-
<pf-label-group add-label-mode="customForm">
1+
<pf-label-group id="label-group" closeable>
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+
7+
<pf-label id="add-button" color="blue" variant="outline" dismissible="false" >
8+
Add label </pf-label>
69
</pf-label-group>
710

811
<script type="module">
912
import '@patternfly/elements/pf-label-group/pf-label-group.js';
1013
import '@patternfly/elements/pf-label/pf-label.js';
1114
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';
15+
import '@patternfly/elements/pf-modal/pf-modal.js';
16+
17+
const group = document.getElementById('label-group');
18+
const addButton = document.getElementById('add-button');
19+
console.log('addButton', addButton);
20+
21+
22+
// create a modal element with form controls and buttons, return it
23+
function createModal() {
24+
const modal = document.createElement('pf-modal');
25+
modal.setAttribute('aria-describedby', 'custom-label-modal-description');
26+
console.log('modal is created');
27+
28+
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>
31+
32+
<form id="add-label-form">
33+
<label>
34+
Label text:
35+
<input id="label-text" class="pf-c-form-control" value="New label" />
36+
</label>
37+
38+
<label>
39+
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>
50+
</label>
51+
52+
<label>
53+
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>
61+
</label>
62+
63+
<div>
64+
<label>Dismissable:</label>
65+
<div>
66+
<label><input type="radio" name="dismissable" value="true" /> Yes</label>
67+
<label><input type="radio" name="dismissable" value="false" checked /> No</label>
68+
</div>
69+
</div>
70+
71+
<div>
72+
<label>Label type:</label>
73+
<div>
74+
<label><input type="radio" name="filled" value="true" checked /> Filled</label>
75+
<label><input type="radio" name="filled" value="false" /> Outlined</label>
76+
</div>
77+
</div>
78+
</form>
79+
80+
<div slot="footer" style="display:flex; justify-content:flex-end; gap:0.5rem;">
81+
<pf-button id="modal-add" variant="primary">Save</pf-button>
82+
<pf-button id="modal-cancel" variant="secondary">Cancel</pf-button>
83+
</div>
84+
`;
85+
console.log('modal innerHTML set');
86+
return modal;
87+
}
88+
89+
90+
91+
function resetForm(form) {
92+
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';
97+
if (selectIcon) selectIcon.value = '';
98+
const dismissNo = form.querySelector('input[name="dismissable"][value="false"]');
99+
const filledYes = form.querySelector('input[name="filled"][value="true"]');
100+
if (dismissNo) dismissNo.checked = true;
101+
if (filledYes) filledYes.checked = true;
102+
}
103+
104+
function openModal() {
105+
const modal = createModal();
106+
document.body.appendChild(modal);
107+
108+
const form = modal.querySelector('#add-label-form');
109+
const inputText = modal.querySelector('#label-text');
110+
const selectColor = modal.querySelector('#label-color');
111+
const selectIcon = modal.querySelector('#label-icon');
112+
const modalAdd = modal.querySelector('#modal-add');
113+
const modalCancel = modal.querySelector('#modal-cancel');
114+
115+
resetForm(form);
116+
117+
function cleanup() {
118+
try { modal.remove(); } catch (e) {}
119+
requestAnimationFrame(() => addButton.focus());
120+
}
121+
122+
modal.addEventListener('close', cleanup, { once: true });
123+
124+
modalCancel.addEventListener('click', () => {
125+
modal.open = false;
126+
}, { once: true });
127+
128+
modalAdd.addEventListener('click', () => {
129+
const text = (inputText.value || '').trim() || 'New label';
130+
const color = selectColor.value;
131+
const icon = selectIcon.value;
132+
const dismissable = !!form.querySelector('input[name="dismissable"]:checked') &&
133+
form.querySelector('input[name="dismissable"]:checked').value === 'true';
134+
const filled = !!form.querySelector('input[name="filled"]:checked') &&
135+
form.querySelector('input[name="filled"]:checked').value === 'true';
136+
137+
const newLabel = document.createElement('pf-label');
138+
newLabel.textContent = text;
139+
if (color) newLabel.setAttribute('color', color);
140+
if (icon) newLabel.setAttribute('icon', icon);
141+
if (dismissable) newLabel.setAttribute('removable', 'true');
142+
if (!filled) newLabel.setAttribute('variant', 'outline');
143+
144+
const firstLabel = group.querySelector('pf-label:not([slot])');
145+
if (firstLabel) group.insertBefore(newLabel, firstLabel);
146+
else group.appendChild(newLabel);
147+
148+
group.dispatchEvent(new CustomEvent('label-added', { detail: { text, color, icon, dismissable, filled }, bubbles: true }));
149+
150+
modal.open = false;
151+
}, { once: true });
152+
153+
// open and focus
154+
modal.open = true;
155+
requestAnimationFrame(() => {
156+
const first = modal.querySelector('#label-text');
157+
if (first) first.focus();
158+
});
159+
}
160+
161+
addButton.addEventListener('click', openModal);
14162
</script>
163+
<style>
164+
#add-button {
165+
cursor: pointer;
166+
align-items: center;
167+
gap: 4px;
168+
transition: border 0.2s ease;
169+
border-radius: 0.99rem;
170+
}
171+
pf-modal#custom-label-modal {
172+
--pf-c-modal--BoxShadow: 0 0 15px rgba(0,0,0,0.2);
173+
--pf-c-modal-box--BorderRadius: 8px;
174+
--pf-c-modal-box--Padding: 1rem;
175+
width: 200px;
176+
font-size: 0.875rem;
177+
}
178+
</style>

0 commit comments

Comments
 (0)