Merge pull request #2316 from gluestack/main

Backmerge Main -> Patch
gluestack · Jul 16, 2024 · b7e3261 · b7e3261
2 parents 27a024a + f7fbfba
commit b7e3261
Show file tree

Hide file tree

Showing 12 changed files with 209 additions and 113 deletions.
diff --git 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
@@ -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,40 +286,40 @@ 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: [
     {
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",