Merge branch 'master' into greenkeeper/commitlint-7.0.0

tabler · Jun 12, 2018 · ff0fd77 · ff0fd77
2 parents d5d11cb + c7b36d3
commit ff0fd77
Show file tree

Hide file tree

Showing 47 changed files with 563 additions and 163 deletions.
diff --git a/example/public/documentation/index.html b/example/public/documentation/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.3b1ce0e9.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.d8db5f20.js"></script></body></html>
diff --git a/example/src/FormElementsPage.react.js b/example/src/FormElementsPage.react.js
@@ -141,15 +141,15 @@ function FormElements() {
               <Form.Group label="Input Group">
                 <Form.InputGroup>
                   <Form.Input placeholder="Search for..." />
-                  <Form.InputGroup append>
+                  <Form.InputGroupAppend>
                     <Button
                       RootComponent="a"
                       color="primary"
                       href="http://www.google.com"
                     >
                       Go!
                     </Button>
-                  </Form.InputGroup>
+                  </Form.InputGroupAppend>
                 </Form.InputGroup>
               </Form.Group>
             </ComponentDemo>

diff --git a/example/src/HomePage.react.js b/example/src/HomePage.react.js
@@ -327,23 +327,23 @@ function Home() {
                   </Card.Body>
                 </Card>
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="New feedback"
                   content="62"
                   progressColor="red"
                   progressWidth={28}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Today profit"
                   content="$652"
                   progressColor="green"
                   progressWidth={84}
                 />
               </Grid.Col>
-              <Grid.Col sm={4}>
+              <Grid.Col sm={6}>
                 <ProgressCard
                   header="Users online"
                   content="76"
@@ -359,8 +359,7 @@ function Home() {
               icon="dollar-sign"
               header={
                 <a>
-                  132
-                  <small>Sales</small>
+                  132 <small>Sales</small>
                 </a>
               }
               footer={"12 waiting payments"}
@@ -372,8 +371,7 @@ function Home() {
               icon="shopping-cart"
               header={
                 <a>
-                  78
-                  <small>Orders</small>
+                  78 <small>Orders</small>
                 </a>
               }
               footer={"32 shipped"}
@@ -385,8 +383,7 @@ function Home() {
               icon="users"
               header={
                 <a>
-                  1,352
-                  <small>Members</small>
+                  1,352 <small>Members</small>
                 </a>
               }
               footer={"163 registered today"}
@@ -398,8 +395,7 @@ function Home() {
               icon="message-square"
               header={
                 <a>
-                  132
-                  <small>Comments</small>
+                  132 <small>Comments</small>
                 </a>
               }
               footer={"16 waiting"}

diff --git a/package.json b/package.json
@@ -30,29 +30,27 @@
     "src/**/*.js": "eslint --max-warnings=0"
   },
   "dependencies": {
-    "@semantic-release/changelog": "^2.0.2",
-    "@semantic-release/git": "^5.0.0",
     "classnames": "^2.2.5",
-    "commitlint": "^7.0.0",
     "react-popper": "^1.0.0-beta.6",
-    "react-styleguidist": "^7.0.9",
-    "react-text-mask": "^5.4.1",
-    "webpack": "^3.8.1"
+    "react-text-mask": "^5.4.1"
   },
   "peerDependencies": {
     "react": "^16.2.0",
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^6.2.0",
-    "@commitlint/config-conventional": "^6.1.3",
+    "@commitlint/config-conventional": "^7.0.1",
+    "@semantic-release/changelog": "^2.0.2",
+    "@semantic-release/git": "^5.0.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "commitizen": "^2.10.1",
+    "commitlint": "^7.0.0",
     "cz-conventional-changelog": "^2.1.0",
     "empty": "^0.10.1",
     "eslint": "^4.1.1",
@@ -61,25 +59,26 @@
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-jsx-a11y": "5.1.1",
     "eslint-plugin-react": "^7.1.0",
-    "flow-bin": "^0.73.0",
-    "flow-copy-source": "^1.3.0",
+    "flow-bin": "^0.74.0",
+    "flow-copy-source": "^2.0.0",
     "gh-pages": "^1.1.0",
     "husky": "^0.14.3",
     "lint-staged": "^7.0.4",
-    "prettier": "1.13.3",
+    "prettier": "1.13.5",
     "pretty-quick": "^1.4.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-scripts": "^1.1.1",
-    "rollup": "0.59.1",
+    "react-styleguidist": "^7.0.9",
+    "rollup": "0.60.2",
     "rollup-plugin-babel": "3.0.4",
     "rollup-plugin-commonjs": "9.1.3",
     "rollup-plugin-node-resolve": "3.3.0",
     "rollup-plugin-peer-deps-external": "2.1.1",
     "rollup-plugin-postcss": "1.6.1",
     "rollup-plugin-url": "1.4.0",
     "semantic-release": "^15.5.0",
-    "typed-styles": "^0.0.5"
+    "webpack": "^3.8.1"
   },
   "files": [
     "dist"

diff --git a/rollup.config.js b/rollup.config.js
@@ -12,23 +12,23 @@ export default {
   output: [
     {
       file: pkg.main,
-      format: "cjs"
+      format: "cjs",
     },
     {
       file: pkg.module,
-      format: "es"
-    }
+      format: "es",
+    },
   ],
   plugins: [
     external(),
     postcss({
-      modules: true
+      modules: false,
     }),
     url(),
     babel({
-      exclude: "node_modules/**"
+      exclude: "node_modules/**",
     }),
     resolve(),
-    commonjs()
-  ]
+    commonjs(),
+  ],
 };
diff --git a/src/components/Avatar/Avatar.react.js b/src/components/Avatar/Avatar.react.js
@@ -5,7 +5,7 @@ import { Icon } from "../";
 import cn from "classnames";
 import AvatarList from "./AvatarList.react";
 
-type Props = {|
+export type Props = {|
   +children?: React.Node,
   +className?: string,
   /**

diff --git a/src/components/Button/Button.react.js b/src/components/Button/Button.react.js
@@ -24,6 +24,7 @@ type PropsForAll = {|
   +to?: string,
   +isOption?: boolean,
   +rootRef?: (?HTMLElement) => void,
+  +onClick?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
 |};
 
 type DefaultButtonComponent = {|
@@ -70,6 +71,8 @@ const Button = (props: Props): React.Node => {
     isDropdownToggle,
     isOption,
     rootRef,
+    to,
+    onClick,
   } = props;
 
   const classes = cn(
@@ -148,8 +151,6 @@ const Button = (props: Props): React.Node => {
       </a>
     );
   } else {
-    const { onClick, to } = props;
-
     const Component: React.ElementType = props.RootComponent;
 
     return (
@@ -163,4 +164,6 @@ const Button = (props: Props): React.Node => {
 Button.List = ButtonList;
 Button.Dropdown = ButtonDropdown;
 
+Button.displayName = "Button";
+
 export default Button;
diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
@@ -28,6 +28,10 @@ type DefaultProps = {|
    * Is this Dropdown a Card option?
    */
   +isOption?: boolean,
+  /**
+   * Add flex classes to the Dropdown
+   */
+  +flex?: boolean | "xs" | "sm" | "md" | "lg" | "xl",
 |};
 
 type WithAnyTriggerProps = {|
@@ -159,13 +163,22 @@ class Dropdown extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const { className, children, desktopOnly, isOption, ...props } = this.props;
+    const {
+      className,
+      children,
+      desktopOnly,
+      isOption,
+      flex = false,
+      ...props
+    } = this.props;
 
     const classes = cn(
       {
         dropdown: true,
         "d-none": desktopOnly,
-        "d-md-flex": desktopOnly,
+        "d-md-flex": desktopOnly || flex === "md",
+        [`d-{flex}-flex`]: ["xs", "sm", "lg", "xl"].includes(flex),
+        "d-flex": flex === true,
         "card-options-dropdown": isOption,
         show: this.state.isOpen,
       },

diff --git a/src/components/Form/Form.examples.md b/src/components/Form/Form.examples.md
@@ -1 +1,7 @@
 
+```jsx
+<Form onSubmit={(event) => console.log(event.target.name + 'clicked')}>
+  <Form.Input name='username' label='Username' placeholder='Enter Username' />
+  <Button type='submit' value='Submit' />
+</Form>
+```
diff --git a/src/components/Form/Form.react.js b/src/components/Form/Form.react.js
@@ -29,7 +29,7 @@ import FormInputGroupPrepend from "./FormInputGroupPrepend.react";
 import FormMaskedInput from "./FormMaskedInput.react";
 import FormDatePicker from "./FormDatePicker.react";
 
-type Props = {|
+export type Props = {|
   +children?: React.Node,
   +className?: string,
   +action?: string,

diff --git a/src/components/Form/FormCheckbox.react.js b/src/components/Form/FormCheckbox.react.js
@@ -6,6 +6,9 @@ import Form from "./";
 
 export type Props = {|
   +className?: string,
+  /**
+   * Wrap the checkbox with a label
+   */
   +label?: string,
   +value?: string | number | boolean,
   +name?: string,
@@ -33,23 +36,30 @@ function FormCheckbox({
     { "custom-control-inline": isInline },
     className
   );
-  return (
+  const inputComponent = (
+    <Form.Input
+      type="checkbox"
+      name={name}
+      value={value}
+      checked={checked}
+      className={classes}
+      disabled={disabled}
+      readOnly={readOnly}
+      onChange={onChange}
+    />
+  );
+
+  return label ? (
     <label className={classes}>
-      <Form.Input
-        type="checkbox"
-        name={name}
-        value={value}
-        checked={checked}
-        className={classes}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onChange}
-      />
+      {inputComponent}
       <span className="custom-control-label">{label}</span>
     </label>
+  ) : (
+    inputComponent
   );
 }
 
 FormCheckbox.displayName = "Form.Checkbox";
 
+/** @component */
 export default FormCheckbox;
diff --git a/src/components/Form/FormGroup.react.js b/src/components/Form/FormGroup.react.js
@@ -3,21 +3,27 @@
 import * as React from "react";
 import cn from "classnames";
 import FormLabel from "./FormLabel.react";
+import FormInput from "./FormInput.react";
+import type { Props as InputProps } from "./FormInput.react";
 
 type Props = {|
   +children?: React.Node,
   +className?: string,
   +label?: React.Node,
   +isRequired?: boolean,
+  +inputProps?: InputProps,
 |};
 
 function FormGroup({
   className,
   children,
   label,
   isRequired,
+  inputProps,
 }: Props): React.Node {
   const classes = cn("form-group", className);
+  const inputComponent =
+    inputProps && React.createElement(FormInput, inputProps);
   return (
     <div className={classes}>
       {!label ? null : typeof label === "string" ? (
@@ -28,7 +34,7 @@ function FormGroup({
       ) : (
         label
       )}
-      {children}
+      {inputComponent || children}
     </div>
   );
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.3b1ce0e9.js"></script></body></html>
		<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Tabler React Style Guide</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"></head><body><div id="rsg-root"></div><script src="build/bundle.d8db5f20.js"></script></body></html>