Skip to content

Action Bar - Experimental component - #4233

Merged
pksjce merged 17 commits into
mainfrom
pk/action-bar
Feb 26, 2024
Merged

Action Bar - Experimental component#4233
pksjce merged 17 commits into
mainfrom
pk/action-bar

Conversation

@pksjce

@pksjcepksjce commented Feb 8, 2024•
edited
Loading

Copy link
Copy Markdown
Contributor

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 siddharthkpFebruary 8, 2024 12:14
@changeset-bot

changeset-botBot commented Feb 8, 2024•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@primer/reactMinor

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

@pksjce
pksjce marked this pull request as draft February 8, 2024 12:14
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 8, 2024 12:17 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 9, 2024 02:24 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 12, 2024 07:41 Inactive
@github-actions

github-actionsBot commented Feb 15, 2024•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
packages/react/dist/browser.esm.js113.49 KB (0%)
packages/react/dist/browser.umd.js114.16 KB (0%)

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 15, 2024 10:02 Inactive
@JoseInTheArena

JoseInTheArena commented Feb 18, 2024

Copy link
Copy Markdown

How are you assessing for accessibility for this component?

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 20, 2024 01:46 Inactive
@pksjcepksjce added the skip changeset This change does not need a changelog label Feb 20, 2024
@pksjce

pksjce commented Feb 20, 2024

Copy link
Copy Markdown
ContributorAuthor

@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.

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 20, 2024 12:37 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 22, 2024 04:26 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 22, 2024 04:46 Inactive
siddharthkp
siddharthkp approved these changes Feb 22, 2024
View reviewed changes

@siddharthkpsiddharthkp left a comment

Copy link
Copy Markdown
Member

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 🎉

@pksjcepksjce removed the skip changeset This change does not need a changelog label Feb 26, 2024
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 26, 2024 19:55 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 26, 2024 20:03 Inactive
@pksjce
pksjce marked this pull request as ready for review February 26, 2024 20:07
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 26, 2024 20:08 Inactive
@pksjce
pksjce enabled auto-merge February 26, 2024 20:10
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4233 February 26, 2024 20:14 Inactive
@pksjce
pksjce added this pull request to the merge queueFeb 26, 2024
Merged via the queue into main with commit fcd0528Feb 26, 2024
@pksjce
pksjce deleted the pk/action-bar branch February 26, 2024 20:32
@primerprimerBot mentioned this pull request Feb 26, 2024
Merged
lukasoppermann pushed a commit that referenced this pull request Apr 16, 2024
@pksjce@lukasoppermann
Action Bar - Experimental component (#4233)
d6f2d78
* 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 freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@siddharthkpsiddharthkpsiddharthkp approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@pksjce@JoseInTheArena@siddharthkp