diff --git a/package-lock.json b/package-lock.json
index 11bc5d2c407..cc9907b1c2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -427,7 +427,7 @@
"deep-equal": "1.0.1",
"global": "4.3.2",
"make-error": "1.3.3",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-inspector": "2.2.2",
"uuid": "3.2.1"
}
@@ -443,7 +443,7 @@
"babel-runtime": "6.26.0",
"global": "4.3.2",
"marksy": "2.0.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-addons-create-fragment": "15.6.2",
"util-deprecate": "1.0.2"
}
@@ -461,7 +461,7 @@
"insert-css": "1.1.0",
"lodash.debounce": "4.0.8",
"moment": "2.20.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-color": "2.13.8",
"react-datetime": "2.13.0",
"react-textarea-autosize": "4.3.2",
@@ -476,7 +476,7 @@
"requires": {
"@storybook/components": "3.3.12",
"global": "4.3.2",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"@storybook/addon-options": {
@@ -516,7 +516,7 @@
"requires": {
"glamor": "2.20.40",
"glamorous": "4.11.4",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"@storybook/mantra-core": {
@@ -574,7 +574,7 @@
"lodash.pick": "4.4.0",
"postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "2.1.0",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"qs": "6.5.1",
"react-modal": "2.4.1",
"redux": "3.7.2",
@@ -641,7 +641,7 @@
"babel-runtime": "6.26.0",
"create-react-class": "15.6.3",
"hoist-non-react-statics": "1.2.0",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
},
"dependencies": {
"hoist-non-react-statics": {
@@ -767,7 +767,7 @@
"lodash.pick": "4.4.0",
"lodash.sortby": "4.7.0",
"podda": "1.2.2",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"qs": "6.5.1",
"react-fuzzy": "0.5.1",
"react-icons": "2.2.7",
@@ -785,7 +785,7 @@
"dev": true,
"requires": {
"exenv": "1.2.2",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"warning": "3.0.0"
}
}
@@ -2817,6 +2817,11 @@
"hoek": "4.2.0"
}
},
+ "bootstrap-slider": {
+ "version": "10.0.0",
+ "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-10.0.0.tgz",
+ "integrity": "sha1-1O3ToQrwMZfQION5LTLqbTfLOyg="
+ },
"bowser": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.2.tgz",
@@ -5528,7 +5533,7 @@
"doctrine": "2.1.0",
"has": "1.0.1",
"jsx-ast-utils": "2.0.1",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"eslint-plugin-standard": {
@@ -7207,7 +7212,7 @@
"fbjs": "0.8.16",
"inline-style-prefixer": "3.0.8",
"object-assign": "4.1.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"through": "2.3.8"
}
},
@@ -13537,9 +13542,9 @@
}
},
"prop-types": {
- "version": "15.6.0",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
- "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+ "version": "15.6.1",
+ "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
+ "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
"requires": {
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
@@ -13668,7 +13673,7 @@
"array-find": "1.0.0",
"exenv": "1.2.2",
"inline-style-prefixer": "2.0.5",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
},
"dependencies": {
"inline-style-prefixer": {
@@ -13799,7 +13804,7 @@
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
"object-assign": "4.1.1",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-addons-create-fragment": {
@@ -13823,7 +13828,7 @@
"dom-helpers": "3.3.1",
"invariant": "2.2.2",
"keycode": "2.1.9",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"prop-types-extra": "1.0.1",
"react-overlays": "0.7.4",
"uncontrollable": "4.1.0",
@@ -13851,7 +13856,7 @@
"requires": {
"lodash": "4.17.5",
"material-colors": "1.2.5",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"reactcss": "1.2.3",
"tinycolor2": "1.4.1"
}
@@ -13864,7 +13869,7 @@
"requires": {
"create-react-class": "15.6.3",
"object-assign": "3.0.0",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-onclickoutside": "6.7.1"
},
"dependencies": {
@@ -14153,7 +14158,7 @@
"fbjs": "0.8.16",
"loose-envify": "1.3.1",
"object-assign": "4.1.1",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-error-overlay": {
@@ -14167,7 +14172,7 @@
"resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz",
"integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=",
"requires": {
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-fuzzy": {
@@ -14179,7 +14184,7 @@
"babel-runtime": "6.26.0",
"classnames": "2.2.5",
"fuse.js": "3.2.0",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-html-attributes": {
@@ -14223,7 +14228,7 @@
"dev": true,
"requires": {
"exenv": "1.2.2",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-onclickoutside": {
@@ -14239,7 +14244,7 @@
"requires": {
"classnames": "2.2.5",
"dom-helpers": "3.3.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"prop-types-extra": "1.0.1",
"warning": "3.0.0"
}
@@ -14253,7 +14258,7 @@
"@types/inline-style-prefixer": "3.0.1",
"@types/react": "16.0.36",
"inline-style-prefixer": "3.0.8",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-style-proptype": "3.2.0"
}
},
@@ -14263,7 +14268,7 @@
"integrity": "sha512-Mafmkzj3oNmLSJNOlH+WWWyGIdzVLhPj+d12fDxQMQdwDQ5sMX7vQKOLpry4U+zRWieTCx448AyRKK0NLWuXmg==",
"dev": true,
"requires": {
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-test-renderer": {
@@ -14274,7 +14279,7 @@
"requires": {
"fbjs": "0.8.16",
"object-assign": "4.1.1",
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-textarea-autosize": {
@@ -14283,7 +14288,7 @@
"integrity": "sha1-lipSxoys6uQIwYrOzsKQSbgeQvo=",
"dev": true,
"requires": {
- "prop-types": "15.6.0"
+ "prop-types": "15.6.1"
}
},
"react-transition-group": {
@@ -14295,7 +14300,7 @@
"chain-function": "1.0.0",
"dom-helpers": "3.3.1",
"loose-envify": "1.3.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"warning": "3.0.0"
}
},
@@ -14307,7 +14312,7 @@
"requires": {
"babel-runtime": "6.26.0",
"deep-equal": "1.0.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"radium": "0.19.6",
"shallowequal": "0.2.2",
"velocity-react": "1.3.3"
@@ -17152,7 +17157,7 @@
"dev": true,
"requires": {
"lodash": "3.10.1",
- "prop-types": "15.6.0",
+ "prop-types": "15.6.1",
"react-transition-group": "1.2.1",
"velocity-animate": "1.5.1"
},
diff --git a/package.json b/package.json
index 2ab32f4e853..16a63808036 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
},
"homepage": "https://github.com/patternfly/patternfly-react#readme",
"dependencies": {
+ "bootstrap-slider": "^10.0.0",
"breakjs": "^1.0.0",
"classnames": "^2.2.5",
"patternfly": "^3.38.0",
@@ -75,7 +76,7 @@
"node-sass": "^4.7.2",
"prettier": "^1.9.2",
"prettier-eslint": "^8.8.1",
- "prop-types": "^15.6.0",
+ "prop-types": "^15.6.1",
"raf": "^3.4.0",
"react": "^16.2.0",
"react-dev-utils": "^5.0.0",
diff --git a/src/components/Slider/BSColumnsManager.js b/src/components/Slider/BSColumnsManager.js
new file mode 100644
index 00000000000..71ef0ffc9c5
--- /dev/null
+++ b/src/components/Slider/BSColumnsManager.js
@@ -0,0 +1,55 @@
+const LAYOUT = {
+ label: {
+ xs: 1,
+ sm: 1,
+ md: 1
+ },
+ form: {
+ xs: 4,
+ sm: 4,
+ md: 2
+ }
+};
+const SIZES = ['xs', 'sm', 'md'];
+
+/**
+ * class BSColumnsManager - helps to keep track on the BS grid usage.
+ *
+ * @return {type} description
+ */
+export default class BSColumnsManager {
+ constructor() {
+ this.columnCounter = { xs: 0, sm: 0, md: 0 };
+ }
+
+ /**
+ * Calculates the element column width by iterating over its size settings
+ * in the LAYOUT object.
+ * returns a class string, E.G: 'col-xs-2 col-sm-4 col-md-4'.
+ * @param {String} elementName
+ * @return {string}
+ */
+ getElementColumnsClass = (elementName, props) =>
+ SIZES.map(size => {
+ if (elementName !== 'slider') {
+ const numberOfColumns = LAYOUT[elementName][size];
+ this.columnCounter[size] += numberOfColumns;
+ return `col-${size}-${numberOfColumns}`;
+ }
+ const demoCounter = { xs: 0, sm: 0, md: 0 };
+
+ if (props.input || props.selectList) {
+ demoCounter[size] += LAYOUT.form[size];
+ }
+
+ if (props.icon || props.label) {
+ demoCounter[size] += LAYOUT.label[size];
+ }
+
+ return `col-${size}-${12 - demoCounter[size]}`;
+ }).join(' ');
+
+ resetColumnsCount = () => {
+ this.columnCounter = { xs: 0, sm: 0, md: 0 };
+ };
+}
diff --git a/src/components/Slider/Form.js b/src/components/Slider/Form.js
new file mode 100644
index 00000000000..5a4b8fe52fb
--- /dev/null
+++ b/src/components/Slider/Form.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, FormControl, FormGroup } from '../../index';
+
+const SliderForm = props => {
+ const input = props.input ? (
+