openproject-primer_view_components 0.52.0 → 0.52.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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