From b56b9cf9dae1f92a574acd24c6b51bdd24cbbe63 Mon Sep 17 00:00:00 2001 From: viraj-10 Date: Tue, 16 Jul 2024 17:19:11 +0530 Subject: [PATCH] chore: @gluestack-ui/button version bump to 1.0.7 --- example/storybook-nativewind/package.json | 2 +- .../nativewind/button/index.tsx | 92 ++++++----- packages/config/package.json | 6 +- packages/themed/CHANGELOG.md | 7 + packages/themed/package.json | 4 +- packages/unstyled/button/CHANGELOG.md | 6 + packages/unstyled/button/package.json | 2 +- packages/unstyled/button/src/Button.tsx | 144 ++++++++++-------- packages/unstyled/button/src/ButtonIcon.tsx | 17 ++- .../unstyled/button/src/ButtonSpinner.tsx | 17 ++- packages/unstyled/button/src/ButtonText.tsx | 22 ++- packages/unstyled/button/src/Context.tsx | 3 + 12 files changed, 209 insertions(+), 113 deletions(-) create mode 100644 packages/unstyled/button/src/Context.tsx diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json index 121ffe2c38..96df0d548b 100644 --- a/example/storybook-nativewind/package.json +++ b/example/storybook-nativewind/package.json @@ -32,7 +32,7 @@ "@gluestack-style/animation-resolver": "^1.0.4", "@gluestack-style/react": "^1.0.57", "@gluestack-ui/config": "^1.1.19", - "@gluestack-ui/themed": "^1.1.39", + "@gluestack-ui/themed": "^1.1.40", "@gluestack/design-system": "^0.5.36", "@gorhom/bottom-sheet": "^5.0.0-alpha.10", "@legendapp/motion": "^2.2.0", diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx index 646501d04e..9b9ac27339 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx @@ -81,7 +81,10 @@ const UIButton = createButton({ Text, Group: View, Spinner: ActivityIndicator, - Icon: Platform.OS === 'web' ? PrimitiveIcon : withStates(PrimitiveIcon), + Icon: + Platform.OS === 'web' + ? withStates(PrimitiveIcon) + : withStates(PrimitiveIcon), }); cssInterop(UIButton, { className: 'style' }); @@ -90,7 +93,7 @@ cssInterop(UIButton.Group, { className: 'style' }); cssInterop(UIButton.Spinner, { className: { target: 'style', nativeStyleToProp: { color: true } }, }); -cssInterop(UIButton.Icon, { +cssInterop(PrimitiveIcon, { className: { target: 'style', nativeStyleToProp: { @@ -109,19 +112,20 @@ const buttonStyle = tva({ variants: { action: { primary: - 'bg-primary-500 hover:bg-primary-600 active:bg-primary-700 border-primary-300 hover:border-primary-400 active:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info', + 'bg-primary-500 data-[hover=true]:bg-primary-600 data-[active=true]:bg-primary-700 border-primary-300 data-[hover=true]:border-primary-400 data-[active=true]:border-primary-500 data-[focus-visible=true]:web:ring-indicator-info', secondary: - 'bg-secondary-500 border-secondary-300 hover:bg-secondary-600 hover:border-secondary-400 active:bg-secondary-700 active:border-secondary-500 data-[focus-visible=true]:web:ring-indicator-info', + 'bg-secondary-500 border-secondary-300 data-[hover=true]:bg-secondary-600 data-[hover=true]:border-secondary-400 data-[active=true]:bg-secondary-700 data-[active=true]:border-secondary-500 data-[focus-visible=true]:web:ring-indicator-info', positive: - 'bg-success-500 border-success-300 hover:bg-success-600 hover:border-success-400 active:bg-success-700 active:border-success-500 data-[focus-visible=true]:web:ring-indicator-info', + 'bg-success-500 border-success-300 data-[hover=true]:bg-success-600 data-[hover=true]:border-success-400 data-[active=true]:bg-success-700 data-[active=true]:border-success-500 data-[focus-visible=true]:web:ring-indicator-info', negative: - 'bg-error-500 border-error-300 hover:bg-error-600 hover:border-error-400 active:bg-error-700 active:border-error-500 data-[focus-visible=true]:web:ring-indicator-info', - default: 'bg-transparent hover:bg-background-50 active:bg-transparent', + 'bg-error-500 border-error-300 data-[hover=true]:bg-error-600 data-[hover=true]:border-error-400 data-[active=true]:bg-error-700 data-[active=true]:border-error-500 data-[focus-visible=true]:web:ring-indicator-info', + default: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', }, variant: { link: 'px-0', outline: - 'bg-transparent border hover:bg-background-50 active:bg-transparent', + 'bg-transparent border data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', solid: '', }, @@ -137,42 +141,50 @@ const buttonStyle = tva({ { action: 'primary', variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', }, { action: 'secondary', variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', }, { action: 'positive', variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', }, { action: 'negative', variant: 'link', - class: 'px-0 bg-transparent hover:bg-transparent active:bg-transparent', + class: + 'px-0 bg-transparent data-[hover=true]:bg-transparent data-[active=true]:bg-transparent', }, { action: 'primary', variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', }, { action: 'secondary', variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', }, { action: 'positive', variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', }, { action: 'negative', variant: 'outline', - class: 'bg-transparent hover:bg-background-50 active:bg-transparent', + class: + 'bg-transparent data-[hover=true]:bg-background-50 data-[active=true]:bg-transparent', }, ], }); @@ -182,19 +194,19 @@ const buttonTextStyle = tva({ parentVariants: { action: { primary: - 'text-primary-600 group-hover/button:text-primary-600 group-active/button:text-primary-700', + 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700', secondary: - 'text-secondary-600 group-hover/button:text-secondary-600 group-active/button:text-secondary-700', + 'text-secondary-600 data-[hover=true]:text-secondary-600 data-[active=true]:text-secondary-700', positive: - 'text-success-600 group-hover/button:text-success-600 group-active/button:text-success-700', + 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700', negative: - 'text-error-600 group-hover/button:text-error-600 group-active/button:text-error-700', + 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700', }, variant: { - link: 'group-hover/button:underline group-active/button:underline', + link: 'data-[hover=true]:underline data-[active=true]:underline', outline: '', solid: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, size: { xs: 'text-xs', @@ -209,49 +221,49 @@ const buttonTextStyle = tva({ variant: 'solid', action: 'primary', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'secondary', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'positive', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'negative', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'outline', action: 'primary', class: - 'text-primary-500 group-hover/button:text-primary-500 group-active/button:text-primary-500', + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', }, { variant: 'outline', action: 'secondary', class: - 'text-primary-500 group-hover/button:text-primary-500 group-active/button:text-primary-500', + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', }, { variant: 'outline', action: 'positive', class: - 'text-primary-500 group-hover/button:text-primary-500 group-active/button:text-primary-500', + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', }, { variant: 'outline', action: 'negative', class: - 'text-primary-500 group-hover/button:text-primary-500 group-active/button:text-primary-500', + 'text-primary-500 data-[hover=true]:text-primary-500 data-[active=true]:text-primary-500', }, ], }); @@ -260,10 +272,10 @@ const buttonIconStyle = tva({ base: 'fill-none', parentVariants: { variant: { - link: 'group-hover/button:underline group-active/button:underline', + link: 'data-[hover=true]:underline data-[active=true]:underline', outline: '', solid: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, size: { xs: 'h-3.5 w-3.5', @@ -274,14 +286,14 @@ const buttonIconStyle = tva({ }, action: { primary: - 'text-primary-600 group-hover/button:text-primary-600 group-active/button:text-primary-700', + 'text-primary-600 data-[hover=true]:text-primary-600 data-[active=true]:text-primary-700', secondary: - 'text-secondary-600 group-hover/button:text-secondary-600 group-active/button:text-secondary-700', + 'text-secondary-600 data-[hover=true]:text-secondary-600 data-[active=true]:text-secondary-700', positive: - 'text-success-600 group-hover/button:text-success-600 group-active/button:text-success-700', + 'text-success-600 data-[hover=true]:text-success-600 data-[active=true]:text-success-700', negative: - 'text-error-600 group-hover/button:text-error-600 group-active/button:text-error-700', + 'text-error-600 data-[hover=true]:text-error-600 data-[active=true]:text-error-700', }, }, parentCompoundVariants: [ @@ -289,25 +301,25 @@ const buttonIconStyle = tva({ variant: 'solid', action: 'primary', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'secondary', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'positive', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, { variant: 'solid', action: 'negative', class: - 'text-typography-0 group-hover/button:text-typography-0 group-active/button:text-typography-0', + 'text-typography-0 data-[hover=true]:text-typography-0 data-[active=true]:text-typography-0', }, ], }); diff --git a/packages/config/package.json b/packages/config/package.json index 0c4bb41255..6a77bf6d01 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -43,7 +43,7 @@ "@gluestack-ui/alert": "0.1.15", "@gluestack-ui/alert-dialog": "0.1.30", "@gluestack-ui/avatar": "0.1.17", - "@gluestack-ui/button": "1.0.6", + "@gluestack-ui/button": "1.0.7", "@gluestack-ui/checkbox": "0.1.30", "@gluestack-ui/divider": "0.1.9", "@gluestack-ui/fab": "0.1.21", @@ -66,14 +66,14 @@ "@gluestack-ui/switch": "0.1.22", "@gluestack-ui/tabs": "0.1.16", "@gluestack-ui/textarea": "0.1.23", - "@gluestack-ui/themed": "1.1.39", + "@gluestack-ui/themed": "1.1.40", "@gluestack-ui/toast": "1.0.7", "@gluestack-ui/tooltip": "0.1.32", "@legendapp/motion": "latest" }, "peerDependencies": { "@gluestack-style/react": ">=1.0.57", - "@gluestack-ui/themed": ">=1.1.39" + "@gluestack-ui/themed": ">=1.1.40" }, "release-it": { "git": { diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md index f1718e81fd..6fc0af471e 100644 --- a/packages/themed/CHANGELOG.md +++ b/packages/themed/CHANGELOG.md @@ -1,5 +1,12 @@ # @gluestack-ui/themed +## 1.1.40 + +### Patch Changes + +- Updated dependencies + - @gluestack-ui/button@1.0.7 + ## 1.1.39 ### Patch Changes diff --git a/packages/themed/package.json b/packages/themed/package.json index 3a787509da..f1c94fb3d3 100644 --- a/packages/themed/package.json +++ b/packages/themed/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-ui/themed", - "version": "1.1.39", + "version": "1.1.40", "main": "build/index.js", "types": "build/index.d.ts", "module": "build/index", @@ -42,7 +42,7 @@ "@gluestack-ui/alert": "0.1.15", "@gluestack-ui/alert-dialog": "0.1.30", "@gluestack-ui/avatar": "0.1.17", - "@gluestack-ui/button": "1.0.6", + "@gluestack-ui/button": "1.0.7", "@gluestack-ui/checkbox": "0.1.30", "@gluestack-ui/divider": "0.1.9", "@gluestack-ui/fab": "0.1.21", diff --git a/packages/unstyled/button/CHANGELOG.md b/packages/unstyled/button/CHANGELOG.md index a1a39f07be..bc7f4cbc9b 100644 --- a/packages/unstyled/button/CHANGELOG.md +++ b/packages/unstyled/button/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/button +## 1.0.7 + +### Patch Changes + +- fix: added datasets to other button components + ## 1.0.6 ### Patch Changes diff --git a/packages/unstyled/button/package.json b/packages/unstyled/button/package.json index 4233bcc8ab..0ba3b3ce25 100644 --- a/packages/unstyled/button/package.json +++ b/packages/unstyled/button/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-ui/button", - "version": "1.0.6", + "version": "1.0.7", "main": "lib/commonjs/index", "module": "lib/module/index", "types": "lib/typescript/index.d.ts", diff --git a/packages/unstyled/button/src/Button.tsx b/packages/unstyled/button/src/Button.tsx index b9e0bb306c..3d94463443 100644 --- a/packages/unstyled/button/src/Button.tsx +++ b/packages/unstyled/button/src/Button.tsx @@ -1,12 +1,11 @@ import { useFocusRing, useFocus } from '@react-native-aria/focus'; -import React, { createContext, forwardRef } from 'react'; +import React, { forwardRef, useMemo } from 'react'; import { composeEventHandlers } from '@gluestack-ui/utils'; import { useHover, usePress } from '@react-native-aria/interactions'; +import { ButtonContext } from './Context'; import type { IButtonProps } from './types'; -export const ButtonContext = createContext({}); - export const Button = (StyledButton: React.ComponentType) => forwardRef( ( @@ -45,66 +44,87 @@ export const Button = (StyledButton: React.ComponentType) => }); const { isFocused, focusProps } = useFocus(); const { isHovered, hoverProps }: any = useHover(); + const contextValue = useMemo(() => { + return { + hover: isHoveredProp || isHovered, + focus: isFocusedProp || isFocused, + active: isPressedProp || isPressed, + disabled: isDisabled, + focusVisible: isFocusVisibleProp || isFocusVisible, + }; + }, [ + isHovered, + isHoveredProp, + isFocused, + isFocusedProp, + isPressed, + isPressedProp, + isDisabled, + isFocusVisible, + isFocusVisibleProp, + ]); return ( - - {typeof children === 'function' - ? children({ - hovered: isHovered, - focused: isFocused, - pressed: isPressed, - disabled: props.disabled ?? undefined, - focusVisible: isFocusVisible, - }) - : children} - + + + {typeof children === 'function' + ? children({ + hovered: isHovered, + focused: isFocused, + pressed: isPressed, + disabled: props.disabled ?? undefined, + focusVisible: isFocusVisible, + }) + : children} + + ); } ); diff --git a/packages/unstyled/button/src/ButtonIcon.tsx b/packages/unstyled/button/src/ButtonIcon.tsx index d0550296ef..129f6f2851 100644 --- a/packages/unstyled/button/src/ButtonIcon.tsx +++ b/packages/unstyled/button/src/ButtonIcon.tsx @@ -1,6 +1,19 @@ import React, { forwardRef } from 'react'; - +import { useButtonContext } from './Context'; export const ButtonIcon = (StyledButtonIcon: any) => forwardRef((props: any, ref?: any) => { - return ; + const { hover, focus, active, disabled, focusVisible } = useButtonContext(); + return ( + + ); }); diff --git a/packages/unstyled/button/src/ButtonSpinner.tsx b/packages/unstyled/button/src/ButtonSpinner.tsx index 1e28c15d32..1effeda18e 100644 --- a/packages/unstyled/button/src/ButtonSpinner.tsx +++ b/packages/unstyled/button/src/ButtonSpinner.tsx @@ -1,13 +1,28 @@ import React, { forwardRef } from 'react'; - +import { useButtonContext } from './Context'; export const ButtonSpinner = (StyledButtonSpinner: any) => forwardRef((props: any, ref?: any) => { + const { hover, focus, active, disabled, focusVisible } = useButtonContext(); return ( ); }); diff --git a/packages/unstyled/button/src/ButtonText.tsx b/packages/unstyled/button/src/ButtonText.tsx index 279733220d..4450cc47f5 100644 --- a/packages/unstyled/button/src/ButtonText.tsx +++ b/packages/unstyled/button/src/ButtonText.tsx @@ -1,9 +1,29 @@ import React, { forwardRef } from 'react'; +import { useButtonContext } from './Context'; export const ButtonText = (StyledButtonText: any) => forwardRef(({ children, ...props }: any, ref?: any) => { + const { hover, focus, active, disabled, focusVisible } = useButtonContext(); + return ( - + {children} ); diff --git a/packages/unstyled/button/src/Context.tsx b/packages/unstyled/button/src/Context.tsx new file mode 100644 index 0000000000..b5d0934020 --- /dev/null +++ b/packages/unstyled/button/src/Context.tsx @@ -0,0 +1,3 @@ +import { createContext, useContext } from 'react'; +export const ButtonContext = createContext({}); +export const useButtonContext = () => useContext(ButtonContext);