@indico-data/design-system 2.51.1 → 2.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.51.1",
+  "version": "2.52.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/plugin-build-tool.json

@@ -0,0 +1,4 @@
+{
+  "harness_lang": "JavaScript,TypeScript,CSS",
+  "harness_build_tool": "Node"
+}

package/src/components/index.ts

@@ -21,3 +21,4 @@ export { InputDateRangePicker } from './forms/date/inputDateRangePicker';
 export { Modal } from './modal';
 export { Badge } from './badge';
 export { Pagination } from './pagination';
+export { TanstackTable } from './tanstackTable';

package/src/components/modal/Modal.tsx

@@ -11,7 +11,9 @@ export const Modal = ({
   onRequestClose,
   portalClassName,
   overlayClassName,
-  appElement,
+  appElement = document.getElementById('theme-root') ||
+    document.getElementById('root') ||
+    document.body,
   shouldCloseOnOverlayClick,
   shouldCloseOnEsc,
   testId,
@@ -42,20 +44,14 @@ export const Modal = ({
       {...rest}
     >
       <div className="modal-content">
-        <div className="modal-header">
-          <Row nogutter>
-            <Col xs={12} className="modal-close">
-              <Button
-                className="modal-close-button"
-                onClick={onRequestClose}
-                variant="link"
-                size="md"
-                iconLeft="fa-xmark"
-                ariaLabel="Close"
-              />
-            </Col>
-          </Row>
-        </div>
+        <Button
+          className="modal-close-button"
+          onClick={onRequestClose}
+          variant="link"
+          size="md"
+          iconLeft="x-close"
+          ariaLabel="Close"
+        />
         <div className="modal-body">{children}</div>
       </div>
     </ReactModal>

package/src/components/modal/styles/Modal.scss

@@ -1,6 +1,14 @@
 // Common Variables
 :root {
   --pf-modal-rounded: var(--pf-rounded-lg);
+  --pf-modal-close-button-top: var(--pf-margin-2);
+  --pf-modal-close-button-right: var(--pf-margin-2);
+  --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
+  --pf-modal-close-button-font-size: var(--pf-font-size-caption);
+  --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
+  --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
+  --pf-modal-overlay-transition: opacity 100ms ease-in-out;
+  --pf-modal-content-padding: var(--pf-padding-10);
 }
 
 // Light Theme Specific Variables
@@ -23,14 +31,14 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--pf-modal-overlay-background);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .ReactModal__Overlay {
   opacity: 0;
-  transition: opacity 100ms ease-in-out;
+  transition: var(--pf-modal-overlay-transition);
 }
 
 .ReactModal__Overlay--after-open {
@@ -41,7 +49,6 @@
   opacity: 0;
 }
 
-// New CSS
 .modal {
   position: absolute;
   left: 50%;
@@ -59,29 +66,42 @@
     top: 50px;
   }
 
+  .modal-close-button {
+    position: absolute;
+    top: var(--pf-modal-close-button-top);
+    right: var(--pf-modal-close-button-right);
+    padding: var(--pf-modal-close-button-padding);
+    font-size: var(--pf-modal-close-button-font-size);
+    line-height: 1;
+
+    &.btn .icon {
+      width: var(--pf-modal-close-button-icon-size) !important;
+      height: var(--pf-modal-close-button-icon-size);
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
   .modal-content {
+    position: relative;
     background-color: var(--pf-modal-background-color);
     border: var(--pf-border-sm) solid var(--pf-modal-border-color);
     border-radius: var(--pf-modal-rounded);
+    padding: var(--pf-modal-content-padding);
 
     .modal-body {
-      padding: var(--pf-padding-8);
-      padding-top: 0;
-
       h2 {
         font-size: var(--pf-font-size-h1);
       }
 
-      // We should build a divider component for this
       hr {
         margin-top: var(--pf-margin-8);
         margin-bottom: var(--pf-margin-8);
         border: var(--pf-border-sm) solid var(--pf-border-color);
       }
     }
-
-    .modal-close {
-      text-align: right;
-    }
   }
 }

package/src/components/tanstackTable/index.ts

@@ -1,2 +1,2 @@
-export type { ColumnDef } from '@tanstack/react-table';
+export type { ColumnDef, Row, Table } from '@tanstack/react-table';
 export { TanstackTable } from './TanstakTable';

package/src/index.ts

@@ -32,3 +32,10 @@ export { TanstackTable } from './components/tanstackTable';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';
+
+// Types
+export type {
+  ColumnDef,
+  Row as TanstackTableRowType,
+  Table as TanstackTableType,
+} from '@tanstack/react-table';