diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx index 2b9cc9d5..98a8a843 100644 --- a/src/components/InputGroup/InputGroup.jsx +++ b/src/components/InputGroup/InputGroup.jsx @@ -22,6 +22,7 @@ export const InputGroup = ({ isLabelVisible, label, layout, + required, size, validationTexts, ...restProps @@ -57,6 +58,7 @@ export const InputGroup = ({ ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical, disabled && styles.isRootDisabled, + required && styles.isRootRequired, getRootSizeClassName(size, styles), getRootValidationStateClassName(validationState, styles), )} @@ -112,6 +114,7 @@ InputGroup.defaultProps = { id: undefined, isLabelVisible: true, layout: 'vertical', + required: false, size: 'medium', validationTexts: null, }; @@ -156,6 +159,11 @@ InputGroup.propTypes = { * as the value is inherited in such case. */ layout: PropTypes.oneOf(['horizontal', 'vertical']), + /** + * If `true`, the `InputGroup`'s label appears as required. Underlying `
` + * element does not take `required` attribute so there is no functional effect. + */ + required: PropTypes.bool, /** * Size of the `children` elements. */ diff --git a/src/components/InputGroup/InputGroup.scss b/src/components/InputGroup/InputGroup.scss index e103922c..a0ff0107 100644 --- a/src/components/InputGroup/InputGroup.scss +++ b/src/components/InputGroup/InputGroup.scss @@ -41,6 +41,10 @@ @include foundation.help-text(); } +.isRootRequired .label { + @include foundation.label-required(); +} + // States .isRootStateInvalid { @include variants.validation(invalid); diff --git a/src/components/InputGroup/__tests__/InputGroup.test.jsx b/src/components/InputGroup/__tests__/InputGroup.test.jsx index 52dc4851..a47a2ceb 100644 --- a/src/components/InputGroup/__tests__/InputGroup.test.jsx +++ b/src/components/InputGroup/__tests__/InputGroup.test.jsx @@ -99,6 +99,12 @@ describe('rendering', () => { expect(within(rootElement).getByText('validation text 2')); }, ], + [ + { required: true }, + (rootElement) => { + expect(rootElement).toHaveClass('isRootRequired'); + }, + ], ])('renders with props: "%s"', (testedProps, assert) => { const dom = render((