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

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

Hide file tree

Showing 2 changed files with 51 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;
@@ -73,9 +74,58 @@ 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');
   });
+
+  // describe('should sync radio-panel controls within a group', async () => {
+  //   element = await createTestElement(html`
+  //     <cds-radio-group>
+  //       <cds-radio-panel>
+  //         <label>One</label>
+  //         <input type="radio" />
+  //       </cds-radio-panel>
+  //       <cds-radio-panel>
+  //         <label>Two</label>
+  //         <input type="radio" />
+  //       </cds-radio-panel>
+  //     </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;