Skip to content

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

Merged
merged 1 commit into from
Jun 19, 2024
Merged

Conversation

lubej
Copy link
Contributor

@lubej lubej commented Jun 19, 2024

No description provided.

Copy link

github-actions bot commented Jun 19, 2024

Deployed to Cloudflare Pages

Latest commit: e4a7b2c006bb2f9fc2be33e1f74dc6b49c868060
Status:✅ Deploy successful!
Preview URL: https://8a91eb3e.oasis-wallet.pages.dev

@lubej lubej force-pushed the ml/add-end-slot-to-alert-box branch 2 times, most recently from 7e96f87 to c1784d2 Compare June 19, 2024 07:51
Comment on lines 42 to 61
<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>
Copy link
Contributor Author

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
image

@lubej lubej requested review from buberdds and lukaw3d and removed request for buberdds June 19, 2024 07:54
@lubej lubej marked this pull request as ready for review June 19, 2024 07:55
@lubej lubej mentioned this pull request Jun 19, 2024
@lubej
Copy link
Contributor Author

lubej commented Jun 19, 2024

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' }}>
Copy link
Contributor

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?

Copy link
Contributor Author

@lubej lubej Jun 19, 2024

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.

@lubej lubej force-pushed the ml/add-end-slot-to-alert-box branch 2 times, most recently from f5ddac1 to 7cf2029 Compare June 19, 2024 10:01
@lubej lubej force-pushed the ml/add-end-slot-to-alert-box branch from 7cf2029 to 4d7cfde Compare June 19, 2024 10:47
@lubej lubej force-pushed the ml/add-end-slot-to-alert-box branch from 4d7cfde to e4a7b2c Compare June 19, 2024 12:20
@lubej lubej merged commit d214dec into master Jun 19, 2024
13 checks passed
@lubej lubej deleted the ml/add-end-slot-to-alert-box branch June 19, 2024 12:28
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.

2 participants