-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Section Heading component #795
Update Section Heading component #795
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
How does this look on smaller screens? e.g. when there’s a long title plus a badge, does the badge align to the top of the title text? It would be great to add a story that show that :) (we might not need to create stories for each zeplin component/variant, but they’re a good guide e.g. https://zpl.io/9qv8l3A)
This is how it looks on smaller screens Do you have a moment? I'd have some questions about the spacings. |
@ArinzeJeffrey-droid sorry, I missed this — yes let’s take a look together |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ArinzeJeffrey-droid what’s the status of the alignment question? (I think you got in touch with Ed to discuss how to handle label next to a long title text when on small screens? (see other comments)
1039f26
to
c5f7247
Compare
I was able use zeplin to improve the spacing and text on smaller screens. |
c5f7247
to
0e494f5
Compare
- Added font-size to badge component defaults, so a badge in a heading isn’t really big
3f3a6e4
to
32c1adc
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just rebased and simplified some of the layout, and I’d already made these suggestions while reviewing — I’ll merge these too, then this is good to go! 🎉
…using a balanced wrapping algorithm where available, and hyphens. - Renames section-heading to section-header - converts the utility classes to component CSS
- Updates fixtures
All great! I added just one comment about storybook. |
Fixes #783
📸 Looks like
Small screens
Large screens
Changes
How to QA
git fetch
git checkout <pr-branch-name>
yarn
yarn storybook
Section heading
Check:
👾 Code changes
Check: