Skip to content

Commit 5b9c991

Browse files
bennypowersbennypowers
committed
fix(chip): 1:1 layouts
1 parent df24cdf commit 5b9c991

5 files changed

Lines changed: 115 additions & 178 deletions

File tree

‎elements/pf-chip/docs/pf-chip.md‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script type="module">
2-
import '@patternfly/elements/pf-icon/pf-chip.js';
2+
import '@patternfly/elements/pf-icon/pf-icon.js';
33
import '@patternfly/elements/pf-badge/pf-badge.js';
44
import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
55
</script>
@@ -36,15 +36,12 @@ Chips can be removable or read-only. The Overflow chip is a special chip that is
3636
#### Max-width
3737

3838
{% htmlexample %}
39-
<pf-tooltip id="max" position="top">
40-
<pf-chip onclick="document.getElementById('max').remove()">Really long chip that goes on and on</pf-chip>
39+
<pf-tooltip id="max"
40+
position="top">
41+
<pf-chip onclick="this.parentElement.remove()"
42+
style="max-width:10em;display:inline-block;">Really long chip that goes on and on</pf-chip>
4143
<span slot="content">Really long chip that goes on and on</span>
4244
</pf-tooltip>
43-
<style>
44-
pf-chip {
45-
max-width: 10em;
46-
}
47-
</style>
4845
{% endhtmlexample %}
4946

5047
### Chip group

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

Lines changed: 1 addition & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,7 @@
6262
}
6363

6464
#close-button {
65-
background-color: transparent;
66-
border: none;
67-
color: var(--pf-global--Color--dark-200, #6a6e73);
68-
display: inline-flex;
69-
align-items: center;
70-
justify-content: center;
71-
min-height: 44px;
72-
min-width: 44px;
65+
--pf-icon--size: 16px;
7366
margin: var(--pf-c-chip__c-button--MarginTop)
7467
var(--pf-c-chip__c-button--MarginRight)
7568
var(--pf-c-chip__c-button--MarginBottom)
@@ -80,59 +73,6 @@
8073
var(--pf-c-chip__c-button--PaddingLeft);
8174
}
8275

83-
#overflow {
84-
--pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
85-
--pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
86-
--pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
87-
--pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
88-
--pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
89-
--pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
90-
--pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
91-
--pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
92-
--pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
93-
--pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
94-
--pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
95-
--pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
96-
--pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
97-
--pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
98-
--pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
99-
--pf-c-chip__text--MaxWidth: 16ch;
100-
--pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
101-
--pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
102-
--pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
103-
--pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
104-
--pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
105-
--pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
106-
--pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
107-
--pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
108-
--pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
109-
--pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
110-
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
111-
font-size: var(--pf-global--FontSize--xs, 12px);
112-
font-weight: var(--pf-global--FontWeight--normal, 400);
113-
border: 0;
114-
color: var(--pf-global--primary-color--100, #06c);
115-
background-color: transparent;
116-
border: none;
117-
display: inline-flex;
118-
align-items: center;
119-
justify-content: center;
120-
min-height: 44px;
121-
margin: 0;
122-
padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
123-
list-style: none;
124-
background-color: var(--pf-c-chip--BackgroundColor);
125-
border-style: solid;
126-
border-width: var(--pf-c-chip--before--BorderWidth);
127-
border-color: var(--pf-c-chip--BackgroundColor);
128-
border-radius: var(--pf-c-chip--before--BorderRadius);
129-
}
130-
131-
#overflow:focus {
132-
outline: none;
133-
border-color: var(--pf-theme--color--accent, #0066cc);
134-
}
135-
13676
svg {
13777
width: var(--pf-global--FontSize--sm, 14px);
13878
height: var(--pf-global--FontSize--sm, 14px);

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -117,23 +117,22 @@ export class PfChipGroup extends LitElement {
117117
@slotchange="${this.#onSlotchange}"
118118
@remove="${this.#updateChips}"
119119
></slot>
120-
<button id="overflow"
121-
?hidden="${this.remaining < 1}"
122-
aria-controls="chips"
123-
class="chip-content"
124-
@click="${this.#onMoreClick}"
120+
<pf-chip id="overflow"
121+
aria-controls="chips"
122+
overflow-chip
123+
?hidden="${this.remaining < 1}"
124+
@click="${this.#onMoreClick}"
125125
>${this.remaining < 1 ? ''
126126
: this.open ? this.expandedText
127-
: this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</button>
128-
<button id="close-button"
129-
?hidden="${!this.closeable}"
130-
@click="${this.#onCloseClick}"
131-
aria-describedby="category"
132-
aria-label="${this.accessibleCloseLabel}">
133-
<svg fill="currentColor" viewBox="0 0 496 496">
134-
<path d="m248,0C111,0,0,111,0,248s111,248,248,248,248-111,248-248S385,0,248,0Zm121.6,313.1c4.7,4.7,4.7,12.3,0,17l-39.6,39.5c-4.7,4.7-12.3,4.7-17,0l-65-65.6-65.1,65.6c-4.7,4.7-12.3,4.7-17,0l-39.5-39.6c-4.7-4.7-4.7-12.3,0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3,0-17l39.6-39.6c4.7-4.7,12.3-4.7,17,0l65,65.7,65.1-65.6c4.7-4.7,12.3-4.7,17,0l39.6,39.6c4.7,4.7,4.7,12.3,0,17l-65.7,65,65.6,65.1Z"/>
135-
</svg>
136-
</button>
127+
: this.collapsedText.replace(REMAINING_RE, this.remaining.toString())}</pf-chip>
128+
<pf-button id="close-button"
129+
plain
130+
icon="times-circle"
131+
icon-set="fas"
132+
label="${this.accessibleCloseLabel}"
133+
aria-describedby="category"
134+
?hidden="${!this.closeable}"
135+
@click="${this.#onCloseClick}"></pf-button>
137136
</div>
138137
`;
139138
}

‎elements/pf-chip/pf-chip.css‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,108 @@
11
:host {
2-
--pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
3-
--pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
4-
--pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
5-
--pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
6-
--pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
7-
--pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
8-
--pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
9-
--pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
10-
--pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
11-
--pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
12-
--pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
13-
--pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
14-
--pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
15-
--pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
16-
--pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
17-
--pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
18-
--pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
19-
--pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
20-
--pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
21-
--pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
22-
--pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) * -1);
23-
--pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
24-
--pf-c-chip__c-button--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
25-
--pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
26-
--pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
27-
--pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
28-
display: contents;
29-
min-width: 0;
30-
padding: 0;
31-
list-style: none;
32-
}
33-
34-
*[hidden],
35-
:host([hidden]) {
36-
display: none !important;
37-
}
38-
39-
#outer {
40-
display: inline-flex;
41-
align-items: center;
42-
justify-content: space-between;
43-
background-color: var(--pf-c-chip--BackgroundColor);
44-
border-radius: var(--pf-c-chip--BorderRadius);
45-
border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
2+
--pf-c-chip--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
3+
--pf-c-chip--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
4+
--pf-c-chip--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
5+
--pf-c-chip--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
6+
--pf-c-chip--BackgroundColor: var(--pf-global--Color--light-100, #fff);
7+
--pf-c-chip--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
8+
--pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
9+
--pf-c-chip--before--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
10+
--pf-c-chip--before--BorderRadius: var(--pf-c-chip--BorderRadius);
11+
--pf-c-chip--m-overflow__text--Color: var(--pf-global--primary-color--100, #06c);
12+
--pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200, #f0f0f0);
13+
--pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
14+
--pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);
15+
--pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
16+
--pf-c-chip__text--Color: var(--pf-global--Color--100, #151515);
17+
--pf-c-chip__text--MaxWidth: 16ch;
18+
--pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
19+
--pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
20+
--pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
21+
--pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
22+
--pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
23+
--pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
24+
--pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
25+
--pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs, 0.75rem);
26+
--pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
27+
--pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
28+
color: var(--pf-global--Color--100, #151515);
29+
position: relative;
30+
display: inline-flex;
31+
align-items: center;
32+
min-width: 0;
33+
list-style: none;
34+
background-color: var(--pf-c-chip--BackgroundColor);
35+
border-radius: var(--pf-c-chip--BorderRadius);
4636
padding:
4737
var(--pf-c-chip--PaddingTop)
4838
var(--pf-c-chip--PaddingRight)
4939
var(--pf-c-chip--PaddingBottom)
5040
var(--pf-c-chip--PaddingLeft);
5141
}
5242

53-
:host([overflow-chip]) {
54-
color: var(--pf-c-chip--m-overflow__text--Color);
43+
[hidden],
44+
:host([hidden]) {
45+
display: none !important;
5546
}
5647

57-
.chip-content {
58-
display: inline-flex;
59-
align-items: center;
48+
div#outer {
49+
display: contents;
6050
}
6151

62-
.chip-content {
63-
color: var(--pf-c-chip__text--Color);
64-
font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
65-
font-size: var(--pf-c-chip__text--FontSize);
66-
font-weight: var(--pf-global--FontWeight--normal, 400);
67-
line-height: 1.6;
68-
overflow-x: hidden;
69-
overflow-y: hidden;
52+
#outer:before {
53+
position: absolute;
54+
top: 0;
55+
right: 0;
56+
bottom: 0;
57+
left: 0;
58+
content: "";
59+
border: var(--pf-c-chip--before--BorderWidth) solid var(--pf-c-chip--before--BorderColor);
60+
border-radius: var(--pf-c-chip--before--BorderRadius);
61+
}
62+
63+
span {
64+
overflow: hidden;
7065
text-overflow: ellipsis;
71-
display: inline-flex;
72-
text-wrap: nowrap;
7366
white-space: nowrap;
74-
flex: 0 0 auto;
67+
position: relative;
68+
max-width: var(--pf-c-chip__text--MaxWidth);
69+
font-size: var(--pf-c-chip__text--FontSize);
70+
color: var(--pf-c-chip__text--Color);
7571
}
7672

77-
:host([readonly]) .chip-content {
73+
:host([readonly]) span {
7874
color: var(--pf-global--Color--200, #6a6e73);
7975
}
8076

77+
/* OVERFLOW */
78+
79+
button#outer {
80+
display: flex;
81+
background: none;
82+
border: 1px solid transparent;
83+
}
84+
85+
button#outer span {
86+
color: var(--pf-c-chip--m-overflow__text--Color);
87+
}
88+
89+
/* CLOSE */
90+
8191
#close-button {
82-
background-color: transparent;
83-
border: none;
84-
color: var(--pf-global--Color--dark-200, #6a6e73);
85-
display: inline-flex;
86-
align-items: center;
87-
justify-content: center;
88-
min-height: 44px;
89-
min-width: 44px;
90-
margin: var(--pf-c-chip__c-button--MarginTop)
91-
var(--pf-c-chip__c-button--MarginRight)
92-
var(--pf-c-chip__c-button--MarginBottom)
93-
var(--pf-c-chip__c-button--MarginLeft);
94-
padding: var(--pf-c-chip__c-button--PaddingTop)
95-
var(--pf-c-chip__c-button--PaddingRight)
96-
var(--pf-c-chip__c-button--PaddingBottom)
97-
var(--pf-c-chip__c-button--PaddingLeft);
92+
--pf-icon--size: 12px;
93+
--pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
94+
--pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
95+
--pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
96+
--pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
97+
--pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
9898
}
9999

100-
svg {
100+
#close-button::part(button) {
101+
display: inline-block;
102+
margin-top: var(--pf-c-chip__c-button--MarginTop);
103+
margin-right: var(--pf-c-chip__c-button--MarginRight);
104+
margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
101105
vertical-align: -0.125em;
102-
width: var(--pf-c-chip__text--FontSize, 12px);
103-
height: var(--pf-c-chip__text--FontSize, 12px);
104106
}
105107

106108
::slotted(pf-badge) {

‎elements/pf-chip/pf-chip.ts‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class ChipRemoveEvent extends Event {
2828
* @slot
2929
* chip text
3030
*
31-
* @csspart text - span container for chip text
31+
* @csspart text - container for chip text
3232
*/
3333
@customElement('pf-chip')
3434
export class PfChip extends LitElement {
@@ -55,24 +55,23 @@ export class PfChip extends LitElement {
5555
render() {
5656
return this.overflowChip ? html`
5757
<button id="outer">
58-
<span class="chip-content">
59-
<slot id="chip-text" part="text"></slot>
58+
<span part="text">
59+
<slot></slot>
6060
</span>
6161
</button>
6262
` : html`
6363
<div id="outer">
64-
<span class="chip-content">
65-
<slot id="chip-text" part="text"></slot>
64+
<span part="text">
65+
<slot></slot>
6666
</span>
67-
<button id="close-button"
68-
?hidden="${this.readonly || this.overflowChip}"
69-
@click="${this.#onClick}"
70-
aria-describedby="chip-text"
71-
aria-label="${this.accessibleCloseLabel}">
72-
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 352 512">
73-
<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"></path>
74-
</svg>
75-
</button>
67+
<pf-button id="close-button"
68+
plain
69+
icon="close"
70+
icon-set="patternfly"
71+
label="${this.accessibleCloseLabel}"
72+
aria-describedby="chip-text"
73+
?hidden="${this.readonly || this.overflowChip}"
74+
@click="${this.#onClick}"></pf-button>
7675
</div>
7776
`;
7877
}

0 commit comments

Comments
 (0)