RadioGroup: VR changes (#3978)

pinterest · Feb 5, 2025 · cc7fb0f · cc7fb0f
1 parent 66fde79
commit cc7fb0f
Show file tree

Hide file tree

Showing 19 changed files with 679 additions and 519 deletions.
diff --git a/docs/examples/radiogroup/addingABadgeExample.tsx b/docs/examples/radiogroup/addingABadgeExample.tsx
@@ -7,54 +7,46 @@ export default function RadioButtonBadgeExample() {
   return (
     <Box alignItems="center" display="flex" height="100%" justifyContent="center" padding={8}>
       <RadioGroup id="badgeExample" legend="What badge would you like?">
-        <Box display="inlineBlock">
-          <RadioGroup.RadioButton
-            badge={{ text: 'badge', type: 'success' }}
-            checked={option === 'success'}
-            id="success"
-            label="I'd like a success badge"
-            onChange={() => {
-              setOption('success');
-            }}
-            value="success"
-          />
-        </Box>
-        <Box display="inlineBlock">
-          <RadioGroup.RadioButton
-            badge={{ text: 'badge', type: 'info' }}
-            checked={option === 'info'}
-            id="info"
-            label="I'd like a info badge"
-            onChange={() => {
-              setOption('info');
-            }}
-            value="info"
-          />
-        </Box>
-        <Box display="inlineBlock">
-          <RadioGroup.RadioButton
-            badge={{ text: 'badge', type: 'warning' }}
-            checked={option === 'warning'}
-            id="warning"
-            label="I'd like a warning badge"
-            onChange={() => {
-              setOption('warning');
-            }}
-            value="warning"
-          />
-        </Box>
-        <Box display="inlineBlock">
-          <RadioGroup.RadioButton
-            badge={{ text: 'badge', type: 'neutral' }}
-            checked={option === 'neutral'}
-            id="neutral"
-            label="I'd like a neutral badge"
-            onChange={() => {
-              setOption('neutral');
-            }}
-            value="neutral"
-          />
-        </Box>
+        <RadioGroup.RadioButton
+          badge={{ text: 'badge', type: 'success' }}
+          checked={option === 'success'}
+          id="success"
+          label="I'd like a success badge"
+          onChange={() => {
+            setOption('success');
+          }}
+          value="success"
+        />
+        <RadioGroup.RadioButton
+          badge={{ text: 'badge', type: 'info' }}
+          checked={option === 'info'}
+          id="info"
+          label="I'd like a info badge"
+          onChange={() => {
+            setOption('info');
+          }}
+          value="info"
+        />
+        <RadioGroup.RadioButton
+          badge={{ text: 'badge', type: 'warning' }}
+          checked={option === 'warning'}
+          id="warning"
+          label="I'd like a warning badge"
+          onChange={() => {
+            setOption('warning');
+          }}
+          value="warning"
+        />
+        <RadioGroup.RadioButton
+          badge={{ text: 'badge', type: 'neutral' }}
+          checked={option === 'neutral'}
+          id="neutral"
+          label="I'd like a neutral badge"
+          onChange={() => {
+            setOption('neutral');
+          }}
+          value="neutral"
+        />
       </RadioGroup>
     </Box>
   );

diff --git a/docs/examples/radiogroup/addingAPopoverExample.tsx b/docs/examples/radiogroup/addingAPopoverExample.tsx
diff --git a/docs/pages/web/radiogroup.tsx b/docs/pages/web/radiogroup.tsx
@@ -7,7 +7,6 @@ import Page from '../../docs-components/Page';
 import PageHeader from '../../docs-components/PageHeader';
 import SandpackExample from '../../docs-components/SandpackExample';
 import badge from '../../examples/radiogroup/addingABadgeExample';
-import addingAPopoverExample from '../../examples/radiogroup/addingAPopoverExample';
 import directionExample from '../../examples/radiogroup/directionExample';
 import dontUseToSelectMultipleItems from '../../examples/radiogroup/dontUseToSelectMultipleItems';
 import dontUseToToggleStateOnMobile from '../../examples/radiogroup/dontUseToToggleStateOnMobile';
@@ -276,18 +275,6 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: Generat
         </MainSection.Subsection>
         <MainSection.Subsection
           description={`
-    \`RadioButton\` with an anchor ref to a Popover component doesn't pass the correct positioning to the Popover. Instead set the anchor ref to the parent container.
-  `}
-          title="Adding a Popover"
-        >
-          <MainSection.Card
-            sandpackExample={
-              <SandpackExample code={addingAPopoverExample} name="Adding a popover example" />
-            }
-          />
-        </MainSection.Subsection>
-        <MainSection.Subsection
-          description={`
     The \`badge\` prop can be used to add a badge to the RadioButton.
   `}
           title="With Badge"

diff --git a/packages/gestalt/src/Borders.css b/packages/gestalt/src/Borders.css
@@ -1,8 +1,6 @@
 :root {
   --g-border-width: 1px;
   --g-border-width-lg: 2px;
-  --g-border-width-lg-vr: 1px;
-  --g-border-width-lg-vr-hover: 1.5px;
 }
 
 /* Border lines */
@@ -121,14 +119,6 @@ html[dir="rtl"] .borderLeft {
   border-width: var(--g-border-width-lg);
 }
 
-.sizeLgVR {
-  border-width: var(--g-border-width-lg-vr);
-}
-
-.sizeLgHoverVR {
-  border-width: var(--g-border-width-lg-vr-hover);
-}
-
 .solid {
   border-style: solid;
 }

diff --git a/packages/gestalt/src/Fieldset.tsx b/packages/gestalt/src/Fieldset.tsx
@@ -1,16 +1,5 @@
 import { ReactNode } from 'react';
-import classnames from 'classnames';
-import boxStyles from './Box.css';
-import boxWhitespaceStyles from './boxWhitespace.css';
-import VRFieldset from './Fieldset/VRFieldset';
-import labelStyles from './Label/InternalLabel.css';
-import formStyles from './sharedSubcomponents/FormElement.css';
-import FormErrorMessage from './sharedSubcomponents/FormErrorMessage';
-import FormHelperText from './sharedSubcomponents/FormHelperText';
-import formLabelStyles from './sharedSubcomponents/FormLabel.css';
-import Text from './Text';
-import useInExperiment from './useInExperiment';
-import whitespaceStyles from './Whitespace.css';
+import InternalFieldset from './Fieldset/InternalFieldset';
 
 type Props = {
   /**
@@ -55,61 +44,21 @@ export default function Fieldset({
   children,
   helperText,
 }: Props) {
-  const isInVRExperiment = useInExperiment({
-    webExperimentName: 'web_gestalt_visualrefresh',
-    mwebExperimentName: 'web_gestalt_visualrefresh',
-  });
-
   if (errorMessage && id === '') {
     // eslint-disable-next-line no-console
     console.error('Please provide an id property to <Fieldset />');
   }
 
-  if (isInVRExperiment) {
-    return (
-      <VRFieldset
-        errorMessage={errorMessage}
-        helperText={helperText}
-        id={id}
-        legend={legend}
-        legendDisplay={legendDisplay}
-      >
-        {children}
-      </VRFieldset>
-    );
-  }
-
   return (
-    <fieldset
-      aria-describedby={errorMessage ? `${id}-error` : undefined}
-      className={classnames(formStyles.unstyled, whitespaceStyles.p0, whitespaceStyles.m0)}
+    <InternalFieldset
+      errorMessage={errorMessage}
+      helperText={helperText}
+      id={id}
+      legend={legend}
+      legendDisplay={legendDisplay}
     >
-      <legend
-        className={classnames(
-          labelStyles.label,
-          boxWhitespaceStyles.paddingX0, // Needed to remove the default legend  padding
-          {
-            [boxStyles.visuallyHidden]: legendDisplay === 'hidden',
-            [formLabelStyles.formLabel]: !isInVRExperiment,
-            [formLabelStyles.vrFormLabel]: isInVRExperiment,
-          },
-        )}
-      >
-        <Text size="100">{legend}</Text>
-      </legend>
       {children}
-      {helperText && (
-        <FormHelperText
-          disabled={false}
-          id={`${id}-helperText`}
-          marginTop
-          noPadding
-          text={helperText}
-        />
-      )}
-
-      {errorMessage && <FormErrorMessage id={`${id}-error`} text={errorMessage} />}
-    </fieldset>
+    </InternalFieldset>
   );
 }
 

diff --git a/packages/gestalt/src/Fieldset/InternalFieldset.css b/packages/gestalt/src/Fieldset/InternalFieldset.css
@@ -0,0 +1,7 @@
+.label {
+  composes: block from "../Layout.css";
+  composes: pointer from "../Cursor.css";
+  padding-bottom: var(--space-200);
+  padding-left: var(--space-0);
+  padding-right: var(--space-0);
+}
diff --git a/packages/gestalt/src/Fieldset/InternalFieldset.tsx b/packages/gestalt/src/Fieldset/InternalFieldset.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import classnames from 'classnames';
+import style from './InternalFieldset.css';
+import boxStyles from '../Box.css';
+import formStyles from '../sharedSubcomponents/FormElement.css';
+import FormErrorMessage from '../sharedSubcomponents/FormErrorMessage';
+import FormHelperText from '../sharedSubcomponents/FormHelperText';
+import Text from '../Text';
+import whitespaceStyles from '../Whitespace.css';
+
+type Props = {
+  children: ReactNode;
+  id?: string;
+  errorMessage?: string;
+  legend: string;
+  legendDisplay?: 'visible' | 'hidden';
+  helperText?: string;
+  marginTop?: boolean;
+};
+
+export default function InternalFieldset({
+  id,
+  errorMessage,
+  legend,
+  legendDisplay,
+  children,
+  helperText,
+  marginTop,
+}: Props) {
+  return (
+    <fieldset
+      aria-describedby={errorMessage ? `${id}-error` : undefined}
+      className={classnames(formStyles.unstyled, whitespaceStyles.p0, whitespaceStyles.m0)}
+    >
+      <legend
+        className={classnames(style.label, {
+          [boxStyles.visuallyHidden]: legendDisplay === 'hidden',
+        })}
+      >
+        <Text size="100">{legend}</Text>
+      </legend>
+      {children}
+      {helperText && (
+        <FormHelperText
+          disabled={false}
+          id={`${id}-helperText`}
+          marginTop={marginTop}
+          noPadding
+          text={helperText}
+        />
+      )}
+
+      {errorMessage && (
+        <FormErrorMessage id={`${id}-error`} marginTop={marginTop} text={errorMessage} />
+      )}
+    </fieldset>
+  );
+}
+
+InternalFieldset.displayName = 'InternalFieldset';
diff --git a/packages/gestalt/src/Fieldset/VRFieldset.css b/packages/gestalt/src/Fieldset/VRFieldset.css