@spaced-out/ui-design-system 0.1.50 → 0.1.52

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.52](https://github.com/spaced-out/ui-design-system/compare/v0.1.51...v0.1.52) (2023-09-21)
+
+
+### Bug Fixes
+
+* added some more dummy data for table examples ([ee91ad2](https://github.com/spaced-out/ui-design-system/commit/ee91ad25ef8696d08b590243e50a5bca4d5bc4b2))
+* docs fixes ([e4f2ff7](https://github.com/spaced-out/ui-design-system/commit/e4f2ff7e81983c6869bceb80379d869e408c2c89))
+* table overflow set to auto ([04fbe50](https://github.com/spaced-out/ui-design-system/commit/04fbe50e1db193b7cb80a8b7a35b1b182785e9d8))
+
+### [0.1.51](https://github.com/spaced-out/ui-design-system/compare/v0.1.50...v0.1.51) (2023-09-20)
+
+
+### Features
+
+* new table actions ([#144](https://github.com/spaced-out/ui-design-system/issues/144)) ([d28c032](https://github.com/spaced-out/ui-design-system/commit/d28c0321fff272694e2363fd0a634c6a9030b50a))
+
 ### [0.1.50](https://github.com/spaced-out/ui-design-system/compare/v0.1.49...v0.1.50) (2023-09-15)
 
 

package/lib/components/Table/DefaultTableHeader.js

@@ -63,7 +63,8 @@ function DefaultTableHeader(props) {
     sortDirection = 'original',
     handleCheckboxClick,
     checked,
-    disabled
+    disabled,
+    stickyHeader
   } = props;
   const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
     const {
@@ -130,7 +131,9 @@ function DefaultTableHeader(props) {
     }, filterIcon))));
   }));
   return /*#__PURE__*/React.createElement(BasicTableHead, {
-    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, className)
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, {
+      [_TableModule.default.stickyHeader]: stickyHeader
+    }, className)
   }, /*#__PURE__*/React.createElement(_DefaultRow.BasicRow, {
     className: _TableModule.default.defaultHeaderRow
   }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {

package/lib/components/Table/DefaultTableHeader.js.flow

@@ -56,6 +56,7 @@ export type TableHeaderProps<T, U> = {
   checked?: 'true' | 'false' | 'mixed',
   handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
   disabled?: boolean,
+  stickyHeader?: boolean,
 };
 
 const SortIcon = ({
@@ -113,6 +114,7 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
     handleCheckboxClick,
     checked,
     disabled,
+    stickyHeader,
   } = props;
 
   const tableHeaderCells = () => (
@@ -208,7 +210,13 @@ export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
   );
 
   return (
-    <BasicTableHead className={classify(css.tableHeaderSortable, className)}>
+    <BasicTableHead
+      className={classify(
+        css.tableHeaderSortable,
+        {[css.stickyHeader]: stickyHeader},
+        className,
+      )}
+    >
       <BasicRow className={css.defaultHeaderRow}>
         {handleCheckboxClick && (
           <BasicHeadCell scope="col">

package/lib/components/Table/StaticTable.js

@@ -55,7 +55,8 @@ function StaticTable(props) {
     emptyText,
     disabled,
     customLoader,
-    borderRadius
+    borderRadius,
+    stickyHeader
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -86,7 +87,9 @@ function StaticTable(props) {
     }
   }, /*#__PURE__*/React.createElement(BasicTable, {
     "data-id": "basic-table",
-    className: (0, _classify.classify)(className, classNames?.table)
+    className: (0, _classify.classify)(className, {
+      [_TableModule.default.fullHeightTable]: isLoading || !entries.length && !!emptyText
+    }, classNames?.table)
   }, showHeader && /*#__PURE__*/React.createElement(_DefaultTableHeader.DefaultTableHeader, {
     className: (0, _classify.classify)(tableHeaderClassName, classNames?.tableHeader),
     sortable: sortable,
@@ -96,6 +99,7 @@ function StaticTable(props) {
     sortDirection: sortDirection,
     disabled: disabled,
     handleCheckboxClick: handleHeaderCheckboxClick,
+    stickyHeader: stickyHeader,
     checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
   }), /*#__PURE__*/React.createElement(BasicTableBody, {
     className: classNames?.tableBody

package/lib/components/Table/StaticTable.js.flow

@@ -65,6 +65,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     disabled,
     customLoader,
     borderRadius,
+    stickyHeader,
   } = props;
 
   // this is a fallback and honestly probably doesn't need the
@@ -102,7 +103,14 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
     >
       <BasicTable
         data-id="basic-table"
-        className={classify(className, classNames?.table)}
+        className={classify(
+          className,
+          {
+            [css.fullHeightTable]:
+              isLoading || (!entries.length && !!emptyText),
+          },
+          classNames?.table,
+        )}
       >
         {showHeader && (
           <DefaultTableHeader
@@ -114,6 +122,7 @@ export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
             sortDirection={sortDirection}
             disabled={disabled}
             handleCheckboxClick={handleHeaderCheckboxClick}
+            stickyHeader={stickyHeader}
             checked={
               selectedKeys == null || selectedKeys.length === 0
                 ? 'false'

package/lib/components/Table/Table.js.flow

@@ -52,6 +52,9 @@ export type TableProps<T, U> = {
   disabled?: boolean,
   customLoader?: React.Node,
   borderRadius?: string,
+
+  // For this to work the table wrapper should be scrollable
+  stickyHeader?: boolean,
 };
 
 /**

package/lib/components/Table/Table.module.css

@@ -11,8 +11,8 @@
   colorGrayLightest
 ) from '../../styles/variables/_color.css';
 @value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
-@value (sizeFluid, size48, size60, size240, size300) from '../../styles/variables/_size.css';
-@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (sizeFluid, size2, size48, size60, size240, size300) from '../../styles/variables/_size.css';
+@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium, borderWidthSecondary) from '../../styles/variables/_border.css';
 @value (fontLineHeight170) from '../../styles/variables/_font.css';
 @value (elevationCard) from '../../styles/variables/_elevation.css';
 
@@ -24,7 +24,7 @@
   --border-radius: borderRadiusMedium;
   composes: borderPrimary from '../../styles/border.module.css';
   width: sizeFluid;
-  overflow-x: scroll;
+  overflow-x: auto;
   border-radius: var(--border-radius);
 }
 
@@ -40,6 +40,9 @@
   table-layout: fixed;
   white-space: nowrap;
 }
+.fullHeightTable {
+  height: sizeFluid;
+}
 .defaultTableBody {
   flex-flow: column;
   border-radius: borderRadiusNone borderRadiusNone var(--border-radius)
@@ -121,7 +124,7 @@
 .stickyCell {
   position: sticky;
   left: spaceNone;
-  z-index: elevationCard;
+  z-index: calc(elevationCard / 2);
 }
 
 .stickyHeaderCell {
@@ -254,3 +257,19 @@
 .selectedSortArrow {
   color: colorTextPrimary;
 }
+
+.stickyHeader {
+  position: sticky;
+  top: spaceNone;
+  z-index: elevationCard;
+}
+
+.stickyHeader::after {
+  content: '';
+  position: absolute;
+  bottom: calc(borderWidthSecondary * -1);
+  left: spaceNone;
+  width: sizeFluid;
+  height: calc(size2 / 2);
+  background: colorBorderPrimary;
+}

package/lib/components/Table/TableBar.module.css

@@ -1,7 +1,7 @@
 @value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
-@value (size2, size22, size48, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
+@value (size2, size22, size48, size50, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusMedium, borderRadiusNone) from '../../styles/variables/_border.css';
-@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (colorBackgroundTertiary, colorFillPrimary) from '../../styles/variables/_color.css';
 @value (elevationMenu) from '../../styles/variables/_elevation.css';
 
 .tableBar {
@@ -30,19 +30,12 @@
 }
 
 .tableActionBar {
-  composes: borderPrimary from '../../styles/border.module.css';
-  composes: boxShadow4 from '../../styles/shadow.module.css';
-  position: absolute;
-  left: spaceHalfFluid;
-  z-index: elevationMenu;
-  transform: translateX(spaceNegHalfFluid);
-  bottom: calc(spaceMedium * -1);
   display: flex;
+  height: size50;
+  background-color: colorFillPrimary;
+  composes: boxShadow3 from '../../styles/shadow.module.css';
   align-items: center;
-  min-height: calc(size60 - size2);
-  width: fit-content;
-  padding: spaceSmall;
-  background-color: colorBackgroundTertiary;
-  border-radius: borderRadiusMedium;
-  width: max-content;
+  justify-content: space-between;
+  width: sizeFluid;
+  padding: spaceXSmall spaceSmall spaceXSmall spaceMedium;
 }