css icon indicating copy to clipboard operation
css copied to clipboard

WIP: Button/Link API exploration

Open langermank opened this issue 3 years ago • 6 comments

Design and API exploration for buttony and linky components: Button, IconButton, Link, LinkStyledAsButton, ButtonGroup, ReactionButton

Working notes and prop tables can be found in this readme

Figma draft

Progress tracking

  • [x] Gather insights from existing issues and discussions
  • [x] Create base component templates for stress testing/markup + draft CSS
  • [x] Discuss initial draft with Pattern Working Group
  • [x] Edit naming conventions and design based on Pattern Working Group feedback
  • [x] Meet with group again to discuss nitty-gritty things (mainly naming and style)
  • [ ] Request detailed markup and CSS review
  • [ ] Begin documenting breaking changes between old Button and this new refactor

langermank avatar Jan 13 '22 17:01 langermank

⚠️ No Changeset found

Latest commit: 2b1c7c8c55608255290b15c927625e230eac3a82

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

changeset-bot[bot] avatar Jan 13 '22 17:01 changeset-bot[bot]

To gain full context, is this a refactor of existing design or is there scope to make any design changes?

A few I can think that came up during the react implementation

  • [ ] Block buttons - where should the icon be positioned? (https://github.com/primer/react/pull/1733)
  • [ ] Buttons that look like links (seems like this is being fixed)
  • [ ] Should Outline Button exist? (https://github.com/github/primer/discussions/278)
  • [ ] Do we need large button? (https://github.com/github/primer/issues/253)
  • [ ] Focus outline discussion (https://github.com/github/primer/discussions/414)

How much of this do you think can get addressed in this iteration?

pksjce avatar Jan 14 '22 04:01 pksjce

To gain full context, is this a refactor of existing design or is there scope to make any design changes?

There's scope to make design changes, but mostly around consistency in spacing, sizing and alignment. Potentially changing some variants.

How much of this do you think can get addressed in this iteration?

We are covering everything in that list 😸 The outline styles is actually separate, but should be released soon https://github.com/primer/css/pull/1744

langermank avatar Jan 18 '22 04:01 langermank

Just a heads up - the latest Storybook deployment throws an error for the Buttons explorations:

ariaLabel is not defined

mperrotti avatar Jan 18 '22 18:01 mperrotti

Hi all! Adding to the button discussion, hopefully this is something we can add to the API. I created a separate discussion for this because I didn't want the PR to get too long.

  • https://github.com/github/primer/discussions/652

ichelsea avatar Jan 25 '22 00:01 ichelsea

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.

github-actions[bot] avatar May 22 '22 03:05 github-actions[bot]

Closing in favor of the PVC implementation ✨

langermank avatar Oct 17 '22 21:10 langermank