openproject-primer_view_components 0.70.0 → 0.70.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +14 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/tool_tip.js +28 -23
  8. data/app/components/primer/alpha/tool_tip.ts +30 -24
  9. data/app/components/primer/open_project/page_header.css +1 -1
  10. data/app/components/primer/open_project/page_header.css.map +1 -1
  11. data/app/components/primer/open_project/page_header.pcss +1 -0
  12. data/lib/primer/view_components/version.rb +1 -1
  13. metadata +2 -2
data/app/components/primer/alpha/tool_tip.js CHANGED
@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
9
9
  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");
10
10
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
11
11
  };
12
- var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
12
+ var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
13
13
  import '@oddbird/popover-polyfill';
14
14
  import { getAnchoredPosition } from '@primer/behaviors';
15
15
  const isPopoverOpen = (() => {
@@ -233,26 +233,7 @@ class ToolTipElement extends HTMLElement {
233
233
  }
234
234
  __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
235
235
  __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
236
- if (!this.control)
237
- return;
238
- this.setAttribute('role', 'tooltip');
239
- __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
240
- __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
241
- const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
242
- this.addEventListener('mouseleave', this, { signal });
243
- this.addEventListener('toggle', this, { signal });
244
- this.control.addEventListener('mouseenter', this, { signal });
245
- this.control.addEventListener('mouseleave', this, { signal });
246
- this.control.addEventListener('focus', this, { signal });
247
- this.control.addEventListener('mousedown', this, { signal });
248
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
249
- // @ts-ignore popoverTargetElement is not in the type definition
250
- this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
251
- signal,
252
- });
253
- this.ownerDocument.addEventListener('focusout', focusOutListener);
254
- this.ownerDocument.addEventListener('focusin', focusInListener);
255
- this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
236
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControl).call(this);
256
237
  }
257
238
  disconnectedCallback() {
258
239
  tooltips.delete(this);
@@ -296,7 +277,10 @@ class ToolTipElement extends HTMLElement {
296
277
  attributeChangedCallback(name) {
297
278
  if (!this.isConnected)
298
279
  return;
299
- if (name === 'id' || name === 'data-type') {
280
+ if (name === 'for') {
281
+ __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControl).call(this);
282
+ }
283
+ else if (name === 'id' || name === 'data-type') {
300
284
  __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
301
285
  }
302
286
  else if (name === 'data-direction') {
@@ -316,6 +300,27 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
316
300
  this.classList.remove(...DIRECTION_CLASSES);
317
301
  this.classList.add(TOOLTIP_SR_ONLY_CLASS);
318
302
  }
303
+ }, _ToolTipElement_updateControl = function _ToolTipElement_updateControl() {
304
+ if (!this.control)
305
+ return;
306
+ this.setAttribute('role', 'tooltip');
307
+ __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
308
+ __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
309
+ const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
310
+ this.addEventListener('mouseleave', this, { signal });
311
+ this.addEventListener('toggle', this, { signal });
312
+ this.control.addEventListener('mouseenter', this, { signal });
313
+ this.control.addEventListener('mouseleave', this, { signal });
314
+ this.control.addEventListener('focus', this, { signal });
315
+ this.control.addEventListener('mousedown', this, { signal });
316
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
317
+ // @ts-ignore popoverTargetElement is not in the type definition
318
+ this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
319
+ signal,
320
+ });
321
+ this.ownerDocument.addEventListener('focusout', focusOutListener);
322
+ this.ownerDocument.addEventListener('focusin', focusInListener);
323
+ this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
319
324
  }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
320
325
  if (!this.id || !this.control)
321
326
  return;
@@ -431,7 +436,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
431
436
  }
432
437
  this.classList.add(`tooltip-${direction}`);
433
438
  };
434
- ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id'];
439
+ ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'for'];
435
440
  if (!window.customElements.get('tool-tip')) {
436
441
  window.ToolTipElement = ToolTipElement;
437
442
  window.customElements.define('tool-tip', ToolTipElement);
data/app/components/primer/alpha/tool_tip.ts CHANGED
@@ -234,28 +234,7 @@ class ToolTipElement extends HTMLElement {
234
234
  this.#update(false)
235
235
  this.#allowUpdatePosition = true
236
236
 
237
- if (!this.control) return
238
-
239
- this.setAttribute('role', 'tooltip')
240
-
241
- this.#abortController?.abort()
242
- this.#abortController = new AbortController()
243
- const {signal} = this.#abortController
244
-
245
- this.addEventListener('mouseleave', this, {signal})
246
- this.addEventListener('toggle', this, {signal})
247
- this.control.addEventListener('mouseenter', this, {signal})
248
- this.control.addEventListener('mouseleave', this, {signal})
249
- this.control.addEventListener('focus', this, {signal})
250
- this.control.addEventListener('mousedown', this, {signal})
251
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
252
- // @ts-ignore popoverTargetElement is not in the type definition
253
- this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
254
- signal,
255
- })
256
- this.ownerDocument.addEventListener('focusout', focusOutListener)
257
- this.ownerDocument.addEventListener('focusin', focusInListener)
258
- this.ownerDocument.addEventListener('keydown', this, {signal, capture: true})
237
+ this.#updateControl()
259
238
  }
260
239
 
261
240
  disconnectedCallback() {
@@ -303,7 +282,7 @@ class ToolTipElement extends HTMLElement {
303
282
  }
304
283
  }
305
284
 
306
- static observedAttributes = ['data-type', 'data-direction', 'id']
285
+ static observedAttributes = ['data-type', 'data-direction', 'id', 'for']
307
286
 
308
287
  #update(isOpen: boolean) {
309
288
  if (isOpen) {
@@ -321,13 +300,40 @@ class ToolTipElement extends HTMLElement {
321
300
  attributeChangedCallback(name: string) {
322
301
  if (!this.isConnected) return
323
302
 
324
- if (name === 'id' || name === 'data-type') {
303
+ if (name === 'for') {
304
+ this.#updateControl()
305
+ } else if (name === 'id' || name === 'data-type') {
325
306
  this.#updateControlReference()
326
307
  } else if (name === 'data-direction') {
327
308
  this.#updateDirection()
328
309
  }
329
310
  }
330
311
 
312
+ #updateControl() {
313
+ if (!this.control) return
314
+
315
+ this.setAttribute('role', 'tooltip')
316
+
317
+ this.#abortController?.abort()
318
+ this.#abortController = new AbortController()
319
+ const {signal} = this.#abortController
320
+
321
+ this.addEventListener('mouseleave', this, {signal})
322
+ this.addEventListener('toggle', this, {signal})
323
+ this.control.addEventListener('mouseenter', this, {signal})
324
+ this.control.addEventListener('mouseleave', this, {signal})
325
+ this.control.addEventListener('focus', this, {signal})
326
+ this.control.addEventListener('mousedown', this, {signal})
327
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
328
+ // @ts-ignore popoverTargetElement is not in the type definition
329
+ this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
330
+ signal,
331
+ })
332
+ this.ownerDocument.addEventListener('focusout', focusOutListener)
333
+ this.ownerDocument.addEventListener('focusin', focusInListener)
334
+ this.ownerDocument.addEventListener('keydown', this, {signal, capture: true})
335
+ }
336
+
331
337
  #updateControlReference() {
332
338
  if (!this.id || !this.control) return
333
339
  if (this.type === 'label') {
data/app/components/primer/open_project/page_header.css CHANGED
@@ -1 +1 @@
1
- .PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
1
+ .PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
data/app/components/primer/open_project/page_header.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAUA,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCACF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,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--withTabNav {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n margin-bottom: var(--base-size-8);\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(--base-size-8);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\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-tabNavBar {\n overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n justify-content: flex-end;\n display: flex;\n align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\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"]}
1
+ {"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,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--withTabNav {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n margin-bottom: var(--base-size-8);\n height: var(--control-small-size);\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(--base-size-8);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\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-tabNavBar {\n overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n justify-content: flex-end;\n display: flex;\n align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\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.pcss CHANGED
@@ -20,6 +20,7 @@
20
20
  justify-content: flex-end;
21
21
  align-items: center;
22
22
  margin-bottom: var(--base-size-8);
23
+ height: var(--control-small-size);
23
24
  }
24
25
 
25
26
  .PageHeader-titleBar {
data/lib/primer/view_components/version.rb CHANGED
@@ -6,7 +6,7 @@ module Primer
6
6
  module VERSION
7
7
  MAJOR = 0
8
8
  MINOR = 70
9
- PATCH = 0
9
+ PATCH = 2
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
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.70.0
4
+ version: 0.70.2
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: 2025-06-18 00:00:00.000000000 Z
12
+ date: 2025-06-25 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview