Merge pull request #403 from vtex-apps/fix/admin-ui-toast-overflow

Fix admin-ui toast overflow

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+
+- Toast overflows the bottom-right conner, making the app unresponsive in that section.
+
 
 ## [4.44.4] - 2021-07-27
 ### Fixed

react/components/TemporaryAlert/index.tsx

@@ -3,7 +3,7 @@ import {
   Alert,
   ThemeProvider,
   createSystem,
-  Box,
+  tag,
   Flex,
   IconNotifications,
   Anchor,
@@ -25,7 +25,7 @@ export function TemporaryAlert() {
 
   return (
     <ThemeProvider system={system}>
-      <Box
+      <tag.div
         csx={{
           padding: 4,
         }}
@@ -56,7 +56,7 @@ export function TemporaryAlert() {
             </Flex>
           </Flex>
         </Alert>
-      </Box>
+      </tag.div>
     </ThemeProvider>
   )
 }

react/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@apollo/react-testing": "^3.1.3",
-    "@vtex/admin-ui": "^0.97.0",
+    "@vtex/admin-ui": "^0.106.2",
     "classnames": "^2.2.6",
     "deep-object-diff": "^1.1.0",
     "draft-js": "^0.10.5",

react/yarn.lock

@@ -972,6 +972,13 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
+  integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
@@ -1654,13 +1661,13 @@
     semver "^6.3.0"
     tsutils "^3.17.1"
 
-"@vtex/admin-core@^0.10.10":
-  version "0.10.10"
-  resolved "https://registry.yarnpkg.com/@vtex/admin-core/-/admin-core-0.10.10.tgz#1d444244e92a7db7a37cbf9d1c76d260357858d1"
-  integrity sha512-9o9wJ9witQNUokX9AxHklZeHZbNq1fliQD74cnCoeF10Tg71oU0RT4640anreYWZl245ljCfqGJl+332GYFrYQ==
+"@vtex/admin-core@^0.10.16":
+  version "0.10.16"
+  resolved "https://registry.yarnpkg.com/@vtex/admin-core/-/admin-core-0.10.16.tgz#1bc9c7f2acfb35414082aa5df1a7c3930da676f0"
+  integrity sha512-C+P/u4WeOGuRaI/qVYT1IF2NU8NFsFhv+iBzloxuWa2EhBJ7j0dG7ZOMVtq4Cf9oClKQAh4+kZL1XxOyJ1SH/g==
   dependencies:
     "@vtex/admin-ui-system" "^0.15.1"
-    "@vtex/admin-ui-theme" "^0.26.2"
+    "@vtex/admin-ui-theme" "^0.26.8"
     deepmerge "^4.2.2"
     focus-visible "^5.1.0"
     react-helmet "6.1.0"
@@ -1680,10 +1687,10 @@
     tiny-invariant "^1.1.0"
     tiny-warning "^1.0.3"
 
-"@vtex/admin-primitives@^0.4.5":
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/@vtex/admin-primitives/-/admin-primitives-0.4.5.tgz#981bcd74dbefcbf09739154e1b5efbbdbd161409"
-  integrity sha512-as7MWbBBwflzsikfluS5PCqvD//ji03NXpliaeTLSP1lU17WQ0ZWys30Q2F8+O3muBFmK6HdxSARtipbDY2lqw==
+"@vtex/admin-primitives@^0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@vtex/admin-primitives/-/admin-primitives-0.4.11.tgz#0723e7f125f5608e2f4810e262ff87c386c2c117"
+  integrity sha512-WEcYyM8zRNp334G+QbvfK59//sa3fZ6blxG488BExiu+tBt/QncivyOLxaWsOkwjCCFErqblbdtUzCHbXea3mQ==
 
 "@vtex/admin-styles@^0.3.0":
   version "0.3.0"
@@ -1695,12 +1702,12 @@
     lodash.merge "^4.6.2"
     tiny-warning "^1.0.3"
 
-"@vtex/admin-ui-icons@^0.11.4":
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/@vtex/admin-ui-icons/-/admin-ui-icons-0.11.4.tgz#19644c3ad6319fe2cc3fbf5107c38d0080ab5033"
-  integrity sha512-s9o7K2tF5+LamP9BBRz7vQvfh3MJD7JLOAuRkLCcGxpT8lXQqeJAio2Dr5q5wiHrMhdPEQ1XOMEkDQIBrB18rQ==
+"@vtex/admin-ui-icons@^0.12.6":
+  version "0.12.6"
+  resolved "https://registry.yarnpkg.com/@vtex/admin-ui-icons/-/admin-ui-icons-0.12.6.tgz#03ee923a0cc81171c5a689bd0dd4a0df722f4159"
+  integrity sha512-Iwj9CK2oh0dsUe4BHY40lSC4mDYnKGteyJwBuPTSJlIImBFp7I69pIRpicdsLJLzpmNT3Wq295ooUbxGXVBTEA==
   dependencies:
-    "@vtex/admin-core" "^0.10.10"
+    "@vtex/admin-core" "^0.10.16"
 
 "@vtex/admin-ui-system@^0.15.1":
   version "0.15.1"
@@ -1718,25 +1725,26 @@
     tiny-invariant "^1.1.0"
     tiny-warning "^1.0.3"
 
-"@vtex/admin-ui-theme@^0.26.2":
-  version "0.26.2"
-  resolved "https://registry.yarnpkg.com/@vtex/admin-ui-theme/-/admin-ui-theme-0.26.2.tgz#1baad21d12b8812a2fcc51cdcfe0b89ea7507ad1"
-  integrity sha512-ANbMQ98YSalpENGYNxJnVJhfWv/2WYXoTNhGJhPSWzXvcDzgJmhknOauPTWBkbgZyKiaz/uImvsRyrSg9F5bVg==
+"@vtex/admin-ui-theme@^0.26.8":
+  version "0.26.8"
+  resolved "https://registry.yarnpkg.com/@vtex/admin-ui-theme/-/admin-ui-theme-0.26.8.tgz#03731bac4d7e22068cf1d381e7c391095965879c"
+  integrity sha512-LGPmwyMJHE9JItLMTfW8hpfHH0lCTQyrQ/QE75WGHTkkgi7hQdkT4tuZjoN+lyA4VLXzqSXzjFYP0k077pi/yw==
   dependencies:
     polished "^4.0.3"
 
-"@vtex/admin-ui@^0.97.0":
-  version "0.97.0"
-  resolved "https://registry.yarnpkg.com/@vtex/admin-ui/-/admin-ui-0.97.0.tgz#a50f3df73f1cb6b6970f74514b8ec4206472c2c9"
-  integrity sha512-9+bYpgzu7qadTAajhrREvSdQmlC3+IBO7lmdDfzny8v7GKkPe5taL5qaYi9vEAd0AJoBSbuTSMMyuu03f4hKsQ==
+"@vtex/admin-ui@^0.106.2":
+  version "0.106.2"
+  resolved "https://registry.yarnpkg.com/@vtex/admin-ui/-/admin-ui-0.106.2.tgz#56a90ca9216b9d69d9eaadb471d1548b18c660b3"
+  integrity sha512-vH/qLzSKClwBYwgROSeCTcWfJvp9b3a4xPMxErfwc4gIOiYZQjCZPqkJbuPd7a896SW/v4wM+TqxYXE89aDbmg==
   dependencies:
     "@emotion/babel-plugin" "^11.2.0"
     "@emotion/css" "^11.1.3"
     "@emotion/react" "^11.1.5"
-    "@vtex/admin-core" "^0.10.10"
+    "@vtex/admin-core" "^0.10.16"
     "@vtex/admin-illustrations" "^0.1.1"
-    "@vtex/admin-primitives" "^0.4.5"
-    "@vtex/admin-ui-icons" "^0.11.4"
+    "@vtex/admin-primitives" "^0.4.11"
+    "@vtex/admin-ui-icons" "^0.12.6"
+    "@vtex/onda-react" "^0.4.3"
     csstype "^3.0.5"
     deepmerge "^4.2.2"
     downshift "^6.0.6"
@@ -1749,6 +1757,7 @@
     reakit-utils "^0.14.3"
     tiny-invariant "^1.1.0"
     tiny-warning "^1.0.3"
+    use-debounce "^7.0.0"
 
 "@vtex/intl-equalizer@^2.3.0":
   version "2.4.2"
@@ -1760,6 +1769,27 @@
     diff "^4.0.1"
     util "^0.12.1"
 
+"@vtex/onda-react@^0.4.3":
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/@vtex/onda-react/-/onda-react-0.4.3.tgz#051dd22fcc7b4c7a979a2479286128663201f176"
+  integrity sha512-/5RK4nRlTWoZrym20xNuM1rrzYf106AWkGpx72V5rUu9XI3LzRurd+GVQ/XZGBo13JB+/1aFD8DM8xCUNNdKZA==
+  dependencies:
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@vtex/onda-util" "^0.1.0-labs.2"
+    react-is "^17.0.2"
+    tiny-invariant "^1.1.0"
+    tiny-warning "^1.0.3"
+
+"@vtex/onda-util@^0.1.0-labs.2":
+  version "0.1.0-labs.2"
+  resolved "https://registry.yarnpkg.com/@vtex/onda-util/-/onda-util-0.1.0-labs.2.tgz#21c06db42ca3900ea47ba585e2c7f6ae91c86b1e"
+  integrity sha512-BvFZ074qcYUEV+ZIFB9Lx+/tGOKIOCDPMMB8IcbaHZIg9ePr/StELoMwHYy3QHn0No1YPBSP9+cMJZifr/C2wA==
+  dependencies:
+    lodash.get "^4.4.2"
+    lodash.merge "^4.6.2"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+
 "@vtex/test-tools@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@vtex/test-tools/-/test-tools-3.0.0.tgz#fbe0d5fa60a750d2098e707535924d1b9e86a35c"
@@ -8392,6 +8422,11 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-debounce@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-7.0.0.tgz#00a67d23d4fe09905e11145a99278da06c01c880"
+  integrity sha512-4fvxEEs7ztdNMh+c497HAgysdq2+Ascem6EaDANGlCIap1JzqfL03Xw8xkYc2lShfXm4uO6PA6V5zcXN7gJdFA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"