Skip to content

Commit dcdbce6

Browse files
brianferrybennypowerseyevana
authored
feat(progress): add pf-progress (#2511)
* feat(progress): adding progress element, adding variants and styles * fix(progress): adding accessibility fixes for pf-progress without html5 element * fix: formatting for icons, html * docs(progress): adding kitchen sink, adding example * docs(progress): adding cssprop, summary, kitchen sink demo * fix(progress): remove demo css file * chore: adding changeset * test: adding test cases for pf-progress * chore: checkpoint * feat: kitchen sink demo fixing, adding opacity, progress, meter styling * feat(progress): progress html5 element, updating tabindex and aria values, cleaning up css * feat(progress): jsdocs, element internals, inline accessibility template * Update elements/pf-progress/pf-progress.ts Co-authored-by: Benny Powers <[email protected]> * fix(progress): remove willUpdate super method call * feat(progress): adding label attribute and span element for screen readers, optional * refactor(progress): removing label, form associated internals, add tests * fix: remove unused import * Update elements/pf-progress/pf-progress.ts Co-authored-by: Benny Powers <[email protected]> * fix(progress): singleLine class fix * Update elements/pf-progress/pf-progress.ts Co-authored-by: Benny Powers <[email protected]> * Update elements/pf-progress/pf-progress.ts Co-authored-by: Benny Powers <[email protected]> * style(progress): adding new lines too styling classes * docs(card): patterns page fixing image, broken ctas * fix(progress): remove form association from progress bar, form demo * fix(progress): willUpdate for internals, attachInternals instead of controller * style(switch): whitespace * feat(tooltip): trigger, flip * docs(popover): added flip demo * feat(progress): truncated title * docs(progress): typos * fix(progress): truncated * fix(tooltip): detect when invoker slot should be block level * test(popover): clarify tests * fix(tooltip): tooltip invoker is called depending on whether it has assigned elements * perf(popover): reassign trigger less often * feat(tools): click element center test util * test(popover): rationalize tests * perf(tooltip): calculate internal state less often * fix: trigger attached by reference should toggle popover * fix: test nesting * test(popover): refactor tests * test: refactor * chore: fix netlify deploy command * refactor(progress): remove unused variable --------- Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Benny Powers <[email protected]> Co-authored-by: Ivana Rodriguez <[email protected]>
1 parent cf5abb5 commit dcdbce6

31 files changed

+1313
-146
lines changed

‎.changeset/pf-tooltip-deprecate-base.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@patternfly/elements": patch
3+
---
4+
`<pf-tooltip>`: marks `BaseTooltip` and it's stylesheet as deprecated.
5+
The files will remain in place until the next major version.

‎.changeset/pf-tooltip-flip.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
`<pf-tooltip>`: added `no-flip` and `flip-behaviour` attributes as in `<pf-popover>`

‎.changeset/pf-tooltip-trigger.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@patternfly/element": minor
3+
---
4+
`<pf-tooltip>` added the `trigger` attribute to specify a tooltip-invoking
5+
element outside of the tooltip's children.
6+
7+
```html
8+
<pf-button id="button">Button</pf-button>
9+
<pf-tooltip trigger="button"
10+
content="I'm a button!"></pf-tooltip>
11+
```

‎.changeset/rich-kangaroos-brake.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-progress>`
6+
7+
```html
8+
<pf-progress title="Default" value="33"></pf-progress>
9+
```

‎.changeset/test-tools-click-el.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
"@patternfly/pfe-tools": minor
3+
---
4+
Test: add `clickElementCenter` utility function for tests

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"./pf-panel/pf-panel.js": "./pf-panel/pf-panel.js",
4242
"./pf-progress-stepper/pf-progress-step.js": "./pf-progress-stepper/pf-progress-step.js",
4343
"./pf-progress-stepper/pf-progress-stepper.js": "./pf-progress-stepper/pf-progress-stepper.js",
44+
"./pf-progress/pf-progress.js": "./pf-progress/pf-progress.js",
4445
"./pf-spinner/BaseSpinner.js": "./pf-spinner/BaseSpinner.js",
4546
"./pf-spinner/pf-spinner.js": "./pf-spinner/pf-spinner.js",
4647
"./pf-switch/BaseSwitch.js": "./pf-switch/BaseSwitch.js",

‎elements/pf-popover/demo/flip.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<link rel="stylesheet" href="demo.css">
2+
<script type="module" src="pf-popover.js"></script>
3+
4+
<form id="basic">
5+
<fieldset>
6+
<legend>No flip</legend>
7+
<pf-popover heading="Popover heading"
8+
body="Popovers are triggered by click rather than hover."
9+
footer="Popover footer"
10+
no-flip>
11+
<pf-button>Toggle popover</pf-button>
12+
</pf-popover>
13+
</fieldset>
14+
15+
<fieldset>
16+
<legend>Flip fallback</legend>
17+
<label>
18+
Popover positions
19+
<select id="position-select">
20+
<option value="top">top</option>
21+
<option value="right">right</option>
22+
<option value="bottom">bottom</option>
23+
<option value="left">left</option>
24+
<option value="top-start">top-start</option>
25+
<option value="top-end">top-end</option>
26+
<option value="right-start">right-start</option>
27+
<option value="right-end">right-end</option>
28+
<option value="bottom-start">bottom-start</option>
29+
<option value="bottom-end">bottom-end</option>
30+
<option value="left-start">left-start</option>
31+
<option value="left-end">left-end</option>
32+
</select>
33+
</label>
34+
<pf-popover heading="Popover heading"
35+
body="Popovers are triggered by click rather than hover."
36+
footer="Popover footer"
37+
no-outside-click>
38+
<pf-button>Toggle popover</pf-button>
39+
</pf-popover>
40+
</fieldset>
41+
</form>

‎elements/pf-popover/demo/pf-popover.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<link rel="stylesheet" href="./demo.css" />
2-
<script type="module" src="./pf-popover.js"></script>
1+
<link rel="stylesheet" href="demo.css">
2+
<script type="module" src="pf-popover.js"></script>
33

44
<form id="basic">
55
<h2>Basic</h2>

‎elements/pf-popover/demo/pf-popover.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ select.addEventListener('change', event =>
1212

1313
// Close popover from content
1414
const closeButton = document.getElementById('close-button');
15-
closeButton.addEventListener('click', event => event.target.closest('pf-popover').hide());
15+
closeButton?.addEventListener('click', event => event.target.closest('pf-popover').hide());
1616

1717
// Alert variants
1818
const alert = document.getElementById('alert');
19-
alert.addEventListener('change', event =>
19+
alert?.addEventListener('change', event =>
2020
alert
2121
.querySelector('pf-popover')
2222
.setAttribute('alert-severity', event.target.closest('form').elements.severity.value));

‎elements/pf-popover/pf-popover.ts‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LitElement, nothing, html } from 'lit';
1+
import { LitElement, nothing, html, type PropertyValues } from 'lit';
22
import { customElement } from 'lit/decorators/custom-element.js';
33
import { property } from 'lit/decorators/property.js';
44
import { query } from 'lit/decorators/query.js';
@@ -9,7 +9,6 @@ import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating
99
import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
1010
import { bound } from '@patternfly/pfe-core/decorators/bound.js';
1111
import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
12-
import { observed } from '@patternfly/pfe-core/decorators/observed.js';
1312
import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
1413
import '@patternfly/elements/pf-button/pf-button.js';
1514
import styles from './pf-popover.css';
@@ -301,7 +300,6 @@ export class PfPopover extends LitElement {
301300
/**
302301
* The ID of the element to attach the popover to.
303302
*/
304-
@observed('triggerChanged')
305303
@property({ reflect: true }) trigger?: string;
306304

307305
@query('#popover') private _popover!: HTMLDialogElement;
@@ -360,7 +358,10 @@ export class PfPopover extends LitElement {
360358
<div id="container"
361359
style="${styleMap(styles)}"
362360
class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
363-
<slot id="trigger" @keydown=${this.onKeydown} @click=${this.toggle}></slot>
361+
<slot id="trigger"
362+
@slotchange="${this.#triggerChanged}"
363+
@keydown=${this.onKeydown}
364+
@click=${this.toggle}></slot>
364365
<dialog id="popover" aria-labelledby="heading" aria-describedby="body" aria-label=${ifDefined(this.label)}>
365366
<div id="arrow"></div>
366367
<div id="content" part="content">
@@ -389,10 +390,27 @@ export class PfPopover extends LitElement {
389390
disconnectedCallback() {
390391
super.disconnectedCallback();
391392
PfPopover.instances.delete(this);
392-
this.#referenceTrigger?.removeEventListener('click', this.show);
393+
this.#referenceTrigger?.removeEventListener('click', this.toggle);
393394
this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
394395
}
395396

397+
#getReferenceTrigger() {
398+
const root = this.getRootNode() as Document | ShadowRoot;
399+
return !this.trigger ? null : root.getElementById(this.trigger);
400+
}
401+
402+
403+
#triggerChanged() {
404+
const oldReferenceTrigger = this.#referenceTrigger;
405+
this.#referenceTrigger = this.#getReferenceTrigger();
406+
if (oldReferenceTrigger !== this.#referenceTrigger) {
407+
oldReferenceTrigger?.removeEventListener('click', this.toggle);
408+
oldReferenceTrigger?.removeEventListener('keydown', this.onKeydown);
409+
this.#referenceTrigger?.addEventListener('click', this.toggle);
410+
this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);
411+
}
412+
}
413+
396414
@bound private onKeydown(event: KeyboardEvent) {
397415
switch (event.key) {
398416
case 'Escape':
@@ -420,15 +438,9 @@ export class PfPopover extends LitElement {
420438
* Removes event listeners from the old trigger element and attaches
421439
* them to the new trigger element.
422440
*/
423-
triggerChanged(oldValue?: string, newValue?: string) {
424-
if (oldValue) {
425-
this.#referenceTrigger?.removeEventListener('click', this.show);
426-
this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
427-
}
428-
if (newValue) {
429-
this.#referenceTrigger = (this.getRootNode() as Document | ShadowRoot).getElementById(newValue);
430-
this.#referenceTrigger?.addEventListener('click', this.show);
431-
this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);
441+
override willUpdate(changed: PropertyValues<this>) {
442+
if (changed.has('trigger')) {
443+
this.#triggerChanged();
432444
}
433445
}
434446

0 commit comments

Comments
 (0)