@indico-data/design-system 2.29.2 → 2.30.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 (10) hide show
  1. package/lib/index.css +67 -81
  2. package/lib/index.esm.css +67 -81
  3. package/lib/index.esm.js +5 -2
  4. package/lib/index.esm.js.map +1 -1
  5. package/lib/index.js +5 -2
  6. package/lib/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/table/Table.tsx +9 -2
  9. package/src/components/table/styles/Table.scss +73 -57
  10. package/src/components/table/styles/_variables.scss +9 -9
package/lib/index.css CHANGED
@@ -907,109 +907,95 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
- :root,
911
- :root [data-theme=light],
912
- :root [data-theme=dark] {
913
- --pf-table-font-color: var(--pf-gray-color);
914
- --pf-table-stripe-color: var(--pf-gray-color-100);
915
- }
916
-
917
910
  :root [data-theme=light] {
918
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
919
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
920
917
  }
921
918
 
922
919
  :root [data-theme=dark] {
923
920
  --pf-table-background-color: var(--pf-primary-color-700);
924
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
925
926
  }
926
927
 
927
- :root .table-loading,
928
- :root [data-theme=light] .table-loading,
929
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
930
929
  color: var(--pf-table-font-color);
931
930
  }
932
- :root .table-wrapper,
933
- :root [data-theme=light] .table-wrapper,
934
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
935
933
  background-color: var(--pf-table-background-color);
936
934
  color: var(--pf-table-font-color);
937
- }
938
- :root .table-wrapper .rdt_Table,
939
- :root .table-wrapper .rdt_TableRow,
940
- :root .table-wrapper .rdt_TableCol,
941
- :root .table-wrapper .rdt_TableCol_Sortable,
942
- :root .table-wrapper .rdt_TableCell,
943
- :root .table-wrapper .rdt_TableHeader,
944
- :root .table-wrapper .rdt_TableFooter,
945
- :root .table-wrapper .rdt_TableHead,
946
- :root .table-wrapper .rdt_TableHeadRow,
947
- :root .table-wrapper .rdt_TableBody,
948
- :root .table-wrapper .rdt_ExpanderRow,
949
- :root .table-wrapper .rdt_Pagination,
950
- :root [data-theme=light] .table-wrapper .rdt_Table,
951
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
952
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
953
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
954
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
955
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
956
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
957
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
958
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
959
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
960
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
961
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
962
- :root [data-theme=dark] .table-wrapper .rdt_Table,
963
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
964
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
965
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
966
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
972
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
973
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
974
950
  background-color: var(--pf-table-background-color);
975
951
  color: var(--pf-table-font-color);
976
952
  }
977
- :root .table-wrapper button svg,
978
- :root [data-theme=light] .table-wrapper button svg,
979
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
980
954
  fill: var(--pf-table-font-color);
981
955
  }
982
- :root .table-wrapper button:disabled svg,
983
- :root [data-theme=light] .table-wrapper button:disabled svg,
984
- :root [data-theme=dark] .table-wrapper button:disabled svg {
985
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
986
958
  }
987
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
988
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
989
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
990
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
991
962
  }
992
-
993
- :root [data-theme=light] .table-wrapper .rdt_Table,
994
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
995
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
996
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
997
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
998
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
999
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1003
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1004
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1005
- background-color: var(--pf-table-background-color);
1006
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1007
966
  }
1008
- :root [data-theme=light] .table-wrapper button svg {
1009
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
972
+ }
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
988
+ }
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
1010
995
  }
1011
- :root [data-theme=light] .table-wrapper button:disabled svg {
1012
- fill: var(--pf-gray-color-300);
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1013
999
  }
1014
1000
 
1015
1001
  :root,
package/lib/index.esm.css CHANGED
@@ -907,109 +907,95 @@ a:hover, .link:hover {
907
907
  margin: 1em 0;
908
908
  }
909
909
 
910
- :root,
911
- :root [data-theme=light],
912
- :root [data-theme=dark] {
913
- --pf-table-font-color: var(--pf-gray-color);
914
- --pf-table-stripe-color: var(--pf-gray-color-100);
915
- }
916
-
917
910
  :root [data-theme=light] {
918
911
  --pf-table-background-color: var(--pf-white-color);
912
+ --pf-table-font-color: var(--pf-gray-color);
913
+ --pf-table-border-color: var(--pf-gray-color-200);
919
914
  --pf-table-stripe-color: var(--pf-gray-color-100);
915
+ --pf-table-hover-color: var(--pf-gray-color-200);
916
+ --pf-table-disabled-color: var(--pf-gray-color-300);
920
917
  }
921
918
 
922
919
  :root [data-theme=dark] {
923
920
  --pf-table-background-color: var(--pf-primary-color-700);
924
- --pf-table-stripe-color: var(--pf-primary-color-400);
921
+ --pf-table-font-color: var(--pf-gray-color);
922
+ --pf-table-border-color: var(--pf-primary-color-300);
923
+ --pf-table-stripe-color: var(--pf-primary-color-600);
924
+ --pf-table-hover-color: var(--pf-primary-color-400);
925
+ --pf-table-disabled-color: var(--pf-gray-color-900);
925
926
  }
926
927
 
927
- :root .table-loading,
928
- :root [data-theme=light] .table-loading,
929
- :root [data-theme=dark] .table-loading {
928
+ .table-loading {
930
929
  color: var(--pf-table-font-color);
931
930
  }
932
- :root .table-wrapper,
933
- :root [data-theme=light] .table-wrapper,
934
- :root [data-theme=dark] .table-wrapper {
931
+
932
+ .table {
935
933
  background-color: var(--pf-table-background-color);
936
934
  color: var(--pf-table-font-color);
937
- }
938
- :root .table-wrapper .rdt_Table,
939
- :root .table-wrapper .rdt_TableRow,
940
- :root .table-wrapper .rdt_TableCol,
941
- :root .table-wrapper .rdt_TableCol_Sortable,
942
- :root .table-wrapper .rdt_TableCell,
943
- :root .table-wrapper .rdt_TableHeader,
944
- :root .table-wrapper .rdt_TableFooter,
945
- :root .table-wrapper .rdt_TableHead,
946
- :root .table-wrapper .rdt_TableHeadRow,
947
- :root .table-wrapper .rdt_TableBody,
948
- :root .table-wrapper .rdt_ExpanderRow,
949
- :root .table-wrapper .rdt_Pagination,
950
- :root [data-theme=light] .table-wrapper .rdt_Table,
951
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
952
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
953
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
954
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
955
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
956
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
957
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
958
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
959
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
960
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
961
- :root [data-theme=light] .table-wrapper .rdt_Pagination,
962
- :root [data-theme=dark] .table-wrapper .rdt_Table,
963
- :root [data-theme=dark] .table-wrapper .rdt_TableRow,
964
- :root [data-theme=dark] .table-wrapper .rdt_TableCol,
965
- :root [data-theme=dark] .table-wrapper .rdt_TableCol_Sortable,
966
- :root [data-theme=dark] .table-wrapper .rdt_TableCell,
967
- :root [data-theme=dark] .table-wrapper .rdt_TableHeader,
968
- :root [data-theme=dark] .table-wrapper .rdt_TableFooter,
969
- :root [data-theme=dark] .table-wrapper .rdt_TableHead,
970
- :root [data-theme=dark] .table-wrapper .rdt_TableHeadRow,
971
- :root [data-theme=dark] .table-wrapper .rdt_TableBody,
972
- :root [data-theme=dark] .table-wrapper .rdt_ExpanderRow,
973
- :root [data-theme=dark] .table-wrapper .rdt_Pagination {
935
+ border-radius: var(--pf-rounded);
936
+ border: 1px solid var(--pf-table-border-color);
937
+ }
938
+ .table .rdt_Table,
939
+ .table .rdt_TableRow,
940
+ .table .rdt_TableCol,
941
+ .table .rdt_TableCol_Sortable,
942
+ .table .rdt_TableCell,
943
+ .table .rdt_TableHeader,
944
+ .table .rdt_TableFooter,
945
+ .table .rdt_TableHead,
946
+ .table .rdt_TableHeadRow,
947
+ .table .rdt_TableBody,
948
+ .table .rdt_ExpanderRow,
949
+ .table .rdt_Pagination {
974
950
  background-color: var(--pf-table-background-color);
975
951
  color: var(--pf-table-font-color);
976
952
  }
977
- :root .table-wrapper button svg,
978
- :root [data-theme=light] .table-wrapper button svg,
979
- :root [data-theme=dark] .table-wrapper button svg {
953
+ .table button svg {
980
954
  fill: var(--pf-table-font-color);
981
955
  }
982
- :root .table-wrapper button:disabled svg,
983
- :root [data-theme=light] .table-wrapper button:disabled svg,
984
- :root [data-theme=dark] .table-wrapper button:disabled svg {
985
- fill: var(--pf-gray-color-900);
956
+ .table button:disabled svg {
957
+ fill: var(--pf-table-disabled-color);
986
958
  }
987
- :root .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
988
- :root [data-theme=light] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell,
989
- :root [data-theme=dark] .pf__table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
990
- background-color: var(--pf-table-stripe-color);
959
+ .table .rdt_TableHeader {
960
+ border-radius: var(--pf-rounded) 0;
961
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
991
962
  }
992
-
993
- :root [data-theme=light] .table-wrapper .rdt_Table,
994
- :root [data-theme=light] .table-wrapper .rdt_TableRow,
995
- :root [data-theme=light] .table-wrapper .rdt_TableCol,
996
- :root [data-theme=light] .table-wrapper .rdt_TableCol_Sortable,
997
- :root [data-theme=light] .table-wrapper .rdt_TableCell,
998
- :root [data-theme=light] .table-wrapper .rdt_TableHeader,
999
- :root [data-theme=light] .table-wrapper .rdt_TableFooter,
1000
- :root [data-theme=light] .table-wrapper .rdt_TableHead,
1001
- :root [data-theme=light] .table-wrapper .rdt_TableHeadRow,
1002
- :root [data-theme=light] .table-wrapper .rdt_TableBody,
1003
- :root [data-theme=light] .table-wrapper .rdt_ExpanderRow,
1004
- :root [data-theme=light] .table-wrapper .rdt_Pagination {
1005
- background-color: var(--pf-table-background-color);
1006
- color: var(--pf-table-font-color);
963
+ .table .rdt_TableHeadRow,
964
+ .table .rdt_TableRow {
965
+ border-bottom: none !important;
1007
966
  }
1008
- :root [data-theme=light] .table-wrapper button svg {
1009
- fill: var(--pf-table-font-color);
967
+ .table .rdt_TableHeadRow > :first-child,
968
+ .table .rdt_TableRow > :first-child {
969
+ padding-left: var(--pf-padding-4);
970
+ min-width: 60px;
971
+ justify-content: left;
972
+ }
973
+ .table .rdt_TableRow {
974
+ border-top: none;
975
+ }
976
+ .table .rdt_TableRow:hover .rdt_TableCell {
977
+ background-color: var(--pf-table-hover-color) !important;
978
+ }
979
+ .table .rdt_TableRow:first-child .rdt_TableCell {
980
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
981
+ }
982
+ .table .rdt_TableRow:last-child .rdt_TableCell {
983
+ border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
984
+ }
985
+ .table .rdt_TableCell,
986
+ .table .rdt_TableCol {
987
+ font-size: var(--pf-font-size-base);
988
+ }
989
+ .table .rdt_TableCell:not(:first-child),
990
+ .table .rdt_TableCol:not(:first-child) {
991
+ border-left: var(--pf-border-sm) solid var(--pf-table-border-color);
992
+ }
993
+ .table .table--striped .rdt_TableRow:nth-child(odd) .rdt_TableCell {
994
+ background-color: var(--pf-table-stripe-color);
1010
995
  }
1011
- :root [data-theme=light] .table-wrapper button:disabled svg {
1012
- fill: var(--pf-gray-color-300);
996
+ .table .rdt_Pagination {
997
+ border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
998
+ border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
1013
999
  }
1014
1000
 
1015
1001
  :root,
package/lib/index.esm.js CHANGED
@@ -20936,8 +20936,11 @@ const LoadingComponent = () => {
20936
20936
  };
20937
20937
 
20938
20938
  const Table$1 = (props) => {
20939
- const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left' } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign"]);
20940
- return (jsx("div", { className: "table-wrapper", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: `${striped ? 'pf__table--striped' : ''}`, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20939
+ const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left', className } = props, rest = __rest$1(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign", "className"]);
20940
+ const combinedClassName = classNames(className, {
20941
+ 'table--striped': striped,
20942
+ });
20943
+ return (jsx("div", { className: "table", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
20941
20944
  };
20942
20945
 
20943
20946
  const Label = ({ label, name, isRequired }) => {