openproject-primer_view_components 0.37.1 → 0.38.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  4. data/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  5. data/app/assets/javascripts/app/components/primer/aria_live.d.ts +8 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +4 -0
  7. data/app/assets/javascripts/app/components/primer/shared_events.d.ts +9 -0
  8. data/app/assets/javascripts/primer_view_components.js +1 -1
  9. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  10. data/app/assets/styles/primer_view_components.css +1 -1
  11. data/app/assets/styles/primer_view_components.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.pcss +1 -0
  15. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +0 -11
  17. data/app/components/primer/alpha/action_menu.rb +13 -6
  18. data/app/components/primer/alpha/select_panel.html.erb +100 -0
  19. data/app/components/primer/alpha/select_panel.rb +473 -0
  20. data/app/components/primer/alpha/select_panel_element.d.ts +64 -0
  21. data/app/components/primer/alpha/select_panel_element.js +924 -0
  22. data/app/components/primer/alpha/select_panel_element.ts +1045 -0
  23. data/app/components/primer/aria_live.d.ts +8 -0
  24. data/app/components/primer/aria_live.js +38 -0
  25. data/app/components/primer/aria_live.ts +41 -0
  26. data/app/components/primer/base_component.rb +1 -1
  27. data/app/components/primer/primer.d.ts +4 -0
  28. data/app/components/primer/primer.js +4 -0
  29. data/app/components/primer/primer.ts +4 -0
  30. data/app/components/primer/shared_events.d.ts +9 -0
  31. data/app/components/primer/shared_events.js +1 -0
  32. data/app/components/primer/shared_events.ts +10 -0
  33. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -1
  34. data/lib/primer/forms/toggle_switch.html.erb +1 -2
  35. data/lib/primer/static/generate_info_arch.rb +3 -2
  36. data/lib/primer/view_components/version.rb +2 -2
  37. data/lib/primer/yard/component_manifest.rb +2 -0
  38. data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +25 -0
  39. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb +16 -0
  40. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb +12 -0
  41. data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb +16 -0
  42. data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb +23 -0
  43. data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +19 -0
  44. data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb +15 -0
  45. data/previews/primer/alpha/select_panel_preview/multiselect.html.erb +17 -0
  46. data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb +31 -0
  47. data/previews/primer/alpha/select_panel_preview/playground.html.erb +19 -0
  48. data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +16 -0
  49. data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +13 -0
  50. data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb +12 -0
  51. data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb +16 -0
  52. data/previews/primer/alpha/select_panel_preview/single_select.html.erb +20 -0
  53. data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb +33 -0
  54. data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb +19 -0
  55. data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb +23 -0
  56. data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb +24 -0
  57. data/previews/primer/alpha/select_panel_preview/with_leading_icons.html.erb +31 -0
  58. data/previews/primer/alpha/select_panel_preview/with_subtitle.html.erb +25 -0
  59. data/previews/primer/alpha/select_panel_preview/with_trailing_icons.html.erb +19 -0
  60. data/previews/primer/alpha/select_panel_preview.rb +239 -0
  61. data/static/arguments.json +118 -0
  62. data/static/audited_at.json +1 -0
  63. data/static/constants.json +16 -0
  64. data/static/info_arch.json +902 -112
  65. data/static/previews.json +294 -0
  66. data/static/statuses.json +1 -0
  67. metadata +41 -4
@@ -0,0 +1,8 @@
1
+ export declare function announceFromElement(el: HTMLElement, options?: {
2
+ assertive?: boolean;
3
+ element?: HTMLElement;
4
+ }): void;
5
+ export declare function announce(message: string, options?: {
6
+ assertive?: boolean;
7
+ element?: HTMLElement;
8
+ }): void;
@@ -0,0 +1,38 @@
1
+ const safeDocument = typeof document === 'undefined' ? undefined : document;
2
+ // Announce an element's text to the screen reader.
3
+ export function announceFromElement(el, options) {
4
+ announce(getTextContent(el), options);
5
+ }
6
+ // Announce message update to screen reader.
7
+ // Note: Use caution when using this function while a dialog is active.
8
+ // If the message is updated while the dialog is open, the screen reader may not announce the live region.
9
+ export function announce(message, options) {
10
+ const { assertive, element } = options ?? {};
11
+ setContainerContent(message, assertive, element);
12
+ }
13
+ // Set aria-live container to message.
14
+ function setContainerContent(message, assertive, element) {
15
+ const getQuerySelector = () => {
16
+ return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
17
+ };
18
+ const container = element ?? safeDocument?.querySelector(getQuerySelector());
19
+ if (!container)
20
+ return;
21
+ if (container.textContent === message) {
22
+ /* This is a hack due to the way the aria live API works.
23
+ A screen reader will not read a live region again
24
+ if the text is the same. Adding a space character tells
25
+ the browser that the live region has updated,
26
+ which will cause it to read again, but with no audible difference. */
27
+ container.textContent = `${message}\u00A0`;
28
+ }
29
+ else {
30
+ container.textContent = message;
31
+ }
32
+ }
33
+ // Gets the trimmed text content of an element.
34
+ function getTextContent(el) {
35
+ // innerText does not contain hidden text
36
+ /* eslint-disable-next-line github/no-innerText */
37
+ return (el.getAttribute('aria-label') || el.innerText || '').trim();
38
+ }
@@ -0,0 +1,41 @@
1
+ const safeDocument = typeof document === 'undefined' ? undefined : document
2
+
3
+ // Announce an element's text to the screen reader.
4
+ export function announceFromElement(el: HTMLElement, options?: {assertive?: boolean; element?: HTMLElement}) {
5
+ announce(getTextContent(el), options)
6
+ }
7
+
8
+ // Announce message update to screen reader.
9
+ // Note: Use caution when using this function while a dialog is active.
10
+ // If the message is updated while the dialog is open, the screen reader may not announce the live region.
11
+ export function announce(message: string, options?: {assertive?: boolean; element?: HTMLElement}) {
12
+ const {assertive, element} = options ?? {}
13
+
14
+ setContainerContent(message, assertive, element)
15
+ }
16
+
17
+ // Set aria-live container to message.
18
+ function setContainerContent(message: string, assertive?: boolean, element?: HTMLElement) {
19
+ const getQuerySelector = () => {
20
+ return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice'
21
+ }
22
+ const container = element ?? safeDocument?.querySelector(getQuerySelector())
23
+ if (!container) return
24
+ if (container.textContent === message) {
25
+ /* This is a hack due to the way the aria live API works.
26
+ A screen reader will not read a live region again
27
+ if the text is the same. Adding a space character tells
28
+ the browser that the live region has updated,
29
+ which will cause it to read again, but with no audible difference. */
30
+ container.textContent = `${message}\u00A0`
31
+ } else {
32
+ container.textContent = message
33
+ }
34
+ }
35
+
36
+ // Gets the trimmed text content of an element.
37
+ function getTextContent(el: HTMLElement): string {
38
+ // innerText does not contain hidden text
39
+ /* eslint-disable-next-line github/no-innerText */
40
+ return (el.getAttribute('aria-label') || el.innerText || '').trim()
41
+ }
@@ -3,7 +3,7 @@
3
3
  require "primer/classify"
4
4
 
5
5
  module Primer
6
- # 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).
6
+ # 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).
7
7
  #
8
8
  # Under 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).
9
9
  #
@@ -1,4 +1,5 @@
1
1
  import '@github/include-fragment-element';
2
+ import '@github/remote-input-element';
2
3
  import './alpha/action_list';
3
4
  import './alpha/action_bar_element';
4
5
  import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
6
7
  import './dialog_helper';
7
8
  import './focus_group';
8
9
  import './scrollable_region';
10
+ import './aria_live';
11
+ import './shared_events';
9
12
  import './alpha/image_crop';
10
13
  import './alpha/modal_dialog';
11
14
  import './beta/nav_list';
@@ -22,6 +25,7 @@ import '../../../lib/primer/forms/primer_multi_input';
22
25
  import '../../../lib/primer/forms/primer_text_field';
23
26
  import '../../../lib/primer/forms/toggle_switch_input';
24
27
  import './alpha/action_menu/action_menu_element';
28
+ import './alpha/select_panel_element';
25
29
  import './open_project/page_header_element';
26
30
  import './open_project/zen_mode_button';
27
31
  import './open_project/sub_header_element';
@@ -1,4 +1,5 @@
1
1
  import '@github/include-fragment-element';
2
+ import '@github/remote-input-element';
2
3
  import './alpha/action_list';
3
4
  import './alpha/action_bar_element';
4
5
  import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
6
7
  import './dialog_helper';
7
8
  import './focus_group';
8
9
  import './scrollable_region';
10
+ import './aria_live';
11
+ import './shared_events';
9
12
  import './alpha/image_crop';
10
13
  import './alpha/modal_dialog';
11
14
  import './beta/nav_list';
@@ -22,6 +25,7 @@ import '../../../lib/primer/forms/primer_multi_input';
22
25
  import '../../../lib/primer/forms/primer_text_field';
23
26
  import '../../../lib/primer/forms/toggle_switch_input';
24
27
  import './alpha/action_menu/action_menu_element';
28
+ import './alpha/select_panel_element';
25
29
  import './open_project/page_header_element';
26
30
  import './open_project/zen_mode_button';
27
31
  import './open_project/sub_header_element';
@@ -1,4 +1,5 @@
1
1
  import '@github/include-fragment-element'
2
+ import '@github/remote-input-element'
2
3
  import './alpha/action_list'
3
4
  import './alpha/action_bar_element'
4
5
  import './alpha/dropdown'
@@ -6,6 +7,8 @@ import './anchored_position'
6
7
  import './dialog_helper'
7
8
  import './focus_group'
8
9
  import './scrollable_region'
10
+ import './aria_live'
11
+ import './shared_events'
9
12
  import './alpha/image_crop'
10
13
  import './alpha/modal_dialog'
11
14
  import './beta/nav_list'
@@ -22,6 +25,7 @@ import '../../../lib/primer/forms/primer_multi_input'
22
25
  import '../../../lib/primer/forms/primer_text_field'
23
26
  import '../../../lib/primer/forms/toggle_switch_input'
24
27
  import './alpha/action_menu/action_menu_element'
28
+ import './alpha/select_panel_element'
25
29
  import './open_project/page_header_element'
26
30
  import './open_project/zen_mode_button'
27
31
  import './open_project/sub_header_element'
@@ -0,0 +1,9 @@
1
+ export type ItemActivatedEvent = {
2
+ item: Element;
3
+ checked: boolean;
4
+ };
5
+ declare global {
6
+ interface HTMLElementEventMap {
7
+ itemActivated: CustomEvent<ItemActivatedEvent>;
8
+ }
9
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,10 @@
1
+ export type ItemActivatedEvent = {
2
+ item: Element
3
+ checked: boolean
4
+ }
5
+
6
+ declare global {
7
+ interface HTMLElementEventMap {
8
+ itemActivated: CustomEvent<ItemActivatedEvent>
9
+ }
10
+ }
@@ -1 +1 @@
1
- My <em>favorite</em> caption.
1
+ My <em>favorite</em> caption lorem ipsum dolor sit amet.
@@ -7,8 +7,7 @@
7
7
  <%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
8
8
  <%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
9
9
  <% end %>
10
-
11
- <div><%= render(Caption.new(input: @input)) %></div>
12
10
  </span>
13
11
  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf_token: @input.csrf, **@input.input_arguments)) %>
14
12
  <% end %>
13
+ <div><%= render(Caption.new(input: @input)) %></div>
@@ -37,7 +37,6 @@ module Primer
37
37
  if slot_method.base_docstring.to_s.present?
38
38
  render_erb_ignoring_markdown_code_fences(slot_method.base_docstring)
39
39
  end,
40
- # rubocop:enable Style/IfUnlessModifier
41
40
  "parameters" => serialize_params(param_tags, component)
42
41
  }
43
42
  end
@@ -54,11 +53,13 @@ module Primer
54
53
 
55
54
  method_docs = mtds.map do |mtd|
56
55
  param_tags = mtd.tags(:param)
56
+ return_tag = mtd.tags(:return)
57
57
 
58
58
  {
59
59
  "name" => mtd.name,
60
60
  "description" => render_erb_ignoring_markdown_code_fences(mtd.base_docstring),
61
- "parameters" => serialize_params(param_tags, component)
61
+ "parameters" => serialize_params(param_tags, component),
62
+ "return_types" => return_tag.first&.types || [],
62
63
  }
63
64
  end
64
65
 
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 37
9
- PATCH = 1
8
+ MINOR = 38
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -67,6 +67,8 @@ module Primer
67
67
  Primer::Alpha::ToggleSwitch => { js: true },
68
68
  Primer::Alpha::Overlay => { js: true },
69
69
  Primer::Alpha::ActionMenu => { js: true },
70
+ Primer::Alpha::SelectPanel => { js: true },
71
+ Primer::Alpha::SelectPanel::ItemList => { js: true, examples: false },
70
72
 
71
73
  # Examples can be seen in the NavList docs
72
74
  Primer::Alpha::NavList => { js: true },
@@ -0,0 +1,25 @@
1
+ <script type="application/javascript">
2
+ function ready(fn) {
3
+ if (document.readyState !== 'loading') {
4
+ fn()
5
+ } else {
6
+ document.addEventListener('DOMContentLoaded', fn)
7
+ }
8
+ }
9
+
10
+ ready(() => {
11
+ const subject = document.querySelector("[data-interaction-subject='<%= subject_id %>']")
12
+ if (!subject) return
13
+
14
+ const fetchStrategy = subject.getAttribute('data-fetch-strategy')
15
+
16
+ if (fetchStrategy === 'local') {
17
+ subject.setAttribute('data-ready', 'true')
18
+ return
19
+ }
20
+
21
+ subject.addEventListener('loadend', (event) => {
22
+ event.target.setAttribute('data-ready', 'true')
23
+ })
24
+ })
25
+ </script>
@@ -0,0 +1,16 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path,
6
+ select_variant: :multiple,
7
+ fetch_strategy: :eventually_local,
8
+ open_on_load: open_on_load
9
+ )) do |panel| %>
10
+ <% panel.with_show_button { "Sci-fi equipment" } %>
11
+ <% panel.with_footer(show_divider: true) do %>
12
+ I'm a footer!
13
+ <% end %>
14
+ <% end %>
15
+
16
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,12 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path(fail: "true"),
6
+ fetch_strategy: :eventually_local,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Sci-fi equipment" } %>
10
+ <% end %>
11
+
12
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,16 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path(show_results: "false"),
6
+ select_variant: :multiple,
7
+ fetch_strategy: :eventually_local,
8
+ open_on_load: open_on_load
9
+ )) do |panel| %>
10
+ <% panel.with_show_button { "Sci-fi equipment" } %>
11
+ <% panel.with_footer(show_divider: true) do %>
12
+ I'm a footer!
13
+ <% end %>
14
+ <% end %>
15
+
16
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,23 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ select_variant: :multiple,
6
+ fetch_strategy: :local,
7
+ dynamic_label: true,
8
+ dynamic_label_prefix: "Item",
9
+ dynamic_aria_label_prefix: "Selected item",
10
+ open_on_load: open_on_load
11
+ )) do |panel| %>
12
+ <% panel.with_show_button { "Choose item" } %>
13
+ <% panel.with_item(label: "Item 1") %>
14
+ <% panel.with_item(label: "Item 2") %>
15
+ <% panel.with_item(label: "Item 3") %>
16
+ <% panel.with_item(label: "Item 4") %>
17
+ <% panel.with_footer(show_divider: true) do %>
18
+ <%= render(Primer::Beta::Button.new(scheme: :default)) { "Cancel" } %>
19
+ <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Save" } %>
20
+ <% end %>
21
+ <% end %>
22
+
23
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,19 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ select_variant: :multiple,
6
+ fetch_strategy: :local,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Panel" } %>
10
+ <% panel.with_item(label: "Item 1") %>
11
+ <% panel.with_item(label: "Item 2") %>
12
+ <% panel.with_item(label: "Item 3") %>
13
+ <% panel.with_item(label: "Item 4") %>
14
+ <% panel.with_footer(show_divider: true) do %>
15
+ I'm a footer!
16
+ <% end %>
17
+ <% end %>
18
+
19
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,15 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ select_variant: :multiple,
6
+ fetch_strategy: :local,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Panel" } %>
10
+ <% panel.with_footer(show_divider: true) do %>
11
+ I'm a footer!
12
+ <% end %>
13
+ <% end %>
14
+
15
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,17 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ select_variant: :multiple,
6
+ fetch_strategy: :local,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Choose item" } %>
10
+ <% panel.with_item(label: "Item 1", item_id: :item1) %>
11
+ <% panel.with_item(label: "Item 2", item_id: :item2) %>
12
+ <% panel.with_item(label: "Item 3", item_id: :item3) %>
13
+ <% panel.with_item(label: "Item 4", item_id: :item4) %>
14
+ <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
15
+ <% end %>
16
+
17
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,31 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
4
+ <%= render(Primer::Alpha::SelectPanel.new(
5
+ data: { interaction_subject: subject_id },
6
+ select_variant: :multiple,
7
+ fetch_strategy: :local,
8
+ open_on_load: open_on_load,
9
+ form_arguments: {
10
+ name: :item,
11
+ builder: builder
12
+ }
13
+ )) do |panel| %>
14
+ <% panel.with_show_button { "Panel" } %>
15
+ <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
16
+ <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
17
+ <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
18
+ <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
19
+ <% panel.with_footer(show_divider: true) do %>
20
+ I'm a footer!
21
+ <% end %>
22
+ <% end %>
23
+
24
+ <hr>
25
+
26
+ <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
27
+ Submit
28
+ <% end %>
29
+ <% end %>
30
+
31
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,19 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+ <% title = system_arguments.delete(:title) %>
3
+ <% simulate_no_results = system_arguments.delete(:simulate_no_results) %>
4
+ <% simulate_failure = system_arguments.delete(:simulate_failure) %>
5
+
6
+ <%= render(Primer::Alpha::SelectPanel.new(
7
+ data: { interaction_subject: subject_id },
8
+ src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure),
9
+ select_variant: :single,
10
+ fetch_strategy: :remote,
11
+ **system_arguments
12
+ )) do |panel| %>
13
+ <% panel.with_show_button { title } %>
14
+ <% if subtitle %>
15
+ <% panel.with_subtitle { subtitle } %>
16
+ <% end %>
17
+ <% end %>
18
+
19
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,16 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path,
6
+ select_variant: :multiple,
7
+ fetch_strategy: :remote,
8
+ open_on_load: open_on_load
9
+ )) do |panel| %>
10
+ <% panel.with_show_button { "Sci-fi equipment" } %>
11
+ <% panel.with_footer(show_divider: true) do %>
12
+ I'm a footer!
13
+ <% end %>
14
+ <% end %>
15
+
16
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,13 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ # passing a uuid here causes the request to succeed the first time and fail all subsequent times
6
+ src: select_panel_items_path(fail: "true", uuid: SecureRandom.uuid),
7
+ fetch_strategy: :remote,
8
+ open_on_load: open_on_load
9
+ )) do |panel| %>
10
+ <% panel.with_show_button { "Sci-fi equipment" } %>
11
+ <% end %>
12
+
13
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,12 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path(fail: "true"),
6
+ fetch_strategy: :remote,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Sci-fi equipment" } %>
10
+ <% end %>
11
+
12
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,16 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ src: select_panel_items_path(show_results: "false"),
6
+ select_variant: :multiple,
7
+ fetch_strategy: :remote,
8
+ open_on_load: open_on_load
9
+ )) do |panel| %>
10
+ <% panel.with_show_button { "Sci-fi equipment" } %>
11
+ <% panel.with_footer(show_divider: true) do %>
12
+ I'm a footer!
13
+ <% end %>
14
+ <% end %>
15
+
16
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,20 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ select_variant: :single,
6
+ fetch_strategy: :local,
7
+ open_on_load: open_on_load
8
+ )) do |panel| %>
9
+ <% panel.with_show_button { "Choose item" } %>
10
+ <% panel.with_item(label: "Item 1", item_id: :item1) %>
11
+ <% panel.with_item(label: "Item 2", item_id: :item2) %>
12
+ <% panel.with_item(label: "Item 3", item_id: :item3) %>
13
+ <% panel.with_item(label: "Item 4", item_id: :item4) %>
14
+ <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
15
+ <% panel.with_footer(show_divider: true) do %>
16
+ I'm a footer!
17
+ <% end %>
18
+ <% end %>
19
+
20
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,33 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
4
+ <%= render(Primer::Alpha::SelectPanel.new(
5
+ data: { interaction_subject: subject_id },
6
+ select_variant: :single,
7
+ fetch_strategy: :local,
8
+ open_on_load: open_on_load,
9
+ dynamic_label: true,
10
+ dynamic_label_prefix: "Item",
11
+ form_arguments: {
12
+ name: :item,
13
+ builder: builder
14
+ }
15
+ )) do |panel| %>
16
+ <% panel.with_show_button { "Panel" } %>
17
+ <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
18
+ <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
19
+ <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
20
+ <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
21
+ <% panel.with_footer(show_divider: true) do %>
22
+ I'm a footer!
23
+ <% end %>
24
+ <% end %>
25
+
26
+ <hr>
27
+
28
+ <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
29
+ Submit
30
+ <% end %>
31
+ <% end %>
32
+
33
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,19 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ id: "with_avatar_items",
6
+ title: "Select users",
7
+ select_variant: :multiple,
8
+ fetch_strategy: :local,
9
+ open_on_load: open_on_load
10
+ )) do |panel| %>
11
+ <% panel.with_show_button { "Choose users" } %>
12
+
13
+ <% panel.with_avatar_item(
14
+ username: "hulk_smash",
15
+ src: "https://avatars.githubusercontent.com/u/103004183?v=4",
16
+ ) %>
17
+ <% end %>
18
+
19
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>
@@ -0,0 +1,23 @@
1
+ <% subject_id = SecureRandom.hex %>
2
+
3
+ <%= render(Primer::Alpha::SelectPanel.new(
4
+ data: { interaction_subject: subject_id },
5
+ id: "with_avatar_items",
6
+ title: "Select users",
7
+ select_variant: :single,
8
+ fetch_strategy: :local,
9
+ dynamic_label: true,
10
+ dynamic_label_prefix: "Item",
11
+ open_on_load: open_on_load
12
+ )) do |panel| %>
13
+ <% panel.with_show_button { "Choose item" } %>
14
+
15
+ <% panel.with_item(label: "Item 1") %>
16
+ <% panel.with_item(label: "Item 2") %>
17
+ <% panel.with_item(label: "Item 3") %>
18
+ <% panel.with_item(label: "Item 4") %>
19
+ <% panel.with_item(label: "Item 5") %>
20
+ <% panel.with_item(label: "Item 6") %>
21
+ <% end %>
22
+
23
+ <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>