Design Layout of resources for automatic elements library Generation

[chrisconnors-ibm]

Design the layout of the library elements as we want them to be generated via #484

[aagonzales]

Template

Sketch file example: https://ibm.box.com/s/pdoa77z48q51z8rp7mb7up8bj2xlnii0

Icons

All icons should be symbols

File structure

• Each icon gets a row with all 4 sizes.

Naming

• category/icon--name/size
• category/icon--name/16, category/icon--name/20* ect. The / is important for symbol nesting structure.
• Scaled icons should have an * after the size to denote that it has been scaled.

Categories

We are going to keep the IDL category in the Sketch kit so icons are easier to find.

Colors

• Grid of IDL colors and hover color. Colors should be saved as a layer style
  

Themes

• Columns for different theme token values. Tokens should be saved as a layer style
  

Type

• Type should be saved as a type style.
  

Questions

• For icons, should we keep the categories of icons that currently exist in the IDL kit and if so does that have any technical ramification with autogenerating the file.
  • Yes, we're keeping
• Should/can we auto-generate type styles? And is there a way to define the color. Color is defined by theme and the element code does not include color. Would it be confusing to have type tokens in the element library and in each theme library as well?
• Same question for color tokens. Currently color tokens are imbedded in each individual theme library. Should they stay there or be in both places, or only in the IDL library?

[joshblack]

Should/can we auto-generate type styles?

I believe we can!

And is there a way to define the color.

Good question, I think we can do shared styles (not sure if that helps)

[aagonzales]

@joshblack I've updated the comment above just fyi

[joshblack]

Thanks @aagonzales! Do we have access to categories yet for the icons btw?

[chrisconnors-ibm]

@joshblack "Do we have access to categories yet for the icons btw?" do you mean in the metadata yml?

[joshblack]

@chrisconnors-ibm I don't think it's in the metadata yet, unfortunately. Just saw that the icons above are in categories but I'm not sure where that information lives. We only have example ones in metadata: https://github.com/carbon-design-system/carbon-elements/blob/master/packages/icons/metadata.yml#L6

[chrisconnors-ibm]

you can see their classification here: https://www.ibm.com/design/language/elements/icon-library

That's what's reflected in the existing IDL library too.

So how would we encode each icon to be in one (1) category? should that be a prop in the yml file?

[joshblack]

Yeah, there is a categories list in the YML we can use, we can also convert it to only one field if we believe icons can only be in one category.

[joshblack]

Categories field: https://github.com/carbon-design-system/carbon-elements/blob/master/packages/icons/metadata.yml#L5

[chrisconnors-ibm]

here's an issue to add the categories for each icon. #2672

[joshblack]

Closing this as this work item is done 👍