Atlas Kit Flag Component missing onClick() property

Jira Development Jira Cloud
1

Hi,

We currently use the AtlasKit flag component documented here inside of our App.

Currently, the only way this component can be expanded and collapsed is by clicking the arrow icon in the top right-hand corner.

We would like to be able to add some behaviour so that the component can be expanded and collapsed when a user clicks anywhere in the header section at the top of the banner to make a better experience for our users.

We could do this if we defined our own custom react component but currently cannot do this using the Flag AtlasKit component as it does not provide any properties to do this.

Could you please add a property to the Flag AtlasKit component to make this use case possible.

1 Like
2

Hi thanks for reaching out.

There is work planning for flag to increase the touch area of expand/collapse buttons which should improve this experience.

At this time we aren’t planning on allowing onClick to the flag components.

Let me know if you have any other thoughts :grinning_face_with_smiling_eyes:

Cheers,
Michael

3

Hi Douges,

Thank you for your reply and for confirming there is work in place to increase the touch area of expand/collapse buttons for the

Could you please provide answers to the additional two questions that I have below.

  1. Can you confirm if you have any timeframe on when this new functionality for the Flag component will likely be available?
  2. Can you confirm any details on what this additional expand flag capability will look like, so we can understand how this may work after these changes?

Thanks,
Kristian

4

I don’t have a timeline for you at the moment, but there is a project internally thats purpose is to improve the accessibility characteristics of the design system components, flag included. I’ll reach out to them and try to get the answers for you.

2 Likes
5

Hi @kwalker
I’m Tim, a designer working on the design system. I’m looking at our flag component at the moment. We’re making some accessibility improvements to the component and looking to prioritise these issues – are you able to provide more information about where / how this component is being used?

Particularly, I’m interested in what type of information is being put into the flag component and when it’s being triggered.

Screenshots or screen captures are really helpful if you’re able to provide them.

Cheers,
Tim

6

Hi Tim,

We use the flag component to specify dialouges in app to give users more information about how certain features work within the relevant sections of our app.

Currently the only way users can expand or collapse these dialouges is by clikcing in the X icon the component provides in the top right hand corner of the dialouge.

What we would like to do, is to be able to have users click anywhere in the header bar of the component and have this trigger an onClick() action to expand or collapse the dialouge.

I hope this helps.

Regards,
Kristian