Merge branch 'dev' of github.com:soyjavi/react-toolbox into dev

* 'dev' of github.com:soyjavi/react-toolbox:
  ListItem legend may be a node as well (#1496)
  Allow pass inverse to IconMenu (#1490)
  Fix media queries panel height calculations (#1467)
  Allow to change FontIcon for Tab by passing it into the factory (#1439)
  Added required?: boolean; (#1491)

components/date_picker/DatePicker.d.ts

@@ -191,6 +191,10 @@ export interface DatePickerProps extends ReactToolbox.Props {
    * Date object with the currently selected date.
    */
   value?: Date | string;
+  /**
+   * Used in case the input is required.
+   */
+  required?: boolean;
 }
 
 export interface DatePickerLocale {

components/layout/theme.css

@@ -70,19 +70,23 @@
   }
 
   & .panel {
+    height: calc(100vh - var(--appbar-height));
+    max-height: calc(100vh - var(--appbar-height));
     top: var(--appbar-height);
 
     &:not(.bodyScroll) {
-      height: calc(100vh - var(--appbar-height));
-      max-height: calc(100vh - var(--appbar-height));
       overflow-y: scroll;
     }
 
     @media screen and (--xxs-viewport) and (--portrait) {
+      height: calc(100vh - var(--appbar-height-m-portrait));
+      max-height: calc(100vh - var(--appbar-height-m-portrait));
       top: var(--appbar-height-m-portrait);
     }
 
     @media screen and (--xs-viewport) and (--landscape) {
+      height: calc(100vh - var(--appbar-height-m-landscape));
+      max-height: calc(100vh - var(--appbar-height-m-landscape));
       top: var(--appbar-height-m-landscape);
     }
   }

components/list/ListItemContent.js

@@ -15,7 +15,10 @@ const factory = (ListItemText) => {
         PropTypes.node,
       ]),
       children: PropTypes.node,
-      legend: PropTypes.string,
+      legend: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.node,
+      ]),
       theme: PropTypes.shape({
         auto: PropTypes.string,
         itemContentRoot: PropTypes.string,

components/menu/IconMenu.d.ts

@@ -27,6 +27,11 @@ export interface IconMenuProps extends ReactToolbox.Props {
    * @default true
    */
   iconRipple?: boolean;
+  /**
+   * If true, the neutral colors are inverted. Useful if the icon is over a dark background.
+   * @default false
+   */
+  inverse?: boolean;
   /**
    * Transferred to the Menu component.
    * @default true

components/menu/IconMenu.js

@@ -16,6 +16,7 @@ const factory = (IconButton, Menu) => {
         PropTypes.element,
       ]),
       iconRipple: PropTypes.bool,
+      inverse: PropTypes.bool,
       menuRipple: PropTypes.bool,
       onClick: PropTypes.func,
       onHide: PropTypes.func,

components/tabs/Tab.js

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
-import { FontIcon } from '../font_icon';
 import { TABS } from '../identifiers';
 import rippleFactory from '../ripple/Ripple';
+import InjectFontIcon from '../font_icon/FontIcon';
 
-const factory = (ripple) => {
+const factory = (ripple, FontIcon) => {
   class Tab extends Component {
     static propTypes = {
       active: PropTypes.bool,
@@ -77,7 +77,7 @@ const factory = (ripple) => {
   return ripple(Tab);
 };
 
-const Tab = factory(rippleFactory({ centered: false }));
+const Tab = factory(rippleFactory({ centered: false }), InjectFontIcon);
 export default themr(TABS)(Tab);
 export { factory as tabFactory };
 export { Tab };

components/tabs/index.js

@@ -9,7 +9,7 @@ import theme from './theme.css';
 
 const applyTheme = Component => themr(TABS, theme)(Component);
 const ThemedTabContent = applyTheme(TabContent);
-const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false })));
+const ThemedTab = applyTheme(tabFactory(themedRippleFactory({ centered: false }), FontIcon));
 const ThemedTabs = applyTheme(tabsFactory(ThemedTab, ThemedTabContent, FontIcon));
 
 export { ThemedTab as Tab };