diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index be732e6a7..838659b30 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -28,7 +28,7 @@ See [API](#api) for all available options.
- **Don't overwhelm your UI** with too many high-emphasis actions. There should
always be one but chances are that having more of them is not necessary.
-- Ensure the **button action is well recognazible** across your target audience.
+- Ensure the **button action is well recognizable** across your target audience.
This is especially important when using the button [with an icon only](#icon-buttons).
## Priorities
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index 3d718308b..4d01ec1ee 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/src/components/FileInputField/FileInputField.jsx
@@ -223,7 +223,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
- {helpText && (
+ {(helpText && !inputGroupContext) && (
```
+## Help Text
+
+You may provide one or more additional help texts to clarify how the input group
+should be filled.
+
+These messages are not semantically tied to the `children` elements, the
+connection should be expressed in textual form in the actual message.
+
+⚠️ Help texts passed to input elements' `helpText` prop are ignored within
+InputGroup.
+
+```docoff-react-preview
+React.createElement(() => {
+ const [fruit, setFruit] = React.useState('apple');
+ const options = [
+ {
+ label: 'Apple',
+ value: 'apple',
+ },
+ {
+ label: 'Pear',
+ value: 'pear',
+ },
+ {
+ label: 'Cherry',
+ value: 'cherry',
+ },
+ ];
+ return (
+
+ setFruit(e.target.value)}
+ options={options}
+ value={fruit}
+ />
+
+
+
+ );
+})
+```
+
## States
### Disabled State
@@ -169,12 +221,15 @@ 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. 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.
+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 are
+ignored within InputGroup.
👉 While there is a `required` property to visually denote the whole input group
is required, there is no functional effect as there is no such HTML attribute
diff --git a/src/components/InputGroup/__tests__/InputGroup.spec.tsx b/src/components/InputGroup/__tests__/InputGroup.spec.tsx
index 51578615b..bc9d59b2d 100644
--- a/src/components/InputGroup/__tests__/InputGroup.spec.tsx
+++ b/src/components/InputGroup/__tests__/InputGroup.spec.tsx
@@ -63,6 +63,7 @@ test.describe('InputGroup', () => {
const component = await mount(
{
await expect(component.getByText(label).first()).toHaveAttribute('id', `${id}__label`);
await expect(component.getByText(label).last()).toHaveAttribute('id', `${id}__displayLabel`);
await expect(component.locator(`div[id=${id}__group]`)).not.toBeEmpty();
- await expect(component.getByRole('list')).toHaveAttribute('id', `${id}__validationTexts`);
+ await expect(component.getByRole('list').first()).toHaveAttribute('id', `${id}__helpTexts`);
+ await expect(component.getByRole('list').last()).toHaveAttribute('id', `${id}__validationTexts`);
});
});
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index 79e2d4ab5..d8f3865b8 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/src/components/SelectField/SelectField.jsx
@@ -109,7 +109,7 @@ export const SelectField = React.forwardRef((props, ref) => {
)}
- {helpText && (
+ {(helpText && !inputGroupContext) && (