Skip to content

Commit fa003c3

Browse files
committed
Merge upstream primer view_components v0.51.6
Syncs the fork with primer/view_components up to upstream commit 6733f3c (parent of Release Tracking primer#4098), reaching v0.51.6. Upstream changes pulled in: - classnames.js Set export (primer#4096): static/classnames.{js,cjs,d.ts}, the export-css-selectors collection logic, and the package.json exports subpath plus files entries. - perf(css): removed universal `*` subjects and expanded merged `:is()` selector lists (primer#4095). Conflict resolution kept the fork's identity, scope and its higher dependency versions; upstream's new exports were merged in. The recursive tsconfig include is re-applied here so nested component TS keeps experimentalDecorators under Vite 8/rolldown. All generated static files were regenerated from a clean tree.
2 parents dd6de0e + 6733f3c commit fa003c3

15 files changed

Lines changed: 1303 additions & 139 deletions

.changeset/classnames-export.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@openproject/primer-view-components": minor
3+
---
4+
5+
Add `static/classnames.js`, which default-exports a `Set` of every unique CSS class name in the library for consumers and tooling. It is available via the `@openproject/primer-view-components/classnames` import subpath.

.changeset/fast-pumas-juggle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@openproject/primer-view-components": patch
3+
---
4+
5+
Improve CSS style-recalc performance by removing selectors with universal subjects and expanding merged `:is()` selector lists so the browser can fast-reject them. Affects `autocomplete-item`, `Popover-message--*`, `breadcrumb-item`, and `FormControl-checkbox-wrap`/`FormControl-radio-wrap` styles.

.devcontainer/Dockerfile

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ ARG INSTALL_NODE="true"
66
ARG NODE_VERSION="lts/*"
77

88
# OS packages required to run the application
9+
# Remove Yarn apt source to avoid GPG key verification failures during apt-get update
10+
RUN rm -f /etc/apt/sources.list.d/yarn.list
911
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
1012
&& apt-get -y install --no-install-recommends \
1113
fonts-liberation \

app/components/primer/alpha/auto_complete.pcss

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,13 @@
9292
background-color: var(--overlay-bgColor);
9393
border: 0;
9494

95+
/* `color` is inherited, so setting it on the item recolors descendants
96+
** without a universal `… *` descendant rule (which forces a slow
97+
** style-recalc match attempt against every element on the page). */
9598
&:hover {
9699
color: var(--fgColor-onEmphasis);
97100
text-decoration: none;
98101
background-color: var(--bgColor-accent-emphasis);
99-
100-
/* Inherit color on all child elements to ensure enough contrast */
101-
& * {
102-
color: inherit !important;
103-
}
104102
}
105103

106104
&.selected,
@@ -109,10 +107,5 @@
109107
color: var(--fgColor-onEmphasis);
110108
text-decoration: none;
111109
background-color: var(--bgColor-accent-emphasis);
112-
113-
/* Inherit color on all child elements to ensure enough contrast */
114-
& * {
115-
color: inherit !important;
116-
}
117110
}
118111
}

app/components/primer/alpha/text_field.pcss

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
}
7979

8080
/* shared among all form control components (input, select, textarea, checkbox, radio) */
81+
/* stylelint-disable nesting-selector-no-missing-scoping-root */
8182
@define-mixin Field {
8283
color: var(--fgColor-default);
8384
background-color: var(--bgColor-default);
@@ -118,6 +119,7 @@
118119
@mixin focusBoxShadowInset;
119120
}
120121
}
122+
/* stylelint-enable nesting-selector-no-missing-scoping-root */
121123

122124
/* TextInput structure
123125
** ===================
@@ -673,18 +675,21 @@
673675
grid-template-columns: min-content auto;
674676
gap: var(--base-size-8);
675677

676-
& .FormControl-checkbox-labelWrap,
677-
& .FormControl-radio-labelWrap {
678-
display: flex;
679-
flex-direction: column;
680-
gap: var(--base-size-4);
681-
}
682-
683678
& .FormControl-label {
684679
cursor: pointer;
685680
}
686681
}
687682

683+
/* Expanded per-class so the subject buckets by a single class during style
684+
** recalc, instead of compiling to a merged `:is(...)` subject that Blink
685+
** cannot fast-reject. */
686+
.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,
687+
.FormControl-radio-wrap .FormControl-radio-labelWrap {
688+
display: flex;
689+
flex-direction: column;
690+
gap: var(--base-size-4);
691+
}
692+
688693
.FormControl-radio-group-wrap {
689694
& fieldset {
690695
padding: 0;

app/components/primer/beta/breadcrumbs.pcss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,12 @@
1515
}
1616
}
1717

18-
.breadcrumb-item-selected,
19-
.breadcrumb-item[aria-current]:not([aria-current='false']) {
20-
&::after {
21-
content: none;
22-
}
18+
/* Expanded per-class so each selector buckets by its own class during style
19+
** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
20+
** fast-reject. */
21+
.breadcrumb-item-selected::after,
22+
.breadcrumb-item[aria-current]:not([aria-current='false'])::after {
23+
content: none;
2324
}
2425

2526
/* stylelint-disable-next-line selector-max-type */

0 commit comments

Comments
 (0)