primer_view_components 0.51.6 → 0.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +10 -0
  3. data/app/assets/styles/primer_view_components.css +1 -1
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/auto_complete.css +1 -1
  6. data/app/components/primer/alpha/auto_complete.css.json +2 -4
  7. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  8. data/app/components/primer/alpha/auto_complete.pcss +3 -10
  9. data/app/components/primer/alpha/text_field.css +1 -1
  10. data/app/components/primer/alpha/text_field.css.json +2 -1
  11. data/app/components/primer/alpha/text_field.css.map +1 -1
  12. data/app/components/primer/alpha/text_field.pcss +12 -7
  13. data/app/components/primer/beta/breadcrumbs.css +1 -1
  14. data/app/components/primer/beta/breadcrumbs.css.json +2 -1
  15. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  16. data/app/components/primer/beta/breadcrumbs.pcss +6 -5
  17. data/app/components/primer/beta/popover.css +1 -1
  18. data/app/components/primer/beta/popover.css.json +22 -16
  19. data/app/components/primer/beta/popover.css.map +1 -1
  20. data/app/components/primer/beta/popover.pcss +132 -101
  21. data/lib/primer/view_components/version.rb +2 -2
  22. data/static/classes.json +21 -0
  23. data/static/classnames.cjs +442 -0
  24. data/static/classnames.d.ts +2 -0
  25. data/static/classnames.js +444 -0
  26. metadata +5 -2
data/app/components/primer/beta/popover.pcss CHANGED
@@ -17,6 +17,7 @@
17
17
  border-radius: var(--borderRadius-medium);
18
18
 
19
19
  /* adding !important to override utility classes used in dotcom */
20
+ /* stylelint-disable-next-line primer/box-shadow */
20
21
  box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
21
22
 
22
23
  /* Carets */
@@ -54,26 +55,36 @@
54
55
  }
55
56
  }
56
57
 
58
+ /* The caret variants below are authored as expanded per-class selectors
59
+ ** (rather than nesting `&::before`/`&::after` under a selector list) so each
60
+ ** rule's subject buckets by its own class during style recalc. The merged
61
+ ** `:is(.Popover-message--…, …)::before` form cannot be fast-rejected by Blink
62
+ ** and shows up as pure slow-path selector matching. */
63
+
57
64
  /* Bottom-oriented carets */
58
- .Popover-message--bottom,
59
- .Popover-message--bottom-right,
60
- .Popover-message--bottom-left {
61
- &::before,
62
- &::after {
63
- top: auto;
64
- border-bottom-color: transparent;
65
- }
65
+ .Popover-message--bottom::before,
66
+ .Popover-message--bottom::after,
67
+ .Popover-message--bottom-right::before,
68
+ .Popover-message--bottom-right::after,
69
+ .Popover-message--bottom-left::before,
70
+ .Popover-message--bottom-left::after {
71
+ top: auto;
72
+ border-bottom-color: transparent;
73
+ }
66
74
 
67
- &::before {
68
- bottom: -16px;
69
- border-top-color: var(--borderColor-default);
70
- }
75
+ .Popover-message--bottom::before,
76
+ .Popover-message--bottom-right::before,
77
+ .Popover-message--bottom-left::before {
78
+ bottom: -16px;
79
+ border-top-color: var(--borderColor-default);
80
+ }
71
81
 
72
- &::after {
73
- bottom: -14px;
74
- /* stylelint-disable-next-line primer/colors */
75
- border-top-color: var(--overlay-bgColor);
76
- }
82
+ .Popover-message--bottom::after,
83
+ .Popover-message--bottom-right::after,
84
+ .Popover-message--bottom-left::after {
85
+ bottom: -14px;
86
+ /* stylelint-disable-next-line primer/colors */
87
+ border-top-color: var(--overlay-bgColor);
77
88
  }
78
89
 
79
90
  /* Top and Bottom: Right-oriented carets */
@@ -81,21 +92,25 @@
81
92
  .Popover-message--bottom-right {
82
93
  right: -9px;
83
94
  margin-right: 0;
95
+ }
84
96
 
85
- &::before,
86
- &::after {
87
- left: auto;
88
- margin-left: 0;
89
- }
97
+ .Popover-message--top-right::before,
98
+ .Popover-message--top-right::after,
99
+ .Popover-message--bottom-right::before,
100
+ .Popover-message--bottom-right::after {
101
+ left: auto;
102
+ margin-left: 0;
103
+ }
90
104
 
91
- &::before {
92
- right: var(--base-size-20);
93
- }
105
+ .Popover-message--top-right::before,
106
+ .Popover-message--bottom-right::before {
107
+ right: var(--base-size-20);
108
+ }
94
109
 
95
- &::after {
96
- right: var(--base-size-20);
97
- margin-right: 1px;
98
- }
110
+ .Popover-message--top-right::after,
111
+ .Popover-message--bottom-right::after {
112
+ right: var(--base-size-20);
113
+ margin-right: 1px;
99
114
  }
100
115
 
101
116
  /* Top and Bottom: Left-oriented carets */
@@ -103,101 +118,117 @@
103
118
  .Popover-message--bottom-left {
104
119
  left: -9px;
105
120
  margin-left: 0;
121
+ }
106
122
 
107
- &::before,
108
- &::after {
109
- left: var(--base-size-24);
110
- margin-left: 0;
111
- }
123
+ .Popover-message--top-left::before,
124
+ .Popover-message--top-left::after,
125
+ .Popover-message--bottom-left::before,
126
+ .Popover-message--bottom-left::after {
127
+ left: var(--base-size-24);
128
+ margin-left: 0;
129
+ }
112
130
 
113
- &::after {
114
- left: var(--base-size-24);
115
- margin-left: 1px;
116
- }
131
+ .Popover-message--top-left::after,
132
+ .Popover-message--bottom-left::after {
133
+ left: var(--base-size-24);
134
+ margin-left: 1px;
117
135
  }
118
136
 
119
137
  /* Right- and Left-oriented carets */
120
- .Popover-message--right,
121
- .Popover-message--right-top,
122
- .Popover-message--right-bottom,
123
- .Popover-message--left,
124
- .Popover-message--left-top,
125
- .Popover-message--left-bottom {
126
- &::before,
127
- &::after {
128
- top: 50%;
129
- left: auto;
130
- margin-left: 0;
131
- border-bottom-color: transparent;
132
- }
138
+ .Popover-message--right::before,
139
+ .Popover-message--right::after,
140
+ .Popover-message--right-top::before,
141
+ .Popover-message--right-top::after,
142
+ .Popover-message--right-bottom::before,
143
+ .Popover-message--right-bottom::after,
144
+ .Popover-message--left::before,
145
+ .Popover-message--left::after,
146
+ .Popover-message--left-top::before,
147
+ .Popover-message--left-top::after,
148
+ .Popover-message--left-bottom::before,
149
+ .Popover-message--left-bottom::after {
150
+ top: 50%;
151
+ left: auto;
152
+ margin-left: 0;
153
+ border-bottom-color: transparent;
154
+ }
133
155
 
134
- &::before {
135
- margin-top: -9px;
136
- }
156
+ .Popover-message--right::before,
157
+ .Popover-message--right-top::before,
158
+ .Popover-message--right-bottom::before,
159
+ .Popover-message--left::before,
160
+ .Popover-message--left-top::before,
161
+ .Popover-message--left-bottom::before {
162
+ margin-top: -9px;
163
+ }
137
164
 
138
- &::after {
139
- margin-top: -8px;
140
- }
165
+ .Popover-message--right::after,
166
+ .Popover-message--right-top::after,
167
+ .Popover-message--right-bottom::after,
168
+ .Popover-message--left::after,
169
+ .Popover-message--left-top::after,
170
+ .Popover-message--left-bottom::after {
171
+ margin-top: -8px;
141
172
  }
142
173
 
143
174
  /* Right-oriented carets */
144
- .Popover-message--right,
145
- .Popover-message--right-top,
146
- .Popover-message--right-bottom {
147
- &::before {
148
- right: -16px;
149
- border-left-color: var(--borderColor-default);
150
- }
175
+ .Popover-message--right::before,
176
+ .Popover-message--right-top::before,
177
+ .Popover-message--right-bottom::before {
178
+ right: -16px;
179
+ border-left-color: var(--borderColor-default);
180
+ }
151
181
 
152
- &::after {
153
- right: -14px;
154
- /* stylelint-disable-next-line primer/colors */
155
- border-left-color: var(--overlay-bgColor);
156
- }
182
+ .Popover-message--right::after,
183
+ .Popover-message--right-top::after,
184
+ .Popover-message--right-bottom::after {
185
+ right: -14px;
186
+ /* stylelint-disable-next-line primer/colors */
187
+ border-left-color: var(--overlay-bgColor);
157
188
  }
158
189
 
159
190
  /* Left-oriented carets */
160
- .Popover-message--left,
161
- .Popover-message--left-top,
162
- .Popover-message--left-bottom {
163
- &::before {
164
- left: -16px;
165
- border-right-color: var(--borderColor-default);
166
- }
191
+ .Popover-message--left::before,
192
+ .Popover-message--left-top::before,
193
+ .Popover-message--left-bottom::before {
194
+ left: -16px;
195
+ border-right-color: var(--borderColor-default);
196
+ }
167
197
 
168
- &::after {
169
- left: -14px;
170
- margin-bottom: 1px;
171
- /* stylelint-disable-next-line primer/colors */
172
- border-right-color: var(--overlay-bgColor);
173
- }
198
+ .Popover-message--left::after,
199
+ .Popover-message--left-top::after,
200
+ .Popover-message--left-bottom::after {
201
+ left: -14px;
202
+ margin-bottom: 1px;
203
+ /* stylelint-disable-next-line primer/colors */
204
+ border-right-color: var(--overlay-bgColor);
174
205
  }
175
206
 
176
207
  /* Right and Left: Top-oriented carets */
177
- .Popover-message--right-top,
178
- .Popover-message--left-top {
179
- &::before,
180
- &::after {
181
- top: var(--base-size-24);
182
- }
208
+ .Popover-message--right-top::before,
209
+ .Popover-message--right-top::after,
210
+ .Popover-message--left-top::before,
211
+ .Popover-message--left-top::after {
212
+ top: var(--base-size-24);
183
213
  }
184
214
 
185
215
  /* Right and Left: Bottom-oriented carets */
186
- .Popover-message--right-bottom,
187
- .Popover-message--left-bottom {
188
- &::before,
189
- &::after {
190
- top: auto;
191
- }
216
+ .Popover-message--right-bottom::before,
217
+ .Popover-message--right-bottom::after,
218
+ .Popover-message--left-bottom::before,
219
+ .Popover-message--left-bottom::after {
220
+ top: auto;
221
+ }
192
222
 
193
- &::before {
194
- bottom: var(--base-size-16);
195
- }
223
+ .Popover-message--right-bottom::before,
224
+ .Popover-message--left-bottom::before {
225
+ bottom: var(--base-size-16);
226
+ }
196
227
 
197
- &::after {
198
- bottom: var(--base-size-16);
199
- margin-bottom: 1px;
200
- }
228
+ .Popover-message--right-bottom::after,
229
+ .Popover-message--left-bottom::after {
230
+ bottom: var(--base-size-16);
231
+ margin-bottom: 1px;
201
232
  }
202
233
 
203
234
  @media (min-width: 544px) {
data/lib/primer/view_components/version.rb CHANGED
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 51
9
- PATCH = 6
8
+ MINOR = 52
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
data/static/classes.json CHANGED
@@ -459,6 +459,9 @@
459
459
  "Popover-message": [
460
460
  "Primer::Beta::Popover"
461
461
  ],
462
+ "Popover-message--bottom": [
463
+ "Primer::Beta::Popover"
464
+ ],
462
465
  "Popover-message--bottom-left": [
463
466
  "Primer::Beta::Popover"
464
467
  ],
@@ -468,9 +471,27 @@
468
471
  "Popover-message--large": [
469
472
  "Primer::Beta::Popover"
470
473
  ],
474
+ "Popover-message--left": [
475
+ "Primer::Beta::Popover"
476
+ ],
477
+ "Popover-message--left-bottom": [
478
+ "Primer::Beta::Popover"
479
+ ],
480
+ "Popover-message--left-top": [
481
+ "Primer::Beta::Popover"
482
+ ],
471
483
  "Popover-message--no-caret": [
472
484
  "Primer::Beta::Popover"
473
485
  ],
486
+ "Popover-message--right": [
487
+ "Primer::Beta::Popover"
488
+ ],
489
+ "Popover-message--right-bottom": [
490
+ "Primer::Beta::Popover"
491
+ ],
492
+ "Popover-message--right-top": [
493
+ "Primer::Beta::Popover"
494
+ ],
474
495
  "Popover-message--top-left": [
475
496
  "Primer::Beta::Popover"
476
497
  ],