chore(docs): Suppress hydration warning for App Size

Author: mlaursen

packages/documentation/src/components/Code/CodeBlock.tsx

@@ -25,13 +25,21 @@ export default forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(
     children: propChildren,
     highlight = true,
     lineNumbers = false,
+    suppressHydrationWarning = false,
     ...props
   },
   ref
 ) {
   const children = useMemo(() => {
     if (!highlight || typeof propChildren !== "string") {
-      return <Code inline={false}>{propChildren}</Code>;
+      return (
+        <Code
+          inline={false}
+          suppressHydrationWarning={suppressHydrationWarning}
+        >
+          {propChildren}
+        </Code>
+      );
     }
 
     return (
@@ -40,9 +48,11 @@ export default forwardRef<HTMLPreElement, CodeBlockProps>(function CodeBlock(
         dangerouslySetInnerHTML={{
           __html: highlightCode(propChildren, language),
         }}
+        suppressHydrationWarning={suppressHydrationWarning}
       />
     );
-  }, [propChildren, highlight, language]);
+  }, [highlight, propChildren, language, suppressHydrationWarning]);
+
   return (
     <pre
       {...props}

packages/documentation/src/components/Demos/Utils/AppSizeListenerExample.tsx

@@ -9,7 +9,9 @@ function CurrentSize(): ReactElement {
   return (
     <TextContainer>
       <Text type="headline-6">The current app size is:</Text>
-      <CodeBlock language="json">{JSON.stringify(context, null, 2)}</CodeBlock>
+      <CodeBlock language="json" suppressHydrationWarning>
+        {JSON.stringify(context, null, 2)}
+      </CodeBlock>
     </TextContainer>
   );
 }

packages/documentation/src/components/Demos/Utils/ResizeListenerExample.tsx

@@ -40,7 +40,7 @@ export default function ResizeListenerExample(): ReactElement {
         />
       )}
       <Text>The current app size is:</Text>
-      <CodeBlock>{size}px</CodeBlock>
+      <CodeBlock suppressHydrationWarning>{size}px</CodeBlock>
     </>
   );
 }