Merge pull request #7543 from ethereum/chakra-emoji

[UI lib] Chakra Emoji migration

docs/best-practices.md

@@ -151,7 +151,7 @@ export default ComponentName
 import Emoji from "./Emoji"
 
 // Within JSX:
-;<Emoji text=":star:" size={1} /> // sized in `em`
+;<Emoji text=":star:" fontSize="xl" /> // the base fontSize is `md`
 ```
 
 - **Icons**: We use [React Icons](https://react-icons.github.io/react-icons/)

docs/chakra-migration-guide.md

@@ -126,6 +126,18 @@ import Button from "../Button" // <-- use the new Button component built with Ch
 <Button variant="outline" />
 ```
 
+- [Deprecated] `src/components/OldEmoji` - replace it with the new `src/components/Emoji`
+
+```tsx
+// before
+<Emoji size={3} mr="1rem" text=":star:">
+
+// now
+<Emoji fontSize="5xl" mr={4} text=":star:">
+```
+
+Note: check out the [`fontSize`](https://chakra-ui.com/docs/styled-system/theme#typography) and [`spacing`](https://chakra-ui.com/docs/styled-system/theme#spacing) possible values.
+
 ## Do you have any other question?
 
 Ping us in Discord, in the `#ui-library-migration` channel, or leave a comment here or in your opened PR, and we can help you out 💪

src/components/Accordion.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 import { FakeLink } from "./SharedStyledComponents"
 
 import React, { useState } from "react"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 const Card = styled.div`
   border: 1px solid ${(props) => props.theme.colors.border};

src/components/AssetDownload.tsx

@@ -4,7 +4,7 @@ import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"
 import ButtonLink from "./ButtonLink"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Link from "./Link"
 
 export interface IHide {

src/components/BoxGrid.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 export interface IBoxItem {
   emoji: string

src/components/BugBountyPoints.tsx

@@ -5,7 +5,7 @@ import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
 import axios from "axios"
 
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 import Icon from "./Icon"
 import Link from "./Link"

src/components/Callout.tsx

@@ -5,7 +5,7 @@ import { GatsbyImage } from "gatsby-plugin-image"
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"
 // Components
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 const StyledCard = styled.div`
   display: flex;

src/components/Card.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 const StyledCard = styled.div`
   display: flex;

src/components/Codeblock.tsx

@@ -8,7 +8,7 @@ import Highlight, {
 } from "prism-react-renderer"
 import Translation from "./Translation"
 import CopyToClipboard from "./CopyToClipboard"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 const LINES_BEFORE_COLLAPSABLE = 8
 

src/components/DocLink.tsx

@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react"
 import styled from "@emotion/styled"
 import Icon from "./Icon"
 import Link from "./Link"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 export interface IProps {
   children?: React.ReactNode

src/components/DocsNav.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import styled from "@emotion/styled"
 
 import Link from "./Link"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 
 import docLinks from "../data/developer-docs-links.yaml"

src/components/Emoji.tsx

@@ -1,46 +1,33 @@
 import React from "react"
-import { Twemoji } from "react-emoji-render"
 import styled from "@emotion/styled"
-import { margin, MarginProps } from "styled-system"
+import { Box, HTMLChakraProps } from "@chakra-ui/react"
+import { Twemoji, Props } from "react-emoji-render"
+
 import { IS_DEV } from "../utils/env"
 
-export interface IProps extends MarginProps {
-  size?: number
-  text: string
-}
+export interface IProps extends HTMLChakraProps<"span">, Props {}
 
-const StyledEmoji = styled(Twemoji)<{ size: number }>`
+const StyledEmoji = styled(Twemoji)`
   & > img {
-    width: ${(props) => props.size}em !important;
-    height: ${(props) => props.size}em !important;
     margin: 0 !important;
   }
-  display: inline-block; /* respect top & bottom margins */
-  ${margin}
 `
 
-const Emoji: React.FC<IProps> = ({ size = 1.5, text, ...props }) => {
+const Emoji = (props: IProps) => {
   return (
-    <StyledEmoji
+    <Box
+      as={StyledEmoji}
       // The emoji lib is switching the protocol based on the existence of the
       // `location` object. That condition in DEV causes hydration mismatches.
       // https://github.com/tommoor/react-emoji-render/blob/master/src/index.js#L8
       // Hence, here we are defining how we want it to handle the protocol to
       // avoid differences in SSR
       options={{ protocol: IS_DEV ? "http" : "https" }}
-      size={size}
-      text={text}
       svg
+      d="inline-block"
       {...props}
     />
   )
 }
 
-Emoji.defaultProps = {
-  mt: 0,
-  mr: 0,
-  mb: 0,
-  ml: 0,
-}
-
 export default Emoji

src/components/EthExchanges.tsx

@@ -8,7 +8,7 @@ import CardList from "./CardList"
 import Link from "./Link"
 import { getLocaleTimestamp } from "../utils/time"
 import { trackCustomEvent } from "../utils/matomo"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 import { StyledSelect as Select } from "./SharedStyledComponents"
 import { translateMessageId } from "../utils/translations"

src/components/EventCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import ButtonLink from "./ButtonLink"
 
 const StyledCard = styled.div`

src/components/GitStars.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Icon from "./Icon"
 import Link from "./Link"
 

src/components/HorizontalCard.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 const StyledCard = styled.div`
   border-radius: 4px;

src/components/InfoBanner.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import { margin } from "styled-system"
 
 const Container = styled.div`

src/components/Leaderboard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Link from "./Link"
 
 import Translation from "./Translation"

src/components/MeetupList.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 import { sortBy } from "lodash"
 
 // Components
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import InfoBanner from "./InfoBanner"
 import Link from "./Link"
 import Translation from "./Translation"

src/components/Nav/Mobile.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 
-import Emoji from "../Emoji"
+import Emoji from "../OldEmoji"
 import Icon from "../Icon"
 import Link from "../Link"
 import NakedButton from "../NakedButton"

src/components/OldEmoji.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { Twemoji } from "react-emoji-render"
+import styled from "@emotion/styled"
+import { margin, MarginProps } from "styled-system"
+
+import { IS_DEV } from "../utils/env"
+
+export interface IProps extends MarginProps {
+  size?: number
+  text: string
+}
+
+const StyledEmoji = styled(Twemoji)<{ size: number }>`
+  & > img {
+    width: ${(props) => props.size}em !important;
+    height: ${(props) => props.size}em !important;
+    margin: 0 !important;
+  }
+  display: inline-block; /* respect top & bottom margins */
+  ${margin}
+`
+
+/**
+ * DEPRECATED component.
+ *
+ * Use the new `src/components/Emoji.tsx` instead.
+ */
+const Emoji: React.FC<IProps> = ({ size = 1.5, text, ...props }) => {
+  return (
+    <StyledEmoji
+      // The emoji lib is switching the protocol based on the existence of the
+      // `location` object. That condition in DEV causes hydration mismatches.
+      // https://github.com/tommoor/react-emoji-render/blob/master/src/index.js#L8
+      // Hence, here we are defining how we want it to handle the protocol to
+      // avoid differences in SSR
+      options={{ protocol: IS_DEV ? "http" : "https" }}
+      size={size}
+      text={text}
+      svg
+      {...props}
+    />
+  )
+}
+
+Emoji.defaultProps = {
+  mt: 0,
+  mr: 0,
+  mb: 0,
+  ml: 0,
+}
+
+export default Emoji

src/components/ReleaseBanner.tsx

@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 
 // Components
 import BannerNotification from "./BannerNotification"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Icon from "./Icon"
 import Link from "./Link"
 import Translation from "./Translation"

src/components/SectionNav.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 
 const Card = styled.div`

src/components/SelectableCard.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 
 import Checkbox from "./Checkbox"
 

src/components/StablecoinAccordion.tsx

@@ -7,7 +7,7 @@ import styled from "@emotion/styled"
 // import { motion } from "framer-motion"
 import ButtonLink from "./ButtonLink"
 import CardList, { CardListItem } from "./CardList"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Link, { navigate } from "./Link"
 import Icon from "./Icon"
 import InfoBanner from "./InfoBanner"

src/components/StablecoinBoxGrid.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import Link, { navigate } from "./Link"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 import { isMobile } from "../utils/isMobile"
 

src/components/Staking/StakingLaunchpadWidget.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import { StyledSelect as Select } from "../SharedStyledComponents"
 import ButtonLink from "../ButtonLink"
-import Emoji from "../Emoji"
+import Emoji from "../OldEmoji"
 import Translation from "../Translation"
 
 import { trackCustomEvent } from "../../utils/matomo"

src/components/TranslationBanner.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled"
 
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 
 const H3 = styled.h3`

src/components/TranslationBannerLegal.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 
 // Component
 import { ButtonPrimary } from "./SharedStyledComponents"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Icon from "./Icon"
 import Translation from "./Translation"
 

src/components/TranslationLeaderboard.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled"
 import { reverse, sortBy } from "lodash"
 
 // Components
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import { Option, OptionContainer, OptionText } from "./SharedStyledComponents"
 import Translation from "./Translation"
 

src/components/TutorialMetadata.tsx

@@ -7,7 +7,7 @@ import Link from "./Link"
 import TutorialTags from "./TutorialTags"
 import { getLocaleTimestamp } from "../utils/time"
 import { FakeLink } from "./SharedStyledComponents"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Translation from "./Translation"
 import { Lang } from "../utils/languages"
 import { TranslationKey } from "../utils/translations"

src/components/UpgradeBannerNotification.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import BannerNotification from "./BannerNotification"
-import Emoji from "./Emoji"
+import Emoji from "./OldEmoji"
 import Link from "./Link"
 import styled from "@emotion/styled"
 

src/pages-conditional/dapps.tsx

@@ -15,7 +15,7 @@ import GhostCard from "../components/GhostCard"
 import Link from "../components/Link"
 import InfoBanner from "../components/InfoBanner"
 import DocLink from "../components/DocLink"
-import Emoji from "../components/Emoji"
+import Emoji from "../components/OldEmoji"
 import ButtonLink from "../components/ButtonLink"
 import PageMetadata from "../components/PageMetadata"
 import ProductList from "../components/ProductList"

src/pages/bug-bounty.tsx

@@ -11,7 +11,7 @@ import Card from "../components/Card"
 import Leaderboard from "../components/Leaderboard"
 import BugBountyCards from "../components/BugBountyCards"
 import Link from "../components/Link"
-import Emoji from "../components/Emoji"
+import Emoji from "../components/OldEmoji"
 import CardList from "../components/CardList"
 import Breadcrumbs from "../components/Breadcrumbs"
 import ButtonLink from "../components/ButtonLink"