Skip to content

fix: documentation select placeholder default #7941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 12, 2025
Merged

Conversation

snowystinger
Copy link
Member

Closes

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@rspbot
Copy link

rspbot commented Mar 17, 2025

@rspbot
Copy link

rspbot commented Mar 17, 2025

@rspbot
Copy link

rspbot commented Mar 17, 2025

yihuiliao
yihuiliao previously approved these changes Mar 18, 2025
LFDanLu
LFDanLu previously approved these changes Apr 11, 2025
export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps {
/**
* Temporary text that occupies the select when it is empty.
* @default 'Select an item' in English
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any particular need to mention "in English" here? Is it to point out that localization will happen automatically aka "Select an item" is only when en-US/english locales? I think it should be fine if omitted but not really bothered either way

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe "Select an item" (localized) ?

@LFDanLu LFDanLu dismissed stale reviews from yihuiliao and themself via c2faf4a April 12, 2025 00:33
@LFDanLu LFDanLu enabled auto-merge April 12, 2025 00:36
@rspbot
Copy link

rspbot commented Apr 12, 2025

@rspbot
Copy link

rspbot commented Apr 12, 2025

## API Changes

react-aria-components

/react-aria-components:Select

 Select <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
-  placeholder?: string
+  placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:SelectProps

 SelectProps <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
-  placeholder?: string
+  placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
     defaultStyle: CSSProperties
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

@react-spectrum/s2

/@react-spectrum/s2:Picker

 Picker <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
-  placeholder?: string
+  placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:PickerProps

 PickerProps <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
-  placeholder?: string
+  placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

@LFDanLu LFDanLu added this pull request to the merge queue Apr 12, 2025
Merged via the queue into main with commit 9723225 Apr 12, 2025
30 checks passed
@LFDanLu LFDanLu deleted the default-select-placeholder branch April 12, 2025 01:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants