@indico-data/design-system 2.30.0 → 2.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/index.css +36 -5
  2. package/lib/index.esm.css +36 -5
  3. package/lib/index.esm.js +2 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +2 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/floatUI/styles/FloatUI.scss +3 -3
  9. package/src/components/forms/form/styles/Form.scss +8 -0
  10. package/src/components/forms/textarea/Textarea.tsx +3 -0
  11. package/src/components/pill/Pill.stories.tsx +10 -1
  12. package/src/components/table/Table.mdx +33 -4
  13. package/src/components/table/styles/Table.scss +20 -7
  14. package/src/components/table/styles/_variables.scss +8 -0
package/lib/index.css CHANGED
@@ -907,6 +907,7 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
+ :root,
910
911
  :root [data-theme=light] {
911
912
  --pf-table-background-color: var(--pf-white-color);
912
913
  --pf-table-font-color: var(--pf-gray-color);
@@ -914,6 +915,10 @@ a:hover, .link:hover {
914
915
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
916
  --pf-table-hover-color: var(--pf-gray-color-200);
916
917
  --pf-table-disabled-color: var(--pf-gray-color-300);
918
+ --pf-table-checked-color: var(--pf-secondary-color-100);
919
+ --pf-table-highlighted-color: var(--pf-gray-color-200);
920
+ --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
921
+ --pf-table-font-size: var(--pf-font-size-body2);
917
922
  }
918
923
 
919
924
  :root [data-theme=dark] {
@@ -923,6 +928,9 @@ a:hover, .link:hover {
923
928
  --pf-table-stripe-color: var(--pf-primary-color-600);
924
929
  --pf-table-hover-color: var(--pf-primary-color-400);
925
930
  --pf-table-disabled-color: var(--pf-gray-color-900);
931
+ --pf-table-checked-color: var(--pf-secondary-color-900);
932
+ --pf-table-highlighted-color: var(--pf-primary-color-400);
933
+ --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
926
934
  }
927
935
 
928
936
  .table-loading {
@@ -934,6 +942,9 @@ a:hover, .link:hover {
934
942
  color: var(--pf-table-font-color);
935
943
  border-radius: var(--pf-rounded);
936
944
  border: 1px solid var(--pf-table-border-color);
945
+ /* Striped: alternating background */
946
+ /* Checked: Precedence over striped */
947
+ /* Highlighted: Precedence over checked */
937
948
  }
938
949
  .table .rdt_Table,
939
950
  .table .rdt_TableRow,
@@ -979,12 +990,9 @@ a:hover, .link:hover {
979
990
  .table .rdt_TableRow:first-child .rdt_TableCell {
980
991
  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
992
  }
982
- .table .rdt_TableRow:last-child .rdt_TableCell {
983
- border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
- }
985
993
  .table .rdt_TableCell,
986
994
  .table .rdt_TableCol {
987
- font-size: var(--pf-font-size-base);
995
+ font-size: var(--pf-table-font-size);
988
996
  }
989
997
  .table .rdt_TableCell:not(:first-child),
990
998
  .table .rdt_TableCol:not(:first-child) {
@@ -993,6 +1001,19 @@ a:hover, .link:hover {
993
1001
  .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
1002
  background-color: var(--pf-table-stripe-color);
995
1003
  }
1004
+ .table .checked .rdt_TableCell {
1005
+ background-color: var(--pf-table-checked-color) !important;
1006
+ }
1007
+ .table .highlighted {
1008
+ box-shadow: var(--pf-table-highlighted-box-shadow);
1009
+ transform: translateY(-2px);
1010
+ z-index: 1;
1011
+ border-bottom: var(--pf-border-md) solid var(--pf-table-highlighted-color);
1012
+ }
1013
+ .table .highlighted .rdt_TableCell {
1014
+ border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
1015
+ background-color: var(--pf-table-highlighted-color) !important;
1016
+ }
996
1017
  .table .rdt_Pagination {
997
1018
  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
1019
  border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
@@ -1452,6 +1473,15 @@ form {
1452
1473
  width: 100%;
1453
1474
  }
1454
1475
 
1476
+ :root [data-theme=light],
1477
+ :root {
1478
+ --pf-form-input-border-color: var(--pf-border-color);
1479
+ }
1480
+
1481
+ :root [data-theme=dark] {
1482
+ --pf-form-input-border-color: var(--pf-border-color);
1483
+ }
1484
+
1455
1485
  :root,
1456
1486
  :root [data-theme=light] {
1457
1487
  --pf-select-background-color: var(--pf-white-color);
@@ -1765,7 +1795,8 @@ form {
1765
1795
 
1766
1796
  .floatui-content {
1767
1797
  border-radius: var(--pf-floatui-border-radius);
1768
- border: 1px solid var(--pf-floatui-border-color);
1798
+ border: solid 1px;
1799
+ border-color: var(--pf-floatui-border-color);
1769
1800
  background: var(--pf-floatui-background-color);
1770
1801
  }
1771
1802
 
package/lib/index.esm.css CHANGED
@@ -907,6 +907,7 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
+ :root,
910
911
  :root [data-theme=light] {
911
912
  --pf-table-background-color: var(--pf-white-color);
912
913
  --pf-table-font-color: var(--pf-gray-color);
@@ -914,6 +915,10 @@ a:hover, .link:hover {
914
915
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
916
  --pf-table-hover-color: var(--pf-gray-color-200);
916
917
  --pf-table-disabled-color: var(--pf-gray-color-300);
918
+ --pf-table-checked-color: var(--pf-secondary-color-100);
919
+ --pf-table-highlighted-color: var(--pf-gray-color-200);
920
+ --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.2);
921
+ --pf-table-font-size: var(--pf-font-size-body2);
917
922
  }
918
923
 
919
924
  :root [data-theme=dark] {
@@ -923,6 +928,9 @@ a:hover, .link:hover {
923
928
  --pf-table-stripe-color: var(--pf-primary-color-600);
924
929
  --pf-table-hover-color: var(--pf-primary-color-400);
925
930
  --pf-table-disabled-color: var(--pf-gray-color-900);
931
+ --pf-table-checked-color: var(--pf-secondary-color-900);
932
+ --pf-table-highlighted-color: var(--pf-primary-color-400);
933
+ --pf-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
926
934
  }
927
935
 
928
936
  .table-loading {
@@ -934,6 +942,9 @@ a:hover, .link:hover {
934
942
  color: var(--pf-table-font-color);
935
943
  border-radius: var(--pf-rounded);
936
944
  border: 1px solid var(--pf-table-border-color);
945
+ /* Striped: alternating background */
946
+ /* Checked: Precedence over striped */
947
+ /* Highlighted: Precedence over checked */
937
948
  }
938
949
  .table .rdt_Table,
939
950
  .table .rdt_TableRow,
@@ -979,12 +990,9 @@ a:hover, .link:hover {
979
990
  .table .rdt_TableRow:first-child .rdt_TableCell {
980
991
  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
992
  }
982
- .table .rdt_TableRow:last-child .rdt_TableCell {
983
- border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
- }
985
993
  .table .rdt_TableCell,
986
994
  .table .rdt_TableCol {
987
- font-size: var(--pf-font-size-base);
995
+ font-size: var(--pf-table-font-size);
988
996
  }
989
997
  .table .rdt_TableCell:not(:first-child),
990
998
  .table .rdt_TableCol:not(:first-child) {
@@ -993,6 +1001,19 @@ a:hover, .link:hover {
993
1001
  .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
1002
  background-color: var(--pf-table-stripe-color);
995
1003
  }
1004
+ .table .checked .rdt_TableCell {
1005
+ background-color: var(--pf-table-checked-color) !important;
1006
+ }
1007
+ .table .highlighted {
1008
+ box-shadow: var(--pf-table-highlighted-box-shadow);
1009
+ transform: translateY(-2px);
1010
+ z-index: 1;
1011
+ border-bottom: var(--pf-border-md) solid var(--pf-table-highlighted-color);
1012
+ }
1013
+ .table .highlighted .rdt_TableCell {
1014
+ border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
1015
+ background-color: var(--pf-table-highlighted-color) !important;
1016
+ }
996
1017
  .table .rdt_Pagination {
997
1018
  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
1019
  border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
@@ -1452,6 +1473,15 @@ form {
1452
1473
  width: 100%;
1453
1474
  }
1454
1475
 
1476
+ :root [data-theme=light],
1477
+ :root {
1478
+ --pf-form-input-border-color: var(--pf-border-color);
1479
+ }
1480
+
1481
+ :root [data-theme=dark] {
1482
+ --pf-form-input-border-color: var(--pf-border-color);
1483
+ }
1484
+
1455
1485
  :root,
1456
1486
  :root [data-theme=light] {
1457
1487
  --pf-select-background-color: var(--pf-white-color);
@@ -1765,7 +1795,8 @@ form {
1765
1795
 
1766
1796
  .floatui-content {
1767
1797
  border-radius: var(--pf-floatui-border-radius);
1768
- border: 1px solid var(--pf-floatui-border-color);
1798
+ border: solid 1px;
1799
+ border-color: var(--pf-floatui-border-color);
1769
1800
  background: var(--pf-floatui-background-color);
1770
1801
  }
1771
1802
 
package/lib/index.esm.js CHANGED
@@ -20992,10 +20992,10 @@ const Toggle$1 = e__default.forwardRef((_a, ref) => {
20992
20992
  });
20993
20993
 
20994
20994
  const Textarea = e__default.forwardRef((_a, ref) => {
20995
- var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus"]);
20995
+ var { label, name, placeholder, value, onChange, isRequired, isDisabled, errorMessage, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, defaultValue } = _a, rest = __rest$1(_a, ["label", "name", "placeholder", "value", "onChange", "isRequired", "isDisabled", "errorMessage", "helpText", "hasHiddenLabel", "rows", "cols", "readonly", "wrap", "form", "maxLength", "autofocus", "defaultValue"]);
20996
20996
  const hasErrors = errorMessage && errorMessage.length > 0;
20997
20997
  const textareaClasses = classNames('textarea', { error: hasErrors });
20998
- return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
20998
+ return (jsxs(Fragment, { children: [jsx("div", { className: "textarea-wrapper", children: jsx("textarea", Object.assign({ ref: ref, rows: rows, cols: cols, autoFocus: autofocus, wrap: wrap, form: form, maxLength: maxLength, readOnly: readonly, "data-testid": `form-textarea-${name}`, name: name, disabled: isDisabled, placeholder: placeholder, onChange: onChange, className: textareaClasses, "aria-invalid": hasErrors ? true : undefined, "aria-describedby": hasErrors || helpText ? `${name}-helper` : undefined, "aria-required": isRequired, value: value, defaultValue: defaultValue }, rest)) }), hasErrors && jsx(DisplayFormError, { message: errorMessage }), helpText && (jsx("div", { "data-testid": `${name}-help-text`, className: "help-text", id: `${name}-helper`, children: helpText }))] }));
20999
20999
  });
21000
21000
  const LabeledTextarea = withLabel(Textarea);
21001
21001