docs: add unlabeled control for RadioControl component

openedx · Jun 1, 2023 · 364e35c · 364e35c
1 parent 2854701
commit 364e35c
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 63 deletions.
diff --git a/src/Form/form-radio.mdx b/src/Form/form-radio.mdx
@@ -43,6 +43,22 @@ underlying `input` node. See MDN for documentation on available
 }
 ```
 
+## Unlabeled Control
+
+```jsx live
+() => {
+  const [value, setValue] = useState('green');
+  const handleChange = e => setValue(e.target.value);
+
+  return (
+    <Form.RadioSet name="colors-unlabeled" onChange={handleChange} value={value}>
+      <RadioControl value="red" />
+      <RadioControl value="green" />
+    </Form.RadioSet>
+  )
+}
+```
+
 ## Uncontrolled Usage
 
 ```jsx live

diff --git a/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap b/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap
@@ -13,27 +13,16 @@ exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = `
     role="button"
     tabIndex={0}
   >
-    <div
-      className="pgn__form-radio"
-    >
-      <input
-        className="pgn__form-radio-input"
-        defaultChecked={false}
-        hidden={true}
-        id="form-field1"
-        name="testName"
-        onChange={[Function]}
-        tabIndex={-1}
-        type="radio"
-        value={1}
-      />
-      <div>
-        <label
-          className="pgn__form-label"
-          htmlFor="form-field1"
-        />
-      </div>
-    </div>
+    <input
+      className="pgn__form-radio-input"
+      defaultChecked={false}
+      hidden={true}
+      name="testName"
+      onChange={[Function]}
+      tabIndex={-1}
+      type="radio"
+      value={1}
+    />
     SelectableRadio1
   </div>
   <div
@@ -44,27 +33,16 @@ exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = `
     role="button"
     tabIndex={0}
   >
-    <div
-      className="pgn__form-radio"
-    >
-      <input
-        className="pgn__form-radio-input"
-        defaultChecked={false}
-        hidden={true}
-        id="form-field2"
-        name="testName"
-        onChange={[Function]}
-        tabIndex={-1}
-        type="radio"
-        value={2}
-      />
-      <div>
-        <label
-          className="pgn__form-label"
-          htmlFor="form-field2"
-        />
-      </div>
-    </div>
+    <input
+      className="pgn__form-radio-input"
+      defaultChecked={false}
+      hidden={true}
+      name="testName"
+      onChange={[Function]}
+      tabIndex={-1}
+      type="radio"
+      value={2}
+    />
     SelectableRadio2
   </div>
   <div
@@ -75,27 +53,16 @@ exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = `
     role="button"
     tabIndex={0}
   >
-    <div
-      className="pgn__form-radio"
-    >
-      <input
-        className="pgn__form-radio-input"
-        defaultChecked={false}
-        hidden={true}
-        id="form-field3"
-        name="testName"
-        onChange={[Function]}
-        tabIndex={-1}
-        type="radio"
-        value={3}
-      />
-      <div>
-        <label
-          className="pgn__form-label"
-          htmlFor="form-field3"
-        />
-      </div>
-    </div>
+    <input
+      className="pgn__form-radio-input"
+      defaultChecked={false}
+      hidden={true}
+      name="testName"
+      onChange={[Function]}
+      tabIndex={-1}
+      type="radio"
+      value={3}
+    />
     SelectableRadio3
   </div>
 </div>