Update Chakra UI examples to latest versions. (#23585)

## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. ## Documentation / Examples - [x] Make sure the linting passes
vercel · Apr 17, 2021 · 2e7d405 · 2e7d405
1 parent 9fcfce3
commit 2e7d405
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 17 deletions.
diff --git a/examples/with-chakra-ui-typescript/README.md b/examples/with-chakra-ui-typescript/README.md
@@ -25,3 +25,9 @@ yarn create next-app --example with-chakra-ui-typescript with-chakra-ui-typescri
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).
+
+If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.ts`.
diff --git a/examples/with-chakra-ui-typescript/package.json b/examples/with-chakra-ui-typescript/package.json
@@ -8,20 +8,20 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.5",
-    "@chakra-ui/react": "^1.3.3",
-    "@chakra-ui/theme-tools": "1.0.4",
+    "@chakra-ui/react": "^1.4.2",
+    "@chakra-ui/theme-tools": "1.1.2",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "framer-motion": "^3.5.2",
+    "framer-motion": "^4.0.3",
     "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@types/node": "^14.6.0",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "typescript": "4.0.5"
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "typescript": "4.2.3"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui-typescript/src/components/CTA.tsx b/examples/with-chakra-ui-typescript/src/components/CTA.tsx
@@ -9,7 +9,7 @@ export const CTA = () => (
     bottom="0"
     width="100%"
     maxWidth="48rem"
-    py={2}
+    py={3}
   >
     <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
       <Button width="100%" variant="outline" colorScheme="green">

diff --git a/examples/with-chakra-ui-typescript/src/components/Hero.tsx b/examples/with-chakra-ui-typescript/src/components/Hero.tsx
@@ -1,7 +1,13 @@
 import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }: { title: string }) => (
-  <Flex justifyContent="center" alignItems="center" height="100vh">
+  <Flex
+    justifyContent="center"
+    alignItems="center"
+    height="100vh"
+    bgGradient="linear(to-l, #7928CA, #FF0080)"
+    bgClip="text"
+  >
     <Heading fontSize="6vw">{title}</Heading>
   </Flex>
 )

diff --git a/examples/with-chakra-ui/README.md b/examples/with-chakra-ui/README.md
@@ -21,3 +21,9 @@ yarn create next-app --example with-chakra-ui with-chakra-ui-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Notes
+
+Chakra has supported Gradients and RTL in `v1.1`. To utilize RTL, [add RTL direction and swap](https://chakra-ui.com/docs/features/rtl-support).
+
+If you don't have multi-direction app, you should make `<Html lang="ar" dir="rtl">` inside `_document.js`.
diff --git a/examples/with-chakra-ui/package.json b/examples/with-chakra-ui/package.json
@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "@chakra-ui/icons": "^1.0.0",
-    "@chakra-ui/react": "^1.0.0",
+    "@chakra-ui/react": "^1.4.2",
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "framer-motion": "^2.9.4",
+    "framer-motion": "^4.0.3",
     "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "license": "MIT"
 }
diff --git a/examples/with-chakra-ui/src/components/CTA.js b/examples/with-chakra-ui/src/components/CTA.js
@@ -12,7 +12,7 @@ export const CTA = () => (
     py={2}
   >
     <ChakraLink isExternal href="https://chakra-ui.com" flexGrow={1} mx={2}>
-      <Button width="100%" variant="outline" variantcolor="green">
+      <Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
         chakra-ui
       </Button>
     </ChakraLink>
@@ -23,7 +23,7 @@ export const CTA = () => (
       flexGrow={3}
       mx={2}
     >
-      <Button width="100%" variant="solid" variantcolor="green">
+      <Button width="100%" bgGradient="linear(to-tr, teal.300,yellow.400)">
         View Repo
       </Button>
     </ChakraLink>

diff --git a/examples/with-chakra-ui/src/components/Hero.js b/examples/with-chakra-ui/src/components/Hero.js
@@ -2,7 +2,13 @@ import { Flex, Heading } from '@chakra-ui/react'
 
 export const Hero = ({ title }) => (
   <Flex justifyContent="center" alignItems="center" height="100vh">
-    <Heading fontSize="10vw">{title}</Heading>
+    <Heading
+      fontSize="10vw"
+      bgGradient="linear(to-l, #7928CA, #FF0080)"
+      bgClip="text"
+    >
+      {title}
+    </Heading>
   </Flex>
 )