From 9a8e4306fc4b4fbbe7b08f4b0ffd60c4b8003b65 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 2 Aug 2023 09:46:18 -0300
Subject: [PATCH 1/2] add round of general polish

---
 docs/src/modules/components/ApiPage.js        |  1 -
 .../modules/components/ApiPage/ApiItem.tsx    |  6 ++---
 .../modules/components/ApiPage/SlotsList.tsx  | 25 ++++++-------------
 .../src/modules/components/PropertiesTable.js |  1 -
 4 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index 52e052f4933ad3..d511b24c3bb051 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -371,7 +371,6 @@ import { ${pageContent.name} } from '${source}';`}
               componentName={pageContent.name}
               classDescriptions={classDescriptions}
             />
-            <Divider />
           </React.Fragment>
         ) : null}
         <DesignInfo />
diff --git a/docs/src/modules/components/ApiPage/ApiItem.tsx b/docs/src/modules/components/ApiPage/ApiItem.tsx
index d26a9e160b4243..e795d9b8543f5d 100644
--- a/docs/src/modules/components/ApiPage/ApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/ApiItem.tsx
@@ -61,7 +61,6 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       },
       '& .MuiApi-item-description': {
         padding: '4px 6px',
-        flexGrow: 1,
         textOverflow: 'ellipsis',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
@@ -77,9 +76,10 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
         placeItems: 'end',
       },
       '& .MuiApi-item-note': {
-        padding: '2px 6px',
+        paddingTop: 5,
         fontSize: 11,
         letterSpacing: '1px',
+        lineHeight: 1.6,
         textTransform: 'uppercase',
         color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`,
         fontWeight: theme.typography.fontWeightBold,
@@ -135,7 +135,7 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
     '&>hr': {
-      margin: '20px 0',
+      margin: '24px 0',
     },
   }),
   ({ theme }) => ({
diff --git a/docs/src/modules/components/ApiPage/SlotsList.tsx b/docs/src/modules/components/ApiPage/SlotsList.tsx
index e21f8df17ea963..f14a08f240c9eb 100644
--- a/docs/src/modules/components/ApiPage/SlotsList.tsx
+++ b/docs/src/modules/components/ApiPage/SlotsList.tsx
@@ -10,12 +10,7 @@ const StyledApiItem = styled(ApiItem)(
     '.slot-classname, .slot-default-element': {
       ...theme.typography.body2,
       fontWeight: theme.typography.fontWeightSemiBold,
-    },
-    '& .slot-description-title': {
-      ...theme.typography.body2,
-      fontWeight: theme.typography.fontWeightSemiBold,
-      paddingRight: 5,
-      whiteSpace: 'nowrap',
+      marginBottom: 8,
     },
   }),
   ({ theme }) => ({
@@ -50,26 +45,22 @@ export default function SlotsList(props: SlotsListProps) {
             note=""
             type="slots"
           >
+            {slotDescriptions[name] && (
+              <p
+                dangerouslySetInnerHTML={{
+                  __html: slotDescriptions[name] || '',
+                }}
+              />
+            )}
             <p className="slot-default-element">
               <span>{t('api-docs.default')}:</span> <code className="Api-code">{defaultValue}</code>
             </p>
-
             {className && (
               <p className="slot-classname">
                 <span>{t('api-docs.globalClass')}:</span>{' '}
                 <code dangerouslySetInnerHTML={{ __html: className }} className="Api-code" />
               </p>
             )}
-            {slotDescriptions[name] && (
-              <p>
-                <span className="slot-description-title">{t('api-docs.description')}:</span>{' '}
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: slotDescriptions[name] || '',
-                  }}
-                />
-              </p>
-            )}
           </StyledApiItem>
         );
       })}
diff --git a/docs/src/modules/components/PropertiesTable.js b/docs/src/modules/components/PropertiesTable.js
index 1313e204c29005..ba8652fd910814 100644
--- a/docs/src/modules/components/PropertiesTable.js
+++ b/docs/src/modules/components/PropertiesTable.js
@@ -69,7 +69,6 @@ const StyledApiItem = styled(ApiItem)(
         backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`,
       },
     },
-    marginBottom: 36,
   }),
   ({ theme }) => ({
     [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {

From f0290cb887e6ea502b2ab1f37da29b8a2080bead Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 2 Aug 2023 12:15:16 -0300
Subject: [PATCH 2/2] reduce size between each block

---
 docs/src/modules/components/ApiPage/ApiItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/ApiPage/ApiItem.tsx b/docs/src/modules/components/ApiPage/ApiItem.tsx
index e795d9b8543f5d..61003489ae032a 100644
--- a/docs/src/modules/components/ApiPage/ApiItem.tsx
+++ b/docs/src/modules/components/ApiPage/ApiItem.tsx
@@ -135,7 +135,7 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`,
     },
     '&>hr': {
-      margin: '24px 0',
+      margin: '18px 0',
     },
   }),
   ({ theme }) => ({