UX-431 Align chevron in Page component breadcrumbs #746
Conversation
| <StyledLink {...rest} fontSize="200" lineHeight="200" fontWeight="medium"> | ||
| <Box as="span" display="inline-flex" align-items="center"> | ||
| <ChevronLeft size={20} /> | ||
| <StyledLink {...rest} fontSize="200" lineHeight="450" fontWeight="medium"> |
There was a problem hiding this comment.
Found a bug here, UnstyledLink doesn't accept fontSize="200" lineHeight="450" fontWeight="medium" at all, I don't see the styles being applied.
There was a problem hiding this comment.
At least here it doesn't seem like it works: https://matchbox-storybook.netlify.app/?path=/story/layout-page--basic-example
| <Box as="span" display="inline-flex" align-items="center"> | ||
| <ChevronLeft size={20} /> | ||
| <StyledLink {...rest} fontSize="200" lineHeight="450" fontWeight="medium"> | ||
| <Box as="span" display="inline-flex" align-items="center" lineHeight={tokens.spacing_450}> |
There was a problem hiding this comment.
What's weird is storybook is applying this lineHeight, but in the App, this lineHeight is missing, which is causing the misalignment.
Not really sure what the fix is here
There was a problem hiding this comment.
Take a look here for an example: https://matchbox-storybook.netlify.app/?path=/story/layout-page--basic-example
There was a problem hiding this comment.
I think all we need to do is make align-items -> alignItems? But still not sure why the bug isn't happening locally
approved
What Changed
PagecomponentHow To Test or Verify
npm run start:storybookPR Checklist
typelabel