vr

pinterest · Jan 22, 2025 · d081e07 · d081e07
1 parent 7471a84
commit d081e07
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git a/packages/gestalt/src/Fieldset.css b/packages/gestalt/src/Fieldset.css
@@ -0,0 +1,3 @@
+.marginTop {
+  margin-top: var(--sema-space-300);
+}
diff --git a/packages/gestalt/src/Fieldset.tsx b/packages/gestalt/src/Fieldset.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import classnames from 'classnames';
 import boxStyles from './Box.css';
 import boxWhitespaceStyles from './boxWhitespace.css';
+import styles from './Fieldset.css';
+import Flex from './Flex';
 import labelStyles from './Label/InternalLabel.css';
 import formStyles from './sharedSubcomponents/FormElement.css';
 import FormErrorMessage from './sharedSubcomponents/FormErrorMessage';
@@ -31,6 +33,7 @@ type Props = {
    * Whether the legend should be visible or not. If `hidden`, the legend is still available for screen reader users, but does not appear visually. See the [legend visibility variant](https://gestalt.pinterest.systems#Legend-visibility) for more info.
    */
   legendDisplay?: 'visible' | 'hidden';
+  helperText?: string;
 };
 
 /**
@@ -46,6 +49,7 @@ export default function Fieldset({
   legend,
   legendDisplay = 'visible',
   children,
+  helperText,
 }: Props) {
   const isInVRExperiment = useInExperiment({
     webExperimentName: 'web_gestalt_visualRefresh',
@@ -76,7 +80,18 @@ export default function Fieldset({
         <Text size="100">{legend}</Text>
       </legend>
       {children}
-      {errorMessage && <FormErrorMessage id={`${id}-error`} text={errorMessage} />}
+      {helperText && (
+        <div className={classnames(styles.marginTop)} id={`${id}-helperText`}>
+          <Flex gap={8}>
+            <Flex.Item flex="grow">
+              <Text color="subtle" size="100">
+                {helperText}
+              </Text>
+            </Flex.Item>
+          </Flex>
+        </div>
+      )}
+      {errorMessage && <FormErrorMessage id={`${id}-error`} marginTop text={errorMessage} />}
     </fieldset>
   );
 }

diff --git a/packages/gestalt/src/RadioGroup.tsx b/packages/gestalt/src/RadioGroup.tsx
@@ -36,6 +36,11 @@ type Props = {
    *
    */
   legendDisplay?: 'visible' | 'hidden';
+  /**
+   * Adds an help message below the group of radio buttons.
+   *
+   */
+  helperText?: string;
 };
 
 /**
@@ -49,6 +54,7 @@ function RadioGroup({
   id,
   legend,
   legendDisplay = 'visible',
+  helperText,
 }: Props) {
   // Consume GlobalEventsHandlerProvider
   const { radioGroupHandlers } = useGlobalEventsHandlerContext() ?? {
@@ -61,7 +67,13 @@ function RadioGroup({
 
   return (
     <RadioGroupContextProvider value={{ parentName: 'RadioGroup' }}>
-      <Fieldset errorMessage={errorMessage} id={id} legend={legend} legendDisplay={legendDisplay}>
+      <Fieldset
+        errorMessage={errorMessage}
+        helperText={helperText}
+        id={id}
+        legend={legend}
+        legendDisplay={legendDisplay}
+      >
         <Flex
           direction={direction}
           gap={direction === 'row' ? { row: 4, column: 0 } : { column: 2, row: 0 }}

diff --git a/packages/gestalt/src/sharedSubcomponents/FormErrorMessage.tsx b/packages/gestalt/src/sharedSubcomponents/FormErrorMessage.tsx
@@ -15,13 +15,15 @@ type Props = {
   text?: ReactNode;
   size?: SizeType;
   noPadding?: boolean;
+  marginTop?: boolean;
 };
 
 export default function FormErrorMessage({
   id,
   size,
   text = '',
   noPadding: noStartPadding,
+  marginTop,
 }: Props) {
   const isInVRExperiment = useInExperiment({
     webExperimentName: 'web_gestalt_visualRefresh',
@@ -33,6 +35,7 @@ export default function FormErrorMessage({
       className={classnames({
         // none
         [helperTextStyles.noStartPadding]: noStartPadding,
+        [helperTextStyles.marginTop]: marginTop,
         // sm
         [helperTextStyles.sm_startPadding]: !isInVRExperiment && size === 'sm' && !noStartPadding,
         [helperTextStyles.sm_topPadding]: !isInVRExperiment && size === 'sm',

diff --git a/packages/gestalt/src/sharedSubcomponents/FormHelperText.css b/packages/gestalt/src/sharedSubcomponents/FormHelperText.css
@@ -5,6 +5,10 @@
   padding-right: var(--space-0);
 }
 
+.marginTop {
+  margin-top: var(--sema-space-300);
+}
+
 /* sm */
 
 .sm_topPadding {