primer_view_components 0.34.0 → 0.35.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (279) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +45 -0
  3. data/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -4
  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 -1
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_bar.css.map +1 -1
  9. data/app/components/primer/alpha/action_bar.pcss +7 -4
  10. data/app/components/primer/alpha/action_bar_element.js +0 -3
  11. data/app/components/primer/alpha/action_bar_element.ts +0 -4
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.pcss +25 -8
  15. data/app/components/primer/alpha/action_list.rb +1 -1
  16. data/app/components/primer/alpha/auto_complete.css +1 -1
  17. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  18. data/app/components/primer/alpha/auto_complete.pcss +7 -7
  19. data/app/components/primer/alpha/banner.css +1 -1
  20. data/app/components/primer/alpha/banner.css.map +1 -1
  21. data/app/components/primer/alpha/banner.pcss +6 -2
  22. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  23. data/app/components/primer/alpha/button_marketing.pcss +11 -4
  24. data/app/components/primer/alpha/dialog.css +1 -1
  25. data/app/components/primer/alpha/dialog.css.json +2 -1
  26. data/app/components/primer/alpha/dialog.css.map +1 -1
  27. data/app/components/primer/alpha/dialog.pcss +39 -13
  28. data/app/components/primer/alpha/dialog.rb +5 -1
  29. data/app/components/primer/alpha/dropdown.css +1 -1
  30. data/app/components/primer/alpha/dropdown.css.map +1 -1
  31. data/app/components/primer/alpha/dropdown.pcss +45 -11
  32. data/app/components/primer/alpha/layout.css.map +1 -1
  33. data/app/components/primer/alpha/layout.pcss +3 -2
  34. data/app/components/primer/alpha/menu.css.map +1 -1
  35. data/app/components/primer/alpha/menu.pcss +7 -0
  36. data/app/components/primer/alpha/overlay.css.map +1 -1
  37. data/app/components/primer/alpha/overlay.pcss +3 -3
  38. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  39. data/app/components/primer/alpha/segmented_control.pcss +15 -8
  40. data/app/components/primer/alpha/select_panel.html.erb +8 -5
  41. data/app/components/primer/alpha/select_panel.rb +26 -1
  42. data/app/components/primer/alpha/select_panel_element.js +9 -3
  43. data/app/components/primer/alpha/select_panel_element.ts +10 -4
  44. data/app/components/primer/alpha/stack.css +1 -0
  45. data/app/components/primer/alpha/stack.css.json +90 -0
  46. data/app/components/primer/alpha/stack.css.map +1 -0
  47. data/app/components/primer/alpha/stack.html.erb +3 -0
  48. data/app/components/primer/alpha/stack.pcss +297 -0
  49. data/app/components/primer/alpha/stack.rb +185 -0
  50. data/app/components/primer/alpha/stack_item.css +1 -0
  51. data/app/components/primer/alpha/stack_item.css.json +12 -0
  52. data/app/components/primer/alpha/stack_item.css.map +1 -0
  53. data/app/components/primer/alpha/stack_item.html.erb +3 -0
  54. data/app/components/primer/alpha/stack_item.pcss +31 -0
  55. data/app/components/primer/alpha/stack_item.rb +54 -0
  56. data/app/components/primer/alpha/tab_nav.css +1 -1
  57. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  58. data/app/components/primer/alpha/tab_nav.pcss +12 -3
  59. data/app/components/primer/alpha/text_field.css +1 -1
  60. data/app/components/primer/alpha/text_field.css.map +1 -1
  61. data/app/components/primer/alpha/text_field.pcss +29 -22
  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 +6 -3
  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 +8 -2
  68. data/app/components/primer/base_component.rb +1 -1
  69. data/app/components/primer/beta/avatar.css +1 -1
  70. data/app/components/primer/beta/avatar.css.map +1 -1
  71. data/app/components/primer/beta/avatar.pcss +4 -1
  72. data/app/components/primer/beta/avatar_stack.css +1 -1
  73. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  74. data/app/components/primer/beta/avatar_stack.pcss +9 -2
  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 +24 -3
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.map +1 -1
  80. data/app/components/primer/beta/border_box.pcss +8 -4
  81. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  82. data/app/components/primer/beta/breadcrumbs.pcss +5 -1
  83. data/app/components/primer/beta/button.css +1 -1
  84. data/app/components/primer/beta/button.css.map +1 -1
  85. data/app/components/primer/beta/button.pcss +31 -27
  86. data/app/components/primer/beta/button_group.css.map +1 -1
  87. data/app/components/primer/beta/button_group.pcss +1 -0
  88. data/app/components/primer/beta/counter.css +1 -1
  89. data/app/components/primer/beta/counter.css.map +1 -1
  90. data/app/components/primer/beta/counter.pcss +3 -1
  91. data/app/components/primer/beta/flash.css.map +1 -1
  92. data/app/components/primer/beta/flash.pcss +7 -4
  93. data/app/components/primer/beta/label.css.map +1 -1
  94. data/app/components/primer/beta/label.pcss +4 -0
  95. data/app/components/primer/beta/popover.css +1 -1
  96. data/app/components/primer/beta/popover.css.map +1 -1
  97. data/app/components/primer/beta/popover.pcss +15 -7
  98. data/app/components/primer/beta/progress_bar.css +1 -1
  99. data/app/components/primer/beta/progress_bar.css.map +1 -1
  100. data/app/components/primer/beta/progress_bar.pcss +2 -2
  101. data/app/components/primer/beta/state.css +1 -1
  102. data/app/components/primer/beta/state.css.map +1 -1
  103. data/app/components/primer/beta/state.pcss +6 -1
  104. data/app/components/primer/beta/subhead.css.map +1 -1
  105. data/app/components/primer/beta/subhead.pcss +3 -0
  106. data/app/components/primer/beta/timeline_item.css.map +1 -1
  107. data/app/components/primer/beta/timeline_item.pcss +11 -0
  108. data/app/components/primer/beta/truncate.css.map +1 -1
  109. data/app/components/primer/beta/truncate.pcss +1 -0
  110. data/app/components/primer/dialog_helper.js +0 -1
  111. data/app/components/primer/dialog_helper.ts +0 -1
  112. data/app/components/primer/primer.d.ts +3 -4
  113. data/app/components/primer/primer.js +3 -4
  114. data/app/components/primer/primer.pcss +6 -4
  115. data/app/components/primer/primer.ts +3 -4
  116. data/app/components/primer/responsive_arg.rb +66 -0
  117. data/app/forms/caption_template_form/places_bellevue_caption.html.erb +1 -0
  118. data/app/forms/caption_template_form/places_lopez_caption.html.erb +1 -0
  119. data/app/forms/caption_template_form/places_seattle_caption.html.erb +1 -0
  120. data/app/forms/caption_template_form.rb +6 -0
  121. data/app/forms/check_box_group_form.rb +1 -1
  122. data/app/forms/radio_button_group_form.rb +5 -1
  123. data/app/lib/primer/attributes_helper.rb +1 -1
  124. data/{lib → app/lib}/primer/forms/base_component.rb +0 -8
  125. data/{lib → app/lib}/primer/forms/button.rb +5 -2
  126. data/{lib → app/lib}/primer/forms/check_box_group.html.erb +3 -3
  127. data/{lib → app/lib}/primer/forms/check_box_group.rb +1 -1
  128. data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb +4 -8
  129. data/{lib → app/lib}/primer/forms/dsl/input.rb +13 -1
  130. data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb +4 -0
  131. data/{lib → app/lib}/primer/forms/group.html.erb +1 -1
  132. data/{lib → app/lib}/primer/forms/group.rb +5 -0
  133. data/{lib → app/lib}/primer/forms/radio_button_group.html.erb +3 -3
  134. data/{lib → app/lib}/primer/forms/radio_button_group.rb +1 -1
  135. data/{lib → app/lib}/primer/forms/select.html.erb +0 -1
  136. data/lib/primer/view_components/linters/details_menu_migration.rb +3 -2
  137. data/lib/primer/view_components/version.rb +1 -1
  138. data/lib/primer/yard/component_manifest.rb +0 -1
  139. data/previews/primer/alpha/action_bar_preview/inline.html.erb +1 -1
  140. data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb +1 -1
  141. data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -1
  142. data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +4 -4
  143. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
  144. data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +11 -2
  145. data/previews/primer/alpha/dialog_preview/with_footer.html.erb +2 -2
  146. data/previews/primer/alpha/dialog_preview/with_form.html.erb +2 -2
  147. data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +1 -1
  148. data/previews/primer/alpha/dialog_preview.rb +4 -2
  149. data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb +1 -1
  150. data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +1 -1
  151. data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +1 -1
  152. data/previews/primer/alpha/select_panel_preview/custom_loading_description.html.erb +23 -0
  153. data/previews/primer/alpha/select_panel_preview/custom_loading_label.html.erb +21 -0
  154. data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +4 -2
  155. data/previews/primer/alpha/select_panel_preview/scroll_container.html.erb +49 -0
  156. data/previews/primer/alpha/select_panel_preview.rb +40 -2
  157. data/previews/primer/alpha/stack_item_preview/default.html.erb +5 -0
  158. data/previews/primer/alpha/stack_item_preview/playground.html.erb +11 -0
  159. data/previews/primer/alpha/stack_item_preview.rb +40 -0
  160. data/previews/primer/alpha/stack_preview/playground.html.erb +5 -0
  161. data/previews/primer/alpha/stack_preview.rb +88 -0
  162. data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb +1 -2
  163. data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +2 -2
  164. data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +1 -1
  165. data/previews/primer/alpha/underline_nav_preview/default.html.erb +1 -1
  166. data/previews/primer/alpha/underline_nav_preview/playground.html.erb +1 -1
  167. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +18 -18
  168. data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb +3 -1
  169. data/previews/primer/beta/button_preview/summary_as_button.html.erb +0 -1
  170. data/previews/primer/beta/subhead_preview/actions.html.erb +0 -1
  171. data/static/arguments.json +112 -30
  172. data/static/audited_at.json +2 -1
  173. data/static/classes.json +6 -0
  174. data/static/constants.json +153 -7
  175. data/static/info_arch.json +248 -98
  176. data/static/previews.json +107 -47
  177. data/static/statuses.json +2 -1
  178. metadata +134 -117
  179. data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +0 -1
  180. data/app/components/primer/alpha/image_crop.d.ts +0 -1
  181. data/app/components/primer/alpha/image_crop.html.erb +0 -12
  182. data/app/components/primer/alpha/image_crop.js +0 -1
  183. data/app/components/primer/alpha/image_crop.rb +0 -28
  184. data/app/components/primer/alpha/image_crop.ts +0 -1
  185. data/previews/primer/alpha/image_crop_preview.rb +0 -31
  186. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
  187. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
  188. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
  189. /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
  190. /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
  191. /data/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
  192. /data/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
  193. /data/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
  194. /data/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
  195. /data/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
  196. /data/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
  197. /data/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
  198. /data/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
  199. /data/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
  200. /data/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
  201. /data/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
  202. /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
  203. /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
  204. /data/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
  205. /data/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
  206. /data/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
  207. /data/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
  208. /data/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
  209. /data/{lib → app/lib}/primer/forms/action_menu.html.erb +0 -0
  210. /data/{lib → app/lib}/primer/forms/action_menu.rb +0 -0
  211. /data/{lib → app/lib}/primer/forms/acts_as_component.rb +0 -0
  212. /data/{lib → app/lib}/primer/forms/auto_complete.html.erb +0 -0
  213. /data/{lib → app/lib}/primer/forms/auto_complete.rb +0 -0
  214. /data/{lib → app/lib}/primer/forms/base.html.erb +0 -0
  215. /data/{lib → app/lib}/primer/forms/base.rb +0 -0
  216. /data/{lib → app/lib}/primer/forms/buffer_rewriter.rb +0 -0
  217. /data/{lib → app/lib}/primer/forms/builder.rb +0 -0
  218. /data/{lib → app/lib}/primer/forms/button.html.erb +0 -0
  219. /data/{lib → app/lib}/primer/forms/caption.html.erb +0 -0
  220. /data/{lib → app/lib}/primer/forms/caption.rb +0 -0
  221. /data/{lib → app/lib}/primer/forms/check_box.html.erb +0 -0
  222. /data/{lib → app/lib}/primer/forms/check_box.rb +0 -0
  223. /data/{lib → app/lib}/primer/forms/dsl/action_menu_input.rb +0 -0
  224. /data/{lib → app/lib}/primer/forms/dsl/auto_complete_input.rb +0 -0
  225. /data/{lib → app/lib}/primer/forms/dsl/button_input.rb +0 -0
  226. /data/{lib → app/lib}/primer/forms/dsl/check_box_group_input.rb +0 -0
  227. /data/{lib → app/lib}/primer/forms/dsl/form_object.rb +0 -0
  228. /data/{lib → app/lib}/primer/forms/dsl/form_reference_input.rb +0 -0
  229. /data/{lib → app/lib}/primer/forms/dsl/hidden_input.rb +0 -0
  230. /data/{lib → app/lib}/primer/forms/dsl/input_group.rb +0 -0
  231. /data/{lib → app/lib}/primer/forms/dsl/input_methods.rb +0 -0
  232. /data/{lib → app/lib}/primer/forms/dsl/multi_input.rb +0 -0
  233. /data/{lib → app/lib}/primer/forms/dsl/radio_button_group_input.rb +0 -0
  234. /data/{lib → app/lib}/primer/forms/dsl/select_input.rb +0 -0
  235. /data/{lib → app/lib}/primer/forms/dsl/submit_button_input.rb +0 -0
  236. /data/{lib → app/lib}/primer/forms/dsl/text_area_input.rb +0 -0
  237. /data/{lib → app/lib}/primer/forms/dsl/text_field_input.rb +0 -0
  238. /data/{lib → app/lib}/primer/forms/dsl/toggle_switch_input.rb +0 -0
  239. /data/{lib → app/lib}/primer/forms/form_control.html.erb +0 -0
  240. /data/{lib → app/lib}/primer/forms/form_control.rb +0 -0
  241. /data/{lib → app/lib}/primer/forms/form_list.html.erb +0 -0
  242. /data/{lib → app/lib}/primer/forms/form_list.rb +0 -0
  243. /data/{lib → app/lib}/primer/forms/form_reference.html.erb +0 -0
  244. /data/{lib → app/lib}/primer/forms/form_reference.rb +0 -0
  245. /data/{lib → app/lib}/primer/forms/hidden_field.html.erb +0 -0
  246. /data/{lib → app/lib}/primer/forms/hidden_field.rb +0 -0
  247. /data/{lib → app/lib}/primer/forms/multi.html.erb +0 -0
  248. /data/{lib → app/lib}/primer/forms/multi.rb +0 -0
  249. /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.html.erb +0 -0
  250. /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.rb +0 -0
  251. /data/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
  252. /data/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
  253. /data/{lib → app/lib}/primer/forms/primer_multi_input.ts +0 -0
  254. /data/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
  255. /data/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
  256. /data/{lib → app/lib}/primer/forms/primer_text_field.ts +0 -0
  257. /data/{lib → app/lib}/primer/forms/radio_button.html.erb +0 -0
  258. /data/{lib → app/lib}/primer/forms/radio_button.rb +0 -0
  259. /data/{lib → app/lib}/primer/forms/select.rb +0 -0
  260. /data/{lib → app/lib}/primer/forms/separator.html.erb +0 -0
  261. /data/{lib → app/lib}/primer/forms/separator.rb +0 -0
  262. /data/{lib → app/lib}/primer/forms/spacing_wrapper.html.erb +0 -0
  263. /data/{lib → app/lib}/primer/forms/spacing_wrapper.rb +0 -0
  264. /data/{lib → app/lib}/primer/forms/submit_button.html.erb +0 -0
  265. /data/{lib → app/lib}/primer/forms/submit_button.rb +0 -0
  266. /data/{lib → app/lib}/primer/forms/text_area.html.erb +0 -0
  267. /data/{lib → app/lib}/primer/forms/text_area.rb +0 -0
  268. /data/{lib → app/lib}/primer/forms/text_field.html.erb +0 -0
  269. /data/{lib → app/lib}/primer/forms/text_field.rb +0 -0
  270. /data/{lib → app/lib}/primer/forms/toggle_switch.html.erb +0 -0
  271. /data/{lib → app/lib}/primer/forms/toggle_switch.rb +0 -0
  272. /data/{lib → app/lib}/primer/forms/toggle_switch_form.rb +0 -0
  273. /data/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
  274. /data/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
  275. /data/{lib → app/lib}/primer/forms/toggle_switch_input.ts +0 -0
  276. /data/{lib → app/lib}/primer/forms/utils.rb +0 -0
  277. /data/{lib → app/lib}/primer/forms/validation_message.html.erb +0 -0
  278. /data/{lib → app/lib}/primer/forms/validation_message.rb +0 -0
  279. /data/{lib → app/lib}/primer/forms.rb +0 -0
data/app/components/primer/alpha/button_marketing.pcss CHANGED
@@ -9,13 +9,16 @@
9
9
  /* stylelint-disable-next-line primer/typography */
10
10
  font-size: 1rem;
11
11
  font-weight: var(--base-text-weight-semibold);
12
+ /* stylelint-disable-next-line primer/typography */
12
13
  line-height: 1;
14
+ /* stylelint-disable-next-line primer/colors */
13
15
  color: var(--bgColor-default);
14
16
  text-align: center;
15
17
  white-space: nowrap;
16
18
  vertical-align: middle;
17
19
  user-select: none;
18
- background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
20
+ /* stylelint-disable-next-line primer/colors */
21
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
19
22
  var(--color-mktg-btn-bg) !important;
20
23
  border: 0;
21
24
 
@@ -34,7 +37,7 @@
34
37
  content: '';
35
38
 
36
39
  /* stylelint-disable-next-line primer/colors */
37
- background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
40
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
38
41
  border-radius: inherit;
39
42
  opacity: 0;
40
43
  transition: opacity 0.2s;
@@ -43,6 +46,7 @@
43
46
 
44
47
  &:hover {
45
48
  text-decoration: none;
49
+ /* stylelint-disable-next-line primer/box-shadow */
46
50
  box-shadow: var(--color-mktg-btn-shadow-hover) !important;
47
51
  }
48
52
 
@@ -88,6 +92,7 @@
88
92
  .btn-muted-mktg {
89
93
  color: var(--fgColor-default) !important;
90
94
  background: none !important;
95
+ /* stylelint-disable-next-line primer/box-shadow */
91
96
  box-shadow: var(--color-mktg-btn-shadow-outline);
92
97
 
93
98
  &::before {
@@ -95,6 +100,7 @@
95
100
  }
96
101
 
97
102
  &:hover {
103
+ /* stylelint-disable-next-line primer/box-shadow */
98
104
  box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
99
105
  }
100
106
 
@@ -119,6 +125,7 @@
119
125
  }
120
126
 
121
127
  &:hover {
128
+ /* stylelint-disable-next-line primer/box-shadow */
122
129
  box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
123
130
  }
124
131
  }
@@ -128,11 +135,11 @@
128
135
  color: #fff;
129
136
 
130
137
  /* stylelint-disable-next-line primer/colors */
131
- background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
138
+ background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
132
139
 
133
140
  &::before {
134
141
  /* stylelint-disable-next-line primer/colors */
135
- background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
142
+ background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
136
143
  }
137
144
 
138
145
  /* fallback :focus state */
data/app/components/primer/alpha/dialog.css CHANGED
@@ -1 +1 @@
1
- body.has-modal{overflow:hidden!important;padding-right:var(--dialog-scrollgutter)!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
1
+ @property --dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}body:has(:modal){padding-right:var(--dialog-scrollgutter)!important}body:has(dialog:modal.Overlay--disableScroll){overflow:hidden!important}dialog.Overlay:not([open]){display:none}.Overlay--hidden{display:none!important}.Overlay--visibilityHidden{height:0;opacity:0;overflow:hidden;visibility:hidden}@supports not selector(:popover-open){[popover]:not(.\:popover-open){display:none}}.Overlay{background-color:var(--overlay-bgColor);border:0;border-radius:var(--borderRadius-large);box-shadow:var(--shadow-floating-small);color:var(--fgColor-default);display:flex;flex-direction:column;inset:0;margin:auto;max-height:min(calc(100vh - 2rem),var(--overlay-height));min-width:192px;opacity:1;padding:0;position:static;white-space:normal;width:min(var(--overlay-width),100vw - 2rem)}.Overlay.Overlay--size-auto{max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);min-width:192px}.Overlay.Overlay--size-full{height:100vh;width:100vw}.Overlay.Overlay--size-xsmall{--overlay-width:192px;max-height:calc(100vh - 2rem)}.Overlay.Overlay--size-small{--overlay-height:256px;--overlay-width:320px}.Overlay.Overlay--size-small-portrait{--overlay-height:432px;--overlay-width:320px}.Overlay.Overlay--size-medium{--overlay-height:320px;--overlay-width:480px}.Overlay.Overlay--size-medium-portrait{--overlay-height:600px;--overlay-width:480px}.Overlay.Overlay--size-large{--overlay-height:432px;--overlay-width:640px}.Overlay.Overlay--size-xlarge{--overlay-height:600px;--overlay-width:960px}.Overlay.Overlay--height-auto{height:auto}.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{height:100%;max-height:unset;position:fixed}@media screen and (prefers-reduced-motion:no-preference){.Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right{animation:Overlay--motion-scaleFade .2s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}.Overlay.Overlay--placement-left{animation-name:Overlay--motion-slideInRight;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--height-xsmall{height:min(192px,100vh - 2rem)}.Overlay.Overlay--height-small{height:min(256px,100vh - 2rem)}.Overlay.Overlay--height-medium{height:min(320px,100vh - 2rem)}.Overlay.Overlay--height-large{height:min(432px,100vh - 2rem)}.Overlay.Overlay--height-xlarge{height:min(600px,100vh - 2rem)}.Overlay.Overlay--width-auto{width:auto}.Overlay.Overlay--width-small{width:min(256px,100vw - 2rem)}.Overlay.Overlay--width-medium{width:min(320px,100vw - 2rem)}.Overlay.Overlay--width-large{width:min(480px,100vw - 2rem)}.Overlay.Overlay--width-xlarge{width:min(640px,100vw - 2rem)}.Overlay.Overlay--width-xxlarge{width:min(960px,100vw - 2rem)}.Overlay:modal{position:fixed}@keyframes Overlay--motion-scaleFade{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.Overlay-form{flex-grow:1;overflow:auto}.Overlay-form,.Overlay-header{display:flex;flex-direction:column}.Overlay-header{color:var(--fgColor-default);z-index:1}.Overlay-header.Overlay-header--divided{box-shadow:inset 0 calc(var(--borderWidth-thin)*-1) var(--borderColor-default);padding-bottom:var(--stack-padding-condensed)}.Overlay-header.Overlay-header--divided+.Overlay-body{padding-top:var(--stack-padding-normal)}:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap{gap:var(--stack-gap-condensed)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-title-size-medium)}:is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{font-size:var(--text-body-size-medium)}.Overlay-header .Overlay-headerContentWrap{align-items:flex-start;display:flex;gap:var(--stack-gap-condensed);padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap{display:flex;flex-direction:row;gap:var(--stack-gap-condensed)}:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap{display:flex;flex-direction:column;flex-grow:1;gap:var(--control-small-gap);padding:calc(var(--stack-gap-condensed)*.75) 0 calc(var(--stack-gap-condensed)*.75) var(--stack-gap-condensed)}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);margin:0}:is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description{color:var(--fgColor-muted);font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-normal);margin:0}.Overlay-headerFilter{padding:var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed)}.Overlay-body{flex-grow:1;font-size:var(--text-body-size-medium);overflow-y:auto;padding:var(--stack-padding-normal);padding-top:0;scrollbar-width:thin}.Overlay-body.Overlay-body--paddingCondensed{padding:var(--stack-padding-condensed);padding-top:0}.Overlay-body.Overlay-body--paddingNone{padding:0}.Overlay-footer{display:flex;flex-direction:row;flex-shrink:0;flex-wrap:wrap;padding:0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);z-index:1}.Overlay-footer.Overlay-footer--divided{box-shadow:inset 0 var(--borderWidth-thin) var(--borderColor-default);padding-top:var(--stack-padding-normal)}.Overlay-footer.Overlay-footer--alignStart{gap:var(--stack-gap-condensed);justify-content:flex-start}.Overlay-footer.Overlay-footer--alignCenter{gap:var(--stack-gap-condensed);justify-content:center}.Overlay-footer.Overlay-footer--alignEnd{gap:var(--stack-gap-condensed);justify-content:flex-end}.Overlay-closeButton{align-self:flex-start;background-color:initial;border:var(--borderWidth-thin) solid #0000;border-radius:var(--borderRadius-medium);color:var(--fgColor-muted);cursor:pointer;display:grid;flex-shrink:0;height:var(--base-size-32);padding:0;place-content:center;position:relative;transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;-webkit-user-select:none;user-select:none;width:var(--base-size-32)}.Overlay-closeButton:focus,.Overlay-closeButton:hover{background-color:var(--button-default-bgColor-hover);border:var(--borderWidth-thin) solid var(--control-bgColor-hover)}.Overlay-closeButton.close-button{border:var(--borderWidth-thin) solid #0000}.Overlay--full{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}@media (max-width:767px){.Overlay--placement-right-whenNarrow,.Overlay.Overlay--placement-left-whenNarrow{height:100%;max-height:100vh;position:fixed}.Overlay.Overlay--placement-left-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-left-radius:0;border-top-left-radius:0;inset:0 auto 0 0}.Overlay.Overlay--placement-right-whenNarrow{animation-name:Overlay--motion-slideInLeft;border-bottom-right-radius:0;border-top-right-radius:0;inset:0 0 0 auto}.Overlay.Overlay--placement-bottom-whenNarrow{animation-name:Overlay--motion-slideUp;border-bottom-left-radius:0;border-bottom-right-radius:0;inset:auto 0 0;max-width:100vw;width:100%}.Overlay--full-whenNarrow{border-radius:unset!important;flex-grow:1;height:100%;max-height:100vh;max-width:100vw;width:100%}}@keyframes Overlay--motion-slideDown{0%{transform:translateY(-100%)}}@keyframes Overlay--motion-slideUp{0%{transform:translateY(100%)}}@keyframes Overlay--motion-slideInRight{0%{transform:translateX(-100%)}}@keyframes Overlay--motion-slideInLeft{0%{transform:translateX(100%)}}
data/app/components/primer/alpha/dialog.css.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "alpha/dialog",
3
3
  "selectors": [
4
- "body.has-modal",
4
+ "body:has(:modal)",
5
+ "body:has(dialog:modal.Overlay--disableScroll)",
5
6
  "dialog.Overlay:not([open])",
6
7
  ".Overlay--hidden",
7
8
  ".Overlay--visibilityHidden",
data/app/components/primer/alpha/dialog.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n height: 100%;\n max-height: unset;\n position: fixed;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n height: 100%;\n max-height: 100vh;\n position: fixed;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
1
+ {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n/* stylelint-disable selector-max-compound-selectors */\n/* stylelint-disable max-nesting-depth */\n/* stylelint-disable primer/responsive-widths */\n/* stylelint-disable primer/spacing */\n/* stylelint-disable selector-no-qualifying-type */\n/* stylelint-disable selector-max-type */\n\n/* Overlay */\n\n/* The --dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: \"<length>\";\n}\n\nbody:has(:modal) {\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\nbody:has(dialog:modal.Overlay--disableScroll) {\n overflow: hidden !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* This is for @oddbird/popover-polyfill;\n * A FOUC occurs in browsers which do not support :popover-open.\n * We can try to hide the popover if :popover-open is not supported.\n */\n@supports not selector(:popover-open) {\n [popover]:not(.\\:popover-open) {\n display: none;\n }\n}\n\n.Overlay {\n position: static;\n display: flex;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n padding: 0;\n margin: auto;\n color: var(--fgColor-default);\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n inset: 0;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n position: fixed;\n height: 100%;\n max-height: unset;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n color: var(--fgColor-default);\n flex-direction: column;\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n.Overlay-headerFilter {\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n position: fixed;\n height: 100%;\n max-height: 100vh;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideUp;\n inset: auto 0 0;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
data/app/components/primer/alpha/dialog.pcss CHANGED
@@ -1,11 +1,34 @@
1
+ /* stylelint-disable selector-max-specificity */
2
+ /* stylelint-disable selector-max-compound-selectors */
3
+ /* stylelint-disable max-nesting-depth */
4
+ /* stylelint-disable primer/responsive-widths */
5
+ /* stylelint-disable primer/spacing */
6
+ /* stylelint-disable selector-no-qualifying-type */
7
+ /* stylelint-disable selector-max-type */
8
+
1
9
  /* Overlay */
2
10
 
3
- /* TODO: One day this can be :has(:modal), when it is better supported */
4
- body.has-modal {
5
- overflow: hidden !important;
11
+ /* The --dialog-scrollgutter property is used only on the body element to
12
+ * simulate scrollbar-gutter:stable. This property is not and should not
13
+ * be used elsewhere in the DOM. There is a performance penalty to
14
+ * setting inherited properties which can cause a large style recalc to
15
+ * occur, so it benefits us to prevent inheritance for this property.
16
+ * See https://web.dev/blog/at-property-performance
17
+ */
18
+ @property --dialog-scrollgutter {
19
+ initial-value: 0;
20
+ inherits: false;
21
+ syntax: "<length>";
22
+ }
23
+
24
+ body:has(:modal) {
6
25
  padding-right: var(--dialog-scrollgutter) !important;
7
26
  }
8
27
 
28
+ body:has(dialog:modal.Overlay--disableScroll) {
29
+ overflow: hidden !important;
30
+ }
31
+
9
32
  dialog.Overlay:not([open]) {
10
33
  display: none;
11
34
  }
@@ -32,22 +55,22 @@ dialog.Overlay:not([open]) {
32
55
  }
33
56
 
34
57
  .Overlay {
35
- display: flex;
36
- inset: 0;
37
58
  position: static;
38
- margin: auto;
39
- padding: 0;
59
+ display: flex;
40
60
  width: min(var(--overlay-width), 100vw - 2rem);
41
61
  min-width: 192px;
42
62
  max-height: min(calc(100vh - 2rem), var(--overlay-height));
63
+ padding: 0;
64
+ margin: auto;
65
+ color: var(--fgColor-default);
43
66
  white-space: normal;
44
67
  flex-direction: column;
45
68
  background-color: var(--overlay-bgColor);
46
- color: var(--fgColor-default);
47
69
  border: 0;
48
70
  border-radius: var(--borderRadius-large);
49
71
  box-shadow: var(--shadow-floating-small);
50
72
  opacity: 1;
73
+ inset: 0;
51
74
 
52
75
  &.Overlay--size-auto {
53
76
  min-width: 192px;
@@ -101,9 +124,9 @@ dialog.Overlay:not([open]) {
101
124
  }
102
125
 
103
126
  &.Overlay--placement-left, &.Overlay--placement-right {
127
+ position: fixed;
104
128
  height: 100%;
105
129
  max-height: unset;
106
- position: fixed;
107
130
  }
108
131
 
109
132
  &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {
@@ -201,11 +224,12 @@ dialog.Overlay:not([open]) {
201
224
  .Overlay-header {
202
225
  z-index: 1;
203
226
  display: flex;
204
- flex-direction: column;
205
227
  color: var(--fgColor-default);
228
+ flex-direction: column;
206
229
 
207
230
  &.Overlay-header--divided {
208
231
  padding-bottom: var(--stack-padding-condensed);
232
+ /* stylelint-disable-next-line primer/box-shadow */
209
233
  box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
210
234
 
211
235
  & + .Overlay-body {
@@ -299,6 +323,7 @@ dialog.Overlay:not([open]) {
299
323
 
300
324
  &.Overlay-footer--divided {
301
325
  padding-top: var(--stack-padding-normal);
326
+ /* stylelint-disable-next-line primer/box-shadow */
302
327
  box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
303
328
  }
304
329
 
@@ -340,6 +365,7 @@ dialog.Overlay:not([open]) {
340
365
  &:hover,
341
366
  &:focus {
342
367
  background-color: var(--button-default-bgColor-hover);
368
+ /* stylelint-disable-next-line primer/colors */
343
369
  border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
344
370
  }
345
371
 
@@ -368,9 +394,9 @@ dialog.Overlay:not([open]) {
368
394
  /* --viewportRange-narrowLandscape */
369
395
  @media (max-width: 767px) {
370
396
  .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
397
+ position: fixed;
371
398
  height: 100%;
372
399
  max-height: 100vh;
373
- position: fixed;
374
400
  }
375
401
 
376
402
  .Overlay.Overlay--placement-left-whenNarrow {
@@ -390,10 +416,10 @@ dialog.Overlay:not([open]) {
390
416
  .Overlay.Overlay--placement-bottom-whenNarrow {
391
417
  width: 100%;
392
418
  max-width: 100vw;
393
- inset: auto 0 0;
394
- border-bottom-left-radius: 0;
395
419
  border-bottom-right-radius: 0;
420
+ border-bottom-left-radius: 0;
396
421
  animation-name: Overlay--motion-slideUp;
422
+ inset: auto 0 0;
397
423
  }
398
424
 
399
425
  .Overlay--full-whenNarrow {
data/app/components/primer/alpha/dialog.rb CHANGED
@@ -104,6 +104,7 @@ module Primer
104
104
  # @param position [Symbol] The position of the dialog. <%= one_of(Primer::Alpha::Dialog::POSITION_OPTIONS) %>
105
105
  # @param position_narrow [Symbol] The position of the dialog when narrow. <%= one_of(Primer::Alpha::Dialog::POSITION_NARROW_OPTIONS) %>
106
106
  # @param visually_hide_title [Boolean] If true will hide the heading title, while still making it available to Screen Readers.
107
+ # @param disable_scroll [Boolean] When true, disables scrolling the page when the dialog is open.
107
108
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
108
109
  def initialize(
109
110
  title:,
@@ -113,6 +114,7 @@ module Primer
113
114
  position_narrow: DEFAULT_POSITION_NARROW,
114
115
  visually_hide_title: false,
115
116
  id: self.class.generate_id,
117
+ disable_scroll: true,
116
118
  **system_arguments
117
119
  )
118
120
  @system_arguments = deny_tag_argument(**system_arguments)
@@ -124,6 +126,7 @@ module Primer
124
126
  @position = position
125
127
  @position_narrow = position_narrow
126
128
  @visually_hide_title = visually_hide_title
129
+ @disable_scroll = disable_scroll
127
130
 
128
131
  @system_arguments[:tag] = "dialog"
129
132
  @system_arguments[:id] = @id
@@ -143,7 +146,8 @@ module Primer
143
146
  "Overlay--motion-scaleFade",
144
147
  POSITION_MAPPINGS[fetch_or_fallback(POSITION_OPTIONS, @position, DEFAULT_POSITION)],
145
148
  POSITION_NARROW_MAPPINGS[fetch_or_fallback(POSITION_NARROW_MAPPINGS, @position_narrow, DEFAULT_POSITION_NARROW)],
146
- system_arguments[:classes]
149
+ system_arguments[:classes],
150
+ "Overlay--disableScroll" => @disable_scroll
147
151
  )
148
152
  end
149
153
 
data/app/components/primer/alpha/dropdown.css CHANGED
@@ -1 +1 @@
1
- .dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
1
+ .dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker) var(--borderWidth-thicker) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:var(--base-size-2);padding-bottom:var(--control-small-paddingBlock);padding-top:var(--control-small-paddingBlock);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default)}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor)}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default);display:block;overflow:hidden;padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin) solid var(--borderColor-default);display:block;height:0;margin:var(--stack-gap-condensed) 0}.dropdown-header{color:var(--fgColor-muted);font-size:var(--text-body-size-small);padding:var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:var(--base-size-8);margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default);left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor);left:auto;right:-14px;top:var(--base-size-12)}.dropdown-menu-e{left:100%;margin-left:var(--base-size-8);margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default);left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor);left:-14px;top:var(--base-size-12)}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:var(--base-size-4);top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default);bottom:-8px;left:var(--base-size-8)}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor);bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:var(--base-size-8);top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:var(--base-size-8);top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
data/app/components/primer/alpha/dropdown.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,kEAAoE,CAXpE,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,gDAAiD,CADjD,6CAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,kDACF,CAGA,qBAEE,sBAA2C,CAA3C,8CACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAKE,4BAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,sKACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,mEAAoE,CAHpE,aAAc,CACd,QAAS,CACT,mCAEF,CAEA,iBAGE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,wCAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,yCAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,+CAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2CAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock);\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: 2px;\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--borderColor-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--overlay-bgColor);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
1
+ {"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oEAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAaE,2BAA4B,CAD5B,uCAAwC,CAExC,+DAAgE,CAChE,wCAAyC,CACzC,kEAAoE,CAbpE,MAAO,CAQP,eAAgB,CADhB,6BAA8B,CAD9B,gDAAiD,CAFjD,6CAA8C,CAN9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAwCF,CA1BE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAGE,sBAA+C,CAA/C,kDACF,CAGA,qBAIE,sBAA2C,CAA3C,8CACF,CAGA,kBACE,eACF,CAGF,2BACE,UAQF,CANE,0CAGE,gBAAiB,CADjB,sFAAuF,CAEvF,qBACF,CAIF,eAKE,4BAA6B,CAJ7B,aAAc,CAGd,eAAgB,CADhB,sKAAuK,CAGvK,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,+CAAgD,CAFhD,+BAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAKE,mEAAoE,CAJpE,aAAc,CACd,QAAS,CAET,mCAEF,CAEA,iBAIE,0BAA2B,CAD3B,qCAAsC,CADtC,sFAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,+BAAgC,CADhC,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAuBF,CAnBE,wBAME,kBAAyB,CACzB,4CAA6C,CAF7C,SAAU,CADV,WAAY,CAFZ,QAMF,CAEA,uBAKE,kBAAyB,CAEzB,wCAAyC,CAHzC,SAAU,CADV,WAAY,CAFZ,uBAOF,CAGF,iBAEE,SAAU,CAGV,8BAA+B,CAD/B,YAAa,CAHb,KAAM,CAEN,UAqBF,CAjBE,wBAKE,kBAAyB,CACzB,6CAA8C,CAF9C,UAAW,CAFX,QAKF,CAEA,uBAIE,kBAAyB,CAEzB,yCAA0C,CAH1C,UAAW,CAFX,uBAMF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,gCAAiC,CAHjC,QAqCF,CAhCE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAQE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,+CAAgD,CAHhD,WAAY,CACZ,uBAQF,CAEA,wBASE,eAAgB,CAEhB,2BAAkC,CAHlC,4BAAmC,CAFnC,2CAA4C,CAJ5C,WAAY,CAEZ,SAQF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAeF,CAbE,wBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAGE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAiBF,CAdE,yBAIE,SAAU,CADV,wBAAyB,CADzB,SAGF,CAEA,wBAKE,SAAU,CADV,UAAW,CAFX,SAIF,CAIA,yBAGE,uBAAwB,CADxB,SAEF,CAEA,wBAIE,SAAU,CAFV,SAGF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n /* stylelint-disable-next-line primer/spacing */\n padding-top: var(--control-small-paddingBlock);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: var(--base-size-2);\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n /* stylelint-disable-next-line primer/borders */\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: var(--base-size-8);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n top: var(--base-size-12);\n /* stylelint-disable-next-line primer/spacing */\n right: -14px;\n left: auto;\n border-color: transparent;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: var(--base-size-8);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n top: var(--base-size-12);\n /* stylelint-disable-next-line primer/spacing */\n left: -14px;\n border-color: transparent;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: var(--base-size-4);\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -8px;\n left: var(--base-size-8);\n /* stylelint-disable-next-line primer/borders */\n border-top: 8px solid var(--borderColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-right: 8px solid transparent;\n border-bottom: 0;\n /* stylelint-disable-next-line primer/borders */\n border-left: 8px solid transparent;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n bottom: -7px;\n /* stylelint-disable-next-line primer/spacing */\n left: 10px;\n /* stylelint-disable-next-line primer/borders, primer/colors */\n border-top: 7px solid var(--overlay-bgColor);\n /* stylelint-disable-next-line primer/borders */\n border-right: 7px solid transparent;\n border-bottom: 0;\n /* stylelint-disable-next-line primer/borders */\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n right: var(--base-size-8);\n left: auto;\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n /* stylelint-disable-next-line primer/spacing */\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n /* stylelint-disable-next-line primer/spacing */\n top: -16px;\n left: var(--base-size-8);\n }\n\n &::after {\n /* stylelint-disable-next-line primer/spacing */\n top: -14px;\n /* stylelint-disable-next-line primer/spacing */\n left: 10px;\n }\n}\n"]}
data/app/components/primer/alpha/dropdown.pcss CHANGED
@@ -26,9 +26,11 @@
26
26
  left: 0;
27
27
  z-index: 100;
28
28
  width: 160px;
29
+ /* stylelint-disable-next-line primer/spacing */
29
30
  padding-top: var(--control-small-paddingBlock);
31
+ /* stylelint-disable-next-line primer/spacing */
30
32
  padding-bottom: var(--control-small-paddingBlock);
31
- margin-top: 2px;
33
+ margin-top: var(--base-size-2);
32
34
  list-style: none;
33
35
  background-color: var(--overlay-bgColor);
34
36
  background-clip: padding-box;
@@ -45,16 +47,20 @@
45
47
 
46
48
  /* caret border */
47
49
  &::before {
50
+ /* stylelint-disable-next-line primer/borders */
48
51
  border: 8px solid transparent;
49
52
  border-bottom-color: var(--borderColor-default);
50
53
  }
51
54
 
52
55
  /* caret background (should match dropdown background) */
53
56
  &::after {
57
+ /* stylelint-disable-next-line primer/borders */
54
58
  border: 7px solid transparent;
59
+ /* stylelint-disable-next-line primer/colors */
55
60
  border-bottom-color: var(--overlay-bgColor);
56
61
  }
57
62
 
63
+ /* stylelint-disable-next-line selector-max-type */
58
64
  & > ul {
59
65
  list-style: none;
60
66
  }
@@ -64,6 +70,7 @@
64
70
  width: auto;
65
71
 
66
72
  & .dropdown-item {
73
+ /* stylelint-disable-next-line primer/spacing */
67
74
  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
68
75
  overflow: visible;
69
76
  text-overflow: inherit;
@@ -73,8 +80,8 @@
73
80
  /* Dropdown items (can be links or buttons) */
74
81
  .dropdown-item {
75
82
  display: block;
76
- padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)
77
- var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
83
+ /* stylelint-disable-next-line primer/spacing */
84
+ padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
78
85
  overflow: hidden;
79
86
  color: var(--fgColor-default);
80
87
  text-overflow: ellipsis;
@@ -116,11 +123,13 @@
116
123
  .dropdown-divider {
117
124
  display: block;
118
125
  height: 0;
126
+ /* stylelint-disable-next-line primer/spacing */
119
127
  margin: var(--stack-gap-condensed) 0;
120
128
  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
121
129
  }
122
130
 
123
131
  .dropdown-header {
132
+ /* stylelint-disable-next-line primer/spacing */
124
133
  padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
125
134
  font-size: var(--text-body-size-small);
126
135
  color: var(--fgColor-muted);
@@ -141,10 +150,12 @@
141
150
  left: auto;
142
151
  width: auto;
143
152
  margin-top: 0;
144
- margin-right: 8px;
153
+ margin-right: var(--base-size-8);
145
154
 
146
155
  &::before {
156
+ /* stylelint-disable-next-line primer/spacing */
147
157
  top: 10px;
158
+ /* stylelint-disable-next-line primer/spacing */
148
159
  right: -16px;
149
160
  left: auto;
150
161
  border-color: transparent;
@@ -152,10 +163,12 @@
152
163
  }
153
164
 
154
165
  &::after {
155
- top: 11px;
166
+ top: var(--base-size-12);
167
+ /* stylelint-disable-next-line primer/spacing */
156
168
  right: -14px;
157
169
  left: auto;
158
170
  border-color: transparent;
171
+ /* stylelint-disable-next-line primer/colors */
159
172
  border-left-color: var(--overlay-bgColor);
160
173
  }
161
174
  }
@@ -165,19 +178,23 @@
165
178
  left: 100%;
166
179
  width: auto;
167
180
  margin-top: 0;
168
- margin-left: 8px;
181
+ margin-left: var(--base-size-8);
169
182
 
170
183
  &::before {
184
+ /* stylelint-disable-next-line primer/spacing */
171
185
  top: 10px;
186
+ /* stylelint-disable-next-line primer/spacing */
172
187
  left: -16px;
173
188
  border-color: transparent;
174
189
  border-right-color: var(--borderColor-default);
175
190
  }
176
191
 
177
192
  &::after {
178
- top: 11px;
193
+ top: var(--base-size-12);
194
+ /* stylelint-disable-next-line primer/spacing */
179
195
  left: -14px;
180
196
  border-color: transparent;
197
+ /* stylelint-disable-next-line primer/colors */
181
198
  border-right-color: var(--overlay-bgColor);
182
199
  }
183
200
  }
@@ -186,7 +203,7 @@
186
203
  top: auto;
187
204
  bottom: 100%;
188
205
  left: 0;
189
- margin-bottom: 3px;
206
+ margin-bottom: var(--base-size-4);
190
207
 
191
208
  &::before,
192
209
  &::after {
@@ -195,20 +212,29 @@
195
212
  }
196
213
 
197
214
  &::before {
215
+ /* stylelint-disable-next-line primer/spacing */
198
216
  bottom: -8px;
199
- left: 9px;
217
+ left: var(--base-size-8);
218
+ /* stylelint-disable-next-line primer/borders */
200
219
  border-top: 8px solid var(--borderColor-default);
220
+ /* stylelint-disable-next-line primer/borders */
201
221
  border-right: 8px solid transparent;
202
222
  border-bottom: 0;
223
+ /* stylelint-disable-next-line primer/borders */
203
224
  border-left: 8px solid transparent;
204
225
  }
205
226
 
206
227
  &::after {
228
+ /* stylelint-disable-next-line primer/spacing */
207
229
  bottom: -7px;
230
+ /* stylelint-disable-next-line primer/spacing */
208
231
  left: 10px;
232
+ /* stylelint-disable-next-line primer/borders, primer/colors */
209
233
  border-top: 7px solid var(--overlay-bgColor);
234
+ /* stylelint-disable-next-line primer/borders */
210
235
  border-right: 7px solid transparent;
211
236
  border-bottom: 0;
237
+ /* stylelint-disable-next-line primer/borders */
212
238
  border-left: 7px solid transparent;
213
239
  }
214
240
  }
@@ -219,12 +245,14 @@
219
245
  transform: translateX(50%);
220
246
 
221
247
  &::before {
248
+ /* stylelint-disable-next-line primer/spacing */
222
249
  top: -16px;
223
250
  right: 50%;
224
251
  transform: translateX(50%);
225
252
  }
226
253
 
227
254
  &::after {
255
+ /* stylelint-disable-next-line primer/spacing */
228
256
  top: -14px;
229
257
  right: 50%;
230
258
  transform: translateX(50%);
@@ -236,13 +264,16 @@
236
264
  left: auto;
237
265
 
238
266
  &::before {
267
+ /* stylelint-disable-next-line primer/spacing */
239
268
  top: -16px;
240
- right: 9px;
269
+ right: var(--base-size-8);
241
270
  left: auto;
242
271
  }
243
272
 
244
273
  &::after {
274
+ /* stylelint-disable-next-line primer/spacing */
245
275
  top: -14px;
276
+ /* stylelint-disable-next-line primer/spacing */
246
277
  right: 10px;
247
278
  left: auto;
248
279
  }
@@ -250,12 +281,15 @@
250
281
 
251
282
  .dropdown-menu-se {
252
283
  &::before {
284
+ /* stylelint-disable-next-line primer/spacing */
253
285
  top: -16px;
254
- left: 9px;
286
+ left: var(--base-size-8);
255
287
  }
256
288
 
257
289
  &::after {
290
+ /* stylelint-disable-next-line primer/spacing */
258
291
  top: -14px;
292
+ /* stylelint-disable-next-line primer/spacing */
259
293
  left: 10px;
260
294
  }
261
295
  }