Merge pull request #1786 from linode/master

0.4.0

.eslintrc

@@ -8,7 +8,7 @@
     "mocha": true
   },
   "parser": "babel-eslint",
-  rules: {
+  "rules": {
     "babel/generator-star-spacing": 2,
     "babel/new-cap": 0,
     "babel/array-bracket-spacing": 2,

.travis.yml

@@ -11,7 +11,7 @@ script:
         EOF
     - |
       if [[ $(git diff HEAD^ $(git rev-parse --abbrev-ref HEAD) --name-only | grep -v scss) ]]; then
+        npm run lint
         npm test
         cat ./coverage/lcov.info | node ./bin/styleguideTestFilter.js | ./node_modules/.bin/coveralls
-        npm run lint
       fi

components/buttons/Button.js

@@ -11,10 +11,15 @@ export default function Button(props) {
     buttonClass,
     type,
     id,
+    href,
   } = props;
 
   const classes = `btn ${buttonClass} ${className}`;
 
+  if (href) {
+    return <a className={classes} id={id} href={href} disabled={disabled}>{children}</a>;
+  }
+
   return to ? (
     <Link
       className={classes}
@@ -43,6 +48,7 @@ Button.propTypes = {
   id: PropTypes.string,
   buttonClass: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
+  href: PropTypes.string,
 };
 
 Button.defaultProps = {

components/dropdowns/Dropdown.js

@@ -24,42 +24,41 @@ export default class Dropdown extends Component {
     const [first, ...rest] = this.props.elements;
     const { disabled } = this.props;
 
-    const dropdownMenu = rest.map(({ name, action }) =>
+    const dropdownMenu = rest.map((item, i) => !item ? <hr key={i} /> :
       <button
         type="button"
-        key={name}
-        className="btn dropdown-item"
+        key={item.name}
+        className="Dropdown-item"
         // This onMouseDown is intentional. See https://github.com/linode/manager/pull/223
-        onMouseDown={action}
-      >{name}</button>
+        onMouseDown={item.action}
+      >{item.name}</button>
     );
 
-    const orientation = this.props.leftOriented === false ? 'dropdown-menu-right' : '';
+    const orientation = !this.props.leftOriented ? 'Dropdown-menu--right' : '';
 
     return (
       <div
-        className={`Dropdown btn-group ${this.state.open ? 'show' : ''}`}
+        className={`Dropdown btn-group ${this.state.open ? 'Dropdown--open' : ''}`}
         onBlur={this.close}
       >
         <button
           type="button"
-          className="btn dropdown-first"
+          className="Dropdown-first"
           onClick={first.action}
           disabled={disabled}
         >{first.name}</button>
-        {rest.length !== 0 ?
+        {rest.length === 0 ? null : (
           <button
             disabled={disabled}
             type="button"
-            className="btn dropdown-toggle"
+            className="Dropdown-toggle"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded={this.state.open}
             onClick={this.open}
-          >
-            <i className="fa fa-caret-down"></i>
-          </button> : null}
-        <div className={`dropdown-menu ${orientation}`}>{dropdownMenu}</div>
+          ><i className="fa fa-caret-down" /></button>
+        )}
+        <div className={`Dropdown-menu ${orientation}`}>{dropdownMenu}</div>
       </div>
     );
   }

components/forms/ModalFormGroup.js

@@ -11,7 +11,7 @@ export default function ModalFormGroup(props) {
       <label className="col-sm-4 col-form-label" htmlFor={id}>{label}</label>
       <div className="col-sm-8">
         {children}
-        {description ? <small className="text-muted">{description}</small> : null}
+        {description ? <small className="text-muted modal-description">{description}</small> : null}
         <FormGroupError errors={errors} name={apiKey} inline={false} />
       </div>
     </FormGroup>

components/forms/PasswordInput.js

@@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react';
 import { Input } from './';
 
 
-const str = ['Extremely Weak', 'Very Weak', 'Weak', 'Moderate', 'Strong'];
+const str = ['an extremely weak', 'a very weak', 'a weak', 'a strong', 'a very strong'];
 
 export default function PasswordInput(props) {
   // eslint-disable-next-line no-undef
@@ -14,7 +14,6 @@ export default function PasswordInput(props) {
       <Input
         value={props.value}
         name={props.name}
-        placeholder="**********"
         className="PasswordInput-input"
         onChange={props.onChange}
         autoComplete="off"
@@ -30,7 +29,7 @@ export default function PasswordInput(props) {
       </div>
       {props.value === '' ? null : (
          <small className="PasswordInput-strength-text">
-           {str[strength.score]}
+           This is {str[strength.score]} password.
          </small>
        )}
     </div>

components/forms/Radio.js

@@ -6,11 +6,13 @@ export default function Radio(props) {
       <label>
         <input
           id={props.id}
+          name={props.name}
           type="radio"
           className="Radio-input"
           checked={props.checked}
           onChange={props.onChange}
           value={props.value}
+          name={props.name}
         />
         {props.label ? <span className="col-form-label Radio-label">{props.label}</span> : null}
       </label>
@@ -21,7 +23,9 @@ export default function Radio(props) {
 Radio.propTypes = {
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
-  value: PropTypes.bool.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  name: PropTypes.string.isRequired,
   label: PropTypes.any,
   id: PropTypes.string,
 };

components/lists/controls/MassEditControl.js

@@ -46,10 +46,10 @@ export default class MassEditControl extends Component {
         checked={allSelected}
         disabled={noneSelected}
         options={massEditOptions.map((option) => {
-          return {
+          return option && {
             name: option.name,
             action: this.createMassEditActionHandler(option.action),
-          };
+          } || option;
         })}
         onChange={this.onMassEditChange}
       />

components/lists/controls/MassEditDropdown.js

@@ -18,7 +18,7 @@ export default function MassEditDropdown(props) {
           checked={checked}
         />
       </span>
-      <Dropdown elements={options} disabled={disabled} />
+      <Dropdown elements={options} disabled={disabled} leftOriented />
     </div>
   );
 }

components/modals/ConfirmModalBody.js

@@ -1,6 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 
-import { SubmitButton } from '../forms';
+import { Form, SubmitButton } from '../forms';
 import { CancelButton } from '../buttons';
 
 export default class ConfirmModalBody extends Component {
@@ -9,7 +9,7 @@ export default class ConfirmModalBody extends Component {
     this.state = { loading: false };
   }
 
-  handleOk = async () => {
+  onSubmit = async () => {
     const { onOk } = this.props;
     this.setState({ loading: true });
     await onOk();
@@ -21,17 +21,17 @@ export default class ConfirmModalBody extends Component {
     const { loading } = this.state;
 
     return (
-      <div className={`ConfirmModalBody-body ${className}`}>
+      <Form className={`ConfirmModalBody-body ${className}`} onSubmit={this.onSubmit}>
         {React.isValidElement(children) ? children : <p>{children}</p>}
         <div className="Modal-footer">
           <CancelButton disabled={loading} onClick={onCancel} />
           <SubmitButton
             disabled={loading}
-            disabledChildren={buttonDisabledText}
-            onClick={this.handleOk}
+            disabledChildren={buttonDisabledText || 'Confirmed'}
           >{buttonText || 'Confirm'}</SubmitButton>
         </div>
-      </div>);
+      </Form>
+    );
   }
 }
 

components/scss/components/badges/Badge.scss

@@ -1,15 +1,15 @@
 $badge-height: 25px;
 
 .Badge {
-  @extend .font-small;
-  border-radius: 15px;
-  display: inline-block;
-  padding: 1px 1px 0 0;
-  position: absolute;
-  color: $white;
-  height: $badge-height;
-  text-align: center;
+    @extend .font-xs;
+    border-radius: 15px;
+    display: inline-block;
+    padding: 2px 1px 0 0;
+    position: absolute;
+    color: $white;
+    height: $badge-height;
+    text-align: center;
 
-  /* These settings are so that it looks circular generally and decent in other cases. */
-  min-width: $badge-height;
+    /* These settings are so that it looks circular generally and decent in other cases. */
+    min-width: $badge-height;
 }

components/scss/components/buttons/buttons.scss

@@ -11,7 +11,7 @@ a {
 
 .btn {
     @extend .font-normal;
-    padding: 6px 8px;
+    padding: $form-field-padding;
     text-decoration: none;
     border-radius: 0;
     border: $border;
@@ -21,19 +21,20 @@ a {
         cursor: pointer;
     }
 
+    &:hover,
+    &:active,
+    &:focus {
+        outline: 0;
+        box-shadow: none;
+    }
+
     &.btn-default {
         color: $black;
 
         &:not([disabled]):hover {
             background: $gray;
             color: $black;
         }
-
-        &:hover,
-        &:active,
-        &:focus {
-            outline: 0;
-        }
     }
 
     &.btn-help, &.btn-warning {

components/scss/components/cards/CardImageHeader.scss

@@ -1,5 +1,5 @@
 .CardImageHeader {
-    background-color: $light-gray;
+    background-color: $medium-gray;
     border-bottom: $border;
     padding: 15px 20px;
 

components/scss/components/dropdowns/Dropdown.scss

@@ -1,8 +1,4 @@
 .Dropdown {
-    &.dropdown-menu {
-        @extend .font-normal;
-    }
-
     .btn:hover {
         cursor: pointer;
     }
@@ -12,27 +8,58 @@
         box-shadow: none;
     }
 
-    .dropdown-first:focus, .dropdown-first:focus:active {
-        outline: 0;
+    &-toggle,
+    &-first,
+    &-item {
+        @extend .btn;
+        @extend .btn-default;
+
+        text-align: left;
     }
 
-    // TODO: BEMify
-    .dropdown-menu {
-        padding: 0;
+    &-item {
+        width: 100%;
+        display: block;
         border: 0;
-        margin-top: -1px;
-        margin-left: 1px;
+        padding: 0 15px;
 
-        .dropdown-item:first-of-type {
-            margin-left: -1px;
-        }
+        // Overwrites settings from inside .btn-group
+        margin-left: 0 !important;
+    }
+
+    &-toggle {
+        // Give menu an anchor position
+        position: relative;
+        width: $form-field-height;
+        height: $form-field-height;
+        text-align: center;
 
-        .dropdown-item:not(:first-of-type) {
-            border-top: 0;
+        // Hide default Bootstrap arrow
+        ::after {
+            display: none;
         }
     }
 
-    .dropdown-toggle::after {
+    &-menu {
+        @extend .font-normal;
+
+        border: $border;
+        width: 200px;
+        text-align: right;
+        position: absolute;
+        top: $form-field-height - 1px;
+        z-index: 1000;
+
+        left: 0;
+        &--right {
+            left: initial;
+            right: 0;
+        }
+
         display: none;
     }
+
+    &--open &-menu {
+        display: initial;
+    }
 }

components/scss/components/forms/FormGroupError.scss

@@ -9,5 +9,6 @@
     &--block {
         display: block;
         margin-left: 0;
+        padding-left: 0;
     }
 }