From 242f405b0383e8fc7e9b9b02e7be6deed5cbb2d0 Mon Sep 17 00:00:00 2001 From: Dan Grossen Date: Tue, 29 Oct 2024 13:34:04 -0600 Subject: [PATCH 1/7] initial commit for select-box component --- packages/@react-spectrum/s2/src/SelectBox.tsx | 308 ++++++++++++++++++ .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 216 ++++++++++++ packages/@react-spectrum/s2/src/index.ts | 2 + .../s2/stories/SelectBoxGroup.stories.tsx | 65 ++++ 4 files changed, 591 insertions(+) create mode 100644 packages/@react-spectrum/s2/src/SelectBox.tsx create mode 100644 packages/@react-spectrum/s2/src/SelectBoxGroup.tsx create mode 100644 packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx new file mode 100644 index 00000000000..dbbe13c1bc3 --- /dev/null +++ b/packages/@react-spectrum/s2/src/SelectBox.tsx @@ -0,0 +1,308 @@ +/************************************************************************* + * ADOBE CONFIDENTIAL + * ___________________ + * + * Copyright 2024 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. + **************************************************************************/ + +import { + Checkbox as AriaCheckbox, + Radio as AriaRadio, + Provider, + TextContext +} from 'react-aria-components'; +import {Checkbox, IconContext, Radio} from '@react-spectrum/s2'; +import {FocusableRef} from '@react-types/shared'; +import {focusRing, size, style} from '../style' with {type: 'macro'}; +import React, {forwardRef, useRef} from 'react'; + +import {useFocusableRef} from '@react-spectrum/utils'; +import {useSelectBoxGroupProvider} from './SelectBoxGroup'; + +export interface SelectBoxProps { + children?: React.ReactNode, + isDisabled?: boolean, + value: string +} + +const selectBoxStyle = style({ + ...focusRing(), + aspectRatio: { + orientation: { + vertical: 'square' + } + }, + backgroundColor: { + default: 'white', + isDisabled: 'disabled' + }, + borderWidth: 2, + borderStyle: { + default: 'solid', + isDisabled: 'none' + }, + borderColor: { + default: 'gray-25', + isSelected: 'black' + }, + borderRadius: 'lg', + boxShadow: 'elevated', + boxSizing: 'border-box', + color: { + default: 'neutral', + isDisabled: 'disabled' + }, + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + maxHeight: { + orientation: { + horizontal: { + size: { + S: size(72), + M: size(106) + } + }, + vertical: { + size: { + XS: size(168), + S: size(184), + M: size(200), + L: size(216), + XL: size(232) + } + } + } + }, + minHeight: { + orientation: { + horizontal: { + size: { + S: size(72), + M: size(106) + } + }, + vertical: { + size: { + XS: size(100), + S: size(128), + M: size(144), + L: size(160), + XL: size(192) + } + } + } + }, + maxWidth: { + orientation: { + horizontal: { + size: { + S: size(312), + M: size(368) + } + }, + vertical: { + size: { + XS: size(168), + S: size(184), + M: size(200), + L: size(216), + XL: size(232) + } + } + } + }, + minWidth: { + orientation: { + horizontal: { + size: { + S: size(312), + M: size(368) + } + }, + vertical: { + size: { + XS: size(100), + S: size(128), + M: size(144), + L: size(160), + XL: size(192) + } + } + } + }, + outlineColor: { + default: 'focus-ring', + forcedColors: 'Highlight' + }, + padding: { + orientation: { + horizontal: { + default: 16 + } + } + }, + position: 'relative' +}); + +const selectBoxContentStyle = style({ + alignContent: 'center', + alignItems: 'center', + display: 'grid', + gap: { + orientation: { + horizontal: { + size: { + S: 0, + M: size(2) + }, + vertical: size(8) + } + } + }, + gridTemplateAreas: { + orientation: { + horizontal: ['icon label', 'icon description'], + vertical: ['. icon .', '. label .'] + } + }, + gridTemplateColumns: { + orientation: { + horizontal: '48px 1fr' + } + }, + height: 'full', + justifyItems: { + orientation: { + horizontal: 'flex-start', + vertical: 'center' + } + }, + paddingStart: { + orientation: { + horizontal: size(12), + vertical: 0 + } + }, + width: 'auto' +}); + +const selectBoxIconStyle = style({ + color: { + default: 'red-600', + isDisabled: 'disabled' + }, + gridArea: 'icon', + marginBottom: { + orientation: { + horizontal: 0, + vertical: 8 + } + }, + flexShrink: 0 +}); + +const selectBoxLabelStyle = style({ + gridArea: 'label', + color: { + default: 'neutral', + isDisabled: 'disabled' + }, + fontSize: { + size: { + XS: 'body-sm', + M: 'body-lg', + L: 'body-xl', + XL: 'body-2xl' + } + } +}); + +const selectorStyle = style({ + display: 'block', + position: 'absolute', + top: { + orientation: { + vertical: 16, + horizontal: '50%' + } + }, + right: 16, + visibility: { + default: 'hidden', + isHovered: 'visible', + isSelected: 'visible' + } +}); + +const SelectBox = (props: SelectBoxProps, ref: FocusableRef) => { + const {orientation, selectionMode, size} = useSelectBoxGroupProvider(); + const AriaSelector = selectionMode === 'single' ? AriaRadio : AriaCheckbox; + const Selector = selectionMode === 'single' ? Radio : Checkbox; + const domRef = useFocusableRef(ref); + const inputRef = useRef(null); + + return ( + selectBoxStyle({...renderProps, orientation, size})} + inputRef={inputRef} + ref={domRef} + style={{display: 'flex'}} + value={props.value} + isDisabled={props.isDisabled}> + {renderProps => ( + + + + {props.children} + + + )} + + ); +}; + +const _SelectBox = forwardRef(SelectBox); +_SelectBox.displayName = 'SelectBox'; +export {_SelectBox as SelectBox}; diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx new file mode 100644 index 00000000000..1f2fb8f922f --- /dev/null +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -0,0 +1,216 @@ +/************************************************************************* + * ADOBE CONFIDENTIAL + * ___________________ + * + * Copyright 2024 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. + **************************************************************************/ + +import {CheckboxGroup, Label, Provider, RadioGroup} from 'react-aria-components'; +import {IconContext, TextContext} from '@react-spectrum/s2'; +import React, { + ForwardedRef, + forwardRef, + ReactNode, + useContext, + useEffect, + useMemo, + useState +} from 'react'; +import {style} from '../style' with {type: 'macro'}; + +/** + * Ensures the return value is a string. + * @param { string | string[] | undefined } value Possible options for selection. + * @returns { string } + */ +function unwrapValue(value: string | string[] | undefined): string { + if (Array.isArray(value)) { + return value[0]; + } + return value; +} + +/** + * Ensures the return value is an array or undefined. + * @param {string | string[] | undefined} value Possible options for selection. + * @returns { [] | undefined } + */ +function ensureArray(value: string | string[]): string[] { + if (Array.isArray(value)) { + return value; + } + return value ? [value] : []; +} + +export {unwrapValue, ensureArray}; + +export type SelectBoxValueType = string | string[]; +export interface SelectBoxGroupProps { + children?: ReactNode, + defaultValue?: SelectBoxValueType, + label?: ReactNode, + isDisabled?: boolean, + isRequired?: boolean, + onSelectionChange: (val: SelectBoxValueType) => void, + orientation?: 'horizontal' | 'vertical', + selectionMode?: 'single' | 'multiple', + size?: 'XS' | 'S' | 'M' | 'L' | 'XL', + value?: SelectBoxValueType +} + +export interface SelectorGroupProps { + children: ReactNode, + className: string, + defaultValue?: SelectBoxValueType, + isDisabled?: boolean, + isRequired?: boolean, + onChange: (val: SelectBoxValueType) => void, + selectionMode: 'single' | 'multiple', + value?: SelectBoxValueType +} +export interface SelectBoxProps { + value: string, + children?: ReactNode, + isDisabled?: boolean +} + +interface SelectBoxGroupContext { + orientation?: 'horizontal' | 'vertical', + selectedValue?: SelectBoxValueType, + selectionMode?: 'single' | 'multiple', + validationState?: 'valid' | 'invalid', + value?: SelectBoxValueType, + size: 'XS' | 'S' | 'M' | 'L' | 'XL' +} + +export const SelectBoxContext = React.createContext({ + value: undefined, + size: 'M', + orientation: 'vertical' +}); + +export function useSelectBoxGroupProvider() { + return useContext(SelectBoxContext); +} + +const SelectorGroup = forwardRef(function SelectorGroupComponent( + { + children, + className, + defaultValue, + isDisabled, + isRequired, + onChange, + selectionMode, + value + }: SelectorGroupProps, + ref: ForwardedRef +) { + const props = { + isRequired, + isDisabled, + className, + children, + onChange, + ref + }; + + return selectionMode === 'single' ? ( + + ) : ( + + ); +}); + +function SelectBoxGroup( + props: SelectBoxGroupProps, + ref: ForwardedRef +): React.ReactElement { + const { + children, + defaultValue, + isDisabled = false, + isRequired = false, + label, + onSelectionChange, + orientation = 'vertical', + selectionMode = 'multiple', + size = 'M', + value: valueProp + } = props; + + const [value, setValue] = useState(defaultValue || valueProp); + + useEffect(() => { + if (value !== undefined) { + onSelectionChange(value); + } + }, [onSelectionChange, value]); + + const selectBoxContextValue = useMemo( + () => ({ + orientation, + selectionMode, + selectedValue: value, + size: size, + value + }), + [orientation, selectionMode, size, value] + ); + + // When one box grows, the rest should grow, too. + // setting autoRows to 1fr so that different rows split the space evenly + return ( + + + + + +
+ + {children} + +
+ + + ); +} + +const _SelectBoxGroup = forwardRef(SelectBoxGroup); +export {_SelectBoxGroup as SelectBoxGroup}; diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index c13c5a51afe..e3f33577aaf 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -57,6 +57,8 @@ export {Radio} from './Radio'; export {RadioGroup, RadioGroupContext} from './RadioGroup'; export {RangeSlider, RangeSliderContext} from './RangeSlider'; export {SearchField, SearchFieldContext} from './SearchField'; +export {SelectBox} from './SelectBox'; +export {SelectBoxGroup} from './SelectBoxGroup'; export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl'; export {Slider, SliderContext} from './Slider'; export {Skeleton, useIsSkeleton} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx new file mode 100644 index 00000000000..6f719bf01de --- /dev/null +++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx @@ -0,0 +1,65 @@ +/************************************************************************* + * ADOBE CONFIDENTIAL + * ___________________ + * + * Copyright 2024 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. + **************************************************************************/ + +import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg'; +import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg'; +import type {Meta, StoryObj} from '@storybook/react'; +import {SelectBox, SelectBoxGroup, Text} from '../src'; + +const meta: Meta = { + component: SelectBoxGroup, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'], + argTypes: { + onSelectionChange: {table: {category: 'Events'}}, + orientation: { + control: 'radio', + options: ['horizontal', 'vertical'] + }, + selectionMode: { + control: 'radio', + options: ['single', 'multiple'] + } + }, + title: 'SelectBoxGroup' +}; + +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + render(args) { + return ( + + + + Bells + + + + Heart + + + ); + }, + args: { + label: 'Select an icon' + } +}; From 154722e89ca36d642beef911fd8f097ce44579ae Mon Sep 17 00:00:00 2001 From: Dan Grossen Date: Tue, 29 Oct 2024 15:36:48 -0600 Subject: [PATCH 2/7] fix lint errors; align types with other components --- packages/@react-spectrum/s2/src/SelectBox.tsx | 11 ++-- .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 61 ++++++------------- .../s2/stories/SelectBoxGroup.stories.tsx | 2 +- 3 files changed, 25 insertions(+), 49 deletions(-) diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx index dbbe13c1bc3..e7e69cc2b80 100644 --- a/packages/@react-spectrum/s2/src/SelectBox.tsx +++ b/packages/@react-spectrum/s2/src/SelectBox.tsx @@ -18,20 +18,21 @@ import { Checkbox as AriaCheckbox, Radio as AriaRadio, + GridListItemProps, Provider, TextContext } from 'react-aria-components'; import {Checkbox, IconContext, Radio} from '@react-spectrum/s2'; import {FocusableRef} from '@react-types/shared'; import {focusRing, size, style} from '../style' with {type: 'macro'}; -import React, {forwardRef, useRef} from 'react'; +import React, {forwardRef, ReactNode, useRef} from 'react'; +import {StyleProps} from './style-utils' with {type: 'macro'}; import {useFocusableRef} from '@react-spectrum/utils'; import {useSelectBoxGroupProvider} from './SelectBoxGroup'; -export interface SelectBoxProps { - children?: React.ReactNode, - isDisabled?: boolean, +export interface SelectBoxProps extends Omit, StyleProps { + children: ReactNode | ((renderProps: SelectBoxProps) => ReactNode), value: string } @@ -295,7 +296,7 @@ const SelectBox = (props: SelectBoxProps, ref: FocusableRef) = } ] ]}> - {props.children} + {typeof props.children === 'function' ? props.children(renderProps) : props.children} )} diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index 1f2fb8f922f..caa83433825 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -15,8 +15,9 @@ * from Adobe. **************************************************************************/ -import {CheckboxGroup, Label, Provider, RadioGroup} from 'react-aria-components'; +import {CheckboxGroup, CheckboxGroupProps, GridListProps, Label, Provider, RadioGroup, RadioGroupProps, SelectionMode} from 'react-aria-components'; import {IconContext, TextContext} from '@react-spectrum/s2'; +import {Orientation} from 'react-aria'; import React, { ForwardedRef, forwardRef, @@ -27,6 +28,8 @@ import React, { useState } from 'react'; import {style} from '../style' with {type: 'macro'}; +import {UnsafeStyles} from './style-utils' with {type: 'macro'}; +import {ValueBase} from '@react-types/shared'; /** * Ensures the return value is a string. @@ -54,47 +57,19 @@ function ensureArray(value: string | string[]): string[] { export {unwrapValue, ensureArray}; -export type SelectBoxValueType = string | string[]; -export interface SelectBoxGroupProps { +export interface SelectBoxGroupProps extends Omit, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase { children?: ReactNode, - defaultValue?: SelectBoxValueType, label?: ReactNode, isDisabled?: boolean, isRequired?: boolean, - onSelectionChange: (val: SelectBoxValueType) => void, - orientation?: 'horizontal' | 'vertical', - selectionMode?: 'single' | 'multiple', - size?: 'XS' | 'S' | 'M' | 'L' | 'XL', - value?: SelectBoxValueType + onChange?: (value: string | string[]) => void, + orientation?: Orientation, + size?: 'XS' | 'S' | 'M' | 'L' | 'XL' } -export interface SelectorGroupProps { - children: ReactNode, - className: string, - defaultValue?: SelectBoxValueType, - isDisabled?: boolean, - isRequired?: boolean, - onChange: (val: SelectBoxValueType) => void, - selectionMode: 'single' | 'multiple', - value?: SelectBoxValueType -} -export interface SelectBoxProps { - value: string, - children?: ReactNode, - isDisabled?: boolean -} - -interface SelectBoxGroupContext { - orientation?: 'horizontal' | 'vertical', - selectedValue?: SelectBoxValueType, - selectionMode?: 'single' | 'multiple', - validationState?: 'valid' | 'invalid', - value?: SelectBoxValueType, - size: 'XS' | 'S' | 'M' | 'L' | 'XL' -} +export type SelectorGroupProps = (CheckboxGroupProps | RadioGroupProps) & { selectionMode: SelectionMode }; -export const SelectBoxContext = React.createContext({ - value: undefined, +export const SelectBoxContext = React.createContext>({ size: 'M', orientation: 'vertical' }); @@ -126,14 +101,14 @@ const SelectorGroup = forwardRef(function SelectorGroupComponent( }; return selectionMode === 'single' ? ( - + ) : ( - + ); }); -function SelectBoxGroup( - props: SelectBoxGroupProps, +function SelectBoxGroup( + props: SelectBoxGroupProps, ref: ForwardedRef ): React.ReactElement { const { @@ -142,7 +117,7 @@ function SelectBoxGroup( isDisabled = false, isRequired = false, label, - onSelectionChange, + onChange, orientation = 'vertical', selectionMode = 'multiple', size = 'M', @@ -152,10 +127,10 @@ function SelectBoxGroup( const [value, setValue] = useState(defaultValue || valueProp); useEffect(() => { - if (value !== undefined) { - onSelectionChange(value); + if (value !== undefined && onChange) { + onChange(value); } - }, [onSelectionChange, value]); + }, [onChange, value]); const selectBoxContextValue = useMemo( () => ({ diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx index 6f719bf01de..968698ac39b 100644 --- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx @@ -27,7 +27,7 @@ const meta: Meta = { }, tags: ['autodocs'], argTypes: { - onSelectionChange: {table: {category: 'Events'}}, + onChange: {table: {category: 'Events'}}, orientation: { control: 'radio', options: ['horizontal', 'vertical'] From 4dd67502aace8a71b554243a1826cb28fd570975 Mon Sep 17 00:00:00 2001 From: Dan Grossen Date: Tue, 29 Oct 2024 16:09:56 -0600 Subject: [PATCH 3/7] default to array of strings for value --- .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 34 ++++++------------- 1 file changed, 10 insertions(+), 24 deletions(-) diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index caa83433825..9d736eb9018 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -33,41 +33,27 @@ import {ValueBase} from '@react-types/shared'; /** * Ensures the return value is a string. - * @param { string | string[] | undefined } value Possible options for selection. + * @param { string[]} value Possible options for selection. * @returns { string } */ -function unwrapValue(value: string | string[] | undefined): string { +function unwrapValue(value: string[]): string { if (Array.isArray(value)) { return value[0]; } return value; } -/** - * Ensures the return value is an array or undefined. - * @param {string | string[] | undefined} value Possible options for selection. - * @returns { [] | undefined } - */ -function ensureArray(value: string | string[]): string[] { - if (Array.isArray(value)) { - return value; - } - return value ? [value] : []; -} - -export {unwrapValue, ensureArray}; - -export interface SelectBoxGroupProps extends Omit, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase { +export interface SelectBoxGroupProps extends Omit, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase { children?: ReactNode, label?: ReactNode, isDisabled?: boolean, isRequired?: boolean, - onChange?: (value: string | string[]) => void, + onChange?: (value: string[]) => void, orientation?: Orientation, size?: 'XS' | 'S' | 'M' | 'L' | 'XL' } -export type SelectorGroupProps = (CheckboxGroupProps | RadioGroupProps) & { selectionMode: SelectionMode }; +export type SelectorGroupProps = (CheckboxGroupProps | Omit) & { defaultValue?: string[], selectionMode: SelectionMode, value?: string[] }; export const SelectBoxContext = React.createContext>({ size: 'M', @@ -101,9 +87,9 @@ const SelectorGroup = forwardRef(function SelectorGroupComponent( }; return selectionMode === 'single' ? ( - + ) : ( - + ); }); @@ -124,7 +110,7 @@ function SelectBoxGroup( value: valueProp } = props; - const [value, setValue] = useState(defaultValue || valueProp); + const [value, setValue] = useState(defaultValue || valueProp); useEffect(() => { if (value !== undefined && onChange) { @@ -148,13 +134,13 @@ function SelectBoxGroup( return ( + value={value}> Date: Tue, 29 Oct 2024 16:24:57 -0600 Subject: [PATCH 4/7] fix broken dependencies --- packages/@react-spectrum/s2/src/SelectBox.tsx | 5 +++-- packages/@react-spectrum/s2/src/SelectBoxGroup.tsx | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx index e7e69cc2b80..0d4ada8783f 100644 --- a/packages/@react-spectrum/s2/src/SelectBox.tsx +++ b/packages/@react-spectrum/s2/src/SelectBox.tsx @@ -22,12 +22,13 @@ import { Provider, TextContext } from 'react-aria-components'; -import {Checkbox, IconContext, Radio} from '@react-spectrum/s2'; +import {Checkbox} from './Checkbox'; import {FocusableRef} from '@react-types/shared'; import {focusRing, size, style} from '../style' with {type: 'macro'}; +import {IconContext} from './Icon'; +import {Radio} from './Radio'; import React, {forwardRef, ReactNode, useRef} from 'react'; import {StyleProps} from './style-utils' with {type: 'macro'}; - import {useFocusableRef} from '@react-spectrum/utils'; import {useSelectBoxGroupProvider} from './SelectBoxGroup'; diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index 9d736eb9018..ed1d16951a6 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -16,7 +16,7 @@ **************************************************************************/ import {CheckboxGroup, CheckboxGroupProps, GridListProps, Label, Provider, RadioGroup, RadioGroupProps, SelectionMode} from 'react-aria-components'; -import {IconContext, TextContext} from '@react-spectrum/s2'; +import {IconContext} from './Icon'; import {Orientation} from 'react-aria'; import React, { ForwardedRef, @@ -28,6 +28,7 @@ import React, { useState } from 'react'; import {style} from '../style' with {type: 'macro'}; +import {TextContext} from './Content'; import {UnsafeStyles} from './style-utils' with {type: 'macro'}; import {ValueBase} from '@react-types/shared'; From e3c516ab5b10fcc94811c43c43c3b8c24667fd20 Mon Sep 17 00:00:00 2001 From: Dan Grossen Date: Wed, 30 Oct 2024 10:18:25 -0600 Subject: [PATCH 5/7] changes based on PR feedback --- packages/@react-spectrum/s2/src/SelectBox.tsx | 89 +++++++++++++------ .../@react-spectrum/s2/src/SelectBoxGroup.tsx | 27 +++--- 2 files changed, 71 insertions(+), 45 deletions(-) diff --git a/packages/@react-spectrum/s2/src/SelectBox.tsx b/packages/@react-spectrum/s2/src/SelectBox.tsx index 0d4ada8783f..4ac28f6fcf2 100644 --- a/packages/@react-spectrum/s2/src/SelectBox.tsx +++ b/packages/@react-spectrum/s2/src/SelectBox.tsx @@ -1,19 +1,15 @@ -/************************************************************************* - * ADOBE CONFIDENTIAL - * ___________________ +/* + * Copyright 2024 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 2024 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 { Checkbox as AriaCheckbox, @@ -71,8 +67,11 @@ const selectBoxStyle = style({ orientation: { horizontal: { size: { - S: size(72), - M: size(106) + XS: size(74), + S: size(90), + M: size(106), + L: size(122), + XL: size(138) } }, vertical: { @@ -90,8 +89,11 @@ const selectBoxStyle = style({ orientation: { horizontal: { size: { - S: size(72), - M: size(106) + XS: size(74), + S: size(90), + M: size(106), + L: size(122), + XL: size(138) } }, vertical: { @@ -109,8 +111,11 @@ const selectBoxStyle = style({ orientation: { horizontal: { size: { + XS: 192, S: size(312), - M: size(368) + M: size(368), + L: size(424), + XL: size(480) } }, vertical: { @@ -128,8 +133,11 @@ const selectBoxStyle = style({ orientation: { horizontal: { size: { + XS: 256, S: size(312), - M: size(368) + M: size(368), + L: size(424), + XL: size(480) } }, vertical: { @@ -150,7 +158,13 @@ const selectBoxStyle = style({ padding: { orientation: { horizontal: { - default: 16 + size: { + XS: 8, + S: 12, + M: 16, + L: 20, + XL: 24 + } } } }, @@ -180,7 +194,15 @@ const selectBoxContentStyle = style({ }, gridTemplateColumns: { orientation: { - horizontal: '48px 1fr' + horizontal: { + size: { + XS: ['36px', '1fr'], + S: ['42px', '1fr'], + M: ['48px', '1fr'], + L: ['54px', '1fr'], + XL: ['60px', '1fr'] + } + } } }, height: 'full', @@ -192,7 +214,15 @@ const selectBoxContentStyle = style({ }, paddingStart: { orientation: { - horizontal: size(12), + horizontal: { + size: { + XS: 4, + S: 8, + M: 12, + L: 16, + XL: 20 + } + }, vertical: 0 } }, @@ -200,9 +230,9 @@ const selectBoxContentStyle = style({ }); const selectBoxIconStyle = style({ - color: { - default: 'red-600', - isDisabled: 'disabled' + fill: { + default: 'currentColor', + isDisabled: 'gray-400' }, gridArea: 'icon', marginBottom: { @@ -253,13 +283,14 @@ const SelectBox = (props: SelectBoxProps, ref: FocusableRef) = const Selector = selectionMode === 'single' ? Radio : Checkbox; const domRef = useFocusableRef(ref); const inputRef = useRef(null); + const {UNSAFE_className, UNSAFE_style} = props; return ( selectBoxStyle({...renderProps, orientation, size})} + className={renderProps => UNSAFE_className + selectBoxStyle({...renderProps, orientation, size})} inputRef={inputRef} ref={domRef} - style={{display: 'flex'}} + style={UNSAFE_style} value={props.value} isDisabled={props.isDisabled}> {renderProps => ( diff --git a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx index ed1d16951a6..7793bf8e119 100644 --- a/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx +++ b/packages/@react-spectrum/s2/src/SelectBoxGroup.tsx @@ -1,19 +1,14 @@ -/************************************************************************* - * ADOBE CONFIDENTIAL - * ___________________ +/* + * Copyright 2024 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 2024 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 {CheckboxGroup, CheckboxGroupProps, GridListProps, Label, Provider, RadioGroup, RadioGroupProps, SelectionMode} from 'react-aria-components'; import {IconContext} from './Icon'; @@ -44,7 +39,7 @@ function unwrapValue(value: string[]): string { return value; } -export interface SelectBoxGroupProps extends Omit, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase { +export interface SelectBoxGroupProps extends Omit, 'dragAndDropHooks' | 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'onSelectionChange' | 'className' | 'style'>, UnsafeStyles, ValueBase { children?: ReactNode, label?: ReactNode, isDisabled?: boolean, From a374a3e433e66b60c2fb66325c33b5c567619326 Mon Sep 17 00:00:00 2001 From: GitHub Date: Mon, 4 Nov 2024 13:48:21 -0600 Subject: [PATCH 6/7] prep for merge --- packages/@react-spectrum/s2/src/index.ts | 2 -- .../@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx | 4 +++- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/@react-spectrum/s2/src/index.ts b/packages/@react-spectrum/s2/src/index.ts index e3f33577aaf..c13c5a51afe 100644 --- a/packages/@react-spectrum/s2/src/index.ts +++ b/packages/@react-spectrum/s2/src/index.ts @@ -57,8 +57,6 @@ export {Radio} from './Radio'; export {RadioGroup, RadioGroupContext} from './RadioGroup'; export {RangeSlider, RangeSliderContext} from './RangeSlider'; export {SearchField, SearchFieldContext} from './SearchField'; -export {SelectBox} from './SelectBox'; -export {SelectBoxGroup} from './SelectBoxGroup'; export {SegmentedControl, SegmentedControlItem, SegmentedControlContext} from './SegmentedControl'; export {Slider, SliderContext} from './Slider'; export {Skeleton, useIsSkeleton} from './Skeleton'; diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx index 968698ac39b..502ab1b85a3 100644 --- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx @@ -18,7 +18,9 @@ import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg'; import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; -import {SelectBox, SelectBoxGroup, Text} from '../src'; +import {SelectBox} from '../src/SelectBox'; +import {SelectBoxGroup} from '../src/SelectBoxGroup' +import {Text} from '../src'; const meta: Meta = { component: SelectBoxGroup, From fb1832cc8dee7cc83702dc1ddbe2226ab0b304ac Mon Sep 17 00:00:00 2001 From: Robert Snow Date: Mon, 4 Nov 2024 13:55:36 -0600 Subject: [PATCH 7/7] Update packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx --- packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx index 502ab1b85a3..9f18ff7e7d7 100644 --- a/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx +++ b/packages/@react-spectrum/s2/stories/SelectBoxGroup.stories.tsx @@ -19,7 +19,7 @@ import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg'; import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg'; import type {Meta, StoryObj} from '@storybook/react'; import {SelectBox} from '../src/SelectBox'; -import {SelectBoxGroup} from '../src/SelectBoxGroup' +import {SelectBoxGroup} from '../src/SelectBoxGroup'; import {Text} from '../src'; const meta: Meta = {