Merge pull request #11277 from TylerAPfledderer/refactor/breadcrumb-style

refactor(Breadcrumbs): update style usage

Author: pettinarip

src/@chakra-ui/gatsby-plugin/components/Breadcrumb.ts

@@ -0,0 +1,45 @@
+import { createMultiStyleConfigHelpers } from "@chakra-ui/react"
+import { breadcrumbAnatomy } from "@chakra-ui/anatomy"
+import { breadcrumbDefaultTheme, defineMergeStyles } from "./components.utils"
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  breadcrumbAnatomy.keys
+)
+
+const baseStyle = defineMergeStyles(breadcrumbDefaultTheme.baseStyle, {
+  list: {
+    m: 0,
+    lineHeight: "base",
+    flexWrap: "wrap",
+  },
+  item: {
+    color: "body.medium",
+    letterSpacing: "wider",
+    m: 0,
+  },
+  link: {
+    fontWeight: "normal",
+    _hover: {
+      color: "primary.base",
+      textDecor: "none",
+    },
+    _active: {
+      color: "primary.base",
+    },
+    /*
+     * `&[aria-current="page"]`
+     * Redundancy to ensure styling on the active
+     * link is applied.
+     */
+    _activeLink: {
+      color: "primary.base",
+    },
+  },
+  separator: {
+    mx: "2.5",
+  },
+})
+
+export const Breadcrumb = defineMultiStyleConfig({
+  baseStyle,
+})

src/@chakra-ui/gatsby-plugin/components/index.ts

@@ -2,6 +2,7 @@ import { Alert } from "./Alert"
 import { Avatar } from "./Avatar"
 import { Badge } from "./Badge"
 import { Button } from "./Button"
+import { Breadcrumb } from "./Breadcrumb"
 import { Heading } from "./Heading"
 import { Link } from "./Link"
 import { Tag } from "./Tag"
@@ -17,7 +18,6 @@ import { Switch } from "./Switch"
 import { Input } from "./Input"
 import {
   accordionDefaultTheme,
-  breadcrumbDefaultTheme,
   closeButtonDefaultTheme,
   codeDefaultTheme,
   dividerDefaultTheme,
@@ -34,7 +34,7 @@ export default {
   Alert,
   Avatar,
   Badge,
-  Breadcrumb: breadcrumbDefaultTheme,
+  Breadcrumb,
   Button,
   Checkbox,
   CloseButton: closeButtonDefaultTheme,

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
+import { Stack } from "@chakra-ui/react"
 import BreadcrumbsComponent from "."
 
 type BreadcumbsType = typeof BreadcrumbsComponent
@@ -15,10 +16,10 @@ type Story = StoryObj<typeof meta>
 
 export const Breadcrumbs: Story = {
   render: () => (
-    <>
+    <Stack spacing="8">
       <BreadcrumbsComponent slug="/en/staking/" />
       <BreadcrumbsComponent slug="/en/staking/solo/" />
       <BreadcrumbsComponent slug="/en/roadmap/merge/issuance/" />
-    </>
+    </Stack>
   ),
 }

src/components/Breadcrumbs/index.tsx

@@ -68,45 +68,15 @@ const Breadcrumbs: React.FC<IProps> = ({
     .slice(startDepth)
 
   return (
-    <Breadcrumb
-      dir="auto"
-      position="relative"
-      zIndex="1"
-      mb={8}
-      spacing="2.5"
-      listProps={{
-        m: 0,
-        lineHeight: 1.6,
-        flexWrap: "wrap",
-      }}
-      {...restProps}
-    >
+    <Breadcrumb dir="auto" {...restProps}>
       {crumbs.map((crumb, idx) => {
         const isCurrentPage = slug === crumb.fullPath
         return (
-          <BreadcrumbItem
-            key={idx}
-            isCurrentPage={isCurrentPage}
-            color="body.medium"
-            letterSpacing="wider"
-            m={0}
-          >
+          <BreadcrumbItem key={idx} isCurrentPage={isCurrentPage}>
             <BreadcrumbLink
               as={BaseLink}
               to={crumb.fullPath}
               isPartiallyActive={isCurrentPage}
-              fontWeight="normal"
-              _hover={{ color: "primary.base", textDecor: "none" }}
-              _active={{ color: "primary.base" }}
-              sx={{
-                /*
-                 * Redundancy to ensure styling on the active
-                 * link is applied.
-                 */
-                '&[aria-current="page"]': {
-                  color: "primary.base",
-                },
-              }}
             >
               {crumb.text.toUpperCase()}
             </BreadcrumbLink>

src/pages/bug-bounty.tsx

@@ -442,7 +442,7 @@ const BugBountiesPage = ({
       <Content>
         <HeroCard>
           <HeroContainer>
-            <Breadcrumbs slug={location.pathname} />
+            <Breadcrumbs slug={location.pathname} mb="8" />
             <Row>
               <On />
               <Title>

src/pages/roadmap/vision.tsx

@@ -47,7 +47,7 @@ const PageDivider = () => (
 )
 
 const PageContent = (props: ChildOnlyProp) => (
-  <Box py={4} px={8} w="full" {...props} />
+  <Flex flexDirection="column" gap="8" py={4} px={8} w="full" {...props} />
 )
 
 const H2 = (props: HeadingProps) => (

src/templates/roadmap.tsx

@@ -219,7 +219,7 @@ const RoadmapPage = ({
       <HeroContainer>
         <Flex w="100%" flexDirection={{ base: "column", md: "row" }}>
           <TitleCard>
-            <Breadcrumbs slug={location.pathname} />
+            <Breadcrumbs slug={location.pathname} mb="8" />
             <Title>{mdx.frontmatter.title}</Title>
             <Text>{mdx.frontmatter.description}</Text>
             {mdx?.frontmatter?.buttons && (

src/templates/staking.tsx

@@ -401,7 +401,7 @@ const StakingPage = ({
     <Box position="relative" width="full">
       <HeroContainer>
         <Flex direction="column" justify="flex-start" w="full" p={8}>
-          <Breadcrumbs slug={location.pathname} />
+          <Breadcrumbs slug={location.pathname} mb="8" />
           <Title>{mdx.frontmatter.title}</Title>
           <UnorderedList>
             {(summaryPoints || []).map((point, idx) => (

src/templates/static.tsx

@@ -285,7 +285,7 @@ const StaticPage = ({
             },
           }}
         >
-          <Breadcrumbs slug={slug} />
+          <Breadcrumbs slug={slug} mb="8" />
           <Text
             color="text200"
             dir={isLangRightToLeft(language as Lang) ? "rtl" : "ltr"}

src/templates/upgrade.tsx

@@ -382,7 +382,7 @@ const UpgradePage = ({
     <Container>
       <HeroContainer>
         <TitleCard>
-          <Breadcrumbs slug={slug} startDepth={1} mt={2} />
+          <Breadcrumbs slug={slug} startDepth={1} mt={2} mb="8" />
           <Title>{mdx.frontmatter.title}</Title>
           <Box>
             <List listStyleType="disc">