-
Notifications
You must be signed in to change notification settings - Fork 49
Add endSlot prop in AlertBox component #1978
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
Conversation
Deployed to Cloudflare Pages
|
7e96f87
to
c1784d2
Compare
<AlertBox | ||
status="ok-weak" | ||
justify="between" | ||
endSlot={ | ||
<span> | ||
<Anchor | ||
href={''} | ||
target="_blank" | ||
rel="noopener" | ||
color="brand" | ||
style={{ verticalAlign: 'middle' }} | ||
> | ||
<Text size="xsmall">{t('account.summary.viewAccountTxs', 'View account transactions')}</Text> | ||
<FormNext color="brand" size="18px" /> | ||
</Anchor> | ||
</span> | ||
} | ||
> | ||
{t('account.summary.someTxsInPendingState', 'Some transactions are currently in a pending state.')} | ||
</AlertBox> |
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.
Satisfied my use case in #1954
Will remove Add sample usage - REVERT and update snapshots after initial review. |
> | ||
<Box direction="row" gap="small" align="center"> | ||
{props.icon && <Text color={color}>{props.icon}</Text>} | ||
<Text size="xsmall" weight="bold" style={{ verticalAlign: 'middle' }}> |
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.
This is not needed as parent flexbox container takes care of alignment, right?
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.
Since I replaced size="12px"
with size="xsmall"
, the later adds line-height
css property. Thats why I wanted to make it centered - otherwise looks weird with different vertical paddings inside alert. It is not ideal, as you would have to do the same on the endSlot
, but I just disliked that size
was hardcoded.
f5ddac1
to
7cf2029
Compare
7cf2029
to
4d7cfde
Compare
4d7cfde
to
e4a7b2c
Compare
No description provided.