Merge pull request #1366 from gluestack/release/@gluestack-ui/themed@…

…1.0.12 Release/@gluestack UI/[email protected]
gluestack · Nov 7, 2023 · ec673ba · ec673ba
2 parents d98b7d3 + 1a08e73
commit ec673ba
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 725 deletions.
diff --git a/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx b/example/storybook/src/styling/utility-and-sx-props/index.stories.mdx
@@ -138,6 +138,10 @@ Let's try to build the same card using **`@gluestack-ui/themed`**. Since it is u
 
 Once this is set up, you can easily apply styles to the layout using shorthands when working with **`@gluestack-ui/themed`** components.
 
+### Basic styling
+
+You can apply aliases and styling props directly to the component.
+
 <AppProvider>
   <CodePreview
     showComponentRenderer={true}
@@ -218,6 +222,87 @@ Once this is set up, you can easily apply styles to the layout using shorthands
 
 The above example demonstrates the usage of utility props along with VStack, HStack components. This approach allows us to style components without using StyleSheet API.
 
+### Complex styling
+
+You can also handle more intricate styling, such as styles for different states, colormode, media queries, and descendants.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <Button
+        size="lg"
+        mb='$4'
+        bg='$green500'
+        $hover-bg='$green600'
+        $active-bg='$green700'
+        $_text-hover-color='$white'
+      >
+        <ButtonText>Button</ButtonText>
+      </Button>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+- To achieve this, you can use the `$` prefix and specify the entire property path, like `$hover-bg` followed by its corresponding value.
+- We provide comprehensive TypeScript support for single-level utility props, including aliases and styles in the format `${states/media/colormode/platform/descendants}-{aliases / style}`.
+- For something like `$hover-sm-bg`, TypeScript suggestions are not available, but you can write props prefixed with `${states/media/colormode/platform/descendants}-*`.
+
+### More utility props
+
+If your component's props become cluttered when using the above utility props, we offer support for an object-based approach to improve code maintainability.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+      <Button
+        size="lg"
+        mb='$4'
+        bg='$green500'
+        $hover={{
+          "bg": '$green600',
+          _text:{
+            color:"$white"
+          }
+        }}
+        $active={{
+          bg: '$green700'
+        }}
+      >
+        <ButtonText>Button</ButtonText>
+      </Button>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Button,
+        ButtonText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+- In this case, you can specify states, colormode, media queries, and descendants in object form, prefixed with `$`. These objects take sx properties as values.
+- We have provided complete TypeScript support for this approach as well.
+
 # SX Prop
 
 gluestack-ui supports the `sx` prop for overriding styles. The `sx` prop enables passing an object supporting tokens, media queries, nesting, and token-aware values to the component.
@@ -240,6 +325,9 @@ sx accepts the same style object as the base style.
                   color:"$white"
                 }
             },
+            ":active": {
+              bg: '$green700'
+            }
         }}
       >
         <ButtonText>Button</ButtonText>

diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @gluestack-ui/themed
 
+## 1.0.12
+
+### Patch Changes
+
+- Added utility props support [PR](https://github.com/gluestack/gluestack-ui/pull/1364)
+
 ## 1.0.11
 
 ### Patch Changes

diff --git a/packages/themed/package.json b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -69,7 +69,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^1.0.11",
+    "@gluestack-style/react": "^1.0.13",
     "@types/react-native": "^0.72.3",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",