Additional improvements to React v18 update

package.json

@@ -26,10 +26,12 @@
   },
   "private": true,
   "resolutions": {
-    "react": "16.14.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "**/d3-color": "^3.1.0",
     "**/minimist": "^1.2.8",
-    "**/@types/react": "^16.9.49",
+    "**/@types/react": "^18.2.39",
+    "**/@types/react-dom": "^18.2.17",
     "**/trim": "0.0.3",
     "webpack": "^5.88.2",
     "x-default-browser": "^0.5.2"

web/packages/build/package.json

@@ -43,14 +43,14 @@
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
     "@swc/plugin-styled-components": "^1.5.87",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.6",
-    "@types/jsdom": "^21.1.0",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.10",
+    "@types/jsdom": "^21.1.6",
     "@types/node": "^18.18.5",
-    "@types/react": "^16.8.19",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "^18.2.17",
     "@types/react-router-dom": "^5.1.1",
     "@types/react-transition-group": "^4.4.5",
     "@types/webpack": "^5.28.0",
@@ -79,19 +79,19 @@
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-styled-components": "^7.0.8",
+    "jest-styled-components": "^7.2.0",
     "jsdom": "^21.1.0",
     "jsdom-testing-mocks": "^1.9.0",
     "msw": "^0.47.4",
     "optimist": "^0.6.1",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^16.8.0",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^18.2.0",
     "react-transition-group": "^4.4.2",
     "rollup-plugin-visualizer": "^5.9.0",
-    "styled-components": "5.1.0",
+    "styled-components": "5.3.11",
     "vite": "^4.4.11",
     "vite-tsconfig-paths": "^4.2.1",
     "webpack": "^5.76.2",

web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rendering of Error Cards 1`] = `
-.c2 {
+.c3 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,7 +20,7 @@ exports[`rendering of Error Cards 1`] = `
   color: #000000;
 }
 
-.c2 a {
+.c3 a {
   color: #FFFFFF;
 }
 
@@ -34,12 +34,15 @@ exports[`rendering of Error Cards 1`] = `
   width: 540px;
   color: #FFFFFF;
   background-color: #344179;
+}
+
+.c1 {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
 
-.c1 {
+.c2 {
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 300;
@@ -51,17 +54,17 @@ exports[`rendering of Error Cards 1`] = `
 }
 
 <div
-  class="c0"
+  class="c0 c1"
   color="text.main"
   width="540px"
 >
   <div
-    class="c1"
+    class="c2"
   >
     404 Not Found
   </div>
   <div
-    class="c2"
+    class="c3"
     kind="danger"
   >
     some error message

web/packages/design/src/CardSuccess/__snapshots__/CardSuccess.test.jsx.snap

@@ -10,12 +10,15 @@ exports[`rendering of CardSuccess components 1`] = `
   padding: 48px;
   width: 540px;
   text-align: center;
+}
+
+.c1 {
   box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
   border-radius: 8px;
   background-color: #222C59;
 }
 
-.c1 {
+.c2 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -24,11 +27,11 @@ exports[`rendering of CardSuccess components 1`] = `
 }
 
 <div
-  class="c0"
+  class="c0 c1"
   width="540px"
 >
   <span
-    class="c1 icon icon-circlecheck"
+    class="c2 icon icon-circlecheck"
     color="success"
   >
     <svg

web/packages/design/src/Icon/Icon.tsx

@@ -14,12 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
 import { space, color, borderRadius } from 'design/system';
 
-export function Icon({ size = 'medium', children, ...otherProps }: Props) {
+export function Icon({
+  size = 'medium',
+  children,
+  ...otherProps
+}: PropsWithChildren<Props>) {
   let iconSize = size;
   if (size === 'small') {
     iconSize = 16;

web/packages/design/src/Onboard/__snapshots__/WelcomeWrapper.story.test.tsx.snap

@@ -1,56 +1,70 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`wrapper 1`] = `
-.c5 {
+.c1 {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+.c3 {
+  box-sizing: border-box;
+}
+
+.c6 {
+  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
+  border-radius: 8px;
+  background-color: #222C59;
+}
+
+.c8 {
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
 }
 
-.c8 {
+.c12 {
   color: #009EFF;
   font-weight: normal;
   background: none;
   text-decoration: underline;
   text-transform: none;
 }
 
-.c1 {
-  box-sizing: border-box;
-  height: 100%;
+.c2 {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
 }
 
-.c2 {
-  box-sizing: border-box;
+.c4 {
   display: flex;
   flex-direction: column;
 }
 
-.c7 {
-  box-sizing: border-box;
+.c10 {
   display: flex;
+}
+
+.c11 {
   justify-content: center;
   width: 100%;
   gap: 50px;
 }
 
-.c6 {
+.c9 {
   padding-bottom: 24px;
   width: 100%;
   color: white;
 }
 
-.c9 {
+.c13 {
   color: white;
   text-decoration: none;
 }
 
-.c9:hover,
-.c9:active,
-.c9:focus {
+.c13:hover,
+.c13:active,
+.c13:focus {
   color: rgba(255,255,255,0.54);
 }
 
@@ -82,19 +96,14 @@ exports[`wrapper 1`] = `
   backdrop-filter: blur(17.5px);
 }
 
-.c3 {
-  box-sizing: border-box;
+.c5 {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 24px 0;
 }
 
-.c4 {
-  box-sizing: border-box;
-  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
-  border-radius: 8px;
-  background-color: #222C59;
+.c7 {
   width: 600px;
   padding: 24px;
   text-align: left;
@@ -103,22 +112,22 @@ exports[`wrapper 1`] = `
 }
 
 @media screen and (max-width:800px) {
-  .c7 {
+  .c11 {
     flex-direction: column-reverse;
     text-align: center;
     gap: 10px;
   }
 }
 
 @media screen and (max-width:800px) {
-  .c4 {
+  .c7 {
     width: auto;
     margin: 20px;
   }
 }
 
 @media screen and (max-height:760px) {
-  .c4 {
+  .c7 {
     height: calc(100vh - 250px);
   }
 }
@@ -127,14 +136,14 @@ exports[`wrapper 1`] = `
   class="c0"
 >
   <div
-    class="c1"
+    class="c1 c2"
     height="100%"
   >
     <div
-      class="c2"
+      class="c3 c4"
     >
       <div
-        class="c3"
+        class="c3 c5"
       >
         <svg
           fill="none"
@@ -152,36 +161,36 @@ exports[`wrapper 1`] = `
         </svg>
       </div>
       <div
-        class="c4"
+        class="c3 c6 c7"
       >
         <div
-          class="c5"
+          class="c8"
         >
           Some content
         </div>
       </div>
     </div>
     <footer
-      class="c6"
+      class="c9"
     >
       <div
-        class="c7"
+        class="c3 c10 c11"
       >
         <div
-          class="c5"
+          class="c8"
         >
           © Gravitational, Inc. All Rights Reserved
         </div>
         <a
-          class="c8 c9"
+          class="c12 c13"
           href="https://goteleport.com/legal/tos/"
           rel="noreferrer"
           target="_blank"
         >
           Terms of Service
         </a>
         <a
-          class="c8 c9"
+          class="c12 c13"
           href="https://goteleport.com/legal/privacy/"
           rel="noreferrer"
           target="_blank"