Skip to content

Commit 7f82f28

Browse files
author
Sara Dahan
committed
chore(label-group): minor updates
1 parent d86e8ac commit 7f82f28

File tree

3 files changed

+188
-4
lines changed

3 files changed

+188
-4
lines changed

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1-
<pf-label-group></pf-label-group>
1+
<pf-label-group removable add-label>
2+
<pf-label icon="info-circle" removable>Gold icon</pf-label>
3+
<pf-label icon="info-circle" removable>Gold icon</pf-label>
4+
<h2 slot="header">label group </h2>
5+
6+
</pf-label-group>
27

38
<script type="module">
49
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+
13+
const container = document.querySelector('pf-label-group');
14+
container.addEventListener('close', function(event) {
15+
event.target.remove();
16+
});
17+
18+
19+
container.addEventListener('add-label' , function(event) {
20+
21+
22+
console.log('Add label button clicked');
23+
} );
524
</script>
625

726
<style>
827
pf-label-group {
928
/* insert demo styles */
1029
}
11-
</style>
12-
30+
</style>

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

Lines changed: 108 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,110 @@
11
:host {
2-
display: block;
2+
display: flex;
3+
flex-direction: row; /* ברירת מחדל = horizontal */
4+
position: relative;
5+
gap: 0.5rem;
6+
border: 0;
37
}
8+
9+
:host([orientation="horizontal"]) #container {
10+
flex-direction: row;
11+
}
12+
13+
:host([orientation="vertical"]) {
14+
flex-direction: column;
15+
}
16+
17+
:host([orientation="vertical"]) #container {
18+
flex-direction: column;
19+
}
20+
21+
:host([removable]) span[part="close-button"] {
22+
display: inline-flex;
23+
align-items: center;
24+
cursor: pointer;
25+
margin-left: auto;
26+
}
27+
28+
/* Container styles */
29+
#container {
30+
display: flex;
31+
align-items: center;
32+
gap: var(--pf-c-label--m-compact--c-button--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
33+
padding: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))
34+
var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem))
35+
var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))
36+
var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
37+
font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
38+
color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));
39+
background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
40+
border-radius: var(--pf-c-label--BorderRadius, 0em);
41+
max-width: 100%;
42+
position: relative;
43+
--pf-global--icon--FontSize--sm: 14px;
44+
}
45+
46+
#container::before {
47+
position: absolute;
48+
top: 0;
49+
right: 0;
50+
bottom: 0;
51+
left: 0;
52+
pointer-events: none;
53+
content: "";
54+
border-radius: var(--pf-c-label--BorderRadius, 0em);
55+
border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));
56+
}
57+
58+
/* Icons */
59+
pf-icon, ::slotted(pf-icon) {
60+
color: currentColor;
61+
}
62+
63+
[part=icon] {
64+
display: none;
65+
pointer-events: none;
66+
}
67+
68+
svg {
69+
vertical-align: -0.125em;
70+
fill: currentColor;
71+
height: 1em;
72+
width: 1em;
73+
}
74+
75+
/* Button inside label */
76+
pf-button {
77+
--pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
78+
--pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
79+
--pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
80+
--pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
81+
--pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
82+
margin: var(--pf-c-label__c-button--MarginTop, -0.5rem)
83+
var(--pf-c-label__c-button--MarginRight, -0.5rem)
84+
var(--pf-c-label__c-button--MarginBottom, -0.5rem)
85+
var(--pf-c-label__c-button--MarginLeft, 0.25rem);
86+
}
87+
88+
/* Compact modifier */
89+
.compact {
90+
--pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
91+
--pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
92+
--pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
93+
--pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
94+
--pf-global--icon--FontSize--sm: 12px;
95+
}
96+
.add-label-btn {
97+
background-color: #fff;
98+
color: #0066cc;
99+
border: 1px solid #d2d2d2;
100+
border-radius: 9999px;
101+
padding: 0px 2px; /* ריווח קטן יותר */
102+
font-size: 9px; /* טקסט קטן יותר */
103+
cursor: pointer;
104+
font-weight: 500;
105+
}
106+
107+
108+
.add-label-btn:hover {
109+
background-color: #f5f5f5;
110+
}

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1+
12
import { LitElement, html, type TemplateResult } from 'lit';
23
import { customElement } from 'lit/decorators/custom-element.js';
4+
import { property } from 'lit/decorators/property.js';
5+
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
6+
import { classMap } from 'lit/directives/class-map.js';
7+
import '@patternfly/elements/pf-button/pf-button.js';
38

49
import styles from './pf-label-group.css';
510

11+
export class GroupLabelCloseEvent extends Event {
12+
constructor() {
13+
super('close', { bubbles: true, cancelable: true });
14+
}
15+
}
16+
617
/**
718
* Label Group
819
* @slot - Place element content here
@@ -11,13 +22,61 @@ import styles from './pf-label-group.css';
1122
export class PfLabelGroup extends LitElement {
1223
static readonly styles: CSSStyleSheet[] = [styles];
1324

25+
26+
static override readonly shadowRootOptions: ShadowRootInit = {
27+
...LitElement.shadowRootOptions,
28+
delegatesFocus: true,
29+
};
30+
31+
32+
@property({ type: String }) orientation: 'horizontal' | 'vertical' = 'horizontal';
33+
34+
@property({ type: Boolean }) removable = false;
35+
36+
@property({ attribute: 'close-button-label' }) closeButtonLabel?: string;
37+
38+
@property({ type: String }) categoryName = 'Category Name';
39+
40+
@property({ attribute: 'add-label', type: Boolean }) addLabel = false;
41+
42+
1443
render(): TemplateResult<1> {
44+
const { removable, orientation } = this;
1545
return html`
46+
<span id="container" class="${classMap({
47+
horizontal: orientation === 'horizontal',
48+
vertical: orientation === 'vertical',
49+
removable: removable,
50+
})}">
51+
<span part="close-button" ?hidden=${!this.removable}>
52+
</span>
53+
<slot name="header">${this.categoryName}</slot>
54+
55+
1656
<slot></slot>
57+
58+
<!-- summary: container for removable label group' close button -->
59+
<span part="close-button" ?hidden=${!this.removable}>
60+
<pf-button plain
61+
@click="${this.#onClickClose}"
62+
label="${this.closeButtonLabel ?? 'remove'}">
63+
<svg viewBox="0 0 352 512">
64+
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
65+
</svg>
66+
</pf-button>
67+
</span>
1768
`;
1869
}
70+
71+
72+
#onClickClose() {
73+
if (this.removable && this.dispatchEvent(new GroupLabelCloseEvent())) {
74+
this.remove();
75+
}
76+
}
1977
}
2078

79+
2180
declare global {
2281
interface HTMLElementTagNameMap {
2382
'pf-label-group': PfLabelGroup;

0 commit comments

Comments
 (0)