feat: Replaced RadioGroup with Spectrum's (#2020)

packages/code-studio/src/styleguide/Inputs.tsx

@@ -5,7 +5,7 @@ import {
   AutoResizeTextarea,
   Checkbox,
   ComboBox,
-  RadioItem,
+  Radio,
   RadioGroup,
   SearchInput,
   TimeInput,
@@ -56,12 +56,9 @@ function Inputs(): React.ReactElement {
   const [autoResizeTextareaValue, setAutoResizeTextareaValue] = useState(
     '-DLiveTableMonitor.updateThreads=8 -DLiveTableMonitor.printDependencyInformation=false -Dassertion.heapDump=true -Drequire.heapDump=true -Dassertion.heapDump=true -Drequire.heapDump=true'
   );
-  const handleRadioChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setRadioValue(event.target.value);
-    },
-    []
-  );
+  const handleRadioChange = useCallback((value: string) => {
+    setRadioValue(value);
+  }, []);
 
   const handleToggleClick = useCallback(() => {
     setOn(!on);
@@ -186,18 +183,26 @@ function Inputs(): React.ReactElement {
 
         <div className="col">
           <form>
-            <h5> Radios </h5>
-            <RadioGroup onChange={handleRadioChange} value={radioValue}>
-              <RadioItem value="1">Toggle this custom radio</RadioItem>
-              <RadioItem value="2">Or toggle this other custom radio</RadioItem>
-              <RadioItem value="3" disabled>
+            <h5 id="inputs-radios-heading">Radios</h5>
+            <RadioGroup
+              aria-labelledby="inputs-radios-heading"
+              onChange={handleRadioChange}
+              value={radioValue}
+              isInvalid={radioValue === '4'}
+              description="Select a radio item"
+              errorMessage={
+                radioValue === '4' ? 'Invalid radio selected' : undefined
+              }
+            >
+              <Radio value="1">Toggle this custom radio</Radio>
+              <Radio value="2">Or toggle this other custom radio</Radio>
+              <Radio value="3" isDisabled>
                 Disabled radio
-              </RadioItem>
-              <RadioItem value="4" isInvalid>
-                Invalid radio
-              </RadioItem>
-              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-              <>{check4 && <RadioItem value="5">Extra radio item</RadioItem>}</>
+              </Radio>
+              <Radio value="4">Invalid radio</Radio>
+              <Radio isHidden={!check4} value="5">
+                Extra radio item
+              </Radio>
             </RadioGroup>
           </form>
           <div className="form-group">

packages/code-studio/src/styleguide/ListViews.tsx

@@ -1,6 +1,6 @@
-import React, { ChangeEvent, ReactNode, useCallback, useState } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { StyleProps } from '@react-types/shared';
+import type { BoxAlignmentStyleProps, StyleProps } from '@react-types/shared';
 import {
   Grid,
   Icon,
@@ -13,7 +13,7 @@ import {
   Checkbox,
   ListViewProps,
   RadioGroup,
-  RadioItem,
+  Radio,
   useSpectrumThemeProvider,
   ListActionGroup,
 } from '@deephaven/components';
@@ -35,7 +35,7 @@ function AccountIllustration(): JSX.Element {
   );
 }
 
-interface LabeledProps extends StyleProps {
+interface LabeledProps extends BoxAlignmentStyleProps, StyleProps {
   label: string;
   direction?: 'row' | 'column';
   children: ReactNode;
@@ -83,12 +83,9 @@ export function ListViews(): JSX.Element {
     2 + // listview border
     LIST_VIEW_ROW_HEIGHTS[density ?? 'compact'][scale];
 
-  const onDensityChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      setDensity(event.currentTarget.value as ListViewProps['density']);
-    },
-    []
-  );
+  const onDensityChange = useCallback((value: string) => {
+    setDensity(value as ListViewProps['density']);
+  }, []);
 
   const [showIcons, setShowIcons] = useState(true);
   const [lastActionKey, setLastActionKey] = useState<ItemKey>('');
@@ -115,14 +112,20 @@ export function ListViews(): JSX.Element {
         rows={`auto minmax(${singleChildExampleHeight}px, auto) 1fr auto 1fr`}
       >
         <LabeledFlexContainer
+          alignItems="center"
           direction="row"
           label="Density"
           gridColumn="span 3"
         >
-          <RadioGroup value={density} onChange={onDensityChange}>
-            <RadioItem value="compact">Compact</RadioItem>
-            <RadioItem value="regular">Regular</RadioItem>
-            <RadioItem value="spacious">Spacious</RadioItem>
+          <RadioGroup
+            aria-label="Density"
+            orientation="horizontal"
+            value={density}
+            onChange={onDensityChange}
+          >
+            <Radio value="compact">Compact</Radio>
+            <Radio value="regular">Regular</Radio>
+            <Radio value="spacious">Spacious</Radio>
           </RadioGroup>
         </LabeledFlexContainer>
 

packages/code-studio/src/styleguide/SpectrumComparison.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-props-no-spreading */
 /* eslint-disable react/style-prop-object */
-import React, { Fragment, useCallback, useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import {
   ActionButton,
   Button,
@@ -11,17 +11,13 @@ import {
   Icon,
   Item,
   Picker,
-  Radio,
-  RadioGroup,
   SpectrumButtonProps,
   TextField,
 } from '@adobe/react-spectrum';
 import {
   Button as BootstrapButtonOld,
   Checkbox as CheckboxOld,
   ComboBox as ComboBoxOld,
-  RadioGroup as RadioGroupOld,
-  RadioItem,
   Select,
   View,
   Text,
@@ -51,14 +47,6 @@ const options = [
 
 export function SpectrumComparison(): JSX.Element {
   const [isChecked, setIsChecked] = useState(false);
-  const [radioValue, setRadioValue] = useState('1');
-
-  const handleRadioChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setRadioValue(event.target.value);
-    },
-    []
-  );
 
   return (
     <div
@@ -285,27 +273,6 @@ export function SpectrumComparison(): JSX.Element {
               Disabled
             </CheckboxOld>
             <Checkbox isDisabled>Disabled</Checkbox>
-
-            <Flex direction="column">
-              <label>
-                Radio Group
-                <RadioGroupOld onChange={handleRadioChange} value={radioValue}>
-                  <RadioItem value="1">One</RadioItem>
-                  <RadioItem value="2">Two</RadioItem>
-                  <RadioItem value="3">Three</RadioItem>
-                </RadioGroupOld>
-              </label>
-            </Flex>
-
-            <RadioGroup
-              label="Radio Group"
-              value={radioValue}
-              onChange={setRadioValue}
-            >
-              <Radio value="1">One</Radio>
-              <Radio value="2">Two</Radio>
-              <Radio value="3">Three</Radio>
-            </RadioGroup>
           </Grid>
         </View>
       </Flex>

packages/components/src/index.ts

@@ -37,8 +37,6 @@ export * from './navigation';
 export { default as Option } from './Option';
 export * from './popper';
 export * from './modal';
-export { default as RadioGroup } from './RadioGroup';
-export { default as RadioItem } from './RadioItem';
 export { default as RandomAreaPlotAnimation } from './RandomAreaPlotAnimation';
 export * from './SearchableCombobox';
 export { default as Select } from './Select';