Isn't there a way how to predefine multiple preview annotations and apply them on the preview compos...

# compose

[martinsumera]

Isn't there a way how to predefine multiple preview annotations and apply them on the preview composable?
It would be much easier to to use something like

@MyCustomPreviews("component name")

which be equivalent of the following code

@Preview(name = "ProgressButtonPreview")
@Preview(name = "ProgressButtonPreview - night", uiMode = Configuration.UI_MODE_NIGHT_YES)
@Preview(name = "ProgressButtonPreview - scaled font", fontScale = 3f)
@Preview(name = "ProgressButtonPreview - en", locale = en)
...
@Preview(name = "ProgressButtonPreview - api 26", apiLevel = 31)

[Eric Chee]

You chould probably make a Live Template in android studio. The component name just becomes a variable you fill in

[Eric Chee]

So it’d look something like this. And then allows you to type in whatever name of your component you want

[Chris Sinco [G]]

There is not a way to do this now, but we are looking into evolving the Preview APIs to scale better with generating multiple Previews of the same Composable without having the need to duplicate annotations over and over.

[Chris Sinco [G]]

Would you say you repeat similar annotations with similar parameters across many different Composables? And is this in context of say a design system and/or screens?

[martinsumera]

Yes. I repeat mutliple previews with the same parameters over and over. It is happening in the context of the design system, where I want to see dark mode version, version with scaled font, sometimes with different screen sizes. But it is also happening in the context of the screens where I want to see different screen sizes, dark mode version and version with scaled font.

And when we talk about improving Preview API. It would be nice be able automatically wrap all previews (or just previews with some flag) with custom component. I'm using this to set theme and to add padding to the previews because it looks nicer and you can see it with the background.

My previews looks like this right now. It is not very maintanable https://gist.github.com/SumeraMartin/b8f0e609a92353fbee35f5974f687788

Something like this would be much better
https://gist.github.com/SumeraMartin/42ddfaa4448b85087b0d5ef2d8efe406

[martinsumera]

@Chris Sinco [G]

[Chris Sinco [G]]

Gotcha thanks for the context and snippets!

[Chris Sinco [G]]

On wrapping components automatically, how do you do that today? Curious if that can be solved by having a top-level function that always wraps things and is available to all files/modules

[martinsumera]

I don't do that automatically. I do it with a component that I manually add to every preview. I'm calling it Showcase . It is in the snippets.