[core] Batch small changes

docs/src/modules/components/Demo.js

@@ -56,20 +56,33 @@ const styles = theme => ({
     margin: 'auto',
     display: 'flex',
     justifyContent: 'center',
+    [theme.breakpoints.up('sm')]: {
+      borderRadius: theme.shape.borderRadius,
+    },
+  },
+  /* Isolate the demo with an outline. */
+  demoBgOutlined: {
+    padding: theme.spacing(3),
+    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
     borderLeftWidth: 0,
     borderRightWidth: 0,
-    border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      borderRadius: theme.shape.borderRadius,
       borderLeftWidth: 1,
       borderRightWidth: 1,
     },
   },
-  demoBg: {
-    border: 'none',
+  /* Prepare the background to display an inner elevation. */
+  demoBgTrue: {
+    padding: theme.spacing(3),
     backgroundColor: theme.palette.background.level2,
   },
+  /* Make no difference between the demo and the markdown. */
+  demoBgInline: {
+    // Maintain alignment with the markdown text
+    [theme.breakpoints.down('xs')]: {
+      padding: theme.spacing(3),
+    },
+  },
   demoHiddenHeader: {
     paddingTop: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {
@@ -250,6 +263,10 @@ function Demo(props) {
     [demoOptions.height, demoOptions.maxWidth],
   );
 
+  if (demoOptions.bg == null) {
+    demoOptions.bg = 'outlined';
+  }
+
   if (demoOptions.iframe) {
     demoOptions.bg = true;
   }
@@ -298,7 +315,9 @@ function Demo(props) {
       <div
         className={clsx(classes.demo, {
           [classes.demoHiddenHeader]: demoOptions.hideHeader,
-          [classes.demoBg]: demoOptions.bg,
+          [classes.demoBgOutlined]: demoOptions.bg === 'outlined',
+          [classes.demoBgTrue]: demoOptions.bg === true,
+          [classes.demoBgInline]: demoOptions.bg === 'inline',
         })}
         tabIndex={-1}
         onMouseEnter={handleDemoHover}

docs/src/modules/components/MarkdownElement.js

@@ -213,6 +213,8 @@ const styles = theme => ({
       },
     },
     '& table': {
+      // Trade display table for scroll overflow
+      display: 'block',
       width: '100%',
       overflowX: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.

docs/src/pages.js

@@ -42,7 +42,6 @@ const pages = [
           { pathname: '/components/switches' },
           { pathname: '/components/text-fields' },
           { pathname: '/components/transfer-list' },
-          { pathname: '/components/integrated-autocomplete' },
         ],
       },
       {

docs/src/pages/components/autocomplete/GoogleMaps.js

@@ -89,7 +89,7 @@ export default function GoogleMaps() {
     <Autocomplete
       id="google-map-demo"
       style={{ width: 300 }}
-      getOptionLabel={option => option.description}
+      getOptionLabel={option => (typeof option === 'string' ? option : option.description)}
       filterOptions={x => x}
       options={options}
       autoComplete

docs/src/pages/components/autocomplete/GoogleMaps.tsx

@@ -101,7 +101,7 @@ export default function GoogleMaps() {
     <Autocomplete
       id="google-map-demo"
       style={{ width: 300 }}
-      getOptionLabel={option => option.description}
+      getOptionLabel={option => (typeof option === 'string' ? option : option.description)}
       filterOptions={x => x}
       options={options}
       autoComplete