openproject-primer_view_components 0.17.1 → 0.19.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +49 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  7. data/app/assets/javascripts/primer_view_components.js +1 -1
  8. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  9. data/app/assets/styles/primer_view_components.css +1 -1
  10. data/app/assets/styles/primer_view_components.css.map +1 -1
  11. data/app/components/primer/alpha/action_list/item.rb +13 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.json +1 -0
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +3 -1
  16. data/app/components/primer/alpha/action_list.rb +5 -4
  17. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
  20. data/app/components/primer/alpha/action_menu/group.rb +23 -0
  21. data/app/components/primer/alpha/action_menu/heading.rb +17 -0
  22. data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
  23. data/app/components/primer/alpha/action_menu/list.rb +62 -51
  24. data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
  25. data/app/components/primer/alpha/action_menu.rb +38 -1
  26. data/app/components/primer/alpha/overlay.css +1 -1
  27. data/app/components/primer/alpha/overlay.css.json +2 -1
  28. data/app/components/primer/alpha/overlay.css.map +1 -1
  29. data/app/components/primer/alpha/overlay.pcss +6 -2
  30. data/app/components/primer/alpha/text_field.css +1 -1
  31. data/app/components/primer/alpha/text_field.css.map +1 -1
  32. data/app/components/primer/alpha/text_field.pcss +3 -3
  33. data/app/components/primer/alpha/tool_tip.js +8 -4
  34. data/app/components/primer/alpha/tool_tip.ts +9 -4
  35. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
  36. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  37. data/app/components/primer/beta/auto_complete.rb +6 -1
  38. data/app/components/primer/beta/base_button.rb +2 -3
  39. data/app/components/primer/beta/blankslate.css +1 -1
  40. data/app/components/primer/beta/blankslate.css.map +1 -1
  41. data/app/components/primer/beta/blankslate.pcss +3 -3
  42. data/app/components/primer/beta/border_box.rb +3 -0
  43. data/app/components/primer/beta/button.css +1 -1
  44. data/app/components/primer/beta/button.css.json +9 -8
  45. data/app/components/primer/beta/button.css.map +1 -1
  46. data/app/components/primer/beta/button.pcss +15 -11
  47. data/app/components/primer/beta/nav_list/group.html.erb +7 -5
  48. data/app/components/primer/beta/nav_list/group.rb +2 -2
  49. data/app/components/primer/beta/nav_list.d.ts +0 -11
  50. data/app/components/primer/beta/nav_list.js +2 -85
  51. data/app/components/primer/beta/nav_list.ts +1 -85
  52. data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  53. data/app/components/primer/beta/nav_list_group_element.js +108 -0
  54. data/app/components/primer/beta/nav_list_group_element.ts +97 -0
  55. data/app/components/primer/beta/relative_time.rb +4 -4
  56. data/app/components/primer/component.rb +3 -0
  57. data/app/components/primer/open_project/input_group.css +1 -0
  58. data/app/components/primer/open_project/input_group.css.json +11 -0
  59. data/app/components/primer/open_project/input_group.css.map +1 -0
  60. data/app/components/primer/open_project/input_group.html.erb +4 -0
  61. data/app/components/primer/open_project/input_group.pcss +25 -0
  62. data/app/components/primer/open_project/input_group.rb +93 -0
  63. data/app/components/primer/primer.d.ts +1 -0
  64. data/app/components/primer/primer.js +1 -0
  65. data/app/components/primer/primer.pcss +1 -0
  66. data/app/components/primer/primer.ts +1 -0
  67. data/app/lib/primer/experimental_render_helpers.rb +32 -0
  68. data/app/lib/primer/experimental_slot_helpers.rb +30 -0
  69. data/lib/primer/view_components/version.rb +2 -2
  70. data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
  71. data/previews/primer/alpha/action_menu_preview.rb +73 -7
  72. data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
  73. data/previews/primer/alpha/dialog_preview.rb +17 -0
  74. data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
  75. data/previews/primer/beta/blankslate_preview.rb +3 -0
  76. data/previews/primer/beta/border_box_preview.rb +3 -2
  77. data/previews/primer/beta/nav_list_preview.rb +10 -1
  78. data/previews/primer/open_project/input_group_preview.rb +63 -0
  79. data/static/arguments.json +108 -1
  80. data/static/audited_at.json +5 -1
  81. data/static/classes.json +6 -0
  82. data/static/constants.json +28 -0
  83. data/static/info_arch.json +365 -52
  84. data/static/previews.json +112 -0
  85. data/static/statuses.json +4 -0
  86. metadata +21 -2
@@ -47,13 +47,9 @@
47
47
  transition: none;
48
48
  }
49
49
 
50
- &:disabled {
51
- cursor: not-allowed;
52
- box-shadow: none;
53
- }
54
-
50
+ &:disabled,
55
51
  &[aria-disabled='true'] {
56
- cursor: default;
52
+ cursor: not-allowed;
57
53
  box-shadow: none;
58
54
  }
59
55
  }
@@ -170,7 +166,7 @@ summary.Button {
170
166
  border-color: var(--button-primary-borderColor-rest);
171
167
  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
172
168
 
173
- &:hover:not(:disabled) {
169
+ &:hover:not(:disabled, .Button--inactive) {
174
170
  background-color: var(--button-primary-bgColor-hover);
175
171
  border-color: var(--button-primary-borderColor-hover);
176
172
  }
@@ -219,7 +215,7 @@ summary.Button {
219
215
  border-color: var(--button-default-borderColor-rest);
220
216
  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
221
217
 
222
- &:hover:not(:disabled) {
218
+ &:hover:not(:disabled, .Button--inactive) {
223
219
  background-color: var(--button-default-bgColor-hover);
224
220
  border-color: var(--button-default-borderColor-hover);
225
221
  }
@@ -250,7 +246,7 @@ summary.Button {
250
246
  color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
251
247
  }
252
248
 
253
- &:hover:not(:disabled) {
249
+ &:hover:not(:disabled, .Button--inactive) {
254
250
  background-color: var(--button-invisible-bgColor-hover);
255
251
 
256
252
  & .Button-visual {
@@ -294,7 +290,7 @@ summary.Button {
294
290
  height: unset;
295
291
  padding: 0;
296
292
 
297
- &:hover:not(:disabled) {
293
+ &:hover:not(:disabled, .Button--inactive) {
298
294
  text-decoration: underline;
299
295
  }
300
296
 
@@ -320,7 +316,7 @@ summary.Button {
320
316
  border-color: var(--button-danger-borderColor-rest);
321
317
  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
322
318
 
323
- &:hover:not(:disabled) {
319
+ &:hover:not(:disabled, .Button--inactive) {
324
320
  color: var(--button-danger-fgColor-hover);
325
321
  fill: var(--button-danger-fgColor-hover);
326
322
  background-color: var(--button-danger-bgColor-hover);
@@ -375,3 +371,11 @@ summary.Button {
375
371
  width: var(--control-large-size);
376
372
  }
377
373
  }
374
+
375
+ /* `disabled` takes precedence over `inactive` */
376
+ .Button--inactive:not([aria-disabled='true'], :disabled) {
377
+ background-color: var(--button-inactive-bgColor);
378
+ border: 0;
379
+ color: var(--button-inactive-fgColor);
380
+ cursor: default;
381
+ }
@@ -1,7 +1,9 @@
1
- <% with_post_list_content do %>
2
- <% if show_more_item? %>
3
- <%= show_more_item %>
1
+ <nav-list-group>
2
+ <% with_post_list_content do %>
3
+ <% if show_more_item? %>
4
+ <%= show_more_item %>
5
+ <% end %>
4
6
  <% end %>
5
- <% end %>
6
7
 
7
- <% render_parent %>
8
+ <% render_parent %>
9
+ </nav-list-group>
@@ -25,8 +25,8 @@ module Primer
25
25
  system_arguments[:hidden] = true
26
26
  system_arguments[:href] = "#"
27
27
  system_arguments[:data] ||= {}
28
- system_arguments[:data][:target] = "nav-list.showMoreItem"
29
- system_arguments[:data][:action] = "click:nav-list#showMore"
28
+ system_arguments[:data][:target] = "nav-list-group.showMoreItem"
29
+ system_arguments[:data][:action] = "click:nav-list-group#showMore"
30
30
  system_arguments[:data][:current_page] = "1"
31
31
  system_arguments[:data][:total_pages] = pages.to_s
32
32
  system_arguments[:label_arguments] = {
@@ -1,15 +1,6 @@
1
1
  export declare class NavListElement extends HTMLElement {
2
2
  #private;
3
3
  items: HTMLElement[];
4
- showMoreItem: HTMLElement;
5
- focusMarkers: HTMLElement[];
6
- connectedCallback(): void;
7
- get showMoreDisabled(): boolean;
8
- set showMoreDisabled(value: boolean);
9
- set currentPage(value: number);
10
- get currentPage(): number;
11
- get totalPages(): number;
12
- get paginationSrc(): string;
13
4
  selectItemById(itemId: string | null): boolean;
14
5
  selectItemByHref(href: string | null): boolean;
15
6
  selectItemByCurrentLocation(): boolean;
@@ -18,8 +9,6 @@ export declare class NavListElement extends HTMLElement {
18
9
  itemIsExpanded(item: HTMLElement | null): boolean;
19
10
  handleItemWithSubItemClick(e: Event): void;
20
11
  handleItemWithSubItemKeydown(e: KeyboardEvent): void;
21
- private showMore;
22
- private setShowMoreItemState;
23
12
  }
24
13
  declare global {
25
14
  interface Window {
@@ -9,41 +9,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
9
9
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
10
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
11
  };
12
- var _NavListElement_instances, _NavListElement_parseHTML, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
12
+ var _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
13
13
  /* eslint-disable custom-elements/expose-class-on-global */
14
- import { controller, target, targets } from '@github/catalyst';
14
+ import { controller, targets } from '@github/catalyst';
15
15
  let NavListElement = class NavListElement extends HTMLElement {
16
16
  constructor() {
17
17
  super(...arguments);
18
18
  _NavListElement_instances.add(this);
19
19
  }
20
- connectedCallback() {
21
- this.setShowMoreItemState();
22
- }
23
- get showMoreDisabled() {
24
- return this.showMoreItem.hasAttribute('aria-disabled');
25
- }
26
- set showMoreDisabled(value) {
27
- if (value) {
28
- this.showMoreItem.setAttribute('aria-disabled', 'true');
29
- }
30
- else {
31
- this.showMoreItem.removeAttribute('aria-disabled');
32
- }
33
- this.showMoreItem.classList.toggle('disabled', value);
34
- }
35
- set currentPage(value) {
36
- this.showMoreItem.setAttribute('data-current-page', value.toString());
37
- }
38
- get currentPage() {
39
- return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
40
- }
41
- get totalPages() {
42
- return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
43
- }
44
- get paginationSrc() {
45
- return this.showMoreItem.getAttribute('src') || '';
46
- }
47
20
  selectItemById(itemId) {
48
21
  if (!itemId)
49
22
  return false;
@@ -126,58 +99,8 @@ let NavListElement = class NavListElement extends HTMLElement {
126
99
  }
127
100
  e.stopPropagation();
128
101
  }
129
- async showMore(e) {
130
- var _a, _b;
131
- e.preventDefault();
132
- if (this.showMoreDisabled)
133
- return;
134
- this.showMoreDisabled = true;
135
- let html;
136
- try {
137
- const paginationURL = new URL(this.paginationSrc, window.location.origin);
138
- this.currentPage++;
139
- paginationURL.searchParams.append('page', this.currentPage.toString());
140
- const response = await fetch(paginationURL);
141
- if (!response.ok)
142
- return;
143
- html = await response.text();
144
- if (this.currentPage === this.totalPages) {
145
- this.showMoreItem.hidden = true;
146
- }
147
- }
148
- catch (err) {
149
- // Ignore network errors
150
- this.showMoreDisabled = false;
151
- this.currentPage--;
152
- return;
153
- }
154
- const fragment = __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_parseHTML).call(this, document, html);
155
- (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list.focusMarkers');
156
- const listId = e.target.closest('button').getAttribute('data-list-id');
157
- const list = document.getElementById(listId);
158
- list.append(fragment);
159
- (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
160
- this.showMoreDisabled = false;
161
- }
162
- setShowMoreItemState() {
163
- if (!this.showMoreItem) {
164
- return;
165
- }
166
- if (this.currentPage < this.totalPages) {
167
- this.showMoreItem.hidden = false;
168
- }
169
- else {
170
- this.showMoreItem.hidden = true;
171
- }
172
- }
173
102
  };
174
103
  _NavListElement_instances = new WeakSet();
175
- _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
176
- const template = document.createElement('template');
177
- // eslint-disable-next-line github/no-inner-html
178
- template.innerHTML = html;
179
- return document.importNode(template.content, true);
180
- };
181
104
  _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
182
105
  var _a;
183
106
  // First we compare the selected link to data-item-id for each nav item
@@ -243,12 +166,6 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
243
166
  __decorate([
244
167
  targets
245
168
  ], NavListElement.prototype, "items", void 0);
246
- __decorate([
247
- target
248
- ], NavListElement.prototype, "showMoreItem", void 0);
249
- __decorate([
250
- targets
251
- ], NavListElement.prototype, "focusMarkers", void 0);
252
169
  NavListElement = __decorate([
253
170
  controller
254
171
  ], NavListElement);
@@ -1,44 +1,9 @@
1
1
  /* eslint-disable custom-elements/expose-class-on-global */
2
- import {controller, target, targets} from '@github/catalyst'
2
+ import {controller, targets} from '@github/catalyst'
3
3
 
4
4
  @controller
5
5
  export class NavListElement extends HTMLElement {
6
6
  @targets items: HTMLElement[]
7
- @target showMoreItem: HTMLElement
8
- @targets focusMarkers: HTMLElement[]
9
-
10
- connectedCallback(): void {
11
- this.setShowMoreItemState()
12
- }
13
-
14
- get showMoreDisabled(): boolean {
15
- return this.showMoreItem.hasAttribute('aria-disabled')
16
- }
17
-
18
- set showMoreDisabled(value: boolean) {
19
- if (value) {
20
- this.showMoreItem.setAttribute('aria-disabled', 'true')
21
- } else {
22
- this.showMoreItem.removeAttribute('aria-disabled')
23
- }
24
- this.showMoreItem.classList.toggle('disabled', value)
25
- }
26
-
27
- set currentPage(value: number) {
28
- this.showMoreItem.setAttribute('data-current-page', value.toString())
29
- }
30
-
31
- get currentPage(): number {
32
- return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
33
- }
34
-
35
- get totalPages(): number {
36
- return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
37
- }
38
-
39
- get paginationSrc(): string {
40
- return this.showMoreItem.getAttribute('src') || ''
41
- }
42
7
 
43
8
  selectItemById(itemId: string | null): boolean {
44
9
  if (!itemId) return false
@@ -134,55 +99,6 @@ export class NavListElement extends HTMLElement {
134
99
  e.stopPropagation()
135
100
  }
136
101
 
137
- private async showMore(e: Event) {
138
- e.preventDefault()
139
- if (this.showMoreDisabled) return
140
- this.showMoreDisabled = true
141
- let html
142
- try {
143
- const paginationURL = new URL(this.paginationSrc, window.location.origin)
144
- this.currentPage++
145
- paginationURL.searchParams.append('page', this.currentPage.toString())
146
- const response = await fetch(paginationURL)
147
- if (!response.ok) return
148
- html = await response.text()
149
- if (this.currentPage === this.totalPages) {
150
- this.showMoreItem.hidden = true
151
- }
152
- } catch (err) {
153
- // Ignore network errors
154
- this.showMoreDisabled = false
155
- this.currentPage--
156
- return
157
- }
158
- const fragment = this.#parseHTML(document, html)
159
- fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list.focusMarkers')
160
- const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
161
- const list = document.getElementById(listId)!
162
- list.append(fragment)
163
- this.focusMarkers.pop()?.focus()
164
- this.showMoreDisabled = false
165
- }
166
-
167
- private setShowMoreItemState() {
168
- if (!this.showMoreItem) {
169
- return
170
- }
171
-
172
- if (this.currentPage < this.totalPages) {
173
- this.showMoreItem.hidden = false
174
- } else {
175
- this.showMoreItem.hidden = true
176
- }
177
- }
178
-
179
- #parseHTML(document: Document, html: string): DocumentFragment {
180
- const template = document.createElement('template')
181
- // eslint-disable-next-line github/no-inner-html
182
- template.innerHTML = html
183
- return document.importNode(template.content, true)
184
- }
185
-
186
102
  #findSelectedNavItemById(itemId: string): HTMLElement | null {
187
103
  // First we compare the selected link to data-item-id for each nav item
188
104
  for (const navItem of this.items) {
@@ -0,0 +1,19 @@
1
+ export declare class NavListGroupElement extends HTMLElement {
2
+ #private;
3
+ showMoreItem: HTMLElement;
4
+ focusMarkers: HTMLElement[];
5
+ connectedCallback(): void;
6
+ get showMoreDisabled(): boolean;
7
+ set showMoreDisabled(value: boolean);
8
+ set currentPage(value: number);
9
+ get currentPage(): number;
10
+ get totalPages(): number;
11
+ get paginationSrc(): string;
12
+ private showMore;
13
+ private setShowMoreItemState;
14
+ }
15
+ declare global {
16
+ interface Window {
17
+ NavListGroupElement: typeof NavListGroupElement;
18
+ }
19
+ }
@@ -0,0 +1,108 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
13
+ import { controller, target, targets } from '@github/catalyst';
14
+ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
15
+ constructor() {
16
+ super(...arguments);
17
+ _NavListGroupElement_instances.add(this);
18
+ }
19
+ connectedCallback() {
20
+ this.setShowMoreItemState();
21
+ }
22
+ get showMoreDisabled() {
23
+ return this.showMoreItem.hasAttribute('aria-disabled');
24
+ }
25
+ set showMoreDisabled(value) {
26
+ if (value) {
27
+ this.showMoreItem.setAttribute('aria-disabled', 'true');
28
+ }
29
+ else {
30
+ this.showMoreItem.removeAttribute('aria-disabled');
31
+ }
32
+ this.showMoreItem.classList.toggle('disabled', value);
33
+ }
34
+ set currentPage(value) {
35
+ this.showMoreItem.setAttribute('data-current-page', value.toString());
36
+ }
37
+ get currentPage() {
38
+ return parseInt(this.showMoreItem.getAttribute('data-current-page')) || 1;
39
+ }
40
+ get totalPages() {
41
+ return parseInt(this.showMoreItem.getAttribute('data-total-pages')) || 1;
42
+ }
43
+ get paginationSrc() {
44
+ return this.showMoreItem.getAttribute('src') || '';
45
+ }
46
+ async showMore(e) {
47
+ var _a, _b;
48
+ e.preventDefault();
49
+ if (this.showMoreDisabled)
50
+ return;
51
+ this.showMoreDisabled = true;
52
+ let html;
53
+ try {
54
+ const paginationURL = new URL(this.paginationSrc, window.location.origin);
55
+ this.currentPage++;
56
+ paginationURL.searchParams.append('page', this.currentPage.toString());
57
+ const response = await fetch(paginationURL);
58
+ if (!response.ok)
59
+ return;
60
+ html = await response.text();
61
+ if (this.currentPage === this.totalPages) {
62
+ this.showMoreItem.hidden = true;
63
+ }
64
+ }
65
+ catch (err) {
66
+ // Ignore network errors
67
+ this.showMoreDisabled = false;
68
+ this.currentPage--;
69
+ return;
70
+ }
71
+ const fragment = __classPrivateFieldGet(this, _NavListGroupElement_instances, "m", _NavListGroupElement_parseHTML).call(this, document, html);
72
+ (_a = fragment === null || fragment === void 0 ? void 0 : fragment.querySelector('li > a')) === null || _a === void 0 ? void 0 : _a.setAttribute('data-targets', 'nav-list-group.focusMarkers');
73
+ const listId = e.target.closest('button').getAttribute('data-list-id');
74
+ const list = document.getElementById(listId);
75
+ list.append(fragment);
76
+ (_b = this.focusMarkers.pop()) === null || _b === void 0 ? void 0 : _b.focus();
77
+ this.showMoreDisabled = false;
78
+ }
79
+ setShowMoreItemState() {
80
+ if (!this.showMoreItem) {
81
+ return;
82
+ }
83
+ if (this.currentPage < this.totalPages) {
84
+ this.showMoreItem.hidden = false;
85
+ }
86
+ else {
87
+ this.showMoreItem.hidden = true;
88
+ }
89
+ }
90
+ };
91
+ _NavListGroupElement_instances = new WeakSet();
92
+ _NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
93
+ const template = document.createElement('template');
94
+ // eslint-disable-next-line github/no-inner-html
95
+ template.innerHTML = html;
96
+ return document.importNode(template.content, true);
97
+ };
98
+ __decorate([
99
+ target
100
+ ], NavListGroupElement.prototype, "showMoreItem", void 0);
101
+ __decorate([
102
+ targets
103
+ ], NavListGroupElement.prototype, "focusMarkers", void 0);
104
+ NavListGroupElement = __decorate([
105
+ controller
106
+ ], NavListGroupElement);
107
+ export { NavListGroupElement };
108
+ window.NavListGroupElement = NavListGroupElement;
@@ -0,0 +1,97 @@
1
+ import {controller, target, targets} from '@github/catalyst'
2
+
3
+ @controller
4
+ export class NavListGroupElement extends HTMLElement {
5
+ @target showMoreItem: HTMLElement
6
+ @targets focusMarkers: HTMLElement[]
7
+
8
+ connectedCallback(): void {
9
+ this.setShowMoreItemState()
10
+ }
11
+
12
+ get showMoreDisabled(): boolean {
13
+ return this.showMoreItem.hasAttribute('aria-disabled')
14
+ }
15
+
16
+ set showMoreDisabled(value: boolean) {
17
+ if (value) {
18
+ this.showMoreItem.setAttribute('aria-disabled', 'true')
19
+ } else {
20
+ this.showMoreItem.removeAttribute('aria-disabled')
21
+ }
22
+ this.showMoreItem.classList.toggle('disabled', value)
23
+ }
24
+
25
+ set currentPage(value: number) {
26
+ this.showMoreItem.setAttribute('data-current-page', value.toString())
27
+ }
28
+
29
+ get currentPage(): number {
30
+ return parseInt(this.showMoreItem.getAttribute('data-current-page') as string) || 1
31
+ }
32
+
33
+ get totalPages(): number {
34
+ return parseInt(this.showMoreItem.getAttribute('data-total-pages') as string) || 1
35
+ }
36
+
37
+ get paginationSrc(): string {
38
+ return this.showMoreItem.getAttribute('src') || ''
39
+ }
40
+
41
+ private async showMore(e: Event) {
42
+ e.preventDefault()
43
+ if (this.showMoreDisabled) return
44
+ this.showMoreDisabled = true
45
+ let html
46
+ try {
47
+ const paginationURL = new URL(this.paginationSrc, window.location.origin)
48
+ this.currentPage++
49
+ paginationURL.searchParams.append('page', this.currentPage.toString())
50
+ const response = await fetch(paginationURL)
51
+ if (!response.ok) return
52
+ html = await response.text()
53
+ if (this.currentPage === this.totalPages) {
54
+ this.showMoreItem.hidden = true
55
+ }
56
+ } catch (err) {
57
+ // Ignore network errors
58
+ this.showMoreDisabled = false
59
+ this.currentPage--
60
+ return
61
+ }
62
+ const fragment = this.#parseHTML(document, html)
63
+ fragment?.querySelector('li > a')?.setAttribute('data-targets', 'nav-list-group.focusMarkers')
64
+ const listId = (e.target as HTMLElement).closest('button')!.getAttribute('data-list-id')!
65
+ const list = document.getElementById(listId)!
66
+ list.append(fragment)
67
+ this.focusMarkers.pop()?.focus()
68
+ this.showMoreDisabled = false
69
+ }
70
+
71
+ private setShowMoreItemState() {
72
+ if (!this.showMoreItem) {
73
+ return
74
+ }
75
+
76
+ if (this.currentPage < this.totalPages) {
77
+ this.showMoreItem.hidden = false
78
+ } else {
79
+ this.showMoreItem.hidden = true
80
+ }
81
+ }
82
+
83
+ #parseHTML(document: Document, html: string): DocumentFragment {
84
+ const template = document.createElement('template')
85
+ // eslint-disable-next-line github/no-inner-html
86
+ template.innerHTML = html
87
+ return document.importNode(template.content, true)
88
+ }
89
+ }
90
+
91
+ declare global {
92
+ interface Window {
93
+ NavListGroupElement: typeof NavListGroupElement
94
+ }
95
+ }
96
+
97
+ window.NavListGroupElement = NavListGroupElement
@@ -52,7 +52,7 @@ module Primer
52
52
 
53
53
  MONTH_DEFAULT = nil
54
54
  MONTH_MAPPINGS = {
55
- DAY_DEFAULT => nil,
55
+ MONTH_DEFAULT => nil,
56
56
  :numeric => "numeric",
57
57
  :two_digit => "2-digit",
58
58
  :short => "short",
@@ -63,7 +63,7 @@ module Primer
63
63
 
64
64
  YEAR_DEFAULT = nil
65
65
  YEAR_MAPPINGS = {
66
- DAY_DEFAULT => nil,
66
+ YEAR_DEFAULT => nil,
67
67
  :numeric => "numeric",
68
68
  :two_digit => "2-digit"
69
69
  }.freeze
@@ -71,7 +71,7 @@ module Primer
71
71
 
72
72
  TIMEZONENAME_DEFAULT = nil
73
73
  TIMEZONE_MAPPINGS = {
74
- DAY_DEFAULT => nil,
74
+ TIMEZONENAME_DEFAULT => nil,
75
75
  :long => "long",
76
76
  :short => "short",
77
77
  :short_offset => "shortOffset",
@@ -131,7 +131,7 @@ module Primer
131
131
  @system_arguments[:hour] = fetch_or_fallback(HOUR_OPTIONS, hour, HOUR_DEFAULT) if hour.present?
132
132
  @system_arguments[:weekday] = fetch_or_fallback(WEEKDAY_OPTIONS, weekday, WEEKDAY_DEFAULT) if weekday.present?
133
133
  @system_arguments[:day] = fetch_or_fallback(DAY_OPTIONS, day, DAY_DEFAULT) if day.present?
134
- @system_arguments[:month] = fetch_or_fallback(MONTH_DEFAULT, month, MONTH_DEFAULT) if month.present?
134
+ @system_arguments[:month] = fetch_or_fallback(MONTH_OPTIONS, month, MONTH_DEFAULT) if month.present?
135
135
  @system_arguments[:year] = fetch_or_fallback(YEAR_OPTIONS, year, YEAR_DEFAULT) if year.present?
136
136
  @system_arguments[:"time-zone-name"] = fetch_or_fallback(TIMEZONENAME_OPTIONS, time_zone_name, TIMEZONENAME_DEFAULT) if time_zone_name.present?
137
137
  @system_arguments[:threshold] = threshold if threshold.present?
@@ -16,6 +16,9 @@ module Primer
16
16
  include ViewComponent::PolymorphicSlots
17
17
  end
18
18
 
19
+ include ExperimentalRenderHelpers
20
+ include ExperimentalSlotHelpers
21
+
19
22
  include AttributesHelper
20
23
  include ClassNameHelper
21
24
  include FetchOrFallbackHelper
@@ -0,0 +1 @@
1
+ .InputGroup.InputGroup-input-width--auto{width:auto}.InputGroup.InputGroup-input-width--small{max-width:min(256px,100vw - 2rem)}.InputGroup.InputGroup-input-width--medium{max-width:min(320px,100vw - 2rem)}.InputGroup.InputGroup-input-width--large{max-width:min(480px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xlarge{max-width:min(640px,100vw - 2rem)}.InputGroup.InputGroup-input-width--xxlarge{max-width:min(960px,100vw - 2rem)}
@@ -0,0 +1,11 @@
1
+ {
2
+ "name": "open_project/input_group",
3
+ "selectors": [
4
+ ".InputGroup.InputGroup-input-width--auto",
5
+ ".InputGroup.InputGroup-input-width--small",
6
+ ".InputGroup.InputGroup-input-width--medium",
7
+ ".InputGroup.InputGroup-input-width--large",
8
+ ".InputGroup.InputGroup-input-width--xlarge",
9
+ ".InputGroup.InputGroup-input-width--xxlarge"
10
+ ]
11
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["input_group.pcss"],"names":[],"mappings":"AACI,yCACI,UACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,0CACI,iCACJ,CAEA,2CACI,iCACJ,CAEA,4CACI,iCACJ","file":"input_group.css","sourcesContent":[".InputGroup {\n &.InputGroup-input-width--auto {\n width: auto;\n }\n\n &.InputGroup-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--xlarge {\n max-width: min(640px, 100vw - 2rem);\n }\n\n &.InputGroup-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n"]}
@@ -0,0 +1,4 @@
1
+ <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
2
+ <%= text_input %>
3
+ <%= trailing_action %>
4
+ <% end %>
@@ -0,0 +1,25 @@
1
+ .InputGroup {
2
+ &.InputGroup-input-width--auto {
3
+ width: auto;
4
+ }
5
+
6
+ &.InputGroup-input-width--small {
7
+ max-width: min(256px, 100vw - 2rem);
8
+ }
9
+
10
+ &.InputGroup-input-width--medium {
11
+ max-width: min(320px, 100vw - 2rem);
12
+ }
13
+
14
+ &.InputGroup-input-width--large {
15
+ max-width: min(480px, 100vw - 2rem);
16
+ }
17
+
18
+ &.InputGroup-input-width--xlarge {
19
+ max-width: min(640px, 100vw - 2rem);
20
+ }
21
+
22
+ &.InputGroup-input-width--xxlarge {
23
+ max-width: min(960px, 100vw - 2rem);
24
+ }
25
+ }