Merge branch 'master' into feat/button-progress

CHANGELOG.md

@@ -22,3 +22,9 @@
 - chore: upgraded styles
 - feat: added logout icon
 - fix: reduce the size of the package
+
+#v1.2.1
+- fix(styles): remove transition for modal background due to slowness on 4K Monitors
+- fix(styles): table header is now blue
+- fix(styles): sidebar color is applied to tabs background
+- fix: pass className prop to tabs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightelligence/react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
     "humps": "^2.0.1",
     "prop-types": "^15.6.2",
     "react-circular-progressbar": "^2.0.3",
+    "react-is": "^16.12.0",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {

src/content/BasicCardTable/BasicCardTableCardItem.js

@@ -1,5 +1,6 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import * as olt from '@lightelligence/styles';
+import { isForwardRef, isFragment } from 'react-is';
 import { node, bool, shape, string, oneOf } from 'prop-types';
 import classnames from 'classnames';
 import { BasicCardTableTitle } from './BasicCardTableTitle';
@@ -9,10 +10,14 @@ const contentRequiresWrapping = (children) => {
   if (Array.isArray(children)) {
     return contentRequiresWrapping(children[0]);
   }
-  if (children.type === Fragment) {
+  if (isFragment(children)) {
     return contentRequiresWrapping(children.props.children);
   }
 
+  if (isForwardRef(children)) {
+    return false;
+  }
+
   return !children.type || children.type !== BasicCardTableContent;
 };
 

src/content/BasicCardTable/BasicCardTableCardItem.test.js

@@ -54,6 +54,20 @@ describe('BasicCardTableItem', () => {
     ).toBeTruthy();
   });
 
+  test('renders forwardRef of content', async () => {
+    const Content = React.forwardRef((props, ref) => (
+      <BasicCardTableContent {...props}>Foo</BasicCardTableContent>
+    ));
+
+    const { container } = renderCardItem({
+      children: <Content />,
+    });
+
+    expect(
+      container.querySelectorAll(`.${oltStyles.CardTableContent}`).length,
+    ).toBe(1);
+  });
+
   test('renders array of content children', async () => {
     const { container } = renderCardItem({
       children: [