@primer/view-components 0.35.0-rc.dcfdcf4d → 0.35.0-rc.e5ff6d57

Sign up to get free protection for your applications and to get access to all the features.
Files changed (73) hide show
  1. package/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -4
  2. package/app/assets/javascripts/primer_view_components.js +1 -1
  3. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  4. package/app/assets/styles/primer_view_components.css +1 -1
  5. package/app/assets/styles/primer_view_components.css.map +1 -1
  6. package/app/components/primer/alpha/action_bar_element.js +0 -3
  7. package/app/components/primer/alpha/action_list.css +1 -1
  8. package/app/components/primer/alpha/auto_complete.css +1 -1
  9. package/app/components/primer/alpha/banner.css +1 -1
  10. package/app/components/primer/alpha/dialog.css +1 -1
  11. package/app/components/primer/alpha/dialog.css.json +2 -1
  12. package/app/components/primer/alpha/dropdown.css +1 -1
  13. package/app/components/primer/alpha/select_panel_element.js +7 -1
  14. package/app/components/primer/alpha/stack.css +1 -0
  15. package/app/components/primer/alpha/stack.css.json +90 -0
  16. package/app/components/primer/alpha/stack_item.css +1 -0
  17. package/app/components/primer/alpha/stack_item.css.json +12 -0
  18. package/app/components/primer/alpha/tab_nav.css +1 -1
  19. package/app/components/primer/alpha/text_field.css +1 -1
  20. package/app/components/primer/alpha/toggle_switch.css +1 -1
  21. package/app/components/primer/alpha/underline_nav.css +1 -1
  22. package/app/components/primer/beta/avatar.css +1 -1
  23. package/app/components/primer/beta/avatar_stack.css +1 -1
  24. package/app/components/primer/beta/blankslate.css +1 -1
  25. package/app/components/primer/beta/border_box.css +1 -1
  26. package/app/components/primer/beta/button.css +1 -1
  27. package/app/components/primer/beta/counter.css +1 -1
  28. package/app/components/primer/beta/popover.css +1 -1
  29. package/app/components/primer/beta/progress_bar.css +1 -1
  30. package/app/components/primer/beta/state.css +1 -1
  31. package/app/components/primer/dialog_helper.js +0 -1
  32. package/app/components/primer/primer.d.ts +3 -4
  33. package/app/components/primer/primer.js +3 -4
  34. package/package.json +9 -10
  35. package/static/arguments.json +106 -30
  36. package/static/audited_at.json +2 -1
  37. package/static/classes.json +6 -0
  38. package/static/constants.json +24 -2
  39. package/static/info_arch.json +232 -98
  40. package/static/previews.json +107 -47
  41. package/static/statuses.json +2 -1
  42. package/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +0 -1
  43. package/app/components/primer/alpha/image_crop.d.ts +0 -1
  44. package/app/components/primer/alpha/image_crop.js +0 -1
  45. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
  46. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
  47. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
  48. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
  49. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
  50. /package/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
  51. /package/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
  52. /package/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
  53. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
  54. /package/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
  55. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
  56. /package/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
  57. /package/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
  58. /package/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
  59. /package/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
  60. /package/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
  61. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
  62. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
  63. /package/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
  64. /package/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
  65. /package/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
  66. /package/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
  67. /package/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
  68. /package/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
  69. /package/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
  70. /package/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
  71. /package/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
  72. /package/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
  73. /package/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
@@ -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. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
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. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
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,18 @@
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
+ },
7656
7579
  {
7657
7580
  "name": "banner_scheme",
7658
7581
  "type": "Symbol",
@@ -7901,6 +7824,32 @@
7901
7824
  ]
7902
7825
  }
7903
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
+ },
7904
7853
  {
7905
7854
  "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
7906
7855
  "name": "local_fetch_no_results",
@@ -8147,6 +8096,19 @@
8147
8096
  "color-contrast"
8148
8097
  ]
8149
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
+ }
8150
8112
  }
8151
8113
  ],
8152
8114
  "subcomponents": [
@@ -8210,6 +8172,178 @@
8210
8172
  }
8211
8173
  ]
8212
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
+ },
8213
8347
  {
8214
8348
  "fully_qualified_name": "Primer::Alpha::SubmitButton",
8215
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.",
@@ -17254,6 +17388,6 @@
17254
17388
  "component": "BaseComponent",
17255
17389
  "fully_qualified_name": "Primer::BaseComponent",
17256
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```",
17257
- "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 left. 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. |"
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. |"
17258
17392
  }
17259
17393
  ]
@@ -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",
@@ -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",
@@ -1 +0,0 @@
1
- import '@github/image-crop-element';
@@ -1 +0,0 @@
1
- import '@github/image-crop-element';
@@ -1 +0,0 @@
1
- import '@github/image-crop-element';