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

Published 20 hours ago • verified publisher icon adobe

Enable Alpha in ColorField RSP Component

Open snowystinger opened this issue 3 years ago • 10 comments

Closes

followup to a PR which enabled it in aria https://github.com/adobe/react-spectrum/pull/3228

✅ 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:

snowystinger avatar Jul 12 '22 23:07 snowystinger

Build successful! 🎉

adobe-bot avatar Jul 12 '22 23:07 adobe-bot

Build successful! 🎉

adobe-bot avatar Aug 04 '22 00:08 adobe-bot

Build successful! 🎉

adobe-bot avatar Sep 19 '22 22:09 adobe-bot

Build successful! 🎉

adobe-bot avatar Sep 19 '22 22:09 adobe-bot

Build successful! 🎉

adobe-bot avatar Sep 19 '22 22:09 adobe-bot

Build successful! 🎉

adobe-bot avatar Sep 20 '22 17:09 adobe-bot

Build successful! 🎉

adobe-bot avatar Sep 21 '22 03:09 adobe-bot

Build successful! 🎉

adobe-bot avatar Oct 11 '22 07:10 adobe-bot

Build successful! 🎉

adobe-bot avatar Nov 16 '22 22:11 adobe-bot

API Changes

@react-aria/color

AriaColorFieldProps

 AriaColorFieldProps {
+  allowsAlpha?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   autoFocus?: boolean
   defaultValue?: T
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   name?: string
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   placeholder?: string
   validationState?: ValidationState
   value?: T
 }

it changed:

  • useColorField

@react-spectrum/color

ColorField

 ColorField {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  allowsAlpha?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultValue?: T
   end?: Responsive<DimensionValue>
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isQuiet?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validationState?: ValidationState
   value?: T
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

SpectrumColorFieldProps

 SpectrumColorFieldProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
+  allowsAlpha?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   contextualHelp?: ReactNode
   defaultValue?: T
   end?: Responsive<DimensionValue>
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isQuiet?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   order?: Responsive<number>
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validationState?: ValidationState
   value?: T
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/color

ColorFieldProps

 ColorFieldProps {
+  allowsAlpha?: boolean
   autoFocus?: boolean
   defaultValue?: T
   isDisabled?: boolean
   isReadOnly?: boolean
   label?: ReactNode
   onBlur?: (FocusEvent) => void
   onChange?: (Color | null) => void
   onFocus?: (FocusEvent) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   placeholder?: string
   validationState?: ValidationState
   value?: T
 }

it changed:

  • useColorFieldState

adobe-bot avatar Nov 16 '22 22:11 adobe-bot