Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[wesbite] Remove duplicate MarkdownElement component #42028

Merged
merged 3 commits into from Apr 29, 2024
Merged

[wesbite] Remove duplicate MarkdownElement component #42028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
953222d
remove duplicate MarkdownElement component
danilo-leal Apr 26, 2024
19e8967
remove empty line
danilo-leal Apr 26, 2024
2e71ae3
style clean-ups around the HighlightedCode component
danilo-leal Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/src/components/action/Frame.tsx
View file
Open in desktop
Expand Up @@ -36,9 +36,7 @@ const FrameInfo = React.forwardRef<HTMLDivElement, BoxProps>(function FrameInfo(
borderColor: 'primaryDark.700',
borderTop: 0,
colorScheme: 'dark',
'* pre, code': {
bgcolor: 'common.black',
},
overflow: 'clip',
...props.sx,
}}
/>
Expand Down
8 changes: 1 addition & 7 deletions docs/src/components/home/AdvancedShowcase.tsx
View file
Open in desktop
Expand Up @@ -6,7 +6,6 @@ import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
import ProgressBar from 'docs/src/components/x-grid/ProgressBar';
import EditProgress from 'docs/src/components/x-grid/EditProgress';
Expand Down Expand Up @@ -1728,12 +1727,7 @@ export default function DataTable() {
},
}}
>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={code}
language="jsx"
/>
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Box>
}
/>
Expand Down
8 changes: 1 addition & 7 deletions docs/src/components/home/CoreShowcase.tsx
View file
Open in desktop
Expand Up @@ -5,7 +5,6 @@ import Button, { buttonClasses } from '@mui/material/Button';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
import PointerContainer, { Data } from 'docs/src/components/home/ElementPointer';
import StylingInfo from 'docs/src/components/action/StylingInfo';
import FlashCode from 'docs/src/components/animation/FlashCode';
Expand Down Expand Up @@ -184,12 +183,7 @@ export default function CoreShowcase() {
>
<Box sx={{ position: 'relative' }}>
{startLine !== undefined && <FlashCode startLine={startLine} endLine={endLine} />}
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={componentCode}
language="jsx"
/>
<HighlightedCode copyButtonHidden plainStyle code={componentCode} language="jsx" />
<StylingInfo appeared={customized} sx={{ mx: -2 }} />
</Box>
</Box>
Expand Down
54 changes: 0 additions & 54 deletions docs/src/components/markdown/MarkdownElement.tsx
View file
Open in desktop

This file was deleted.

8 changes: 3 additions & 5 deletions docs/src/components/productBaseUI/BaseUIComponents.tsx
View file
Open in desktop
Expand Up @@ -17,7 +17,6 @@ import Section from 'docs/src/layouts/Section';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import More from 'docs/src/components/action/More';
import Frame from 'docs/src/components/action/Frame';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
import ROUTES from 'docs/src/route';

// Switcher icons
Expand Down Expand Up @@ -163,11 +162,10 @@ export default function BaseUIComponents() {
<Frame.Info
data-mui-color-scheme="dark"
sx={{
height: 360,
position: 'relative',
overflow: 'hidden',
p: 0,
pt: 5,
height: 360,
position: 'relative',
}}
>
<Box
Expand All @@ -181,7 +179,7 @@ export default function BaseUIComponents() {
>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
plainStyle
code={(() => {
const result = CODES[demo];
if (typeof result === 'function') {
Expand Down
16 changes: 3 additions & 13 deletions docs/src/components/productBaseUI/BaseUICustomization.tsx
View file
Open in desktop
Expand Up @@ -3,7 +3,6 @@ import { styled } from '@mui/system';
import clsx from 'clsx';
import { Switch as SwitchUnstyled } from '@mui/base/Switch';
import { useSwitch, UseSwitchParameters } from '@mui/base/useSwitch';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
Expand All @@ -15,7 +14,6 @@ import GradientText from 'docs/src/components/typography/GradientText';
import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
import FlashCode from 'docs/src/components/animation/FlashCode';
import Frame from 'docs/src/components/action/Frame';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

const code = `
import clsx from 'clsx';
Expand Down Expand Up @@ -302,20 +300,12 @@ export default function BaseUICustomization() {
ref={infoRef}
sx={{
maxHeight: 450,
position: 'relative',
overflow: 'auto',
}}
>
<Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
<Box sx={{ position: 'relative', zIndex: 1 }}>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={code}
language="jsx"
/>
</Box>
<FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
</Box>
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
<FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 1 }} />
</Frame.Info>
</Frame>
</Grid>
Expand Down
10 changes: 2 additions & 8 deletions docs/src/components/productMaterial/MaterialComponents.tsx
View file
Open in desktop
Expand Up @@ -30,7 +30,7 @@ import More from 'docs/src/components/action/More';
import Frame from 'docs/src/components/action/Frame';
import { customTheme } from 'docs/src/components/home/MaterialDesignComponents';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

import StylingInfo from 'docs/src/components/action/StylingInfo';
import ROUTES from 'docs/src/route';

Expand Down Expand Up @@ -290,7 +290,6 @@ export default function MaterialComponents() {
minHeight: 220,
maxHeight: demo === 'Table' ? 260 : 'none',
position: 'relative',
overflow: 'hidden',
p: 0,
pt: 5,
}}
Expand All @@ -305,12 +304,7 @@ export default function MaterialComponents() {
height: '100%',
}}
>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={CODES[demo]}
language="jsx"
/>
<HighlightedCode copyButtonHidden plainStyle code={CODES[demo]} language="jsx" />
</Box>
<Box
sx={(theme) => ({
Expand Down
16 changes: 4 additions & 12 deletions docs/src/components/productMaterial/MaterialStyling.tsx
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ import Item, { Group } from 'docs/src/components/action/Item';
import Highlighter from 'docs/src/components/action/Highlighter';
import Frame from 'docs/src/components/action/Frame';
import RealEstateCard from 'docs/src/components/showcase/RealEstateCard';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

import FlashCode from 'docs/src/components/animation/FlashCode';

const code = `
Expand Down Expand Up @@ -311,19 +311,11 @@ export default function MaterialStyling() {
sx={{
maxHeight: index === 2 ? 282 : 400,
overflow: 'auto',
position: 'relative',
}}
>
<Box sx={{ position: 'relative', '&& pre': { bgcolor: 'transparent' } }}>
<Box sx={{ position: 'relative', zIndex: 1 }}>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={code}
language="jsx"
/>
</Box>
<FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: -1 }} />
</Box>
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
<FlashCode startLine={startLine[index]} endLine={endLine[index]} sx={{ mx: 1 }} />
</Frame.Info>
</Frame>
</Grid>
Expand Down
8 changes: 1 addition & 7 deletions docs/src/components/productMaterial/MaterialTheming.tsx
View file
Open in desktop
Expand Up @@ -12,7 +12,6 @@ import Highlighter from 'docs/src/components/action/Highlighter';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import Frame from 'docs/src/components/action/Frame';
import PlayerCard from 'docs/src/components/showcase/PlayerCard';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

const code = `
<Card
Expand Down Expand Up @@ -128,12 +127,7 @@ export default function MaterialTheming() {
)}
</Frame.Demo>
<Frame.Info sx={{ maxHeight: 300, overflow: 'auto' }}>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={code}
language="jsx"
/>
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Frame.Info>
</Frame>
</Grid>
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/productX/XChartsDemo.tsx
View file
Open in desktop
Expand Up @@ -4,7 +4,6 @@ import { BarChart } from '@mui/x-charts/BarChart';
import { blueberryTwilightPaletteLight } from '@mui/x-charts';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import Frame from 'docs/src/components/action/Frame';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

const code = `
<BarChart
Expand Down Expand Up @@ -54,7 +53,7 @@ export default function XChartsDemo() {
</Paper>
</Frame.Demo>
<Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
<HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Frame.Info>
</Frame>
);
Expand Down
8 changes: 1 addition & 7 deletions docs/src/components/productX/XDataGrid.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@ import Item, { Group } from 'docs/src/components/action/Item';
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 MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
import FlashCode from 'docs/src/components/animation/FlashCode';
import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
import StylingInfo from 'docs/src/components/action/StylingInfo';
Expand Down Expand Up @@ -211,12 +210,7 @@ export default function XDataGrid() {
>
<Box sx={{ position: 'relative' }}>
<Box sx={{ position: 'relative', zIndex: 1 }}>
<HighlightedCode
copyButtonHidden
component={MarkdownElement}
code={code}
language="jsx"
/>
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Box>
{demo && <FlashCode startLine={startLine[demo]} sx={{ mx: -2 }} />}
<StylingInfo
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/productX/XDateRangeDemo.tsx
View file
Open in desktop
Expand Up @@ -12,7 +12,6 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import { startOfWeek, endOfWeek, subDays } from 'date-fns';
import Frame from 'docs/src/components/action/Frame';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

const startDate = new Date();
startDate.setDate(10);
Expand Down Expand Up @@ -187,7 +186,7 @@ export default function XDateRangeDemo() {
</Paper>
</Frame.Demo>
<Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
<HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Frame.Info>
</Frame>
);
Expand Down
3 changes: 1 addition & 2 deletions docs/src/components/productX/XTreeViewDemo.tsx
View file
Open in desktop
Expand Up @@ -19,7 +19,6 @@ import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
import FourKOutlined from '@mui/icons-material/FourKOutlined';
import { HighlightedCode } from '@mui/docs/HighlightedCode';
import Frame from 'docs/src/components/action/Frame';
import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';

const CustomContent = React.forwardRef(function CustomContent(
props: TreeItemContentProps & { lastNestedChild?: boolean },
Expand Down Expand Up @@ -330,7 +329,7 @@ export default function XDateRangeDemo() {
</Paper>
</Frame.Demo>
<Frame.Info data-mui-color-scheme="dark" sx={{ maxHeight: 300, overflow: 'auto' }}>
<HighlightedCode copyButtonHidden component={MarkdownElement} code={code} language="jsx" />
<HighlightedCode copyButtonHidden plainStyle code={code} language="jsx" />
</Frame.Info>
</Frame>
);
Expand Down