diff --git a/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/chromatic/SelectBoxGroup.stories.tsx new file mode 100644 index 00000000000..21f10c0ec40 --- /dev/null +++ b/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 = { + component: SelectBoxGroup, + parameters: { + chromaticProvider: {disableAnimations: true} + }, + title: 'S2 Chromatic/SelectBoxGroup' +}; + +export default meta; +type Story = StoryObj; + +export const VerticalOrientation: Story = { + render: () => ( +
+ + + V: Text Only + + + + V: Illustration + Text + + + + + +
+ ) +}; + +export const HorizontalOrientation: Story = { + render: () => ( +
+ + + Title Only + + + + Illustration + Title + + + Title + Description + Additional description + + + + Illustration + Title + Description + Full horizontal layout with all elements + + +
+ ) +}; diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index c37053655aa..e3dd66905ad 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/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 extends StyleProps, Omit, ExcludedListBoxProps> { +export interface SelectBoxGroupProps extends StyleProps, Omit, 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(props: SelectBoxGroupProps, ref: DOMRef) { +export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup(props: SelectBoxGroupProps, ref: DOMRef) { [props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext); let { diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx index c0720a6b6d2..60288865f4d 100644 --- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx +++ b/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 = { - ) + ), + tags: ['!autodocs'] };