diff --git a/src/lib/components/Button/Button.jsx b/src/lib/components/Button/Button.jsx index 7a3a0085..8b0333a8 100644 --- a/src/lib/components/Button/Button.jsx +++ b/src/lib/components/Button/Button.jsx @@ -29,8 +29,13 @@ export const Button = React.forwardRef((props, ref) => { color, ...restProps } = props; - const inputGroupContext = useContext(InputGroupContext); const buttonGroupContext = useContext(ButtonGroupContext); + const inputGroupContext = useContext(InputGroupContext); + + if (buttonGroupContext && inputGroupContext) { + throw new Error('Button cannot be placed both in `ButtonGroup` and `InputGroup`.'); + } + const primaryContext = buttonGroupContext ?? inputGroupContext; return ( diff --git a/src/lib/components/InputGroup/README.mdx b/src/lib/components/InputGroup/README.mdx index e5f83aa0..b9c551b9 100644 --- a/src/lib/components/InputGroup/README.mdx +++ b/src/lib/components/InputGroup/README.mdx @@ -158,46 +158,71 @@ Validation states visually present the result of validation of the grouped inputs. Input group's validation state is taken from its child inputs. You should always **provide validation messages for states other than valid** directly through `validationTexts` prop so users know what happened and what -action they should take or what options they have. Validation messages passed -to input elements' `validationText` prop will be ignored. +action they should take or what options they have. These messages are not +semantically tied to the `children` elements, the connection should be expressed +in textual form in the actual message. The individual `children` elements must +not show any `validationText`, they only show their respective `validationState`. +Validation messages passed to input elements' `validationText` prop will be +ignored. +