Skip to content

Conversation

LinKCoding
Copy link
Contributor

@LinKCoding LinKCoding commented Jul 28, 2025

Overview

Updates the Anchor and Button components to allow both leading and trailing icons

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GM-1052
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

  1. Go to the Anchor story ?path=/docs/typography-anchor--docs&globals=viewport:responsive and scroll down to the "Icons" section
  2. See that the Anchor still work, and the icons render as expected
  3. Turn on dark mode and check styling
  4. Check that the new text makes sense
  5. Go to Button: ?path=/docs/atoms-buttons-button--docs and scroll to the "Inline icons" section
  6. See that the middle example now has both leading and trailing icons
  7. Turn on dark mode and check styling
  8. Check that the new text makes sense
  9. Go to Menu: /?path=/docs/molecules-menu--docs
  10. Check that Menu items can now have multiple icons, and right positioned icons (in the no role canvas), and render correctly
  11. ...
  12. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

Copy link

nx-cloud bot commented Jul 28, 2025

View your CI Pipeline Execution ↗ for commit 7e37ce1


☁️ Nx Cloud last updated this comment at 2025-10-07 16:33:25 UTC

@LinKCoding LinKCoding marked this pull request as ready for review August 27, 2025 14:54
@LinKCoding LinKCoding requested a review from a team as a code owner August 27, 2025 14:54
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code looks good! have a couple of comments around icon alignment + some story rendering

export const InlineIcons: Story = {
render: () => (
<FlexBox gap={16} row>
<FlexBox flexDirection={{ _: 'column', sm: 'row' }} gap={16}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do these looks off to you? the arrows look top aligned

Image

@LinKCoding LinKCoding requested a review from dreamwasp September 3, 2025 17:02
Copy link
Contributor

@dreamwasp dreamwasp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

something weird i've noticed is that disabled links no longer apply disabled styles and don't change over to buttons. this wasn't introduced in this PR but i'm curious when it started to happen

Comment on lines 107 to 109
iconPosition: 'right',
iconAndTextGap: 16,
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: i'm sortof anti explicit style testing, but i think we can just think about cleaning these up when we eventually introduce visual testing

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alrighties, I forgot about this tbh and some of the tests were AI-gen tbh
I did remove the ones related to spacing
but I kept the layout related ones, thoughts?

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://68c81e35289129129b6ca3f8--gamut-preview.netlify.app

Deploy Logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants