docs(react): fix playground (#1629)

siemens · Dec 18, 2024 · e31311a · e31311a
1 parent 89801b1
commit e31311a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/packages/documentation/docs/controls/forms/_forms-validation_code.mdx b/packages/documentation/docs/controls/forms/_forms-validation_code.mdx
@@ -60,23 +60,23 @@ To suppress the internal validation of a component, you have to provide the `nov
       Please note that using the `required` attribute in an Angular application could result in unfavourabe behaviour displaying the field as invalid even if there was no user interaction yet.
       To avoid that it is suggested not to add the `required` attribute, but implement a custom validator for required fields instead (see `name` and `last-name` in the following code).
     </Admonition>
-    <SourceCodePreview framework="angular" name="form-validation" examplesByName/>
+    <SourceCodePreview framework="angular" name="form-validation" examplesByName includeCssFile/>
 
   </TabItem>
   <TabItem value="react" label="React">
     <Admonition type="tip" icon="💡" title="Just an example">
       Using `react-form-hook` is just an example to demonstrate how validation could be done
       within React. You can use any other validation library or write your own validation logic.
     </Admonition>
-    <SourceCodePreview framework="react" name="form-validation" examplesByName/>
+    <SourceCodePreview framework="react" name="form-validation" examplesByName includeCssFile/>
 
   </TabItem>
   <TabItem value="vue" label="Vue">
     <Admonition type="tip" icon="💡" title="Just an example">
       Using `@vuelidate/core` is just an example to demonstrate how validation could be done
       within Vue. You can use any other validation library or write your own validation logic.
     </Admonition>
-    <SourceCodePreview framework="vue" name="form-validation" examplesByName/>
+    <SourceCodePreview framework="vue" name="form-validation" examplesByName includeCssFile/>
 
   </TabItem>
 </Tabs>
diff --git a/packages/documentation/src/components/PlaygroundV2/utils.ts b/packages/documentation/src/components/PlaygroundV2/utils.ts
@@ -152,9 +152,7 @@ export async function fetchSourceFilesByFileName(
     files.map(async (file) => {
       try {
         const source = await fetchSource(
-          getLanguage(file) === 'css'
-            ? `${path}/previews/styles/${file}`
-            : `${path}/previews/${frameworkPath}/${file}`
+          `${path}/previews/${frameworkPath}/${file}`
         );
 
         if (!source) {
@@ -198,7 +196,11 @@ export async function fetchSourceFilesFromExample(
   }
 
   if (includeCssFile) {
-    filesToFetch.push(`${exampleName}.css`);
+    if (framework === TargetFramework.REACT) {
+      filesToFetch.push(`${exampleName}.scoped.css`);
+    } else {
+      filesToFetch.push(`${exampleName}.css`);
+    }
   }
 
   return fetchSourceFilesByFileName(baseUrl, framework, filesToFetch);

diff --git a/packages/documentation/src/components/PlaygroundV3/react-snippets.ts b/packages/documentation/src/components/PlaygroundV3/react-snippets.ts
@@ -17,9 +17,9 @@ export async function fetchSourceForReact(baseUrl: string, name: string) {
   snippets[`${name}.tsx`] = tsFile;
 
   try {
-    const styleFile = await docusaurusFetch(`${baseUrl}/${name}.css`);
+    const styleFile = await docusaurusFetch(`${baseUrl}/${name}.scoped.css`);
     if (styleFile) {
-      snippets[`./${name}.css`] = styleFile;
+      snippets[`./${name}.scoped.css`] = styleFile;
     }
   } catch (e) {}