Table header icon updates, new component tokens

[davyd-akamai]

1. Interaction tokens optimisation: new naming convention for interaction.background.* tokens

New token name <- Old noken name:

• interaction.background.primaryHover <- interaction.background.elevated
• interaction.background.secondaryHover <- interaction.background.rangeHover
• interaction.background.secondaryActive <- interaction.background.accent
• interaction.background.tertiaryHover <- interaction.background.activeDateHover
• interaction.background.tertiaryActive <- interaction.background.active

New token: interaction.background.primaryActive (brand.30/neutrals.80) - selected state for a dropdown item, list item, etc;

2. New component tokens for a Tile component

3. New behaviour of a table header icons:

• (Major change) The icon token that was used for the sort icon has been split into icon.default, icon.hover, and icon.active tokens under each type of table header.
• The info icon no longer uses alias tokens, but table component tokens instead.
• Icon inside of an icon only table header now use alias.content.icon.primary token.

4. Elevation tokens for a drawer component

[abailly-akamai]

Those are breaking changes - @jaalah-akamai how do we handle those?

[jaalah-akamai]

We typically bump to a major version for breaking changes

[jaalah-akamai]

@davyd-akamai Can you provide some mappings for the breaking changes? It seems teams would have to map rangeHover, activeDateHover, accent, elevated, active to something new. I just want to be clear what that should be for eng teams.

[davyd-akamai]

@davyd-akamai Can you provide some mappings for the breaking changes? It seems teams would have to map rangeHover, activeDateHover, accent, elevated, active to something new. I just want to be clear what that should be for eng teams.

Good call! Description has been updated

[davyd-akamai]

@jaalah-akamai @abailly-akamai I think it’s ready for one more review. The plugin optimization I mentioned during our meeting could be moved to the next version, as it requires additional time for investigation.

[abailly-akamai]

Looks good! we will just need a version bump for the breaking change

[jaalah-akamai]

There's a few issues we need to resolve:

component.table.row.background.hover.value tries to reference alias.interaction.background.elevated, which is not defined.
component.calendar.selectedItem.background.default.value tries to reference alias.interaction.background.active, which is not defined.
component.calendar.selectedItem.background.hover.value tries to reference alias.interaction.background.activeDateHover, which is not defined.
component.calendar.hoverItem.background.value tries to reference alias.interaction.background.elevated, which is not defined.
component.calendar.dateRange.background.default.value tries to reference alias.interaction.background.elevated, which is not defined.
component.calendar.dateRange.background.hover.value tries to reference alias.interaction.background.rangeHover, which is not defined.
component.calendar.presetArea.activePeriod.background.value tries to reference alias.interaction.background.accent, which is not defined.
component.sideNavigation.selectedMenuItem.background.value tries to reference alias.interaction.background.accent, which is not defined.
component.stepper.horizontal.pastItem.circle.background.hover.value tries to reference alias.interaction.background.active, which is not defined.
component.stepper.horizontal.currentItem.circle.background.value tries to reference alias.interaction.background.active, which is not defined.
component.stepper.vertical.currentItem.circle.background.value tries to reference alias.interaction.background.active, which is not defined.

I'll resolve them in code

[jaalah-akamai]

@davyd-akamai
✅ Ignore the dist folder, but the changes have been made to calendar.json, sideNavigation.json, stepper.json, and table.json
✅ Tokens all build correctly now

[davyd-akamai]

There's a few issues we need to resolve:

Is it something I've broken with a new naming conventions?