@oliasoft-open-source/react-ui-library 2.4.0 → 2.4.2

package/README.md

@@ -4,4 +4,3 @@ React UI Library is a collection of reusable UI components for use in React appl
 
 For usage instructions and technical documentation, see the [Wiki](https://gitlab.com/oliasoft-open-source/react-ui-library/wikis/home).
 
-License: [MIT](https://gitlab.com/oliasoft-open-source/react-ui-library/-/blob/master/LICENSE).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/react-ui-library",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Reusable UI components for React projects",
   "main": "index.js",
   "scripts": {

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);