Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Action Bar - Experimental component #4233

Merged
merged 17 commits into from
Feb 26, 2024
Merged

Action Bar - Experimental component #4233

merged 17 commits into from
Feb 26, 2024

Conversation

pksjce
Copy link
Collaborator

@pksjce pksjce commented Feb 8, 2024

Create a new experimental component called ActionBar which is a horizontal list of icon buttons to be used in the Comment Editor.

Here's a demo of the storybook complete with overflow behaviour

Screen.Recording.2024-02-20.at.11.27.43.pm.mov

Closes #https://github.com/github/primer/issues/3020

Changelog

New

In this PR

  • Add an experimental component ActionBar identical to functionality of its rails counterpart.
  • Add overflow behaviour with resize observer
  • Add size attribute
  • Add divider and icon component
  • Add documentation
  • Add storybook with 3 stories.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

This PR does not need a changeset since it only introduces a draft or experimental component.

Testing & Reviewing

Please test using the storybook deployment

Merge checklist

@pksjce pksjce requested review from a team and siddharthkp February 8, 2024 12:14
Copy link

changeset-bot bot commented Feb 8, 2024

🦋 Changeset detected

Latest commit: a1f5ca6

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

This PR includes changesets to release 1 package
Name Type
@primer/react Minor

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

Copy link
Contributor

github-actions bot commented Feb 15, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 113.49 KB (0%)
packages/react/dist/browser.umd.js 114.16 KB (0%)

@github-actions github-actions bot temporarily deployed to storybook-preview-4233 February 15, 2024 10:02 Inactive
@JoseInTheArena
Copy link

How are you assessing for accessibility for this component?

@pksjce
Copy link
Collaborator Author

pksjce commented Feb 20, 2024

@JoseInTheArena - My first tests will be to use VoiceOver and makes sure the announcements are coherent. Along with that I also test keyboard accessibility and support for 200% zoom. After this I will ask accessibility team for help with further review by applying to attend office hours.

Copy link
Member

@siddharthkp siddharthkp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good for the initial version!

Let's merge this and continue to work on it with tiny PRs 🎉

@pksjce pksjce added this pull request to the merge queue Feb 26, 2024
Merged via the queue into main with commit fcd0528 Feb 26, 2024
30 checks passed
@pksjce pksjce deleted the pk/action-bar branch February 26, 2024 20:32
@primer primer bot mentioned this pull request Feb 26, 2024
lukasoppermann pushed a commit that referenced this pull request Apr 16, 2024
* Add new Actionbar component

* Add size context to ActionBar

* Add parent styles

* Get the overflow somewhat working

* Fix calculations

* Show More button appropriately

* Enhance overflow behaviour and add proper menu items

* Remove selection variant

* Add comment box story as example

* Add logic to show divider

* Add docs

* Fix builds

* Switch to drafts

* Remove stories from docs for now

* Update snapshots for exports

* Create old-peas-cross.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants