feat: add gradient variants to Button #7514

jluyau · 2024-12-12T20:41:04Z

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 · 2024-12-13T18:46:26Z

Build successful! 🎉

snowystinger

Looks like the default button styles were affected
Before

After

snowystinger · 2024-12-17T21:39:50Z

packages/@react-spectrum/s2/src/Button.tsx

@@ -161,13 +178,18 @@ const button = style<ButtonRenderProps & ButtonStyleProps>({
        isDisabled: 'transparent'
      }
    },
+    variant: {


the variant should probably be moved up into the fillStyle with all the other variants

disabled styling is not working

because variant is winning over the fillStyle

devongovett · 2024-12-17T22:04:42Z

packages/@react-spectrum/s2/src/Button.tsx

+      },
+      genai: {
+        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),
+        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])


This should probably also apply in the isFocusVisible and isPressed states.

rspbot · 2024-12-18T02:29:10Z

Build successful! 🎉

rspbot · 2024-12-18T03:43:38Z

Build successful! 🎉

snowystinger

I fixed up HCM and disabled, please test them out some more in case I missed anything

rspbot · 2024-12-18T05:32:47Z

Build successful! 🎉

reidbarber

Looks great!

devongovett

We should probably find a way to make the gradients transition on hover. The other variants smoothly fade between background colors whereas these jump on hover. I think it's possible now with @property. We can do this later. https://dev.to/afif/we-can-finally-animate-css-gradient-kdk

rspbot · 2024-12-19T00:51:16Z

Build successful! 🎉

rspbot · 2024-12-19T00:51:17Z

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:Button

 Button {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
 }

/@react-spectrum/s2:LinkButton

 LinkButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
 }

/@react-spectrum/s2:ButtonProps

 ButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
 }

/@react-spectrum/s2:LinkButtonProps

 LinkButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   staticColor?: 'white' | 'black' | 'auto'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
 }

add gradient variants to Button

cb73402

jluyau changed the title ~~add gradient variants to Button~~ feat: add gradient variants to Button Dec 12, 2024

jluyau added 2 commits December 13, 2024 10:17

fix for gradient isPending, outline, hover

d1fd0f6

revert line

29c28ed

snowystinger reviewed Dec 17, 2024

View reviewed changes

devongovett reviewed Dec 17, 2024

View reviewed changes

jluyau added 3 commits December 17, 2024 16:33

fix fillStyle/backgroundColor, add background for other states

799fcb1

Merge branch 'main' into button-gradient

4423a58

more styling fixes

b2142ad

Merge branch 'main' into button-gradient

d82faeb

Fix disabled and HCM styles

026b056

snowystinger approved these changes Dec 18, 2024

View reviewed changes

reidbarber approved these changes Dec 18, 2024

View reviewed changes

devongovett approved these changes Dec 18, 2024

View reviewed changes

Merge branch 'main' into button-gradient

c593d3f

devongovett added this pull request to the merge queue Dec 19, 2024

Merged via the queue into main with commit 0ab792f Dec 19, 2024
30 checks passed

devongovett deleted the button-gradient branch December 19, 2024 02:13

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add gradient variants to Button #7514

feat: add gradient variants to Button #7514

jluyau commented Dec 12, 2024

rspbot commented Dec 13, 2024

snowystinger left a comment

snowystinger Dec 17, 2024

snowystinger Dec 17, 2024

devongovett Dec 17, 2024

rspbot commented Dec 18, 2024

rspbot commented Dec 18, 2024

snowystinger left a comment

rspbot commented Dec 18, 2024

reidbarber left a comment

devongovett left a comment

rspbot commented Dec 19, 2024

rspbot commented Dec 19, 2024

feat: add gradient variants to Button #7514

feat: add gradient variants to Button #7514

Conversation

jluyau commented Dec 12, 2024

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Dec 13, 2024

snowystinger left a comment

Choose a reason for hiding this comment

snowystinger Dec 17, 2024

Choose a reason for hiding this comment

snowystinger Dec 17, 2024

Choose a reason for hiding this comment

devongovett Dec 17, 2024

Choose a reason for hiding this comment

rspbot commented Dec 18, 2024

rspbot commented Dec 18, 2024

snowystinger left a comment

Choose a reason for hiding this comment

rspbot commented Dec 18, 2024

reidbarber left a comment

Choose a reason for hiding this comment

devongovett left a comment

Choose a reason for hiding this comment

rspbot commented Dec 19, 2024

rspbot commented Dec 19, 2024

@react-spectrum/s2

/@react-spectrum/s2:Button

/@react-spectrum/s2:LinkButton

/@react-spectrum/s2:ButtonProps

/@react-spectrum/s2:LinkButtonProps