@indico-data/design-system 2.30.1 → 2.32.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 (16) hide show
  1. package/lib/index.css +25 -4
  2. package/lib/index.d.ts +2 -1
  3. package/lib/index.esm.css +25 -4
  4. package/lib/index.esm.js +2977 -2600
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +2371 -1994
  7. package/lib/index.js.map +1 -1
  8. package/lib/src/components/floatUI/FloatUI.d.ts +1 -1
  9. package/lib/src/components/floatUI/types.d.ts +1 -0
  10. package/package.json +2 -1
  11. package/src/components/floatUI/FloatUI.stories.tsx +12 -0
  12. package/src/components/floatUI/FloatUI.tsx +22 -18
  13. package/src/components/floatUI/types.ts +1 -0
  14. package/src/components/table/Table.mdx +33 -4
  15. package/src/components/table/styles/Table.scss +20 -7
  16. 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);
package/lib/index.d.ts CHANGED
@@ -1065,10 +1065,11 @@ type FloatUIProps = {
1065
1065
  ariaLabel: string;
1066
1066
  floatingOptions?: UseFloatingOptions;
1067
1067
  isOpen?: boolean;
1068
+ isPortal?: boolean;
1068
1069
  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
1069
1070
  };
1070
1071
 
1071
- declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
1072
+ declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
1072
1073
 
1073
1074
  type MenuProps = {
1074
1075
  children: React$1.ReactNode;
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);