chore: add SelectBoxGroup to chromatic

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

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
+import PaperAirplane from '../spectrum-illustrations/linear/Paperairplane';
+import React from 'react';
+import {SelectBox, SelectBoxGroup, Text} from '../src';
+import Server from '../spectrum-illustrations/linear/Server';
+
+const meta: Meta<typeof SelectBoxGroup> = {
+  component: SelectBoxGroup,
+  parameters: {
+    chromaticProvider: {disableAnimations: true}
+  },
+  title: 'S2 Chromatic/SelectBoxGroup'
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectBoxGroup>;
+
+export const VerticalOrientation: Story = {
+  render: () => (
+    <div style={{width: 600}}>
+      <SelectBoxGroup 
+        orientation="vertical" 
+        onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="text-only">
+          <Text slot="label">V: Text Only</Text>
+        </SelectBox>
+        <SelectBox value="illustration-text">
+          <Server />
+          <Text slot="label">V: Illustration + Text</Text>
+        </SelectBox>
+        <SelectBox value="illustration-desc">
+          <PaperAirplane />
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};
+
+export const HorizontalOrientation: Story = {
+  render: () => (
+    <div style={{width: 800}}>
+      <SelectBoxGroup 
+        orientation="horizontal" 
+        onSelectionChange={action('onSelectionChange')}>
+        <SelectBox value="text-only">
+          <Text slot="label">Title Only</Text>
+        </SelectBox>
+        <SelectBox value="illustration-text">
+          <Server />
+          <Text slot="label">Illustration + Title</Text>
+        </SelectBox>
+        <SelectBox value="text-desc">
+          <Text slot="label">Title + Description</Text>
+          <Text slot="description">Additional description</Text>
+        </SelectBox>
+        <SelectBox value="h-all">
+          <Server />
+          <Text slot="label">Illustration + Title + Description</Text>
+          <Text slot="description">Full horizontal layout with all elements</Text>
+        </SelectBox>
+      </SelectBoxGroup>
+    </div>
+  )
+};

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

@@ -28,22 +28,7 @@ import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef
 import {TextContext} from './Content';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-type ExcludedListBoxProps = 
-  | keyof GlobalDOMAttributes 
-  | 'layout' 
-  | 'dragAndDropHooks' 
-  | 'renderEmptyState' 
-  | 'dependencies' 
-  | 'items' 
-  | 'onAction'
-  | 'children' 
-  | 'selectionMode' 
-  | 'shouldSelectOnPress' 
-  | 'shouldFocusWrap' 
-  | 'selectionBehavior' 
-  | 'shouldSelectOnFocus';
-
-export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, ExcludedListBoxProps> {
+export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'style' | 'className'> {
   /**
    * The SelectBox elements contained within the SelectBoxGroup.
    */
@@ -67,7 +52,7 @@ export interface SelectBoxProps extends StyleProps {
   /**
    * The label for the element.
    */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * Whether the SelectBox is disabled.
    */
@@ -320,7 +305,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
               className={style({
                 position: 'absolute',
                 top: 8,
-                left: 8,
+                insetStart: 8,
                 pointerEvents: 'none'
               })}
               aria-hidden="true">
@@ -369,7 +354,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 /*
  * SelectBoxGroup allows users to select one or more options from a list.
  */
-export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
 
   let {

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

@@ -1,19 +1,14 @@
-/*************************************************************************
- * ADOBE CONFIDENTIAL
- * ___________________
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
  *
- * Copyright 2025 Adobe
- * All Rights Reserved.
- *
- * NOTICE: All information contained herein is, and remains
- * the property of Adobe and its suppliers, if any. The intellectual
- * and technical concepts contained herein are proprietary to Adobe
- * and its suppliers and are protected by all applicable intellectual
- * property laws, including trade secret and copyright laws.
- * Dissemination of this information or reproduction of this material
- * is strictly forbidden unless prior written permission is obtained
- * from Adobe.
- **************************************************************************/
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
 
 import {action} from '@storybook/addon-actions';
 import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
@@ -312,5 +307,6 @@ export const AllSlotCombinations: Story = {
       </div>
 
     </div>
-  )
+  ),
+  tags: ['!autodocs']
 };