Merge pull request #54 from edx/mroytman/button-label

change Button display prop to label

package.json

@@ -1,6 +1,6 @@
 {
   "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",

src/Button/README.md

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

src/Button/index.jsx

@@ -8,7 +8,7 @@ function Button(props) {
   const {
     buttonType,
     className,
-    display,
+    label,
     inputRef,
     isClose,
     onBlur,
@@ -35,15 +35,15 @@ function Button(props) {
       ref={inputRef}
       {...other}
     >
-      {display}
+      {label}
     </button>
   );
 }
 
 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,

src/Dropdown/index.jsx

@@ -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={[

src/Modal/Modal.stories.jsx

@@ -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>
       )}

src/Modal/Modal.test.jsx

@@ -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"
       />,
     ];

src/Modal/index.jsx

@@ -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; }}

src/StatusAlert/StatusAlert.stories.jsx

@@ -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; }}
         />

src/StatusAlert/index.jsx

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