@oliasoft-open-source/react-ui-library 2.3.5 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "2.3.5",
+  "version": "2.4.1",
   "description": "Reusable UI components for React projects",
   "main": "index.js",
   "scripts": {
@@ -126,6 +126,7 @@
     "react-icons": "^4.2.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-laag": "^2.0.3",
+    "react-resizable": "^3.0.4",
     "react-router-dom": "^5.3.0",
     "react-svg": "^14.0.12",
     "react-toastify": "^8.0.2",

package/src/components/drawer/drawer-resize-wrapper.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Resizable } from 'react-resizable';
+import PropTypes from 'prop-types';
+import styles from './drawer.module.less';
+
+const ResizeHandle = React.forwardRef((props, ref) => {
+  const { handleAxis, ...rest } = props;
+  return (
+    <div
+      ref={ref}
+      className={styles.resizeHandle}
+      {...rest} // eslint-disable-line react/jsx-props-no-spreading
+    />
+  );
+});
+
+export const DrawerResizeWrapper = ({
+  children,
+  width,
+  minWidth,
+  right,
+  onResize,
+  open,
+}) => {
+  const [isResizing, setIsResizing] = useState(false);
+  const MINIMUM_OPEN_WIDTH = 100;
+  const MAXIMUM_OPEN_WIDTH = window.innerWidth / 2;
+
+  const handleResize = (event, { node, size, handle }) => {
+    if (
+      open &&
+      size.width > MINIMUM_OPEN_WIDTH &&
+      size.width < MAXIMUM_OPEN_WIDTH
+    ) {
+      onResize(size.width);
+    }
+  };
+
+  return onResize ? (
+    <Resizable
+      width={width}
+      height={100} // Arbitrary height value. It's required by react-resizable even if height not adjustable but doesn't actually do anything in this case
+      minConstraints={[minWidth, null]}
+      onResize={handleResize}
+      handle={open ? <ResizeHandle /> : null}
+      resizeHandles={right ? ['w'] : ['e']}
+      axis="x"
+      className={isResizing ? styles.isResizing : ''}
+      onResizeStart={() => setIsResizing(true)}
+      onResizeStop={() => setIsResizing(false)}
+    >
+      {children}
+    </Resizable>
+  ) : (
+    <>{children}</>
+  );
+};
+
+DrawerResizeWrapper.defaultProps = {
+  right: false,
+  width: 400,
+  minWidth: null,
+  children: null,
+  onResize: null,
+};
+
+DrawerResizeWrapper.propTypes = {
+  right: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  children: PropTypes.node,
+  onResize: PropTypes.func,
+};

package/src/components/drawer/drawer-tabs.jsx

@@ -31,6 +31,7 @@ export const DrawerTabs = ({
         return (
           <div
             style={{ width }}
+            className={styles.tabsContent}
             key={index}
             data-testid={testId && `${testId}-content-${index}`}
           >

package/src/components/drawer/drawer.jsx

@@ -5,6 +5,7 @@ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { Button } from '../button/button';
 import { DrawerTabs } from './drawer-tabs';
 import styles from './drawer.module.less';
+import { DrawerResizeWrapper } from './drawer-resize-wrapper';
 
 export const Drawer = ({
   background,
@@ -23,6 +24,7 @@ export const Drawer = ({
   tabs,
   defaultTabIndex,
   testId,
+  onResize,
 }) => {
   const isStandardButton = button === true;
   const isCustomButton = !isStandardButton && isValidElement(button);
@@ -30,7 +32,8 @@ export const Drawer = ({
     isStandardButton || tabs ? useState(openProp) : [openProp, null];
   const [activeTab, setActiveTab] = useState(open ? defaultTabIndex : null);
   const openWidth = Array.isArray(width) ? width[activeTab] : width;
-  const currentWidth = open ? openWidth : closedWidth;
+  const TABS_WIDTH = 38;
+  const currentWidth = open ? openWidth : tabs ? TABS_WIDTH : closedWidth;
 
   const handleTabClick = (index) => {
     if (activeTab === index) {
@@ -43,58 +46,64 @@ export const Drawer = ({
   };
 
   return (
-    <div
-      className={cx(
-        styles.drawer,
-        shadow ? styles.shadow : '',
-        fixed ? styles.fixed : styles.inline,
-        right ? styles.right : styles.left,
-      )}
-      style={{
-        top,
-      }}
+    <DrawerResizeWrapper
+      width={currentWidth}
+      minWidth={tabs ? TABS_WIDTH : closedWidth}
+      onResize={onResize}
+      open={open}
+      right={right}
     >
       <div
-        className={cx(styles.drawerContent, border && styles.border)}
-        style={{ background, borderColor: border, width: currentWidth }}
-      >
-        {tabs ? (
-          <DrawerTabs
-            width={openWidth}
-            testId={testId}
-            open={open}
-            tabs={tabs}
-            activeTab={activeTab}
-            background={background}
-            handleTabClick={handleTabClick}
-          />
-        ) : (
-          <div style={{ width: openWidth }}>{children}</div>
+        className={cx(
+          styles.drawer,
+          shadow ? styles.shadow : '',
+          fixed ? styles.fixed : styles.inline,
+          right ? styles.right : styles.left,
         )}
-      </div>
-
-      {button && (
-        <span
-          className={cx(
-            styles.toggleButton,
-            open && (isStandardButton || (isCustomButton && buttonAnimate))
-              ? styles.toggleButtonOpen
-              : '',
-            buttonPosition === 'top' ? styles.top : styles.bottom,
-          )}
+        style={{ top }}
+      >
+        <div
+          className={cx(styles.drawerContent, border && styles.border)}
+          style={{ background, borderColor: border, width: currentWidth }}
         >
-          {isCustomButton ? (
-            button
-          ) : (
-            <Button
-              onClick={setOpen ? () => setOpen(!open) : null}
-              round
-              icon={right ? <FaChevronRight /> : <FaChevronLeft />}
+          {tabs ? (
+            <DrawerTabs
+              width={openWidth}
+              testId={testId}
+              open={open}
+              tabs={tabs}
+              activeTab={activeTab}
+              background={background}
+              handleTabClick={handleTabClick}
             />
+          ) : (
+            <div style={{ width: openWidth }}>{children}</div>
           )}
-        </span>
-      )}
-    </div>
+        </div>
+
+        {button && (
+          <span
+            className={cx(
+              styles.toggleButton,
+              open && (isStandardButton || (isCustomButton && buttonAnimate))
+                ? styles.toggleButtonOpen
+                : '',
+              buttonPosition === 'top' ? styles.top : styles.bottom,
+            )}
+          >
+            {isCustomButton ? (
+              button
+            ) : (
+              <Button
+                onClick={setOpen ? () => setOpen(!open) : null}
+                round
+                icon={right ? <FaChevronRight /> : <FaChevronLeft />}
+              />
+            )}
+          </span>
+        )}
+      </div>
+    </DrawerResizeWrapper>
   );
 };
 
@@ -115,6 +124,7 @@ Drawer.defaultProps = {
   tabs: null,
   defaultTabIndex: 0,
   testId: undefined,
+  onResize: null,
 };
 
 Drawer.propTypes = {
@@ -147,4 +157,5 @@ Drawer.propTypes = {
   ),
   testId: PropTypes.string,
   defaultTabIndex: PropTypes.number,
+  onResize: PropTypes.func,
 };

package/src/components/drawer/drawer.module.less

@@ -1,12 +1,14 @@
 @import '../../style/variables.less';
 
 :root {
+  --color-background-drawer-tabs: var(--color-neutral-100);
   --color-background-drawer-tab: #fff9f4;
   --color-background-drawer-tab-hover: white;
   --color-border-drawer-tab: #e4cbb7;
 }
 
 html[data-theme='dark'] {
+  --color-background-drawer-tabs: var(--color-neutral-900);
   --color-background-drawer-tab: var(--color-primary-muted-800);
   --color-background-drawer-tab-hover: var(--color-primary-muted-700);
   --color-border-drawer-tab: var(--color-border);
@@ -17,10 +19,12 @@ html[data-theme='dark'] {
 
   &.left {
     order: -1;
+    margin-left: -1px;
   }
 
   &.right {
     order: 9999;
+    margin-right: -1px;
   }
 }
 
@@ -58,9 +62,12 @@ html[data-theme='dark'] {
   overflow-y: auto;
   max-height: 100%;
   min-height: 100%;
-
   transition: width 0.2s;
 
+  .isResizing & {
+    transition: none;
+  }
+
   @media print {
     background: transparent !important;
   }
@@ -81,7 +88,7 @@ html[data-theme='dark'] {
   display: inline-block;
   transform: rotate(180deg);
   position: absolute;
-  z-index: 1;
+  z-index: @zindex_drawer + 3;
 
   .left & {
     right: -19px;
@@ -106,28 +113,30 @@ html[data-theme='dark'] {
 
 .tabs {
   position: absolute;
-  top: 20px;
+  top: 0;
+  bottom: 0;
+  background-color: var(--color-background-drawer-tabs);
+  padding-top: 20px;
   z-index: @zindex_drawer + 1;
+  border-left: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
 
   .left & {
-    left: 100%;
-    margin-left: -1px;
+    right: 0;
   }
 
   .right & {
-    right: 100%;
-    margin-right: -1px;
+    left: 0;
   }
 
   .tab {
-    height: 40px;
-    width: 40px;
+    height: 38px;
+    width: 38px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 1px;
-    border-radius: 4px;
     cursor: pointer;
+    margin: -1px;
     transition: color 0.3s, background-color 0.3s;
     border: 1px solid var(--color-border-drawer-tab);
 
@@ -165,3 +174,37 @@ html[data-theme='dark'] {
     }
   }
 }
+
+.tabsContent {
+  .left & {
+    padding-right: 36px;
+  }
+  .right & {
+    padding-left: 36px;
+  }
+}
+
+.resizeHandle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  z-index: @zindex_drawer + 2;
+  cursor: ew-resize;
+
+  &:hover {
+    background: rgba(@colorPrimary, 0.25);
+  }
+
+  &:active {
+    background: @colorPrimary;
+  }
+
+  .left & {
+    right: 0;
+  }
+
+  .right & {
+    left: 0;
+  }
+}

package/src/components/drawer/drawer.stories.jsx

@@ -5,6 +5,8 @@ import {
   FaCogs,
   FaPenAlt,
   FaQuestion,
+  FaTrash,
+  FaPlus,
 } from 'react-icons/fa';
 import { Drawer, Button, List, Heading, Flex } from '../../..';
 import { listSubheadingsBadges } from '../list/list.stories-data';
@@ -29,7 +31,7 @@ export default {
   },
   decorators: [
     (story) => (
-      <Flex height="400px">
+      <Flex height="400px" wrap={false}>
         <div
           style={{
             flexGrow: 1,
@@ -154,3 +156,141 @@ Tabs.parameters = {
     },
   },
 };
+
+export const MultipleTabbedDrawers = () => {
+  const tabs1 = [
+    {
+      icon: <FaQuestion />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Help</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+    {
+      icon: <FaCogs />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Settings</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+  ];
+  const tabs2 = [
+    {
+      icon: <FaPenAlt />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Edit</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+  ];
+  return (
+    <>
+      <Drawer
+        right
+        background="var(--color-background-raised)"
+        tabs={tabs1}
+        border
+        open
+      />
+      <Drawer
+        right
+        background="var(--color-background-raised)"
+        tabs={tabs2}
+        border
+        open
+      />
+    </>
+  );
+};
+
+export const Resizable = () => {
+  const [open, setOpen] = useState(true);
+  const [listDrawerWidth, setListDrawerWidth] = useState(300);
+  const [tabbedDrawerWidth, setTabbedDrawerWidth] = useState(300);
+  const tabs = [
+    {
+      icon: <FaQuestion />,
+      content: (
+        <div style={{ padding: 20 }}>
+          <Heading top>Help</Heading>
+          {'Example content goes here lorem ipsum. '.repeat(500)}
+        </div>
+      ),
+    },
+  ];
+  return (
+    <>
+      <Drawer
+        button={
+          <Button
+            onClick={setOpen ? () => setOpen(!open) : null}
+            round
+            icon={<FaChevronLeft />}
+          />
+        }
+        open={open}
+        background="var(--color-background-raised)"
+        border
+        width={listDrawerWidth}
+        closedWidth={50}
+        onResize={(newWidth) => setListDrawerWidth(newWidth)}
+      >
+        <List
+          drawer
+          list={{
+            name: 'Animals',
+            actions: [
+              {
+                label: 'Add',
+                icon: <FaPlus />,
+                onClick: () => {},
+              },
+            ],
+            items: [
+              {
+                id: 1,
+                name: 'Aardvark',
+                onClick: () => {},
+                actions: [
+                  {
+                    label: 'Delete',
+                    icon: <FaTrash />,
+                    onClick: () => {},
+                  },
+                ],
+              },
+              {
+                id: 2,
+                name: 'Kangaroo',
+                active: true,
+                actions: [
+                  {
+                    label: 'Delete',
+                    icon: <FaTrash />,
+                    onClick: () => {},
+                  },
+                ],
+              },
+            ],
+          }}
+          narrow={!open}
+        />
+      </Drawer>
+      <Drawer
+        right
+        background="var(--color-background-raised)"
+        tabs={tabs}
+        border
+        open
+        width={tabbedDrawerWidth}
+        onResize={(newWidth) => setTabbedDrawerWidth(newWidth)}
+      />
+    </>
+  );
+};

package/src/components/layout/flex/flex.stories.jsx

@@ -22,7 +22,12 @@ export default {
   args: {
     alignItems: undefined,
     justifyContent: undefined,
-    children: [<Button label="Button" />, <Text>Text</Text>],
+    children: (
+      <>
+        <Button label="Button" />
+        <Text>Text</Text>
+      </>
+    ),
   },
 };
 

package/src/components/layout/grid/grid.stories.jsx

@@ -21,14 +21,16 @@ export default {
   },
   args: {
     columns: '1fr 1fr 1fr',
-    children: [
-      <Card>Item 1</Card>,
-      <Card>Item 2</Card>,
-      <Card>Item 3</Card>,
-      <Card>Item 4</Card>,
-      <Card>Item 5</Card>,
-      <Card>Item 6</Card>,
-    ],
+    children: (
+      <>
+        <Card>Item 1</Card>
+        <Card>Item 2</Card>
+        <Card>Item 3</Card>
+        <Card>Item 4</Card>
+        <Card>Item 5</Card>
+        <Card>Item 6</Card>
+      </>
+    ),
   },
 };
 

package/src/components/table/cell/cell.jsx

@@ -227,7 +227,7 @@ const StaticCell = (props) => {
   const field = (
     <div
       className={cx(
-        styles.staticCell,
+        styles.staticCellContent,
         type === 'Unit' ? styles.unit : '',
         error ? styles.error : warning ? styles.warning : '',
       )}
@@ -245,22 +245,24 @@ const StaticCell = (props) => {
     </div>
   );
   return (
-    <Tooltip
-      error={!!error}
-      warning={!!warning}
-      text={tooltip || error || warning}
-      enabled={
-        (tooltip && isStringNumberOrNode(tooltip)) ||
-        (error && isStringNumberOrNode(error)) ||
-        (warning && isStringNumberOrNode(warning)) ||
-        false
-      }
-      maxWidth={maxTooltipWidth}
-      display="block"
-      placement="bottom-center"
-    >
-      {field}
-    </Tooltip>
+    <div className={styles.inputWrapper}>
+      <Tooltip
+        error={!!error}
+        warning={!!warning}
+        text={tooltip || error || warning}
+        enabled={
+          (tooltip && isStringNumberOrNode(tooltip)) ||
+          (error && isStringNumberOrNode(error)) ||
+          (warning && isStringNumberOrNode(warning)) ||
+          false
+        }
+        maxWidth={maxTooltipWidth}
+        display="block"
+        placement="bottom-center"
+      >
+        {field}
+      </Tooltip>
+    </div>
   );
 };
 
@@ -364,6 +366,7 @@ export const Cell = (props) => {
     cell.type === 'CheckBox' ? styles.checkBoxCell : '',
     cell.type === 'Actions' ? styles.actionsCell : '',
     cell.type === 'Icon' ? styles.iconCell : '',
+    cell.type === 'Static' || !cell.type ? styles.staticCell : '',
     cell.hasSort ? styles.sortingCell : null,
     cellAlignmentStyle,
     cell.breakWord ? styles.breakWord : '',

package/src/components/table/cell/cell.module.less

@@ -1,4 +1,5 @@
 @import '../../../style/variables.less';
+@import '../../../style/mixins.less';
 @import '../table.variables.less';
 
 .cellWrapper {
@@ -55,30 +56,43 @@
 }
 
 .staticCell {
-  &.error {
-    .cellErrorWarningWrapper();
-    background-color: var(--color-background-error) !important;
-    border: 1px solid var(--color-border-error) !important;
-    color: var(--color-text-error) !important;
-  }
-  &.warning {
-    .cellErrorWarningWrapper();
-    background-color: var(--color-background-warning) !important;
-    border: 1px solid var(--color-border-warning) !important;
-    color: var(--color-text-warning) !important;
-  }
-  &.unit {
-    font-weight: normal;
+  padding: 0 !important;
+
+  .staticCellContent {
+    min-height: 100%;
+    .cellWrapperPadding();
+    line-height: 17px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+
+    &.error,
+    &.warning {
+      border: 1px solid transparent;
+    }
+
+    &.error {
+      .inputError();
+    }
+    &.warning {
+      .inputWarning();
+    }
+    &.unit {
+      font-weight: normal;
+    }
   }
 }
 
 .sortingCell {
-  position: relative;
-  padding-right: 45px !important;
-  cursor: pointer !important;
+  .staticCellContent {
+    position: relative;
+    padding-right: 45px !important;
+    cursor: pointer !important;
 
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05) !important;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05) !important;
+    }
   }
 
   .sortingCellIcon {

package/src/components/table/table.stories-data.jsx

@@ -764,3 +764,95 @@ export const tableHelpLibraryIcons = {
     })),
   })),
 };
+
+export const tableOverflowing = {
+  columnWidths: [undefined, '100px', '100px', '100px', undefined],
+  headers: [
+    {
+      cells: [
+        { value: 'Name' },
+        { value: 'Weight (kg)' },
+        { value: 'Energy (kcal / 100g)' },
+        { value: 'Origin' },
+        { value: 'Static' },
+      ],
+    },
+  ],
+  rows: [
+    {
+      cells: [
+        {
+          breakWord: true,
+          value:
+            'LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturufugiatnullapariatur',
+        },
+        {
+          type: 'Select',
+          native: true,
+          options: [
+            { label: 50, value: 50 },
+            { label: 100, value: 100 },
+          ],
+          value: { label: 100, value: 100 },
+          onChange: () => {},
+          disabled: true,
+        },
+        {
+          type: 'Select',
+          options: [
+            { label: 'Vietnam', value: 'Vietnam' },
+            { label: 'Other', value: 'Other' },
+          ],
+          value: { label: 'Vietnam', value: 'Vietnam' },
+          onChange: () => {},
+          error: 'Error',
+        },
+        {
+          value: 'Brown rice',
+          type: 'Input',
+          onChange: () => {},
+          testId: 'table-tbody-cell-brown-rice',
+          warning: 'Warning message',
+        },
+        {
+          value: 'Static warning',
+          warning: 'Warning message',
+        },
+      ],
+    },
+    {
+      cells: [
+        { value: 'Buckwheat' },
+        {
+          type: 'Select',
+          native: true,
+          options: [
+            { label: 50, value: 50 },
+            { label: 100, value: 100 },
+          ],
+          value: { label: 100, value: 100 },
+          onChange: () => {},
+        },
+        {
+          type: 'Select',
+          options: [
+            { label: 'Vietnam', value: 'Vietnam' },
+            { label: 'Other', value: 'Other' },
+          ],
+          value: { label: 'Vietnam', value: 'Vietnam' },
+          onChange: () => {},
+        },
+        {
+          value: 'Brown rice',
+          type: 'Input',
+          onChange: () => {},
+          testId: 'table-tbody-cell-brown-rice',
+        },
+        {
+          value: 'Static error',
+          error: 'Error message',
+        },
+      ],
+    },
+  ],
+};

package/src/components/table/table.stories.jsx

@@ -730,88 +730,5 @@ export const OnRowEnter = () => {
   );
 };
 
-export const OverflowingCells = () => (
-  <Table
-    table={{
-      fixedWidth: '100%',
-      headers: [
-        {
-          cells: [
-            { value: 'Name' },
-            { value: 'Weight (kg)' },
-            { value: 'Energy (kcal / 100g)' },
-            { value: 'Origin' },
-          ],
-        },
-      ],
-      rows: [
-        {
-          cells: [
-            {
-              breakWord: true,
-              value:
-                'LoremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliquaUtenimadminimveniamquisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeullamcolaborisnisiutaliquipexeacommodoconsequatDuisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariaturufugiatnullapariatur',
-            },
-            {
-              type: 'Select',
-              native: true,
-              options: [
-                { label: 50, value: 50 },
-                { label: 100, value: 100 },
-              ],
-              value: { label: 100, value: 100 },
-              onChange: () => {},
-              disabled: true,
-            },
-            {
-              type: 'Select',
-              options: [
-                { label: 'Vietnam', value: 'Vietnam' },
-                { label: 'Other', value: 'Other' },
-              ],
-              value: { label: 'Vietnam', value: 'Vietnam' },
-              onChange: () => {},
-              error: 'Error',
-            },
-            {
-              value: 'Brown rice',
-              type: 'Input',
-              onChange: () => {},
-              testId: 'table-tbody-cell-brown-rice',
-            },
-          ],
-        },
-        {
-          cells: [
-            { value: 'Buckwheat' },
-            {
-              type: 'Select',
-              native: true,
-              options: [
-                { label: 50, value: 50 },
-                { label: 100, value: 100 },
-              ],
-              value: { label: 100, value: 100 },
-              onChange: () => {},
-            },
-            {
-              type: 'Select',
-              options: [
-                { label: 'Vietnam', value: 'Vietnam' },
-                { label: 'Other', value: 'Other' },
-              ],
-              value: { label: 'Vietnam', value: 'Vietnam' },
-              onChange: () => {},
-            },
-            {
-              value: 'Brown rice',
-              type: 'Input',
-              onChange: () => {},
-              testId: 'table-tbody-cell-brown-rice',
-            },
-          ],
-        },
-      ],
-    }}
-  />
-);
+export const OverflowingCells = Template.bind({});
+OverflowingCells.args = { table: storyData.tableOverflowing };

package/src/components/table/table.variables.less

@@ -9,11 +9,3 @@
   align-items: center;
   justify-content: space-between;
 }
-
-.cellErrorWarningWrapper {
-  margin: (-@input_padding_y - 1) (-@input_padding_x - 1) !important;
-  padding: @input_padding_y @input_padding_x !important;
-  display: block;
-  line-height: 17px;
-  position: relative;
-}

package/src/style/mixins.less

@@ -29,10 +29,10 @@
 .inputError,
 .inputWarning {
   position: relative;
-  z-index: 1;
 }
 
 .inputError {
+  z-index: 2;
   border-color: var(--color-border-error) !important;
   color: var(--color-text-error) !important;
   background-color: var(--color-background-error);
@@ -47,6 +47,7 @@
 }
 
 .inputWarning {
+  z-index: 1;
   border-color: var(--color-border-warning) !important;
   color: var(--color-text-warning) !important;
   background-color: var(--color-background-warning);