Design new UI component for highlighting new features

[JonellaCulmer]

What we're after:
To help showcase new features, we should design a component that highlights those features.

Completion criteria:

• New component is drafted and reviewed by team/PMs
• Followup implementation ticket to add to pattern library is created
• Followup implementation ticket to identify places to add the feature is created

[JonellaCulmer]

Here are some preliminary options in different colors and how they might be displayed on the website. Would like front-end feedback on how the placement might work, specifically on datatable filter panels. I believe we are limited in our placement there.

I'm leaning towards the versions with full-color shapes with white text and icons.

cc: @patphongs @rfultz @johnnyporkchops

[patphongs]

@JonellaCulmer I like where you're going with this. A few things to consider with the design:

1. The dot indicator where the bell is indicates to me that there's something new that I haven't seen yet. What happens when I click on the indicator? Will it take me to a place that shows me what's new?
2. Once a user clicks to see what's new though, would that dot go away? If it's personalized in that way, we may need to use some kind of cookie for that.
3. I'd like to make you aware of some of the technical complexities of this icon. In order to make these icons inline with the text, we'd attach a t-inline-block class to it. But the only problem is when the text wraps, like in a datatable label, we need to make it t-inline so that the icon doesn't jut out. That consequently makes the line heights larger due to the icon size. We'd have to play around with the positioning if we want it to act differently, but I'm not sure what that looks like yet. cc @johnnyporkchops @rfultz

t-inline-block

t-inline

[rfultz]

Yes to all of the CSS concerns!

Not a fan of the red options because of the alert/error/warning usage of red on the web. Incorrect form field, red. Can't submit order, red. Must agree to whatever, red. Service interruption, red.

I kinda like the idea of using only the bell for smaller devices and expanding to show the word on user taps, but then what if that triggers a line break, like if the bell fits nicely on the right side of the text but the text would make the icon too wide and then need to wrap. Never easy.

Customizing the 'new!' alerts per user would be super tricky and would require cookies and/or GTM. How many times do we show an alert? For how long? If someone loads a page but immediately has to reload, would the 'new' alert go away? Would new visitors see every notice? Returning user after six months, would they see every new feature for the last half year? Would users who block or clear cookies & storage see everything new every visit or nothing new ever? But if we add something new to a template page (like a committee page), seeing an alert on every committee page for a sprint or two could get super annoying

[JonellaCulmer]

@patphongs @rfultz Thanks for your feedback. Based on your comments, I modified the layout a bit and removed the "new" circle indicator.

This could now just link to the "what's new" page without explaining that new stuff has appeared. Alternatively, if we still want the indicator, we can just leave it up for a week and take it down, but we'd be constantly changing it every time we have a release. Doesn't seem workable at this point and removing seems the easiest course.

For the layout CSS challengs, I rearranged the placement. Do you think this will resolve some of the issues surrounding the inline

[johnnyporkchops]

@JonellaCulmer , I am generally in agreement with what's been said above. My vote is for orange, seems like red and green should be reserved for error/success type messages. And for some reason, green makes me think it would be clickable.

[JonellaCulmer]

Final designs:

[JonellaCulmer]

Closing in favor of the followup tasks:

• Make rules around the use of the new feature icon and tag #4996
• Add new feature icon/tag to pattern library fec-pattern-library#181