Update RadioButtonGroup prop types (#2203)

* Update RadioButtonGroup prop types * Update prop types * Update readme.md * Update readme.md
folio-org · Jan 5, 2024 · c1faca7 · c1faca7
1 parent 516877c
commit c1faca7
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/lib/RadioButtonGroup/RadioButtonGroup.js b/lib/RadioButtonGroup/RadioButtonGroup.js
@@ -6,13 +6,13 @@ import css from './RadioButtonGroup.css';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  error: PropTypes.node,
+  error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  warning: PropTypes.string
+  warning: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 function RadioButtonGroup(props) {

diff --git a/lib/RadioButtonGroup/readme.md b/lib/RadioButtonGroup/readme.md
@@ -4,9 +4,35 @@ Convenient wrapper component for sets of radio buttons. Will pass `name` prop as
 The component will automatically render radio buttons within a `<FieldGroup>` with the value for the `label` prop applied as a `<legend>`. Non-`<RadioButton>` children can also be passed for alternative layouts, but **RadioButtons should still be direct descendants**.
 
 ## Usage
-Example with redux-form `<Field>` component:
 
+Example with react-final-form:
+```js
+<Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
+  <RadioButton label="self" id="actingAsSelf" value="self" />
+  <h4>Sponsor</h4>
+  <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
+  <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
+  <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
+  <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
+</Field>
 ```
+
+Example with react-final-form via render-prop:
+```js
+<Field name="subGroup" render={(props) =>
+  <RadioButtonGroup {...props} label="Acting as">
+    <RadioButton label="self" id="actingAsSelf" value="self" />
+    <h4>Sponsor</h4>
+    <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
+    <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
+    <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
+    <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
+  </RadioButtonGroup>
+} />
+```
+
+Example with redux-form:
+```js
 <Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
   <RadioButton label="self" id="actingAsSelf" value="self" />
   <h4>Sponsor</h4>
@@ -21,10 +47,10 @@ Example with redux-form `<Field>` component:
 Name | type | description | default | required |
 --- | --- | --- | --- | --- |
 children | node or array of nodes | Set of `<RadioButton>`s for usage. Can include other tags (headers, spans, etc.) | | &#10004;|
-error | string | | | |
+error | string or node | Error message to display | | |
 label | string or node | Content to render in the `<legend>` tag of the created `<fieldset>`. | | |
 `onBlur` | func |  | |
 `onChange` | func | | |
 `onFocus` | func | | |
 value | string | Sets default value for radio button set - **Not necessary for redux-form - will use the form's initialValues prop instead** | | |
-warning | string | | | |
+warning | string or node | Warning text to display | | |