@heliux-org/design-system-core 0.0.178 → 0.0.181

package/src/components/NewTable/__stories__/NewTable.stories.tsx

@@ -31,6 +31,9 @@ import RowCellChildren from "../components/Row/RowCellChildren";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { MenuItem } from "../../Table/new/Menu/MenuItem";
 import Checkbox from "../../Checkbox/Checkbox";
+import Box from "../../Box/Box";
+import ScrollableContainer from "../../ScrollableContainer/ScrollableContainer";
+
 import Button from "../../Button/Button";
 import TableHeader from "../components/TableHeader/TableHeader";
 import Link from "../../Link/Link";
@@ -1684,7 +1687,15 @@ export const WithHeader: StoryFn<StoryTableProps> = (args) => {
   const { rows } = table.getRowModel();
 
   return (
-    <>
+    <div style={{width: "100%"}}>
+        <Box
+        shadow={Box.shadows.XS}
+        rounded={Box.roundeds.MEDIUM}
+        padding={Box.paddings.SMALL}
+        border={Box.borders.DEFAULT}
+        className={"section emptyState"}
+        backgroundColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR}>
+      <ScrollableContainer allowVerticalScrolling style={{height: "calc(100vh - 90px)"}}>
       <Table
         {...args}
         table={table}
@@ -1741,7 +1752,9 @@ export const WithHeader: StoryFn<StoryTableProps> = (args) => {
             })}
         </TableBody>
       </Table>
-    </>
+      </ScrollableContainer>
+      </Box>
+    </div>
   );
 };
 
@@ -2064,7 +2077,15 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
   };
 
   return (
-    <div>
+    <div style={{width: "100%"}}>
+        <Box
+        shadow={Box.shadows.XS}
+        rounded={Box.roundeds.MEDIUM}
+        padding={Box.paddings.SMALL}
+        border={Box.borders.DEFAULT}
+        className={"section emptyState"}
+        backgroundColor={Box.backgroundColors.PRIMARY_BACKGROUND_COLOR}>
+      <ScrollableContainer allowVerticalScrolling style={{height: "calc(100vh - 90px)"}}>
       <Table
         {...rest}
         ref={tableContainerRef}
@@ -2127,6 +2148,9 @@ export const WithPagination: StoryFn<StoryTableProps> = ({ ...rest }) => {
           })}
         </TableBody>
       </Table>
+      </ScrollableContainer>
+      </Box>
+
       <Button onClick={handleClearSelection}>Clear Selection</Button>
     </div>
   );

package/src/components/NewTable/components/newComponents/pagination/Pagination.module.scss

@@ -18,3 +18,14 @@
   align-items: center;
   justify-content: center;
 }
+
+select {
+  background-color: var(--surface-level-050);
+  border: none;
+  border-radius: 4px;
+  color: var(--text-primary);
+  &:hover {
+    background-color: var(--surface-level-200);
+    cursor: pointer;
+  }
+}

package/src/components/index.ts

@@ -267,9 +267,9 @@ export { default as Timeline } from "./Timeline/Timeline/Timeline";
 export { default as TimelineRow } from "./Timeline/TimelineRow/TimelineRow";
 export { default as PageHeader } from "./PageHeader/PageHeader";
 export { default as FieldLabel } from "./FieldLabel/FieldLabel";
-export { GridContainer } from "./Grid/Grid";
-export { GridRow } from "./Grid/Grid";
-export { GridCol } from "./Grid/Grid";
+export { GridContainer } from "./GridSystem/GridSystem";
+export { GridRow } from "./GridSystem/GridSystem";
+export { GridCol } from "./GridSystem/GridSystem";
 export { HeaderActions } from "./HeaderActions/HeaderActions";
 export { default as Logo } from "./Logo/Logo";
 export { default as SectionHeader } from "./SectionHeader/SectionHeader";
@@ -289,4 +289,4 @@ export { ButtonType, ButtonColor, Size, ButtonInputType, OLD_BUTTON_SIZES, BUTTO
 export { default as NumericField } from "./NumericField/NumericField";
 export { Uploader, BasicUploader } from "./Uploader/Uploader";
 export { Comments, CommentForm, Comment, CommentFormProps, CommentProps, CommentsProps, UserCard, User } from "./Comments/Comments";
-export { DropdownMenu as TableDropdownMenu } from "./Table/new/DropdownMenu/DropdownMenu";
+export { DropdownMenu as TableDropdownMenu } from "./Table/new/DropdownMenu/DropdownMenu";