Merge pull request #345 from OleksiiMyzgin/hotfix/563167-missing-vali…

…dation-error-for-radio-button-groups

hotfix(563167): add missing validation error for radio button groups

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 1.6.3
+
+- fix(563167): add validation error
+
 ## 1.6.2
 
 - Change to `flex-base: auto` for `RadioButtonCircle` to work on different box-sizing models

package.json

@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",

src/components/RadioButtonGroup/Example.md

@@ -12,6 +12,18 @@ const { RadioButtonGroup, RadioButton } = require('precise-ui');
 </RadioButtonGroup>
 ```
 
+The `RadioButtonGroup` can also be used to show error massage underneath the radio buttons if you have validation.
+
+```jsx
+const { RadioButtonGroup, RadioButton } = require('precise-ui');
+
+<RadioButtonGroup error="Validation error">
+  <RadioButton>First</RadioButton>
+  <RadioButton>Second</RadioButton>
+  <RadioButton>Third</RadioButton>
+</RadioButtonGroup>
+```
+
 The style of the radio buttons can be varied. Here we use some wrapping to prevent an overflow. Bravo radio button is selected by default.
 
 ```jsx
@@ -123,4 +135,4 @@ const { RadioButtonGroup, Checkbox, Form } = require('precise-ui');
     <Checkbox name="third">Third</Checkbox>
   </RadioButtonGroup>
 </Form>
-```
+```

src/components/RadioButtonGroup/index.tsx

@@ -6,6 +6,8 @@ import {
   RadioButtonGroupContextType,
   RadioButtonGroupNotifier,
 } from '../../contexts/RadioButtonGroupContext';
+import { PaddedContainer } from '../PaddedContainer';
+import { InputError } from '../InputError';
 
 export type RadioButtonGroupChangeEvent = InputChangeEvent<string>;
 
@@ -22,6 +24,7 @@ export type StateValue = Array<string> | string | undefined;
 export interface RadioButtonGroupState {
   controlled: boolean;
   value: StateValue;
+  error?: React.ReactChild;
 }
 
 class RadioButtonGroupInt extends React.PureComponent<RadioButtonGroupProps & FormContextProps, RadioButtonGroupState> {
@@ -31,12 +34,13 @@ class RadioButtonGroupInt extends React.PureComponent<RadioButtonGroupProps & Fo
   constructor(props: RadioButtonGroupProps) {
     super(props);
     const controlled = props.value !== undefined;
-    const { value: propValue, defaultValue } = props;
+    const { value: propValue, defaultValue, error } = props;
     const value = controlled ? propValue : defaultValue;
 
     this.state = {
       controlled,
       value,
+      error,
     };
   }
 
@@ -71,14 +75,15 @@ class RadioButtonGroupInt extends React.PureComponent<RadioButtonGroupProps & Fo
     }
   }
 
-  UNSAFE_componentWillReceiveProps({ value }: RadioButtonGroupProps) {
+  UNSAFE_componentWillReceiveProps({ value, error }: RadioButtonGroupProps) {
     const { controlled } = this.state;
 
     if (controlled) {
       this.setState({
         value,
       });
     }
+    this.setState({ error });
   }
 
   private getNextValue = (groupItemName?: string) => {
@@ -145,7 +150,20 @@ class RadioButtonGroupInt extends React.PureComponent<RadioButtonGroupProps & Fo
   }
 
   render() {
-    return <RadioButtonGroupContext.Provider value={this.ctx}>{this.props.children}</RadioButtonGroupContext.Provider>;
+    const { error } = this.state;
+
+    const Error = error && (
+      <PaddedContainer top="xsmall" bottom="xsmall">
+        <InputError>{error}</InputError>
+      </PaddedContainer>
+    );
+
+    return (
+      <RadioButtonGroupContext.Provider value={this.ctx}>
+        {this.props.children}
+        {Error}
+      </RadioButtonGroupContext.Provider>
+    );
   }
 }