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

Add OcticonButton component #122

Merged
merged 6 commits into from
Jul 13, 2018
Merged

Add OcticonButton component #122

merged 6 commits into from
Jul 13, 2018

Conversation

shawnbot
Copy link
Contributor

The OcticonButton component renders a <button> with an <Octicon> in it, and adds the requisite Primer classes to make it not look too button-y. Here's an example of a close button (ref: #114):

import {OcticonButton} from 'primer-react'
import {X} from '@github/octicons-react'

export default function CloseButton(props) {
  return <OcticonButton icon={X} {...props} />
}

A couple of other things to note:

  • Octicon buttons use the text-inherit class to pass the inherited color CSS property to the Octicon SVG element.
  • They pass disabled and onClick to the <button>, and support all of our margin and padding whitespace props (m, p, mx, py, etc.) so that it's easy to space them out and increase their hit area.
  • They pass the icon and size props to the Octicon component.
  • The label prop is rendered as the aria-label attribute.

@shawnbot shawnbot requested a review from emplums July 11, 2018 23:30
Copy link

@emplums emplums left a comment

Choose a reason for hiding this comment

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

Looks great!

@emplums emplums changed the base branch from master to release-0.0.9-beta July 13, 2018 18:14
@emplums emplums merged commit 3277303 into release-0.0.9-beta Jul 13, 2018
@emplums emplums deleted the octicon-button branch July 13, 2018 18:15
@shawnbot shawnbot mentioned this pull request Jul 13, 2018
5 tasks
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.

2 participants