[docs-infra] Add a general round of polish to the API content display (…

…#38282)
mui · Aug 7, 2023 · 82e84bd · 82e84bd
1 parent ad158e4
commit 82e84bd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 22 deletions.
diff --git 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
@@ -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: '18px 0',
     },
   }),
   ({ theme }) => ({

diff --git 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
@@ -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'}) &`]: {