openproject-primer_view_components 0.23.0 → 0.25.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +53 -0
  3. data/README.md +1 -0
  4. data/app/assets/javascripts/app/components/primer/alpha/action_list.d.ts +16 -0
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +3 -0
  6. data/app/assets/javascripts/app/components/primer/open_project/page_header_element.d.ts +9 -0
  7. data/app/assets/javascripts/app/components/primer/primer.d.ts +2 -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/item.rb +19 -6
  13. data/app/components/primer/alpha/action_list.css +1 -1
  14. data/app/components/primer/alpha/action_list.css.json +2 -0
  15. data/app/components/primer/alpha/action_list.css.map +1 -1
  16. data/app/components/primer/alpha/action_list.d.ts +16 -0
  17. data/app/components/primer/alpha/action_list.html.erb +19 -17
  18. data/app/components/primer/alpha/action_list.js +69 -0
  19. data/app/components/primer/alpha/action_list.pcss +8 -0
  20. data/app/components/primer/alpha/action_list.ts +58 -0
  21. data/app/components/primer/alpha/dialog.css +1 -1
  22. data/app/components/primer/alpha/dialog.css.json +1 -0
  23. data/app/components/primer/alpha/dialog.css.map +1 -1
  24. data/app/components/primer/alpha/dialog.pcss +10 -0
  25. data/app/components/primer/alpha/dropdown.css +1 -1
  26. data/app/components/primer/alpha/dropdown.css.map +1 -1
  27. data/app/components/primer/alpha/dropdown.pcss +1 -1
  28. data/app/components/primer/alpha/segmented_control.css +1 -1
  29. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  30. data/app/components/primer/alpha/segmented_control.pcss +1 -0
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.json +2 -0
  33. data/app/components/primer/alpha/text_field.css.map +1 -1
  34. data/app/components/primer/alpha/text_field.pcss +10 -0
  35. data/app/components/primer/alpha/toggle_switch.rb +2 -2
  36. data/app/components/primer/alpha/tool_tip.js +46 -77
  37. data/app/components/primer/alpha/tool_tip.ts +46 -77
  38. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +9 -9
  39. data/app/components/primer/beta/breadcrumbs.css +1 -1
  40. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  41. data/app/components/primer/beta/breadcrumbs.pcss +3 -1
  42. data/app/components/primer/beta/button.css +1 -1
  43. data/app/components/primer/beta/button.css.json +1 -0
  44. data/app/components/primer/beta/button.css.map +1 -1
  45. data/app/components/primer/beta/button.pcss +4 -0
  46. data/app/components/primer/beta/nav_list.d.ts +3 -0
  47. data/app/components/primer/beta/nav_list.html.erb +1 -1
  48. data/app/components/primer/beta/nav_list.js +25 -2
  49. data/app/components/primer/beta/nav_list.ts +18 -1
  50. data/app/components/primer/beta/nav_list_group_element.js +4 -1
  51. data/app/components/primer/beta/nav_list_group_element.ts +3 -0
  52. data/app/components/primer/beta/popover.css +1 -1
  53. data/app/components/primer/beta/popover.css.map +1 -1
  54. data/app/components/primer/beta/popover.pcss +3 -0
  55. data/app/components/primer/beta/popover.rb +0 -1
  56. data/app/components/primer/open_project/page_header.css +1 -1
  57. data/app/components/primer/open_project/page_header.css.json +3 -4
  58. data/app/components/primer/open_project/page_header.css.map +1 -1
  59. data/app/components/primer/open_project/page_header.html.erb +16 -5
  60. data/app/components/primer/open_project/page_header.pcss +12 -15
  61. data/app/components/primer/open_project/page_header.rb +164 -57
  62. data/app/components/primer/open_project/page_header_element.d.ts +9 -0
  63. data/app/components/primer/open_project/page_header_element.js +23 -0
  64. data/app/components/primer/open_project/page_header_element.ts +25 -0
  65. data/app/components/primer/primer.d.ts +2 -0
  66. data/app/components/primer/primer.js +2 -0
  67. data/app/components/primer/primer.ts +2 -0
  68. data/app/forms/auto_complete_form.rb +18 -0
  69. data/app/forms/select_form.rb +10 -0
  70. data/lib/primer/forms/auto_complete.html.erb +6 -0
  71. data/lib/primer/forms/auto_complete.rb +56 -0
  72. data/lib/primer/forms/builder.rb +19 -0
  73. data/lib/primer/forms/check_box_group.html.erb +4 -4
  74. data/lib/primer/forms/check_box_group.rb +0 -3
  75. data/lib/primer/forms/dsl/auto_complete_input.rb +33 -0
  76. data/lib/primer/forms/dsl/check_box_group_input.rb +8 -0
  77. data/lib/primer/forms/dsl/input.rb +8 -2
  78. data/lib/primer/forms/dsl/input_methods.rb +9 -0
  79. data/lib/primer/forms/dsl/radio_button_group_input.rb +8 -0
  80. data/lib/primer/forms/dsl/select_input.rb +5 -1
  81. data/lib/primer/forms/form_control.rb +1 -2
  82. data/lib/primer/forms/primer_text_field.js +2 -2
  83. data/lib/primer/forms/primer_text_field.ts +2 -2
  84. data/lib/primer/forms/radio_button_group.html.erb +4 -4
  85. data/lib/primer/forms/radio_button_group.rb +0 -3
  86. data/lib/primer/forms/select.html.erb +1 -0
  87. data/lib/primer/forms/select.rb +9 -5
  88. data/lib/primer/view_components/version.rb +1 -1
  89. data/previews/primer/alpha/action_list_preview.rb +42 -0
  90. data/previews/primer/alpha/action_menu_preview.rb +1 -1
  91. data/previews/primer/alpha/select_preview.rb +12 -1
  92. data/previews/primer/alpha/text_area_preview.rb +7 -1
  93. data/previews/primer/alpha/text_field_preview.rb +7 -1
  94. data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb +6 -0
  95. data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb +6 -0
  96. data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb +6 -0
  97. data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb +6 -0
  98. data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb +6 -0
  99. data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb +6 -0
  100. data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb +6 -0
  101. data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb +6 -0
  102. data/previews/primer/alpha/tooltip_preview.rb +80 -0
  103. data/previews/primer/beta/nav_list_preview.rb +43 -0
  104. data/previews/primer/forms_preview/auto_complete_form.html.erb +3 -0
  105. data/previews/primer/forms_preview/select_form.html.erb +1 -1
  106. data/previews/primer/forms_preview.rb +2 -0
  107. data/previews/primer/open_project/border_grid_preview.rb +2 -2
  108. data/previews/primer/open_project/input_group_preview.rb +5 -5
  109. data/previews/primer/open_project/page_header_preview/actions.html.erb +18 -15
  110. data/previews/primer/open_project/page_header_preview/playground.html.erb +9 -24
  111. data/previews/primer/open_project/page_header_preview.rb +24 -50
  112. data/static/arguments.json +41 -8
  113. data/static/audited_at.json +1 -0
  114. data/static/classes.json +4 -4
  115. data/static/constants.json +29 -16
  116. data/static/info_arch.json +311 -69
  117. data/static/previews.json +251 -30
  118. data/static/statuses.json +1 -0
  119. metadata +23 -3
  120. data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +0 -25
data/app/components/primer/beta/nav_list.js CHANGED
@@ -4,18 +4,37 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
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
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
8
+ if (kind === "m") throw new TypeError("Private method is not writable");
9
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
10
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
11
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
12
+ };
7
13
  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
14
  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
15
  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
16
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
17
  };
12
- var _NavListElement_instances, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
18
+ var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
13
19
  /* eslint-disable custom-elements/expose-class-on-global */
14
- import { controller, targets } from '@github/catalyst';
20
+ import { controller, target, targets } from '@github/catalyst';
21
+ import { ActionListTruncationObserver } from '../alpha/action_list';
15
22
  let NavListElement = class NavListElement extends HTMLElement {
16
23
  constructor() {
17
24
  super(...arguments);
18
25
  _NavListElement_instances.add(this);
26
+ _NavListElement_truncationObserver.set(this, void 0);
27
+ }
28
+ connectedCallback() {
29
+ // groups are wrapped in <action-list>, which handles resizing on its own
30
+ if (this.topLevelList) {
31
+ __classPrivateFieldSet(this, _NavListElement_truncationObserver, new ActionListTruncationObserver(this.topLevelList), "f");
32
+ }
33
+ }
34
+ disconnectedCallback() {
35
+ if (this.topLevelList) {
36
+ __classPrivateFieldGet(this, _NavListElement_truncationObserver, "f").unobserve(this.topLevelList);
37
+ }
19
38
  }
20
39
  selectItemById(itemId) {
21
40
  if (!itemId)
@@ -100,6 +119,7 @@ let NavListElement = class NavListElement extends HTMLElement {
100
119
  e.stopPropagation();
101
120
  }
102
121
  };
122
+ _NavListElement_truncationObserver = new WeakMap();
103
123
  _NavListElement_instances = new WeakSet();
104
124
  _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
105
125
  // First we compare the selected link to data-item-id for each nav item
@@ -164,6 +184,9 @@ _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem
164
184
  __decorate([
165
185
  targets
166
186
  ], NavListElement.prototype, "items", void 0);
187
+ __decorate([
188
+ target
189
+ ], NavListElement.prototype, "topLevelList", void 0);
167
190
  NavListElement = __decorate([
168
191
  controller
169
192
  ], NavListElement);
data/app/components/primer/beta/nav_list.ts CHANGED
@@ -1,9 +1,26 @@
1
1
  /* eslint-disable custom-elements/expose-class-on-global */
2
- import {controller, targets} from '@github/catalyst'
2
+ import {controller, target, targets} from '@github/catalyst'
3
+ import {ActionListTruncationObserver} from '../alpha/action_list'
3
4
 
4
5
  @controller
5
6
  export class NavListElement extends HTMLElement {
6
7
  @targets items: HTMLElement[]
8
+ @target topLevelList: HTMLElement
9
+
10
+ #truncationObserver: ActionListTruncationObserver
11
+
12
+ connectedCallback() {
13
+ // groups are wrapped in <action-list>, which handles resizing on its own
14
+ if (this.topLevelList) {
15
+ this.#truncationObserver = new ActionListTruncationObserver(this.topLevelList)
16
+ }
17
+ }
18
+
19
+ disconnectedCallback() {
20
+ if (this.topLevelList) {
21
+ this.#truncationObserver.unobserve(this.topLevelList)
22
+ }
23
+ }
7
24
 
8
25
  selectItemById(itemId: string | null): boolean {
9
26
  if (!itemId) return false
data/app/components/primer/beta/nav_list_group_element.js CHANGED
@@ -9,12 +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 _NavListGroupElement_instances, _NavListGroupElement_parseHTML;
12
+ var _NavListGroupElement_instances, _NavListGroupElement_parseHTML, _NavListGroupElement_truncateObserver;
13
13
  import { controller, target, targets } from '@github/catalyst';
14
+ import { ActionListTruncationObserver } from '../alpha/action_list';
14
15
  let NavListGroupElement = class NavListGroupElement extends HTMLElement {
15
16
  constructor() {
16
17
  super(...arguments);
17
18
  _NavListGroupElement_instances.add(this);
19
+ _NavListGroupElement_truncateObserver.set(this, new ActionListTruncationObserver(this));
18
20
  }
19
21
  connectedCallback() {
20
22
  this.setShowMoreItemState();
@@ -87,6 +89,7 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
87
89
  }
88
90
  }
89
91
  };
92
+ _NavListGroupElement_truncateObserver = new WeakMap();
90
93
  _NavListGroupElement_instances = new WeakSet();
91
94
  _NavListGroupElement_parseHTML = function _NavListGroupElement_parseHTML(document, html) {
92
95
  const template = document.createElement('template');
data/app/components/primer/beta/nav_list_group_element.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import {controller, target, targets} from '@github/catalyst'
2
+ import {ActionListTruncationObserver} from '../alpha/action_list'
2
3
 
3
4
  @controller
4
5
  export class NavListGroupElement extends HTMLElement {
@@ -86,6 +87,8 @@ export class NavListGroupElement extends HTMLElement {
86
87
  template.innerHTML = html
87
88
  return document.importNode(template.content, true)
88
89
  }
90
+
91
+ #truncateObserver = new ActionListTruncationObserver(this)
89
92
  }
90
93
 
91
94
  declare global {
data/app/components/primer/beta/popover.css CHANGED
@@ -1 +1 @@
1
- .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
1
+ .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default));margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--bottom:after,.Popover-message--bottom:before{border-bottom-color:#0000;top:auto}.Popover-message--bottom-left:before,.Popover-message--bottom-right:before,.Popover-message--bottom:before{border-top-color:var(--borderColor-default,var(--color-border-default));bottom:-16px}.Popover-message--bottom-left:after,.Popover-message--bottom-right:after,.Popover-message--bottom:after{border-top-color:var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}.Popover-message--bottom-right:after,.Popover-message--bottom-right:before,.Popover-message--top-right:after,.Popover-message--top-right:before{left:auto;margin-left:0}.Popover-message--bottom-right:before,.Popover-message--top-right:before{right:20px}.Popover-message--bottom-right:after,.Popover-message--top-right:after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--bottom-left:before,.Popover-message--top-left:after,.Popover-message--top-left:before{left:24px;margin-left:0}.Popover-message--bottom-left:after,.Popover-message--top-left:after{left:25px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--left:after,.Popover-message--left:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before,.Popover-message--right-top:after,.Popover-message--right-top:before,.Popover-message--right:after,.Popover-message--right:before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before,.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{margin-top:-9px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after,.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{margin-top:-8px}.Popover-message--right-bottom:before,.Popover-message--right-top:before,.Popover-message--right:before{border-left-color:var(--borderColor-default,var(--color-border-default));right:-16px}.Popover-message--right-bottom:after,.Popover-message--right-top:after,.Popover-message--right:after{border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));right:-14px}.Popover-message--left-bottom:before,.Popover-message--left-top:before,.Popover-message--left:before{border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px}.Popover-message--left-bottom:after,.Popover-message--left-top:after,.Popover-message--left:after{border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px}.Popover-message--left-top:after,.Popover-message--left-top:before,.Popover-message--right-top:after,.Popover-message--right-top:before{top:24px}.Popover-message--left-bottom:after,.Popover-message--left-bottom:before,.Popover-message--right-bottom:after,.Popover-message--right-bottom:before{top:auto}.Popover-message--left-bottom:before,.Popover-message--right-bottom:before{bottom:16px}.Popover-message--left-bottom:after,.Popover-message--right-bottom:after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed,.5rem);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal,.75rem)!important}.Popover-message:after,.Popover-message:before{display:none}}
data/app/components/primer/beta/popover.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WA6BF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
1
+ {"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAEA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAgCF,CArBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAIE,sBAA+C,CAA/C,8EAA+C,CAF/C,gBAAiB,CADjB,SAIF,CAEA,uBAIE,sBAA2C,CAA3C,0EAA2C,CAF3C,gBAAiB,CADjB,SAIF,CAKA,mEAEE,YACF,CAOA,mNAGE,yBAAgC,CADhC,QAEF,CAEA,2GAEE,uEAA4C,CAD5C,YAEF,CAEA,wGAEE,mEAAwC,CADxC,YAEF,CAIF,2DAGE,cAAe,CADf,UAgBF,CAbE,gJAEE,SAAU,CACV,aACF,CAEA,yEACE,UACF,CAEA,uEACE,UACF,CAIF,yDAEE,SAAU,CACV,aAWF,CATE,4IAEE,SAAU,CACV,aACF,CAEA,qEACE,SACF,CAUA,oZAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,6MACE,eACF,CAEA,uMACE,eACF,CAOA,wGAEE,wEAA6C,CAD7C,WAEF,CAEA,qGAEE,oEAAyC,CADzC,WAEF,CAOA,qGAEE,yEAA8C,CAD9C,UAEF,CAEA,kGAEE,qEAA0C,CAD1C,UAEF,CAMA,wIAEE,QACF,CAMA,oJAEE,QACF,CAEA,2EACE,WACF,CAEA,yEACE,WACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,uCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,mEACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: 20px;\n }\n\n &::after {\n right: 21px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: 24px;\n margin-left: 0;\n }\n\n &::after {\n left: 25px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: 24px;\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: 16px;\n }\n\n &::after {\n bottom: 17px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
data/app/components/primer/beta/popover.pcss CHANGED
@@ -14,6 +14,9 @@
14
14
  border: var(--borderWidth-thin) solid var(--borderColor-default);
15
15
  border-radius: var(--borderRadius-medium);
16
16
 
17
+ /* adding !important to override utility classes used in dotcom */
18
+ box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;
19
+
17
20
  /* Carets */
18
21
  &::before,
19
22
  &::after {
data/app/components/primer/beta/popover.rb CHANGED
@@ -54,7 +54,6 @@ module Primer
54
54
  @body_arguments[:mt] ||= 2
55
55
  @body_arguments[:mx] ||= :auto
56
56
  @body_arguments[:text_align] ||= :left
57
- @body_arguments[:box_shadow] ||= :large
58
57
 
59
58
  Primer::Content.new
60
59
  }
data/app/components/primer/open_project/page_header.css CHANGED
@@ -1 +1 @@
1
- .PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{display:flex;justify-content:flex-end;margin:0 0 0 var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto;margin-bottom:var(--base-size-4,.25rem)}.PageHeader-contextBarActions{margin:0 0 0 var(--base-size-4,.25rem)}
1
+ .PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall,.25rem)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}@media (max-width:543.98px){.PageHeader--singleAction .PageHeader-action{display:flex!important;position:absolute;top:10px}}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
data/app/components/primer/open_project/page_header.css.json CHANGED
@@ -8,10 +8,9 @@
8
8
  ".PageHeader-title--large",
9
9
  ".PageHeader-description",
10
10
  ".PageHeader-actions",
11
- ".PageHeader-actions+.PageHeader-description",
11
+ ".PageHeader--singleAction .PageHeader-action",
12
12
  ".PageHeader-breadcrumbs",
13
- ".PageHeader-backButton",
14
- ".PageHeader-parentLink",
15
- ".PageHeader-contextBarActions"
13
+ ".PageHeader-leadingAction",
14
+ ".PageHeader-parentLink"
16
15
  ]
17
16
  }
data/app/components/primer/open_project/page_header.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAUF,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAGE,YAAa,CADb,wBAAyB,CADzB,sCAOF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,uBAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aAAc,CACd,uCACF,CAEA,8BACE,sCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: column;\n\n @media (max-width: 767.98px) {\n border-bottom: 0;\n }\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n}\n\n.PageHeader-titleBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n font-size: 24px;\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n margin: 0 0 0 var(--base-size-4);\n justify-content: flex-end;\n display: flex;\n\n & + .PageHeader-description {\n margin-top: var(--base-size-4);\n }\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\n margin-bottom: var(--base-size-8);\n padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-backButton {\n margin-top: 2px; /* to center align with label */\n margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n flex: 1 1 auto;\n margin-bottom: var(--base-size-4);\n}\n\n.PageHeader-contextBarActions {\n margin: 0 0 0 var(--base-size-4);\n}"]}
1
+ {"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAIF,CASA,4CAHE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAUF,CANA,qBAKE,wCACF,CAEA,kBAGE,aAAc,CAFd,+CAAwC,CACxC,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAGE,4BADF,6CAMI,sBAAwB,CAJxB,iBAAkB,CAClB,QAKJ,CADE,CAGF,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,0BAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: column;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n}\n\n.PageHeader-titleBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center; /* Keep back button vertically aligned. */\n margin-bottom: var(--space-xsmall);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\n font-weight: var(--base-text-weight-normal);\n flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 100%;\n}\n\n.PageHeader-actions {\n justify-content: flex-end;\n display: flex;\n align-items: center;\n}\n\n.PageHeader--singleAction .PageHeader-action {\n @media (max-width: 543.98px) {\n position: absolute;\n top: 10px;\n\n /* Normally, the actions are hidden on mobile, except for this special case of a single action */\n display: flex !important;\n }\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\n margin-bottom: var(--base-size-8);\n padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-leadingAction {\n margin-top: 2px; /* to center align with label */\n margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n flex: 1 1 auto;\n}\n"]}
data/app/components/primer/open_project/page_header.html.erb CHANGED
@@ -1,16 +1,27 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <% if parent_link || breadcrumbs || context_bar_actions %>
2
+ <% if @parent_link || breadcrumbs || actions.any? %>
3
3
  <div class="PageHeader-contextBar">
4
- <%= parent_link %>
4
+ <%= @parent_link %>
5
5
  <%= breadcrumbs %>
6
- <%= context_bar_actions %>
6
+ <% if render_mobile_menu? %>
7
+ <%= render(@mobile_action_menu) do |menu| %>
8
+ <% menu.with_show_button(icon: :"kebab-horizontal", "aria-label": @mobile_menu_label) %>
9
+ <% @desktop_menu_block.call(menu) unless @desktop_menu_block.nil? %>
10
+ <% end %>
11
+ <% end %>
7
12
  </div>
8
13
  <% end %>
9
14
 
10
15
  <div class="PageHeader-titleBar">
11
- <%= back_button %>
16
+ <%= leading_action %>
12
17
  <%= title %>
13
- <%= actions %>
18
+ <% if actions.any? %>
19
+ <div class="PageHeader-actions">
20
+ <% actions.each do |action| %>
21
+ <%= action %>
22
+ <% end %>
23
+ </div>
24
+ <% end %>
14
25
  </div>
15
26
 
16
27
  <%= description %>
data/app/components/primer/open_project/page_header.pcss CHANGED
@@ -6,10 +6,6 @@
6
6
  margin-bottom: var(--stack-gap-normal);
7
7
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
8
8
  flex-flow: column;
9
-
10
- @media (max-width: 767.98px) {
11
- border-bottom: 0;
12
- }
13
9
  }
14
10
 
15
11
  .PageHeader-contextBar {
@@ -24,10 +20,11 @@
24
20
  flex-flow: row;
25
21
  justify-content: flex-end;
26
22
  align-items: center; /* Keep back button vertically aligned. */
23
+ margin-bottom: var(--space-xsmall);
27
24
  }
28
25
 
29
26
  .PageHeader-title {
30
- font-size: 24px;
27
+ font-size: var(--text-title-size-medium);
31
28
  font-weight: var(--base-text-weight-normal);
32
29
  flex: 1 1 auto;
33
30
  }
@@ -43,14 +40,19 @@
43
40
  flex: 1 100%;
44
41
  }
45
42
 
46
- /* Add 1 or 2 buttons to the right of the heading */
47
43
  .PageHeader-actions {
48
- margin: 0 0 0 var(--base-size-4);
49
44
  justify-content: flex-end;
50
45
  display: flex;
46
+ align-items: center;
47
+ }
48
+
49
+ .PageHeader--singleAction .PageHeader-action {
50
+ @media (max-width: 543.98px) {
51
+ position: absolute;
52
+ top: 10px;
51
53
 
52
- & + .PageHeader-description {
53
- margin-top: var(--base-size-4);
54
+ /* Normally, the actions are hidden on mobile, except for this special case of a single action */
55
+ display: flex !important;
54
56
  }
55
57
  }
56
58
 
@@ -61,16 +63,11 @@
61
63
  padding-bottom: var(--base-size-4);
62
64
  }
63
65
 
64
- .PageHeader-backButton {
66
+ .PageHeader-leadingAction {
65
67
  margin-top: 2px; /* to center align with label */
66
68
  margin-right: var(--base-size-4);
67
69
  }
68
70
 
69
71
  .PageHeader-parentLink {
70
72
  flex: 1 1 auto;
71
- margin-bottom: var(--base-size-4);
72
73
  }
73
-
74
- .PageHeader-contextBarActions {
75
- margin: 0 0 0 var(--base-size-4);
76
- }
data/app/components/primer/open_project/page_header.rb CHANGED
@@ -5,18 +5,11 @@ module Primer
5
5
  # A ViewComponent PageHeader inspired by the primer react variant
6
6
  class PageHeader < Primer::Component
7
7
  HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
8
- HEADING_TAG_FALLBACK = :h2
8
+ HEADING_TAG_FALLBACK = :h1
9
9
 
10
- DEFAULT_HEADER_VARIANT = :large
10
+ DEFAULT_HEADER_VARIANT = :medium
11
11
  HEADER_VARIANT_OPTIONS = [
12
- :medium,
13
- DEFAULT_HEADER_VARIANT
14
- ].freeze
15
-
16
- DEFAULT_BACK_BUTTON_SIZE = :medium
17
- BACK_BUTTON_SIZE_OPTIONS = [
18
- :small,
19
- DEFAULT_BACK_BUTTON_SIZE,
12
+ DEFAULT_HEADER_VARIANT,
20
13
  :large
21
14
  ].freeze
22
15
 
@@ -27,10 +20,12 @@ module Primer
27
20
  "triangle-left"
28
21
  ].freeze
29
22
 
30
- DEFAULT_BACK_BUTTON_DISPLAY = [:none, :flex].freeze
23
+ DEFAULT_ACTION_SCHEME = :default
24
+ MORE_MENU_DISPLAY = [:flex, :none].freeze
25
+
26
+ DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
31
27
  DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
32
28
  DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
33
- DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:block, :none].freeze
34
29
 
35
30
  status :open_project
36
31
 
@@ -61,62 +56,69 @@ module Primer
61
56
  # Actions
62
57
  #
63
58
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
64
- renders_one :actions, lambda { |**system_arguments|
65
- deny_tag_argument(**system_arguments)
66
- system_arguments[:tag] = :div
67
- system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-actions")
59
+ renders_many :actions, types: {
60
+ icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
61
+ deny_tag_argument(**system_arguments)
62
+ system_arguments = set_action_arguments(system_arguments, scheme: scheme)
63
+ add_option_to_mobile_menu(system_arguments, mobile_icon, label, scheme)
68
64
 
69
- Primer::BaseComponent.new(**system_arguments)
70
- }
65
+ Primer::Beta::IconButton.new(icon: icon, "aria-label": label, **system_arguments)
66
+ },
67
+ button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
68
+ deny_tag_argument(**system_arguments)
69
+ system_arguments = set_action_arguments(system_arguments, scheme: scheme)
70
+ add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
71
71
 
72
- # Context Bar Actions
73
- # By default shown on narrow screens. Can be overridden with system_argument: display
74
- #
75
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
76
- renders_one :context_bar_actions, lambda { |**system_arguments|
77
- deny_tag_argument(**system_arguments)
78
- system_arguments[:tag] = :div
79
- system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-contextBarActions")
80
- system_arguments[:display] ||= DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY
72
+ Primer::Beta::Button.new(**system_arguments)
73
+ },
74
+ link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
75
+ deny_tag_argument(**system_arguments)
76
+ system_arguments = set_action_arguments(system_arguments, scheme: scheme)
77
+ add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
81
78
 
82
- Primer::BaseComponent.new(**system_arguments)
79
+ Primer::Beta::Link.new(**system_arguments)
80
+ },
81
+ # Should only be used rarely on a per-need basis
82
+ text: lambda { |**system_arguments|
83
+ system_arguments = set_action_arguments(system_arguments)
84
+
85
+ system_arguments[:color] ||= :muted
86
+
87
+ # Enforce that texts are hidden on mobile
88
+ system_arguments[:display] = [:none, :flex]
89
+
90
+ Primer::Beta::Text.new(**system_arguments)
91
+ },
92
+ menu: {
93
+ renders: lambda { |**system_arguments, &block|
94
+ deny_tag_argument(**system_arguments)
95
+ system_arguments[:menu_arguments] = set_action_arguments(system_arguments[:menu_arguments])
96
+
97
+ # Add the options individually to the mobile menu in the template
98
+ @desktop_menu_block = block
99
+
100
+ PageHeaderActionMenu.new(**system_arguments)
101
+ },
102
+ },
83
103
  }
84
104
 
85
- # Optional back button prepend the title
105
+ # Optional leading action prepend the title
86
106
  # By default shown on wider screens. Can be overridden with system_argument: display
87
107
  #
88
- # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
89
- # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
108
+ # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use.
90
109
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
91
- renders_one :back_button, lambda { |
92
- size: DEFAULT_BACK_BUTTON_SIZE,
93
- icon: DEFAULT_BACK_BUTTON_ICON,
110
+ renders_one :leading_action, lambda { |
111
+ icon:,
94
112
  **system_arguments
95
113
  |
96
114
  deny_tag_argument(**system_arguments)
97
115
  system_arguments[:tag] = :a
98
116
  system_arguments[:scheme] = :invisible
99
- system_arguments[:size] = fetch_or_fallback(BACK_BUTTON_SIZE_OPTIONS, size, DEFAULT_BACK_BUTTON_SIZE)
100
- system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
101
- system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
102
- system_arguments[:display] ||= DEFAULT_BACK_BUTTON_DISPLAY
103
-
104
- Primer::Beta::IconButton.new(**system_arguments)
105
- }
106
-
107
- # Optional parent link in the context area
108
- # By default shown on narrow screens. Can be overridden with system_argument: display
109
- #
110
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
111
- renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
112
- deny_tag_argument(**system_arguments)
113
- system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
114
- system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
115
- system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
117
+ system_arguments[:icon] = icon
118
+ system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-leadingAction")
119
+ system_arguments[:display] ||= DEFAULT_LEADING_ACTION_DISPLAY
116
120
 
117
- render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
118
- render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
119
- end
121
+ Primer::Beta::IconButton.new(icon: icon, **system_arguments)
120
122
  }
121
123
 
122
124
  # Optional breadcrumbs above the title row
@@ -128,6 +130,25 @@ module Primer
128
130
  system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
129
131
  system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
130
132
 
133
+ # show parent link if there is a parent for current page
134
+ if items.length > 1
135
+ link_arguments = {}
136
+ parent_item = items[items.length - 2]
137
+ parsed_parent_item = anchor_tag_string?(parent_item) ? anchor_string_to_object(parent_item) : parent_item
138
+
139
+ link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
140
+ link_arguments[:href] = parsed_parent_item[:href]
141
+ link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
142
+ link_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
143
+
144
+ @parent_link = render(Primer::Beta::Link.new(scheme: :primary, muted: true, **link_arguments)) do
145
+ render(Primer::Beta::Octicon.new(icon: "arrow-left",
146
+ "aria-label": I18n.t("button_back"),
147
+ mr: 2)
148
+ ) + content_tag(:span, parsed_parent_item[:text])
149
+ end
150
+ end
151
+
131
152
  render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
132
153
  items.each do |item|
133
154
  item = anchor_string_to_object(item) if anchor_tag_string?(item)
@@ -141,23 +162,83 @@ module Primer
141
162
  end
142
163
  }
143
164
 
144
- def initialize(**system_arguments)
165
+ # @param mobile_menu_label [String] The tooltip label of the mobile menu
166
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
167
+ def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
145
168
  @system_arguments = deny_tag_argument(**system_arguments)
169
+ @mobile_menu_label = mobile_menu_label
146
170
 
147
- @system_arguments[:tag] = :header
171
+ @system_arguments[:tag] = :"page-header"
148
172
  @system_arguments[:classes] =
149
173
  class_names(
150
174
  @system_arguments[:classes],
151
175
  "PageHeader"
152
176
  )
177
+
178
+ @mobile_action_menu = Primer::Alpha::ActionMenu.new(
179
+ display: MORE_MENU_DISPLAY,
180
+ anchor_align: :end
181
+ )
153
182
  end
154
183
 
155
184
  def render?
156
- title?
185
+ raise ArgumentError, "PageHeader needs a title and a breadcrumb. Please use the `with_title` and `with_breadcrumbs` slot" unless breadcrumbs? || Rails.env.production?
186
+ title? && breadcrumbs?
187
+ end
188
+
189
+ def before_render
190
+ @system_arguments[:classes] = class_names(
191
+ @system_arguments[:classes],
192
+ "PageHeader--singleAction": !render_mobile_menu?
193
+ )
194
+
195
+ content
196
+ end
197
+
198
+ def render_mobile_menu?
199
+ actions.count > 1
157
200
  end
158
201
 
159
202
  private
160
203
 
204
+ def set_action_arguments(system_arguments, scheme: nil)
205
+ system_arguments[:ml] ||= 2
206
+ system_arguments[:display] = [:none, :flex]
207
+ system_arguments[:scheme] = scheme unless scheme.nil?
208
+ system_arguments[:classes] = class_names(
209
+ system_arguments[:classes],
210
+ "PageHeader-action",
211
+ )
212
+
213
+ system_arguments[:id] ||= self.class.generate_id
214
+ system_arguments
215
+ end
216
+
217
+ def add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
218
+ unless mobile_icon.nil? || mobile_label.nil?
219
+ # In action menus, only :default and :danger are allowed
220
+ scheme = DEFAULT_ACTION_SCHEME unless scheme == :danger
221
+
222
+ with_menu_item(id: system_arguments[:id], label: mobile_label, scheme: scheme) do |c|
223
+ c.with_leading_visual_icon(icon: mobile_icon)
224
+ end
225
+ end
226
+ end
227
+
228
+ def with_menu_item(id:, **system_arguments, &block)
229
+ system_arguments = {
230
+ **system_arguments,
231
+ "data-for": id,
232
+ "data-action": "click:page-header#menuItemClick"
233
+ }
234
+
235
+ @mobile_action_menu.with_item(
236
+ value: "",
237
+ **system_arguments,
238
+ &block
239
+ )
240
+ end
241
+
161
242
  # transform anchor tag strings to {href, text} objects
162
243
  # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
163
244
  def anchor_string_to_object(html_string)
@@ -172,6 +253,32 @@ module Primer
172
253
  def anchor_tag_string?(item)
173
254
  item.is_a?(String) && item.start_with?("\u003c")
174
255
  end
256
+
257
+ # A Helper class to create ActionMenus inside the PageHeader action slot
258
+ class PageHeaderActionMenu < Primer::Component
259
+ status :open_project
260
+
261
+ # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
262
+ # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
263
+ def initialize(menu_arguments: {}, button_arguments: {})
264
+ @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
265
+ @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
266
+ end
267
+
268
+ def render_in(view_context, &block)
269
+ super(view_context) do
270
+ block.call(@menu, @button)
271
+ end
272
+ end
273
+
274
+ def before_render
275
+ content
276
+ end
277
+
278
+ def call
279
+ render(@menu)
280
+ end
281
+ end
175
282
  end
176
283
  end
177
284
  end
data/app/components/primer/open_project/page_header_element.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ declare class PageHeaderElement extends HTMLElement {
2
+ menuItemClick(event: Event): void;
3
+ }
4
+ declare global {
5
+ interface Window {
6
+ PageHeaderElement: typeof PageHeaderElement;
7
+ }
8
+ }
9
+ export {};