Merge pull request #10823 from ethereum/fix-nav

Fix Nav styles to match DS header

Author: corwintines

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

@@ -10,17 +10,15 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
  */
 const ICON_SELECTOR = "& svg"
 
-const getBaseColor = (isSecondary: boolean) =>
-  !isSecondary ? "primary.base" : "body.base"
-
-const baseStyle = defineStyle((props) => ({
+const baseStyle = defineStyle({
   borderRadius: "base",
   border: "1px",
-  color: getBaseColor(props.isSecondary),
+  color: "primary.base",
   lineHeight: "1.6",
   transitionProperty: "common",
   transitionDuration: "normal",
   whiteSpace: "normal",
+  p: "unset",
   _focusVisible: {
     outline: "4px solid",
     outlineColor: "primary.hover",
@@ -33,7 +31,16 @@ const baseStyle = defineStyle((props) => ({
   _hover: {
     color: "primary.hover",
   },
-}))
+  "&[data-secondary='true']": {
+    color: "body.base",
+  },
+  "&.chakra-link": {
+    textDecoration: "none",
+    _hover: {
+      textDecoration: "none",
+    },
+  },
+})
 
 const variantSolid = defineStyle({
   color: "background.base",
@@ -68,7 +75,6 @@ const variantGhost = {
 
 const variantLink = defineStyle({
   borderColor: "transparent",
-  color: "primary.base",
   fontWeight: 700,
   textDecor: "underline",
   py: 0,
@@ -78,47 +84,29 @@ const variantLink = defineStyle({
   },
 })
 
-/**
- * @deprecated This is no longer needed. Styling for just the icon is not
- * unique compared to the variants used for text (as of the new DS)
- */
-const variantIcon = defineStyle({
-  appearance: "none",
-  background: "inherit",
-  padding: "initial",
-  border: 0,
-  color: "inherit",
-  boxShadow: "none",
-  _hover: {
-    color: "primary.base",
-    boxShadow: "none",
-  },
-})
-
 const sizes = {
-  md: {
-    py: "2 !important",
-    px: "4 !important",
+  md: defineStyle({
+    py: "2",
+    px: "4",
     [ICON_SELECTOR]: {
       fontSize: "2xl",
     },
-  },
-  sm: {
+  }),
+  sm: defineStyle({
     fontSize: "xs",
-    py: "1.5 !important",
-    px: "2 !important",
+    py: "1.5",
+    px: "2",
     [ICON_SELECTOR]: {
       fontSize: "md",
     },
-  },
+  }),
 }
 
 const variants = {
   solid: variantSolid,
   outline: variantOutline,
   ghost: variantGhost,
   link: variantLink,
-  icon: variantIcon,
 }
 
 export const Button = defineStyleConfig({

src/components/Button/Button.stories.tsx

@@ -1,10 +1,13 @@
 import * as React from "react"
-import { HStack, IconButton, ThemingProps, VStack } from "@chakra-ui/react"
+import { HStack, ThemingProps, Text, VStack } from "@chakra-ui/react"
 import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
 import { Meta, StoryObj } from "@storybook/react"
-import { MdExpandMore, MdChevronRight } from "react-icons/md"
-import Button from "."
+import { MdExpandMore, MdChevronRight, MdNightlight } from "react-icons/md"
 import theme from "../../@chakra-ui/gatsby-plugin/theme"
+import ButtonLink from "../ButtonLink"
+import IconButton from "../IconButton"
+import Translation from "../Translation"
+import Button from "."
 
 type ButtonType = typeof Button
 
@@ -45,15 +48,12 @@ export const StyleVariants: Story = {
   },
   render: (args) => (
     <VStack spacing={4}>
-      {variants.map((variant, idx) => {
-        if (args.isSecondary && variant === "solid") return
-        return (
-          <HStack spacing={4} key={idx}>
-            <Button variant={variant} {...args} />
-            <Button variant={variant} isDisabled {...args} />
-          </HStack>
-        )
-      })}
+      {variants.map((variant, idx) => (
+        <HStack spacing={4} key={idx}>
+          <Button variant={variant} {...args} />
+          <Button variant={variant} isDisabled {...args} />
+        </HStack>
+      ))}
     </VStack>
   ),
 }
@@ -118,3 +118,20 @@ export const MultiLineText: Story = {
     </HStack>
   ),
 }
+
+export const OverrideStyles: Story = {
+  render: () => (
+    <>
+      <Text>
+        Show custom styling examples here for visual testing of overrides from
+        the theme config
+      </Text>
+      <VStack>
+        <IconButton aria-label="toggle" icon={<MdNightlight />} px="1.5" />
+        <ButtonLink to="#" borderRadius="full" px="0" py="0">
+          <Translation id="get-involved" />
+        </ButtonLink>
+      </VStack>
+    </>
+  ),
+}

src/components/Button/index.tsx

@@ -2,17 +2,42 @@ import React from "react"
 import {
   Button as ChakraButton,
   ButtonProps,
-  useStyleConfig,
+  forwardRef,
 } from "@chakra-ui/react"
 
 import { scrollIntoView } from "../../utils/scrollIntoView"
 
+export const checkIsSecondary = (props: {
+  variant?: string
+  isSecondary?: boolean
+}) => {
+  const { variant, isSecondary } = props
+  // These two variants do not have secondary styling, so prevent overrides
+  return {
+    "data-secondary":
+      !["solid", "link"].includes(variant || "solid") && isSecondary,
+  }
+}
+
 export interface IProps extends ButtonProps {
+  /**
+   * Set string value that matches the `id` attribute value used
+   * on another element in a given page. Selecting the button will then
+   * trigger a scroll to that element.
+   */
   toId?: string
+  /**
+   * Custom theme prop. If true, `body` color is used instead of
+   * `primary` color in the theming.
+   *
+   * `NOTE`: Does not apply to the `Solid` or `Link` variants
+   */
   isSecondary?: boolean
 }
 
-const Button: React.FC<IProps> = ({ toId, isSecondary, onClick, ...props }) => {
+const Button = forwardRef<IProps, "button">((props, ref) => {
+  const { toId, onClick, isSecondary, ...rest } = props
+
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (toId) {
       scrollIntoView(toId)
@@ -21,14 +46,14 @@ const Button: React.FC<IProps> = ({ toId, isSecondary, onClick, ...props }) => {
     onClick?.(e)
   }
 
-  /**
-   *  Prevent React warning that does not recognize `isSecondary` on DOM
-   *  while still sending prop to the theme config
-   */
-  const styles = useStyleConfig("Button", { ...props, isSecondary })
-
-  // `styles` object sent to `sx` prop per convention
-  return <ChakraButton onClick={handleOnClick} sx={styles} {...props} />
-}
+  return (
+    <ChakraButton
+      ref={ref}
+      onClick={handleOnClick}
+      {...checkIsSecondary({ variant: rest.variant?.toString(), isSecondary })}
+      {...rest}
+    />
+  )
+})
 
 export default Button

src/components/ButtonLink.tsx

@@ -1,39 +1,13 @@
 import React from "react"
-import { Button, ButtonProps, useStyleConfig } from "@chakra-ui/react"
 
+import type { IProps as IButtonProps } from "./Button"
 import { BaseLink, IBaseProps as ILinkProps } from "./Link"
+import Button from "./Button"
 
-export interface IProps extends ILinkProps, ButtonProps {
-  isSecondary?: boolean
-}
-
-const ButtonLink: React.FC<IProps> = ({ children, isSecondary, ...props }) => {
-  /**
-   *  Prevent React warning that does not recognize `isSecondary` on DOM
-   *  while still sending prop to the theme config
-   */
-  const styles = useStyleConfig("Button", {
-    ...props,
-    isSecondary,
-  })
+export interface IProps extends ILinkProps, Omit<IButtonProps, "toId"> {}
 
-  return (
-    <Button
-      as={BaseLink}
-      activeStyle={{}}
-      // `styles` object sent to `sx` prop per convention
-      sx={{
-        ...styles,
-        textDecoration: "none",
-        _hover: { ...styles["_hover"], textDecoration: "none" },
-        _visited: { color: styles["color"] },
-      }}
-      fontWeight="normal"
-      {...props}
-    >
-      {children}
-    </Button>
-  )
+const ButtonLink: React.FC<IProps> = (props) => {
+  return <Button as={BaseLink} activeStyle={{}} {...props} />
 }
 
 export default ButtonLink

src/components/IconButton.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import {
+  IconButton as ChakraIconButton,
+  IconButtonProps as ChakraIconButtonProps,
+} from "@chakra-ui/react"
+import { checkIsSecondary, IProps as IButtonProps } from "./Button"
+
+interface IconButtonProps
+  extends Omit<IButtonProps, keyof ChakraIconButtonProps>,
+    ChakraIconButtonProps {}
+
+const IconButton = (props: IconButtonProps) => {
+  const { isSecondary, ...rest } = props
+  return (
+    <ChakraIconButton
+      {...checkIsSecondary({ variant: rest.variant?.toString(), isSecondary })}
+      {...rest}
+    />
+  )
+}
+
+export default IconButton

src/components/Nav/Menu.tsx

@@ -1,19 +1,19 @@
 import React from "react"
 import { useI18next } from "gatsby-plugin-react-i18next"
-import { Flex, List } from "@chakra-ui/react"
+import { Flex, FlexProps, List } from "@chakra-ui/react"
 
 import NavDropdown from "./Dropdown"
 import { getDirection } from "../../utils/translations"
 
 import { Lang } from "../../utils/languages"
 import { ISections } from "./types"
 
-export interface IProps {
+export interface IProps extends FlexProps {
   path: string
   sections: ISections
 }
 
-const Menu: React.FC<IProps> = ({ path, sections }) => {
+const Menu: React.FC<IProps> = ({ path, sections, ...props }) => {
   const { language } = useI18next()
   const direction = getDirection(language as Lang)
   const shouldShowSubNav = path.includes("/developers/")
@@ -23,7 +23,13 @@ const Menu: React.FC<IProps> = ({ path, sections }) => {
   const [start, basics, protocol] = learn.items
 
   return (
-    <Flex as={List} alignItems="center" m={0} gap={{ base: 3, xl: 6 }}>
+    <Flex
+      as={List}
+      alignItems="center"
+      m={0}
+      gap={{ base: 3, xl: 6 }}
+      {...props}
+    >
       <NavDropdown section={useEthereum} hasSubNav={shouldShowSubNav}>
         {useEthereum.items.map((item, index) => (
           <NavDropdown.Item