From 02e7d661e4f1347f80f3fd369ef81c1a25d5a343 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Hub=C3=A1=C4=8Dek?= <hubacek.jan98@gmail.com>
Date: Wed, 29 Nov 2023 06:58:47 +0100
Subject: [PATCH] Make InputGroup label reflect required prop (#510)

---
 src/components/InputGroup/InputGroup.jsx                | 8 ++++++++
 src/components/InputGroup/InputGroup.scss               | 4 ++++
 src/components/InputGroup/__tests__/InputGroup.test.jsx | 6 ++++++
 3 files changed, 18 insertions(+)

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 `<fieldset>`
+   * 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((
       <InputGroup