lint and removed XS

Author: DPandyan

packages/@react-spectrum/s2/src/SelectBox.tsx

@@ -51,7 +51,6 @@ const selectBoxStyles = style({
   width: {
     default: {
       size: {
-        XS: 100,
         S: 128,
         M: 136,
         L: 160,
@@ -65,7 +64,6 @@ const selectBoxStyles = style({
   height: {
     default: {
       size: {
-        XS: 100,
         S: 128,
         M: 136,
         L: 160,
@@ -88,7 +86,6 @@ const selectBoxStyles = style({
   },
   padding: {
     size: {
-      XS: 12,
       S: 16,
       M: 20,
       L: 24,
@@ -207,11 +204,6 @@ const descriptionText = style({
   lineHeight: 'body'
 });
 
-const checkboxContainer = style({
-  position: 'absolute',
-  top: 16,
-  left: 16
-});
 
 const SelectBoxRenderPropsContext = createContext<{
   isHovered?: boolean,
@@ -257,14 +249,17 @@ export const SelectBox = /*#__PURE__*/ forwardRef(function SelectBox(props: Sele
       style={UNSAFE_style}>
 
       {showCheckbox && (
-        <div className={checkboxContainer}>
-          <div style={{pointerEvents: 'none'}}>
-            <Checkbox 
-              isSelected={isSelected}
-              isDisabled={isDisabled}
-              size={size === 'XS' ? 'S' : size}
-              isReadOnly />
-          </div>
+        <div 
+          className={style({
+            position: 'absolute',
+            top: 16,
+            left: 16
+          })}>
+          <Checkbox 
+            isSelected={isSelected}
+            isDisabled={isDisabled}
+            size={size}
+            isReadOnly />
         </div>
       )}
       {orientation === 'horizontal' ? (

packages/@react-spectrum/s2/src/SelectBoxGroup.tsx

@@ -16,6 +16,7 @@ import {
   Text
 } from 'react-aria-components';
 import {DOMRef, DOMRefValue, HelpTextProps, Orientation, Selection, SpectrumLabelableProps} from '@react-types/shared';
+import {FieldLabel} from './Field';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactElement, ReactNode, useEffect, useId, useMemo} from 'react';
 import {SelectBoxRenderPropsContext} from './SelectBox';
@@ -52,7 +53,7 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
    * The size of the SelectBoxGroup.
    * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * The axis the SelectBox elements should align with.
    * @default 'vertical'
@@ -87,12 +88,16 @@ export interface SelectBoxGroupProps extends StyleProps, SpectrumLabelableProps,
   /**
    * Whether the SelectBoxGroup is in an invalid state.
    */
-  isInvalid?: boolean
+  isInvalid?: boolean,
+  /**
+   * Contextual help text for the SelectBoxGroup.
+   */
+  contextualHelp?: ReactNode
 }
 
 interface SelectBoxContextValue {
   allowMultiSelect?: boolean,
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL',
   orientation?: Orientation,
   isDisabled?: boolean,
   selectedKeys?: Selection,
@@ -214,6 +219,7 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
 
   let {
     label,
+    contextualHelp,
     children,
     onSelectionChange,
     defaultValue,
@@ -318,10 +324,12 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(p
         isInvalid={hasValidationErrors} />
 
       {label && (
-        <Text slot="label" id={`${gridId}-label`}>
+        <FieldLabel
+          id={`${gridId}-label`}
+          isRequired={isRequired}
+          contextualHelp={contextualHelp}>
           {label}
-          {isRequired && <span aria-label="required"> *</span>}
-        </Text>
+        </FieldLabel>
       )}
 
       <GridList

packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx

@@ -17,10 +17,10 @@
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
-import {createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
+import {Button, createIcon, SelectBox, SelectBoxGroup, Text} from '../src';
 import type {Meta, StoryObj} from '@storybook/react';
 import Paperairplane from '../spectrum-illustrations/linear/Paperairplane';
-import React from 'react';
+import React, {useState} from 'react';
 import Server from '../spectrum-illustrations/linear/Server';
 import StarFilledSVG from '../s2wf-icons/S2_Icon_StarFilled_20_N.svg';
 import StarSVG from '../s2wf-icons/S2_Icon_Star_20_N.svg';
@@ -29,7 +29,7 @@ const StarIcon = createIcon(StarSVG);
 const StarFilledIcon = createIcon(StarFilledSVG);
 
 const meta: Meta<typeof SelectBoxGroup> = {
-  title: 'SelectBoxGroup (Collection)',
+  title: 'SelectBoxGroup',
   component: SelectBoxGroup,
   parameters: {
     layout: 'centered'
@@ -42,7 +42,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
     },
     size: {
       control: 'select',
-      options: ['XS', 'S', 'M', 'L', 'XL']
+      options: ['S', 'M', 'L', 'XL']
     },
     orientation: {
       control: 'select',
@@ -63,7 +63,7 @@ const meta: Meta<typeof SelectBoxGroup> = {
     numColumns: 2,
     gutterWidth: 'default',
     isRequired: false,
-    isDisabled: false,
+    isDisabled: false
   }
 };
 
@@ -133,15 +133,13 @@ export const MultipleSelection: Story = {
 // Grid Navigation Testing
 export const GridNavigation: Story = {
   args: {
-    label: 'Test Grid Navigation (Use Arrow Keys)',
+    label: 'Test Grid Navigation',
     numColumns: 3
   },
   render: (args) => (
     <div style={{maxWidth: 600}}>
       <p style={{marginBottom: 16, fontSize: 14, color: '#666'}}>
-        Focus any item (best done by clicking to the left of the group and hitting the tab key) and use arrow keys to navigate:
-        {/* <br />• ↑↓ moves vertically (same column)
-        <br />• ←→ moves horizontally (same row) */}
+        Focus any item (best done by clicking to the side of the group and hitting the tab key) and using arrow keys to navigate:
       </p>
       <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
         <SelectBox value="1">
@@ -167,38 +165,6 @@ export const GridNavigation: Story = {
   )
 };
 
-// Form Integration
-export const FormIntegration: Story = {
-  args: {
-    label: 'Select your option',
-    name: 'user_preference',
-    isRequired: true
-  },
-  render: (args) => (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        action('Form submitted')(Object.fromEntries(formData));
-      }}>
-      <SelectBoxGroup {...args} onSelectionChange={action('onSelectionChange')}>
-        <SelectBox value="option1">
-          <Text slot="text">Option 1</Text>
-        </SelectBox>
-        <SelectBox value="option2">
-          <Text slot="text">Option 2</Text>
-        </SelectBox>
-        <SelectBox value="option3">
-          <Text slot="text">Option 3</Text>
-        </SelectBox>
-      </SelectBoxGroup>
-      <button type="submit" style={{marginTop: 16}}>
-        Submit Form
-      </button>
-    </form>
-  )
-};
-
 export const FormValidation: Story = {
   args: {
     label: 'Required Selection',
@@ -222,7 +188,7 @@ export const FormValidation: Story = {
 export const SizeVariations: Story = {
   render: () => (
     <div style={{display: 'flex', flexDirection: 'column', gap: 32}}>
-      {(['XS', 'S', 'M', 'L', 'XL'] as const).map((size) => (
+      {(['S', 'M', 'L', 'XL'] as const).map((size) => (
         <SelectBoxGroup
           key={size}
           size={size}
@@ -311,9 +277,8 @@ export const IndividualDisabled: Story = {
   )
 };
 
-// Controlled Mode - Convert to proper component to use React hooks
 function ControlledStory() {
-  const [value, setValue] = React.useState('option2');
+  const [value, setValue] = useState('option2');
 
   return (
     <div>
@@ -346,9 +311,8 @@ export const Controlled: Story = {
   render: () => <ControlledStory />
 };
 
-// Dynamic Icons - Convert to proper component to use React hooks
 function DynamicIconsStory() {
-  const [selectedValues, setSelectedValues] = React.useState<Set<string>>(
+  const [selectedValues, setSelectedValues] = useState<Set<string>>(
     new Set()
   );
 
@@ -379,7 +343,6 @@ export const DynamicIcons: Story = {
   render: () => <DynamicIconsStory />
 };
 
-// Multiple Columns
 export const MultipleColumns: Story = {
   args: {
     label: 'Choose options',
@@ -398,3 +361,55 @@ export const MultipleColumns: Story = {
     </div>
   )
 };
+
+function FormSubmissionExample() {
+  const [selectedValues, setSelectedValues] = useState<string[]>(['newsletter']);
+  const [submittedData, setSubmittedData] = useState<string[] | null>(null);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const preferences = formData.getAll('preferences') as string[];
+    setSubmittedData(preferences);
+    action('form-submitted')(preferences);
+  };
+
+  return (
+    <div style={{maxWidth: 400}}>
+      <form onSubmit={handleSubmit}>
+        <SelectBoxGroup
+          selectionMode="multiple"
+          value={selectedValues}
+          onSelectionChange={(val) => setSelectedValues(val as string[])}
+          name="preferences"
+          label="Email Preferences"
+          isRequired>
+          <SelectBox value="newsletter">
+            <Text slot="text">Newsletter</Text>
+          </SelectBox>
+          <SelectBox value="marketing">
+            <Text slot="text">Marketing Updates</Text>
+          </SelectBox>
+          <SelectBox value="product">
+            <Text slot="text">Product News</Text>
+          </SelectBox>
+          <SelectBox value="security">
+            <Text slot="text">Security Alerts</Text>
+          </SelectBox>
+        </SelectBoxGroup>
+        
+        <Button type="submit" variant="accent" >
+          Save Preferences
+        </Button>
+      </form>
+      
+      {submittedData && (
+        <Text>Submitted: {submittedData.join(', ')}</Text>
+      )}
+    </div>
+  );
+}
+
+export const FormSubmission: Story = {
+  render: () => <FormSubmissionExample />
+};

packages/@react-spectrum/s2/test/SelectBoxGroup.test.tsx

@@ -1,8 +1,8 @@
+import {act, render, screen, waitFor} from '@testing-library/react';
+import {Button, Text} from '../src';
 import React from 'react';
-import {render, screen, waitFor, act} from '@testing-library/react';
 import {SelectBox} from '../src/SelectBox';
 import {SelectBoxGroup} from '../src/SelectBoxGroup';
-import {Text} from '../src';
 import userEvent from '@testing-library/user-event';
 
 function SingleSelectBox() {
@@ -250,11 +250,9 @@ describe('SelectBoxGroup', () => {
           </SelectBox>
         </SelectBoxGroup>
       );
-      const grid = screen.getByRole('grid', {name: 'Required test required'});
+      const grid = screen.getByRole('grid', {name: 'Required test'});
       expect(grid).toBeInTheDocument();
-      
       expect(screen.getByText('Required test')).toBeInTheDocument();
-      expect(screen.getByText('*')).toBeInTheDocument();
     });
 
     it('supports error message and validation', () => {
@@ -422,6 +420,46 @@ describe('SelectBoxGroup', () => {
       expect(hiddenInput).toBeInTheDocument();
       expect(hiddenInput).toHaveValue('option1');
     });
+
+    it('works with form submission using S2 Button', async () => {
+      const onSubmit = jest.fn();
+      render(
+        <form 
+          onSubmit={(e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            const values = formData.getAll('preferences');
+            onSubmit(values);
+          }}>
+          <SelectBoxGroup
+            selectionMode="multiple"
+            onSelectionChange={() => {}}
+            value={['option1', 'option3']}
+            name="preferences"
+            label="User Preferences">
+            <SelectBox value="option1">
+              <Text slot="text">Newsletter</Text>
+            </SelectBox>
+            <SelectBox value="option2">
+              <Text slot="text">Marketing</Text>
+            </SelectBox>
+            <SelectBox value="option3">
+              <Text slot="text">Updates</Text>
+            </SelectBox>
+          </SelectBoxGroup>
+          <Button type="submit" variant="accent">
+            Submit Preferences
+          </Button>
+        </form>
+      );
+
+      const submitButton = screen.getByRole('button', {name: 'Submit Preferences'});
+      expect(submitButton).toBeInTheDocument();
+
+      await userEvent.click(submitButton);
+      
+      expect(onSubmit).toHaveBeenCalledWith(['option1', 'option3']);
+    });
   });
 
   describe('Individual SelectBox behavior', () => {