Commit 1766f0a2 by Michael Roytman

change Button display prop to label

parent 335189a2
{
"name": "@edx/paragon",
"version": "0.2.0",
"version": "1.0.0",
"description": "Accessible, responsive UI component library based on Bootstrap.",
"main": "src/index.js",
"author": "arizzitano",
......
......@@ -10,8 +10,8 @@ Provides a button component that can be customized and handle multiple event han
### `className` (string array; optional)
`className` specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array.
### `display` (string; required)
`display` specifies the text that is displayed within the button.
### `label` (string; required)
`label` specifies the text that is displayed within the button.
### `inputRef` (function; optional)
`inputRef` is a function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function.
......
......@@ -8,7 +8,7 @@ function Button(props) {
const {
buttonType,
className,
display,
label,
inputRef,
isClose,
onBlur,
......@@ -35,7 +35,7 @@ function Button(props) {
ref={inputRef}
{...other}
>
{display}
{label}
</button>
);
}
......@@ -43,7 +43,7 @@ function Button(props) {
export const buttonPropTypes = {
buttonType: PropTypes.string,
className: PropTypes.arrayOf(PropTypes.string),
display: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
inputRef: PropTypes.func,
isClose: PropTypes.bool,
onBlur: PropTypes.func,
......
......@@ -127,7 +127,7 @@ class Dropdown extends React.Component {
aria-expanded={this.state.open}
aria-haspopup="true"
buttonType={this.props.buttonType}
display={this.props.title}
label={this.props.title}
onClick={this.toggle}
onKeyDown={this.handleToggleKeyDown}
className={[
......
......@@ -37,7 +37,7 @@ class ModalWrapper extends React.Component {
/>
<Button
onClick={this.openModal}
display="Click me to open a modal!"
label="Click me to open a modal!"
buttonType="light"
inputRef={(input) => { this.button = input; }}
/>
......@@ -71,15 +71,15 @@ storiesOf('Modal', module)
body="Modal body."
buttons={[
<Button
display="Blue button!"
label="Blue button!"
buttonType="primary"
/>,
{
display: 'Red button!',
label: 'Red button!',
buttonType: 'danger',
},
<Button
display="Green button!"
label="Green button!"
buttonType="success"
/>,
]}
......@@ -93,7 +93,7 @@ storiesOf('Modal', module)
body="Custom body!"
buttons={[
<Button
display="Dark button!"
label="Dark button!"
buttonType="dark"
/>,
]}
......@@ -107,7 +107,7 @@ storiesOf('Modal', module)
body="Modal body."
buttons={[
<Button
display="Click me and check the console!"
label="Click me and check the console!"
buttonType="light"
onClick={action('button-click')}
/>,
......@@ -142,7 +142,7 @@ storiesOf('Modal', module)
label="E-Mail Address"
/>
<Button
display="Get my facts!"
label="Get my facts!"
/>
</div>
)}
......
......@@ -24,15 +24,15 @@ describe('<Modal />', () => {
describe('correct rendering', () => {
const buttons = [
<Button
display="Blue button!"
label="Blue button!"
buttonType="primary"
/>,
{
display: 'Red button!',
label: 'Red button!',
buttonType: 'danger',
},
<Button
display="Green button!"
label="Green button!"
buttonType="success"
/>,
];
......
......@@ -96,7 +96,7 @@ class Modal extends React.Component {
<div className={styles['modal-header']}>
<h5 className={styles['modal-title']} id={this.headerId}>{this.props.title}</h5>
<Button
display={<span aria-hidden="true">&times;</span>}
label={<span aria-hidden="true">&times;</span>}
aria-label={this.props.closeText}
buttonType="light"
onClick={this.close}
......@@ -110,7 +110,7 @@ class Modal extends React.Component {
<div className={styles['modal-footer']}>
{this.renderButtons()}
<Button
display={this.props.closeText}
label={this.props.closeText}
buttonType="secondary"
onClick={this.close}
inputRef={(input) => { this.closeButton = input; }}
......
......@@ -37,7 +37,7 @@ class StatusAlertWrapper extends React.Component {
/>
<Button
onClick={this.openStatusAlert}
display="Click me to open a Status Alert!"
label="Click me to open a Status Alert!"
buttonType="light"
inputRef={(input) => { this.button = input; }}
/>
......
......@@ -68,7 +68,7 @@ class StatusAlert extends React.Component {
inputRef={(input) => { this.xButton = input; }}
onClick={this.close}
onKeyDown={this.handleKeyDown}
display={<span aria-hidden="true">&times;</span>}
label={<span aria-hidden="true">&times;</span>}
isClose
/>
) : null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment