Terra-core: Uplift Button Component for OCS

[emilyrohrbough]

Issue Description

Uplift Button component.

Issue Type

• [ ] New Feature
• [x] Enhancement
• [ ] Bug
• [ ] Other

[emilyrohrbough]

Button Tech Design

React Props:

Changed

• variant prop [string] sets the button variant. See Question 1.
  
  
  
  • New options: 'default', 'utility', 'emphasis', 'de-emphasis', 'action' .
    
    
    
    
    
    • Note: 'action' and 'de-emphasis' are consumer specific.
    
    
    
  
  
  • Previous options: 'default', 'primary', 'secondary', 'link'
  
  

Removed

• isCompact prop [bool]
• size prop [string] Options: 'tiny', 'small', 'medium', 'large', 'huge'

Themeable Styles

• Background color
• Border color
• Border radius
• Border style
• Box shadow
• Font weight
• Padding
• Height

Responsiveness & Accessibility

None to consider for uplift.

Questions

1. Designs indicate variant types of 'default', 'utility', 'emphasis', 'de-emphasis' and 'action'. Do we want to use these types or maintain the current types of 'primary', and 'secondary' in favor of 'emphasis' and 'de-emphasis'?

[bjankord]

+1 on tech design, lets us the same names UX uses for the variants.
Do we need to remove the href prop. I know UX has talked about not having links look like buttons.

[mjhenkes]

I agree with @bjankord about keeping the href prop

[jmsv6d]

We should add a refCallback prop for use with popup and menu.

[yuderekyu]

Shouldn't font-color, font-family, and font-size also be themeable, or are those inherited?
+1

[emilyrohrbough]

@yuderekyu ^ These will be themeable but inherited

[PaulSolDev]

Orion JIRA created

[emilyrohrbough]

Interesting information I've discovered for anyone interested:

• ^ and Firefox on Windows 10 does not give focus on click.

Additionally, Firefox does not apply :active focus styling with keyboard interactions with the SPACE key.

[calebmeyer]

Chrome (webkit, really) does some unexpected behavior with buttons when you click:
https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

If we're going to be changing button, this might be a good thing to add.