Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(radio): add pf-radio #2882

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open
Prev Previous commit
Next Next commit
chore: code cleanup
ArathyKumar committed Dec 4, 2024

Verified

This commit was created on github.com and signed with GitHub’s verified signature.
commit 405c52e6216b26c8118559ad411649241209f22a
42 changes: 22 additions & 20 deletions elements/pf-radio/pf-radio.ts
Original file line number Diff line number Diff line change
@@ -44,18 +44,17 @@ export class PfRadio extends LitElement {
/** Radio groups: instances.get(groupName).forEach(pfRadio => { ... }) */
private static instances = new Map<string, Set<PfRadio>>();
private static radioInstances = new Map<Node, Map<string, Set<PfRadio>>>();

private static selected = new Map<Node, Map<string, PfRadio>>();

static {
globalThis.addEventListener('keydown', e => {
globalThis.addEventListener('keydown', (e: KeyboardEvent) => {
switch (e.key) {
case 'Tab':
this.radioInstances.forEach((radioGroup, parentNode) => {
radioGroup.forEach((radioSet, groupName) => {
const selectedNode = this.selected.get(parentNode);
const selected = selectedNode?.get(groupName);
[...radioSet].forEach((radio, i, radios) => {
[...radioSet].forEach((radio: PfRadio, i: number, radios: PfRadio[]) => {
// the radio group has a selected element
// it should be the only focusable member of the group
radio.focusable = false;
@@ -87,21 +86,19 @@ export class PfRadio extends LitElement {
let radioGroup: NodeListOf<PfRadio>;
if (root instanceof Document || root instanceof ShadowRoot) {
radioGroup = root.querySelectorAll('pf-radio');
// let radioGroupArray: any[] = [];
radioGroup.forEach((radio: PfRadio) => {
if (radio.parentNode === this.parentNode && radio.name === this.name) {
// radioGroupArray.push(radio);
let map = PfRadio.radioInstances.get(this.parentNode as HTMLElement);
if (!map) {
map = new Map<string, Set<PfRadio>>();
PfRadio.radioInstances.set(this.parentNode as HTMLElement, map);
if (radio.parentNode && radio.parentNode === this.parentNode && radio.name === this.name) {
let radioGroupMap = PfRadio.radioInstances.get(radio.parentNode);
if (!radioGroupMap) {
radioGroupMap = new Map<string, Set<PfRadio>>();
PfRadio.radioInstances.set(radio.parentNode, radioGroupMap);
}
let set = map.get(this.name);
if (!set) {
set = new Set<PfRadio>();
map.set(this.name, set);
let radioSet: Set<PfRadio> | undefined = radioGroupMap.get(this.name);
if (!radioSet) {
radioSet = new Set<PfRadio>();
radioGroupMap.set(this.name, radioSet);
}
set.add(radio);
radioSet.add(radio);
}
});
}
@@ -132,6 +129,12 @@ export class PfRadio extends LitElement {

disconnectedCallback(): void {
PfRadio.instances.get(this.name)?.delete(this);
if (this.parentNode) {
const parentNode = PfRadio.radioInstances.get(this.parentNode);
if (parentNode) {
PfRadio.radioInstances.delete(this.parentNode);
}
}
super.disconnectedCallback();
}

@@ -140,13 +143,13 @@ export class PfRadio extends LitElement {
PfRadio.radioInstances.forEach((radioGroup, parentNode) => {
if (parentNode === this.parentNode) {
radioGroup.forEach((radioSet, groupName) => {
if (groupName === this.name) {
if (this.parentNode && groupName === this.name) {
[...radioSet].forEach(radio => {
radio.checked = false;
});
this.checked = true;
this.dispatchEvent(new PfRadioChangeEvent(event, this.value));
this.#updateSelected(this.parentNode as HTMLElement, this, this.name);
this.#updateSelected(this.parentNode, this, this.name);
}
});
}
@@ -174,7 +177,7 @@ export class PfRadio extends LitElement {
if (groupName === this.name) {
this.checked = false;
[...radioSet].forEach((radio: PfRadio, index: number, radios: PfRadio[]) => {
if (radio === event.target) {
if (this.parentNode && radio === event.target) {
const isArrowDownOrRight: boolean =
['ArrowDown', 'ArrowRight'].includes(event.key);
const isArrowUpOrLeft: boolean = ['ArrowUp', 'ArrowLeft'].includes(event.key);
@@ -189,8 +192,7 @@ export class PfRadio extends LitElement {
// consider the api of this event.
// do we add the group to it? do we fire from every element on every change?
this.dispatchEvent(new PfRadioChangeEvent(event, radios[nextIndex].value));
this.#updateSelected(this.parentNode as HTMLElement,
radios[nextIndex], radios[nextIndex].name);
this.#updateSelected(this.parentNode, radios[nextIndex], radios[nextIndex].name);
}
});
}

Unchanged files with check annotations Beta

): Promise<string> {
// avoid tsconfig problems
await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/'));
const { ssr } = await import('./ssr.js');

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-accordion/test/pf-accordion.e2e.ts:14:3 › pf-accordion › ssr

1) elements/pf-accordion/test/pf-accordion.e2e.ts:14:3 › pf-accordion › ssr ────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-accordion/test/pf-accordion.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-avatar/test/pf-avatar.e2e.ts:14:3 › pf-avatar › ssr

2) elements/pf-avatar/test/pf-avatar.e2e.ts:14:3 › pf-avatar › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-avatar/test/pf-avatar.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:14:3 › pf-back-to-top › ssr

3) elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:14:3 › pf-back-to-top › ssr ──────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-back-to-top/test/pf-back-to-top.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-background-image/test/pf-background-image.e2e.ts:14:3 › pf-background-image › ssr

4) elements/pf-background-image/test/pf-background-image.e2e.ts:14:3 › pf-background-image › ssr ─ Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-background-image/test/pf-background-image.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-badge/test/pf-badge.e2e.ts:14:3 › pf-badge › ssr

5) elements/pf-badge/test/pf-badge.e2e.ts:14:3 › pf-badge › ssr ────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-badge/test/pf-badge.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-banner/test/pf-banner.e2e.ts:14:3 › pf-banner › ssr

6) elements/pf-banner/test/pf-banner.e2e.ts:14:3 › pf-banner › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-banner/test/pf-banner.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-button/test/pf-button.e2e.ts:14:3 › pf-button › ssr

7) elements/pf-button/test/pf-button.e2e.ts:14:3 › pf-button › ssr ─────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-button/test/pf-button.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-card/test/pf-card.e2e.ts:14:3 › pf-card › ssr

8) elements/pf-card/test/pf-card.e2e.ts:14:3 › pf-card › ssr ───────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-card/test/pf-card.e2e.ts:23:5

Check failure on line 13 in tools/pfe-tools/ssr/global.ts

GitHub Actions / SSR Tests (Playwright)

elements/pf-chip/test/pf-chip.e2e.ts:14:3 › pf-chip › ssr

10) elements/pf-chip/test/pf-chip.e2e.ts:14:3 › pf-chip › ssr ──────────────────────────────────── Error: TypeError: w.createTreeWalker is not a function at tools/pfe-tools/ssr/global.ts:13 11 | // avoid tsconfig problems 12 | await import(['@patternfly', 'pfe-core', 'ssr-shims.js'].join('/')); > 13 | const { ssr } = await import('./ssr.js'); | ^ 14 | await Promise.all(importSpecifiers.map(x => import(x))); 15 | return ssr(html); 16 | } at file:///__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at ModuleLoader.import (node:internal/modules/esm/loader:329:24) at renderGlobal (file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at file:///__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 expect(received).toEqual(expected) // deep equality Expected: 200 Received: 500 at /__w/patternfly-elements/patternfly-elements/node_modules/lit-html/src/lit-html.ts:716:18 at renderGlobal (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/ssr/global.ts:13:19) at /__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:59:35 at SSRPage.snapshot (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:117:10) at SSRPage.snapshots (/__w/patternfly-elements/patternfly-elements/tools/pfe-tools/test/playwright/SSRPage.ts:133:9) at /__w/patternfly-elements/patternfly-elements/elements/pf-chip/test/pf-chip.e2e.ts:23:5
await Promise.all(importSpecifiers.map(x => import(x)));
return ssr(html);
}