Skip to content
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

Add ImageWithBaseline #7262

Merged
merged 3 commits into from
Oct 18, 2023
Merged

Add ImageWithBaseline #7262

merged 3 commits into from
Oct 18, 2023

Conversation

cketti
Copy link
Member

@cketti cketti commented Oct 17, 2023

This is a small visual change. But it introduces ImageWithBaseline that can be used as a building block when an icon (with it's own baseline) should be aligned to the baseline of some text next to it.

The main purpose of this pull request is to get the design of the "image with baseline" concept right.

image

@cketti cketti requested a review from wmontwe October 17, 2023 12:44
@cketti cketti force-pushed the image_with_baseline branch from 518f1c1 to d8a8555 Compare October 17, 2023 13:02
object IconsWithBaseline {
object Filled {
val warning: ImageWithBaseline by lazy {
ImageWithBaseline(image = MaterialIcons.Filled.Warning, baseline = 21.dp)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is baseline = 21.dp derived from? Is it universally usable or bound to a specific context?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the manually derived baseline for the default size of that particular icon. It's the offset for the lower edge of the triangle. The icon itself contains some empty space at the bottom, so we don't want to align to the bottom edge of it.

image

val iconScalingFactor = iconSize / warningIcon.image.defaultHeight
val iconBaseline = warningIcon.baseline * iconScalingFactor

Icon(
Copy link
Member

@wmontwe wmontwe Oct 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be an IconWithBaseline that does the calculation internally, based on the requested size.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed. But to discuss the approach it felt easier to leave everything in one place.

Copy link
Member

@wmontwe wmontwe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@cketti cketti merged commit 8df862b into main Oct 18, 2023
@cketti cketti deleted the image_with_baseline branch October 18, 2023 12:33
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