[docs] fix callout icon alignment#1433
Conversation
|
@alexcarpenter is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @alexcarpenter! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
| flexShrink: 0, | ||
| width: 20, | ||
| height: 20, | ||
| height: 'calc(16px * 1.65)', |
There was a problem hiding this comment.
Match the height of the icon to the line-height of the text to vertically align the icon to the first line of text.
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
| flexShrink: 0, | ||
| width: 20, | ||
| height: 20, | ||
| height: 'calc(16px * 1.65)', |
There was a problem hiding this comment.
const iconStyles = stylex.create({
base: {
flexShrink: 0,
width: 20,
height: 'calc(16px * 1.65)',
marginInlineEnd: -2,
color: vars['--color-fd-card'],
fill: vars['--color-fd-card'],
},
+ withTitle: {
+ height: 'calc(14px * 1.5)',
+ },
info: { fill: vars['--color-fd-info'] },
warning: { fill: vars['--color-fd-warning'] },
error: { fill: vars['--color-fd-error'] },
success: { fill: vars['--color-fd-success'] },
});When a title is used, we could conditionally apply an override to the height since the title font size is 14px with 1.5 line-height.
There was a problem hiding this comment.
|
Please run prettier on the changes! |
What changed / motivation ?
The docs
<Callout />icon alignment was not aligned to the first line of text.Note
Looks like title usage within Callouts is roughly aligned, but not when titles are omitted. But unclear why the titles are 14px when the text within the callouts are rendering at 16px. We could conditionally apply the height based on whether a title is used or not.
Linked PR/Issues
Fixes # (issue)
Additional Context
Pre-flight checklist
Contribution Guidelines