Skip to content

Commit 20cb613

Browse files
bennypowersbennypowers
authored
fix(chip): layouts, max width tooltip (#2676)
* fix(tools): dev server load sources * fix(tools): tooltips can overlay the dev server header * fix(button): plain icon layouts * fix(chip): 1:1 layouts * test(chip): fix some tests * fix(chip): restore idref link in shadow root * fix(chip): overflow for long text * fix(tools): add description prop to snapshot type * perf(chip): remove unused property and decorator * refactor(button): split css into modules * fix(chip): partially reimplement button for a11y reasons * test(chip): close button ax-tree description * docs(chip): demo name * feat(tools): css import caching transformer * Revert "feat(tools): css import caching transformer" This reverts commit 2c7f67d. * Revert css-imports.cjs * Revert dev-server css
1 parent 8e4c73d commit 20cb613

File tree

17 files changed

+525
-365
lines changed

17 files changed

+525
-365
lines changed

‎elements/pf-button/BaseButton.css‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
:host {
2-
display: inline-block;
3-
height: max-content;
4-
}
5-
61
:host([hidden]) {
72
display: none !important;
83
}
@@ -11,18 +6,18 @@
116
display: none !important;
127
}
138

14-
button {
9+
.pf-button {
1510
cursor: pointer;
1611
position: relative;
1712
font-family: inherit;
1813
}
1914

20-
button {
15+
.pf-button {
2116
border-width: 0;
2217
border-style: solid;
2318
}
2419

25-
button::after {
20+
.pf-button::after {
2621
position: absolute;
2722
inset: 0 0 0 0;
2823
content: "";
@@ -31,9 +26,9 @@ button::after {
3126

3227
:host(:is(:disabled, [aria-disabled=true])),
3328
:host(:is(:disabled, [aria-disabled=true])) #container,
34-
:host(:is(:disabled, [aria-disabled=true])) button,
35-
:host(:is(:disabled, [aria-disabled=true])[danger]) button,
36-
:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {
29+
:host(:is(:disabled, [aria-disabled=true])) .pf-button,
30+
:host(:is(:disabled, [aria-disabled=true])[danger]) .pf-button,
31+
:host(:is(:disabled, [aria-disabled=true])[variant=link]) .pf-button {
3732
pointer-events: none;
3833
cursor: default;
3934
}
@@ -43,13 +38,13 @@ button::after {
4338
pointer-events: none;
4439
}
4540

46-
.hasIcon {
41+
.pf-button.hasIcon {
4742
position: relative;
4843
display: flex;
4944
align-items: center;
5045
}
5146

52-
.hasIcon [part=icon] {
47+
.pf-button.hasIcon [part=icon] {
5348
display: inline-flex;
5449
align-items: center;
5550
position: absolute;

‎elements/pf-button/BaseButton.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,15 @@ export abstract class BaseButton extends LitElement {
5858
}
5959

6060
override render() {
61-
const { hasIcon } = this;
61+
const {
62+
disabled,
63+
hasIcon,
64+
// @ts-expect-error: will no longer be a problem after closing issue #2616
65+
plain,
66+
} = this;
6267
return html`
6368
<button aria-label="${ifDefined(this.label)}"
64-
class="${classMap({ hasIcon })}"
69+
class="pf-button ${classMap({ disabled, hasIcon, plain })}"
6570
part="button"
6671
type="${ifDefined(this.type)}"
6772
value="${ifDefined(this.value)}"

‎elements/pf-button/pf-button-base.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.pf-button {
2+
display: block;
3+
font-size: var(--pf-c-button--FontSize);
4+
font-weight: var(--pf-c-button--FontWeight);
5+
line-height: var(--pf-c-button--LineHeight);
6+
text-align: center;
7+
white-space: nowrap;
8+
color: var(--pf-c-button--m-primary--Color,
9+
var(--pf-global--Color--light-100, #fff));
10+
background-color: var(--pf-c-button--m-primary--BackgroundColor,
11+
var(--pf-global--primary-color--100, #06c));
12+
font-size: var(--pf-c-button--FontSize,
13+
var(--pf-global--FontSize--md, 1rem));
14+
font-weight: var(--pf-c-button--FontWeight,
15+
var(--pf-global--FontWeight--normal, 400));
16+
line-height: var(--pf-c-button--LineHeight,
17+
var(--pf-global--LineHeight--md, 1.5));
18+
padding:
19+
var(--pf-c-button--PaddingTop,
20+
var(--pf-global--spacer--form-element, 0.375rem))
21+
var(--pf-c-button--PaddingRight,
22+
var(--pf-global--spacer--md, 1rem))
23+
var(--pf-c-button--PaddingBottom,
24+
var(--pf-global--spacer--form-element, 0.375rem))
25+
var(--pf-c-button--PaddingLeft,
26+
var(--pf-global--spacer--md, 1rem));
27+
border-radius: var(--pf-c-button--BorderRadius,
28+
var(--pf-global--BorderRadius--sm, 3px));
29+
}
30+
31+
.pf-button pf-icon,
32+
.pf-button ::slotted(pf-icon) {
33+
color: currentColor;
34+
}
35+
36+
.pf-button::after {
37+
position: absolute;
38+
top: 0;
39+
right: 0;
40+
bottom: 0;
41+
left: 0;
42+
pointer-events: none;
43+
content: "";
44+
border-style: solid;
45+
border-width: var(--pf-c-button--after--BorderWidth);
46+
border-color: var(--pf-c-button--after--BorderColor);
47+
border-radius: var(--pf-c-button--after--BorderRadius);
48+
}
49+
50+
.pf-button:active {
51+
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--active--Color,
52+
var(--pf-global--Color--light-100, #fff));
53+
--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--active--BackgroundColor,
54+
var(--pf-global--primary-color--200, #004080));
55+
--pf-c-button--after--BorderWidth: var(--pf-c-button--active--after--BorderWidth,
56+
var(--pf-global--BorderWidth--md, 2px));
57+
/* DANGER */
58+
--pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--active--Color,
59+
var(--pf-global--Color--light-100, #fff));
60+
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--active--BackgroundColor,
61+
var(--pf-global--danger-color--200, #a30000));
62+
}
63+
64+
.pf-button:focus {
65+
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--focus--Color,
66+
var(--pf-global--Color--light-100, #fff));
67+
--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--focus--BackgroundColor,
68+
var(--pf-global--primary-color--200, #004080));
69+
--pf-c-button--after--BorderWidth: var(--pf-c-button--focus--after--BorderWidth,
70+
var(--pf-global--BorderWidth--md, 2px));
71+
/* DANGER */
72+
--pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--focus--Color,
73+
var(--pf-global--Color--light-100, #fff));
74+
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--focus--BackgroundColor,
75+
var(--pf-global--danger-color--200, #a30000));
76+
}
77+
78+
.pf-button:hover {
79+
--pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color,
80+
var(--pf-global--Color--light-100, #fff));
81+
--pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor,
82+
var(--pf-global--primary-color--200, #004080));
83+
--pf-c-button--after--BorderWidth: var(--pf-c-button--hover--after--BorderWidth,
84+
var(--pf-global--BorderWidth--md, 2px));
85+
/* DANGER */
86+
--pf-c-button--m-danger--Color: var(--pf-c-button--m-danger--hover--Color,
87+
var(--pf-global--Color--light-100, #fff));
88+
--pf-c-button--m-danger--BackgroundColor: var(--pf-c-button--m-danger--hover--BackgroundColor,
89+
var(--pf-global--danger-color--200, #a30000));
90+
}
91+

‎elements/pf-button/pf-button-icon.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/******************************
2+
* *
3+
* ICON *
4+
* *
5+
******************************/
6+
7+
.pf-button.hasIcon {
8+
gap: calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,
9+
var(--pf-global--spacer--xs, 0.25rem)));
10+
}
11+

‎elements/pf-button/pf-button-plain.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.plain {
2+
--pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent);
3+
}
4+
5+
.plain {
6+
--pf-c-button--after--BorderWidth: 0 !important;
7+
--pf-c-button--after--BorderColor: var(--pf-c-button--m-tertiary--after--BorderColor,
8+
var(--pf-global--Color--100, #151515));
9+
--pf-c-button--disabled--Color: var(--pf-c-button--m-plain--disabled--Color,
10+
var(--pf-global--disabled-color--200, #d2d2d2));
11+
color: var(--pf-c-button--m-plain--Color,
12+
var(--pf-global--Color--200, #6a6e73));
13+
background-color: var(--pf-c-button--m-plain--BackgroundColor,
14+
transparent);
15+
}
16+
17+
.plain:active {
18+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--active--Color,
19+
var(--pf-global--Color--100, #151515));
20+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--active--BackgroundColor,
21+
tranparent);
22+
}
23+
24+
.plain:focus {
25+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--focus--Color,
26+
var(--pf-global--Color--100, #151515));
27+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--focus--BackgroundColor,
28+
transparent);
29+
}
30+
31+
.plain:hover {
32+
--pf-c-button--m-plain--Color: var(--pf-c-button--m-plain--hover--Color,
33+
var(--pf-global--Color--100, #151515));
34+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-button--m-plain--hover--BackgroundColor,
35+
transparent);
36+
}
37+
38+
.plain:not(.hasIcon) [part=icon],
39+
:host([loading]) .plain [part=icon] {
40+
left: 16px;
41+
}
42+
43+
.plain [part=icon] {
44+
display: contents;
45+
}
46+
47+
.plain.disabled,
48+
:host([variant=link]) .plain.disabled,
49+
.plain[aria-disabled=true],
50+
.plain:disabled {
51+
color: var(--pf-c-button--disabled--Color,
52+
var(--pf-c-button--m-plain--disabled--Color,
53+
var(--pf-global--disabled--color--200, #d2d2d2)));
54+
}
55+
56+
:not(.plain).hasIcon [part=icon] {
57+
--pf-icon--size: 16px;
58+
position: relative;
59+
}
60+

0 commit comments

Comments
 (0)