diff --git a/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx b/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx index cc100de8..3625ea10 100644 --- a/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx +++ b/packages/@vulcanjs/next-mui/components/NextMuiButton.tsx @@ -28,23 +28,25 @@ export const NextMuiButton = ({ const linkProps = pick(props, nextLinkProps); const buttonProps = omit(props, nextLinkProps); return ( - + + + ); }; /** * Button to be used when using href and pointing toward a local page + * + * Do not pass href directly to Button or ListItemButton, this leads to bad UX + * Use a Next link for better consistency (will use an SPA link) */ -export const NextMuiListItemButton = ({ - children, - ...props -}: ListItemButtonProps & NextLinkProps) => { +export const NextMuiListItemButton = ( + props: ListItemButtonProps & NextLinkProps +) => { const linkProps = pick(props, nextLinkProps); const buttonProps = omit(props, nextLinkProps); return ( - - {children} - + + + ); }; diff --git a/packages/@vulcanjs/next-mui/index.ts b/packages/@vulcanjs/next-mui/index.ts index 4962150a..c2a28e7c 100644 --- a/packages/@vulcanjs/next-mui/index.ts +++ b/packages/@vulcanjs/next-mui/index.ts @@ -2,7 +2,8 @@ export * from "./emotion/createEmotionCache"; export { default as Link } from "./components/Link"; // deprecated alias export { default as NextMuiLink } from "./components/Link"; // recommanded alias to use + export { NextMuiButton, NextMuiListItemButton, -} from "./components/NextMuiButton"; // other components accepting links +} from "./components/NextMuiButton"; diff --git a/src/components/vn/learn/Steps.tsx b/src/components/vn/learn/Steps.tsx index 3989f82e..a3a3e01b 100644 --- a/src/components/vn/learn/Steps.tsx +++ b/src/components/vn/learn/Steps.tsx @@ -85,7 +85,6 @@ export const Steps = () => { {steps.map((step, stepIdx) => { return ( - {/** Since steps are pointing to a local page, we need a Next link */} maxStep} diff --git a/src/pages/learn/intro-offline.mdx b/src/pages/learn/intro-offline.mdx index 650d8cc4..3083c29b 100644 --- a/src/pages/learn/intro-offline.mdx +++ b/src/pages/learn/intro-offline.mdx @@ -1,4 +1,4 @@ -import { Button } from "@mui/material"; +import { NextMuiButton } from "@vulcanjs/next-mui"; import { LearnLayout } from "~/components/vn/learn/LearnLayout"; # Step 1: Opening Vulcan locally @@ -12,9 +12,9 @@ This is all you have to do for this step. Next step is going to be about the dat ## Go to step 2 - + export default function IntroOfflinePage(props) { return ; diff --git a/src/pages/learn/models-and-graphql.mdx b/src/pages/learn/models-and-graphql.mdx index 348e03e6..e81798d2 100644 --- a/src/pages/learn/models-and-graphql.mdx +++ b/src/pages/learn/models-and-graphql.mdx @@ -1,3 +1,4 @@ +import { NextMuiButton } from "@vulcanjs/next-mui"; import { Button } from "@mui/material"; import { LearnLayout } from "~/components/vn/learn/LearnLayout"; import { StepIfElse } from "~/components/vn/learn/Steps"; @@ -69,15 +70,18 @@ If this button is still disabled: - check if you Mongo server is running correctly - restart Vulcan Next (ctrl+C in your terminal, and `yarn run dev` again) - Click to go to next step} - ifNotOk={ - - } - > + Click to go to next step} + ifNotOk={ + + + } + + > export default function MongoPage(props) { return ; diff --git a/src/pages/learn/mongo.mdx b/src/pages/learn/mongo.mdx index 7c4b07a3..b3961d7b 100644 --- a/src/pages/learn/mongo.mdx +++ b/src/pages/learn/mongo.mdx @@ -1,3 +1,4 @@ +import { NextMuiButton } from "@vulcanjs/next-mui"; import { Button } from "@mui/material"; import { LearnLayout } from "~/components/vn/learn/LearnLayout"; import { StepIfElse } from "~/components/vn/learn/Steps"; @@ -72,9 +73,9 @@ If this button is still disabled: + Click to go to next step - + } ifNotOk={