ActionBar component

[jonrohan]

https://github.com/github/primer/issues/932

TODO

• [x] Hide divider when it's the first item in the overflow menu. Details
• [x] Look into alignment option Details
• [x] Do we need ActionBar-item class anymore now that we're using Primer::Beta::IconButton? https://github.com/primer/view_components/pull/1339/commits/0452d1fe453a13b7921613dd4ed40fcc6c776ba7
• [x] Focus arrows don't focus menu icon

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: db09b2c5599bf9cdfefc2d325e6894217d7574f2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[simurai]

Re. dividers... I think we should keep the divider when in front of the "more" icon (...). Makes it clear that the "group of icons" is still shown in its entirety and that the "more" icon is not part of that group.

Just once there is no space for the divider and it's shown at the top of the ActionMenu, then I think we should hide it since it looks a bit odd:

[simurai]

Re. left aligned. We probably will need this to be changed programmatically? E.g. when the ActionBar is moved to the left at runtime the alignment of the items also needs to be changed to the left. Like in this CodePen when narrow.

I think we could have the ActionBar items always be left aligned. And then the parent can decide if the entire ActionBar should be aligned to the right. The extra gap in front of the "more" icon doesn't personally bother me and I think it's even a good thing because it visually separates it from the rest:

And another nice thing about keep it always left aligned is that when the items get hidden, the rest of the icons don't jump to the right. Here a video just simulating it with adding margin-left: auto to the "more" icon.

https://user-images.githubusercontent.com/378023/187380182-293c3c38-87b4-44a8-8be1-91f8350539af.mov

Others might disagree. 😁 Anyways, we can chat about it tomorrow.

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.