From bdebdfd4832c13a05463faeffef9687688be9715 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 30 Jan 2020 11:37:54 +0100 Subject: [PATCH] [core] Batch small changes (#19416) --- docs/pages/api/autocomplete.md | 2 +- docs/pages/index.js | 2 +- docs/src/modules/components/Ad.js | 30 ++++++++++++------ docs/src/modules/components/AppFooter.js | 2 +- .../modules/components/AppTableOfContents.js | 2 +- docs/src/modules/components/Head.js | 4 +-- docs/src/modules/components/MarkdownDocs.js | 5 ++- .../src/modules/components/MarkdownElement.js | 5 +-- .../components/autocomplete/CustomizedHook.js | 6 ++-- .../autocomplete/CustomizedHook.tsx | 6 ++-- .../pages/components/cards/ImgMediaCard.js | 4 +-- .../pages/components/cards/ImgMediaCard.tsx | 4 +-- docs/src/pages/components/cards/MediaCard.js | 4 +-- docs/src/pages/components/cards/MediaCard.tsx | 4 +-- .../components/cards/MediaControlCard.js | 4 +-- .../components/cards/MediaControlCard.tsx | 4 +-- .../pages/components/cards/OutlinedCard.js | 4 +-- .../pages/components/cards/OutlinedCard.tsx | 4 +-- .../components/cards/RecipeReviewCard.js | 4 +-- .../components/cards/RecipeReviewCard.tsx | 4 +-- docs/src/pages/components/cards/SimpleCard.js | 4 +-- .../src/pages/components/cards/SimpleCard.tsx | 4 +-- .../src/pages/components/skeleton/Facebook.js | 18 +++++++---- .../pages/components/skeleton/Facebook.tsx | 18 +++++++---- .../typography/CustomResponsiveFontSizes.js | 10 +++--- .../typography/CustomResponsiveFontSizes.tsx | 10 +++--- .../typography/TypographyVariants.js | 8 ++--- .../typography/TypographyVariants.tsx | 8 ++--- .../customization/typography/typography.md | 12 ++++--- .../discover-more/languages/Languages.js | 4 +-- .../related-projects/related-projects.md | 2 +- .../templates/pricing/Pricing.js | 2 -- docs/src/pages/getting-started/usage/Usage.js | 4 +-- .../onepirate/modules/views/AppFooter.js | 2 +- .../onepirate/modules/withRoot.js | 4 +-- docs/static/in-house/monday.jpg | Bin 11839 -> 0 bytes docs/static/in-house/sketch.png | Bin 0 -> 4543 bytes docs/static/in-house/themes-2.jpg | Bin 0 -> 18168 bytes .../src/Autocomplete/Autocomplete.js | 2 +- .../material-ui-lab/src/Skeleton/Skeleton.js | 9 ++++-- .../src/useAutocomplete/useAutocomplete.d.ts | 2 +- .../ServerStyleSheets/ServerStyleSheets.js | 4 +-- .../src/StylesProvider/StylesProvider.js | 4 +-- .../src/getStylesCreator/getStylesCreator.js | 4 +-- .../src/getThemeProps/getThemeProps.js | 4 +-- .../src/jssPreset/jssPreset.js | 4 +-- .../src/makeStyles/makeStyles.js | 4 +-- .../src/mergeClasses/mergeClasses.js | 4 +-- .../material-ui-styles/src/styled/styled.js | 4 +-- .../src/Breadcrumbs/Breadcrumbs.js | 5 ++- .../material-ui/src/ButtonBase/TouchRipple.js | 10 +----- packages/material-ui/src/Chip/Chip.js | 2 +- packages/material-ui/src/MenuItem/MenuItem.js | 2 +- packages/material-ui/src/Slider/Slider.js | 4 +-- .../src/TablePagination/TablePagination.js | 5 ++- .../src/styles/createTypography.js | 2 +- .../src/useMediaQuery/useMediaQuery.js | 4 +-- .../src/useMediaQuery/useMediaQueryTheme.js | 6 ++-- packages/material-ui/src/utils/setRef.js | 2 +- test/regressions/index.js | 6 ++-- 60 files changed, 151 insertions(+), 156 deletions(-) delete mode 100644 docs/static/in-house/monday.jpg create mode 100644 docs/static/in-house/sketch.png create mode 100644 docs/static/in-house/themes-2.jpg diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 8c58516f4be5db..e158319ee8f7f7 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -61,7 +61,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | | onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: T) => void`
*event:* The event source of the callback.
*value:* null | | onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input.
*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. | +| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input.
*reason:* Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`. | | onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | open | bool | | Control the popup` open state. | | openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | diff --git a/docs/pages/index.js b/docs/pages/index.js index 759f527912a7d4..59fd3b7c86dc21 100644 --- a/docs/pages/index.js +++ b/docs/pages/index.js @@ -174,7 +174,7 @@ export default function HomePage() { "@type": "Organization", "name": "Material-UI", "url": "https://material-ui.com/", - "logo": "https://material-ui.com/static/brand.png", + "logo": "https://material-ui.com/static/logo.png", "sameAs": [ "https://twitter.com/materialUI", "https://github.com/mui-org/material-ui", diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 35ff6f637d4be2..9ba041029edd89 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -53,7 +53,15 @@ const inHouseAds = [ name: 'scaffoldhub', link: 'https://scaffoldhub.io/?partner=1', img: '/static/in-house/scaffoldhub.png', - description: 'ScaffoldHub - Automate building your full-stack Material-UI web-app.', + description: 'Scaffold
Automate building your full-stack Material-UI web-app.', + }, + { + name: 'themes-2', + link: + 'https://themes.material-ui.com/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-2', + img: '/static/in-house/themes-2.jpg', + description: + 'Premium Templates
Sart your project with the best themes for admins, dashboards and more.', }, { name: 'themes', @@ -69,20 +77,22 @@ const inHouseAds = [ 'https://tidelift.com/subscription/managed-open-source-survey?utm_source=material_ui&utm_medium=referral&utm_campaign=enterprise&utm_content=ad', img: '/static/in-house/tidelift.png', description: - 'Material-UI for enterprise
Available in the Tidelift Subscription. Reduce risk, and improve code health.', - }, - { - name: 'monday', - link: 'https://monday.com/partners/status-video?&utm_source=Partner&utm_campaign=MaterialUI', - img: '/static/in-house/monday.jpg', - description: 'Why use multiple tools to manage your projects? Meet monday.com', + 'Material-UI for enterprise
Save time and reduce risk. Managed open source — backed by maintainers.', }, { name: 'bonsaiilabs', link: 'https://bonsaiilabs.com/courseDetail/material-ui-with-react', img: '/static/in-house/bonsaiilabs.png', description: - 'A course to learn Material‑UI while developing a mobile flight search and booking app.', + 'Learn Material‑UI
A course to learn Material-UI while developing a flight search/booking app.', + }, + { + name: 'sketch', + link: + 'https://themes.material-ui.com/themes/sketch-react/?utm_source=material_ui&utm_medium=referral&utm_campaign=in-house-sketch', + img: '/static/in-house/sketch.png', + description: + 'Sketch
A large UI kit with over 1,500 handcrafted Material-UI symbols 💎.', }, ]; @@ -214,7 +224,7 @@ function Ad(props) { eventLabel: type, }); - if (type === 'in-house') { + if (type.indexOf('in-house') === 0) { window.ga('send', { hitType: 'event', eventCategory: 'in-house-ad', diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index ce385bcb63e588..ec72bd635aca49 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -34,7 +34,7 @@ const styles = theme => ({ }, '& ul': { margin: 0, - paddingLeft: 0, + padding: 0, listStyle: 'none', }, '& li': { diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index cb85ef1ea9bf0a..e7632435c5fc71 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -36,7 +36,7 @@ const useStyles = makeStyles(theme => ({ ul: { padding: 0, margin: 0, - listStyleType: 'none', + listStyle: 'none', }, item: { fontSize: 13, diff --git a/docs/src/modules/components/Head.js b/docs/src/modules/components/Head.js index b8f45007d28807..c14d27fdd246cc 100644 --- a/docs/src/modules/components/Head.js +++ b/docs/src/modules/components/Head.js @@ -21,7 +21,7 @@ export default function Head(props) { - + {/* Facebook */} @@ -30,7 +30,7 @@ export default function Head(props) { content={`https://material-ui.com${Router._rewriteUrlForNextExport(router.asPath)}`} /> - + {/* Algolia */} diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index e5c00f8ad27c5e..dda8810b812c58 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -21,6 +21,9 @@ import { pageToTitleI18n } from 'docs/src/modules/utils/helpers'; import Link from 'docs/src/modules/components/Link'; const styles = theme => ({ + root: { + width: '100%', + }, container: { position: 'relative', }, @@ -132,7 +135,7 @@ function MarkdownDocs(props) { )}
({ root: { - fontFamily: theme.typography.fontFamily, - fontSize: 16, + ...theme.typography.body1, color: theme.palette.text.primary, wordBreak: 'break-word', '& .anchor-link': { @@ -147,6 +146,8 @@ const styles = theme => ({ '& code[class*="language-"]': { backgroundColor: '#272c34', color: '#fff', + // Avoid layout jump after hydration (style injected by prism) + lineHeight: 1.5, }, '& p code, & ul code, & pre code': { fontSize: 14, diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js index a54ed776610619..219b9456a328dd 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.js +++ b/docs/src/pages/components/autocomplete/CustomizedHook.js @@ -31,12 +31,14 @@ const InputWrapper = styled('div')` & input { font-size: 14px; - line-height: 26px; - padding: 2px 6px; + height: 30px; + box-sizing: border-box; + padding: 4px 6px; width: 0; min-width: 30px; flex-grow: 1; border: 0; + margin: 0; outline: 0; } `; diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx index 1d599d1cff7f79..c2d4db38691799 100644 --- a/docs/src/pages/components/autocomplete/CustomizedHook.tsx +++ b/docs/src/pages/components/autocomplete/CustomizedHook.tsx @@ -31,12 +31,14 @@ const InputWrapper = styled('div')` & input { font-size: 14px; - line-height: 26px; - padding: 2px 6px; + height: 30px; + box-sizing: border-box; + padding: 4px 6px; width: 0; min-width: 30px; flex-grow: 1; border: 0; + margin: 0; outline: 0; } `; diff --git a/docs/src/pages/components/cards/ImgMediaCard.js b/docs/src/pages/components/cards/ImgMediaCard.js index 8b900f47bf99e2..1a967b8cc74217 100644 --- a/docs/src/pages/components/cards/ImgMediaCard.js +++ b/docs/src/pages/components/cards/ImgMediaCard.js @@ -9,7 +9,7 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles({ - card: { + root: { maxWidth: 345, }, }); @@ -18,7 +18,7 @@ export default function ImgMediaCard() { const classes = useStyles(); return ( - + + + + ({ - card: { + root: { display: 'flex', }, details: { @@ -40,7 +40,7 @@ export default function MediaControlCard() { const theme = useTheme(); return ( - +
diff --git a/docs/src/pages/components/cards/MediaControlCard.tsx b/docs/src/pages/components/cards/MediaControlCard.tsx index f3adffd758655f..a5d9281ec7c739 100644 --- a/docs/src/pages/components/cards/MediaControlCard.tsx +++ b/docs/src/pages/components/cards/MediaControlCard.tsx @@ -11,7 +11,7 @@ import SkipNextIcon from '@material-ui/icons/SkipNext'; const useStyles = makeStyles((theme: Theme) => createStyles({ - card: { + root: { display: 'flex', }, details: { @@ -42,7 +42,7 @@ export default function MediaControlCard() { const theme = useTheme(); return ( - +
diff --git a/docs/src/pages/components/cards/OutlinedCard.js b/docs/src/pages/components/cards/OutlinedCard.js index 77855224dcaaf2..1f143544b2b6a4 100644 --- a/docs/src/pages/components/cards/OutlinedCard.js +++ b/docs/src/pages/components/cards/OutlinedCard.js @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles({ - card: { + root: { minWidth: 275, }, bullet: { @@ -28,7 +28,7 @@ export default function OutlinedCard() { const bull = •; return ( - + Word of the Day diff --git a/docs/src/pages/components/cards/OutlinedCard.tsx b/docs/src/pages/components/cards/OutlinedCard.tsx index 77855224dcaaf2..1f143544b2b6a4 100644 --- a/docs/src/pages/components/cards/OutlinedCard.tsx +++ b/docs/src/pages/components/cards/OutlinedCard.tsx @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles({ - card: { + root: { minWidth: 275, }, bullet: { @@ -28,7 +28,7 @@ export default function OutlinedCard() { const bull = •; return ( - + Word of the Day diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js index 31498e60154214..04a18b6a912f10 100644 --- a/docs/src/pages/components/cards/RecipeReviewCard.js +++ b/docs/src/pages/components/cards/RecipeReviewCard.js @@ -17,7 +17,7 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import MoreVertIcon from '@material-ui/icons/MoreVert'; const useStyles = makeStyles(theme => ({ - card: { + root: { maxWidth: 345, }, media: { @@ -48,7 +48,7 @@ export default function RecipeReviewCard() { }; return ( - + diff --git a/docs/src/pages/components/cards/RecipeReviewCard.tsx b/docs/src/pages/components/cards/RecipeReviewCard.tsx index 928edc041be879..e6697cd9f2cda6 100644 --- a/docs/src/pages/components/cards/RecipeReviewCard.tsx +++ b/docs/src/pages/components/cards/RecipeReviewCard.tsx @@ -18,7 +18,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert'; const useStyles = makeStyles((theme: Theme) => createStyles({ - card: { + root: { maxWidth: 345, }, media: { @@ -50,7 +50,7 @@ export default function RecipeReviewCard() { }; return ( - + diff --git a/docs/src/pages/components/cards/SimpleCard.js b/docs/src/pages/components/cards/SimpleCard.js index 20bedec76119e9..79be00bd552a90 100644 --- a/docs/src/pages/components/cards/SimpleCard.js +++ b/docs/src/pages/components/cards/SimpleCard.js @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles({ - card: { + root: { minWidth: 275, }, bullet: { @@ -28,7 +28,7 @@ export default function SimpleCard() { const bull = •; return ( - + Word of the Day diff --git a/docs/src/pages/components/cards/SimpleCard.tsx b/docs/src/pages/components/cards/SimpleCard.tsx index 20bedec76119e9..79be00bd552a90 100644 --- a/docs/src/pages/components/cards/SimpleCard.tsx +++ b/docs/src/pages/components/cards/SimpleCard.tsx @@ -7,7 +7,7 @@ import Button from '@material-ui/core/Button'; import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles({ - card: { + root: { minWidth: 275, }, bullet: { @@ -28,7 +28,7 @@ export default function SimpleCard() { const bull = •; return ( - + Word of the Day diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js index d89a71129137cb..cc7282864aaa12 100644 --- a/docs/src/pages/components/skeleton/Facebook.js +++ b/docs/src/pages/components/skeleton/Facebook.js @@ -30,7 +30,7 @@ function Media(props) { + ) : ( ) } - title={loading ? : 'Ted'} - subheader={loading ? : '5 hours ago'} + title={ + loading ? ( + + ) : ( + 'Ted' + ) + } + subheader={loading ? : '5 hours ago'} /> {loading ? ( - + ) : ( {loading ? ( - - + + ) : ( diff --git a/docs/src/pages/components/skeleton/Facebook.tsx b/docs/src/pages/components/skeleton/Facebook.tsx index 7f25f7b32e844f..a74a1d165d8fc8 100644 --- a/docs/src/pages/components/skeleton/Facebook.tsx +++ b/docs/src/pages/components/skeleton/Facebook.tsx @@ -35,7 +35,7 @@ function Media(props: MediaProps) { + ) : ( ) } - title={loading ? : 'Ted'} - subheader={loading ? : '5 hours ago'} + title={ + loading ? ( + + ) : ( + 'Ted' + ) + } + subheader={loading ? : '5 hours ago'} /> {loading ? ( - + ) : ( {loading ? ( - - + + ) : ( diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js index f78c597234e9eb..787a5d55b64eb1 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.js @@ -14,12 +14,10 @@ theme.typography.h3 = { }, }; -export default function ResponsiveFontSizes() { +export default function CustomResponsiveFontSizes() { return ( -
- - Responsive h3 - -
+ + Responsive h3 + ); } diff --git a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx index f78c597234e9eb..787a5d55b64eb1 100644 --- a/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx +++ b/docs/src/pages/customization/typography/CustomResponsiveFontSizes.tsx @@ -14,12 +14,10 @@ theme.typography.h3 = { }, }; -export default function ResponsiveFontSizes() { +export default function CustomResponsiveFontSizes() { return ( -
- - Responsive h3 - -
+ + Responsive h3 + ); } diff --git a/docs/src/pages/customization/typography/TypographyVariants.js b/docs/src/pages/customization/typography/TypographyVariants.js index af5ab349fa90fe..26a48739646398 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.js +++ b/docs/src/pages/customization/typography/TypographyVariants.js @@ -19,12 +19,12 @@ const theme = createMuiTheme({ export default function TypographyVariants() { return ( - -
+
+ subtitle body1 -
- + +
); } diff --git a/docs/src/pages/customization/typography/TypographyVariants.tsx b/docs/src/pages/customization/typography/TypographyVariants.tsx index af5ab349fa90fe..26a48739646398 100644 --- a/docs/src/pages/customization/typography/TypographyVariants.tsx +++ b/docs/src/pages/customization/typography/TypographyVariants.tsx @@ -19,12 +19,12 @@ const theme = createMuiTheme({ export default function TypographyVariants() { return ( - -
+
+ subtitle body1 -
- + +
); } diff --git a/docs/src/pages/customization/typography/typography.md b/docs/src/pages/customization/typography/typography.md index 9194a61d6dd26a..2bd30a21f19812 100644 --- a/docs/src/pages/customization/typography/typography.md +++ b/docs/src/pages/customization/typography/typography.md @@ -56,7 +56,7 @@ const raleway = { Next, you need to change the theme to use this new font. In order to globally define Raleway as a font face, the [`CssBaseline`](/components/css-baseline/) component can be used (or any other CSS solution of your choice). -```js +```jsx const theme = createMuiTheme({ typography: { fontFamily: 'Raleway, Arial', @@ -71,10 +71,12 @@ const theme = createMuiTheme({ }); // ... - - - {children} -; +return ( + + + {children} + +); ``` ## Font size diff --git a/docs/src/pages/discover-more/languages/Languages.js b/docs/src/pages/discover-more/languages/Languages.js index b88571dd77ac00..6d1db81b8416e0 100644 --- a/docs/src/pages/discover-more/languages/Languages.js +++ b/docs/src/pages/discover-more/languages/Languages.js @@ -15,7 +15,7 @@ const useStyles = makeStyles({ }, }); -function Languages() { +export default function Languages() { const classes = useStyles(); return ( @@ -44,5 +44,3 @@ function Languages() { ); } - -export default Languages; diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md index 24951ec3d97b9d..d36f9d6672ec78 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects.md +++ b/docs/src/pages/discover-more/related-projects/related-projects.md @@ -8,7 +8,7 @@ Feel free to submit a pull request to add another project; it will be accepted i ## Design resources -- **Sketch**: [Material Theme Editor](https://material.io/resources/theme-editor/) for Material Design made by Google. +- **Sketch**: [Sketch for Material-UI](https://themes.material-ui.com/themes/sketch-react/) — A large UI kit with over 1,500 handcrafted Material-UI's symbols 💎. - **Figma**: - https://material.5ly.co/ for Material-UI made by Fively Team. - https://ui-kit.co/ a starter kit for your Material Design 2 project. diff --git a/docs/src/pages/getting-started/templates/pricing/Pricing.js b/docs/src/pages/getting-started/templates/pricing/Pricing.js index 0bd11c22524590..8662e1d5064ffa 100644 --- a/docs/src/pages/getting-started/templates/pricing/Pricing.js +++ b/docs/src/pages/getting-started/templates/pricing/Pricing.js @@ -33,8 +33,6 @@ const useStyles = makeStyles(theme => ({ ul: { margin: 0, padding: 0, - }, - li: { listStyle: 'none', }, }, diff --git a/docs/src/pages/getting-started/usage/Usage.js b/docs/src/pages/getting-started/usage/Usage.js index 5e7168a85dcec7..d8458e680d58cb 100644 --- a/docs/src/pages/getting-started/usage/Usage.js +++ b/docs/src/pages/getting-started/usage/Usage.js @@ -1,6 +1,6 @@ import React from 'react'; -function Usage() { +export default function Usage() { return (