chore: Clean up style hash in widget-contract-split-panel.test.tsx

Author: georgylobko

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel.test.tsx.snap

@@ -147,7 +147,6 @@ Map {
                 "focus": [Function],
               },
             },
-            "onMount": [Function],
             "slider": {
               "current": null,
             },
@@ -330,9 +329,9 @@ Map {
       "wrapperElAttributes": {
         "className": "awsui_root awsui_root awsui_has-adaptive-widths-default",
         "style": {
-          "--awsui-max-content-width-xgujsu": "",
-          "--awsui-navigation-width-xgujsu": "280px",
-          "--awsui-tools-width-xgujsu": "290px",
+          "--awsui-max-content-width": "",
+          "--awsui-navigation-width": "280px",
+          "--awsui-tools-width": "290px",
           "minBlockSize": "calc(100vh - 0px)",
         },
       },
@@ -448,7 +447,6 @@ Map {
                 "focus": [Function],
               },
             },
-            "onMount": [Function],
             "slider": {
               "current": null,
             },
@@ -631,9 +629,9 @@ Map {
       "wrapperElAttributes": {
         "className": "awsui_root awsui_root awsui_has-adaptive-widths-default",
         "style": {
-          "--awsui-max-content-width-xgujsu": "",
-          "--awsui-navigation-width-xgujsu": "280px",
-          "--awsui-tools-width-xgujsu": "290px",
+          "--awsui-max-content-width": "",
+          "--awsui-navigation-width": "280px",
+          "--awsui-tools-width": "290px",
           "minBlockSize": "calc(100vh - 0px)",
         },
       },
@@ -749,7 +747,6 @@ Map {
                 "focus": [Function],
               },
             },
-            "onMount": [Function],
             "slider": {
               "current": null,
             },
@@ -932,9 +929,9 @@ Map {
       "wrapperElAttributes": {
         "className": "awsui_root awsui_root awsui_has-adaptive-widths-default",
         "style": {
-          "--awsui-max-content-width-xgujsu": "",
-          "--awsui-navigation-width-xgujsu": "280px",
-          "--awsui-tools-width-xgujsu": "290px",
+          "--awsui-max-content-width": "",
+          "--awsui-navigation-width": "280px",
+          "--awsui-tools-width": "290px",
           "minBlockSize": "calc(100vh - 0px)",
         },
       },
@@ -1050,7 +1047,6 @@ Map {
                 "focus": [Function],
               },
             },
-            "onMount": [Function],
             "slider": {
               "current": null,
             },
@@ -1233,9 +1229,9 @@ Map {
       "wrapperElAttributes": {
         "className": "awsui_root awsui_root awsui_has-adaptive-widths-default",
         "style": {
-          "--awsui-max-content-width-xgujsu": "",
-          "--awsui-navigation-width-xgujsu": "280px",
-          "--awsui-tools-width-xgujsu": "290px",
+          "--awsui-max-content-width": "",
+          "--awsui-navigation-width": "280px",
+          "--awsui-tools-width": "290px",
           "minBlockSize": "calc(100vh - 0px)",
         },
       },

src/app-layout/__tests__/widget-contract-split-panel.test.tsx

@@ -22,6 +22,17 @@ function skipHashInClassnames(classNames: string): string {
     .join(' ');
 }
 
+// --awsui-max-content-width-kcc2gu becomes --awsui-max-content-width
+function skipHashInGLobalStyle(style: string): string {
+  if (!style.startsWith('--awsui')) {
+    return style;
+  }
+
+  const parts = style.split('-');
+  parts.pop();
+  return parts.join('-');
+}
+
 function sanitizeProps(props: any): any {
   if (!isObject(props)) {
     return props;
@@ -37,6 +48,12 @@ function sanitizeProps(props: any): any {
     return {
       ...props,
       className: skipHashInClassnames(props.className),
+      ...(props.style && {
+        style: Object.keys(props.style).reduce(
+          (acc, key) => ({ ...acc, [skipHashInGLobalStyle(key)]: props.style[key] }),
+          {}
+        ),
+      }),
     };
   }
   return Object.fromEntries(