Allow custom HTML attributes on color and type specimens

[Kilian]

It would be nice to allow for custom attributes on color and type specimens specifically, and probably generally for other specimens too.

My specific use case is as follows: I want to render elements from the catalog style guide into Sketch using html-sketchapp-cli. You can do this by adding specific data attributes to HTML, like data-sketch-symbol (I use this in the html specimens, which works fine!) but also data-sketch-color which generates Sketch document colors and data-sketch-text for Sketch document styles.

Being able to add these to specimens greatly simplifies the import. The workaround currently is to re-implement the color and text specimens in HTML and add the data-attribute manually.

[jstcki]

This would be pretty awesome, also for symbols (when using the HTML/React specimens). I wonder if this needs to be customizable beyond the naming of typefaces/symbols or if we can just support it by default. I've never used html-sketchapp-cli before, so I'd have to look into it.

[Kilian]

You can get 90% of the way by letting people set custom attributes and corresponding values.

An additional ask for that 'story' is that I now have a page called "kitchensink" that has duplicates of all my HTML elements, that I would rather either import from the existing pages, or what would be even better is if Catalog offered some sort of "serialised" page with just all pages included in one long page.

I have a catalog.style setup with this partial Sketch integration that I can share with you over email, is the company email the best place to do so?

[jstcki]

The thing with letting people add custom attributes (or styles for that matter) is that specimens have different structures and I don't want to add API surface to target each element a specimen creates. a) this would make it very hard to ever change the structure without breaking individual customizations and b) I think if you want full control you should create your own specimens.

So, I'd rather add attributes for html-sketchapp-cli in the right place by default.

But yeah, maybe it makes sense to look at your example. Company email is fine 😄

[jstcki]

About the kitchensink idea: can html-sketchapp-cli only deal with a single page?

[Kilian]

re adding attributes: that makes sense, yes.

re: kitchensink: you can run it sequentially on multiple pages, but it's configured to have a single page -> single sketch file mapping. Here's the "sketch page" in the design system documentation by the author of html-sketchapp-cli: https://seek-oss.github.io/seek-style-guide/sketch-exports/ @markdalgleish maybe you have some suggestions? :)

[jstcki]

@Kilian thanks!

After looking at your example, I think it would make sense to add data-sketch-color and data-sketch-text by default to the color/type specimens. For components it probably doesn't make sense to add them because you most certainly don't want data-sketch-symbol on the specimen container but on the component itself.