From 55a2c002a712417e4099572d99a9c47d4916393e Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Tue, 9 Dec 2025 12:35:49 +0100
Subject: [PATCH] Fix string default values in TableCode for better formatting
 in documentation

---
 .../components/data-grid/code/DataGridCodePage.tsx   | 12 +++++++++---
 .../components/date-input/code/DateInputCodePage.tsx |  4 +++-
 .../components/select/code/SelectCodePage.tsx        |  4 +++-
 .../components/textarea/code/TextareaCodePage.tsx    |  4 +++-
 .../typography/code/TypographyCodePage.tsx           | 12 ++++++------
 5 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
index ecfdd9237..679b3bea2 100644
--- a/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
+++ b/apps/website/screens/components/data-grid/code/DataGridCodePage.tsx
@@ -146,7 +146,9 @@ const sections = [
               <TableCode>number</TableCode>
             </td>
             <td>Number of items per page.</td>
-            <td>5</td>
+            <td>
+              <TableCode>5</TableCode>
+            </td>
           </tr>
           <tr>
             <td>itemsPerPageFunction</td>
@@ -270,7 +272,9 @@ const sections = [
               <TableCode>boolean</TableCode>
             </td>
             <td>If true, a select component for navigation between pages will be displayed.</td>
-            <td>true</td>
+            <td>
+              <TableCode>true</TableCode>
+            </td>
           </tr>
           <tr>
             <td>showPaginator</td>
@@ -278,7 +282,9 @@ const sections = [
               <TableCode>boolean</TableCode>
             </td>
             <td>If true, paginator will be displayed.</td>
-            <td>false</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
           </tr>
           <tr>
             <td>summaryRow</td>
diff --git a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
index 6dc0c0d3a..766731813 100644
--- a/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
+++ b/apps/website/screens/components/date-input/code/DateInputCodePage.tsx
@@ -31,7 +31,9 @@ const sections = [
               Specifies a string to be used as the name for the date input element when no <Code>label</Code> is
               provided.
             </td>
-            <td>'Date input'</td>
+            <td>
+              <TableCode>'Date input'</TableCode>
+            </td>
           </tr>
           <tr>
             <td>autocomplete</td>
diff --git a/apps/website/screens/components/select/code/SelectCodePage.tsx b/apps/website/screens/components/select/code/SelectCodePage.tsx
index 82ed44dbb..177579c90 100644
--- a/apps/website/screens/components/select/code/SelectCodePage.tsx
+++ b/apps/website/screens/components/select/code/SelectCodePage.tsx
@@ -269,7 +269,9 @@ const sections = [
               Defines the search mode when searchable is true. If true, matches options that start with the search text.
               If false, matches options that contain the search text anywhere in their label.
             </td>
-            <td>false</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
           </tr>
           <tr>
             <td>size</td>
diff --git a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
index d00e56ed5..af4192460 100644
--- a/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
+++ b/apps/website/screens/components/textarea/code/TextareaCodePage.tsx
@@ -29,7 +29,9 @@ const sections = [
             <td>
               Specifies a string to be used as the name for the textarea element when no <Code>label</Code> is provided.
             </td>
-            <td>'Text area'</td>
+            <td>
+              <TableCode>'Text area'</TableCode>
+            </td>
           </tr>
           <tr>
             <td>autocomplete</td>
diff --git a/apps/website/screens/components/typography/code/TypographyCodePage.tsx b/apps/website/screens/components/typography/code/TypographyCodePage.tsx
index 199b916c5..340ee832c 100644
--- a/apps/website/screens/components/typography/code/TypographyCodePage.tsx
+++ b/apps/website/screens/components/typography/code/TypographyCodePage.tsx
@@ -54,7 +54,7 @@ const sections = [
             </td>
             <td>Color of the text.</td>
             <td>
-              <TableCode>var(--color-fg-neutral-dark)</TableCode>
+              <TableCode>'var(--color-fg-neutral-dark)'</TableCode>
             </td>
           </tr>
           <tr>
@@ -78,7 +78,7 @@ const sections = [
               Specifies the <Code>font-family</Code> CSS property of the component.
             </td>
             <td>
-              <TableCode>var(--typography-font-family)</TableCode>
+              <TableCode>'var(--typography-font-family)'</TableCode>
             </td>
           </tr>
           <tr>
@@ -90,7 +90,7 @@ const sections = [
               Specifies the <Code>font-size</Code> CSS property of the component.
             </td>
             <td>
-              <TableCode>var(--typography-body-m)</TableCode>
+              <TableCode>'var(--typography-body-m)'</TableCode>
             </td>
           </tr>
           <tr>
@@ -114,7 +114,7 @@ const sections = [
               Specifies the <Code>font-weight</Code> CSS property of the component.
             </td>
             <td>
-              <TableCode>var(--typography-body-regular)</TableCode>
+              <TableCode>'var(--typography-body-regular)'</TableCode>
             </td>
           </tr>
           <tr>
@@ -126,7 +126,7 @@ const sections = [
               Specifies the <Code>letter-spacing</Code> CSS property of the component.
             </td>
             <td>
-              <TableCode>var(--spacing-gap-none)</TableCode>
+              <TableCode>'var(--spacing-gap-none)'</TableCode>
             </td>
           </tr>
           <tr>
@@ -138,7 +138,7 @@ const sections = [
               Specifies the <Code>line-height</Code> CSS property of the component.
             </td>
             <td>
-              <TableCode>var(--height-s)</TableCode>
+              <TableCode>'var(--height-s)'</TableCode>
             </td>
           </tr>
           <tr>