Chakra UI: Migrate Action card #8009

nikkhielseath · 2022-09-24T12:19:14Z

Migrating styles from Styled Components to Chakra UI

Description

Refactor the ActionCard component to use
the components provided by Chakra UI

Related Issue

Epic: Implement UI library #6374

src/components/ActionCard.tsx

gatsby-cloud · 2022-09-24T12:55:54Z

✅ ethereum-org-website-dev deploy preview ready

Deploy preview
Build logs · 18m build time

pettinarip

Great job @SNikhill 💪🏼

pettinarip · 2022-09-28T17:22:25Z

src/components/ActionCard.tsx

-      <ImageWrapper
-        isRight={isRight}
-        isBottom={isBottom}
+    <Link


Instead of wrapping this component with a Link, lets use the LinkOverlay component that Chakra offers for this specific scenario https://chakra-ui.com/docs/components/link-overlay/usage

I did a similar implementation in #7721

Ahh, I see. So, if I understand the usage correctly, the whole card will be wrapped in a LinkBox and then, I can just wrap the heading in a LinkOverlay
And the LinkBox will elevate this link in a way that to the user it looks like the whole card is a link.

pettinarip · 2022-09-28T17:23:02Z

src/components/ActionCard.tsx

-    transform: scale(1.02);
-  }
-`
+const LinkFocusStyles = {


Suggested change

const LinkFocusStyles = {

const linkFocusStyles = {

src/components/ActionCard.tsx

pettinarip · 2022-09-28T17:27:16Z

src/components/ActionCard.tsx

-`
+const LinkFocusStyles = {
+  textDecoration: "none",
+  borderRadius: "4px",


Suggested change

borderRadius: "4px",

borderRadius: "base",

pettinarip · 2022-09-28T17:28:10Z

src/components/ActionCard.tsx

+        minH={"260px"}
+        bg={"cardGradient"}
+        direction={"row"}


Suggested change

minH={"260px"}

bg={"cardGradient"}

direction={"row"}

minH="260px"

bg="cardGradient"

direction="row"

pettinarip · 2022-09-28T17:29:20Z

src/components/ActionCard.tsx

+        direction={"row"}
+        justify={isRight ? "flex-end" : "center"}
+        align={isBottom ? "flex-end" : "center"}
        className="action-card-image-wrapper"


@pettinarip remove & refactor this class

pettinarip · 2022-09-28T17:30:50Z

src/components/ActionCard.tsx

        className="action-card-image-wrapper"
+        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
      >
        {!isImageURL && <Image image={image} alt={alt || ""} />}


Lets use the Image from Chakra. https://chakra-ui.com/docs/components/image/usage

<Image as="GatsbyImage" ...>

pettinarip · 2022-09-28T17:31:11Z

src/components/ActionCard.tsx

-      </Content>
-    </Card>
+      </Flex>
+      <Box p={6} className="action-card-content">


@pettinarip remove & refactor this class

Make use of LinkBox and LinkOverlay from ChakraUI instead of wrapping the whole component with a Link

nikkhielseath

I have made the suggested changes.

That LinkBox and LinkOverlay thing is good but, I have left a question regarding the same in that section.

nikkhielseath · 2022-11-05T19:54:46Z

src/components/ActionCard.tsx

+      </Flex>
+      <Box p={6} className="action-card-content">
+        <Heading as="h3" fontSize="2xl" mt={2} mb={4}>
+          <LinkOverlay


Wrapping the title with LinkOverlay based on the suggested refactor

nikkhielseath · 2022-11-05T19:55:14Z

src/components/ActionCard.tsx

-      <ImageWrapper
-        isRight={isRight}
-        isBottom={isBottom}
+    <LinkBox


I have divided the Link styles between LinkBox and Overlay.

src/components/ActionCard.tsx

nikkhielseath · 2022-11-05T20:05:12Z

src/components/ActionCard.tsx

+            alt={alt || ""}
+            as={GatsbyImage}
+            maxH="257px"
+            maxW={{ base: "372px", sm: "311px" }}


Okay, as suggested, I am using Image. The breakpoint thing was nice to know about. Thank you for mentioning that in the Migration Guide. But, just to inform you the example the in Migration Guide is inversed.

@SNikhill keep in mind here that in this example you provided and the Image with styled components are using a max-width media query, but when using Chakra tokens by default use min-width. So the example in the migration guide is actually correct! 😄

Therefore, what you provided needs to be reversed.

Suggested change

maxW={{ base: "372px", sm: "311px" }}

maxW={{ base: "311px", sm: "372px" }}

Ahh, okay. Thank you for explaining that.

TylerAPfledderer

Hey @SNikhill !

Following up on this PR as it has grown a little stale. I've provided some thoughts. 😸

An aside: @pettinarip It appears that this component has an existing broken layout (Check at roughly 414px - 500px screen widths). Probably save a fix for post migration in a separate PR?

TylerAPfledderer · 2022-12-18T01:55:36Z

src/components/ActionCard.tsx

+            alt={alt || ""}
+            as={GatsbyImage}
+            maxH="257px"
+            maxW={{ base: "372px", sm: "311px" }}


@SNikhill keep in mind here that in this example you provided and the Image with styled components are using a max-width media query, but when using Chakra tokens by default use min-width. So the example in the migration guide is actually correct! 😄

Therefore, what you provided needs to be reversed.

Suggested change

maxW={{ base: "372px", sm: "311px" }}

maxW={{ base: "311px", sm: "372px" }}

TylerAPfledderer · 2022-12-18T01:59:21Z

src/components/ActionCard.tsx

+            {title}
+          </LinkOverlay>
+        </Heading>
+        <Text mb={0} opacity={0.8}>


opacity will break the LinkBox behavior when hovering over this text due to CSS Stacking context, resulting in the text not being clickable. I suggest the following to maintain accessibility with color contrast.

This requires the use of the useColorModeValue hook from Chakra

Before the component return:

const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")

and then...

Suggested change

<Text mb={0} opacity={0.8}>

<Text mb={0} color={descriptionColor}>

Thank you for the information! I have made the change.

src/components/ActionCard.tsx

Co-authored-by: Tyler Pfledderer <tyler.pfledderer@gmail.com>

gitpoap-bot · 2023-03-27T15:59:07Z

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team.

GitPOAP: 2023 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.

nikkhielseath requested review from corwintines, jmcook1186, minimalsm, pettinarip, samajammin and wackerow as code owners September 24, 2022 12:19

github-actions bot added the review needed 👀 label Sep 24, 2022

nikkhielseath changed the title ~~Refactor/#6374 action card~~ Chakra UI: Migrate Action card Sep 24, 2022

nikkhielseath commented Sep 24, 2022

View reviewed changes

src/components/ActionCard.tsx Show resolved Hide resolved

nikkhielseath commented Sep 24, 2022

View reviewed changes

src/components/ActionCard.tsx Outdated Show resolved Hide resolved

pettinarip added the archived: chakra-migration label Sep 24, 2022

pettinarip requested changes Sep 28, 2022

View reviewed changes

pettinarip self-assigned this Sep 28, 2022

nikkhielseath added 6 commits November 6, 2022 00:40

chore(actionCard): use chakra title & heading

bc3e13d

chore(actionCard): use chakra box

2f0eb48

chore(imageWrapper): use chakra flex

4a76a84

chore(card): use chakra props to customise link

9f8df89

fix(linkFocusStyle): define correct type

e8adc7a

refactor(actionCard): use Link Box & Overlay

1fb7316

Make use of LinkBox and LinkOverlay from ChakraUI instead of wrapping the whole component with a Link

nikkhielseath force-pushed the refactor/#6374-action-card branch from ea95b32 to 1fb7316 Compare November 5, 2022 19:10

nikkhielseath added 2 commits November 6, 2022 01:22

refactor(actionCardImage): use chakra image

69f7f1a

fix: strings without braces

70159a0

nikkhielseath force-pushed the refactor/#6374-action-card branch from fcd4c05 to 70159a0 Compare November 5, 2022 19:53

nikkhielseath commented Nov 5, 2022

View reviewed changes

nikkhielseath requested a review from pettinarip November 18, 2022 07:50

TylerAPfledderer suggested changes Dec 18, 2022

View reviewed changes

pettinarip mentioned this pull request Jan 18, 2023

Epic: Implement UI library #6374

Closed

80 tasks

refactor(description): color instead of opacity

8c9acfe

nikkhielseath and others added 3 commits January 29, 2023 00:42

fix(ImageWrapper): use correct breakpoints

093c2b6

Update src/components/ActionCard.tsx

c4d0f04

Co-authored-by: Tyler Pfledderer <tyler.pfledderer@gmail.com>

Refactor Image component

cfdcf29

corwintines approved these changes Feb 22, 2023

View reviewed changes

corwintines mentioned this pull request Feb 22, 2023

Remove className and css class implementations in ActionCard #9547

Closed

corwintines merged commit 26560f0 into ethereum:dev Mar 27, 2023

corwintines mentioned this pull request Mar 29, 2023

Deploy v7.7.2 #9831

Merged

	maxW={{ base: "372px", sm: "311px" }}
	maxW={{ base: "311px", sm: "372px" }}

	<Text mb={0} opacity={0.8}>
	<Text mb={0} color={descriptionColor}>

Chakra UI: Migrate Action card #8009

Chakra UI: Migrate Action card #8009

Uh oh!

Conversation

nikkhielseath commented Sep 24, 2022

Description

Related Issue

Uh oh!

Uh oh!

Uh oh!

gatsby-cloud bot commented Sep 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ ethereum-org-website-dev deploy preview ready

Uh oh!

pettinarip left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nikkhielseath left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

TylerAPfledderer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

gitpoap-bot bot commented Mar 27, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gatsby-cloud bot commented Sep 24, 2022 •

edited

Loading