openproject-primer_view_components 0.20.0 → 0.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +36 -0
  3. data/app/assets/javascripts/app/components/primer/dialog_helper.d.ts +15 -0
  4. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_list.pcss +11 -33
  12. data/app/components/primer/alpha/action_menu/action_menu_element.js +8 -0
  13. data/app/components/primer/alpha/action_menu/action_menu_element.ts +8 -0
  14. data/app/components/primer/alpha/action_menu.rb +3 -1
  15. data/app/components/primer/alpha/banner.rb +7 -3
  16. data/app/components/primer/alpha/dialog.css +1 -1
  17. data/app/components/primer/alpha/dialog.css.json +12 -27
  18. data/app/components/primer/alpha/dialog.css.map +1 -1
  19. data/app/components/primer/alpha/dialog.html.erb +2 -2
  20. data/app/components/primer/alpha/dialog.pcss +78 -143
  21. data/app/components/primer/alpha/dialog.rb +10 -13
  22. data/app/components/primer/alpha/overlay.css +1 -1
  23. data/app/components/primer/alpha/overlay.css.json +1 -0
  24. data/app/components/primer/alpha/overlay.css.map +1 -1
  25. data/app/components/primer/alpha/overlay.pcss +1 -1
  26. data/app/components/primer/alpha/segmented_control.css +1 -1
  27. data/app/components/primer/alpha/segmented_control.css.json +0 -4
  28. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  29. data/app/components/primer/alpha/segmented_control.pcss +1 -18
  30. data/app/components/primer/alpha/segmented_control.rb +0 -1
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.map +1 -1
  33. data/app/components/primer/base_component.rb +1 -1
  34. data/app/components/primer/dialog_helper.d.ts +15 -0
  35. data/app/components/primer/dialog_helper.js +88 -0
  36. data/app/components/primer/dialog_helper.ts +92 -0
  37. data/app/components/primer/open_project/page_header.rb +3 -3
  38. data/app/components/primer/primer.d.ts +1 -0
  39. data/app/components/primer/primer.js +1 -0
  40. data/app/components/primer/primer.ts +1 -0
  41. data/lib/primer/classify/utilities.rb +1 -1
  42. data/lib/primer/deprecations.yml +3 -3
  43. data/lib/primer/forms/dsl/button_input.rb +4 -0
  44. data/lib/primer/forms/dsl/check_box_input.rb +6 -0
  45. data/lib/primer/forms/dsl/hidden_input.rb +4 -0
  46. data/lib/primer/forms/dsl/input.rb +7 -3
  47. data/lib/primer/forms/dsl/radio_button_input.rb +6 -0
  48. data/lib/primer/forms/dsl/select_input.rb +3 -1
  49. data/lib/primer/forms/dsl/submit_button_input.rb +4 -0
  50. data/lib/primer/forms/form_control.html.erb +3 -1
  51. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  52. data/lib/primer/view_components/version.rb +1 -1
  53. data/lib/primer/yard/docs_helper.rb +1 -1
  54. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
  55. data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +35 -0
  56. data/previews/primer/alpha/dialog_preview.rb +61 -1
  57. data/previews/primer/alpha/segmented_control_preview.rb +1 -52
  58. data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +2 -3
  59. data/previews/primer/alpha/tooltip_preview.rb +1 -1
  60. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -1
  61. data/previews/primer/beta/button_preview.rb +4 -2
  62. data/previews/primer/forms_preview/custom_width_fields_form.html.erb +2 -0
  63. data/previews/primer/open_project/page_header_preview.rb +4 -4
  64. data/static/arguments.json +12 -0
  65. data/static/classes.json +5 -23
  66. data/static/constants.json +19 -15
  67. data/static/info_arch.json +67 -68
  68. data/static/previews.json +54 -67
  69. metadata +8 -3
@@ -1627,6 +1627,19 @@
1627
1627
  ]
1628
1628
  }
1629
1629
  },
1630
+ {
1631
+ "preview_path": "primer/alpha/action_menu/in_scroll_container",
1632
+ "name": "in_scroll_container",
1633
+ "snapshot": "false",
1634
+ "skip_rules": {
1635
+ "wont_fix": [
1636
+ "region"
1637
+ ],
1638
+ "will_fix": [
1639
+ "color-contrast"
1640
+ ]
1641
+ }
1642
+ },
1630
1643
  {
1631
1644
  "preview_path": "primer/alpha/action_menu/align_end",
1632
1645
  "name": "align_end",
@@ -2230,6 +2243,12 @@
2230
2243
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
2231
2244
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
2232
2245
  "parameters": [
2246
+ {
2247
+ "name": "tag",
2248
+ "type": "Symbol",
2249
+ "default": "`:div`",
2250
+ "description": "One of `:div` or `:section`."
2251
+ },
2233
2252
  {
2234
2253
  "name": "full",
2235
2254
  "type": "Boolean",
@@ -2248,6 +2267,12 @@
2248
2267
  "default": "`:none`",
2249
2268
  "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
2250
2269
  },
2270
+ {
2271
+ "name": "dismiss_label",
2272
+ "type": "String",
2273
+ "default": "`Dismiss`",
2274
+ "description": "The aria-label text of the dismiss \"x\" button"
2275
+ },
2251
2276
  {
2252
2277
  "name": "description",
2253
2278
  "type": "String",
@@ -3311,6 +3336,45 @@
3311
3336
  "color-contrast"
3312
3337
  ]
3313
3338
  }
3339
+ },
3340
+ {
3341
+ "preview_path": "primer/alpha/dialog/left_side",
3342
+ "name": "left_side",
3343
+ "snapshot": "interactive",
3344
+ "skip_rules": {
3345
+ "wont_fix": [
3346
+ "region"
3347
+ ],
3348
+ "will_fix": [
3349
+ "color-contrast"
3350
+ ]
3351
+ }
3352
+ },
3353
+ {
3354
+ "preview_path": "primer/alpha/dialog/right_side",
3355
+ "name": "right_side",
3356
+ "snapshot": "interactive",
3357
+ "skip_rules": {
3358
+ "wont_fix": [
3359
+ "region"
3360
+ ],
3361
+ "will_fix": [
3362
+ "color-contrast"
3363
+ ]
3364
+ }
3365
+ },
3366
+ {
3367
+ "preview_path": "primer/alpha/dialog/scroll_container",
3368
+ "name": "scroll_container",
3369
+ "snapshot": "interactive",
3370
+ "skip_rules": {
3371
+ "wont_fix": [
3372
+ "region"
3373
+ ],
3374
+ "will_fix": [
3375
+ "color-contrast"
3376
+ ]
3377
+ }
3314
3378
  }
3315
3379
  ],
3316
3380
  "subcomponents": [
@@ -6593,19 +6657,6 @@
6593
6657
  ]
6594
6658
  }
6595
6659
  },
6596
- {
6597
- "preview_path": "primer/alpha/segmented_control/full_width_large",
6598
- "name": "full_width_large",
6599
- "snapshot": "true",
6600
- "skip_rules": {
6601
- "wont_fix": [
6602
- "region"
6603
- ],
6604
- "will_fix": [
6605
- "color-contrast"
6606
- ]
6607
- }
6608
- },
6609
6660
  {
6610
6661
  "preview_path": "primer/alpha/segmented_control/icons_and_text_small",
6611
6662
  "name": "icons_and_text_small",
@@ -6632,19 +6683,6 @@
6632
6683
  ]
6633
6684
  }
6634
6685
  },
6635
- {
6636
- "preview_path": "primer/alpha/segmented_control/icons_and_text_large",
6637
- "name": "icons_and_text_large",
6638
- "snapshot": "true",
6639
- "skip_rules": {
6640
- "wont_fix": [
6641
- "region"
6642
- ],
6643
- "will_fix": [
6644
- "color-contrast"
6645
- ]
6646
- }
6647
- },
6648
6686
  {
6649
6687
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
6650
6688
  "name": "trailing_label_width_small",
@@ -6671,19 +6709,6 @@
6671
6709
  ]
6672
6710
  }
6673
6711
  },
6674
- {
6675
- "preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
6676
- "name": "trailing_label_width_large",
6677
- "snapshot": "true",
6678
- "skip_rules": {
6679
- "wont_fix": [
6680
- "region"
6681
- ],
6682
- "will_fix": [
6683
- "color-contrast"
6684
- ]
6685
- }
6686
- },
6687
6712
  {
6688
6713
  "preview_path": "primer/alpha/segmented_control/icon_only_small",
6689
6714
  "name": "icon_only_small",
@@ -6710,19 +6735,6 @@
6710
6735
  ]
6711
6736
  }
6712
6737
  },
6713
- {
6714
- "preview_path": "primer/alpha/segmented_control/icon_only_large",
6715
- "name": "icon_only_large",
6716
- "snapshot": "true",
6717
- "skip_rules": {
6718
- "wont_fix": [
6719
- "region"
6720
- ],
6721
- "will_fix": [
6722
- "color-contrast"
6723
- ]
6724
- }
6725
- },
6726
6738
  {
6727
6739
  "preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
6728
6740
  "name": "icon_only_full_width_small",
@@ -6749,19 +6761,6 @@
6749
6761
  ]
6750
6762
  }
6751
6763
  },
6752
- {
6753
- "preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
6754
- "name": "icon_only_full_width_large",
6755
- "snapshot": "false",
6756
- "skip_rules": {
6757
- "wont_fix": [
6758
- "region"
6759
- ],
6760
- "will_fix": [
6761
- "color-contrast"
6762
- ]
6763
- }
6764
- },
6765
6764
  {
6766
6765
  "preview_path": "primer/alpha/segmented_control/with_link_as_tag",
6767
6766
  "name": "with_link_as_tag",
@@ -16200,8 +16199,8 @@
16200
16199
  }
16201
16200
  },
16202
16201
  {
16203
- "preview_path": "primer/open_project/page_header/large_title",
16204
- "name": "large_title",
16202
+ "preview_path": "primer/open_project/page_header/medium_title",
16203
+ "name": "medium_title",
16205
16204
  "snapshot": "false",
16206
16205
  "skip_rules": {
16207
16206
  "wont_fix": [
@@ -16408,6 +16407,6 @@
16408
16407
  "component": "BaseComponent",
16409
16408
  "fully_qualified_name": "Primer::BaseComponent",
16410
16409
  "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/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```",
16411
- "args_md": "## HTML attributes\n\nSystem arguments include most HTML attributes. For example:\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| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\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 | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | 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. |"
16410
+ "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. |"
16412
16411
  }
16413
16412
  ]
data/static/previews.json CHANGED
@@ -658,6 +658,19 @@
658
658
  ]
659
659
  }
660
660
  },
661
+ {
662
+ "preview_path": "primer/alpha/action_menu/in_scroll_container",
663
+ "name": "in_scroll_container",
664
+ "snapshot": "false",
665
+ "skip_rules": {
666
+ "wont_fix": [
667
+ "region"
668
+ ],
669
+ "will_fix": [
670
+ "color-contrast"
671
+ ]
672
+ }
673
+ },
661
674
  {
662
675
  "preview_path": "primer/alpha/action_menu/align_end",
663
676
  "name": "align_end",
@@ -3134,6 +3147,45 @@
3134
3147
  "color-contrast"
3135
3148
  ]
3136
3149
  }
3150
+ },
3151
+ {
3152
+ "preview_path": "primer/alpha/dialog/left_side",
3153
+ "name": "left_side",
3154
+ "snapshot": "interactive",
3155
+ "skip_rules": {
3156
+ "wont_fix": [
3157
+ "region"
3158
+ ],
3159
+ "will_fix": [
3160
+ "color-contrast"
3161
+ ]
3162
+ }
3163
+ },
3164
+ {
3165
+ "preview_path": "primer/alpha/dialog/right_side",
3166
+ "name": "right_side",
3167
+ "snapshot": "interactive",
3168
+ "skip_rules": {
3169
+ "wont_fix": [
3170
+ "region"
3171
+ ],
3172
+ "will_fix": [
3173
+ "color-contrast"
3174
+ ]
3175
+ }
3176
+ },
3177
+ {
3178
+ "preview_path": "primer/alpha/dialog/scroll_container",
3179
+ "name": "scroll_container",
3180
+ "snapshot": "interactive",
3181
+ "skip_rules": {
3182
+ "wont_fix": [
3183
+ "region"
3184
+ ],
3185
+ "will_fix": [
3186
+ "color-contrast"
3187
+ ]
3188
+ }
3137
3189
  }
3138
3190
  ]
3139
3191
  },
@@ -4950,8 +5002,8 @@
4950
5002
  }
4951
5003
  },
4952
5004
  {
4953
- "preview_path": "primer/open_project/page_header/large_title",
4954
- "name": "large_title",
5005
+ "preview_path": "primer/open_project/page_header/medium_title",
5006
+ "name": "medium_title",
4955
5007
  "snapshot": "false",
4956
5008
  "skip_rules": {
4957
5009
  "wont_fix": [
@@ -5517,19 +5569,6 @@
5517
5569
  ]
5518
5570
  }
5519
5571
  },
5520
- {
5521
- "preview_path": "primer/alpha/segmented_control/full_width_large",
5522
- "name": "full_width_large",
5523
- "snapshot": "true",
5524
- "skip_rules": {
5525
- "wont_fix": [
5526
- "region"
5527
- ],
5528
- "will_fix": [
5529
- "color-contrast"
5530
- ]
5531
- }
5532
- },
5533
5572
  {
5534
5573
  "preview_path": "primer/alpha/segmented_control/icons_and_text_small",
5535
5574
  "name": "icons_and_text_small",
@@ -5556,19 +5595,6 @@
5556
5595
  ]
5557
5596
  }
5558
5597
  },
5559
- {
5560
- "preview_path": "primer/alpha/segmented_control/icons_and_text_large",
5561
- "name": "icons_and_text_large",
5562
- "snapshot": "true",
5563
- "skip_rules": {
5564
- "wont_fix": [
5565
- "region"
5566
- ],
5567
- "will_fix": [
5568
- "color-contrast"
5569
- ]
5570
- }
5571
- },
5572
5598
  {
5573
5599
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
5574
5600
  "name": "trailing_label_width_small",
@@ -5595,19 +5621,6 @@
5595
5621
  ]
5596
5622
  }
5597
5623
  },
5598
- {
5599
- "preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
5600
- "name": "trailing_label_width_large",
5601
- "snapshot": "true",
5602
- "skip_rules": {
5603
- "wont_fix": [
5604
- "region"
5605
- ],
5606
- "will_fix": [
5607
- "color-contrast"
5608
- ]
5609
- }
5610
- },
5611
5624
  {
5612
5625
  "preview_path": "primer/alpha/segmented_control/icon_only_small",
5613
5626
  "name": "icon_only_small",
@@ -5634,19 +5647,6 @@
5634
5647
  ]
5635
5648
  }
5636
5649
  },
5637
- {
5638
- "preview_path": "primer/alpha/segmented_control/icon_only_large",
5639
- "name": "icon_only_large",
5640
- "snapshot": "true",
5641
- "skip_rules": {
5642
- "wont_fix": [
5643
- "region"
5644
- ],
5645
- "will_fix": [
5646
- "color-contrast"
5647
- ]
5648
- }
5649
- },
5650
5650
  {
5651
5651
  "preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
5652
5652
  "name": "icon_only_full_width_small",
@@ -5673,19 +5673,6 @@
5673
5673
  ]
5674
5674
  }
5675
5675
  },
5676
- {
5677
- "preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
5678
- "name": "icon_only_full_width_large",
5679
- "snapshot": "false",
5680
- "skip_rules": {
5681
- "wont_fix": [
5682
- "region"
5683
- ],
5684
- "will_fix": [
5685
- "color-contrast"
5686
- ]
5687
- }
5688
- },
5689
5676
  {
5690
5677
  "preview_path": "primer/alpha/segmented_control/with_link_as_tag",
5691
5678
  "name": "with_link_as_tag",
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.20.0
4
+ version: 0.22.0
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: 2024-01-08 00:00:00.000000000 Z
12
+ date: 2024-02-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -99,6 +99,7 @@ files:
99
99
  - app/assets/javascripts/app/components/primer/beta/nav_list.d.ts
100
100
  - app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts
101
101
  - app/assets/javascripts/app/components/primer/beta/relative_time.d.ts
102
+ - app/assets/javascripts/app/components/primer/dialog_helper.d.ts
102
103
  - app/assets/javascripts/app/components/primer/focus_group.d.ts
103
104
  - app/assets/javascripts/app/components/primer/primer.d.ts
104
105
  - app/assets/javascripts/app/components/primer/scrollable_region.d.ts
@@ -445,6 +446,9 @@ files:
445
446
  - app/components/primer/component.rb
446
447
  - app/components/primer/conditional_wrapper.rb
447
448
  - app/components/primer/content.rb
449
+ - app/components/primer/dialog_helper.d.ts
450
+ - app/components/primer/dialog_helper.js
451
+ - app/components/primer/dialog_helper.ts
448
452
  - app/components/primer/focus_group.d.ts
449
453
  - app/components/primer/focus_group.js
450
454
  - app/components/primer/focus_group.ts
@@ -757,6 +761,7 @@ files:
757
761
  - previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb
758
762
  - previews/primer/alpha/dialog_preview/custom_header.html.erb
759
763
  - previews/primer/alpha/dialog_preview/nested_dialog.html.erb
764
+ - previews/primer/alpha/dialog_preview/scroll_container.html.erb
760
765
  - previews/primer/alpha/dialog_preview/test.html.erb
761
766
  - previews/primer/alpha/dialog_preview/with_auto_complete.html.erb
762
767
  - previews/primer/alpha/dialog_preview/with_footer.html.erb
@@ -917,7 +922,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
917
922
  - !ruby/object:Gem::Version
918
923
  version: '0'
919
924
  requirements: []
920
- rubygems_version: 3.4.10
925
+ rubygems_version: 3.4.19
921
926
  signing_key:
922
927
  specification_version: 4
923
928
  summary: ViewComponents of the Primer Design System for OpenProject