mui · siriwatknp · Sep 1, 2021 · Aug 9, 2021 · Aug 9, 2021 · Aug 9, 2021
diff --git a/docs/pages/branding/core.tsx b/docs/pages/branding/core.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Head from 'docs/src/modules/components/Head';
+import BrandingProvider from 'docs/src/BrandingProvider';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import AppHeader from 'docs/src/layouts/AppHeader';
+import CoreHero from 'docs/src/components/productCore/CoreHero';
+import CoreComponents from 'docs/src/components/productCore/CoreComponents';
+import CoreTheming from 'docs/src/components/productCore/CoreTheming';
+import CoreStyling from 'docs/src/components/productCore/CoreStyling';
+import CoreHeroEnd from 'docs/src/components/productCore/CoreHeroEnd';
+import References, { CORE_CUSTOMERS } from 'docs/src/components/home/References';
+import AppFooter from 'docs/src/layouts/AppFooter';
+
+export default function Home() {
+  return (
+    <BrandingProvider>
+      <Head
+        title="MUI: A popular React UI framework"
+        description="The ultimate solution for your UI. MUI provides a robust, customizible and accessible library of foundational and advanced components, enabling you to build your own design system and develop React applications faster."
+      />
+      <CssBaseline />
+      <AppHeader />
+      <main>
+        <CoreHero />
+        <References companies={CORE_CUSTOMERS} />
+        <CoreComponents />
+        <CoreTheming />
+        <CoreStyling />
+        <CoreHeroEnd />
+      </main>
+      <AppFooter />
+    </BrandingProvider>
+  );
+}
diff --git a/docs/public/static/branding/store-templates/template-bazar-dark.jpeg b/docs/public/static/branding/store-templates/template-bazar-dark.jpeg
diff --git a/docs/public/static/branding/store-templates/template-bazar-light.jpeg b/docs/public/static/branding/store-templates/template-bazar-light.jpeg
diff --git a/docs/public/static/images/cards/real-estate.png b/docs/public/static/images/cards/real-estate.png
diff --git a/docs/public/static/images/cards/yosemite.jpeg b/docs/public/static/images/cards/yosemite.jpeg
diff --git a/docs/src/components/action/Frame.tsx b/docs/src/components/action/Frame.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { ThemeProvider } from '@material-ui/core/styles';
 import Box, { BoxProps } from '@material-ui/core/Box';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 
-const Demo = (props: BoxProps) => {
+const Demo = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   return (
     <Box
+      ref={ref}
       {...props}
       sx={{
         position: 'relative',
@@ -16,31 +15,32 @@ const Demo = (props: BoxProps) => {
       }}
     />
   );
-};
+});
 
-const Info = (props: BoxProps) => {
+const Info = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
-      <Box
-        {...props}
-        sx={{
-          color: '#fff',
-          p: 2,
-          bgcolor: 'primaryDark.800',
-          border: '1px solid',
-          borderColor: 'primaryDark.700',
-          ...props.sx,
-        }}
-      />
-    </ThemeProvider>
+    <Box
+      ref={ref}
+      {...props}
+      sx={{
+        color: '#fff',
+        p: 2,
+        bgcolor: 'primaryDark.800',
+        border: '1px solid',
+        borderColor: 'primaryDark.700',
+        ...props.sx,
+      }}
+    />
   );
-};
+});
 
 const Frame = (props: BoxProps) => {
   return (
     <Box
       {...props}
       sx={{
+        display: 'flex',
+        flexDirection: 'column',
         '& > div:first-of-type': {
           borderTopLeftRadius: '10px',
           borderTopRightRadius: '10px',
@@ -49,6 +49,7 @@ const Frame = (props: BoxProps) => {
           borderBottomLeftRadius: '10px',
           borderBottomRightRadius: '10px',
         },
+        ...props.sx,
       }}
     />
   );

diff --git a/docs/src/components/action/Item.tsx b/docs/src/components/action/Item.tsx
@@ -84,16 +84,29 @@ export default function Item({
         ...props.sx,
       }}
     >
-      {icon}
-      <Typography
-        component="span"
-        color="text.primary"
-        sx={{ ml: 2 }}
-        variant="body2"
-        fontWeight="bold"
-      >
-        {title}
-      </Typography>
+      <Box sx={{ mr: 2, lineHeight: 0 }}>{icon}</Box>
+      <div>
+        <Typography
+          component="span"
+          color="text.primary"
+          variant="body2"
+          fontWeight="bold"
+          sx={{ display: 'block' }}
+        >
+          {title}
+        </Typography>
+        {description && (
+          <Typography
+            component="span"
+            color="text.secondary"
+            variant="body2"
+            fontWeight="regular"
+            sx={{ mt: 0.5 }}
+          >
+            {description}
+          </Typography>
+        )}
+      </div>
     </Box>
   );
 }
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { ThemeProvider, alpha } from '@material-ui/core/styles';
+import Box, { BoxProps } from '@material-ui/core/Box';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import Tooltip from '@material-ui/core/Tooltip';
+import KeyboardArrowUpRounded from '@material-ui/icons/KeyboardArrowUpRounded';
+import KeyboardArrowDownRounded from '@material-ui/icons/KeyboardArrowDownRounded';
+import Link from 'docs/src/modules/components/Link';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import ROUTES from 'docs/src/route';
+
+export default function StylingInfo({ appeared, ...props }: { appeared: boolean } & BoxProps) {
+  const [hidden, setHidden] = React.useState(false);
+  return (
+    <ThemeProvider theme={brandingDarkTheme}>
+      <Box
+        {...props}
+        sx={{
+          position: 'absolute',
+          bottom: 0,
+          transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+          transition: '0.3s',
+          left: 0,
+          right: 0,
+          px: 2,
+          pt: 1,
+          pb: 2,
+          bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
+          backdropFilter: 'blur(8px)',
+          zIndex: 1,
+          borderTop: '1px solid',
+          borderColor: 'divider',
+          borderRadius: '0 0 10px 10px',
+          ...props.sx,
+        }}
+      >
+        <Tooltip title={hidden ? 'Show' : 'Hide'} placement="left">
+          <IconButton
+            disabled={!appeared}
+            onClick={() => setHidden((bool) => !bool)}
+            sx={{
+              position: 'absolute',
+              zIndex: 2,
+              transition: '0.3s',
+              right: 10,
+              bottom: '100%',
+              transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
+              opacity: appeared ? 1 : 0,
+              bgcolor: 'primaryDark.500',
+              '&:hover, &.Mui-focused': {
+                bgcolor: 'primaryDark.600',
+              },
+            }}
+          >
+            {hidden ? (
+              <KeyboardArrowUpRounded fontSize="small" />
+            ) : (
+              <KeyboardArrowDownRounded fontSize="small" />
+            )}
+          </IconButton>
+        </Tooltip>
+        <Typography fontWeight="bold" color="#fff" variant="body2">
+          Own the styling!
+        </Typography>
+        <Typography color="grey.400" variant="body2">
+          Build your own design system using the{' '}
+          <Link href={ROUTES.theming}>sophisticated theming features</Link>. You can also start by
+          using Google&apos;s Material Design.
+        </Typography>
+      </Box>
+    </ThemeProvider>
+  );
+}
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
@@ -3,18 +3,15 @@ import { ThemeProvider, createTheme, useTheme, styled, alpha } from '@material-u
 import { shouldForwardProp } from '@material-ui/system';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
 import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
-import KeyboardArrowDownRounded from '@material-ui/icons/KeyboardArrowDownRounded';
-import KeyboardArrowUpRounded from '@material-ui/icons/KeyboardArrowUpRounded';
 import TouchAppRounded from '@material-ui/icons/TouchAppRounded';
+import StylingInfo from 'docs/src/components/action/StylingInfo';
 
 const darkDesignTokens = getDesignTokens('dark');
 
@@ -95,7 +92,6 @@ export default function CoreShowcase() {
   const mode = globalTheme.palette.mode;
   const [element, setElement] = React.useState<Data>({ id: null, name: null, target: null });
   const [customized, setCustomized] = React.useState(false);
-  const [hidden, setHidden] = React.useState(false); // for custom theme suggestion
   const theme = React.useMemo(
     () =>
       customized
@@ -295,60 +291,7 @@ export default function CoreShowcase() {
                 <FlashCode startLine={startLine} endLine={endLine} sx={{ mx: -2 }} />
               )}
               <HighlightedCode component={MarkdownElement} code={componentCode} language="jsx" />
-              <Box
-                sx={{
-                  position: 'absolute',
-                  bottom: 0,
-                  transform: hidden || !customized ? 'translateY(100%)' : 'translateY(0)',
-                  transition: '0.3s',
-                  left: 0,
-                  right: 0,
-                  px: 2,
-                  pt: 1,
-                  pb: 2,
-                  mb: -2,
-                  mx: -2,
-                  bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
-                  backdropFilter: 'blur(8px)',
-                  zIndex: 1,
-                  borderTop: '1px solid',
-                  borderColor: 'divider',
-                  borderRadius: '0 0 10px 10px',
-                }}
-              >
-                <Tooltip title={hidden ? 'Show' : 'Hide'} placement="left">
-                  <IconButton
-                    disabled={!customized}
-                    onClick={() => setHidden((bool) => !bool)}
-                    sx={{
-                      position: 'absolute',
-                      zIndex: 2,
-                      transition: '0.3s',
-                      right: 10,
-                      bottom: '100%',
-                      transform: hidden || !customized ? 'translateY(-10px)' : 'translateY(50%)',
-                      opacity: customized ? 1 : 0,
-                      bgcolor: 'primaryDark.500',
-                      '&:hover, &.Mui-focused': {
-                        bgcolor: 'primaryDark.600',
-                      },
-                    }}
-                  >
-                    {hidden ? (
-                      <KeyboardArrowUpRounded fontSize="small" />
-                    ) : (
-                      <KeyboardArrowDownRounded fontSize="small" />
-                    )}
-                  </IconButton>
-                </Tooltip>
-                <Typography fontWeight="bold" color="#fff" variant="body2">
-                  Own the styling!
-                </Typography>
-                <Typography color="grey.400" variant="body2">
-                  Build your own design system using the sophisticated theming features. You can
-                  also start by using Google&apos;s Material Design.
-                </Typography>
-              </Box>
+              <StylingInfo appeared={customized} sx={{ mb: -2, mx: -2 }} />
             </Box>
           </Box>
         </ThemeProvider>

diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { deepmerge } from '@material-ui/utils';
 import {
   styled,
   createTheme,
@@ -200,7 +201,7 @@ const StyledChip = styled(Chip)(({ theme }) => ({
   },
 }));
 
-function buildTheme(theme: Theme): ThemeOptions {
+export function buildTheme(theme: Theme): ThemeOptions {
   return {
     palette: {
       ...theme.palette,
@@ -298,7 +299,7 @@ function buildTheme(theme: Theme): ThemeOptions {
           icon: {
             paddingTop: 1,
             paddingBottom: 0,
-            '& > *': {
+            '& > svg': {
               fontSize: 18,
             },
           },
@@ -362,7 +363,17 @@ function buildTheme(theme: Theme): ThemeOptions {
           },
         },
       },
-      MuiTableCell: theme.components?.MuiTableCell,
+      MuiPaper: theme.components?.MuiPaper,
+      MuiTableCell: deepmerge(theme.components?.MuiTableCell, {
+        styleOverrides: {
+          root: {
+            borderColor:
+              theme.palette.mode === 'dark'
+                ? theme.palette.primaryDark[400]
+                : theme.palette.divider,
+          },
+        },
+      }),
       MuiPopover: {
         styleOverrides: {
           paper: {