openproject-primer_view_components 0.48.1 → 0.49.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (291) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/app/assets/javascripts/{app/components → components}/primer/open_project/zen_mode_button.d.ts +4 -0
  4. data/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -4
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/alpha/action_bar.css.map +1 -1
  10. data/app/components/primer/alpha/action_bar.pcss +7 -4
  11. data/app/components/primer/alpha/action_bar_element.js +0 -3
  12. data/app/components/primer/alpha/action_bar_element.ts +0 -4
  13. data/app/components/primer/alpha/action_list.css +1 -1
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +25 -8
  16. data/app/components/primer/alpha/action_list.rb +1 -1
  17. data/app/components/primer/alpha/auto_complete.css +1 -1
  18. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  19. data/app/components/primer/alpha/auto_complete.pcss +7 -7
  20. data/app/components/primer/alpha/banner.css +1 -1
  21. data/app/components/primer/alpha/banner.css.map +1 -1
  22. data/app/components/primer/alpha/banner.pcss +6 -2
  23. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  24. data/app/components/primer/alpha/button_marketing.pcss +11 -4
  25. data/app/components/primer/alpha/dialog.css +1 -1
  26. data/app/components/primer/alpha/dialog.css.json +2 -1
  27. data/app/components/primer/alpha/dialog.css.map +1 -1
  28. data/app/components/primer/alpha/dialog.pcss +39 -13
  29. data/app/components/primer/alpha/dialog.rb +5 -1
  30. data/app/components/primer/alpha/dropdown.css +1 -1
  31. data/app/components/primer/alpha/dropdown.css.map +1 -1
  32. data/app/components/primer/alpha/dropdown.pcss +45 -11
  33. data/app/components/primer/alpha/layout.css.map +1 -1
  34. data/app/components/primer/alpha/layout.pcss +3 -2
  35. data/app/components/primer/alpha/menu.css.map +1 -1
  36. data/app/components/primer/alpha/menu.pcss +7 -0
  37. data/app/components/primer/alpha/overlay.css.map +1 -1
  38. data/app/components/primer/alpha/overlay.pcss +3 -3
  39. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  40. data/app/components/primer/alpha/segmented_control.pcss +15 -8
  41. data/app/components/primer/alpha/select_panel.html.erb +8 -5
  42. data/app/components/primer/alpha/select_panel.rb +26 -1
  43. data/app/components/primer/alpha/select_panel_element.js +9 -3
  44. data/app/components/primer/alpha/select_panel_element.ts +10 -4
  45. data/app/components/primer/alpha/stack.css +1 -0
  46. data/app/components/primer/alpha/stack.css.json +90 -0
  47. data/app/components/primer/alpha/stack.css.map +1 -0
  48. data/app/components/primer/alpha/stack.html.erb +3 -0
  49. data/app/components/primer/alpha/stack.pcss +297 -0
  50. data/app/components/primer/alpha/stack.rb +185 -0
  51. data/app/components/primer/alpha/stack_item.css +1 -0
  52. data/app/components/primer/alpha/stack_item.css.json +12 -0
  53. data/app/components/primer/alpha/stack_item.css.map +1 -0
  54. data/app/components/primer/alpha/stack_item.html.erb +3 -0
  55. data/app/components/primer/alpha/stack_item.pcss +31 -0
  56. data/app/components/primer/alpha/stack_item.rb +54 -0
  57. data/app/components/primer/alpha/tab_nav.css +1 -1
  58. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  59. data/app/components/primer/alpha/tab_nav.pcss +12 -3
  60. data/app/components/primer/alpha/text_field.css +1 -1
  61. data/app/components/primer/alpha/text_field.css.map +1 -1
  62. data/app/components/primer/alpha/text_field.pcss +29 -22
  63. data/app/components/primer/alpha/toggle_switch.css +1 -1
  64. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  65. data/app/components/primer/alpha/toggle_switch.pcss +6 -3
  66. data/app/components/primer/alpha/underline_nav.css +1 -1
  67. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  68. data/app/components/primer/alpha/underline_nav.pcss +8 -2
  69. data/app/components/primer/base_component.rb +1 -1
  70. data/app/components/primer/beta/avatar.css +1 -1
  71. data/app/components/primer/beta/avatar.css.map +1 -1
  72. data/app/components/primer/beta/avatar.pcss +4 -1
  73. data/app/components/primer/beta/avatar_stack.css +1 -1
  74. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  75. data/app/components/primer/beta/avatar_stack.pcss +9 -2
  76. data/app/components/primer/beta/blankslate.css +1 -1
  77. data/app/components/primer/beta/blankslate.css.map +1 -1
  78. data/app/components/primer/beta/blankslate.pcss +24 -3
  79. data/app/components/primer/beta/border_box.css +1 -1
  80. data/app/components/primer/beta/border_box.css.map +1 -1
  81. data/app/components/primer/beta/border_box.pcss +8 -4
  82. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  83. data/app/components/primer/beta/breadcrumbs.pcss +5 -1
  84. data/app/components/primer/beta/button.css +1 -1
  85. data/app/components/primer/beta/button.css.map +1 -1
  86. data/app/components/primer/beta/button.pcss +31 -27
  87. data/app/components/primer/beta/button_group.css.map +1 -1
  88. data/app/components/primer/beta/button_group.pcss +1 -0
  89. data/app/components/primer/beta/counter.css +1 -1
  90. data/app/components/primer/beta/counter.css.map +1 -1
  91. data/app/components/primer/beta/counter.pcss +3 -1
  92. data/app/components/primer/beta/flash.css.map +1 -1
  93. data/app/components/primer/beta/flash.pcss +7 -4
  94. data/app/components/primer/beta/label.css.map +1 -1
  95. data/app/components/primer/beta/label.pcss +4 -0
  96. data/app/components/primer/beta/popover.css +1 -1
  97. data/app/components/primer/beta/popover.css.map +1 -1
  98. data/app/components/primer/beta/popover.pcss +15 -7
  99. data/app/components/primer/beta/progress_bar.css +1 -1
  100. data/app/components/primer/beta/progress_bar.css.map +1 -1
  101. data/app/components/primer/beta/progress_bar.pcss +2 -2
  102. data/app/components/primer/beta/state.css +1 -1
  103. data/app/components/primer/beta/state.css.map +1 -1
  104. data/app/components/primer/beta/state.pcss +6 -1
  105. data/app/components/primer/beta/subhead.css.map +1 -1
  106. data/app/components/primer/beta/subhead.pcss +3 -0
  107. data/app/components/primer/beta/timeline_item.css.map +1 -1
  108. data/app/components/primer/beta/timeline_item.pcss +11 -0
  109. data/app/components/primer/beta/truncate.css.map +1 -1
  110. data/app/components/primer/beta/truncate.pcss +1 -0
  111. data/app/components/primer/dialog_helper.js +0 -1
  112. data/app/components/primer/dialog_helper.ts +0 -1
  113. data/app/components/primer/open_project/zen_mode_button.d.ts +4 -0
  114. data/app/components/primer/open_project/zen_mode_button.js +14 -6
  115. data/app/components/primer/open_project/zen_mode_button.ts +18 -5
  116. data/app/components/primer/primer.d.ts +3 -4
  117. data/app/components/primer/primer.js +3 -4
  118. data/app/components/primer/primer.pcss +6 -4
  119. data/app/components/primer/primer.ts +3 -4
  120. data/app/components/primer/responsive_arg.rb +66 -0
  121. data/app/forms/caption_template_form/places_bellevue_caption.html.erb +1 -0
  122. data/app/forms/caption_template_form/places_lopez_caption.html.erb +1 -0
  123. data/app/forms/caption_template_form/places_seattle_caption.html.erb +1 -0
  124. data/app/forms/caption_template_form.rb +6 -0
  125. data/app/forms/check_box_group_form.rb +1 -1
  126. data/app/forms/radio_button_group_form.rb +5 -1
  127. data/app/lib/primer/attributes_helper.rb +1 -1
  128. data/{lib → app/lib}/primer/forms/base_component.rb +0 -8
  129. data/{lib → app/lib}/primer/forms/button.rb +5 -2
  130. data/{lib → app/lib}/primer/forms/check_box_group.html.erb +3 -3
  131. data/{lib → app/lib}/primer/forms/check_box_group.rb +1 -1
  132. data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb +4 -8
  133. data/{lib → app/lib}/primer/forms/dsl/input.rb +13 -1
  134. data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb +4 -0
  135. data/{lib → app/lib}/primer/forms/group.html.erb +1 -1
  136. data/{lib → app/lib}/primer/forms/group.rb +5 -0
  137. data/{lib → app/lib}/primer/forms/radio_button_group.html.erb +3 -3
  138. data/{lib → app/lib}/primer/forms/radio_button_group.rb +1 -1
  139. data/{lib → app/lib}/primer/forms/select.html.erb +0 -1
  140. data/lib/primer/view_components/linters/details_menu_migration.rb +3 -2
  141. data/lib/primer/view_components/version.rb +2 -2
  142. data/lib/primer/yard/component_manifest.rb +0 -1
  143. data/previews/primer/alpha/action_bar_preview/inline.html.erb +1 -1
  144. data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb +1 -1
  145. data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -1
  146. data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +4 -4
  147. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
  148. data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +11 -2
  149. data/previews/primer/alpha/dialog_preview/with_footer.html.erb +2 -2
  150. data/previews/primer/alpha/dialog_preview/with_form.html.erb +2 -2
  151. data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +1 -1
  152. data/previews/primer/alpha/dialog_preview.rb +4 -2
  153. data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb +1 -1
  154. data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +1 -1
  155. data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +1 -1
  156. data/previews/primer/alpha/select_panel_preview/custom_loading_description.html.erb +23 -0
  157. data/previews/primer/alpha/select_panel_preview/custom_loading_label.html.erb +21 -0
  158. data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +4 -2
  159. data/previews/primer/alpha/select_panel_preview/scroll_container.html.erb +49 -0
  160. data/previews/primer/alpha/select_panel_preview.rb +40 -2
  161. data/previews/primer/alpha/stack_item_preview/default.html.erb +5 -0
  162. data/previews/primer/alpha/stack_item_preview/playground.html.erb +11 -0
  163. data/previews/primer/alpha/stack_item_preview.rb +40 -0
  164. data/previews/primer/alpha/stack_preview/playground.html.erb +5 -0
  165. data/previews/primer/alpha/stack_preview.rb +88 -0
  166. data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb +1 -2
  167. data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +2 -2
  168. data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +1 -1
  169. data/previews/primer/alpha/underline_nav_preview/default.html.erb +1 -1
  170. data/previews/primer/alpha/underline_nav_preview/playground.html.erb +1 -1
  171. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +18 -18
  172. data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb +3 -1
  173. data/previews/primer/beta/button_preview/summary_as_button.html.erb +0 -1
  174. data/previews/primer/beta/subhead_preview/actions.html.erb +0 -1
  175. data/previews/primer/open_project/feedback_dialog_preview/additional_content.html.erb +1 -1
  176. data/previews/primer/open_project/feedback_dialog_preview/custom_footer.html.erb +1 -1
  177. data/previews/primer/open_project/feedback_dialog_preview/playground.html.erb +2 -2
  178. data/previews/primer/open_project/page_header_preview/actions.html.erb +1 -1
  179. data/previews/primer/open_project/page_header_preview/playground.html.erb +2 -2
  180. data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb +1 -1
  181. data/static/arguments.json +112 -30
  182. data/static/audited_at.json +2 -1
  183. data/static/classes.json +6 -0
  184. data/static/constants.json +172 -9
  185. data/static/info_arch.json +248 -98
  186. data/static/previews.json +107 -47
  187. data/static/statuses.json +2 -1
  188. metadata +137 -120
  189. data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +0 -1
  190. data/app/components/primer/alpha/image_crop.d.ts +0 -1
  191. data/app/components/primer/alpha/image_crop.html.erb +0 -12
  192. data/app/components/primer/alpha/image_crop.js +0 -1
  193. data/app/components/primer/alpha/image_crop.rb +0 -28
  194. data/app/components/primer/alpha/image_crop.ts +0 -1
  195. data/previews/primer/alpha/image_crop_preview.rb +0 -31
  196. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
  197. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
  198. /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
  199. /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
  200. /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
  201. /data/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
  202. /data/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
  203. /data/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
  204. /data/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
  205. /data/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
  206. /data/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
  207. /data/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
  208. /data/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
  209. /data/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
  210. /data/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
  211. /data/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
  212. /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
  213. /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
  214. /data/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
  215. /data/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
  216. /data/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
  217. /data/app/assets/javascripts/{app/components → components}/primer/open_project/page_header_element.d.ts +0 -0
  218. /data/app/assets/javascripts/{app/components → components}/primer/open_project/sub_header_element.d.ts +0 -0
  219. /data/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
  220. /data/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
  221. /data/{lib → app/lib}/primer/forms/action_menu.html.erb +0 -0
  222. /data/{lib → app/lib}/primer/forms/action_menu.rb +0 -0
  223. /data/{lib → app/lib}/primer/forms/acts_as_component.rb +0 -0
  224. /data/{lib → app/lib}/primer/forms/auto_complete.html.erb +0 -0
  225. /data/{lib → app/lib}/primer/forms/auto_complete.rb +0 -0
  226. /data/{lib → app/lib}/primer/forms/base.html.erb +0 -0
  227. /data/{lib → app/lib}/primer/forms/base.rb +0 -0
  228. /data/{lib → app/lib}/primer/forms/buffer_rewriter.rb +0 -0
  229. /data/{lib → app/lib}/primer/forms/builder.rb +0 -0
  230. /data/{lib → app/lib}/primer/forms/button.html.erb +0 -0
  231. /data/{lib → app/lib}/primer/forms/caption.html.erb +0 -0
  232. /data/{lib → app/lib}/primer/forms/caption.rb +0 -0
  233. /data/{lib → app/lib}/primer/forms/check_box.html.erb +0 -0
  234. /data/{lib → app/lib}/primer/forms/check_box.rb +0 -0
  235. /data/{lib → app/lib}/primer/forms/dsl/action_menu_input.rb +0 -0
  236. /data/{lib → app/lib}/primer/forms/dsl/auto_complete_input.rb +0 -0
  237. /data/{lib → app/lib}/primer/forms/dsl/button_input.rb +0 -0
  238. /data/{lib → app/lib}/primer/forms/dsl/check_box_group_input.rb +0 -0
  239. /data/{lib → app/lib}/primer/forms/dsl/form_object.rb +0 -0
  240. /data/{lib → app/lib}/primer/forms/dsl/form_reference_input.rb +0 -0
  241. /data/{lib → app/lib}/primer/forms/dsl/hidden_input.rb +0 -0
  242. /data/{lib → app/lib}/primer/forms/dsl/input_group.rb +0 -0
  243. /data/{lib → app/lib}/primer/forms/dsl/input_methods.rb +0 -0
  244. /data/{lib → app/lib}/primer/forms/dsl/multi_input.rb +0 -0
  245. /data/{lib → app/lib}/primer/forms/dsl/radio_button_group_input.rb +0 -0
  246. /data/{lib → app/lib}/primer/forms/dsl/select_input.rb +0 -0
  247. /data/{lib → app/lib}/primer/forms/dsl/submit_button_input.rb +0 -0
  248. /data/{lib → app/lib}/primer/forms/dsl/text_area_input.rb +0 -0
  249. /data/{lib → app/lib}/primer/forms/dsl/text_field_input.rb +0 -0
  250. /data/{lib → app/lib}/primer/forms/dsl/toggle_switch_input.rb +0 -0
  251. /data/{lib → app/lib}/primer/forms/form_control.html.erb +0 -0
  252. /data/{lib → app/lib}/primer/forms/form_control.rb +0 -0
  253. /data/{lib → app/lib}/primer/forms/form_list.html.erb +0 -0
  254. /data/{lib → app/lib}/primer/forms/form_list.rb +0 -0
  255. /data/{lib → app/lib}/primer/forms/form_reference.html.erb +0 -0
  256. /data/{lib → app/lib}/primer/forms/form_reference.rb +0 -0
  257. /data/{lib → app/lib}/primer/forms/hidden_field.html.erb +0 -0
  258. /data/{lib → app/lib}/primer/forms/hidden_field.rb +0 -0
  259. /data/{lib → app/lib}/primer/forms/multi.html.erb +0 -0
  260. /data/{lib → app/lib}/primer/forms/multi.rb +0 -0
  261. /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.html.erb +0 -0
  262. /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.rb +0 -0
  263. /data/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
  264. /data/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
  265. /data/{lib → app/lib}/primer/forms/primer_multi_input.ts +0 -0
  266. /data/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
  267. /data/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
  268. /data/{lib → app/lib}/primer/forms/primer_text_field.ts +0 -0
  269. /data/{lib → app/lib}/primer/forms/radio_button.html.erb +0 -0
  270. /data/{lib → app/lib}/primer/forms/radio_button.rb +0 -0
  271. /data/{lib → app/lib}/primer/forms/select.rb +0 -0
  272. /data/{lib → app/lib}/primer/forms/separator.html.erb +0 -0
  273. /data/{lib → app/lib}/primer/forms/separator.rb +0 -0
  274. /data/{lib → app/lib}/primer/forms/spacing_wrapper.html.erb +0 -0
  275. /data/{lib → app/lib}/primer/forms/spacing_wrapper.rb +0 -0
  276. /data/{lib → app/lib}/primer/forms/submit_button.html.erb +0 -0
  277. /data/{lib → app/lib}/primer/forms/submit_button.rb +0 -0
  278. /data/{lib → app/lib}/primer/forms/text_area.html.erb +0 -0
  279. /data/{lib → app/lib}/primer/forms/text_area.rb +0 -0
  280. /data/{lib → app/lib}/primer/forms/text_field.html.erb +0 -0
  281. /data/{lib → app/lib}/primer/forms/text_field.rb +0 -0
  282. /data/{lib → app/lib}/primer/forms/toggle_switch.html.erb +0 -0
  283. /data/{lib → app/lib}/primer/forms/toggle_switch.rb +0 -0
  284. /data/{lib → app/lib}/primer/forms/toggle_switch_form.rb +0 -0
  285. /data/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
  286. /data/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
  287. /data/{lib → app/lib}/primer/forms/toggle_switch_input.ts +0 -0
  288. /data/{lib → app/lib}/primer/forms/utils.rb +0 -0
  289. /data/{lib → app/lib}/primer/forms/validation_message.html.erb +0 -0
  290. /data/{lib → app/lib}/primer/forms/validation_message.rb +0 -0
  291. /data/{lib → app/lib}/primer/forms.rb +0 -0
@@ -0,0 +1,297 @@
1
+ .Stack {
2
+ display: flex;
3
+ flex-flow: column;
4
+ align-items: stretch;
5
+ align-content: flex-start;
6
+ gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
7
+
8
+ /* non-responsive values */
9
+
10
+ &[data-padding='none'],
11
+ &[data-padding-narrow='none'] {
12
+ padding: 0;
13
+ }
14
+
15
+ &[data-padding='condensed'],
16
+ &[data-padding-narrow='condensed'] {
17
+ /* stylelint-disable-next-line primer/spacing */
18
+ padding: var(--stack-padding-condensed, 8px);
19
+ }
20
+
21
+ &[data-padding='normal'],
22
+ &[data-padding-narrow='normal'] {
23
+ /* stylelint-disable-next-line primer/spacing */
24
+ padding: var(--stack-padding-normal, 16px);
25
+ }
26
+
27
+ &[data-padding='spacious'],
28
+ &[data-padding-narrow='spacious'] {
29
+ /* stylelint-disable-next-line primer/spacing */
30
+ padding: var(--stack-padding-spacious, 24px);
31
+ }
32
+
33
+ &[data-direction='horizontal'],
34
+ &[data-direction-narrow='horizontal'] {
35
+ flex-flow: row;
36
+ }
37
+
38
+ &[data-direction='vertical'],
39
+ &[data-direction-narrow='vertical'] {
40
+ flex-flow: column;
41
+ }
42
+
43
+ &[data-gap='none'],
44
+ &[data-gap-narrow='none'] {
45
+ --stack-gap: var(--stack-gap-none, 0);
46
+ }
47
+
48
+ &[data-gap='condensed'],
49
+ &[data-gap-narrow='condensed'] {
50
+ --stack-gap: var(--stack-gap-condensed, 0.5rem);
51
+ }
52
+
53
+ &[data-gap='normal'],
54
+ &[data-gap-narrow='normal'] {
55
+ --stack-gap: var(--stack-gap-normal, 1rem);
56
+ }
57
+
58
+ &[data-gap='spacious'],
59
+ &[data-gap-narrow='spacious'] {
60
+ --stack-gap: var(--stack-gap-spacious, 1.5rem);
61
+ }
62
+
63
+ &[data-align='start'],
64
+ &[data-align-narrow='start'] {
65
+ align-items: flex-start;
66
+ }
67
+
68
+ &[data-align='center'],
69
+ &[data-align-narrow='center'] {
70
+ align-items: center;
71
+ }
72
+
73
+ &[data-align='end'],
74
+ &[data-align-narrow='end'] {
75
+ align-items: flex-end;
76
+ }
77
+
78
+ &[data-align='baseline'],
79
+ &[data-align-narrow='baseline'] {
80
+ align-items: baseline;
81
+ }
82
+
83
+ &[data-justify='start'],
84
+ &[data-justify-narrow='start'] {
85
+ justify-content: flex-start;
86
+ }
87
+
88
+ &[data-justify='center'],
89
+ &[data-justify-narrow='center'] {
90
+ justify-content: center;
91
+ }
92
+
93
+ &[data-justify='end'],
94
+ &[data-justify-narrow='end'] {
95
+ justify-content: flex-end;
96
+ }
97
+
98
+ &[data-justify='space-between'],
99
+ &[data-justify-narrow='space-between'] {
100
+ justify-content: space-between;
101
+ }
102
+
103
+ &[data-justify='space-evenly'],
104
+ &[data-justify-narrow='space-evenly'] {
105
+ justify-content: space-evenly;
106
+ }
107
+
108
+ &[data-wrap='wrap'],
109
+ &[data-wrap-narrow='wrap'] {
110
+ flex-wrap: wrap;
111
+ }
112
+
113
+ &[data-wrap='nowrap'],
114
+ &[data-wrap-narrow='nowrap'] {
115
+ flex-wrap: nowrap;
116
+ }
117
+
118
+ /* @custom-media --veiwportRange-regular */
119
+ @media (min-width: 48rem) {
120
+ &[data-padding-regular='none'] {
121
+ padding: 0;
122
+ }
123
+
124
+ &[data-padding-regular='condensed'] {
125
+ /* stylelint-disable-next-line primer/spacing */
126
+ padding: var(--stack-padding-condensed, 8px);
127
+ }
128
+
129
+ &[data-padding-regular='normal'] {
130
+ /* stylelint-disable-next-line primer/spacing */
131
+ padding: var(--stack-padding-normal, 16px);
132
+ }
133
+
134
+ &[data-padding-regular='spacious'] {
135
+ /* stylelint-disable-next-line primer/spacing */
136
+ padding: var(--stack-padding-spacious, 24px);
137
+ }
138
+
139
+ &[data-direction-regular='horizontal'] {
140
+ flex-flow: row;
141
+ }
142
+
143
+ &[data-direction-regular='vertical'] {
144
+ flex-flow: column;
145
+ }
146
+
147
+ &[data-gap-regular='none'] {
148
+ --stack-gap: var(--stack-gap-none, 0);
149
+ }
150
+
151
+ &[data-gap-regular='condensed'] {
152
+ --stack-gap: var(--stack-gap-condensed, 0.5rem);
153
+ }
154
+
155
+ &[data-gap-regular='normal'] {
156
+ --stack-gap: var(--stack-gap-normal, 1rem);
157
+ }
158
+
159
+ &[data-gap-regular='spacious'] {
160
+ --stack-gap: var(--stack-gap-spacious, 1.5rem);
161
+ }
162
+
163
+ &[data-align-regular='start'] {
164
+ align-items: flex-start;
165
+ }
166
+
167
+ &[data-align-regular='center'] {
168
+ align-items: center;
169
+ }
170
+
171
+ &[data-align-regular='end'] {
172
+ align-items: flex-end;
173
+ }
174
+
175
+ &[data-align-regular='baseline'] {
176
+ align-items: baseline;
177
+ }
178
+
179
+ &[data-justify-regular='start'] {
180
+ justify-content: flex-start;
181
+ }
182
+
183
+ &[data-justify-regular='center'] {
184
+ justify-content: center;
185
+ }
186
+
187
+ &[data-justify-regular='end'] {
188
+ justify-content: flex-end;
189
+ }
190
+
191
+ &[data-justify-regular='space-between'] {
192
+ justify-content: space-between;
193
+ }
194
+
195
+ &[data-justify-regular='space-evenly'] {
196
+ justify-content: space-evenly;
197
+ }
198
+
199
+ &[data-wrap-regular='wrap'] {
200
+ flex-wrap: wrap;
201
+ }
202
+
203
+ &[data-wrap-regular='nowrap'] {
204
+ flex-wrap: nowrap;
205
+ }
206
+ }
207
+
208
+ /* @custom-media --viewportRange-wide */
209
+ @media (min-width: 87.5rem) {
210
+ &[data-padding-wide='none'] {
211
+ padding: 0;
212
+ }
213
+
214
+ &[data-padding-wide='condensed'] {
215
+ /* stylelint-disable-next-line primer/spacing */
216
+ padding: var(--stack-padding-condensed, 8px);
217
+ }
218
+
219
+ &[data-padding-wide='normal'] {
220
+ /* stylelint-disable-next-line primer/spacing */
221
+ padding: var(--stack-padding-normal, 16px);
222
+ }
223
+
224
+ &[data-padding-wide='spacious'] {
225
+ /* stylelint-disable-next-line primer/spacing */
226
+ padding: var(--stack-padding-spacious, 24px);
227
+ }
228
+
229
+ &[data-direction-wide='horizontal'] {
230
+ flex-flow: row;
231
+ }
232
+
233
+ &[data-direction-wide='vertical'] {
234
+ flex-flow: column;
235
+ }
236
+
237
+ &[data-gap-wide='none'] {
238
+ --stack-gap: var(--stack-gap-none, 0);
239
+ }
240
+
241
+ &[data-gap-wide='condensed'] {
242
+ --stack-gap: var(--stack-gap-condensed, 0.5rem);
243
+ }
244
+
245
+ &[data-gap-wide='normal'] {
246
+ --stack-gap: var(--stack-gap-normal, 1rem);
247
+ }
248
+
249
+ &[data-gap-wide='spacious'] {
250
+ --stack-gap: var(--stack-gap-spacious, 1.5rem);
251
+ }
252
+
253
+ &[data-align-wide='start'] {
254
+ align-items: flex-start;
255
+ }
256
+
257
+ &[data-align-wide='center'] {
258
+ align-items: center;
259
+ }
260
+
261
+ &[data-align-wide='end'] {
262
+ align-items: flex-end;
263
+ }
264
+
265
+ &[data-align-wide='baseline'] {
266
+ align-items: baseline;
267
+ }
268
+
269
+ &[data-justify-wide='start'] {
270
+ justify-content: flex-start;
271
+ }
272
+
273
+ &[data-justify-wide='center'] {
274
+ justify-content: center;
275
+ }
276
+
277
+ &[data-justify-wide='end'] {
278
+ justify-content: flex-end;
279
+ }
280
+
281
+ &[data-justify-wide='space-between'] {
282
+ justify-content: space-between;
283
+ }
284
+
285
+ &[data-justify-wide='space-evenly'] {
286
+ justify-content: space-evenly;
287
+ }
288
+
289
+ &[data-wrap-wide='wrap'] {
290
+ flex-wrap: wrap;
291
+ }
292
+
293
+ &[data-wrap-wide='nowrap'] {
294
+ flex-wrap: nowrap;
295
+ }
296
+ }
297
+ }
@@ -0,0 +1,185 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # Stack is a layout component that creates responsive horizontal and vertical flows.
6
+ class Stack < Primer::Component
7
+ DEFAULT_TAG = :div
8
+
9
+ # Stack's justify argument. Used internally.
10
+ class JustifyArg < Primer::ResponsiveArg
11
+ attr_reader :values
12
+ DEFAULT = :start
13
+ MAPPING = {
14
+ DEFAULT => "start",
15
+ :center => "center",
16
+ :end => "end",
17
+ :space_between => "space-between",
18
+ :space_evenly => "space-evenly"
19
+ }.freeze
20
+ OPTIONS = [nil, *MAPPING.keys.freeze]
21
+
22
+ def initialize(values)
23
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT) do |value|
24
+ MAPPING[value]
25
+ end
26
+ end
27
+
28
+ def self.arg_name
29
+ :justify
30
+ end
31
+ end
32
+
33
+ # Stack's direction argument. Used internally.
34
+ class DirectionArg < Primer::ResponsiveArg
35
+ attr_reader :values
36
+ DEFAULT = :vertical
37
+ OPTIONS = [
38
+ nil,
39
+ DEFAULT,
40
+ :horizontal
41
+ ].freeze
42
+
43
+ def initialize(values)
44
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
45
+ end
46
+
47
+ def self.arg_name
48
+ :direction
49
+ end
50
+ end
51
+
52
+ # Stack's align argument. Used internally.
53
+ class AlignArg < Primer::ResponsiveArg
54
+ attr_reader :values
55
+ DEFAULT = :stretch
56
+ OPTIONS = [
57
+ nil,
58
+ DEFAULT,
59
+ :start,
60
+ :center,
61
+ :end,
62
+ :baseline
63
+ ].freeze
64
+
65
+ def initialize(values)
66
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
67
+ end
68
+
69
+ def self.arg_name
70
+ :align
71
+ end
72
+ end
73
+
74
+ # Stack's wrap argument. Used internally.
75
+ class WrapArg < Primer::ResponsiveArg
76
+ attr_reader :values
77
+ DEFAULT = :nowrap
78
+ OPTIONS = [
79
+ nil,
80
+ DEFAULT,
81
+ :wrap
82
+ ].freeze
83
+
84
+ def initialize(values)
85
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
86
+ end
87
+
88
+ def self.arg_name
89
+ :wrap
90
+ end
91
+ end
92
+
93
+ # Stack's padding argument. Used internally.
94
+ class PaddingArg < Primer::ResponsiveArg
95
+ attr_reader :values
96
+ DEFAULT = :none
97
+ OPTIONS = [
98
+ nil,
99
+ DEFAULT,
100
+ :condensed,
101
+ :normal,
102
+ :spacious
103
+ ].freeze
104
+
105
+ def initialize(values)
106
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
107
+ end
108
+
109
+ def self.arg_name
110
+ :padding
111
+ end
112
+ end
113
+
114
+ # Stack's gap argument. Used internally.
115
+ class GapArg < Primer::ResponsiveArg
116
+ attr_reader :values
117
+ DEFAULT = nil
118
+ OPTIONS = [
119
+ DEFAULT,
120
+ :condensed,
121
+ :normal,
122
+ :spacious
123
+ ].freeze
124
+
125
+ def initialize(values)
126
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
127
+ end
128
+
129
+ def self.arg_name
130
+ :gap
131
+ end
132
+ end
133
+
134
+ ARG_CLASSES = [
135
+ JustifyArg,
136
+ DirectionArg,
137
+ AlignArg,
138
+ WrapArg,
139
+ PaddingArg,
140
+ GapArg
141
+ ].freeze
142
+
143
+
144
+ # @param tag [Symbol] Customize the element type of the rendered container.
145
+ # @param gap [Symbol] Specify the gap between children elements in the stack. <%= one_of(Primer::Alpha::Stack::GapArg::OPTIONS) %>
146
+ # @param direction [Symbol] Specify the direction for the stack container. <%= one_of(Primer::Alpha::Stack::DirectionArg::OPTIONS) %>
147
+ # @param align [Symbol] Specify the alignment between items in the cross-axis of the direction. <%= one_of(Primer::Alpha::Stack::AlignArg::OPTIONS) %>
148
+ # @param wrap [Symbol] Specify whether items are forced onto one line or can wrap onto multiple lines. <%= one_of(Primer::Alpha::Stack::WrapArg::OPTIONS) %>
149
+ # @param justify [Symbol] Specify how items will be distributed in the stacking direction. <%= one_of(Primer::Alpha::Stack::JustifyArg::OPTIONS) %>
150
+ # @param padding [Symbol] Specify the padding of the stack container. <%= one_of(Primer::Alpha::Stack::PaddingArg::OPTIONS) %>
151
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
152
+ def initialize(
153
+ tag: DEFAULT_TAG,
154
+ justify: JustifyArg::DEFAULT,
155
+ gap: GapArg::DEFAULT,
156
+ direction: DirectionArg::DEFAULT,
157
+ align: AlignArg::DEFAULT,
158
+ wrap: WrapArg::DEFAULT,
159
+ padding: PaddingArg::DEFAULT,
160
+ **system_arguments
161
+ )
162
+ @system_arguments = system_arguments
163
+
164
+ @system_arguments[:tag] = tag
165
+ @system_arguments[:classes] = class_names(
166
+ @system_arguments.delete(:classes),
167
+ "Stack"
168
+ )
169
+
170
+ @system_arguments[:data] = merge_data(
171
+ @system_arguments, {
172
+ data: {
173
+ **JustifyArg.for(justify).to_data_attributes,
174
+ **GapArg.for(gap).to_data_attributes,
175
+ **DirectionArg.for(direction).to_data_attributes,
176
+ **AlignArg.for(align).to_data_attributes,
177
+ **WrapArg.for(wrap).to_data_attributes,
178
+ **PaddingArg.for(padding).to_data_attributes,
179
+ }
180
+ }
181
+ )
182
+ end
183
+ end
184
+ end
185
+ end
@@ -0,0 +1 @@
1
+ .StackItem{flex:0 1 auto;min-inline-size:0}.StackItem[data-grow-narrow=true],.StackItem[data-grow=true]{flex-grow:1}@media (min-width:48rem){.StackItem[data-grow-regular=true]{flex-grow:1}.StackItem[data-grow-regular=false]{flex-grow:0}}@media (min-width:87.5rem){.StackItem[data-grow-wide=true]{flex-grow:1}.StackItem[data-grow-wide=false]{flex-grow:0}}
@@ -0,0 +1,12 @@
1
+ {
2
+ "name": "alpha/stack_item",
3
+ "selectors": [
4
+ ".StackItem",
5
+ ".StackItem[data-grow-narrow=true]",
6
+ ".StackItem[data-grow=true]",
7
+ ".StackItem[data-grow-regular=true]",
8
+ ".StackItem[data-grow-regular=false]",
9
+ ".StackItem[data-grow-wide=true]",
10
+ ".StackItem[data-grow-wide=false]"
11
+ ]
12
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["stack_item.pcss"],"names":[],"mappings":"AAAA,WACE,aAAc,CACd,iBA4BF,CA1BE,6DAEE,WACF,CAGA,yBACE,mCACE,WACF,CAEA,oCACE,WACF,CACF,CAGA,2BACE,gCACE,WACF,CAEA,iCACE,WACF,CACF","file":"stack_item.css","sourcesContent":[".StackItem {\n flex: 0 1 auto;\n min-inline-size: 0;\n\n &[data-grow='true'],\n &[data-grow-narrow='true'] {\n flex-grow: 1;\n }\n\n /* @custom-media --veiwportRange-regular */\n @media (min-width: 48rem) {\n &[data-grow-regular='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-regular='false'] {\n flex-grow: 0;\n }\n }\n\n /* @custom-media --viewportRange-wide */\n @media (min-width: 87.5rem) {\n &[data-grow-wide='true'] {\n flex-grow: 1;\n }\n\n &[data-grow-wide='false'] {\n flex-grow: 0;\n }\n }\n}\n"]}
@@ -0,0 +1,3 @@
1
+ <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
2
+ <%= content %>
3
+ <% end %>
@@ -0,0 +1,31 @@
1
+ .StackItem {
2
+ flex: 0 1 auto;
3
+ min-inline-size: 0;
4
+
5
+ &[data-grow='true'],
6
+ &[data-grow-narrow='true'] {
7
+ flex-grow: 1;
8
+ }
9
+
10
+ /* @custom-media --veiwportRange-regular */
11
+ @media (min-width: 48rem) {
12
+ &[data-grow-regular='true'] {
13
+ flex-grow: 1;
14
+ }
15
+
16
+ &[data-grow-regular='false'] {
17
+ flex-grow: 0;
18
+ }
19
+ }
20
+
21
+ /* @custom-media --viewportRange-wide */
22
+ @media (min-width: 87.5rem) {
23
+ &[data-grow-wide='true'] {
24
+ flex-grow: 1;
25
+ }
26
+
27
+ &[data-grow-wide='false'] {
28
+ flex-grow: 0;
29
+ }
30
+ }
31
+ }
@@ -0,0 +1,54 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # StackItem is a layout component designed to be used as the child of a Stack.
6
+ class StackItem < Primer::Component
7
+ DEFAULT_TAG = :div
8
+
9
+ # StackItem's grow argument. Used internally.
10
+ class GrowArg < Primer::ResponsiveArg
11
+ attr_reader :values
12
+ DEFAULT = false
13
+ OPTIONS = [
14
+ nil,
15
+ DEFAULT,
16
+ true
17
+ ].freeze
18
+
19
+ def initialize(values)
20
+ @values = fetch_or_fallback_all(OPTIONS, values, DEFAULT)
21
+ end
22
+
23
+ def self.arg_name
24
+ :grow
25
+ end
26
+ end
27
+
28
+ ARG_CLASSES = [GrowArg].freeze
29
+
30
+ # @param tag [Symbol] Customize the element type of the rendered container.
31
+ # @param grow [Boolean] Allow item to keep size or expand to fill the available space.
32
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
33
+ def initialize(tag: DEFAULT_TAG, grow: false, **system_arguments)
34
+ @tag = tag
35
+ @grow = grow
36
+ @system_arguments = system_arguments
37
+ @system_arguments[:tag] = tag
38
+
39
+ @system_arguments[:classes] = class_names(
40
+ @system_arguments.delete(:classes),
41
+ "StackItem"
42
+ )
43
+
44
+ @system_arguments[:data] = merge_data(
45
+ @system_arguments, {
46
+ data: {
47
+ **GrowArg.for(grow).to_data_attributes
48
+ }
49
+ }
50
+ )
51
+ end
52
+ end
53
+ end
54
+ end
@@ -1 +1 @@
1
- .tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
1
+ .tabnav{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);margin-bottom:var(--stack-gap-normal);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin)*-1);overflow:hidden}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin) solid #0000;border-bottom:0;color:var(--fgColor-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium);line-height:23px;padding:var(--base-size-8) var(--control-medium-paddingInline-spacious);-webkit-text-decoration:none;text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0;color:var(--fgColor-default)}:is(.tabnav-tab.selected,.tabnav-tab[aria-selected=true],.tabnav-tab[aria-current]:not([aria-current=false])) .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default);-webkit-text-decoration:none;text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium) var(--borderRadius-medium) 0 0!important;outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap)}.tabnav-extra{color:var(--fgColor-muted);display:inline-block;font-size:var(--text-body-size-small);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:var(--base-size-2)}a.tabnav-extra:hover{color:var(--fgColor-accent);-webkit-text-decoration:none;text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed)}
@@ -1 +1 @@
1
- {"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,sEAAuE,CADvE,qCAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,8CAAiD,CACjD,eACF,CAEA,YAQE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,sCAAuC,CACvC,gBAAiB,CAFjB,uEAAwE,CAIxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAMF,CAHA,qBACE,qCAEF,CAEA,qBAEE,aAAc,CADd,oCAEF,CAQF,cAKE,0BAA2B,CAJ3B,oBAAqB,CAGrB,qCAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YACE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: hidden;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n line-height: 23px;\n color: var(--fgColor-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default); /* cover bottom border */\n border-color: var(--borderColor-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--fgColor-muted);\n }\n\n & .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n & .Counter {\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
1
+ {"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAIE,sEAAuE,CADvE,qCAAsC,CAFtC,YAIF,CAEA,aACE,YAAa,CAEb,8CAAiD,CACjD,eACF,CAEA,YAUE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAP3B,oBAAqB,CACrB,aAAc,CAGd,sCAAuC,CAEvC,gBAAiB,CAHjB,uEAAwE,CAKxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CA0CF,CAxCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAOF,CAJA,qBAEE,qCAEF,CAEA,qBAGE,aAAc,CADd,oCAEF,CAQF,cAOE,0BAA2B,CAN3B,oBAAqB,CAKrB,qCAAsC,CADtC,gBAAiB,CAFjB,gBASF,CAHE,uBACE,+BACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YAEE,oDACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n display: flex;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: hidden;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: 23px;\n color: var(--fgColor-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default); /* cover bottom border */\n border-color: var(--borderColor-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--fgColor-muted);\n }\n\n & .octicon {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n & .Counter {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n /* stylelint-disable-next-line primer/spacing */\n padding-top: 10px;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n\n & > .octicon {\n margin-right: var(--base-size-2);\n }\n}\n\n/* When tabnav-extra are anchors */\n/* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */\na.tabnav-extra:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
@@ -3,12 +3,14 @@
3
3
  /* Outer wrapper */
4
4
  .tabnav {
5
5
  margin-top: 0;
6
+ /* stylelint-disable-next-line primer/spacing */
6
7
  margin-bottom: var(--stack-gap-normal);
7
8
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
8
9
  }
9
10
 
10
11
  .tabnav-tabs {
11
12
  display: flex;
13
+ /* stylelint-disable-next-line primer/spacing */
12
14
  margin-bottom: calc(var(--borderWidth-thin) * -1);
13
15
  overflow: hidden;
14
16
  }
@@ -16,8 +18,10 @@
16
18
  .tabnav-tab {
17
19
  display: inline-block;
18
20
  flex-shrink: 0;
21
+ /* stylelint-disable-next-line primer/spacing */
19
22
  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
20
23
  font-size: var(--text-body-size-medium);
24
+ /* stylelint-disable-next-line primer/typography */
21
25
  line-height: 23px;
22
26
  color: var(--fgColor-muted);
23
27
  text-decoration: none;
@@ -56,11 +60,13 @@
56
60
  }
57
61
 
58
62
  & .octicon {
63
+ /* stylelint-disable-next-line primer/spacing */
59
64
  margin-right: var(--control-small-gap);
60
65
  color: var(--fgColor-muted);
61
66
  }
62
67
 
63
68
  & .Counter {
69
+ /* stylelint-disable-next-line primer/spacing */
64
70
  margin-left: var(--control-small-gap);
65
71
  color: inherit;
66
72
  }
@@ -73,18 +79,20 @@
73
79
 
74
80
  .tabnav-extra {
75
81
  display: inline-block;
82
+ /* stylelint-disable-next-line primer/spacing */
76
83
  padding-top: 10px;
84
+ /* stylelint-disable-next-line primer/spacing */
77
85
  margin-left: 10px;
78
86
  font-size: var(--text-body-size-small);
79
87
  color: var(--fgColor-muted);
80
88
 
81
89
  & > .octicon {
82
- margin-right: 2px;
90
+ margin-right: var(--base-size-2);
83
91
  }
84
92
  }
85
93
 
86
- /* When tabnav-extra are anchors
87
- ** stylelint-disable-next-line selector-no-qualifying-type */
94
+ /* When tabnav-extra are anchors */
95
+ /* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
88
96
  a.tabnav-extra:hover {
89
97
  color: var(--fgColor-accent);
90
98
  text-decoration: none;
@@ -96,5 +104,6 @@ a.tabnav-extra:hover {
96
104
  ** the buttons to be floated or inline-block. */
97
105
 
98
106
  .tabnav-btn {
107
+ /* stylelint-disable-next-line primer/spacing */
99
108
  margin-left: var(--controlStack-medium-gap-condensed);
100
109
  }