fix tangential components

bharatkashyap · Jun 11, 2024 · 69161d6 · 69161d6
1 parent 8d2469a
commit 69161d6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/docs/src/components/action/MoreInfoBox.tsx b/docs/src/components/action/MoreInfoBox.tsx
@@ -9,32 +9,29 @@ import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRound
 
 export function AppearingInfoBox({
  appeared,
- stylingContent,
+ content,
  ...props
-}: { appeared: boolean; stylingContent?: React.ReactElement<any> } & BoxProps) {
+}: { appeared: boolean; content?: React.ReactNode } & BoxProps) {
  const [hidden, setHidden] = React.useState(false);
  return (
  <Box
- data-mui-color-scheme="dark"
  {...props}
  sx={{
- p: 2,
  position: 'absolute',
- bottom: 0,
- left: 0,
- right: 0,
- background: ({ palette }) => alpha(palette.common.black, 0.8),
- backdropFilter: 'blur(8px)',
+ bottom: 8,
+ left: 8,
+ right: 8,
+ background: ({ palette }) => alpha(palette.common.black, 0.9),
  zIndex: 3,
  borderTop: '1px solid',
- borderColor: 'divider',
- borderRadius: '0 0 12px 12px',
+ borderColor: hidden || !appeared ? 'transparent' : 'divider',
  transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
- transition: '0.3s',
+ transition: '0.2s',
  ...props.sx,
  }}
  >
  <IconButton
+ size="small"
  aria-label={hidden ? 'show' : 'hide'}
  onClick={() => setHidden((bool) => !bool)}
  sx={{
@@ -45,9 +42,9 @@ export function AppearingInfoBox({
  bottom: '100%',
  transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
  opacity: appeared ? 1 : 0,
- bgcolor: 'primary.600',
- '&:hover, &.Mui-focused': {
- bgcolor: 'primary.700',
+ backgroundColor: 'primary.500',
+ '&:hover': {
+ backgroundColor: 'primary.800',
  },
  }}
  >
@@ -57,7 +54,7 @@ export function AppearingInfoBox({
  <KeyboardArrowDownRounded fontSize="small" />
  )}
  </IconButton>
- {stylingContent}
+ <Box sx={{ p: 1 }}>{content}</Box>
  </Box>
  );
 }

diff --git a/docs/src/components/home/ShowcaseContainer.tsx b/docs/src/components/home/ShowcaseContainer.tsx
@@ -5,14 +5,16 @@ import NoSsr from '@mui/material/NoSsr';
 import Frame from 'docs/src/components/action/Frame';
 
 export function ShowcaseCodeWrapper({
- hasDesignToggle,
  children,
+ clip,
+ hasDesignToggle,
  maxHeight,
  sx,
 }: {
- hasDesignToggle?: boolean;
+ clip?: boolean;
  children: React.ReactNode;
- maxHeight: number;
+ hasDesignToggle?: boolean;
+ maxHeight: number | string;
  sx?: BoxProps['sx'];
 }) {
  return (
@@ -23,7 +25,7 @@ export function ShowcaseCodeWrapper({
  maxHeight: { xs: 'auto', sm: maxHeight },
  position: 'relative',
  display: 'flex',
- overflow: 'auto',
+ overflow: clip ? 'clip' : 'auto',
  flexGrow: 1,
  '&::-webkit-scrollbar': {
  display: 'none',

diff --git a/docs/src/components/productX/XDataGrid.tsx b/docs/src/components/productX/XDataGrid.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
-// import Box from '@mui/material/Box';
 import Grid from '@mui/material/Unstable_Grid2';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
@@ -20,8 +19,8 @@ import Highlighter from 'docs/src/components/action/Highlighter';
 import More from 'docs/src/components/action/More';
 import Frame from 'docs/src/components/action/Frame';
 import FlashCode from 'docs/src/components/animation/FlashCode';
-import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import { ShowcaseCodeWrapper } from 'docs/src/components/home/ShowcaseContainer';
+import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 import { AppearingInfoBox } from 'docs/src/components/action/MoreInfoBox';
 import ROUTES from 'docs/src/route';
 
@@ -117,6 +116,7 @@ export default function XDataGrid() {
  }
  }
  }, [demo, loading, firstRowId, gridApiRef]);
+
  return (
  <Section cozy>
  <Grid container spacing={2}>
@@ -191,20 +191,19 @@ export default function XDataGrid() {
  pagination
  />
  </Paper>
- <Frame.Info
- sx={{
- borderBottomLeftRadius: 10,
- borderBottomRightRadius: 10,
- }}
- >
- <Box sx={{ position: 'relative' }}>
+ <Frame.Info sx={{ p: 0 }}>
+ <ShowcaseCodeWrapper maxHeight="100%" clip>
  <HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
- {demo && <FlashCode startLine={startLine[demo]} />}
- <StylingInfo
+ {demo && <FlashCode startLine={startLine[demo]} sx={{ mx: 1 }} />}
+ <AppearingInfoBox
  appeared={demo === DEMOS[3] || demo === DEMOS[4]}
- stylingContent={
+ content={
  <React.Fragment>
- <Typography color="#fff" variant="body2" sx={{ fontWeight: 'bold' }}>
+ <Typography
+ color="text.primary"
+ variant="body2"
+ sx={{ fontWeight: 'medium', mb: '4px' }}
+ >
  {demo === DEMOS[3] && 'Pagination > 100 rows per page is a paid feature!'}
  {demo === DEMOS[4] && 'Multi-column filtering is a paid feature!'}
  </Typography>
@@ -215,9 +214,8 @@ export default function XDataGrid() {
  </Typography>
  </React.Fragment>
  }
- sx={{ mx: -2, mb: -1 }}
  />
- </Box>
+ </ShowcaseCodeWrapper>
  </Frame.Info>
  </Grid>
  </Grid>