Skip to content

Commit d55c920

Browse files
yihuiliaoyihuiliao
authored
chore: add SelectBoxGroup to chromatic (#8760)
* chore: add SelectBoxGroup to chromatic * update props
1 parent 341ae3f commit d55c920

File tree

3 files changed

+93
-35
lines changed

3 files changed

+93
-35
lines changed

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/*
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {action} from '@storybook/addon-actions';
14+
import type {Meta, StoryObj} from '@storybook/react';
15+
import PaperAirplane from '../spectrum-illustrations/linear/Paperairplane';
16+
import React from 'react';
17+
import {SelectBox, SelectBoxGroup, Text} from '../src';
18+
import Server from '../spectrum-illustrations/linear/Server';
19+
20+
const meta: Meta<typeof SelectBoxGroup> = {
21+
component: SelectBoxGroup,
22+
parameters: {
23+
chromaticProvider: {disableAnimations: true}
24+
},
25+
title: 'S2 Chromatic/SelectBoxGroup'
26+
};
27+
28+
export default meta;
29+
type Story = StoryObj<typeof SelectBoxGroup>;
30+
31+
export const VerticalOrientation: Story = {
32+
render: () => (
33+
<div style={{width: 600}}>
34+
<SelectBoxGroup
35+
orientation="vertical"
36+
onSelectionChange={action('onSelectionChange')}>
37+
<SelectBox value="text-only">
38+
<Text slot="label">V: Text Only</Text>
39+
</SelectBox>
40+
<SelectBox value="illustration-text">
41+
<Server />
42+
<Text slot="label">V: Illustration + Text</Text>
43+
</SelectBox>
44+
<SelectBox value="illustration-desc">
45+
<PaperAirplane />
46+
</SelectBox>
47+
</SelectBoxGroup>
48+
</div>
49+
)
50+
};
51+
52+
export const HorizontalOrientation: Story = {
53+
render: () => (
54+
<div style={{width: 800}}>
55+
<SelectBoxGroup
56+
orientation="horizontal"
57+
onSelectionChange={action('onSelectionChange')}>
58+
<SelectBox value="text-only">
59+
<Text slot="label">Title Only</Text>
60+
</SelectBox>
61+
<SelectBox value="illustration-text">
62+
<Server />
63+
<Text slot="label">Illustration + Title</Text>
64+
</SelectBox>
65+
<SelectBox value="text-desc">
66+
<Text slot="label">Title + Description</Text>
67+
<Text slot="description">Additional description</Text>
68+
</SelectBox>
69+
<SelectBox value="h-all">
70+
<Server />
71+
<Text slot="label">Illustration + Title + Description</Text>
72+
<Text slot="description">Full horizontal layout with all elements</Text>
73+
</SelectBox>
74+
</SelectBoxGroup>
75+
</div>
76+
)
77+
};

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

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,7 @@ import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef
2828
import {TextContext} from './Content';
2929
import {useSpectrumContextProps} from './useSpectrumContextProps';
3030

31-
type ExcludedListBoxProps =
32-
| keyof GlobalDOMAttributes
33-
| 'layout'
34-
| 'dragAndDropHooks'
35-
| 'renderEmptyState'
36-
| 'dependencies'
37-
| 'items'
38-
| 'onAction'
39-
| 'children'
40-
| 'selectionMode'
41-
| 'shouldSelectOnPress'
42-
| 'shouldFocusWrap'
43-
| 'selectionBehavior'
44-
| 'shouldSelectOnFocus';
45-
46-
export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, ExcludedListBoxProps> {
31+
export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'style' | 'className'> {
4732
/**
4833
* The SelectBox elements contained within the SelectBoxGroup.
4934
*/
@@ -67,7 +52,7 @@ export interface SelectBoxProps extends StyleProps {
6752
/**
6853
* The label for the element.
6954
*/
70-
children?: ReactNode,
55+
children: ReactNode,
7156
/**
7257
* Whether the SelectBox is disabled.
7358
*/
@@ -320,7 +305,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
320305
className={style({
321306
position: 'absolute',
322307
top: 8,
323-
left: 8,
308+
insetStart: 8,
324309
pointerEvents: 'none'
325310
})}
326311
aria-hidden="true">
@@ -369,7 +354,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
369354
/*
370355
* SelectBoxGroup allows users to select one or more options from a list.
371356
*/
372-
export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
357+
export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
373358
[props, ref] = useSpectrumContextProps(props, ref, SelectBoxGroupContext);
374359

375360
let {

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
1-
/*************************************************************************
2-
* ADOBE CONFIDENTIAL
3-
* ___________________
1+
/*
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
46
*
5-
* Copyright 2025 Adobe
6-
* All Rights Reserved.
7-
*
8-
* NOTICE: All information contained herein is, and remains
9-
* the property of Adobe and its suppliers, if any. The intellectual
10-
* and technical concepts contained herein are proprietary to Adobe
11-
* and its suppliers and are protected by all applicable intellectual
12-
* property laws, including trade secret and copyright laws.
13-
* Dissemination of this information or reproduction of this material
14-
* is strictly forbidden unless prior written permission is obtained
15-
* from Adobe.
16-
**************************************************************************/
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
1712

1813
import {action} from '@storybook/addon-actions';
1914
import AlertNotice from '../spectrum-illustrations/linear/AlertNotice';
@@ -312,5 +307,6 @@ export const AllSlotCombinations: Story = {
312307
</div>
313308

314309
</div>
315-
)
310+
),
311+
tags: ['!autodocs']
316312
};

0 commit comments

Comments
 (0)