@carbon/ibm-products 1.50.0 → 1.51.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. package/css/index-full-carbon.css +42 -18
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +38 -11
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +42 -18
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +42 -18
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +8 -8
  18. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  19. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  20. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  21. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  22. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +14 -0
  23. package/es/components/Datagrid/useFiltering.js +4 -2
  24. package/es/components/Datagrid/useOnRowClick.js +9 -1
  25. package/es/components/Datagrid/useSelectRows.js +2 -0
  26. package/es/components/EditInPlace/EditInPlace.js +43 -0
  27. package/es/components/EditInPlace/index.js +8 -0
  28. package/es/components/InlineEdit/InlineEdit.js +5 -1
  29. package/es/components/InlineEditV1/InlineEditV1.js +5 -2
  30. package/es/components/InlineEditV2/InlineEditV2.js +51 -15
  31. package/es/components/index.js +1 -0
  32. package/es/global/js/package-settings.js +1 -0
  33. package/es/settings.js +15 -0
  34. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  35. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  36. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +17 -2
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -4
  38. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  39. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +15 -0
  40. package/lib/components/Datagrid/useFiltering.js +4 -2
  41. package/lib/components/Datagrid/useOnRowClick.js +9 -1
  42. package/lib/components/Datagrid/useSelectRows.js +2 -0
  43. package/lib/components/EditInPlace/EditInPlace.js +46 -0
  44. package/lib/components/EditInPlace/index.js +12 -0
  45. package/lib/components/InlineEdit/InlineEdit.js +5 -1
  46. package/lib/components/InlineEditV1/InlineEditV1.js +5 -2
  47. package/lib/components/InlineEditV2/InlineEditV2.js +53 -16
  48. package/lib/components/index.js +7 -0
  49. package/lib/global/js/package-settings.js +1 -0
  50. package/lib/settings.js +16 -1
  51. package/package.json +2 -2
  52. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +10 -7
  53. package/scss/components/InlineEditV2/_inline-edit-v2.scss +52 -11
  54. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -2
@@ -22054,13 +22054,6 @@ button.c4p--add-select__global-filter-toggle--open {
22054
22054
  border-bottom: none;
22055
22055
  }
22056
22056
 
22057
- /*
22058
- * Licensed Materials - Property of IBM
22059
- * 5724-Q36
22060
- * (c) Copyright IBM Corp. 2021
22061
- * US Government Users Restricted Rights - Use, duplication or disclosure
22062
- * restricted by GSA ADP Schedule Contract with IBM Corp.
22063
- */
22064
22057
  .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
22065
22058
  .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
22066
22059
  /* stylelint-disable-next-line declaration-no-important */
@@ -22081,6 +22074,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
22081
22074
  margin-left: var(--cds-spacing-01, 0.125rem);
22082
22075
  }
22083
22076
 
22077
+ .c4p--datagrid__select-all-toggle-overflow.bx--overflow-menu-options--sm.bx--overflow-menu-options[data-floating-menu-direction=bottom]::after {
22078
+ width: var(--cds-spacing-13, 10rem);
22079
+ }
22080
+
22084
22081
  /*
22085
22082
  * Licensed Materials - Property of IBM
22086
22083
  * 5724-Q36
@@ -23010,6 +23007,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
23010
23007
  }
23011
23008
 
23012
23009
  .c4p--inline-edit-v2 {
23010
+ --c4p--inline-edit-v2--size: var(--cds-spacing-07, 2rem);
23013
23011
  display: flex;
23014
23012
  align-items: center;
23015
23013
  background: transparent;
@@ -23018,15 +23016,28 @@ th.c4p--datagrid__select-all-toggle-on.button {
23018
23016
  .c4p--inline-edit-v2-readonly {
23019
23017
  cursor: not-allowed;
23020
23018
  }
23019
+ .c4p--inline-edit-v2--sm {
23020
+ --c4p--inline-edit-v2--size: var(--cds-spacing-07, 2rem);
23021
+ }
23022
+ .c4p--inline-edit-v2--md {
23023
+ --c4p--inline-edit-v2--size: var(--cds-spacing-08, 2.5rem);
23024
+ }
23025
+ .c4p--inline-edit-v2--lg {
23026
+ --c4p--inline-edit-v2--size: var(--cds-spacing-09, 3rem);
23027
+ }
23021
23028
  .c4p--inline-edit-v2:hover {
23022
23029
  background: var(--cds-field-01, #f4f4f4);
23023
23030
  }
23024
- .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
23031
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit,
23032
+ .c4p--inline-edit-v2 .c4p--inline-edit-v2__btn-edit.c4p--inline-edit-v2__btn-edit--always-visible {
23025
23033
  visibility: visible;
23026
23034
  }
23027
23035
  .c4p--inline-edit-v2__btn-edit {
23028
23036
  visibility: hidden;
23029
23037
  }
23038
+ .c4p--inline-edit-v2--invalid {
23039
+ outline: 2px solid var(--cds-support-01, #da1e28);
23040
+ }
23030
23041
  .c4p--inline-edit-v2--focused {
23031
23042
  background: var(--cds-field-01, #f4f4f4);
23032
23043
  outline: 2px solid var(--cds-focus, #0f62fe);
@@ -23034,11 +23045,27 @@ th.c4p--datagrid__select-all-toggle-on.button {
23034
23045
  .c4p--inline-edit-v2__text-input {
23035
23046
  flex: 1;
23036
23047
  }
23048
+ .c4p--inline-edit-v2--inherit-type .c4p--inline-edit-v2__text-input {
23049
+ /* match font of container */
23050
+ font-size: inherit;
23051
+ font-weight: inherit;
23052
+ letter-spacing: inherit;
23053
+ line-height: inherit;
23054
+ }
23055
+ .c4p--inline-edit-v2__ellipsis {
23056
+ position: relative;
23057
+ margin-left: calc(-1 * var(--cds-spacing-05, 1rem));
23058
+ opacity: 0;
23059
+ }
23060
+ .c4p--inline-edit-v2--overflows:not(.c4p--inline-edit-v2--focused) .c4p--inline-edit-v2__ellipsis {
23061
+ opacity: 1;
23062
+ }
23037
23063
  .c4p--inline-edit-v2__text-input-label {
23038
23064
  display: none;
23039
23065
  }
23040
23066
  .c4p--inline-edit-v2__warning-icon {
23041
- margin: var(--cds-spacing-03, 0.5rem);
23067
+ width: var(--cds-spacing-05, 1rem);
23068
+ margin: auto var(--cds-spacing-03, 0.5rem) auto auto;
23042
23069
  color: var(--cds-support-01, #da1e28);
23043
23070
  }
23044
23071
  .c4p--inline-edit-v2__warning-text {
@@ -23057,27 +23084,24 @@ th.c4p--datagrid__select-all-toggle-on.button {
23057
23084
  outline: none;
23058
23085
  }
23059
23086
 
23060
- .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.bx--text-input,
23061
- .c4p--inline-edit-v2-readonly .bx--btn.bx--btn--icon-only.bx--tooltip__trigger {
23062
- cursor: not-allowed;
23063
- }
23064
-
23065
23087
  .c4p--inline-edit-v2__text-input.bx--text-input:focus,
23066
23088
  .c4p--inline-edit-v2__text-input.bx--text-input:active {
23067
23089
  outline: none;
23068
23090
  }
23069
23091
 
23070
23092
  .c4p--inline-edit-v2__toolbar {
23071
- --toolbar-width: var(--cds-spacing-07, 2rem);
23072
- --toolbar-width-focussed: var(--cds-spacing-10, 4rem);
23093
+ --toolbar-width: var(--c4p--inline-edit-v2--size);
23094
+ --toolbar-width-focussed: calc(2 * var(--c4p--inline-edit-v2--size));
23073
23095
  display: inline-flex;
23074
23096
  overflow: hidden;
23075
23097
  width: var(--toolbar-width);
23076
23098
  }
23077
23099
 
23078
23100
  .c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
23079
- --toolbar-width: var(--cds-spacing-07, 2rem);
23080
- --toolbar-width-focussed: var(--cds-spacing-12, 6rem);
23101
+ --toolbar-width: calc(var(--c4p--inline-edit-v2--size) + var(--cds-spacing-07, 2rem));
23102
+ --toolbar-width-focussed: calc(
23103
+ 2 * var(--c4p--inline-edit-v2--size) + var(--cds-spacing-07, 2rem)
23104
+ );
23081
23105
  }
23082
23106
 
23083
23107
  @keyframes slide-in {