UI Kit <Tag> component looks vastly different in new Jira UI

Hi there,

We’ve just enabled the “new navigation” in Jira and noticed that the UI Kit <Tag> component nows renders quite differently than before. Here’s what we saw:

Before

After

What used to be a fully colored tag now only has a thin color frame, the color of which is barely recognizable on most normal display sizes.

This change comes quite unexpected for us, as even the documentation for this component does not mention it. Instead it only shows the look from before the “new navigation”:

This also marks a break with how the corresponding AtlasKit component is documented on atlassian.design:

This change is not only surprising, but also a big problem for us. So far we have used the coloring of the <Tag> to allow “quick recognition” of UI objects – just as the documentation says they are intended.

I have three questions about this change:

  • Is there any way for us to get the old UI look back, at least for some transitory period?
  • Will there be an update to the documentation, so that we can know what to expect when using UI Kit?
  • Will there be an update to AtlasKit, so that apps that use AtlasKit align with how the base product looks?

Finally, this may of course be on me. Did I just miss the correct announcement about UI Kit’s appearance changing?

11 Likes

I couldn’t agree more — this completely undermines the value of the tags.

Additionally, there’s a noticeable inconsistency between the UI Kit and the Custom UI.

3 Likes

This change was announced here: A visual refresh of our UI foundations is coming

I remember that announcement. This is not about being surprised by the general UI change, but very specifically about the <Tag> component which has changed notably.

Looking back at the original announcement, the sample screenshots of the new UI did include both rendering variants: The one with the thin border and the one with a solid background:

Now, I’m really not that good with keeping up with everything, but this specific change really matters a lot and I would’ve hoped for some sort of announcement or explanation. As of today, not even the documentation reflects the new state.

You can at least get the apparently-expected rendering if you go to the old version of the Atlaskit site, which has a feature flag dropdown that allows you to select the variant for the platform visual refresh:

1 Like