react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Published 20 hours ago • verified publisher icon adobe

Segmented control

Open yihuiliao opened this issue 1 year ago • 13 comments

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:

yihuiliao avatar Aug 13 '24 00:08 yihuiliao

Build successful! 🎉

rspbot avatar Aug 14 '24 20:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 18:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 21:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 21:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 21:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 21:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 22:08 rspbot

Build successful! 🎉

rspbot avatar Aug 15 '24 23:08 rspbot

Build successful! 🎉

rspbot avatar Aug 16 '24 19:08 rspbot

Build successful! 🎉

rspbot avatar Aug 16 '24 19:08 rspbot

Build successful! 🎉

rspbot avatar Aug 23 '24 20:08 rspbot

Build successful! 🎉

rspbot avatar Aug 29 '24 00:08 rspbot

Build successful! 🎉

rspbot avatar Aug 29 '24 18:08 rspbot

Build successful! 🎉

rspbot avatar Aug 29 '24 22:08 rspbot

Build successful! 🎉

rspbot avatar Aug 30 '24 18:08 rspbot

Build successful! 🎉

rspbot avatar Aug 30 '24 18:08 rspbot

Not sure what's going on, but there's a wiggle in the animation.

Maybe try transform-origin: left / transform-origin: right ?

reidbarber avatar Sep 04 '24 20:09 reidbarber

Build successful! 🎉

rspbot avatar Sep 17 '24 20:09 rspbot

Build successful! 🎉

rspbot avatar Sep 18 '24 00:09 rspbot

Build successful! 🎉

rspbot avatar Sep 18 '24 22:09 rspbot

Build successful! 🎉

rspbot avatar Sep 19 '24 17:09 rspbot

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:SegmentedControl

+SegmentedControl {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-errormessage?: string
+  aria-label: string
+  aria-labelledby?: string
+  children: ReactNode
+  defaultValue?: string | null
+  id?: string
+  isDisabled?: boolean
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (string) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  slot?: string | null
+  styles?: StylesProp
+  value?: string | null
+}

/@react-spectrum/s2:SegmentedControlItem

+SegmentedControlItem {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children: ReactNode
+  id?: string
+  inputRef?: RefObject<HTMLInputElement | null>
+  isDisabled?: boolean
+  onBlur?: (FocusEvent<Target>) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  slot?: string | null
+  styles?: StylesProp
+  value: string
+}

/@react-spectrum/s2:SegmentedControlContext

+SegmentedControlContext {
+  UNTYPED
+}

/@react-spectrum/s2:SegmentedControlProps

+SegmentedControlProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-errormessage?: string
+  aria-label: string
+  aria-labelledby?: string
+  children: ReactNode
+  defaultValue?: string | null
+  id?: string
+  isDisabled?: boolean
+  onBlur?: (FocusEvent<Target>) => void
+  onChange?: (string) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  slot?: string | null
+  styles?: StylesProp
+  value?: string | null
+}

/@react-spectrum/s2:SegmentedControlItemProps

+SegmentedControlItemProps {
+  UNSAFE_className?: string
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean
+  children: ReactNode
+  id?: string
+  inputRef?: RefObject<HTMLInputElement | null>
+  isDisabled?: boolean
+  onBlur?: (FocusEvent<Target>) => void
+  onFocus?: (FocusEvent<Target>) => void
+  onFocusChange?: (boolean) => void
+  onKeyDown?: (KeyboardEvent) => void
+  onKeyUp?: (KeyboardEvent) => void
+  slot?: string | null
+  styles?: StylesProp
+  value: string
+}

rspbot avatar Sep 19 '24 17:09 rspbot