airbnb / Showkase

🔦 Showkase is an annotation-processor based Android library that helps you organize, discover, search and visualize Jetpack Compose UI elements
https://medium.com/airbnb-engineering/introducing-showkase-a-library-to-organize-discover-and-visualize-your-jetpack-compose-elements-d5c34ef01095
Apache License 2.0
2.11k stars 107 forks source link

Add Icons page and support `@ShowkaseIcon` #246

Closed oas004 closed 1 year ago

oas004 commented 2 years ago

Feature description

First of all, thanks for an amazing cool library! I really like it! 🤩 When using it I noticed that it would be nice to have like a gallery of our icons as well in the same context, so I added a suggestion in this PR on how it could look.

In this PR I have added support for displaying ImageVectors and @DrawableRes Intas Icons in its own page.

It can be used like this inside a class or an object:

@ShowkaseIcon(name = "Name", group = "Group")
val searchIcon = Icon.Filled.SearchIcon

or

@ShowkaseIcon(name = "Name", group = "Group")
@DrawableRes
val searchIcon = R.drawable.search_icon

This fixes #245 😄

Things to consider

I have added tests in the showkase-processor-testing and showkase-browser-testing. Are there any more tests that needs to be added?

I was thinking about adding an annotation parameter for the tint. Something like

@ShowkaseIcon(name = "Name", group = "Group", tint = Color)
val searchIcon = Icon.Filled.SearchIcon

But I'm not quite sure if that will work and if the best way here would be to provide a HEX code or something like that? Do you have any input on this?

Gameplay 🎮

Here is some gameplay from the sample app

arrows landing_icons landing launcher verification

oas004 commented 2 years ago

I have some issues with generating the screenshots for the screenshot testing of the Icons 🤔 I can't find a way to check the type of the icon in AndroidTestDebug. Could you help me out a bit @vinaygaba ? 😄

oas004 commented 2 years ago

I have some issues with generating the screenshots for the screenshot testing of the Icons 🤔 I can't find a way to check the type of the icon in AndroidTestDebug. Could you help me out a bit @vinaygaba ? 😄

I think I got this to work now 😄 🥳 A bit unsure if this is the best solution, but would like some feedback on this if someone has time 😄

oas004 commented 2 years ago

Rebased and updated the test from #241 😄 Looks like the UI tests are being cancelled. Do you know if there is a reason for it being cancelled @vinaygaba ? 😄

oas004 commented 2 years ago

Im thinking, would it be nice to be able to annotate the object and get all the icon that it encapsulates? 🤔 I think the api as it is now, might be a bit difficult to use as companies might have 100 of different icons 🤔 😄 Wdyt?

oas004 commented 1 year ago

@vinaygaba I am thinking about closing this as it is hard to maintain the branch with all the merge conflicts. Is that okay? Then we can maybe discuss a better way to make the API for this when the multi preview stuff is done? :) Can keep the branch for reference maybe? :)

vinaygaba commented 1 year ago

@oas004 Yes I agree! would be nice to brainstorm a bit so that we can not only solve it for icons, but also bring improvements to colors and typography.