openproject-primer_view_components 0.52.0 → 0.52.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +26 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/divider.rb +4 -0
  8. data/app/components/primer/alpha/action_menu/action_menu_element.js +1 -0
  9. data/app/components/primer/alpha/action_menu/action_menu_element.ts +1 -0
  10. data/app/components/primer/alpha/dialog.css +1 -1
  11. data/app/components/primer/alpha/dialog.css.json +0 -1
  12. data/app/components/primer/alpha/dialog.css.map +1 -1
  13. data/app/components/primer/alpha/dialog.pcss +0 -5
  14. data/app/components/primer/alpha/text_field.css +1 -1
  15. data/app/components/primer/alpha/text_field.css.json +14 -0
  16. data/app/components/primer/alpha/text_field.css.map +1 -1
  17. data/app/components/primer/alpha/text_field.pcss +89 -2
  18. data/app/components/primer/open_project/danger_confirmation_dialog/confirmation_check_box.rb +1 -0
  19. data/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb +2 -0
  20. data/app/components/primer/open_project/danger_confirmation_dialog.html.erb +1 -1
  21. data/app/components/primer/open_project/danger_confirmation_dialog.rb +8 -8
  22. data/app/components/primer/open_project/feedback_dialog.rb +6 -4
  23. data/app/lib/primer/forms/acts_as_component.rb +32 -17
  24. data/app/lib/primer/forms/base_component.rb +5 -12
  25. data/app/lib/primer/forms/dsl/text_field_input.rb +10 -7
  26. data/app/lib/primer/forms/text_field.html.erb +5 -0
  27. data/app/lib/primer/forms/text_field.rb +37 -0
  28. data/lib/primer/classify/utilities.yml +1 -1
  29. data/lib/primer/view_components/version.rb +1 -1
  30. data/previews/primer/alpha/text_field_preview.rb +30 -0
  31. data/static/arguments.json +67 -0
  32. data/static/audited_at.json +3 -0
  33. data/static/constants.json +11 -0
  34. data/static/form_previews.json +5 -0
  35. data/static/info_arch.json +366 -15
  36. data/static/previews.json +177 -0
  37. data/static/statuses.json +3 -0
  38. metadata +2 -2
@@ -9360,6 +9360,71 @@
9360
9360
  ]
9361
9361
  }
9362
9362
  },
9363
+ {
9364
+ "preview_path": "primer/alpha/text_field/with_trailing_icon",
9365
+ "name": "with_trailing_icon",
9366
+ "snapshot": "true",
9367
+ "skip_rules": {
9368
+ "wont_fix": [
9369
+ "region"
9370
+ ],
9371
+ "will_fix": [
9372
+ "color-contrast"
9373
+ ]
9374
+ }
9375
+ },
9376
+ {
9377
+ "preview_path": "primer/alpha/text_field/with_trailing_text",
9378
+ "name": "with_trailing_text",
9379
+ "snapshot": "true",
9380
+ "skip_rules": {
9381
+ "wont_fix": [
9382
+ "region"
9383
+ ],
9384
+ "will_fix": [
9385
+ "color-contrast"
9386
+ ]
9387
+ }
9388
+ },
9389
+ {
9390
+ "preview_path": "primer/alpha/text_field/with_trailing_long_text",
9391
+ "name": "with_trailing_long_text",
9392
+ "snapshot": "true",
9393
+ "skip_rules": {
9394
+ "wont_fix": [
9395
+ "region"
9396
+ ],
9397
+ "will_fix": [
9398
+ "color-contrast"
9399
+ ]
9400
+ }
9401
+ },
9402
+ {
9403
+ "preview_path": "primer/alpha/text_field/with_trailing_counter",
9404
+ "name": "with_trailing_counter",
9405
+ "snapshot": "true",
9406
+ "skip_rules": {
9407
+ "wont_fix": [
9408
+ "region"
9409
+ ],
9410
+ "will_fix": [
9411
+ "color-contrast"
9412
+ ]
9413
+ }
9414
+ },
9415
+ {
9416
+ "preview_path": "primer/alpha/text_field/with_trailing_label",
9417
+ "name": "with_trailing_label",
9418
+ "snapshot": "true",
9419
+ "skip_rules": {
9420
+ "wont_fix": [
9421
+ "region"
9422
+ ],
9423
+ "will_fix": [
9424
+ "color-contrast"
9425
+ ]
9426
+ }
9427
+ },
9363
9428
  {
9364
9429
  "preview_path": "primer/alpha/text_field/with_leading_visual",
9365
9430
  "name": "with_leading_visual",
@@ -14217,6 +14282,30 @@
14217
14282
  "description": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
14218
14283
  }
14219
14284
  ]
14285
+ },
14286
+ {
14287
+ "name": "leading_visual",
14288
+ "description": "Leading visuals appear to the left of the link text.\n\nUse:\n\n- `leading_visual_icon` which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
14289
+ "parameters": [
14290
+ {
14291
+ "name": "system_arguments",
14292
+ "type": "Hash",
14293
+ "default": "N/A",
14294
+ "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
14295
+ }
14296
+ ]
14297
+ },
14298
+ {
14299
+ "name": "trailing_visual",
14300
+ "description": "Trailing visuals appear to the right of the link text.\n\nUse:\n\n- `trailing_visual_icon` which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
14301
+ "parameters": [
14302
+ {
14303
+ "name": "system_arguments",
14304
+ "type": "Hash",
14305
+ "default": "N/A",
14306
+ "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
14307
+ }
14308
+ ]
14220
14309
  }
14221
14310
  ],
14222
14311
  "methods": [
@@ -14326,6 +14415,32 @@
14326
14415
  "color-contrast"
14327
14416
  ]
14328
14417
  }
14418
+ },
14419
+ {
14420
+ "preview_path": "primer/beta/link/with_leading_icon",
14421
+ "name": "with_leading_icon",
14422
+ "snapshot": "false",
14423
+ "skip_rules": {
14424
+ "wont_fix": [
14425
+ "region"
14426
+ ],
14427
+ "will_fix": [
14428
+ "color-contrast"
14429
+ ]
14430
+ }
14431
+ },
14432
+ {
14433
+ "preview_path": "primer/beta/link/with_trailing_icon",
14434
+ "name": "with_trailing_icon",
14435
+ "snapshot": "false",
14436
+ "skip_rules": {
14437
+ "wont_fix": [
14438
+ "region"
14439
+ ],
14440
+ "will_fix": [
14441
+ "color-contrast"
14442
+ ]
14443
+ }
14329
14444
  }
14330
14445
  ],
14331
14446
  "subcomponents": [
@@ -17385,6 +17500,254 @@
17385
17500
 
17386
17501
  ]
17387
17502
  },
17503
+ {
17504
+ "fully_qualified_name": "Primer::OpenProject::DangerConfirmationDialog",
17505
+ "description": "A pre-configured dialog for destructive/\"potentially dangerous\" actions",
17506
+ "accessibility_docs": null,
17507
+ "is_form_component": false,
17508
+ "is_published": true,
17509
+ "requires_js": false,
17510
+ "component": "OpenProject::DangerConfirmationDialog",
17511
+ "status": "open_project",
17512
+ "a11y_reviewed": false,
17513
+ "short_name": "OpenProjectDangerConfirmationDialog",
17514
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog.rb",
17515
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/default/",
17516
+ "parameters": [
17517
+ {
17518
+ "name": "form_arguments",
17519
+ "type": "Hash",
17520
+ "default": "`{}`",
17521
+ "description": "Allows the dialog to submit a form. Pass EITHER the `builder:` option to this hash to reuse an existing Rails form, or `action:` if you prefer the component to render the form tag itself. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which is created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
17522
+ },
17523
+ {
17524
+ "name": "id",
17525
+ "type": "String",
17526
+ "default": "`self.class.generate_id`",
17527
+ "description": "The id of the dialog."
17528
+ },
17529
+ {
17530
+ "name": "system_arguments",
17531
+ "type": "Hash",
17532
+ "default": "N/A",
17533
+ "description": "{{link_to_system_arguments_docs}}"
17534
+ }
17535
+ ],
17536
+ "slots": [
17537
+ {
17538
+ "name": "confirmation_message",
17539
+ "description": "A confirmation message with some defaults that are necessary for rendering nicely.\n\nTo render the message heading (required), call the `with_heading` method, which accepts a `:tag` argument, along with the arguments accepted by {{#link_to_component}}Primer::Beta::Heading{{/link_to_component}}.\n\nTo render the message description, call the `with_description` method, which accepts {{link_to_system_arguments_docs}}",
17540
+ "parameters": [
17541
+ {
17542
+ "name": "icon_arguments",
17543
+ "type": "Hash",
17544
+ "default": "N/A",
17545
+ "description": "the system_arguments for the icon"
17546
+ },
17547
+ {
17548
+ "name": "system_arguments",
17549
+ "type": "Hash",
17550
+ "default": "N/A",
17551
+ "description": "{{link_to_system_arguments_docs}}"
17552
+ }
17553
+ ]
17554
+ },
17555
+ {
17556
+ "name": "confirmation_check_box",
17557
+ "description": "A checkbox that the user is required to check in order to continue with the destructive action.\n\nTo render the checkbox label (required), pass a block that returns a String.",
17558
+ "parameters": [
17559
+ {
17560
+ "name": "system_arguments",
17561
+ "type": "Hash",
17562
+ "default": "N/A",
17563
+ "description": "{{link_to_system_arguments_docs}}"
17564
+ }
17565
+ ]
17566
+ },
17567
+ {
17568
+ "name": "additional_details",
17569
+ "description": "Optional additional details, such as grid displaying a list of items to be deleted",
17570
+ "parameters": [
17571
+ {
17572
+ "name": "system_arguments",
17573
+ "type": "Hash",
17574
+ "default": "N/A",
17575
+ "description": "{{link_to_system_arguments_docs}}"
17576
+ }
17577
+ ]
17578
+ }
17579
+ ],
17580
+ "methods": [
17581
+ {
17582
+ "name": "dialog_id",
17583
+ "description": "The dialog's ID value.",
17584
+ "parameters": [
17585
+
17586
+ ],
17587
+ "return_types": [
17588
+
17589
+ ]
17590
+ }
17591
+ ],
17592
+ "previews": [
17593
+ {
17594
+ "preview_path": "primer/open_project/danger_confirmation_dialog/default",
17595
+ "name": "default",
17596
+ "snapshot": "interactive",
17597
+ "skip_rules": {
17598
+ "wont_fix": [
17599
+ "region"
17600
+ ],
17601
+ "will_fix": [
17602
+ "color-contrast"
17603
+ ]
17604
+ }
17605
+ },
17606
+ {
17607
+ "preview_path": "primer/open_project/danger_confirmation_dialog/playground",
17608
+ "name": "playground",
17609
+ "snapshot": "false",
17610
+ "skip_rules": {
17611
+ "wont_fix": [
17612
+ "region"
17613
+ ],
17614
+ "will_fix": [
17615
+ "color-contrast"
17616
+ ]
17617
+ }
17618
+ },
17619
+ {
17620
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_form_builder_form",
17621
+ "name": "with_form_builder_form",
17622
+ "snapshot": "false",
17623
+ "skip_rules": {
17624
+ "wont_fix": [
17625
+ "region"
17626
+ ],
17627
+ "will_fix": [
17628
+ "color-contrast"
17629
+ ]
17630
+ }
17631
+ },
17632
+ {
17633
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_form",
17634
+ "name": "with_form",
17635
+ "snapshot": "false",
17636
+ "skip_rules": {
17637
+ "wont_fix": [
17638
+ "region"
17639
+ ],
17640
+ "will_fix": [
17641
+ "color-contrast"
17642
+ ]
17643
+ }
17644
+ },
17645
+ {
17646
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_additional_details",
17647
+ "name": "with_additional_details",
17648
+ "snapshot": "false",
17649
+ "skip_rules": {
17650
+ "wont_fix": [
17651
+ "region"
17652
+ ],
17653
+ "will_fix": [
17654
+ "color-contrast"
17655
+ ]
17656
+ }
17657
+ },
17658
+ {
17659
+ "preview_path": "primer/open_project/danger_confirmation_dialog/custom_icon",
17660
+ "name": "custom_icon",
17661
+ "snapshot": "false",
17662
+ "skip_rules": {
17663
+ "wont_fix": [
17664
+ "region"
17665
+ ],
17666
+ "will_fix": [
17667
+ "color-contrast"
17668
+ ]
17669
+ }
17670
+ }
17671
+ ],
17672
+ "subcomponents": [
17673
+
17674
+ ]
17675
+ },
17676
+ {
17677
+ "fully_qualified_name": "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
17678
+ "description": "This component is part of `Primer::OpenProject::DangerConfirmationDialog`\nand should not be used as a standalone component.",
17679
+ "accessibility_docs": null,
17680
+ "is_form_component": false,
17681
+ "is_published": true,
17682
+ "requires_js": false,
17683
+ "component": "OpenProject::DangerConfirmationDialog::ConfirmationCheckBox",
17684
+ "status": "open_project",
17685
+ "a11y_reviewed": false,
17686
+ "short_name": "OpenProjectDangerConfirmationDialogConfirmationCheckBox",
17687
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/confirmation_check_box.rb",
17688
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/confirmation_check_box/default/",
17689
+ "parameters": [
17690
+ {
17691
+ "name": "check_box_id",
17692
+ "type": "String",
17693
+ "default": "`self.class.generate_id`",
17694
+ "description": "The id of the check_box input."
17695
+ },
17696
+ {
17697
+ "name": "check_box_name",
17698
+ "type": "String",
17699
+ "default": "N/A",
17700
+ "description": "The name of the check_box input."
17701
+ },
17702
+ {
17703
+ "name": "system_arguments",
17704
+ "type": "Hash",
17705
+ "default": "N/A",
17706
+ "description": "{{link_to_system_arguments_docs}}"
17707
+ }
17708
+ ],
17709
+ "slots": [
17710
+
17711
+ ],
17712
+ "methods": [
17713
+
17714
+ ],
17715
+ "previews": [
17716
+
17717
+ ],
17718
+ "subcomponents": [
17719
+
17720
+ ]
17721
+ },
17722
+ {
17723
+ "fully_qualified_name": "Primer::OpenProject::DangerConfirmationDialog::FormWrapper",
17724
+ "description": "Utility component for wrapping DangerConfirmationDialog in a form",
17725
+ "accessibility_docs": null,
17726
+ "is_form_component": false,
17727
+ "is_published": true,
17728
+ "requires_js": false,
17729
+ "component": "OpenProject::DangerConfirmationDialog::FormWrapper",
17730
+ "status": "open_project",
17731
+ "a11y_reviewed": false,
17732
+ "short_name": "OpenProjectDangerConfirmationDialogFormWrapper",
17733
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/danger_confirmation_dialog/form_wrapper.rb",
17734
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/danger_confirmation_dialog/form_wrapper/default/",
17735
+ "parameters": [
17736
+
17737
+ ],
17738
+ "slots": [
17739
+
17740
+ ],
17741
+ "methods": [
17742
+
17743
+ ],
17744
+ "previews": [
17745
+
17746
+ ],
17747
+ "subcomponents": [
17748
+
17749
+ ]
17750
+ },
17388
17751
  {
17389
17752
  "fully_qualified_name": "Primer::OpenProject::DragHandle",
17390
17753
  "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
@@ -17468,20 +17831,8 @@
17468
17831
  "slots": [
17469
17832
  {
17470
17833
  "name": "feedback_message",
17471
- "description": "A feedback message with some defaults that are necessary for rendering nicely",
17834
+ "description": "A feedback message with some defaults that are necessary for rendering nicely.\n\nTo render the message heading (required), call the `with_heading` method, which accepts a `:tag` argument, along with the arguments accepted by {{#link_to_component}}Primer::Beta::Heading{{/link_to_component}}.\n\nTo render the message description, call the `with_description` method, which accepts {{link_to_system_arguments_docs}}",
17472
17835
  "parameters": [
17473
- {
17474
- "name": "heading",
17475
- "type": "String",
17476
- "default": "N/A",
17477
- "description": "the heading for the success message"
17478
- },
17479
- {
17480
- "name": "description",
17481
- "type": "String",
17482
- "default": "N/A",
17483
- "description": "the description for the success message"
17484
- },
17485
17836
  {
17486
17837
  "name": "icon_arguments",
17487
17838
  "type": "Hash",
@@ -17498,7 +17849,7 @@
17498
17849
  },
17499
17850
  {
17500
17851
  "name": "additional_details",
17501
- "description": "Optional additional_details like a form input or toast.",
17852
+ "description": "Optional additional details, like a form input or toast.",
17502
17853
  "parameters": [
17503
17854
  {
17504
17855
  "name": "system_arguments",
@@ -19057,6 +19408,6 @@
19057
19408
  "component": "BaseComponent",
19058
19409
  "fully_qualified_name": "Primer::BaseComponent",
19059
19410
  "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```",
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. |"
19411
+ "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. |\n| trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. |"
19061
19412
  }
19062
19413
  ]
data/static/previews.json CHANGED
@@ -3108,6 +3108,92 @@
3108
3108
  }
3109
3109
  ]
3110
3110
  },
3111
+ {
3112
+ "name": "danger_confirmation_dialog",
3113
+ "component": "OpenProject::DangerConfirmationDialog",
3114
+ "status": "open_project",
3115
+ "lookup_path": "primer/open_project/danger_confirmation_dialog",
3116
+ "examples": [
3117
+ {
3118
+ "preview_path": "primer/open_project/danger_confirmation_dialog/default",
3119
+ "name": "default",
3120
+ "snapshot": "interactive",
3121
+ "skip_rules": {
3122
+ "wont_fix": [
3123
+ "region"
3124
+ ],
3125
+ "will_fix": [
3126
+ "color-contrast"
3127
+ ]
3128
+ }
3129
+ },
3130
+ {
3131
+ "preview_path": "primer/open_project/danger_confirmation_dialog/playground",
3132
+ "name": "playground",
3133
+ "snapshot": "false",
3134
+ "skip_rules": {
3135
+ "wont_fix": [
3136
+ "region"
3137
+ ],
3138
+ "will_fix": [
3139
+ "color-contrast"
3140
+ ]
3141
+ }
3142
+ },
3143
+ {
3144
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_form_builder_form",
3145
+ "name": "with_form_builder_form",
3146
+ "snapshot": "false",
3147
+ "skip_rules": {
3148
+ "wont_fix": [
3149
+ "region"
3150
+ ],
3151
+ "will_fix": [
3152
+ "color-contrast"
3153
+ ]
3154
+ }
3155
+ },
3156
+ {
3157
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_form",
3158
+ "name": "with_form",
3159
+ "snapshot": "false",
3160
+ "skip_rules": {
3161
+ "wont_fix": [
3162
+ "region"
3163
+ ],
3164
+ "will_fix": [
3165
+ "color-contrast"
3166
+ ]
3167
+ }
3168
+ },
3169
+ {
3170
+ "preview_path": "primer/open_project/danger_confirmation_dialog/with_additional_details",
3171
+ "name": "with_additional_details",
3172
+ "snapshot": "false",
3173
+ "skip_rules": {
3174
+ "wont_fix": [
3175
+ "region"
3176
+ ],
3177
+ "will_fix": [
3178
+ "color-contrast"
3179
+ ]
3180
+ }
3181
+ },
3182
+ {
3183
+ "preview_path": "primer/open_project/danger_confirmation_dialog/custom_icon",
3184
+ "name": "custom_icon",
3185
+ "snapshot": "false",
3186
+ "skip_rules": {
3187
+ "wont_fix": [
3188
+ "region"
3189
+ ],
3190
+ "will_fix": [
3191
+ "color-contrast"
3192
+ ]
3193
+ }
3194
+ }
3195
+ ]
3196
+ },
3111
3197
  {
3112
3198
  "name": "details",
3113
3199
  "component": "Details",
@@ -5017,6 +5103,32 @@
5017
5103
  "color-contrast"
5018
5104
  ]
5019
5105
  }
5106
+ },
5107
+ {
5108
+ "preview_path": "primer/beta/link/with_leading_icon",
5109
+ "name": "with_leading_icon",
5110
+ "snapshot": "false",
5111
+ "skip_rules": {
5112
+ "wont_fix": [
5113
+ "region"
5114
+ ],
5115
+ "will_fix": [
5116
+ "color-contrast"
5117
+ ]
5118
+ }
5119
+ },
5120
+ {
5121
+ "preview_path": "primer/beta/link/with_trailing_icon",
5122
+ "name": "with_trailing_icon",
5123
+ "snapshot": "false",
5124
+ "skip_rules": {
5125
+ "wont_fix": [
5126
+ "region"
5127
+ ],
5128
+ "will_fix": [
5129
+ "color-contrast"
5130
+ ]
5131
+ }
5020
5132
  }
5021
5133
  ]
5022
5134
  },
@@ -7782,6 +7894,71 @@
7782
7894
  ]
7783
7895
  }
7784
7896
  },
7897
+ {
7898
+ "preview_path": "primer/alpha/text_field/with_trailing_icon",
7899
+ "name": "with_trailing_icon",
7900
+ "snapshot": "true",
7901
+ "skip_rules": {
7902
+ "wont_fix": [
7903
+ "region"
7904
+ ],
7905
+ "will_fix": [
7906
+ "color-contrast"
7907
+ ]
7908
+ }
7909
+ },
7910
+ {
7911
+ "preview_path": "primer/alpha/text_field/with_trailing_text",
7912
+ "name": "with_trailing_text",
7913
+ "snapshot": "true",
7914
+ "skip_rules": {
7915
+ "wont_fix": [
7916
+ "region"
7917
+ ],
7918
+ "will_fix": [
7919
+ "color-contrast"
7920
+ ]
7921
+ }
7922
+ },
7923
+ {
7924
+ "preview_path": "primer/alpha/text_field/with_trailing_long_text",
7925
+ "name": "with_trailing_long_text",
7926
+ "snapshot": "true",
7927
+ "skip_rules": {
7928
+ "wont_fix": [
7929
+ "region"
7930
+ ],
7931
+ "will_fix": [
7932
+ "color-contrast"
7933
+ ]
7934
+ }
7935
+ },
7936
+ {
7937
+ "preview_path": "primer/alpha/text_field/with_trailing_counter",
7938
+ "name": "with_trailing_counter",
7939
+ "snapshot": "true",
7940
+ "skip_rules": {
7941
+ "wont_fix": [
7942
+ "region"
7943
+ ],
7944
+ "will_fix": [
7945
+ "color-contrast"
7946
+ ]
7947
+ }
7948
+ },
7949
+ {
7950
+ "preview_path": "primer/alpha/text_field/with_trailing_label",
7951
+ "name": "with_trailing_label",
7952
+ "snapshot": "true",
7953
+ "skip_rules": {
7954
+ "wont_fix": [
7955
+ "region"
7956
+ ],
7957
+ "will_fix": [
7958
+ "color-contrast"
7959
+ ]
7960
+ }
7961
+ },
7785
7962
  {
7786
7963
  "preview_path": "primer/alpha/text_field/with_leading_visual",
7787
7964
  "name": "with_leading_visual",
data/static/statuses.json CHANGED
@@ -118,6 +118,9 @@
118
118
  "Primer::Navigation::TabComponent": "deprecated",
119
119
  "Primer::OpenProject::BorderGrid": "open_project",
120
120
  "Primer::OpenProject::BorderGrid::Cell": "open_project",
121
+ "Primer::OpenProject::DangerConfirmationDialog": "open_project",
122
+ "Primer::OpenProject::DangerConfirmationDialog::ConfirmationCheckBox": "open_project",
123
+ "Primer::OpenProject::DangerConfirmationDialog::FormWrapper": "open_project",
121
124
  "Primer::OpenProject::DragHandle": "open_project",
122
125
  "Primer::OpenProject::FeedbackDialog": "open_project",
123
126
  "Primer::OpenProject::FeedbackMessage": "open_project",
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: openproject-primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.52.0
4
+ version: 0.52.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-01-13 00:00:00.000000000 Z
12
+ date: 2025-01-17 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview