Merge pull request #693 from frontside-folio/jc/node-prop-types

Allow node prop types for labels and validation messages

CHANGELOG.md

@@ -1,9 +1,11 @@
 # Change history for stripes-components
 
-## 4.4.0 (IN PROGRESS)
+## [4.3.1](https://github.com/folio-org/stripes-components/tree/v4.3.0) (2018-11-01)
+[Full Changelog](https://github.com/folio-org/stripes-components/compare/v4.3.0...v4.3.1)
 
 * `color` chokes on rgb/rgba; use hex values instead.
 * Validate presence of `props.onClick()` before calling it.
+* Allow node prop types for labels and validation messages
 
 ## [4.3.0](https://github.com/folio-org/stripes-components/tree/v4.3.0) (2018-10-31)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v4.2.0...v4.3.0)

lib/AutoSuggest/AutoSuggest.js

@@ -26,10 +26,10 @@ const defaultProps = {
 };
 
 const propTypes = {
-  error: PropTypes.string,
+  error: PropTypes.node,
   id: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  label: PropTypes.string,
+  label: PropTypes.node,
   meta: PropTypes.object,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,

lib/Checkbox/Checkbox.js

@@ -15,15 +15,12 @@ class Checkbox extends React.Component {
     ]),
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    error: PropTypes.string,
+    error: PropTypes.node,
     fullWidth: PropTypes.bool,
     hover: PropTypes.bool,
     id: PropTypes.string,
     inline: PropTypes.bool,
-    label: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-    ]),
+    label: PropTypes.node,
     labelClass: PropTypes.string,
     labelStyle: PropTypes.object,
     marginBottom0: PropTypes.bool,
@@ -32,7 +29,7 @@ class Checkbox extends React.Component {
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     value: PropTypes.string,
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   constructor(props) {

lib/Datepicker/Datepicker.js

@@ -25,7 +25,7 @@ const propTypes = {
   id: PropTypes.string,
   input: PropTypes.object,
   intl: intlShape.isRequired,
-  label: PropTypes.string,
+  label: PropTypes.node,
   locale: PropTypes.string,
   meta: PropTypes.object,
   onChange: PropTypes.func,

lib/MultiSelection/MultiSelectOptionsList.js

@@ -19,7 +19,7 @@ class MultiSelectOptionsList extends React.Component {
     controlRef: PropTypes.object,
     downshiftActions: PropTypes.object,
     emptyMessage: PropTypes.string,
-    error: PropTypes.string,
+    error: PropTypes.node,
     exactMatch: PropTypes.bool,
     formatter: PropTypes.func,
     getInputProps: PropTypes.func,
@@ -47,7 +47,7 @@ class MultiSelectOptionsList extends React.Component {
       PropTypes.arrayOf(PropTypes.object)
     ]),
     setHighlightedIndex: PropTypes.func,
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   }
 
   componentDidUpdate(prevProps) {

lib/MultiSelection/MultiSelection.js

@@ -34,14 +34,14 @@ class MultiSelection extends React.Component {
     dataOptions: PropTypes.arrayOf(PropTypes.any),
     dirty: PropTypes.bool,
     emptyMessage: PropTypes.string,
-    error: PropTypes.string,
+    error: PropTypes.node,
     filter: PropTypes.func,
     formatter: PropTypes.func,
     id: PropTypes.string,
     intl: intlShape.isRequired,
     isValid: PropTypes.bool,
     itemToString: PropTypes.func,
-    label: PropTypes.string,
+    label: PropTypes.node,
     maxHeight: PropTypes.number,
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
@@ -55,7 +55,7 @@ class MultiSelection extends React.Component {
       PropTypes.arrayOf(PropTypes.object),
       PropTypes.arrayOf(PropTypes.string),
       PropTypes.string]),
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   static defaultProps = {

lib/RadioButton/RadioButton.js

@@ -12,7 +12,7 @@ class RadioButton extends React.Component {
     checked: PropTypes.bool,
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    error: PropTypes.string,
+    error: PropTypes.node,
     fullWidth: PropTypes.bool,
     hover: PropTypes.bool,
     id: PropTypes.string,
@@ -29,7 +29,7 @@ class RadioButton extends React.Component {
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
     value: PropTypes.string,
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   constructor(props) {

lib/RadioButtonGroup/RadioButtonGroup.js

@@ -5,7 +5,7 @@ import css from './RadioButtonGroup.css';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
-  error: PropTypes.string,
+  error: PropTypes.node,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,

lib/RepeatableField/RepeatableField.js

@@ -9,7 +9,7 @@ import css from './RepeatableField.css';
 
 class RepeatableField extends Component {
   static propTypes = {
-    addLabel: PropTypes.string,
+    addLabel: PropTypes.node,
     emptyMessage: PropTypes.node,
     fields: PropTypes.oneOfType([
       PropTypes.array,

lib/Select/Select.js

@@ -15,10 +15,10 @@ class Select extends Component {
     children: PropTypes.node,
     dataOptions: PropTypes.arrayOf(PropTypes.object),
     dirty: PropTypes.bool,
-    error: PropTypes.string,
+    error: PropTypes.node,
     fullWidth: PropTypes.bool,
     id: PropTypes.string,
-    label: PropTypes.string,
+    label: PropTypes.node,
     loading: PropTypes.bool,
     marginBottom0: PropTypes.bool,
     name: PropTypes.string,
@@ -30,7 +30,7 @@ class Select extends Component {
     validationEnabled: PropTypes.bool,
     validStylesEnabled: PropTypes.bool,
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   static defaultProps = {

lib/Selection/Selection.js

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 import SingleSelect from './SingleSelect';
 
 const propTypes = {
-  emptyMessage: PropTypes.string,
+  emptyMessage: PropTypes.node,
   formatter: PropTypes.func,
-  label: PropTypes.string,
+  label: PropTypes.node,
   labelIsValue: PropTypes.bool,
   listMaxHeight: PropTypes.string,
   name: PropTypes.string,

lib/Selection/SingleSelect.js

@@ -23,18 +23,18 @@ import formStyles from '../sharedStyles/form.css';
 const propTypes = {
   autoFocus: PropTypes.bool,
   dataOptions: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string,
+    label: PropTypes.node,
     value: PropTypes.string,
   })).isRequired,
   disabled: PropTypes.bool,
   emptyMessage: PropTypes.string,
-  error: PropTypes.string,
+  error: PropTypes.node,
   formatter: PropTypes.func,
   hasChanged: PropTypes.bool,
   id: PropTypes.string,
   intl: intlShape.isRequired,
   isValid: PropTypes.bool,
-  label: PropTypes.string,
+  label: PropTypes.node,
   listMaxHeight: PropTypes.string,
   marginBottom0: PropTypes.bool,
   multiple: PropTypes.bool,
@@ -49,7 +49,7 @@ const propTypes = {
   tether: PropTypes.object,
   useValidStyle: PropTypes.bool,
   value: PropTypes.string,
-  warning: PropTypes.string,
+  warning: PropTypes.node,
 };
 
 const defaultProps = {

lib/TextArea/TextArea.js

@@ -13,11 +13,11 @@ class TextArea extends Component {
     autoFocus: PropTypes.bool,
     dirty: PropTypes.bool,
     endControl: PropTypes.element,
-    error: PropTypes.string,
+    error: PropTypes.node,
     fullWidth: PropTypes.bool,
     id: PropTypes.string,
     inputRef: PropTypes.func,
-    label: PropTypes.string,
+    label: PropTypes.node,
     loading: PropTypes.bool,
     marginBottom0: PropTypes.bool,
     name: PropTypes.string,
@@ -43,7 +43,7 @@ class TextArea extends Component {
      * String of text to display.
      */
     value: PropTypes.string,
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   static defaultProps = {

lib/TextField/TextField.js

@@ -45,7 +45,7 @@ class TextField extends Component {
     /**
      * Error string to display after input.
      */
-    error: PropTypes.string,
+    error: PropTypes.node,
     /**
      * Apply CSS class on wrapper element on focus.
      */
@@ -77,7 +77,7 @@ class TextField extends Component {
     /**
      * The content for the input's label.
      */
-    label: PropTypes.string,
+    label: PropTypes.node,
     /**
      * Applies a loading animation.
      */
@@ -152,7 +152,7 @@ class TextField extends Component {
     /**
      * Warning string.
      */
-    warning: PropTypes.string,
+    warning: PropTypes.node,
   };
 
   static defaultProps = {

lib/Timepicker/Timepicker.js

@@ -21,7 +21,7 @@ const propTypes = {
   id: PropTypes.string,
   input: PropTypes.object,
   intl: intlShape.isRequired,
-  label: PropTypes.string,
+  label: PropTypes.node,
   locale: PropTypes.string,
   meta: PropTypes.object,
   onChange: PropTypes.func,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@folio/stripes-components",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Component library for building Stripes applications.",
   "license": "Apache-2.0",
   "repository": "folio-org/stripes-components",