Create blueprint figma file

[blackfalcon]

General Support Request

The auro-badge requires a blueprint supporting document to be released to Figma. The new element auro-slider has a dependency on this as a defined element for example use.

Support request

Review the current state of the auro-badge design and create the Figma blueprint document.

Possible Solution

Design to review current UI for new design opportunities. Separating auro-badge and auro-tag due to functionality differences. This will not be reflected 1:1 on the dev and design side. Instead, the design toolkit will have two different components while development treats it as one component with different types.

Exit criteria

• [x] complete blueprint work
• [x] signoff from Auro engineering (Dale Sande) https://github.com/AlaskaAirlines/auro-badge/issues/14
• [x] signoff from UI designers (Vidal Men)
• [x] add link completed version of auro-badge blueprint (Link)
• [x] add link completed version of auro-tag blueprint (Link)

Next steps

When this element blueprint is added to the Figma Auro UI Kit, this is intended to be used by the new auro-slider as an example.

• [ ] link new issues(s) from development plan to this design issue
• [ ] create new issue for the official release of the design blueprint (dependency on completed Auro component).

[leeejune]

Completed blueprint in Figma

[leeejune]

@jason-capsule42 Requesting a dev review for the completed blueprint. Please let me know if there is anything to add/edit.

[leeejune]

@vidalmenAS Requesting a design review.

[blackfalcon]

This looks great.

FYI others in this thread, it has been discussed that we will probably be deprecating the auro-badge component as it never really caught on and newer conversations around a more comprehensive auro-tag element are in progress.

@leeejune regarding this element, one thing that has been an issue is how to deal with type descenders. E.g. a y or g. The type in this comp is always perfectly centered, but we can't actually recreate that in code because type and line height always account for descenders. This issue was raised by @erikalanghauser in regard to the use of auro-badge in the auro-flightline custom element.

I just want to make sure that we are currently representing this in the blueprint.

[leeejune]

Would leaving a note be enough to reflect this? Or is there another preferred way to represent this?

[leeejune]

Completed auro-tag blueprint

[leeejune]

Added a note about type descenders & built in spacing.

[blackfalcon]

@leeejune given this is a new design spec for the proposed auro-tag element, I am curious as to thoughts for how we want to deal with auro-badge? Specifically, the auro-flightline element that has a dependency on auro-badge with the label option.

The new auro-tag does not appear to support this UI so what would be a recommendation for preserving this UI option if auro-badge goes away?

[leeejune]

auro-badge supports the outlined style. auro-badge and auro-tag would both stay, but on the design side they are considered two different things. auro-badge is for labelling items so it is a static element with no interactions (ex: flightline's time label with the outlined styled). auro-tag is interactive and can be used as a collection (simply multiple tags in a row).

[erikalanghauser]

Adding @geoffcastroAAG to the thread.

[leeejune]

auro-tag will have a type called auro-badge to support different functionalities of "Tag" and "Badge" on the design side. On Figma, the two are distinct components. On the engineering side, they will be under the same web component auro-tag. Current auro-badge's color features will be deprecated. The rest of the functions remain the same.

[vidalmenAS]

Reviewed + Approved!

[leeejune]

Added "Size" property to implement "Small" sized badge. Need @blackfalcon's review.

[blackfalcon]

@leeejun both large and small have the same definitions? Also, what is the border-radius?

[leeejune]

The large and small have the same padding, just different text sizes. Border radius is 100px, but basically it's just a huge number to make it fully round. Made edits to the blueprint with the following information.

[blackfalcon]

@leeejune feedback has been sent via Teams for updates.

[leeejune]

@blackfalcon Changes made according to the feedback.

[blackfalcon]

This Blueprint file is complete and ready for dev plan.