Merge branch 'main' into add-types-password-input

carbon-design-system · Mar 30, 2023 · 817ac56 · 817ac56
2 parents 65b9c38 + 3586e75
commit 817ac56
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -12,6 +12,9 @@ import { Legend } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 export const RadioButtonGroupContext = createContext(null);
 
@@ -131,6 +134,8 @@ const RadioButtonGroup = React.forwardRef(
     const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
     const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
 
+    const { current: radioButtonGroupInstanceId } = useRef(getInstanceId());
+
     /**
      * prop + state alignment - getDerivedStateFromProps
      * only update if selected prop changes
@@ -190,8 +195,14 @@ const RadioButtonGroup = React.forwardRef(
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
 
+    const helperId = !helperText
+      ? undefined
+      : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
+
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     const divRef = useRef<HTMLDivElement>(null);
@@ -226,8 +237,8 @@ const RadioButtonGroup = React.forwardRef(
               <div className={`${prefix}--form-requirement`}>{warnText}</div>
             </>
           )}
-          {showHelper && helper}
         </div>
+        {showHelper && helper}
       </div>
     );
   }

diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss
@@ -164,7 +164,7 @@ $radio-border-width: 1px !default;
   .#{$prefix}--radio-button__validation-msg {
     display: none;
     align-items: flex-end;
-    margin-top: $spacing-03;
+    margin-top: rem(6px);
   }
 
   .#{$prefix}--radio-button__invalid-icon {
@@ -180,10 +180,6 @@ $radio-border-width: 1px !default;
     fill: #000000;
   }
 
-  .#{$prefix}--radio-button__validation-msg .#{$prefix}--form__helper-text {
-    margin-top: 0;
-  }
-
   .#{$prefix}--radio-button-group--invalid
     + .#{$prefix}--radio-button__validation-msg,
   .#{$prefix}--radio-button-group--warning
@@ -210,6 +206,10 @@ $radio-border-width: 1px !default;
     color: $text-error;
   }
 
+  .#{$prefix}--radio-button-group ~ .#{$prefix}--form__helper-text {
+    margin-top: rem(6px);
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus