Fix textoverflow on top appbar for components with long names #240
Conversation
|
@oas004 Could you upload the screenshots again. I'm not able to see them
|
|
Re: Testing You can add a composable here that has a really long value for |
| @@ -91,8 +92,7 @@ internal fun ShowkaseAppBar( | |||
| Row( | |||
| Modifier.fillMaxWidth() | |||
| .graphicsLayer(shadowElevation = 4f) | |||
| .padding(padding2x) | |||
| .height(64.dp), | |||
| .padding(padding2x), | |||
There was a problem hiding this comment.
we might want to add a maxSize for the height but I'm curious to see the screenshots before that
There was a problem hiding this comment.
hmm yeah maybe you're right 🤔 Is it also maybe a bit weird that it spans 3 lines instead of 2? What do you think? :)
Hi, thanks for quick review! 😄 I tried to replace the screenshots now and upload them manually(instead of dragging and dropping them). Does it work now? :) |
Thanks for quick review! Actually, when trying to write a test case for this I ran in to an issue. If I try to make a test on the node with test tag that the text is ellipsis, the NodeText has the entire text. So that means the text will go green if the text is correctly clipped an if It is not. There is an issue on this: https://issuetracker.google.com/issues/238332005 :) Could you please provide me with guidance on how to write a test case for this? :) |
| @@ -186,19 +189,34 @@ private fun ShowkaseAppBarTitle( | |||
| } | |||
| } | |||
|
|
|||
| val LineCountKey = SemanticsPropertyKey<Int>("lineCount") | |||
There was a problem hiding this comment.
Should this be in its own file? :) What do u think?
There was a problem hiding this comment.
Maybe move to a file called SemanticsUtils or something along those lines
There was a problem hiding this comment.
Good idea! Moved it into SemanticsUtils in 833e234 😄
Managed to find a workaround for the test. Added it in baea74a 😄 What do you think? |
| @Composable | ||
| fun ToolbarTitle( | ||
| string: String, | ||
| modifier: Modifier | ||
| ) { | ||
| val lineCount = remember { |
There was a problem hiding this comment.
Not ideal to have test logic live in the component directly but I guess that happens pretty often in Compose due to how semantics are setup with some hooks into testing. Don't have a better idea on testing this so might be fine for now.
There was a problem hiding this comment.
Totally agree with you on that! I think this can work for now :)
Thank you for a very cool library! I absolutely love this! 😄 😍 When I started using it I noticed that the names of our components where quite long and that the toolbar was not quite handling this as you can see from the screenshots.
I had some trouble testing this and would love some help and feedback on that. I tried to make an Android test in the
:showcase-browser-testsingbut could not quite figure out a good way to test it. I also thought that it might be a bit flaky since the overflow will change with regards to screen size.Before
Now