primer_view_components 0.33.0 → 0.35.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 +67 -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.css +1 -0
- data/app/components/primer/alpha/select_panel.css.json +7 -0
- data/app/components/primer/alpha/select_panel.css.map +1 -0
- data/app/components/primer/alpha/select_panel.html.erb +21 -17
- data/app/components/primer/alpha/select_panel.pcss +7 -0
- data/app/components/primer/alpha/select_panel.rb +69 -5
- data/app/components/primer/alpha/select_panel_element.js +15 -9
- data/app/components/primer/alpha/select_panel_element.ts +16 -9
- 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 +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +7 -4
- 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/component.rb +4 -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 -3
- 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/primer_text_field.js +1 -0
- data/{lib → app/lib}/primer/forms/primer_text_field.ts +1 -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 +1 -1
- data/lib/primer/yard/component_manifest.rb +0 -1
- data/lib/rubocop/cop/primer/primer_octicon.rb +1 -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/list_of_links.html.erb +1 -1
- data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +2 -1
- 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 +47 -9
- 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/static/arguments.json +112 -30
- data/static/audited_at.json +2 -1
- data/static/classes.json +12 -0
- data/static/constants.json +155 -8
- data/static/info_arch.json +248 -98
- data/static/previews.json +107 -47
- data/static/statuses.json +2 -1
- metadata +138 -117
- 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/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/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.",
|
@@ -17238,6 +17388,6 @@
|
|
17238
17388
|
"component": "BaseComponent",
|
17239
17389
|
"fully_qualified_name": "Primer::BaseComponent",
|
17240
17390
|
"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```",
|
17241
|
-
"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
|
17391
|
+
"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. |"
|
17242
17392
|
}
|
17243
17393
|
]
|
data/static/previews.json
CHANGED
@@ -3978,53 +3978,6 @@
|
|
3978
3978
|
}
|
3979
3979
|
]
|
3980
3980
|
},
|
3981
|
-
{
|
3982
|
-
"name": "image_crop",
|
3983
|
-
"component": "ImageCrop",
|
3984
|
-
"status": "alpha",
|
3985
|
-
"lookup_path": "primer/alpha/image_crop",
|
3986
|
-
"examples": [
|
3987
|
-
{
|
3988
|
-
"preview_path": "primer/alpha/image_crop/playground",
|
3989
|
-
"name": "playground",
|
3990
|
-
"snapshot": "false",
|
3991
|
-
"skip_rules": {
|
3992
|
-
"wont_fix": [
|
3993
|
-
"region"
|
3994
|
-
],
|
3995
|
-
"will_fix": [
|
3996
|
-
"color-contrast"
|
3997
|
-
]
|
3998
|
-
}
|
3999
|
-
},
|
4000
|
-
{
|
4001
|
-
"preview_path": "primer/alpha/image_crop/default",
|
4002
|
-
"name": "default",
|
4003
|
-
"snapshot": "false",
|
4004
|
-
"skip_rules": {
|
4005
|
-
"wont_fix": [
|
4006
|
-
"region"
|
4007
|
-
],
|
4008
|
-
"will_fix": [
|
4009
|
-
"color-contrast"
|
4010
|
-
]
|
4011
|
-
}
|
4012
|
-
},
|
4013
|
-
{
|
4014
|
-
"preview_path": "primer/alpha/image_crop/loading",
|
4015
|
-
"name": "loading",
|
4016
|
-
"snapshot": "false",
|
4017
|
-
"skip_rules": {
|
4018
|
-
"wont_fix": [
|
4019
|
-
"region"
|
4020
|
-
],
|
4021
|
-
"will_fix": [
|
4022
|
-
"color-contrast"
|
4023
|
-
]
|
4024
|
-
}
|
4025
|
-
}
|
4026
|
-
]
|
4027
|
-
},
|
4028
3981
|
{
|
4029
3982
|
"name": "label",
|
4030
3983
|
"component": "Label",
|
@@ -5940,6 +5893,32 @@
|
|
5940
5893
|
]
|
5941
5894
|
}
|
5942
5895
|
},
|
5896
|
+
{
|
5897
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
|
5898
|
+
"name": "custom_loading_label",
|
5899
|
+
"snapshot": "interactive",
|
5900
|
+
"skip_rules": {
|
5901
|
+
"wont_fix": [
|
5902
|
+
"region"
|
5903
|
+
],
|
5904
|
+
"will_fix": [
|
5905
|
+
"color-contrast"
|
5906
|
+
]
|
5907
|
+
}
|
5908
|
+
},
|
5909
|
+
{
|
5910
|
+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
|
5911
|
+
"name": "custom_loading_description",
|
5912
|
+
"snapshot": "interactive",
|
5913
|
+
"skip_rules": {
|
5914
|
+
"wont_fix": [
|
5915
|
+
"region"
|
5916
|
+
],
|
5917
|
+
"will_fix": [
|
5918
|
+
"color-contrast"
|
5919
|
+
]
|
5920
|
+
}
|
5921
|
+
},
|
5943
5922
|
{
|
5944
5923
|
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
5945
5924
|
"name": "local_fetch_no_results",
|
@@ -6186,6 +6165,19 @@
|
|
6186
6165
|
"color-contrast"
|
6187
6166
|
]
|
6188
6167
|
}
|
6168
|
+
},
|
6169
|
+
{
|
6170
|
+
"preview_path": "primer/alpha/select_panel/scroll_container",
|
6171
|
+
"name": "scroll_container",
|
6172
|
+
"snapshot": "false",
|
6173
|
+
"skip_rules": {
|
6174
|
+
"wont_fix": [
|
6175
|
+
"region"
|
6176
|
+
],
|
6177
|
+
"will_fix": [
|
6178
|
+
"color-contrast"
|
6179
|
+
]
|
6180
|
+
}
|
6189
6181
|
}
|
6190
6182
|
]
|
6191
6183
|
},
|
@@ -6223,6 +6215,74 @@
|
|
6223
6215
|
}
|
6224
6216
|
]
|
6225
6217
|
},
|
6218
|
+
{
|
6219
|
+
"name": "stack",
|
6220
|
+
"component": "Stack",
|
6221
|
+
"status": "alpha",
|
6222
|
+
"lookup_path": "primer/alpha/stack",
|
6223
|
+
"examples": [
|
6224
|
+
{
|
6225
|
+
"preview_path": "primer/alpha/stack/default",
|
6226
|
+
"name": "default",
|
6227
|
+
"snapshot": "false",
|
6228
|
+
"skip_rules": {
|
6229
|
+
"wont_fix": [
|
6230
|
+
"region"
|
6231
|
+
],
|
6232
|
+
"will_fix": [
|
6233
|
+
"color-contrast"
|
6234
|
+
]
|
6235
|
+
}
|
6236
|
+
},
|
6237
|
+
{
|
6238
|
+
"preview_path": "primer/alpha/stack/playground",
|
6239
|
+
"name": "playground",
|
6240
|
+
"snapshot": "false",
|
6241
|
+
"skip_rules": {
|
6242
|
+
"wont_fix": [
|
6243
|
+
"region"
|
6244
|
+
],
|
6245
|
+
"will_fix": [
|
6246
|
+
"color-contrast"
|
6247
|
+
]
|
6248
|
+
}
|
6249
|
+
}
|
6250
|
+
]
|
6251
|
+
},
|
6252
|
+
{
|
6253
|
+
"name": "stack_item",
|
6254
|
+
"component": "StackItem",
|
6255
|
+
"status": "alpha",
|
6256
|
+
"lookup_path": "primer/alpha/stack_item",
|
6257
|
+
"examples": [
|
6258
|
+
{
|
6259
|
+
"preview_path": "primer/alpha/stack_item/default",
|
6260
|
+
"name": "default",
|
6261
|
+
"snapshot": "false",
|
6262
|
+
"skip_rules": {
|
6263
|
+
"wont_fix": [
|
6264
|
+
"region"
|
6265
|
+
],
|
6266
|
+
"will_fix": [
|
6267
|
+
"color-contrast"
|
6268
|
+
]
|
6269
|
+
}
|
6270
|
+
},
|
6271
|
+
{
|
6272
|
+
"preview_path": "primer/alpha/stack_item/playground",
|
6273
|
+
"name": "playground",
|
6274
|
+
"snapshot": "false",
|
6275
|
+
"skip_rules": {
|
6276
|
+
"wont_fix": [
|
6277
|
+
"region"
|
6278
|
+
],
|
6279
|
+
"will_fix": [
|
6280
|
+
"color-contrast"
|
6281
|
+
]
|
6282
|
+
}
|
6283
|
+
}
|
6284
|
+
]
|
6285
|
+
},
|
6226
6286
|
{
|
6227
6287
|
"name": "state",
|
6228
6288
|
"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",
|