Make InputGroup label reflect required prop (#510)

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 `<fieldset>`
+   * element does not take `required` attribute so there is no functional effect.
+   */
+  required: PropTypes.bool,
   /**
    * Size of the `children` elements.
    */

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);

src/components/InputGroup/README.md

@@ -176,9 +176,14 @@ not show any `validationText`, they only show their respective `validationState`
 Validation messages passed to input elements' `validationText` prop will be
 ignored.
 
+👉 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
+for the underlying `<fieldset>` element.
+
 ```docoff-react-preview
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "First name must be filled in.",
     "Last name must be filled in.",
@@ -187,44 +192,54 @@ ignored.
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="invalid"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="invalid"
   />
   <Button label="Submit" />
 </InputGroup>
 <InputGroup
   label="First and last name"
+  required
   validationTexts={[
     "Last name should not include any digits.",
   ]}
 >
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="warning"
     value="123Doe"
   />
   <Button label="Submit" />
 </InputGroup>
-<InputGroup label="First and last name">
+<InputGroup
+  label="First and last name"
+  required
+>
   <TextField
     label="First name"
     placeholder="Eg. John"
+    required
     validationState="valid"
     value="John"
   />
   <TextField
     label="Last name"
     placeholder="Eg. Doe"
+    required
     validationState="valid"
     value="Doe"
   />
@@ -241,7 +256,7 @@ element which wraps elements to be grouped. This enables making the component
 interactive and helps to improve its accessibility.
 
 👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+[fieldset][fieldset-attributes] element.
 
 ## API
 
@@ -257,4 +272,4 @@ interactive and helps to improve its accessibility.
 [fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
 [React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes

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((
       <InputGroup