fix(radio-group): treat cds-radio-panel like cds

fixes #42 Signed-off-by: Ashley Ryan <asryan@vmware.com>
vmware-clarity · Apr 26, 2022 · e1665ac · e1665ac
1 parent 53875f4
commit e1665ac
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/projects/core/src/radio/radio-group.element.spec.ts b/projects/core/src/radio/radio-group.element.spec.ts
@@ -8,6 +8,7 @@ import { html } from 'lit';
 import { createTestElement, removeTestElement, componentIsStable } from '@cds/core/test';
 import { CdsRadioGroup } from '@cds/core/radio';
 import '@cds/core/radio/register.js';
+import '@cds/core/selection-panels/radio/register.js';
 
 describe('cds-radio-group', () => {
   let component: CdsRadioGroup;
@@ -78,9 +79,60 @@ describe('cds-radio-group', () => {
 
     component = element.querySelector<CdsRadioGroup>('cds-radio-group');
 
+    await componentIsStable(component);
     const radio1 = component.querySelectorAll('cds-radio')[0];
     const radio2 = component.querySelectorAll('cds-radio')[1];
     expect(radio1.inputControl.name).toBe(radio2.inputControl.name);
     expect(radio1.inputControl.name).toEqual('my-radio');
   });
+
+  it('should sync radio-panel controls within a group', async () => {
+    element = await createTestElement(html`
+      <cds-radio-group>
+        <label>radio group</label>
+        <cds-radio-panel>
+          <label>radio 1</label>
+          <input type="radio" value="1" checked />
+        </cds-radio-panel>
+        <cds-radio-panel>
+          <label>radio 2</label>
+          <input type="radio" value="2" />
+        </cds-radio-panel>
+        <cds-control-message>message text</cds-control-message>
+      </cds-radio-group>
+    `);
+
+    component = element.querySelector<CdsRadioGroup>('cds-radio-group');
+
+    await componentIsStable(component);
+    const radio1 = component.querySelectorAll('cds-radio-panel')[0];
+    const radio2 = component.querySelectorAll('cds-radio-panel')[1];
+    expect(radio1.inputControl.hasAttribute('checked')).toBe(true);
+    expect(radio2.inputControl.hasAttribute('checked')).toBe(false);
+  });
+
+  it('should allow manually setting the radio-panel input name', async () => {
+    element = await createTestElement(html`
+      <cds-radio-group>
+        <label>radio group</label>
+        <cds-radio-panel>
+          <label>radio 1</label>
+          <input type="radio" name="my-radio" value="1" checked />
+        </cds-radio-panel>
+        <cds-radio-panel>
+          <label>radio 2</label>
+          <input type="radio" name="my-radio" value="2" />
+        </cds-radio-panel>
+        <cds-control-message>message text</cds-control-message>
+      </cds-radio-group>
+    `);
+
+    component = element.querySelector<CdsRadioGroup>('cds-radio-group');
+
+    await componentIsStable(component);
+    const radio1 = component.querySelectorAll('cds-radio-panel')[0];
+    const radio2 = component.querySelectorAll('cds-radio-panel')[1];
+    expect(radio1.inputControl.name).toBe(radio2.inputControl.name);
+    expect(radio1.inputControl.name).toEqual('my-radio');
+  });
 });
diff --git a/projects/core/src/radio/radio-group.element.ts b/projects/core/src/radio/radio-group.element.ts
@@ -35,7 +35,7 @@ import { CdsRadio } from './radio.element.js';
  * @slot - For projecting cds-radio controls
  */
 export class CdsRadioGroup extends CdsInternalControlGroup {
-  @querySlotAll('cds-radio, cds-radio') protected controls: NodeListOf<CdsRadio>;
+  @querySlotAll('cds-radio, cds-radio-panel') protected controls: NodeListOf<CdsRadio>;
 
   @id() protected radioName: string;