chore: Updated unique id generation for classnames (#2913)

Fixes: #2912  

This is to update the hash generation for classnames in non-compat mode.

[category:Components]

Co-authored-by: @mannycarrera4 <mannycarrera4@users.noreply.github.com>

.storybook/preview.js

@@ -1,4 +1,5 @@
-import {DocsPage, DocsContainer} from '@storybook/addon-docs';
+import React from 'react';
+import {DocsPage, DocsContainer, Unstyled} from '@storybook/addon-docs';
 import 'cypress-storybook/react';
 import routes from './routes';
 
@@ -12,6 +13,14 @@ import '@workday/canvas-tokens-web/css/system/_variables.css';
 // set routes on window for testing the validity of the routes
 window.__routes = routes;
 
+const UnstyledDocsContainer = ({children, ...props}) => {
+  return (
+    <DocsContainer {...props}>
+      <Unstyled>{children}</Unstyled>
+    </DocsContainer>
+  );
+};
+
 export const decorators = [CanvasProviderDecorator];
 
 export const parameters = {

modules/docs/lib/ExampleCodeBlock.tsx

@@ -48,7 +48,7 @@ export const ExampleCodeBlock = ({code}: any) => {
 
   return (
     <div {...cardStencil({opened: isCodeDisplayed})}>
-      <Card data-part="example-block">
+      <Card data-part="example-block" className="sb-unstyled">
         <Card.Body>
           {React.createElement(code)}
           {code && (

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -39,6 +39,8 @@ A note to the reader:
 
 - [Canvas Tokens](#canvas-tokens)
 - [Codemod](#codemod)
+- [Styling Updates](#styling-updates)
+  - [Compatability Mode](#compatability-mode)
 - [Deprecations](#deprecations)
 - [Removals](#removals)
   - [InputIconContainer](#inputiconcontainer)
@@ -69,6 +71,12 @@ In v12, we have done some infrastructure updates with moving to Webpack 5 and St
 these updates has come some formatting issues after running our codemods. We recommend running a
 formatter to address the format issues that have been introduced in v12.
 
+## Styling Updates
+
+### Compatability Mode
+
+In v12, we have addressed a style merge issue with removing forced compatibility mode. For more information on this change, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893).
+
 ## Deprecations
 
 We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove

modules/react/layout/spec/mergeStyles.spec.tsx

@@ -41,8 +41,7 @@ describe('mergeStyles', () => {
 
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
-  // Skipping this for now while we enable compat mode to run all the time
-  it.skip('should allow the cs prop to override base styles', () => {
+  it('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });

modules/styling-transform/lib/utils/createStyleObjectNode.ts

@@ -6,7 +6,6 @@ import {generateUniqueId} from '@workday/canvas-kit-styling';
 
 import {prettyStringify} from './stylisFns';
 import {NestedStyleObject, TransformerContext} from './types';
-import {getHash} from './getHash';
 
 /**
  * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
@@ -65,7 +64,7 @@ export function serializeStyles(
 ) {
   const {getFileName, styles, cache, names, extractedNames} = context;
   const fileName = getFileName(node.getSourceFile().fileName);
-  const hash = getHash(node, context);
+  const hash = generateUniqueId(); //getHash(node, context);
   const serialized = {...serializedStylesEmotion([input]), name: hash} as ReturnType<
     typeof serializedStylesEmotion
   >;

modules/styling/lib/cs.ts

@@ -745,7 +745,7 @@ export function handleCsProp<
   // In order to allow everyone to use createStyles and createStencil without worrying about style merge issues, we're going
   // to enable compat mode all the time. We'll look into possible out-of-order execution issues in the future and plan to re-enable
   // full static mode (for better performance) once we know why this is happening and have a proper workaround.
-  let shouldRuntimeMergeStyles = true;
+  let shouldRuntimeMergeStyles = false;
 
   // The order is intentional. The `className` should go first, then the `cs` prop. If we don't do
   // runtime merging, this order doesn't actually matter because the browser doesn't care the order

modules/styling/spec/cs.spec.tsx

@@ -1222,9 +1222,7 @@ describe('handleCsProp', () => {
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
 
-  // While we have compat mode enabled, we'll skip these tests. The class generated comes from emotion and
-  //we have no way of validating the correct class.
-  it.skip('should allow the cs prop to override base styles', () => {
+  it('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });