[Portal] Improve docs for container prop (mui#39180)

Signed-off-by: Olivier Tassinari <[email protected]> Co-authored-by: Sam Sycamore <[email protected]>
mnajdova · Dec 1, 2023 · 1ff0b9f · 1ff0b9f
1 parent d5fcb3e
commit 1ff0b9f
Show file tree

Hide file tree

Showing 226 changed files with 1,190 additions and 1,243 deletions.
diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -188,7 +188,7 @@ function Styles() {
     <style>
       {`
       .Autocomplete__root {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -270,7 +270,7 @@ function Styles() {
       }
 
       .Autocomplete__listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -162,7 +162,7 @@ function Styles() {
     <style>
       {`
       .Autocomplete__root {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-weight: 400;
         border-radius: 8px;
         background: ${isDarkMode ? grey[900] : '#fff'};
@@ -244,7 +244,7 @@ function Styles() {
       }
 
       .Autocomplete__listbox {
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
         padding: 6px;

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -141,7 +141,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -197,7 +197,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -124,7 +124,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -180,7 +180,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -79,7 +79,7 @@ const StyledAutocomplete = styled('div')`
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -127,7 +127,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -79,7 +79,7 @@ const StyledAutocomplete = styled('div')`
 
 const StyledInputRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -127,7 +127,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -76,7 +76,7 @@ const StyledLabel = styled('label')`
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -124,7 +124,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -78,7 +78,7 @@ const StyledLabel = styled('label')`
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -126,7 +126,7 @@ const StyledInput = styled('input')(
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -88,7 +88,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -144,7 +144,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -96,7 +96,7 @@ const grey = {
 
 const StyledAutocompleteRoot = styled('div')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-weight: 400;
   border-radius: 8px;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[500]};
@@ -152,7 +152,7 @@ const StyledPopper = styled('div')`
 
 const StyledListbox = styled('ul')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   box-sizing: border-box;
   padding: 6px;

diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -46,7 +46,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -69,7 +69,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
   `,
 );
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -46,7 +46,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;
@@ -69,7 +69,7 @@ const Badge = styled(BaseBadge)(
     background: ${blue[500]};
     box-shadow: 0px 4px 6x ${theme.palette.mode === 'dark' ? grey[900] : grey[300]};
     transform: translate(50%, -50%);
-    transform-origin: 100% 0; 
+    transform-origin: 100% 0;
   }
   `,
 );
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -43,7 +43,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -43,7 +43,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -37,7 +37,7 @@ const Badge = styled(BaseBadge)(
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 14px;
   line-height: 1;
 
@@ -159,7 +159,7 @@ const Root = styled('span')(
 
 const StyledLabel = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   `,

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -37,7 +37,7 @@ const Badge = styled(BaseBadge)(
   margin: 0;
   padding: 0;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 14px;
   line-height: 1;
 
@@ -159,7 +159,7 @@ const Root = styled('span')(
 
 const StyledLabel = styled('label')(
   ({ theme }) => `
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   font-size: 0.875rem;
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   `,

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -41,7 +41,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -41,7 +41,7 @@ const Badge = styled(BaseBadge)(
   padding: 0;
   font-size: 14px;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.js b/docs/data/base/components/badge/UnstyledBadge/css/index.js
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadge/css/index.tsx b/docs/data/base/components/badge/UnstyledBadge/css/index.tsx
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.js b/docs/data/base/components/badge/UnstyledBadge/system/index.js
@@ -52,7 +52,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
@@ -52,7 +52,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.js
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/css/index.tsx
@@ -63,7 +63,7 @@ function Styles() {
         font-size: 14px;
         font-variant: tabular-nums;
         list-style: none;
-        font-family: IBM Plex Sans, sans-serif;
+        font-family: 'IBM Plex Sans', sans-serif;
         position: relative;
         display: inline-block;
         line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.js
@@ -54,7 +54,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction/system/index.tsx
@@ -54,7 +54,7 @@ const Badge = styled(BaseBadge)(
   font-size: 14px;
   font-variant: tabular-nums;
   list-style: none;
-  font-family: IBM Plex Sans, sans-serif;
+  font-family: 'IBM Plex Sans', sans-serif;
   position: relative;
   display: inline-block;
   line-height: 1;

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -99,7 +99,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
     & .content {
       font-size: 0.875rem;
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       line-height: 1.5;
       height: 100%;

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -100,7 +100,7 @@ const CustomButtonRoot = styled(ButtonRoot)(
 
     & .content {
       font-size: 0.875rem;
-      font-family: IBM Plex Sans, sans-serif;
+      font-family: 'IBM Plex Sans', sans-serif;
       font-weight: 600;
       line-height: 1.5;
       height: 100%;

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -55,7 +55,7 @@ function Styles() {
   return (
     <style>{`
   .IntroductionButton {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;

diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -55,7 +55,7 @@ function Styles() {
   return (
     <style>{`
   .IntroductionButton {
-    font-family: IBM Plex Sans, sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
     font-weight: 600;
     font-size: 0.875rem;
     line-height: 1.5;