openproject-primer_view_components 0.42.0 → 0.43.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (101) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +27 -0
  3. data/app/assets/javascripts/app/components/primer/shared_events.d.ts +2 -0
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -1
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.json +33 -50
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_menu/action_menu_element.js +20 -7
  12. data/app/components/primer/alpha/action_menu/action_menu_element.ts +20 -7
  13. data/app/components/primer/alpha/auto_complete.css +1 -1
  14. data/app/components/primer/alpha/auto_complete.css.json +3 -5
  15. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  16. data/app/components/primer/alpha/banner.css +1 -1
  17. data/app/components/primer/alpha/banner.css.json +5 -5
  18. data/app/components/primer/alpha/banner.css.map +1 -1
  19. data/app/components/primer/alpha/button_marketing.css +1 -1
  20. data/app/components/primer/alpha/button_marketing.css.json +1 -4
  21. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  22. data/app/components/primer/alpha/dialog.css +1 -1
  23. data/app/components/primer/alpha/dialog.css.json +7 -7
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/layout.css +1 -1
  26. data/app/components/primer/alpha/layout.css.json +9 -15
  27. data/app/components/primer/alpha/layout.css.map +1 -1
  28. data/app/components/primer/alpha/menu.css +1 -1
  29. data/app/components/primer/alpha/menu.css.json +1 -3
  30. data/app/components/primer/alpha/menu.css.map +1 -1
  31. data/app/components/primer/alpha/segmented_control.css +1 -1
  32. data/app/components/primer/alpha/segmented_control.css.json +5 -5
  33. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  34. data/app/components/primer/alpha/select_panel.rb +3 -3
  35. data/app/components/primer/alpha/select_panel_element.js +25 -15
  36. data/app/components/primer/alpha/select_panel_element.ts +26 -16
  37. data/app/components/primer/alpha/tab_nav.css +1 -1
  38. data/app/components/primer/alpha/tab_nav.css.json +1 -3
  39. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  40. data/app/components/primer/alpha/text_field.css +1 -1
  41. data/app/components/primer/alpha/text_field.css.json +37 -78
  42. data/app/components/primer/alpha/text_field.css.map +1 -1
  43. data/app/components/primer/alpha/toggle_switch.css +1 -1
  44. data/app/components/primer/alpha/toggle_switch.css.json +1 -1
  45. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  46. data/app/components/primer/alpha/toggle_switch.rb +2 -1
  47. data/app/components/primer/alpha/underline_nav.css +1 -1
  48. data/app/components/primer/alpha/underline_nav.css.json +2 -4
  49. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  50. data/app/components/primer/beta/avatar_stack.css +1 -1
  51. data/app/components/primer/beta/avatar_stack.css.json +8 -8
  52. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  53. data/app/components/primer/beta/border_box.css +1 -1
  54. data/app/components/primer/beta/border_box.css.json +4 -4
  55. data/app/components/primer/beta/border_box.css.map +1 -1
  56. data/app/components/primer/beta/breadcrumbs.css +1 -1
  57. data/app/components/primer/beta/breadcrumbs.css.json +1 -2
  58. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  59. data/app/components/primer/beta/button.css +1 -1
  60. data/app/components/primer/beta/button.css.json +6 -8
  61. data/app/components/primer/beta/button.css.map +1 -1
  62. data/app/components/primer/beta/button_group.css +1 -1
  63. data/app/components/primer/beta/button_group.css.json +3 -3
  64. data/app/components/primer/beta/button_group.css.map +1 -1
  65. data/app/components/primer/beta/label.css +1 -1
  66. data/app/components/primer/beta/label.css.json +1 -2
  67. data/app/components/primer/beta/label.css.map +1 -1
  68. data/app/components/primer/beta/link.css +1 -1
  69. data/app/components/primer/beta/link.css.json +1 -3
  70. data/app/components/primer/beta/link.css.map +1 -1
  71. data/app/components/primer/beta/popover.css +1 -1
  72. data/app/components/primer/beta/popover.css.json +16 -22
  73. data/app/components/primer/beta/popover.css.map +1 -1
  74. data/app/components/primer/beta/spinner.html.erb +1 -1
  75. data/app/components/primer/beta/truncate.css +1 -1
  76. data/app/components/primer/beta/truncate.css.json +5 -5
  77. data/app/components/primer/beta/truncate.css.map +1 -1
  78. data/app/components/primer/open_project/side_panel/section.css +1 -1
  79. data/app/components/primer/open_project/side_panel/section.css.json +1 -2
  80. data/app/components/primer/open_project/side_panel/section.css.map +1 -1
  81. data/app/components/primer/open_project/sub_header.css +1 -1
  82. data/app/components/primer/open_project/sub_header.css.json +1 -0
  83. data/app/components/primer/open_project/sub_header.css.map +1 -1
  84. data/app/components/primer/open_project/sub_header.pcss +3 -2
  85. data/app/components/primer/open_project/sub_header_element.js +2 -2
  86. data/app/components/primer/open_project/sub_header_element.ts +2 -2
  87. data/app/components/primer/shared_events.d.ts +2 -0
  88. data/app/components/primer/shared_events.ts +2 -0
  89. data/lib/primer/forms/primer_text_field.js +3 -0
  90. data/lib/primer/forms/primer_text_field.ts +4 -0
  91. data/lib/primer/view_components/version.rb +2 -2
  92. data/previews/primer/alpha/select_panel_preview/no_values.html.erb +19 -0
  93. data/previews/primer/alpha/select_panel_preview/playground.html.erb +1 -1
  94. data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +4 -1
  95. data/previews/primer/alpha/select_panel_preview/single_select.html.erb +4 -4
  96. data/previews/primer/alpha/select_panel_preview.rb +14 -9
  97. data/static/arguments.json +1 -1
  98. data/static/classes.json +42 -21
  99. data/static/info_arch.json +15 -2
  100. data/static/previews.json +13 -0
  101. metadata +3 -2
@@ -6,7 +6,6 @@
6
6
  ".SidePanel-sectionAction",
7
7
  ".SidePanel-sectionContent",
8
8
  ".SidePanel-sectionDescription",
9
- ".SidePanel-sectionContent:not(:last-child)",
10
- ".SidePanel-sectionDescription:not(:last-child)"
9
+ ":is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child)"
11
10
  ]
12
11
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAEE,YAKF,CAHE,0FACE,kBACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section */\n\n.SidePanel-sectionHeader {\n display: flex;\n align-items: center;\n height: 32px;\n margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n justify-content: right;\n flex: 1;\n display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n margin-top: 0;\n\n &:not(:last-child) {\n margin-bottom: 16px;\n }\n}\n"]}
1
+ {"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAEE,YAKF,CAHE,8EACE,kBACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section */\n\n.SidePanel-sectionHeader {\n display: flex;\n align-items: center;\n height: 32px;\n margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n justify-content: right;\n flex: 1;\n display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n margin-top: 0;\n\n &:not(:last-child) {\n margin-bottom: 16px;\n }\n}\n"]}
@@ -1 +1 @@
1
- .SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
1
+ .SubHeader{align-items:center;display:grid;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader--expandedSearch{grid-template-areas:"left left left" "bottom bottom bottom"}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
@@ -2,6 +2,7 @@
2
2
  "name": "open_project/sub_header",
3
3
  "selectors": [
4
4
  ".SubHeader",
5
+ ".SubHeader--expandedSearch",
5
6
  ".SubHeader-rightPane",
6
7
  ".SubHeader-middlePane",
7
8
  ".SubHeader-bottomPane",
@@ -1 +1 @@
1
- {"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CAOb,cAAe,CANf,8DAA+D,CAC/D,mCAAoC,CAEpC,kBAIJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader */\n\n.SubHeader {\n display: grid;\n grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n margin-bottom: 16px;\n\n /* When the filter input is expanded in mobile, we switch to a flex layout */\n flex-wrap: wrap;\n}\n\n.SubHeader-rightPane {\n grid-area: right;\n display: flex;\n align-items: center;\n column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n grid-area: middle;\n text-align: center;\n}\n\n.SubHeader-bottomPane {\n grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n grid-area: left;\n display: flex;\n align-items: center;\n width: 100%;\n gap: 12px;\n}\n\n.SubHeader-filterContainer {\n display: flex;\n width: 100%;\n gap: 8px;\n}\n"]}
1
+ {"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CACb,8DAA+D,CAC/D,mCAAoC,CAEpC,kBACJ,CAEA,2BACI,2DACJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader */\n\n.SubHeader {\n display: grid;\n grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n grid-template-columns: auto 1fr auto;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.SubHeader--expandedSearch {\n grid-template-areas: \"left left left\" \"bottom bottom bottom\";\n}\n\n.SubHeader-rightPane {\n grid-area: right;\n display: flex;\n align-items: center;\n column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n grid-area: middle;\n text-align: center;\n}\n\n.SubHeader-bottomPane {\n grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n grid-area: left;\n display: flex;\n align-items: center;\n width: 100%;\n gap: 12px;\n}\n\n.SubHeader-filterContainer {\n display: flex;\n width: 100%;\n gap: 8px;\n}\n"]}
@@ -6,9 +6,10 @@
6
6
  grid-template-columns: auto 1fr auto;
7
7
  align-items: center;
8
8
  margin-bottom: 16px;
9
+ }
9
10
 
10
- /* When the filter input is expanded in mobile, we switch to a flex layout */
11
- flex-wrap: wrap;
11
+ .SubHeader--expandedSearch {
12
+ grid-template-areas: "left left left" "bottom bottom bottom";
12
13
  }
13
14
 
14
15
  .SubHeader-rightPane {
@@ -13,7 +13,7 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
13
13
  for (const item of this.shownItemsOnExpandedFilter) {
14
14
  item.classList.remove('d-none');
15
15
  }
16
- this.classList.add('d-flex');
16
+ this.classList.add('SubHeader--expandedSearch');
17
17
  this.filterInput.focus();
18
18
  }
19
19
  collapseFilterInput() {
@@ -23,7 +23,7 @@ let SubHeaderElement = class SubHeaderElement extends HTMLElement {
23
23
  for (const item of this.shownItemsOnExpandedFilter) {
24
24
  item.classList.add('d-none');
25
25
  }
26
- this.classList.remove('d-flex');
26
+ this.classList.remove('SubHeader--expandedSearch');
27
27
  }
28
28
  };
29
29
  __decorate([
@@ -15,7 +15,7 @@ class SubHeaderElement extends HTMLElement {
15
15
  item.classList.remove('d-none')
16
16
  }
17
17
 
18
- this.classList.add('d-flex')
18
+ this.classList.add('SubHeader--expandedSearch')
19
19
 
20
20
  this.filterInput.focus()
21
21
  }
@@ -29,7 +29,7 @@ class SubHeaderElement extends HTMLElement {
29
29
  item.classList.add('d-none')
30
30
  }
31
31
 
32
- this.classList.remove('d-flex')
32
+ this.classList.remove('SubHeader--expandedSearch')
33
33
  }
34
34
  }
35
35
 
@@ -1,9 +1,11 @@
1
1
  export type ItemActivatedEvent = {
2
2
  item: Element;
3
3
  checked: boolean;
4
+ value: string | null;
4
5
  };
5
6
  declare global {
6
7
  interface HTMLElementEventMap {
7
8
  itemActivated: CustomEvent<ItemActivatedEvent>;
9
+ beforeItemActivated: CustomEvent<ItemActivatedEvent>;
8
10
  }
9
11
  }
@@ -1,10 +1,12 @@
1
1
  export type ItemActivatedEvent = {
2
2
  item: Element
3
3
  checked: boolean
4
+ value: string | null
4
5
  }
5
6
 
6
7
  declare global {
7
8
  interface HTMLElementEventMap {
8
9
  itemActivated: CustomEvent<ItemActivatedEvent>
10
+ beforeItemActivated: CustomEvent<ItemActivatedEvent>
9
11
  }
10
12
  }
@@ -19,6 +19,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
19
19
  var _PrimerTextFieldElement_abortController;
20
20
  import '@github/auto-check-element';
21
21
  import { controller, target } from '@github/catalyst';
22
+ const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text';
22
23
  let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
23
24
  constructor() {
24
25
  super(...arguments);
@@ -83,10 +84,12 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
83
84
  }
84
85
  showLeadingSpinner() {
85
86
  this.leadingSpinner?.removeAttribute('hidden');
87
+ this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden');
86
88
  this.leadingVisual?.setAttribute('hidden', '');
87
89
  }
88
90
  hideLeadingSpinner() {
89
91
  this.leadingSpinner?.setAttribute('hidden', '');
92
+ this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '');
90
93
  this.leadingVisual?.removeAttribute('hidden');
91
94
  }
92
95
  };
@@ -10,6 +10,8 @@ declare global {
10
10
  'auto-check-error': AutoCheckErrorEvent
11
11
  }
12
12
  }
13
+
14
+ const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text'
13
15
  @controller
14
16
  export class PrimerTextFieldElement extends HTMLElement {
15
17
  @target inputElement: HTMLInputElement
@@ -97,11 +99,13 @@ export class PrimerTextFieldElement extends HTMLElement {
97
99
 
98
100
  showLeadingSpinner(): void {
99
101
  this.leadingSpinner?.removeAttribute('hidden')
102
+ this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden')
100
103
  this.leadingVisual?.setAttribute('hidden', '')
101
104
  }
102
105
 
103
106
  hideLeadingSpinner(): void {
104
107
  this.leadingSpinner?.setAttribute('hidden', '')
108
+ this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '')
105
109
  this.leadingVisual?.removeAttribute('hidden')
106
110
  }
107
111
  }
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 42
9
- PATCH = 0
8
+ MINOR = 43
9
+ PATCH = 1
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -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: :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") %>
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 } %>
@@ -9,7 +9,7 @@
9
9
  select_variant: :single,
10
10
  show_results: !simulate_no_results,
11
11
  fail: simulate_failure,
12
- select_items: select_items
12
+ selected_items: selected_items
13
13
  ),
14
14
  select_variant: :single,
15
15
  fetch_strategy: :remote,
@@ -2,7 +2,10 @@
2
2
 
3
3
  <%= render(Primer::Alpha::SelectPanel.new(
4
4
  data: { interaction_subject: subject_id },
5
- src: select_panel_items_path,
5
+ src: select_panel_items_path(
6
+ select_variant: :multiple,
7
+ selected_items: selected_items,
8
+ ),
6
9
  select_variant: :multiple,
7
10
  fetch_strategy: :remote,
8
11
  open_on_load: open_on_load
@@ -7,10 +7,10 @@
7
7
  open_on_load: open_on_load
8
8
  )) do |panel| %>
9
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) %>
10
+ <% panel.with_item(label: "Item 1", item_id: :item1, content_arguments: { data: { value: 1 } }) %>
11
+ <% panel.with_item(label: "Item 2", item_id: :item2, content_arguments: { data: { value: 2 } }) %>
12
+ <% panel.with_item(label: "Item 3", item_id: :item3, content_arguments: { data: { value: 3 } }) %>
13
+ <% panel.with_item(label: "Item 4", item_id: :item4, content_arguments: { data: { value: 4 } }) %>
14
14
  <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
15
15
  <% panel.with_footer(show_divider: true) do %>
16
16
  I'm a footer!
@@ -18,7 +18,7 @@ module Primer
18
18
  # @param open_on_load toggle
19
19
  # @param anchor_align [Symbol] select [start, center, end]
20
20
  # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
21
- # @param select_items toggle
21
+ # @param selected_items text
22
22
  def playground(
23
23
  title: "Sci-fi equipment",
24
24
  subtitle: "Various tools from your favorite shows",
@@ -33,11 +33,11 @@ module Primer
33
33
  open_on_load: false,
34
34
  anchor_align: :start,
35
35
  anchor_side: :outside_bottom,
36
- select_items: true
36
+ selected_items: "Phaser"
37
37
  )
38
38
  render_with_template(locals: {
39
39
  subtitle: subtitle,
40
- select_items: select_items,
40
+ selected_items: selected_items,
41
41
  system_arguments: {
42
42
  title: title,
43
43
  size: size,
@@ -65,8 +65,6 @@ module Primer
65
65
  })
66
66
  end
67
67
 
68
- # @!group Fetch strategies
69
-
70
68
  # @label Local fetch
71
69
  #
72
70
  # @snapshot interactive
@@ -87,8 +85,9 @@ module Primer
87
85
  #
88
86
  # @snapshot interactive
89
87
  # @param open_on_load toggle
90
- def remote_fetch(open_on_load: false)
91
- render_with_template(locals: { open_on_load: open_on_load })
88
+ # @param selected_items text
89
+ def remote_fetch(open_on_load: false, selected_items: "Phaser")
90
+ render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
92
91
  end
93
92
 
94
93
  # @label Local fetch (no results)
@@ -115,8 +114,6 @@ module Primer
115
114
  render_with_template(locals: { open_on_load: open_on_load })
116
115
  end
117
116
 
118
- # @!endgroup
119
-
120
117
  # @label Single select
121
118
  #
122
119
  # @snapshot interactive
@@ -245,6 +242,14 @@ module Primer
245
242
  def list_of_links(open_on_load: false)
246
243
  render_with_template(locals: { open_on_load: open_on_load })
247
244
  end
245
+
246
+ # @label No values
247
+ #
248
+ # @snapshot interactive
249
+ # @param open_on_load toggle
250
+ def no_values(open_on_load: false)
251
+ render_with_template(locals: { open_on_load: open_on_load })
252
+ end
248
253
  end
249
254
  end
250
255
  end
@@ -2388,7 +2388,7 @@
2388
2388
  "name": "select_variant",
2389
2389
  "type": "Symbol",
2390
2390
  "default": "`:single`",
2391
- "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
2391
+ "description": "One of `:multiple`, `:none`, or `:single`."
2392
2392
  },
2393
2393
  {
2394
2394
  "name": "fetch_strategy",
data/static/classes.json CHANGED
@@ -266,6 +266,9 @@
266
266
  "FormControl-checkbox-wrap": [
267
267
  "Primer::Alpha::TextField"
268
268
  ],
269
+ "FormControl-error": [
270
+ "Primer::Alpha::TextField"
271
+ ],
269
272
  "FormControl-horizontalGroup": [
270
273
  "Primer::Alpha::TextField"
271
274
  ],
@@ -281,12 +284,27 @@
281
284
  "FormControl-input": [
282
285
  "Primer::Alpha::TextField"
283
286
  ],
287
+ "FormControl-input-trailingAction--divider": [
288
+ "Primer::Alpha::TextField"
289
+ ],
284
290
  "FormControl-input-wrap": [
285
291
  "Primer::Alpha::TextField"
286
292
  ],
293
+ "FormControl-inset": [
294
+ "Primer::Alpha::TextField"
295
+ ],
287
296
  "FormControl-label": [
288
297
  "Primer::Alpha::TextField"
289
298
  ],
299
+ "FormControl-large": [
300
+ "Primer::Alpha::TextField"
301
+ ],
302
+ "FormControl-medium": [
303
+ "Primer::Alpha::TextField"
304
+ ],
305
+ "FormControl-monospace": [
306
+ "Primer::Alpha::TextField"
307
+ ],
290
308
  "FormControl-radio-group-wrap": [
291
309
  "Primer::Alpha::TextField"
292
310
  ],
@@ -299,15 +317,24 @@
299
317
  "FormControl-select-wrap": [
300
318
  "Primer::Alpha::TextField"
301
319
  ],
320
+ "FormControl-small": [
321
+ "Primer::Alpha::TextField"
322
+ ],
302
323
  "FormControl-spacingWrapper": [
303
324
  "Primer::Alpha::TextField"
304
325
  ],
326
+ "FormControl-success": [
327
+ "Primer::Alpha::TextField"
328
+ ],
305
329
  "FormControl-textarea": [
306
330
  "Primer::Alpha::TextField"
307
331
  ],
308
332
  "FormControl-toggleSwitchInput": [
309
333
  "Primer::Alpha::TextField"
310
334
  ],
335
+ "FormControl-warning": [
336
+ "Primer::Alpha::TextField"
337
+ ],
311
338
  "InputGroup": [
312
339
  "Primer::OpenProject::InputGroup"
313
340
  ],
@@ -365,6 +392,12 @@
365
392
  "Layout-divider": [
366
393
  "Primer::Alpha::Layout"
367
394
  ],
395
+ "Layout-divider--flowRow-hidden": [
396
+ "Primer::Alpha::Layout"
397
+ ],
398
+ "Layout-divider--flowRow-shallow": [
399
+ "Primer::Alpha::Layout"
400
+ ],
368
401
  "Layout-main": [
369
402
  "Primer::Alpha::Layout"
370
403
  ],
@@ -465,9 +498,6 @@
465
498
  "Popover-message": [
466
499
  "Primer::Beta::Popover"
467
500
  ],
468
- "Popover-message--bottom": [
469
- "Primer::Beta::Popover"
470
- ],
471
501
  "Popover-message--bottom-left": [
472
502
  "Primer::Beta::Popover"
473
503
  ],
@@ -477,27 +507,9 @@
477
507
  "Popover-message--large": [
478
508
  "Primer::Beta::Popover"
479
509
  ],
480
- "Popover-message--left": [
481
- "Primer::Beta::Popover"
482
- ],
483
- "Popover-message--left-bottom": [
484
- "Primer::Beta::Popover"
485
- ],
486
- "Popover-message--left-top": [
487
- "Primer::Beta::Popover"
488
- ],
489
510
  "Popover-message--no-caret": [
490
511
  "Primer::Beta::Popover"
491
512
  ],
492
- "Popover-message--right": [
493
- "Primer::Beta::Popover"
494
- ],
495
- "Popover-message--right-bottom": [
496
- "Primer::Beta::Popover"
497
- ],
498
- "Popover-message--right-top": [
499
- "Primer::Beta::Popover"
500
- ],
501
513
  "Popover-message--top-left": [
502
514
  "Primer::Beta::Popover"
503
515
  ],
@@ -570,6 +582,9 @@
570
582
  "SubHeader": [
571
583
  "Primer::OpenProject::SubHeader"
572
584
  ],
585
+ "SubHeader--expandedSearch": [
586
+ "Primer::OpenProject::SubHeader"
587
+ ],
573
588
  "SubHeader-bottomPane": [
574
589
  "Primer::OpenProject::SubHeader"
575
590
  ],
@@ -675,6 +690,12 @@
675
690
  "Truncate": [
676
691
  "Primer::Beta::Truncate"
677
692
  ],
693
+ "Truncate-text--expandable": [
694
+ "Primer::Beta::Truncate"
695
+ ],
696
+ "Truncate-text--primary": [
697
+ "Primer::Beta::Truncate"
698
+ ],
678
699
  "UnderlineNav": [
679
700
  "Primer::Alpha::UnderlineNav"
680
701
  ],
@@ -7533,7 +7533,7 @@
7533
7533
  },
7534
7534
  {
7535
7535
  "fully_qualified_name": "Primer::Alpha::SelectPanel",
7536
- "description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n <% panel.with_show_button { \"Select item\" } %>\n <% panel.with_item(label: \"Item 1\") %>\n <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n Primer::Alpha::SelectPanel.new(\n fetch_strategy: :remote,\n src: search_items_path # perhaps a Rails URL helper\n )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n def show\n # NOTE: params[:q] may be nil since there is no filter string available\n # when the panel is first opened\n @results = SomeModel.search(params[:q] || \"\")\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% @results.each do |result| %>\n <% list.with_item(label: result.title) do |item| %>\n <% item.with_description(result.description) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field. Each list item must also have a value specified in\n`content_arguments: { data: { value: } }`.\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n <% countries.each do |country|\n <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n def create\n puts \"You chose #{address_params[:country]} as your country\"\n end\n\n private\n\n def address_params\n params.require(:address).permit(:country)\n end\nend\n```\n\nIf items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call\nhappens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the\nview that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:\n\n```erb\n<% builder = ActionView::Helpers::FormBuilder.new(\n \"address\", # the name of the model, used to wrap input names, eg 'address[country_code]'\n nil, # object (eg. the Address instance, which we can omit)\n self, # template\n {} # options\n) %>\n<%= render(Primer::Alpha::SelectPanel::ItemList.new(\n form_arguments: { builder: builder, name: \"country\" }\n)) do |list| %>\n <% countries.each do |country| %>\n <% menu.with_item(label: country.name, data: { value: country.code }) %>\n <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name |Type |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated` |`CustomEvent<ItemActivatedEvent>` |Yes |No |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>` |Yes |Yes |\n|`dialog:open` |`CustomEvent<{dialog: HTMLDialogElement}>` |No |No |\n|`panelClosed` |`CustomEvent<{panel: SelectPanelElement}>` |Yes |No |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"itemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"beforeItemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n }\n)\n```",
7536
+ "description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n <% panel.with_show_button { \"Select item\" } %>\n <% panel.with_item(label: \"Item 1\") %>\n <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n Primer::Alpha::SelectPanel.new(\n fetch_strategy: :remote,\n src: search_items_path # perhaps a Rails URL helper\n )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n def show\n # NOTE: params[:q] may be nil since there is no filter string available\n # when the panel is first opened\n @results = SomeModel.search(params[:q] || \"\")\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% @results.each do |result| %>\n <% list.with_item(label: result.title) do |item| %>\n <% item.with_description(result.description) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field. Each list item must also have a value specified in\n`content_arguments: { data: { value: } }`.\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n <% countries.each do |country|\n <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n def create\n puts \"You chose #{address_params[:country]} as your country\"\n end\n\n private\n\n def address_params\n params.require(:address).permit(:country)\n end\nend\n```\n\nIf items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call\nhappens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the\nview that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:\n\n```erb\n<% builder = ActionView::Helpers::FormBuilder.new(\n \"address\", # the name of the model, used to wrap input names, eg 'address[country]'\n nil, # object (eg. the Address instance, which we can omit)\n self, # template\n {} # options\n) %>\n<%= render(Primer::Alpha::SelectPanel::ItemList.new(\n form_arguments: { builder: builder, name: \"country\" }\n)) do |list| %>\n <% countries.each do |country| %>\n <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>\n <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name |Type |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated` |`CustomEvent<ItemActivatedEvent>` |Yes |No |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>` |Yes |Yes |\n|`dialog:open` |`CustomEvent<{dialog: HTMLDialogElement}>` |No |No |\n|`panelClosed` |`CustomEvent<{panel: SelectPanelElement}>` |Yes |No |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"itemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"beforeItemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n }\n)\n```",
7537
7537
  "accessibility_docs": null,
7538
7538
  "is_form_component": false,
7539
7539
  "is_published": true,
@@ -7573,7 +7573,7 @@
7573
7573
  "name": "select_variant",
7574
7574
  "type": "Symbol",
7575
7575
  "default": "`:single`",
7576
- "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
7576
+ "description": "One of `:multiple`, `:none`, or `:single`."
7577
7577
  },
7578
7578
  {
7579
7579
  "name": "fetch_strategy",
@@ -8118,6 +8118,19 @@
8118
8118
  "color-contrast"
8119
8119
  ]
8120
8120
  }
8121
+ },
8122
+ {
8123
+ "preview_path": "primer/alpha/select_panel/no_values",
8124
+ "name": "no_values",
8125
+ "snapshot": "interactive",
8126
+ "skip_rules": {
8127
+ "wont_fix": [
8128
+ "region"
8129
+ ],
8130
+ "will_fix": [
8131
+ "color-contrast"
8132
+ ]
8133
+ }
8121
8134
  }
8122
8135
  ],
8123
8136
  "subcomponents": [
data/static/previews.json CHANGED
@@ -6637,6 +6637,19 @@
6637
6637
  "color-contrast"
6638
6638
  ]
6639
6639
  }
6640
+ },
6641
+ {
6642
+ "preview_path": "primer/alpha/select_panel/no_values",
6643
+ "name": "no_values",
6644
+ "snapshot": "interactive",
6645
+ "skip_rules": {
6646
+ "wont_fix": [
6647
+ "region"
6648
+ ],
6649
+ "will_fix": [
6650
+ "color-contrast"
6651
+ ]
6652
+ }
6640
6653
  }
6641
6654
  ]
6642
6655
  },
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.42.0
4
+ version: 0.43.1
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-08-12 00:00:00.000000000 Z
12
+ date: 2024-09-03 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -860,6 +860,7 @@ files:
860
860
  - previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb
861
861
  - previews/primer/alpha/select_panel_preview/multiselect.html.erb
862
862
  - previews/primer/alpha/select_panel_preview/multiselect_form.html.erb
863
+ - previews/primer/alpha/select_panel_preview/no_values.html.erb
863
864
  - previews/primer/alpha/select_panel_preview/playground.html.erb
864
865
  - previews/primer/alpha/select_panel_preview/remote_fetch.html.erb
865
866
  - previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb