openproject-primer_view_components 0.22.1 → 0.23.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +34 -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_bar_element.js +16 -10
  8. data/app/components/primer/alpha/action_bar_element.ts +10 -4
  9. data/app/components/primer/alpha/action_menu/action_menu_element.js +16 -20
  10. data/app/components/primer/alpha/action_menu/action_menu_element.ts +4 -1
  11. data/app/components/primer/alpha/banner.html.erb +1 -2
  12. data/app/components/primer/alpha/banner.rb +21 -0
  13. data/app/components/primer/alpha/dialog.rb +0 -1
  14. data/app/components/primer/alpha/modal_dialog.js +11 -10
  15. data/app/components/primer/alpha/modal_dialog.ts +3 -0
  16. data/app/components/primer/alpha/segmented_control.js +2 -3
  17. data/app/components/primer/alpha/toggle_switch.js +2 -2
  18. data/app/components/primer/alpha/toggle_switch.ts +2 -2
  19. data/app/components/primer/alpha/tool_tip.js +6 -7
  20. data/app/components/primer/alpha/tool_tip.ts +1 -0
  21. data/app/components/primer/beta/button.css +1 -1
  22. data/app/components/primer/beta/button.css.json +0 -1
  23. data/app/components/primer/beta/button.css.map +1 -1
  24. data/app/components/primer/beta/button.pcss +1 -5
  25. data/app/components/primer/beta/button_group.rb +53 -1
  26. data/app/components/primer/beta/clipboard_copy.ts +1 -1
  27. data/app/components/primer/beta/flash.rb +3 -1
  28. data/app/components/primer/beta/nav_list.js +8 -10
  29. data/app/components/primer/beta/nav_list.ts +2 -0
  30. data/app/components/primer/beta/nav_list_group_element.js +2 -3
  31. data/app/components/primer/dialog_helper.js +39 -20
  32. data/app/components/primer/dialog_helper.ts +40 -14
  33. data/app/components/primer/focus_group.js +9 -12
  34. data/app/components/primer/focus_group.ts +1 -1
  35. data/lib/primer/deprecations.yml +5 -0
  36. data/lib/primer/forms/primer_multi_input.js +2 -3
  37. data/lib/primer/forms/primer_text_field.js +2 -4
  38. data/lib/primer/view_components/version.rb +2 -2
  39. data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb +13 -2
  40. data/previews/primer/alpha/dialog_preview.rb +1 -0
  41. data/previews/primer/beta/button_group_preview/with_menu_button.html.erb +7 -0
  42. data/previews/primer/beta/button_group_preview.rb +6 -0
  43. data/static/arguments.json +23 -1
  44. data/static/audited_at.json +1 -0
  45. data/static/constants.json +3 -0
  46. data/static/info_arch.json +69 -5
  47. data/static/previews.json +15 -2
  48. data/static/statuses.json +2 -1
  49. metadata +4 -4
  50. data/previews/primer/beta/button_group_preview/action_menus.html.erb +0 -8
@@ -39,6 +39,12 @@ module Primer
39
39
  end
40
40
  end
41
41
 
42
+ # @label With menu button
43
+ #
44
+ # @snapshot
45
+ def with_menu_button
46
+ end
47
+
42
48
  # @label Icon buttons
43
49
  #
44
50
  # @param size [Symbol] select [medium, small]
@@ -3436,6 +3436,28 @@
3436
3436
  }
3437
3437
  ]
3438
3438
  },
3439
+ {
3440
+ "component": "ButtonGroup::MenuButton",
3441
+ "status": "alpha",
3442
+ "a11y_reviewed": false,
3443
+ "short_name": "ButtonGroupMenuButton",
3444
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group/menu_button.rb",
3445
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/menu_button/default/",
3446
+ "parameters": [
3447
+ {
3448
+ "name": "menu_arguments",
3449
+ "type": "Hash",
3450
+ "default": "`{}`",
3451
+ "description": "The arguments accepted by [ActionMenu](/components/alpha/actionmenu)."
3452
+ },
3453
+ {
3454
+ "name": "button_arguments",
3455
+ "type": "Hash",
3456
+ "default": "`{}`",
3457
+ "description": "The arguments accepted by [Button](/components/beta/button) or [IconButton](/components/beta/iconbutton), depending on the value of the `icon:` argument."
3458
+ }
3459
+ ]
3460
+ },
3439
3461
  {
3440
3462
  "component": "ClipboardCopy",
3441
3463
  "status": "beta",
@@ -3648,7 +3670,7 @@
3648
3670
  },
3649
3671
  {
3650
3672
  "component": "Flash",
3651
- "status": "beta",
3673
+ "status": "deprecated",
3652
3674
  "a11y_reviewed": false,
3653
3675
  "short_name": "Flash",
3654
3676
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
@@ -75,6 +75,7 @@
75
75
  "Primer::Beta::Breadcrumbs::Item": "",
76
76
  "Primer::Beta::Button": "",
77
77
  "Primer::Beta::ButtonGroup": "",
78
+ "Primer::Beta::ButtonGroup::MenuButton": "",
78
79
  "Primer::Beta::ClipboardCopy": "",
79
80
  "Primer::Beta::ClipboardCopyBaseButton": "",
80
81
  "Primer::Beta::ClipboardCopyButton": "",
@@ -848,6 +848,9 @@
848
848
  ]
849
849
  },
850
850
  "Primer::Beta::ButtonGroup": {
851
+ "MenuButton": "Primer::Beta::ButtonGroup::MenuButton"
852
+ },
853
+ "Primer::Beta::ButtonGroup::MenuButton": {
851
854
  },
852
855
  "Primer::Beta::ClipboardCopy": {
853
856
  },
@@ -2232,7 +2232,7 @@
2232
2232
  {
2233
2233
  "fully_qualified_name": "Primer::Alpha::Banner",
2234
2234
  "description": "Use `Banner` to highlight important information.",
2235
- "accessibility_docs": null,
2235
+ "accessibility_docs": "Given that Banner is made visually prominent to sighted users through the use of icons and color, consider providing a heading and designating the Banner as a region landmark to improve navigability and discoverability of the Banner of assistive technology users. At this time, the PVC Banner does not render a heading nor render as a region landmark by default. This may be introduced in the future [as a breaking API change](https://github.com/primer/view_components/issues/2619). For now, consider providing an appropriate heading inside of the Banner and rendering the Banner as a `<section>` tag with `aria-labelledby=\"switch-this-with-banner-heading-id\"` to implicitly designate the Banner as a region landmark.\n\nA Banner can be used in one of two ways – to highlight information on a page, or to communicate an urgent message/feedback for a user action. For the latter scenario, it may be necessary to use a live region or focus management technique to ensure that the Banner is discoverable and accessible for all users. Otherwise, the Banner can easily be missed, including by those using magnification software or screen reader users who may not realize that a Banner has appeared. The appropriate technique to use is highly context-dependent. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility) or defer to the accessibility team to determine if your scenario requires either techniques.\n\n### Announcing a Banner\n When a Banner is used to communicate non-critical feedback, or is used in critical scenarios where moving focus is considered too disruptive, use a live region announcement to announce the content of the Banner to screen reader users.\n\n Live regions can be finicky and don't work well when injected dynamically. Setting a live region attribute on the Banner itself is discouraged as it will not announce as expected for most screen readers.\n\n To ensure a Banner is announced reliably, make sure that there's a live region container that is already on the page. When the Banner is shown, populate the live region container with the content of the Banner. This can be done in one of two ways. The first is to rely on a global live region container that is guaranteed to be on the page. When the Banner appears, populate this global live region container with the Banner content. The second technique is to hide or show the Banner within a live region wrapper that is guaranteed to always be on the page.\n\n For more information about either technique, visit [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region). This guidance is subject to change.\n\n### Focusing a Banner\n Focusing a Banner when it appears helps to maximize discoverability of the message, especially in critical scenarios.\n\n To properly focus a banner, add a `tabindex=\"-1\"` to the Banner container, and focus that container (one way is using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).\n\n For more information about the focus management technique, visit the [Staff only: Accessible Banner Prototype docs](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#consideration). This guidance is subject to change.",
2236
2236
  "is_form_component": false,
2237
2237
  "is_published": true,
2238
2238
  "requires_js": true,
@@ -3379,7 +3379,7 @@
3379
3379
  {
3380
3380
  "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
3381
3381
  "name": "dialog_inside_overlay",
3382
- "snapshot": "false",
3382
+ "snapshot": "interactive",
3383
3383
  "skip_rules": {
3384
3384
  "wont_fix": [
3385
3385
  "region"
@@ -11038,7 +11038,7 @@
11038
11038
  "slots": [
11039
11039
  {
11040
11040
  "name": "buttons",
11041
- "description": "List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).",
11041
+ "description": "List of buttons to be rendered. Add buttons via the `#with_button`, `#with_menu_button`, and `#with_clipboard_copy_button` methods (see below).",
11042
11042
  "parameters": [
11043
11043
 
11044
11044
  ]
@@ -11063,6 +11063,18 @@
11063
11063
  }
11064
11064
  ]
11065
11065
  },
11066
+ {
11067
+ "name": "with_menu_button",
11068
+ "description": "Adds a button that activates a menu when clicked.",
11069
+ "parameters": [
11070
+ {
11071
+ "name": "system_arguments",
11072
+ "type": "Hash",
11073
+ "default": "N/A",
11074
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
11075
+ }
11076
+ ]
11077
+ },
11066
11078
  {
11067
11079
  "name": "with_clipboard_copy_button",
11068
11080
  "description": "Adds a {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}.",
@@ -11116,6 +11128,19 @@
11116
11128
  ]
11117
11129
  }
11118
11130
  },
11131
+ {
11132
+ "preview_path": "primer/beta/button_group/with_menu_button",
11133
+ "name": "with_menu_button",
11134
+ "snapshot": "true",
11135
+ "skip_rules": {
11136
+ "wont_fix": [
11137
+ "region"
11138
+ ],
11139
+ "will_fix": [
11140
+ "color-contrast"
11141
+ ]
11142
+ }
11143
+ },
11119
11144
  {
11120
11145
  "preview_path": "primer/beta/button_group/icon_buttons",
11121
11146
  "name": "icon_buttons",
@@ -11157,7 +11182,46 @@
11157
11182
  }
11158
11183
  ],
11159
11184
  "subcomponents": [
11185
+ {
11186
+ "fully_qualified_name": "Primer::Beta::ButtonGroup::MenuButton",
11187
+ "description": "Renders a button in a {{#link_to_component}}Primer::Beta::ButtonGroup{{/link_to_component}} that displays an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} when clicked.\nThis component should not be used outside of a `ButtonGroup` context.\n\nThis component yields both the button and the list to the block when rendered.\n\n```erb\n<%= render(Primer::Beta::ButtonGroup.new) do |group| %>\n <% group.with_menu_button do |menu, button| %>\n <% menu.with_item(label: \"Item 1\") %>\n <% button.with_trailing_visual_icon(icon: \"triangle-down\") %>\n <% end %>\n<% end %>\n```",
11188
+ "accessibility_docs": null,
11189
+ "is_form_component": false,
11190
+ "is_published": true,
11191
+ "requires_js": false,
11192
+ "component": "ButtonGroup::MenuButton",
11193
+ "status": "alpha",
11194
+ "a11y_reviewed": false,
11195
+ "short_name": "ButtonGroupMenuButton",
11196
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group/menu_button.rb",
11197
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/menu_button/default/",
11198
+ "parameters": [
11199
+ {
11200
+ "name": "menu_arguments",
11201
+ "type": "Hash",
11202
+ "default": "`{}`",
11203
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}}."
11204
+ },
11205
+ {
11206
+ "name": "button_arguments",
11207
+ "type": "Hash",
11208
+ "default": "`{}`",
11209
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
11210
+ }
11211
+ ],
11212
+ "slots": [
11213
+
11214
+ ],
11215
+ "methods": [
11216
+
11217
+ ],
11218
+ "previews": [
11160
11219
 
11220
+ ],
11221
+ "subcomponents": [
11222
+
11223
+ ]
11224
+ }
11161
11225
  ]
11162
11226
  },
11163
11227
  {
@@ -11890,13 +11954,13 @@
11890
11954
  },
11891
11955
  {
11892
11956
  "fully_qualified_name": "Primer::Beta::Flash",
11893
- "description": "Use `Flash` to inform users of successful or pending actions.",
11957
+ "description": "This component has been deprecated. Use [Banner]({{#link_to_component}}Primer::Alpha::Banner{{/link_to_component}}) instead.\n\nUse `Flash` to inform users of successful or pending actions.",
11894
11958
  "accessibility_docs": null,
11895
11959
  "is_form_component": false,
11896
11960
  "is_published": true,
11897
11961
  "requires_js": false,
11898
11962
  "component": "Flash",
11899
- "status": "beta",
11963
+ "status": "deprecated",
11900
11964
  "a11y_reviewed": false,
11901
11965
  "short_name": "Flash",
11902
11966
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
data/static/previews.json CHANGED
@@ -2283,6 +2283,19 @@
2283
2283
  ]
2284
2284
  }
2285
2285
  },
2286
+ {
2287
+ "preview_path": "primer/beta/button_group/with_menu_button",
2288
+ "name": "with_menu_button",
2289
+ "snapshot": "true",
2290
+ "skip_rules": {
2291
+ "wont_fix": [
2292
+ "region"
2293
+ ],
2294
+ "will_fix": [
2295
+ "color-contrast"
2296
+ ]
2297
+ }
2298
+ },
2286
2299
  {
2287
2300
  "preview_path": "primer/beta/button_group/icon_buttons",
2288
2301
  "name": "icon_buttons",
@@ -3190,7 +3203,7 @@
3190
3203
  {
3191
3204
  "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
3192
3205
  "name": "dialog_inside_overlay",
3193
- "snapshot": "false",
3206
+ "snapshot": "interactive",
3194
3207
  "skip_rules": {
3195
3208
  "wont_fix": [
3196
3209
  "region"
@@ -3442,7 +3455,7 @@
3442
3455
  {
3443
3456
  "name": "flash",
3444
3457
  "component": "Flash",
3445
- "status": "beta",
3458
+ "status": "deprecated",
3446
3459
  "lookup_path": "primer/beta/flash",
3447
3460
  "examples": [
3448
3461
  {
data/static/statuses.json CHANGED
@@ -75,13 +75,14 @@
75
75
  "Primer::Beta::Breadcrumbs::Item": "alpha",
76
76
  "Primer::Beta::Button": "beta",
77
77
  "Primer::Beta::ButtonGroup": "beta",
78
+ "Primer::Beta::ButtonGroup::MenuButton": "alpha",
78
79
  "Primer::Beta::ClipboardCopy": "beta",
79
80
  "Primer::Beta::ClipboardCopyBaseButton": "beta",
80
81
  "Primer::Beta::ClipboardCopyButton": "beta",
81
82
  "Primer::Beta::CloseButton": "beta",
82
83
  "Primer::Beta::Counter": "beta",
83
84
  "Primer::Beta::Details": "beta",
84
- "Primer::Beta::Flash": "beta",
85
+ "Primer::Beta::Flash": "deprecated",
85
86
  "Primer::Beta::Heading": "beta",
86
87
  "Primer::Beta::IconButton": "beta",
87
88
  "Primer::Beta::Label": "beta",
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.22.1
4
+ version: 0.23.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-02-05 00:00:00.000000000 Z
12
+ date: 2024-03-05 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -827,7 +827,7 @@ files:
827
827
  - previews/primer/beta/border_box_preview.rb
828
828
  - previews/primer/beta/breadcrumbs_preview.rb
829
829
  - previews/primer/beta/button_group_preview.rb
830
- - previews/primer/beta/button_group_preview/action_menus.html.erb
830
+ - previews/primer/beta/button_group_preview/with_menu_button.html.erb
831
831
  - previews/primer/beta/button_preview.rb
832
832
  - previews/primer/beta/button_preview/all_schemes.html.erb
833
833
  - previews/primer/beta/button_preview/invisible_all_visuals.html.erb
@@ -916,7 +916,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
916
916
  requirements:
917
917
  - - ">="
918
918
  - !ruby/object:Gem::Version
919
- version: 2.6.0
919
+ version: 2.7.0
920
920
  required_rubygems_version: !ruby/object:Gem::Requirement
921
921
  requirements:
922
922
  - - ">="
@@ -1,8 +0,0 @@
1
- <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
2
- <% component.with_button() { "Main menu" } %>
3
- <% component.with_button(icon: "triangle-down", "aria-label": "secondary menu", data: { "menu-id": "my-id" }) %>
4
- <% end %>
5
-
6
- <%= render(Primer::Alpha::ActionMenu.new(anchor_align: :end, menu_id: "my-id")) do |component| %>
7
- <% component.with_item(label: "Item", tag: :button, value: "") %>
8
- <% end %>