openproject-primer_view_components 0.48.2 → 0.49.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +45 -0
- data/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -4
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar.css.map +1 -1
- data/app/components/primer/alpha/action_bar.pcss +7 -4
- data/app/components/primer/alpha/action_bar_element.js +0 -3
- data/app/components/primer/alpha/action_bar_element.ts +0 -4
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +25 -8
- data/app/components/primer/alpha/action_list.rb +1 -1
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +7 -7
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +6 -2
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.pcss +11 -4
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +2 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +39 -13
- data/app/components/primer/alpha/dialog.rb +5 -1
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +45 -11
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +3 -2
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +7 -0
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +3 -3
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +15 -8
- data/app/components/primer/alpha/select_panel.html.erb +8 -5
- data/app/components/primer/alpha/select_panel.rb +26 -1
- data/app/components/primer/alpha/select_panel_element.js +9 -3
- data/app/components/primer/alpha/select_panel_element.ts +10 -4
- data/app/components/primer/alpha/stack.css +1 -0
- data/app/components/primer/alpha/stack.css.json +90 -0
- data/app/components/primer/alpha/stack.css.map +1 -0
- data/app/components/primer/alpha/stack.html.erb +3 -0
- data/app/components/primer/alpha/stack.pcss +297 -0
- data/app/components/primer/alpha/stack.rb +185 -0
- data/app/components/primer/alpha/stack_item.css +1 -0
- data/app/components/primer/alpha/stack_item.css.json +12 -0
- data/app/components/primer/alpha/stack_item.css.map +1 -0
- data/app/components/primer/alpha/stack_item.html.erb +3 -0
- data/app/components/primer/alpha/stack_item.pcss +31 -0
- data/app/components/primer/alpha/stack_item.rb +54 -0
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +12 -3
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +29 -22
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +6 -3
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +8 -2
- data/app/components/primer/base_component.rb +1 -1
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.pcss +4 -1
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +9 -2
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +24 -3
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +8 -4
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.pcss +5 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +31 -27
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/button_group.pcss +1 -0
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +3 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +7 -4
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +4 -0
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +15 -7
- data/app/components/primer/beta/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/progress_bar.pcss +2 -2
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +6 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +3 -0
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +11 -0
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.pcss +1 -0
- data/app/components/primer/dialog_helper.js +0 -1
- data/app/components/primer/dialog_helper.ts +0 -1
- data/app/components/primer/primer.d.ts +3 -4
- data/app/components/primer/primer.js +3 -4
- data/app/components/primer/primer.pcss +6 -4
- data/app/components/primer/primer.ts +3 -4
- data/app/components/primer/responsive_arg.rb +66 -0
- data/app/forms/caption_template_form/places_bellevue_caption.html.erb +1 -0
- data/app/forms/caption_template_form/places_lopez_caption.html.erb +1 -0
- data/app/forms/caption_template_form/places_seattle_caption.html.erb +1 -0
- data/app/forms/caption_template_form.rb +6 -0
- data/app/forms/check_box_group_form.rb +1 -1
- data/app/forms/radio_button_group_form.rb +5 -1
- data/app/lib/primer/attributes_helper.rb +1 -1
- data/{lib → app/lib}/primer/forms/base_component.rb +0 -8
- data/{lib → app/lib}/primer/forms/button.rb +5 -2
- data/{lib → app/lib}/primer/forms/check_box_group.html.erb +3 -3
- data/{lib → app/lib}/primer/forms/check_box_group.rb +1 -1
- data/{lib → app/lib}/primer/forms/dsl/check_box_input.rb +4 -8
- data/{lib → app/lib}/primer/forms/dsl/input.rb +13 -1
- data/{lib → app/lib}/primer/forms/dsl/radio_button_input.rb +4 -0
- data/{lib → app/lib}/primer/forms/group.html.erb +1 -1
- data/{lib → app/lib}/primer/forms/group.rb +5 -0
- data/{lib → app/lib}/primer/forms/radio_button_group.html.erb +3 -3
- data/{lib → app/lib}/primer/forms/radio_button_group.rb +1 -1
- data/{lib → app/lib}/primer/forms/select.html.erb +0 -1
- data/lib/primer/view_components/linters/details_menu_migration.rb +3 -2
- data/lib/primer/view_components/version.rb +2 -2
- data/lib/primer/yard/component_manifest.rb +0 -1
- data/previews/primer/alpha/action_bar_preview/inline.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/custom_header.html.erb +3 -1
- data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +4 -4
- data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +11 -2
- data/previews/primer/alpha/dialog_preview/with_footer.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/with_form.html.erb +2 -2
- data/previews/primer/alpha/dialog_preview/with_text_input.html.erb +1 -1
- data/previews/primer/alpha/dialog_preview.rb +4 -2
- data/previews/primer/alpha/overlay_preview/in_a_sticky_container.html.erb +1 -1
- data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/custom_loading_description.html.erb +23 -0
- data/previews/primer/alpha/select_panel_preview/custom_loading_label.html.erb +21 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +4 -2
- data/previews/primer/alpha/select_panel_preview/scroll_container.html.erb +49 -0
- data/previews/primer/alpha/select_panel_preview.rb +40 -2
- data/previews/primer/alpha/stack_item_preview/default.html.erb +5 -0
- data/previews/primer/alpha/stack_item_preview/playground.html.erb +11 -0
- data/previews/primer/alpha/stack_item_preview.rb +40 -0
- data/previews/primer/alpha/stack_preview/playground.html.erb +5 -0
- data/previews/primer/alpha/stack_preview.rb +88 -0
- data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb +1 -2
- data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +2 -2
- data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +1 -1
- data/previews/primer/alpha/underline_nav_preview/default.html.erb +1 -1
- data/previews/primer/alpha/underline_nav_preview/playground.html.erb +1 -1
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +18 -18
- data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb +3 -1
- data/previews/primer/beta/button_preview/summary_as_button.html.erb +0 -1
- data/previews/primer/beta/subhead_preview/actions.html.erb +0 -1
- data/previews/primer/open_project/feedback_dialog_preview/additional_content.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/custom_footer.html.erb +1 -1
- data/previews/primer/open_project/feedback_dialog_preview/playground.html.erb +2 -2
- data/previews/primer/open_project/page_header_preview/actions.html.erb +1 -1
- data/previews/primer/open_project/page_header_preview/playground.html.erb +2 -2
- data/previews/primer/open_project/sub_header_preview/action_menu_buttons.html.erb +1 -1
- data/static/arguments.json +112 -30
- data/static/audited_at.json +2 -1
- data/static/classes.json +6 -0
- data/static/constants.json +172 -9
- data/static/info_arch.json +248 -98
- data/static/previews.json +107 -47
- data/static/statuses.json +2 -1
- metadata +137 -120
- data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +0 -1
- data/app/components/primer/alpha/image_crop.d.ts +0 -1
- data/app/components/primer/alpha/image_crop.html.erb +0 -12
- data/app/components/primer/alpha/image_crop.js +0 -1
- data/app/components/primer/alpha/image_crop.rb +0 -28
- data/app/components/primer/alpha/image_crop.ts +0 -1
- data/previews/primer/alpha/image_crop_preview.rb +0 -31
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/open_project/page_header_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/open_project/sub_header_element.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/open_project/zen_mode_button.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
- /data/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/action_menu.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/action_menu.rb +0 -0
- /data/{lib → app/lib}/primer/forms/acts_as_component.rb +0 -0
- /data/{lib → app/lib}/primer/forms/auto_complete.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/auto_complete.rb +0 -0
- /data/{lib → app/lib}/primer/forms/base.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/base.rb +0 -0
- /data/{lib → app/lib}/primer/forms/buffer_rewriter.rb +0 -0
- /data/{lib → app/lib}/primer/forms/builder.rb +0 -0
- /data/{lib → app/lib}/primer/forms/button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/caption.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/caption.rb +0 -0
- /data/{lib → app/lib}/primer/forms/check_box.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/check_box.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/action_menu_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/auto_complete_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/button_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/check_box_group_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/form_object.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/form_reference_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/hidden_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/input_group.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/input_methods.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/multi_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/radio_button_group_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/select_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/submit_button_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/text_area_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/text_field_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/dsl/toggle_switch_input.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_control.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_control.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_list.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_list.rb +0 -0
- /data/{lib → app/lib}/primer/forms/form_reference.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/form_reference.rb +0 -0
- /data/{lib → app/lib}/primer/forms/hidden_field.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/hidden_field.rb +0 -0
- /data/{lib → app/lib}/primer/forms/multi.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/multi.rb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_base_component_wrapper.rb +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
- /data/{lib → app/lib}/primer/forms/primer_multi_input.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
- /data/{lib → app/lib}/primer/forms/primer_text_field.ts +0 -0
- /data/{lib → app/lib}/primer/forms/radio_button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/radio_button.rb +0 -0
- /data/{lib → app/lib}/primer/forms/select.rb +0 -0
- /data/{lib → app/lib}/primer/forms/separator.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/separator.rb +0 -0
- /data/{lib → app/lib}/primer/forms/spacing_wrapper.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/spacing_wrapper.rb +0 -0
- /data/{lib → app/lib}/primer/forms/submit_button.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/submit_button.rb +0 -0
- /data/{lib → app/lib}/primer/forms/text_area.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/text_area.rb +0 -0
- /data/{lib → app/lib}/primer/forms/text_field.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/text_field.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_form.rb +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
- /data/{lib → app/lib}/primer/forms/toggle_switch_input.ts +0 -0
- /data/{lib → app/lib}/primer/forms/utils.rb +0 -0
- /data/{lib → app/lib}/primer/forms/validation_message.html.erb +0 -0
- /data/{lib → app/lib}/primer/forms/validation_message.rb +0 -0
- /data/{lib → app/lib}/primer/forms.rb +0 -0
data/static/info_arch.json
CHANGED
@@ -250,7 +250,7 @@
|
|
250
250
|
"name": "aria_selection_variant",
|
251
251
|
"type": "Symbol",
|
252
252
|
"default": "`:checked`",
|
253
|
-
"description": "Specifies which aria selection to use.
|
253
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
254
254
|
},
|
255
255
|
{
|
256
256
|
"name": "form_arguments",
|
@@ -2102,7 +2102,7 @@
|
|
2102
2102
|
"name": "aria_selection_variant",
|
2103
2103
|
"type": "Symbol",
|
2104
2104
|
"default": "`:checked`",
|
2105
|
-
"description": "Specifies which aria selection to use.
|
2105
|
+
"description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
|
2106
2106
|
},
|
2107
2107
|
{
|
2108
2108
|
"name": "form_arguments",
|
@@ -3306,6 +3306,12 @@
|
|
3306
3306
|
"default": "`false`",
|
3307
3307
|
"description": "If true will hide the heading title, while still making it available to Screen Readers."
|
3308
3308
|
},
|
3309
|
+
{
|
3310
|
+
"name": "disable_scroll",
|
3311
|
+
"type": "Boolean",
|
3312
|
+
"default": "`true`",
|
3313
|
+
"description": "When true, disables scrolling the page when the dialog is open."
|
3314
|
+
},
|
3309
3315
|
{
|
3310
3316
|
"name": "system_arguments",
|
3311
3317
|
"type": "Hash",
|
@@ -4614,101 +4620,6 @@
|
|
4614
4620
|
|
4615
4621
|
]
|
4616
4622
|
},
|
4617
|
-
{
|
4618
|
-
"fully_qualified_name": "Primer::Alpha::ImageCrop",
|
4619
|
-
"description": "A client-side mechanism to crop images.",
|
4620
|
-
"accessibility_docs": null,
|
4621
|
-
"is_form_component": false,
|
4622
|
-
"is_published": true,
|
4623
|
-
"requires_js": true,
|
4624
|
-
"component": "ImageCrop",
|
4625
|
-
"status": "alpha",
|
4626
|
-
"a11y_reviewed": false,
|
4627
|
-
"short_name": "ImageCrop",
|
4628
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
|
4629
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
|
4630
|
-
"parameters": [
|
4631
|
-
{
|
4632
|
-
"name": "src",
|
4633
|
-
"type": "String",
|
4634
|
-
"default": "N/A",
|
4635
|
-
"description": "The path of the image to crop."
|
4636
|
-
},
|
4637
|
-
{
|
4638
|
-
"name": "rounded",
|
4639
|
-
"type": "Boolean",
|
4640
|
-
"default": "`true`",
|
4641
|
-
"description": "If the crop mask should be a circle. Defaults to true."
|
4642
|
-
},
|
4643
|
-
{
|
4644
|
-
"name": "system_arguments",
|
4645
|
-
"type": "Hash",
|
4646
|
-
"default": "N/A",
|
4647
|
-
"description": "{{link_to_system_arguments_docs}}"
|
4648
|
-
}
|
4649
|
-
],
|
4650
|
-
"slots": [
|
4651
|
-
{
|
4652
|
-
"name": "loading",
|
4653
|
-
"description": "A loading indicator that is shown while the image is loading.",
|
4654
|
-
"parameters": [
|
4655
|
-
{
|
4656
|
-
"name": "system_arguments",
|
4657
|
-
"type": "Hash",
|
4658
|
-
"default": "N/A",
|
4659
|
-
"description": "{{link_to_system_arguments_docs}}"
|
4660
|
-
}
|
4661
|
-
]
|
4662
|
-
}
|
4663
|
-
],
|
4664
|
-
"methods": [
|
4665
|
-
|
4666
|
-
],
|
4667
|
-
"previews": [
|
4668
|
-
{
|
4669
|
-
"preview_path": "primer/alpha/image_crop/playground",
|
4670
|
-
"name": "playground",
|
4671
|
-
"snapshot": "false",
|
4672
|
-
"skip_rules": {
|
4673
|
-
"wont_fix": [
|
4674
|
-
"region"
|
4675
|
-
],
|
4676
|
-
"will_fix": [
|
4677
|
-
"color-contrast"
|
4678
|
-
]
|
4679
|
-
}
|
4680
|
-
},
|
4681
|
-
{
|
4682
|
-
"preview_path": "primer/alpha/image_crop/default",
|
4683
|
-
"name": "default",
|
4684
|
-
"snapshot": "false",
|
4685
|
-
"skip_rules": {
|
4686
|
-
"wont_fix": [
|
4687
|
-
"region"
|
4688
|
-
],
|
4689
|
-
"will_fix": [
|
4690
|
-
"color-contrast"
|
4691
|
-
]
|
4692
|
-
}
|
4693
|
-
},
|
4694
|
-
{
|
4695
|
-
"preview_path": "primer/alpha/image_crop/loading",
|
4696
|
-
"name": "loading",
|
4697
|
-
"snapshot": "false",
|
4698
|
-
"skip_rules": {
|
4699
|
-
"wont_fix": [
|
4700
|
-
"region"
|
4701
|
-
],
|
4702
|
-
"will_fix": [
|
4703
|
-
"color-contrast"
|
4704
|
-
]
|
4705
|
-
}
|
4706
|
-
}
|
4707
|
-
],
|
4708
|
-
"subcomponents": [
|
4709
|
-
|
4710
|
-
]
|
4711
|
-
},
|
4712
4623
|
{
|
4713
4624
|
"fully_qualified_name": "Primer::Alpha::Layout",
|
4714
4625
|
"description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
|
@@ -7653,6 +7564,24 @@
|
|
7653
7564
|
"default": "`:outside_bottom`",
|
7654
7565
|
"description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
7655
7566
|
},
|
7567
|
+
{
|
7568
|
+
"name": "loading_label",
|
7569
|
+
"type": "String",
|
7570
|
+
"default": "`\"Loading content...\"`",
|
7571
|
+
"description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
|
7572
|
+
},
|
7573
|
+
{
|
7574
|
+
"name": "loading_description",
|
7575
|
+
"type": "String",
|
7576
|
+
"default": "`nil`",
|
7577
|
+
"description": "The description to use when the panel is loading. If not provided, no description will be used."
|
7578
|
+
},
|
7579
|
+
{
|
7580
|
+
"name": "banner_scheme",
|
7581
|
+
"type": "Symbol",
|
7582
|
+
"default": "`:danger`",
|
7583
|
+
"description": "The scheme for the error banner One of `:danger` or `:warning`."
|
7584
|
+
},
|
7656
7585
|
{
|
7657
7586
|
"name": "system_arguments",
|
7658
7587
|
"type": "Hash",
|
@@ -7753,6 +7682,16 @@
|
|
7753
7682
|
"Symbol"
|
7754
7683
|
]
|
7755
7684
|
},
|
7685
|
+
{
|
7686
|
+
"name": "banner_scheme",
|
7687
|
+
"description": "One of `:danger` or `:warning`.",
|
7688
|
+
"parameters": [
|
7689
|
+
|
7690
|
+
],
|
7691
|
+
"return_types": [
|
7692
|
+
"Symbol"
|
7693
|
+
]
|
7694
|
+
},
|
7756
7695
|
{
|
7757
7696
|
"name": "fetch_strategy",
|
7758
7697
|
"description": "One of `:eventually_local`, `:local`, or `:remote`.",
|
@@ -7885,6 +7824,32 @@
|
|
7885
7824
|
]
|
7886
7825
|
}
|
7887
7826
|
},
|
7827
|
+
{
|
7828
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
|
7829
|
+
"name": "custom_loading_label",
|
7830
|
+
"snapshot": "interactive",
|
7831
|
+
"skip_rules": {
|
7832
|
+
"wont_fix": [
|
7833
|
+
"region"
|
7834
|
+
],
|
7835
|
+
"will_fix": [
|
7836
|
+
"color-contrast"
|
7837
|
+
]
|
7838
|
+
}
|
7839
|
+
},
|
7840
|
+
{
|
7841
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
|
7842
|
+
"name": "custom_loading_description",
|
7843
|
+
"snapshot": "interactive",
|
7844
|
+
"skip_rules": {
|
7845
|
+
"wont_fix": [
|
7846
|
+
"region"
|
7847
|
+
],
|
7848
|
+
"will_fix": [
|
7849
|
+
"color-contrast"
|
7850
|
+
]
|
7851
|
+
}
|
7852
|
+
},
|
7888
7853
|
{
|
7889
7854
|
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
7890
7855
|
"name": "local_fetch_no_results",
|
@@ -8131,6 +8096,19 @@
|
|
8131
8096
|
"color-contrast"
|
8132
8097
|
]
|
8133
8098
|
}
|
8099
|
+
},
|
8100
|
+
{
|
8101
|
+
"preview_path": "primer/alpha/select_panel/scroll_container",
|
8102
|
+
"name": "scroll_container",
|
8103
|
+
"snapshot": "false",
|
8104
|
+
"skip_rules": {
|
8105
|
+
"wont_fix": [
|
8106
|
+
"region"
|
8107
|
+
],
|
8108
|
+
"will_fix": [
|
8109
|
+
"color-contrast"
|
8110
|
+
]
|
8111
|
+
}
|
8134
8112
|
}
|
8135
8113
|
],
|
8136
8114
|
"subcomponents": [
|
@@ -8194,6 +8172,178 @@
|
|
8194
8172
|
}
|
8195
8173
|
]
|
8196
8174
|
},
|
8175
|
+
{
|
8176
|
+
"fully_qualified_name": "Primer::Alpha::Stack",
|
8177
|
+
"description": "Stack is a layout component that creates responsive horizontal and vertical flows.",
|
8178
|
+
"accessibility_docs": null,
|
8179
|
+
"is_form_component": false,
|
8180
|
+
"is_published": true,
|
8181
|
+
"requires_js": false,
|
8182
|
+
"component": "Stack",
|
8183
|
+
"status": "alpha",
|
8184
|
+
"a11y_reviewed": false,
|
8185
|
+
"short_name": "Stack",
|
8186
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
|
8187
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
|
8188
|
+
"parameters": [
|
8189
|
+
{
|
8190
|
+
"name": "tag",
|
8191
|
+
"type": "Symbol",
|
8192
|
+
"default": "`:div`",
|
8193
|
+
"description": "Customize the element type of the rendered container."
|
8194
|
+
},
|
8195
|
+
{
|
8196
|
+
"name": "gap",
|
8197
|
+
"type": "Symbol",
|
8198
|
+
"default": "`GapArg::DEFAULT`",
|
8199
|
+
"description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
|
8200
|
+
},
|
8201
|
+
{
|
8202
|
+
"name": "direction",
|
8203
|
+
"type": "Symbol",
|
8204
|
+
"default": "`:vertical`",
|
8205
|
+
"description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
|
8206
|
+
},
|
8207
|
+
{
|
8208
|
+
"name": "align",
|
8209
|
+
"type": "Symbol",
|
8210
|
+
"default": "`:stretch`",
|
8211
|
+
"description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
|
8212
|
+
},
|
8213
|
+
{
|
8214
|
+
"name": "wrap",
|
8215
|
+
"type": "Symbol",
|
8216
|
+
"default": "`:nowrap`",
|
8217
|
+
"description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
|
8218
|
+
},
|
8219
|
+
{
|
8220
|
+
"name": "justify",
|
8221
|
+
"type": "Symbol",
|
8222
|
+
"default": "`:start`",
|
8223
|
+
"description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
|
8224
|
+
},
|
8225
|
+
{
|
8226
|
+
"name": "padding",
|
8227
|
+
"type": "Symbol",
|
8228
|
+
"default": "`:none`",
|
8229
|
+
"description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
|
8230
|
+
},
|
8231
|
+
{
|
8232
|
+
"name": "system_arguments",
|
8233
|
+
"type": "Hash",
|
8234
|
+
"default": "N/A",
|
8235
|
+
"description": "{{link_to_system_arguments_docs}}"
|
8236
|
+
}
|
8237
|
+
],
|
8238
|
+
"slots": [
|
8239
|
+
|
8240
|
+
],
|
8241
|
+
"methods": [
|
8242
|
+
|
8243
|
+
],
|
8244
|
+
"previews": [
|
8245
|
+
{
|
8246
|
+
"preview_path": "primer/alpha/stack/default",
|
8247
|
+
"name": "default",
|
8248
|
+
"snapshot": "false",
|
8249
|
+
"skip_rules": {
|
8250
|
+
"wont_fix": [
|
8251
|
+
"region"
|
8252
|
+
],
|
8253
|
+
"will_fix": [
|
8254
|
+
"color-contrast"
|
8255
|
+
]
|
8256
|
+
}
|
8257
|
+
},
|
8258
|
+
{
|
8259
|
+
"preview_path": "primer/alpha/stack/playground",
|
8260
|
+
"name": "playground",
|
8261
|
+
"snapshot": "false",
|
8262
|
+
"skip_rules": {
|
8263
|
+
"wont_fix": [
|
8264
|
+
"region"
|
8265
|
+
],
|
8266
|
+
"will_fix": [
|
8267
|
+
"color-contrast"
|
8268
|
+
]
|
8269
|
+
}
|
8270
|
+
}
|
8271
|
+
],
|
8272
|
+
"subcomponents": [
|
8273
|
+
|
8274
|
+
]
|
8275
|
+
},
|
8276
|
+
{
|
8277
|
+
"fully_qualified_name": "Primer::Alpha::StackItem",
|
8278
|
+
"description": "StackItem is a layout component designed to be used as the child of a Stack.",
|
8279
|
+
"accessibility_docs": null,
|
8280
|
+
"is_form_component": false,
|
8281
|
+
"is_published": true,
|
8282
|
+
"requires_js": false,
|
8283
|
+
"component": "StackItem",
|
8284
|
+
"status": "alpha",
|
8285
|
+
"a11y_reviewed": false,
|
8286
|
+
"short_name": "StackItem",
|
8287
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
|
8288
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
|
8289
|
+
"parameters": [
|
8290
|
+
{
|
8291
|
+
"name": "tag",
|
8292
|
+
"type": "Symbol",
|
8293
|
+
"default": "`:div`",
|
8294
|
+
"description": "Customize the element type of the rendered container."
|
8295
|
+
},
|
8296
|
+
{
|
8297
|
+
"name": "grow",
|
8298
|
+
"type": "Boolean",
|
8299
|
+
"default": "`false`",
|
8300
|
+
"description": "Allow item to keep size or expand to fill the available space."
|
8301
|
+
},
|
8302
|
+
{
|
8303
|
+
"name": "system_arguments",
|
8304
|
+
"type": "Hash",
|
8305
|
+
"default": "N/A",
|
8306
|
+
"description": "{{link_to_system_arguments_docs}}"
|
8307
|
+
}
|
8308
|
+
],
|
8309
|
+
"slots": [
|
8310
|
+
|
8311
|
+
],
|
8312
|
+
"methods": [
|
8313
|
+
|
8314
|
+
],
|
8315
|
+
"previews": [
|
8316
|
+
{
|
8317
|
+
"preview_path": "primer/alpha/stack_item/default",
|
8318
|
+
"name": "default",
|
8319
|
+
"snapshot": "false",
|
8320
|
+
"skip_rules": {
|
8321
|
+
"wont_fix": [
|
8322
|
+
"region"
|
8323
|
+
],
|
8324
|
+
"will_fix": [
|
8325
|
+
"color-contrast"
|
8326
|
+
]
|
8327
|
+
}
|
8328
|
+
},
|
8329
|
+
{
|
8330
|
+
"preview_path": "primer/alpha/stack_item/playground",
|
8331
|
+
"name": "playground",
|
8332
|
+
"snapshot": "false",
|
8333
|
+
"skip_rules": {
|
8334
|
+
"wont_fix": [
|
8335
|
+
"region"
|
8336
|
+
],
|
8337
|
+
"will_fix": [
|
8338
|
+
"color-contrast"
|
8339
|
+
]
|
8340
|
+
}
|
8341
|
+
}
|
8342
|
+
],
|
8343
|
+
"subcomponents": [
|
8344
|
+
|
8345
|
+
]
|
8346
|
+
},
|
8197
8347
|
{
|
8198
8348
|
"fully_qualified_name": "Primer::Alpha::SubmitButton",
|
8199
8349
|
"description": "A submit button input rendered using the HTML `<button type=\"submit\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
|
@@ -18907,6 +19057,6 @@
|
|
18907
19057
|
"component": "BaseComponent",
|
18908
19058
|
"fully_qualified_name": "Primer::BaseComponent",
|
18909
19059
|
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
|
18910
|
-
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding
|
19060
|
+
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding top. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
|
18911
19061
|
}
|
18912
19062
|
]
|
data/static/previews.json
CHANGED
@@ -4338,53 +4338,6 @@
|
|
4338
4338
|
}
|
4339
4339
|
]
|
4340
4340
|
},
|
4341
|
-
{
|
4342
|
-
"name": "image_crop",
|
4343
|
-
"component": "ImageCrop",
|
4344
|
-
"status": "alpha",
|
4345
|
-
"lookup_path": "primer/alpha/image_crop",
|
4346
|
-
"examples": [
|
4347
|
-
{
|
4348
|
-
"preview_path": "primer/alpha/image_crop/playground",
|
4349
|
-
"name": "playground",
|
4350
|
-
"snapshot": "false",
|
4351
|
-
"skip_rules": {
|
4352
|
-
"wont_fix": [
|
4353
|
-
"region"
|
4354
|
-
],
|
4355
|
-
"will_fix": [
|
4356
|
-
"color-contrast"
|
4357
|
-
]
|
4358
|
-
}
|
4359
|
-
},
|
4360
|
-
{
|
4361
|
-
"preview_path": "primer/alpha/image_crop/default",
|
4362
|
-
"name": "default",
|
4363
|
-
"snapshot": "false",
|
4364
|
-
"skip_rules": {
|
4365
|
-
"wont_fix": [
|
4366
|
-
"region"
|
4367
|
-
],
|
4368
|
-
"will_fix": [
|
4369
|
-
"color-contrast"
|
4370
|
-
]
|
4371
|
-
}
|
4372
|
-
},
|
4373
|
-
{
|
4374
|
-
"preview_path": "primer/alpha/image_crop/loading",
|
4375
|
-
"name": "loading",
|
4376
|
-
"snapshot": "false",
|
4377
|
-
"skip_rules": {
|
4378
|
-
"wont_fix": [
|
4379
|
-
"region"
|
4380
|
-
],
|
4381
|
-
"will_fix": [
|
4382
|
-
"color-contrast"
|
4383
|
-
]
|
4384
|
-
}
|
4385
|
-
}
|
4386
|
-
]
|
4387
|
-
},
|
4388
4341
|
{
|
4389
4342
|
"name": "input_group",
|
4390
4343
|
"component": "OpenProject::InputGroup",
|
@@ -6576,6 +6529,32 @@
|
|
6576
6529
|
]
|
6577
6530
|
}
|
6578
6531
|
},
|
6532
|
+
{
|
6533
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
|
6534
|
+
"name": "custom_loading_label",
|
6535
|
+
"snapshot": "interactive",
|
6536
|
+
"skip_rules": {
|
6537
|
+
"wont_fix": [
|
6538
|
+
"region"
|
6539
|
+
],
|
6540
|
+
"will_fix": [
|
6541
|
+
"color-contrast"
|
6542
|
+
]
|
6543
|
+
}
|
6544
|
+
},
|
6545
|
+
{
|
6546
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
|
6547
|
+
"name": "custom_loading_description",
|
6548
|
+
"snapshot": "interactive",
|
6549
|
+
"skip_rules": {
|
6550
|
+
"wont_fix": [
|
6551
|
+
"region"
|
6552
|
+
],
|
6553
|
+
"will_fix": [
|
6554
|
+
"color-contrast"
|
6555
|
+
]
|
6556
|
+
}
|
6557
|
+
},
|
6579
6558
|
{
|
6580
6559
|
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
6581
6560
|
"name": "local_fetch_no_results",
|
@@ -6822,6 +6801,19 @@
|
|
6822
6801
|
"color-contrast"
|
6823
6802
|
]
|
6824
6803
|
}
|
6804
|
+
},
|
6805
|
+
{
|
6806
|
+
"preview_path": "primer/alpha/select_panel/scroll_container",
|
6807
|
+
"name": "scroll_container",
|
6808
|
+
"snapshot": "false",
|
6809
|
+
"skip_rules": {
|
6810
|
+
"wont_fix": [
|
6811
|
+
"region"
|
6812
|
+
],
|
6813
|
+
"will_fix": [
|
6814
|
+
"color-contrast"
|
6815
|
+
]
|
6816
|
+
}
|
6825
6817
|
}
|
6826
6818
|
]
|
6827
6819
|
},
|
@@ -6906,6 +6898,74 @@
|
|
6906
6898
|
}
|
6907
6899
|
]
|
6908
6900
|
},
|
6901
|
+
{
|
6902
|
+
"name": "stack",
|
6903
|
+
"component": "Stack",
|
6904
|
+
"status": "alpha",
|
6905
|
+
"lookup_path": "primer/alpha/stack",
|
6906
|
+
"examples": [
|
6907
|
+
{
|
6908
|
+
"preview_path": "primer/alpha/stack/default",
|
6909
|
+
"name": "default",
|
6910
|
+
"snapshot": "false",
|
6911
|
+
"skip_rules": {
|
6912
|
+
"wont_fix": [
|
6913
|
+
"region"
|
6914
|
+
],
|
6915
|
+
"will_fix": [
|
6916
|
+
"color-contrast"
|
6917
|
+
]
|
6918
|
+
}
|
6919
|
+
},
|
6920
|
+
{
|
6921
|
+
"preview_path": "primer/alpha/stack/playground",
|
6922
|
+
"name": "playground",
|
6923
|
+
"snapshot": "false",
|
6924
|
+
"skip_rules": {
|
6925
|
+
"wont_fix": [
|
6926
|
+
"region"
|
6927
|
+
],
|
6928
|
+
"will_fix": [
|
6929
|
+
"color-contrast"
|
6930
|
+
]
|
6931
|
+
}
|
6932
|
+
}
|
6933
|
+
]
|
6934
|
+
},
|
6935
|
+
{
|
6936
|
+
"name": "stack_item",
|
6937
|
+
"component": "StackItem",
|
6938
|
+
"status": "alpha",
|
6939
|
+
"lookup_path": "primer/alpha/stack_item",
|
6940
|
+
"examples": [
|
6941
|
+
{
|
6942
|
+
"preview_path": "primer/alpha/stack_item/default",
|
6943
|
+
"name": "default",
|
6944
|
+
"snapshot": "false",
|
6945
|
+
"skip_rules": {
|
6946
|
+
"wont_fix": [
|
6947
|
+
"region"
|
6948
|
+
],
|
6949
|
+
"will_fix": [
|
6950
|
+
"color-contrast"
|
6951
|
+
]
|
6952
|
+
}
|
6953
|
+
},
|
6954
|
+
{
|
6955
|
+
"preview_path": "primer/alpha/stack_item/playground",
|
6956
|
+
"name": "playground",
|
6957
|
+
"snapshot": "false",
|
6958
|
+
"skip_rules": {
|
6959
|
+
"wont_fix": [
|
6960
|
+
"region"
|
6961
|
+
],
|
6962
|
+
"will_fix": [
|
6963
|
+
"color-contrast"
|
6964
|
+
]
|
6965
|
+
}
|
6966
|
+
}
|
6967
|
+
]
|
6968
|
+
},
|
6909
6969
|
{
|
6910
6970
|
"name": "state",
|
6911
6971
|
"component": "State",
|
data/static/statuses.json
CHANGED
@@ -30,7 +30,6 @@
|
|
30
30
|
"Primer::Alpha::HellipButton": "alpha",
|
31
31
|
"Primer::Alpha::HiddenTextExpander": "alpha",
|
32
32
|
"Primer::Alpha::Image": "alpha",
|
33
|
-
"Primer::Alpha::ImageCrop": "alpha",
|
34
33
|
"Primer::Alpha::Layout": "alpha",
|
35
34
|
"Primer::Alpha::Layout::Main": "alpha",
|
36
35
|
"Primer::Alpha::Layout::Sidebar": "alpha",
|
@@ -54,6 +53,8 @@
|
|
54
53
|
"Primer::Alpha::Select": "alpha",
|
55
54
|
"Primer::Alpha::SelectPanel": "alpha",
|
56
55
|
"Primer::Alpha::SelectPanel::ItemList": "alpha",
|
56
|
+
"Primer::Alpha::Stack": "alpha",
|
57
|
+
"Primer::Alpha::StackItem": "alpha",
|
57
58
|
"Primer::Alpha::SubmitButton": "alpha",
|
58
59
|
"Primer::Alpha::TabContainer": "alpha",
|
59
60
|
"Primer::Alpha::TabNav": "alpha",
|