@indico-data/design-system 3.0.3 → 3.0.5

package/lib/index.css

@@ -591,6 +591,26 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root {
+  --pf-gap-0: 0;
+  --pf-gap-1: 4px;
+  --pf-gap-2: 8px;
+  --pf-gap-3: 12px;
+  --pf-gap-4: 16px;
+  --pf-gap-5: 20px;
+  --pf-gap-6: 24px;
+  --pf-gap-7: 28px;
+  --pf-gap-8: 32px;
+  --pf-gap-9: 36px;
+  --pf-gap-10: 40px;
+  --pf-gap-11: 44px;
+  --pf-gap-12: 48px;
+  --pf-gap-13: 52px;
+  --pf-gap-14: 56px;
+  --pf-gap-15: 60px;
+  --pf-gap-16: 64px;
+}
+
 :root {
   --pf-size-0: 0;
   --pf-size-1: 4px;
@@ -1287,6 +1307,9 @@ a:hover,
   color: var(--pf-form-input-color);
   cursor: pointer;
 }
+.input-wrapper .is-clearable {
+  padding-right: var(--pf-padding-6);
+}
 
 :root {
   --pf-number-input-padding: 10px;
@@ -1344,7 +1367,6 @@ a:hover,
 
 .radio-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
   align-items: center;
 }
 
@@ -8005,6 +8027,74 @@ p,
   margin-top: var(--pf-negative-margin-16);
 }
 
+.gap-0 {
+  gap: var(--pf-gap-0);
+}
+
+.gap-1 {
+  gap: var(--pf-gap-1);
+}
+
+.gap-2 {
+  gap: var(--pf-gap-2);
+}
+
+.gap-3 {
+  gap: var(--pf-gap-3);
+}
+
+.gap-4 {
+  gap: var(--pf-gap-4);
+}
+
+.gap-5 {
+  gap: var(--pf-gap-5);
+}
+
+.gap-6 {
+  gap: var(--pf-gap-6);
+}
+
+.gap-7 {
+  gap: var(--pf-gap-7);
+}
+
+.gap-8 {
+  gap: var(--pf-gap-8);
+}
+
+.gap-9 {
+  gap: var(--pf-gap-9);
+}
+
+.gap-10 {
+  gap: var(--pf-gap-10);
+}
+
+.gap-11 {
+  gap: var(--pf-gap-11);
+}
+
+.gap-12 {
+  gap: var(--pf-gap-12);
+}
+
+.gap-13 {
+  gap: var(--pf-gap-13);
+}
+
+.gap-14 {
+  gap: var(--pf-gap-14);
+}
+
+.gap-15 {
+  gap: var(--pf-gap-15);
+}
+
+.gap-16 {
+  gap: var(--pf-gap-16);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/lib/index.esm.css

@@ -591,6 +591,26 @@
   --pf-negative-margin-16: -64px;
 }
 
+:root {
+  --pf-gap-0: 0;
+  --pf-gap-1: 4px;
+  --pf-gap-2: 8px;
+  --pf-gap-3: 12px;
+  --pf-gap-4: 16px;
+  --pf-gap-5: 20px;
+  --pf-gap-6: 24px;
+  --pf-gap-7: 28px;
+  --pf-gap-8: 32px;
+  --pf-gap-9: 36px;
+  --pf-gap-10: 40px;
+  --pf-gap-11: 44px;
+  --pf-gap-12: 48px;
+  --pf-gap-13: 52px;
+  --pf-gap-14: 56px;
+  --pf-gap-15: 60px;
+  --pf-gap-16: 64px;
+}
+
 :root {
   --pf-size-0: 0;
   --pf-size-1: 4px;
@@ -1287,6 +1307,9 @@ a:hover,
   color: var(--pf-form-input-color);
   cursor: pointer;
 }
+.input-wrapper .is-clearable {
+  padding-right: var(--pf-padding-6);
+}
 
 :root {
   --pf-number-input-padding: 10px;
@@ -1344,7 +1367,6 @@ a:hover,
 
 .radio-wrapper {
   display: flex;
-  margin-bottom: var(--pf-margin-2);
   align-items: center;
 }
 
@@ -8005,6 +8027,74 @@ p,
   margin-top: var(--pf-negative-margin-16);
 }
 
+.gap-0 {
+  gap: var(--pf-gap-0);
+}
+
+.gap-1 {
+  gap: var(--pf-gap-1);
+}
+
+.gap-2 {
+  gap: var(--pf-gap-2);
+}
+
+.gap-3 {
+  gap: var(--pf-gap-3);
+}
+
+.gap-4 {
+  gap: var(--pf-gap-4);
+}
+
+.gap-5 {
+  gap: var(--pf-gap-5);
+}
+
+.gap-6 {
+  gap: var(--pf-gap-6);
+}
+
+.gap-7 {
+  gap: var(--pf-gap-7);
+}
+
+.gap-8 {
+  gap: var(--pf-gap-8);
+}
+
+.gap-9 {
+  gap: var(--pf-gap-9);
+}
+
+.gap-10 {
+  gap: var(--pf-gap-10);
+}
+
+.gap-11 {
+  gap: var(--pf-gap-11);
+}
+
+.gap-12 {
+  gap: var(--pf-gap-12);
+}
+
+.gap-13 {
+  gap: var(--pf-gap-13);
+}
+
+.gap-14 {
+  gap: var(--pf-gap-14);
+}
+
+.gap-15 {
+  gap: var(--pf-gap-15);
+}
+
+.gap-16 {
+  gap: var(--pf-gap-16);
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);

package/lib/index.esm.js

@@ -5473,6 +5473,7 @@ const Input = React__default.forwardRef((_a, ref) => {
         onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
     };
     const inputClasses = classNames('input', {
+        'is-clearable': isClearable,
         error: hasErrors,
         'input--has-icon': iconName,
     }, className);
@@ -5515,7 +5516,7 @@ const Pagination = (_a) => {
     const isNextButtonDisabled = currentPage === totalPages;
     const isPreviousButtonDisabled = currentPage === 1;
     const hasError = Number(inputValue) > totalPages || Number(inputValue) < 1;
-    return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
+    return (jsx("div", Object.assign({ className: classes }, rest, { children: jsx(Container, { children: jsxs(Row, { gutterWidth: 12, align: "center", children: [jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__previous", children: jsx(Button$1, { "data-testid": "pagination-previous-button", ariaLabel: "Previous Page", variant: "link", onClick: handlePreviousPage, iconLeft: "chevron-left", isDisabled: isPreviousButtonDisabled || totalPages === 0 }) }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__current-page", children: jsx(LabeledInput, { "data-testid": "pagination-current-page-input", className: classNames('pagination__current-page-input', {
                                     'has-error': hasError,
                                 }), value: totalPages === 0 ? '0' : inputValue, name: "currentPage", label: "Current Page", hasHiddenLabel: true, onKeyDown: (e) => {
                                     if (e.key === 'Enter') {
@@ -5527,7 +5528,7 @@ const Pagination = (_a) => {
                                     if (value === '' || /^\d*$/.test(value)) {
                                         setInputValue(value);
                                     }
-                                }, onBlur: (e) => validateAndUpdatePage(e.currentTarget.value) }) }) }), jsx(Col, { xs: "content", children: jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__next", children: jsx(Button$1, { "data-testid": "pagination-next-button", ariaLabel: "Next Page", variant: "link", onClick: handleNextPage, iconLeft: "chevron-right", isDisabled: isNextButtonDisabled }) }) })] }) }) })));
+                                }, onBlur: (e) => validateAndUpdatePage(e.currentTarget.value) }) }) }), jsx(Col, { xs: "content", children: jsx("p", { className: "pagination__page-total", children: totalPagesText }) }), jsx(Col, { xs: "content", children: jsx("div", { className: "pagination__next", children: jsx(Button$1, { "data-testid": "pagination-next-button", ariaLabel: "Next Page", variant: "link", onClick: handleNextPage, iconLeft: "chevron-right", isDisabled: isNextButtonDisabled || totalPages === 0 }) }) })] }) }) })));
 };
 
 const TablePagination$1 = ({ rowsPerPage, rowCount, onChangePage, currentPage, totalEntriesText, }) => {
@@ -41533,7 +41534,9 @@ function TanstackTable(_a) {
     };
     return (jsxs("div", { className: "tanstack-table__outer-container", children: [jsxs("div", { className: "tanstack-table__container", children: [jsxs("table", { className: classNames('tanstack-table', className, {
                             'is-striped': isStriped,
-                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
+                        }), children: [jsx("thead", { className: "tanstack-table__thead", children: jsx(TableHeader, { table: table, ref: thRefs }) }), jsx("tbody", { className: "tanstack-table__tbody", children: renderBody() })] }), hasSelectedRows && (jsx(ActionBar, { table: table, TableActions: TableActions, className: actionBarClassName }))] }), shouldRenderPagination ? (jsx(TablePagination, { currentPage: currentPage, rowCount: rowCount, onChangePage: onChangePage, rowsPerPage: rowsPerPage, totalEntriesText: (totalEntriesText !== null && totalEntriesText !== void 0 ? totalEntriesText : rowCount === 1)
+                    ? '1 entry'
+                    : `${totalRowsOnPage} of ${rowCount} entries` })) : null] }));
 }
 
 /**