primer_view_components 0.1.9 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -3
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list/item.rb +2 -2
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +16 -16
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.pcss +145 -145
  13. data/app/components/primer/alpha/action_list.rb +30 -15
  14. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -1
  15. data/app/components/primer/alpha/action_menu/action_menu_element.js +44 -34
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +32 -30
  17. data/app/components/primer/alpha/action_menu/list.rb +6 -1
  18. data/app/components/primer/alpha/auto_complete.css +1 -1
  19. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  20. data/app/components/primer/alpha/auto_complete.pcss +3 -3
  21. data/app/components/primer/alpha/banner.css +1 -1
  22. data/app/components/primer/alpha/banner.css.map +1 -1
  23. data/app/components/primer/alpha/banner.pcss +11 -11
  24. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  25. data/app/components/primer/alpha/button_marketing.pcss +5 -12
  26. data/app/components/primer/alpha/button_marketing.rb +3 -0
  27. data/app/components/primer/alpha/dialog.css +1 -1
  28. data/app/components/primer/alpha/dialog.css.map +1 -1
  29. data/app/components/primer/alpha/dialog.pcss +36 -36
  30. data/app/components/primer/alpha/dropdown.css +1 -1
  31. data/app/components/primer/alpha/dropdown.css.map +1 -1
  32. data/app/components/primer/alpha/dropdown.pcss +12 -12
  33. data/app/components/primer/alpha/form_control.html.erb +1 -1
  34. data/app/components/primer/alpha/hellip_button.rb +3 -1
  35. data/app/components/primer/alpha/layout.css +1 -1
  36. data/app/components/primer/alpha/layout.css.map +1 -1
  37. data/app/components/primer/alpha/layout.pcss +4 -4
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.pcss +21 -21
  41. data/app/components/primer/alpha/modal_dialog.js +11 -4
  42. data/app/components/primer/alpha/modal_dialog.ts +11 -4
  43. data/app/components/primer/alpha/nav_list/item.rb +2 -0
  44. data/app/components/primer/alpha/nav_list.js +6 -0
  45. data/app/components/primer/alpha/nav_list.rb +55 -36
  46. data/app/components/primer/alpha/nav_list.ts +8 -0
  47. data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
  48. data/app/components/primer/alpha/overlay.css +1 -1
  49. data/app/components/primer/alpha/overlay.css.json +1 -2
  50. data/app/components/primer/alpha/overlay.css.map +1 -1
  51. data/app/components/primer/alpha/overlay.pcss +14 -4
  52. data/app/components/primer/alpha/segmented_control.css +1 -1
  53. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  54. data/app/components/primer/alpha/segmented_control.pcss +24 -33
  55. data/app/components/primer/alpha/tab_nav.css +1 -1
  56. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  57. data/app/components/primer/alpha/tab_nav.pcss +12 -12
  58. data/app/components/primer/alpha/text_field.css +1 -3
  59. data/app/components/primer/alpha/text_field.css.json +1 -0
  60. data/app/components/primer/alpha/text_field.css.map +1 -1
  61. data/app/components/primer/alpha/text_field.pcss +87 -83
  62. data/app/components/primer/alpha/toggle_switch.css +1 -1
  63. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  64. data/app/components/primer/alpha/toggle_switch.pcss +12 -12
  65. data/app/components/primer/alpha/underline_nav.css +1 -1
  66. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  67. data/app/components/primer/alpha/underline_nav.pcss +11 -11
  68. data/app/components/primer/beta/avatar.css +1 -1
  69. data/app/components/primer/beta/avatar.css.map +1 -1
  70. data/app/components/primer/beta/avatar.pcss +18 -18
  71. data/app/components/primer/beta/avatar_stack.css +1 -1
  72. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  73. data/app/components/primer/beta/avatar_stack.pcss +5 -5
  74. data/app/components/primer/beta/base_button.rb +11 -0
  75. data/app/components/primer/beta/blankslate.css +1 -1
  76. data/app/components/primer/beta/blankslate.css.map +1 -1
  77. data/app/components/primer/beta/blankslate.pcss +16 -16
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.json +1 -1
  80. data/app/components/primer/beta/border_box.css.map +1 -1
  81. data/app/components/primer/beta/border_box.pcss +40 -42
  82. data/app/components/primer/beta/button.css +1 -1
  83. data/app/components/primer/beta/button.css.json +4 -0
  84. data/app/components/primer/beta/button.css.map +1 -1
  85. data/app/components/primer/beta/button.pcss +39 -24
  86. data/app/components/primer/beta/button.rb +3 -0
  87. data/app/components/primer/beta/button_group.css +1 -0
  88. data/app/components/primer/beta/button_group.css.json +14 -0
  89. data/app/components/primer/beta/button_group.css.map +1 -0
  90. data/app/components/primer/beta/button_group.pcss +27 -0
  91. data/app/components/primer/beta/button_group.rb +19 -19
  92. data/app/components/primer/beta/close_button.rb +3 -1
  93. data/app/components/primer/beta/counter.css +1 -1
  94. data/app/components/primer/beta/counter.css.map +1 -1
  95. data/app/components/primer/beta/counter.pcss +5 -5
  96. data/app/components/primer/beta/details.html.erb +6 -2
  97. data/app/components/primer/beta/details.rb +18 -10
  98. data/app/components/primer/beta/flash.css +1 -1
  99. data/app/components/primer/beta/flash.css.map +1 -1
  100. data/app/components/primer/beta/flash.pcss +12 -12
  101. data/app/components/primer/beta/icon_button.rb +7 -3
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.pcss +3 -3
  105. data/app/components/primer/beta/popover.css +1 -1
  106. data/app/components/primer/beta/popover.css.map +1 -1
  107. data/app/components/primer/beta/popover.pcss +4 -4
  108. data/app/components/primer/beta/state.css +1 -1
  109. data/app/components/primer/beta/state.css.map +1 -1
  110. data/app/components/primer/beta/state.pcss +7 -7
  111. data/app/components/primer/beta/subhead.css +1 -1
  112. data/app/components/primer/beta/subhead.css.map +1 -1
  113. data/app/components/primer/beta/subhead.pcss +9 -9
  114. data/app/components/primer/beta/timeline_item.css +1 -1
  115. data/app/components/primer/beta/timeline_item.css.map +1 -1
  116. data/app/components/primer/beta/timeline_item.pcss +18 -18
  117. data/app/components/primer/beta/truncate.css +1 -1
  118. data/app/components/primer/beta/truncate.css.map +1 -1
  119. data/app/components/primer/beta/truncate.pcss +1 -1
  120. data/app/components/primer/focus_group.js +1 -10
  121. data/app/components/primer/focus_group.ts +1 -10
  122. data/app/components/primer/primer.d.ts +1 -0
  123. data/app/components/primer/primer.js +1 -0
  124. data/app/components/primer/primer.pcss +1 -0
  125. data/app/components/primer/primer.ts +1 -0
  126. data/lib/postcss_mixins/activeIndicatorLine.pcss +4 -4
  127. data/lib/primer/accessibility.rb +74 -0
  128. data/lib/primer/forms/form_control.html.erb +1 -1
  129. data/lib/primer/static/generate_previews.rb +15 -8
  130. data/lib/primer/view_components/linters/deprecated_components_counter.rb +37 -13
  131. data/lib/primer/view_components/version.rb +2 -2
  132. data/lib/primer/yard/lookbook_pages_backend.rb +3 -3
  133. data/previews/pages/forms/03_caption_templates.md.erb +1 -1
  134. data/previews/pages/forms/04_after_content.md.erb +1 -1
  135. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +1 -1
  136. data/previews/pages/forms/07_toggle_switch_forms.md.erb +1 -1
  137. data/previews/primer/alpha/action_menu_preview/two_menus.html.erb +13 -0
  138. data/previews/primer/alpha/action_menu_preview/with_actions.html.erb +21 -0
  139. data/previews/primer/alpha/action_menu_preview.rb +5 -13
  140. data/previews/primer/alpha/button_marketing_preview.rb +3 -2
  141. data/previews/primer/alpha/dialog_preview.rb +4 -3
  142. data/previews/primer/alpha/hellip_button_preview.rb +3 -2
  143. data/previews/primer/alpha/nav_list_preview.rb +1 -1
  144. data/previews/primer/beta/base_button_preview.rb +9 -2
  145. data/previews/primer/beta/button_group_preview/action_menus.html.erb +8 -0
  146. data/previews/primer/beta/button_group_preview.rb +49 -11
  147. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +5 -2
  149. data/previews/primer/beta/close_button_preview.rb +3 -2
  150. data/previews/primer/beta/details_preview.rb +11 -8
  151. data/previews/primer/forms_preview.rb +44 -0
  152. data/static/arguments.json +4 -4
  153. data/static/classes.json +378 -372
  154. data/static/constants.json +0 -1
  155. data/static/info_arch.json +5150 -1368
  156. data/static/previews.json +5197 -1433
  157. metadata +37 -29
  158. data/previews/primer/forms/forms_preview.rb +0 -48
  159. /data/previews/primer/{forms/forms_preview → forms_preview}/after_content_form.html.erb +0 -0
  160. /data/previews/primer/{forms/forms_preview → forms_preview}/array_check_box_group_form.html.erb +0 -0
  161. /data/previews/primer/{forms/forms_preview → forms_preview}/caption_template_form.html.erb +0 -0
  162. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_group_form.html.erb +0 -0
  163. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_with_nested_form.html.erb +0 -0
  164. /data/previews/primer/{forms/forms_preview → forms_preview}/composed_form.html.erb +0 -0
  165. /data/previews/primer/{forms/forms_preview → forms_preview}/example_toggle_switch_form.html.erb +0 -0
  166. /data/previews/primer/{forms/forms_preview → forms_preview}/horizontal_form.html.erb +0 -0
  167. /data/previews/primer/{forms/forms_preview → forms_preview}/immediate_validation_form.html.erb +0 -0
  168. /data/previews/primer/{forms/forms_preview → forms_preview}/invalid_form.html.erb +0 -0
  169. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_input_form.html.erb +0 -0
  170. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_text_field_form.html.erb +0 -0
  171. /data/previews/primer/{forms/forms_preview → forms_preview}/name_with_question_mark_form.html.erb +0 -0
  172. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_group_form.html.erb +0 -0
  173. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_with_nested_form.html.erb +0 -0
  174. /data/previews/primer/{forms/forms_preview → forms_preview}/select_form.html.erb +0 -0
  175. /data/previews/primer/{forms/forms_preview → forms_preview}/single_text_field_form.html.erb +0 -0
  176. /data/previews/primer/{forms/forms_preview → forms_preview}/submit_button_form.html.erb +0 -0
  177. /data/previews/primer/{forms/forms_preview → forms_preview}/text_field_and_checkbox_form.html.erb +0 -0
@@ -1,12 +1,12 @@
1
1
  :root {
2
- --actionListContent-paddingBlock: var(--control-medium-paddingBlock, 6px);
2
+ --actionListContent-paddingBlock: var(--control-medium-paddingBlock);
3
3
  }
4
4
 
5
5
  /* ActionList */
6
6
 
7
7
  .ActionListHeader {
8
- margin-left: var(--base-size-8, 8px);
9
- margin-bottom: var(--base-size-16, 16px);
8
+ margin-left: var(--base-size-8);
9
+ margin-bottom: var(--base-size-16);
10
10
  }
11
11
 
12
12
  /* <ul> */
@@ -15,7 +15,7 @@
15
15
  }
16
16
 
17
17
  .ActionListWrap--inset {
18
- padding: var(--base-size-8, 8px);
18
+ padding: var(--base-size-8);
19
19
  }
20
20
 
21
21
  /* list dividers */
@@ -38,7 +38,7 @@
38
38
  top: calc(-1 * var(--actionListContent-paddingBlock));
39
39
  display: block;
40
40
  width: 100%;
41
- height: var(--borderWidth-thin, 1px);
41
+ height: var(--borderWidth-thin);
42
42
  content: '';
43
43
  background: var(--color-action-list-item-inline-divider);
44
44
  }
@@ -76,7 +76,7 @@
76
76
  position: relative;
77
77
  list-style: none;
78
78
  background-color: transparent;
79
- border-radius: var(--borderRadius-medium, 6px);
79
+ border-radius: var(--borderRadius-medium);
80
80
 
81
81
  /* state */
82
82
 
@@ -134,9 +134,9 @@
134
134
 
135
135
  &:not(.ActionListItem--navActive, :focus-visible) {
136
136
  /* Support for "Windows high contrast mode" */
137
- outline: solid var(--borderWidth-thin, 1px) transparent;
138
- outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
139
- box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
137
+ outline: solid var(--borderWidth-thin) transparent;
138
+ outline-offset: calc(-1 * var(--borderWidth-thin));
139
+ box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
140
140
  }
141
141
  }
142
142
  }
@@ -146,9 +146,9 @@
146
146
 
147
147
  &:not(.ActionListItem--navActive) {
148
148
  /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
149
- outline: solid var(--borderWidth-thin, 1px) transparent;
150
- outline-offset: calc(-1 * var(--borderWidth-thin, 1px));
151
- box-shadow: var(--borderInset-thin, 1px) var(--color-action-list-item-default-active-border);
149
+ outline: solid var(--borderWidth-thin) transparent;
150
+ outline-offset: calc(-1 * var(--borderWidth-thin));
151
+ box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
152
152
  }
153
153
 
154
154
  & .ActionListItem-label::before,
@@ -158,99 +158,10 @@
158
158
  }
159
159
  }
160
160
 
161
- /*
162
- * checkbox item [aria-checked]
163
- * listbox [aria-selected]
164
- */
165
- &[aria-checked='true'],
166
- &[aria-selected='true'] {
167
- /* multiselect checkmark */
168
- & .ActionListItem-multiSelectCheckmark {
169
- visibility: visible;
170
- opacity: 1;
171
- transition: visibility 0 linear 0, opacity 50ms;
172
- }
173
-
174
- /* singleselect checkmark */
175
- & .ActionListItem-singleSelectCheckmark {
176
- visibility: visible;
177
-
178
- @media screen and (prefers-reduced-motion: no-preference) {
179
- animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
180
- @keyframes checkmarkIn {
181
- from {
182
- clip-path: inset(16px 0 0 0);
183
- }
184
-
185
- to {
186
- clip-path: inset(0 0 0 0);
187
- }
188
- }
189
- }
190
- }
191
-
192
- /* checkbox */
193
- & .ActionListItem-multiSelectIcon {
194
- & .ActionListItem-multiSelectIconRect {
195
- fill: var(--color-accent-fg);
196
- stroke: var(--color-accent-fg);
197
- stroke-width: var(--borderWidth-thin, 1px);
198
- }
199
-
200
- & .ActionListItem-multiSelectCheckmark {
201
- fill: var(--color-fg-on-emphasis);
202
- }
203
- }
204
- }
205
-
206
- &[aria-checked='false'],
207
- &[aria-selected='false'] {
208
- /* multiselect checkmark */
209
- & .ActionListItem-multiSelectCheckmark {
210
- visibility: hidden;
211
- opacity: 0;
212
- transition: visibility 0 linear 50ms, opacity 50ms;
213
- }
214
-
215
- /* singleselect checkmark */
216
- & .ActionListItem-singleSelectCheckmark {
217
- visibility: hidden;
218
- transition: visibility 0s linear 200ms;
219
- clip-path: inset(16px 0 0 0);
220
-
221
- @media screen and (prefers-reduced-motion: no-preference) {
222
- animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
223
- @keyframes checkmarkOut {
224
- from {
225
- clip-path: inset(0 0 0 0);
226
- }
227
-
228
- to {
229
- clip-path: inset(16px 0 0 0);
230
- }
231
- }
232
- }
233
- }
234
-
235
- /* checkbox */
236
- & .ActionListItem-multiSelectIcon {
237
- & .ActionListItem-multiSelectIconRect {
238
- fill: var(--color-canvas-default);
239
- stroke: var(--color-border-default);
240
- stroke-width: var(--borderWidth-thin, 1px);
241
- }
242
- }
243
-
244
- & .ActionListItem-multiSelectIconRect {
245
- fill: var(--color-canvas-default);
246
- border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
247
- }
248
- }
249
-
250
161
  /* Autocomplete [aria-selected] items */
251
162
 
252
163
  &[aria-selected='true'] {
253
- font-weight: var(--base-text-weight-normal, 400);
164
+ font-weight: var(--base-text-weight-normal);
254
165
  background: var(--color-action-list-item-default-selected-bg);
255
166
 
256
167
  @media (hover: hover) {
@@ -267,7 +178,7 @@
267
178
  /* blue accent line */
268
179
 
269
180
  &::after {
270
- @mixin activeIndicatorLine calc(-1 * var(--base-size-4, 4px));
181
+ @mixin activeIndicatorLine calc(-1 * var(--base-size-4));
271
182
  }
272
183
  }
273
184
 
@@ -276,7 +187,7 @@
276
187
  &.ActionListItem--navActive {
277
188
  &:not(.ActionListItem--subItem) {
278
189
  & .ActionListItem-label {
279
- font-weight: var(--base-text-weight-semibold, 600);
190
+ font-weight: var(--base-text-weight-semibold);
280
191
  }
281
192
  }
282
193
 
@@ -366,13 +277,13 @@
366
277
  display: grid;
367
278
  width: 100%;
368
279
  padding-block: var(--actionListContent-paddingBlock);
369
- padding-inline: var(--control-medium-paddingInline-condensed, 8px);
280
+ padding-inline: var(--control-medium-paddingInline-condensed);
370
281
  color: var(--color-fg-default);
371
282
  text-align: left;
372
283
  user-select: none;
373
284
  background-color: transparent;
374
285
  border: none;
375
- border-radius: var(--borderRadius-medium, 6px);
286
+ border-radius: var(--borderRadius-medium);
376
287
  transition: background 33.333ms linear;
377
288
  touch-action: manipulation;
378
289
  -webkit-tap-highlight-color: transparent;
@@ -383,7 +294,7 @@
383
294
 
384
295
  /* column-gap persists with empty grid-areas, margin applies only when children exist */
385
296
  & > :not(:last-child) {
386
- margin-right: var(--control-medium-gap, 8px);
297
+ margin-right: var(--control-medium-gap);
387
298
  }
388
299
 
389
300
  /* state */
@@ -422,28 +333,28 @@
422
333
  }
423
334
 
424
335
  & .ActionListContent {
425
- padding-left: var(--base-size-24, 24px);
336
+ padding-left: var(--base-size-24);
426
337
  }
427
338
  }
428
339
 
429
340
  /* has 16px leading visual */
430
341
  &.ActionListContent--visual16 + .ActionList--subGroup {
431
342
  & .ActionListContent {
432
- padding-left: var(--base-size-32, 32px);
343
+ padding-left: var(--base-size-32);
433
344
  }
434
345
  }
435
346
 
436
347
  /* has 20px leading visual */
437
348
  &.ActionListContent--visual20 + .ActionList--subGroup {
438
349
  & .ActionListContent {
439
- padding-left: var(--base-size-36, 36px);
350
+ padding-left: var(--base-size-36);
440
351
  }
441
352
  }
442
353
 
443
354
  /* has 24px leading visual */
444
355
  &.ActionListContent--visual24 + .ActionList--subGroup {
445
356
  & .ActionListContent {
446
- padding-left: var(--base-size-40, 40px);
357
+ padding-left: var(--base-size-40);
447
358
  }
448
359
  }
449
360
  }
@@ -464,7 +375,7 @@
464
375
 
465
376
  &.ActionListContent--hasActiveSubItem {
466
377
  & > .ActionListItem-label {
467
- font-weight: var(--base-text-weight-semibold, 600);
378
+ font-weight: var(--base-text-weight-semibold);
468
379
  }
469
380
  }
470
381
  }
@@ -480,7 +391,7 @@
480
391
  overflow: hidden;
481
392
  visibility: hidden;
482
393
  opacity: 0;
483
- transform: translateY(calc(-1 * var(--base-size-16, 16px)));
394
+ transform: translateY(calc(-1 * var(--base-size-16)));
484
395
  }
485
396
 
486
397
  /* show active indicator on parent collapse if child is active */
@@ -488,7 +399,7 @@
488
399
  background: var(--color-action-list-item-default-selected-bg);
489
400
 
490
401
  & .ActionListItem-label {
491
- font-weight: var(--base-text-weight-semibold, 600);
402
+ font-weight: var(--base-text-weight-semibold);
492
403
  }
493
404
 
494
405
  &::before,
@@ -503,19 +414,108 @@
503
414
  }
504
415
  }
505
416
 
417
+ /*
418
+ * checkbox item [aria-checked]
419
+ * listbox [aria-selected]
420
+ */
421
+ &[aria-checked='true'],
422
+ &[aria-selected='true'] {
423
+ /* multiselect checkmark */
424
+ & .ActionListItem-multiSelectCheckmark {
425
+ visibility: visible;
426
+ opacity: 1;
427
+ transition: visibility 0 linear 0, opacity 50ms;
428
+ }
429
+
430
+ /* singleselect checkmark */
431
+ & .ActionListItem-singleSelectCheckmark {
432
+ visibility: visible;
433
+
434
+ @media screen and (prefers-reduced-motion: no-preference) {
435
+ animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
436
+ @keyframes checkmarkIn {
437
+ from {
438
+ clip-path: inset(16px 0 0 0);
439
+ }
440
+
441
+ to {
442
+ clip-path: inset(0 0 0 0);
443
+ }
444
+ }
445
+ }
446
+ }
447
+
448
+ /* checkbox */
449
+ & .ActionListItem-multiSelectIcon {
450
+ & .ActionListItem-multiSelectIconRect {
451
+ fill: var(--color-accent-fg);
452
+ stroke: var(--color-accent-fg);
453
+ stroke-width: var(--borderWidth-thin, 1px);
454
+ }
455
+
456
+ & .ActionListItem-multiSelectCheckmark {
457
+ fill: var(--color-fg-on-emphasis);
458
+ }
459
+ }
460
+ }
461
+
462
+ &[aria-checked='false'],
463
+ &[aria-selected='false'] {
464
+ /* multiselect checkmark */
465
+ & .ActionListItem-multiSelectCheckmark {
466
+ visibility: hidden;
467
+ opacity: 0;
468
+ transition: visibility 0 linear 50ms, opacity 50ms;
469
+ }
470
+
471
+ /* singleselect checkmark */
472
+ & .ActionListItem-singleSelectCheckmark {
473
+ visibility: hidden;
474
+ transition: visibility 0s linear 200ms;
475
+ clip-path: inset(16px 0 0 0);
476
+
477
+ @media screen and (prefers-reduced-motion: no-preference) {
478
+ animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
479
+ @keyframes checkmarkOut {
480
+ from {
481
+ clip-path: inset(0 0 0 0);
482
+ }
483
+
484
+ to {
485
+ clip-path: inset(16px 0 0 0);
486
+ }
487
+ }
488
+ }
489
+ }
490
+
491
+ /* checkbox */
492
+ & .ActionListItem-multiSelectIcon {
493
+ & .ActionListItem-multiSelectIconRect {
494
+ fill: var(--color-canvas-default);
495
+ stroke: var(--color-border-default);
496
+ stroke-width: var(--borderWidth-thin, 1px);
497
+ }
498
+ }
499
+
500
+ & .ActionListItem-multiSelectIconRect {
501
+ fill: var(--color-canvas-default);
502
+ border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
503
+ }
504
+ }
505
+
506
506
  /* sizes */
507
507
 
508
508
  &.ActionListContent--sizeLarge {
509
- --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
509
+ --actionListContent-paddingBlock: var(--control-large-paddingBlock);
510
510
  }
511
511
 
512
512
  &.ActionListContent--sizeXLarge {
513
- --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock, calc((3rem - 1.25rem) / 2));
513
+ --actionListContent-paddingBlock: var(--control-xlarge-paddingBlock);
514
514
  }
515
515
 
516
516
  /* On pointer:coarse (mobile), all list items are large */
517
517
  @media (pointer: coarse) {
518
- --actionListContent-paddingBlock: var(--control-large-paddingBlock, calc((2.5rem - 1.25rem) / 2));
518
+ --actionListContent-paddingBlock: var(--control-large-paddingBlock);
519
519
  }
520
520
 
521
521
  &.ActionListContent--blockDescription {
@@ -550,10 +550,10 @@
550
550
  grid-area: label;
551
551
  display: flex;
552
552
  flex-direction: column;
553
- gap: var(--base-size-4, 4px);
553
+ gap: var(--base-size-4);
554
554
 
555
555
  & .ActionListItem-label {
556
- font-weight: var(--base-text-weight-semibold, 600);
556
+ font-weight: var(--base-text-weight-semibold);
557
557
  }
558
558
  }
559
559
 
@@ -562,14 +562,14 @@
562
562
  position: relative;
563
563
  flex-direction: row;
564
564
  align-items: baseline;
565
- gap: var(--base-size-8, 8px);
565
+ gap: var(--base-size-8);
566
566
  }
567
567
 
568
568
  /* description */
569
569
  .ActionListItem-description {
570
- font-size: var(--text-body-size-small, 12px);
571
- font-weight: var(--base-text-weight-normal, 400);
572
- line-height: var(--text-body-lineHeight-small, calc(20 / 12));
570
+ font-size: var(--text-body-size-small);
571
+ font-weight: var(--base-text-weight-normal);
572
+ line-height: var(--text-body-lineHeight-small);
573
573
  color: var(--color-fg-muted);
574
574
  }
575
575
 
@@ -578,7 +578,7 @@
578
578
  .ActionListItem-visual,
579
579
  .ActionListItem-action {
580
580
  display: flex;
581
- min-height: var(--control-medium-lineBoxHeight, 20px);
581
+ min-height: var(--control-medium-lineBoxHeight);
582
582
  color: var(--color-fg-muted);
583
583
  pointer-events: none;
584
584
  fill: var(--color-fg-muted);
@@ -588,9 +588,9 @@
588
588
  /* text */
589
589
  .ActionListItem-label {
590
590
  position: relative;
591
- font-size: var(--text-body-size-medium, 14px);
592
- font-weight: var(--base-text-weight-normal, 400);
593
- line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
591
+ font-size: var(--text-body-size-medium);
592
+ font-weight: var(--base-text-weight-normal);
593
+ line-height: var(--text-body-lineHeight-medium);
594
594
  color: var(--color-fg-default);
595
595
  grid-area: label;
596
596
  }
@@ -605,8 +605,8 @@
605
605
  target ActionListItem--subItem for padding-left to maintain :active :after state */
606
606
 
607
607
  .ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
608
- font-size: var(--text-body-size-small, 12px);
609
- line-height: var(--text-body-lineHeight-small, calc(20 / 12));
608
+ font-size: var(--text-body-size-small);
609
+ line-height: var(--text-body-lineHeight-small);
610
610
  }
611
611
 
612
612
  /* trailing action icon button */
@@ -644,10 +644,10 @@
644
644
  &:not(:empty) {
645
645
  display: flex;
646
646
  padding-inline: var(--actionListContent-paddingBlock);
647
- padding-block: var(--base-size-8, 8px);
648
- font-size: var(--text-body-size-small, 12px);
649
- line-height: var(--text-body-lineHeight-small, calc(20 / 12));
650
- font-weight: var(--base-text-weight-semibold, 600);
647
+ padding-block: var(--base-size-8);
648
+ font-size: var(--text-body-size-small);
649
+ line-height: var(--text-body-lineHeight-small);
650
+ font-weight: var(--base-text-weight-semibold);
651
651
  color: var(--color-fg-muted);
652
652
  flex-direction: column;
653
653
  }
@@ -655,34 +655,34 @@
655
655
  /* no children */
656
656
  &:empty {
657
657
  display: block;
658
- height: var(--borderWidth-thin, 1px);
658
+ height: var(--borderWidth-thin);
659
659
  padding: 0;
660
- margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
661
- margin-block-end: var(--base-size-8, 8px);
662
- margin-inline: calc(-1 * var(--base-size-8, 8px));
660
+ margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
661
+ margin-block-end: var(--base-size-8);
662
+ margin-inline: calc(-1 * var(--base-size-8));
663
663
  list-style: none;
664
664
  background: var(--color-action-list-item-inline-divider);
665
665
  border: 0;
666
666
  }
667
667
 
668
668
  & .ActionList-sectionDivider-title {
669
- font-size: var(--text-body-size-small, 12px);
670
- font-weight: var(--base-text-weight-semibold, 600);
669
+ font-size: var(--text-body-size-small);
670
+ font-weight: var(--base-text-weight-semibold);
671
671
  color: var(--color-fg-muted);
672
672
  }
673
673
  }
674
674
 
675
675
  .ActionList-sectionDivider--filled {
676
- margin-block-start: calc(var(--base-size-8, 8px) - var(--borderWidth-thin, 1px));
677
- margin-block-end: var(--base-size-8, 8px);
678
- margin-inline: calc(-1 * var(--base-size-8, 8px));
676
+ margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
677
+ margin-block-end: var(--base-size-8);
678
+ margin-inline: calc(-1 * var(--base-size-8));
679
679
  background: var(--color-canvas-subtle);
680
- border-top: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
681
- border-bottom: solid var(--borderWidth-thin, 1px) var(--color-action-list-item-inline-divider);
680
+ border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
681
+ border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
682
682
 
683
683
  /* if no children, treat as divider */
684
684
  &:empty {
685
- height: var(--base-size-8, 8px);
685
+ height: var(--base-size-8);
686
686
  box-sizing: border-box;
687
687
  }
688
688
 
@@ -56,24 +56,39 @@ module Primer
56
56
  Heading.new(**system_arguments)
57
57
  }
58
58
 
59
- # Items.
59
+ # @!parse
60
+ # # Adds an item to the list.
61
+ # #
62
+ # # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
63
+ # def with_item(**system_arguments, &block)
64
+ # end
65
+
66
+ # @!parse
67
+ # # Adds a divider to the list. Dividers visually separate items.
68
+ # #
69
+ # # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
70
+ # def with_divider(**system_arguments, &block)
71
+ # end
72
+
73
+ # Items. Items can be individual items or dividers. See the documentation for `#with_item` and `#with_divider` respectively for more information.
60
74
  #
61
- # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
62
- renders_many :items, lambda { |**system_arguments|
63
- build_item(**system_arguments).tap do |item|
64
- will_add_item(item)
65
- end
75
+ renders_many :items, types: {
76
+ item: {
77
+ renders: lambda { |**system_arguments|
78
+ build_item(**system_arguments).tap do |item|
79
+ will_add_item(item)
80
+ end
81
+ },
82
+
83
+ as: :item
84
+ },
85
+
86
+ divider: {
87
+ renders: Divider,
88
+ as: :divider
89
+ }
66
90
  }
67
91
 
68
- # Adds a divider to the list of items.
69
- #
70
- # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Divider) %>.
71
- def with_divider(**system_arguments, &block)
72
- # This is a giant hack that should be removed when :items can be converted into a polymorphic slot.
73
- # This feature needs to land in view_component first: https://github.com/ViewComponent/view_component/pull/1652
74
- set_slot(:items, { renderable: Divider, collection: true }, **system_arguments, &block)
75
- end
76
-
77
92
  attr_reader :id, :select_variant, :role
78
93
 
79
94
  # @param id [String] HTML ID value.
@@ -1,4 +1,4 @@
1
- import '@github/include-fragment-element';
1
+ import IncludeFragmentElement from '@github/include-fragment-element';
2
2
  declare type SelectVariant = 'none' | 'single' | 'multiple' | null;
3
3
  declare type SelectedItem = {
4
4
  label: string | null | undefined;
@@ -7,6 +7,7 @@ declare type SelectedItem = {
7
7
  };
8
8
  export declare class ActionMenuElement extends HTMLElement {
9
9
  #private;
10
+ includeFragment: IncludeFragmentElement;
10
11
  get selectVariant(): SelectVariant;
11
12
  set selectVariant(variant: SelectVariant);
12
13
  get dynamicLabelPrefix(): string;