@carbon/ibm-products 2.0.0-rc.27 → 2.0.0-rc.29

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. package/css/config.css +3 -0
  2. package/css/config.css.map +1 -0
  3. package/css/index-full-carbon.css +126 -355
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +6 -6
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +196 -252
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +4 -4
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +126 -355
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +6 -6
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +126 -355
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +6 -6
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/AboutModal/AboutModal.js +44 -66
  20. package/es/components/ActionBar/ActionBar.js +13 -29
  21. package/es/components/AddSelect/AddSelectBody.js +4 -2
  22. package/es/components/AddSelect/AddSelectColumn.js +11 -5
  23. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  24. package/es/components/AddSelect/AddSelectRow.js +3 -3
  25. package/es/components/AddSelect/AddSelectSort.js +2 -1
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +15 -21
  27. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  28. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +7 -8
  29. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +6 -5
  30. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  31. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  32. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
  33. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -5
  34. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  35. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +19 -1
  36. package/es/components/Datagrid/index.js +1 -0
  37. package/es/components/Datagrid/useEditableCell.js +13 -0
  38. package/es/components/Datagrid/useFiltering.js +4 -2
  39. package/es/components/Datagrid/useInlineEdit.js +16 -11
  40. package/es/components/Datagrid/useOnRowClick.js +11 -1
  41. package/es/components/Datagrid/useSelectRows.js +2 -0
  42. package/es/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +92 -30
  43. package/es/components/{InlineEdit → EditInPlace}/index.js +1 -1
  44. package/es/components/ExampleComponent/ExampleDeprecatedComponent.js +24 -0
  45. package/es/components/PageHeader/PageHeader.js +36 -35
  46. package/es/components/PageHeader/PageHeaderTitle.js +18 -18
  47. package/es/components/SidePanel/SidePanel.js +25 -26
  48. package/es/components/TagSet/TagSet.js +5 -7
  49. package/es/components/Tearsheet/Tearsheet.js +5 -0
  50. package/es/components/Tearsheet/TearsheetShell.js +4 -6
  51. package/es/components/index.js +1 -2
  52. package/es/global/js/hooks/useResizeObserver.js +79 -0
  53. package/es/global/js/hooks/useWindowResize.js +6 -0
  54. package/es/global/js/hooks/useWindowScroll.js +7 -0
  55. package/es/global/js/package-settings.js +4 -6
  56. package/es/settings.js +40 -20
  57. package/lib/components/AboutModal/AboutModal.js +43 -66
  58. package/lib/components/ActionBar/ActionBar.js +13 -29
  59. package/lib/components/AddSelect/AddSelectBody.js +4 -2
  60. package/lib/components/AddSelect/AddSelectColumn.js +11 -5
  61. package/lib/components/AddSelect/AddSelectFilter.js +4 -3
  62. package/lib/components/AddSelect/AddSelectRow.js +2 -2
  63. package/lib/components/AddSelect/AddSelectSort.js +2 -1
  64. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +13 -19
  65. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +7 -11
  66. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +2 -1
  67. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +5 -4
  68. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -4
  69. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +17 -3
  70. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +19 -4
  71. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +8 -5
  72. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +2 -1
  73. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +18 -1
  74. package/lib/components/Datagrid/index.js +8 -0
  75. package/lib/components/Datagrid/useEditableCell.js +23 -0
  76. package/lib/components/Datagrid/useFiltering.js +4 -2
  77. package/lib/components/Datagrid/useInlineEdit.js +22 -11
  78. package/lib/components/Datagrid/useOnRowClick.js +11 -1
  79. package/lib/components/Datagrid/useSelectRows.js +2 -0
  80. package/lib/components/{InlineEditV2/InlineEditV2.js → EditInPlace/EditInPlace.js} +100 -34
  81. package/lib/components/{InlineEdit → EditInPlace}/index.js +3 -3
  82. package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js +38 -0
  83. package/lib/components/PageHeader/PageHeader.js +36 -35
  84. package/lib/components/PageHeader/PageHeaderTitle.js +19 -19
  85. package/lib/components/SidePanel/SidePanel.js +25 -26
  86. package/lib/components/TagSet/TagSet.js +5 -7
  87. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  88. package/lib/components/Tearsheet/TearsheetShell.js +4 -6
  89. package/lib/components/index.js +7 -15
  90. package/lib/global/js/hooks/useResizeObserver.js +91 -0
  91. package/lib/global/js/hooks/useWindowScroll.js +6 -0
  92. package/lib/global/js/package-settings.js +4 -6
  93. package/lib/settings.js +43 -21
  94. package/package.json +3 -4
  95. package/scss/components/AboutModal/_about-modal.scss +34 -53
  96. package/scss/components/AboutModal/_storybook-styles.scss +10 -4
  97. package/scss/components/AddSelect/_add-select.scss +7 -3
  98. package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +10 -1
  99. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
  100. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -7
  101. package/scss/components/{InlineEditV2/_inline-edit-v2.scss → EditInPlace/_edit-in-place.scss} +56 -14
  102. package/scss/components/{InlineEditV1 → EditInPlace}/_index-with-carbon.scss +1 -1
  103. package/scss/components/{InlineEditV2 → EditInPlace}/_index.scss +1 -1
  104. package/scss/components/{InlineEditV1 → EditInPlace}/_storybook-styles.scss +3 -15
  105. package/scss/components/PageHeader/_page-header.scss +1 -7
  106. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  107. package/scss/components/_index-released-only.scss +1 -1
  108. package/scss/components/_index-with-carbon.scss +1 -3
  109. package/scss/components/_index.scss +1 -3
  110. package/scss/config.scss +1 -0
  111. package/es/components/InlineEdit/InlineEdit.js +0 -47
  112. package/es/components/InlineEditV1/InlineEditV1.js +0 -442
  113. package/es/components/InlineEditV1/index.js +0 -7
  114. package/es/components/InlineEditV2/index.js +0 -7
  115. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
  116. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
  117. package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
  118. package/es/components/ModifiedTabs/index.js +0 -1
  119. package/lib/components/InlineEdit/InlineEdit.js +0 -63
  120. package/lib/components/InlineEditV1/InlineEditV1.js +0 -459
  121. package/lib/components/InlineEditV1/index.js +0 -13
  122. package/lib/components/InlineEditV2/index.js +0 -13
  123. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
  124. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
  125. package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
  126. package/lib/components/ModifiedTabs/index.js +0 -13
  127. package/scss/components/InlineEditV1/_carbon-imports.scss +0 -6
  128. package/scss/components/InlineEditV1/_index.scss +0 -8
  129. package/scss/components/InlineEditV1/_inline-edit-v1.scss +0 -269
  130. package/scss/components/InlineEditV2/_index-with-carbon.scss +0 -9
  131. package/scss/components/InlineEditV2/_storybook-styles.scss +0 -9
  132. package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
  133. package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
  134. package/scss/components/ModifiedTabs/_index.scss +0 -8
  135. package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
  136. package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
  137. /package/scss/components/{InlineEditV2 → EditInPlace}/_carbon-imports.scss +0 -0
package/css/config.css ADDED
@@ -0,0 +1,3 @@
1
+
2
+
3
+ /*# sourceMappingURL=config.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"config.css"}
@@ -843,61 +843,66 @@
843
843
  }
844
844
 
845
845
  .c4p--about-modal .c4p--about-modal__logo {
846
- margin: 1rem;
846
+ margin: 1rem 1rem 2rem 1rem;
847
847
  }
848
848
 
849
849
  .c4p--about-modal .c4p--about-modal__header {
850
- padding: 0 20% 0.5rem 1rem;
850
+ padding: 0 20% 0 1rem;
851
851
  margin-bottom: 0;
852
852
  grid-row: auto;
853
853
  }
854
854
 
855
855
  .c4p--about-modal .c4p--about-modal__title {
856
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
857
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
858
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
859
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
856
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
857
+ font-weight: var(--cds-heading-04-font-weight, 400);
858
+ line-height: var(--cds-heading-04-line-height, 1.28572);
859
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
860
860
  color: var(--cds-text-primary, #161616);
861
861
  }
862
862
 
863
863
  .c4p--about-modal .c4p--about-modal__body {
864
- font-size: var(--cds-body-short-02-font-size, 1rem);
865
- font-weight: var(--cds-body-short-02-font-weight, 400);
866
- line-height: var(--cds-body-short-02-line-height, 1.375);
867
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
864
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
865
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
866
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
867
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
868
868
  min-height: 4rem;
869
869
  padding: 0 20% 0 1rem;
870
+ margin-bottom: 1.5rem;
870
871
  grid-row: auto;
871
872
  overflow-x: hidden;
872
873
  overflow-y: auto;
873
874
  }
874
875
 
875
- .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
876
- min-height: calc(4rem + 2.5rem);
877
- margin-bottom: calc(3rem + 2.5rem);
878
- }
879
-
880
- .c4p--about-modal.c4p--about-modal--with-tabs .cds--modal-content--overflow-indicator {
881
- bottom: calc(3rem + 2.5rem);
882
- }
883
-
884
876
  .c4p--about-modal .cds--modal-content--overflow-indicator {
877
+ bottom: 1.5rem;
885
878
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
886
879
  }
887
880
 
888
881
  .c4p--about-modal .c4p--about-modal__links-container {
889
- margin-top: 1rem;
882
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
883
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
884
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
885
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
886
+ margin-top: 1.5rem;
887
+ }
888
+
889
+ .c4p--about-modal .c4p--about-modal__version {
890
+ color: var(--cds-text-secondary, #525252);
890
891
  }
891
892
 
892
893
  .c4p--about-modal .c4p--about-modal__links-container a + a {
893
894
  padding-left: 0.5rem;
894
- border-left: 1px solid var(--cds-text-primary, #161616);
895
+ border-left: 1px solid var(--cds-border-strong-01, #8d8d8d);
895
896
  margin-left: 0.5rem;
896
897
  }
897
898
 
898
- .c4p--about-modal .c4p--about-modal__legal-text,
899
+ .c4p--about-modal .c4p--about-modal__content,
899
900
  .c4p--about-modal .c4p--about-modal__copyright-text {
900
- margin-top: 2rem;
901
+ font-size: var(--cds-label-01-font-size, 0.75rem);
902
+ font-weight: var(--cds-label-01-font-weight, 400);
903
+ line-height: var(--cds-label-01-line-height, 1.33333);
904
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
905
+ margin-top: 1.5rem;
901
906
  margin-bottom: 0;
902
907
  color: var(--cds-text-secondary, #525252);
903
908
  }
@@ -906,51 +911,33 @@
906
911
  margin-top: 1rem;
907
912
  }
908
913
 
914
+ p.c4p--about-modal__content:first-child,
915
+ p.c4p--about-modal__copyright-text:first-child {
916
+ margin-top: 2rem;
917
+ }
918
+
909
919
  .c4p--about-modal .c4p--about-modal__footer {
910
920
  position: relative;
911
- height: 4.5rem;
921
+ height: calc(
922
+ 1rem + 0.25rem + 1.5rem + 2rem
923
+ );
912
924
  flex-direction: column;
913
925
  justify-content: center;
914
- background-color: var(--cds-background-inverse, #393939);
915
- color: var(--cds-text-inverse, #ffffff);
916
- }
917
-
918
- .c4p--about-modal .c4p--about-modal__tab-container {
919
- position: absolute;
920
- bottom: 0;
921
- }
922
-
923
- .c4p--about-modal .c4p--about-modal__version-label,
924
- .c4p--about-modal .c4p--about-modal__version-number {
925
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
926
- font-weight: var(--cds-body-short-01-font-weight, 400);
927
- line-height: var(--cds-body-short-01-line-height, 1.28572);
928
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
929
- padding-left: 1rem;
930
- margin-top: 0;
931
- margin-bottom: 0;
932
- color: var(--cds-text-inverse, #ffffff);
933
- }
934
-
935
- .c4p--about-modal .c4p--about-modal__version-label {
936
- font-weight: 600;
937
- }
938
-
939
- .c4p--about-modal .cds--tabs .cds--tabs__nav-link,
940
- .c4p--about-modal .cds--tab-content {
941
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
942
- font-weight: var(--cds-body-short-01-font-weight, 400);
943
- line-height: var(--cds-body-short-01-line-height, 1.28572);
944
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
926
+ background-color: var(--cds-layer-02, #ffffff);
945
927
  }
946
928
 
947
- .c4p--about-modal .cds--tab-content {
948
- height: 4.5rem;
929
+ .c4p--about-modal .c4p--about-modal__footer-label {
930
+ font-size: var(--cds-label-01-font-size, 0.75rem);
931
+ font-weight: var(--cds-label-01-font-weight, 400);
932
+ line-height: var(--cds-label-01-line-height, 1.33333);
933
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
934
+ padding: 1rem 0 0 1rem;
935
+ margin-bottom: 0.25rem;
936
+ color: var(--cds-text-secondary, #525252);
949
937
  }
950
938
 
951
- .c4p--about-modal .cds--tab-content:not([hidden]) {
952
- display: flex;
953
- align-items: center;
939
+ .c4p--about-modal .c4p--about-modal__footer-content {
940
+ padding: 0 0 1rem 1rem;
954
941
  }
955
942
 
956
943
  .c4p--action-set {
@@ -4216,76 +4203,6 @@ c4p--card__icon:active {
4216
4203
  background: var(--cds-layer-02, #ffffff);
4217
4204
  }
4218
4205
 
4219
- .c4p--modified-tabs .c4p--modified-tabs__tab-label {
4220
- display: flex;
4221
- width: 100%;
4222
- align-items: flex-end;
4223
- justify-content: space-between;
4224
- }
4225
-
4226
- .c4p--modified-tabs__tab-new,
4227
- .c4p--modified-tabs__tab {
4228
- position: relative;
4229
- display: inline-block;
4230
- width: 100%;
4231
- height: 100%;
4232
- }
4233
-
4234
- .c4p--modified-tabs__tab-new-img,
4235
- .c4p--modified-tabs__tab-close {
4236
- position: absolute;
4237
- top: -0.75rem;
4238
- right: -1rem;
4239
- overflow: hidden;
4240
- width: 2.5rem;
4241
- height: 2.5rem;
4242
- padding: 0.75rem;
4243
- border: 0.125rem solid transparent;
4244
- background-color: transparent;
4245
- border-radius: 0;
4246
- cursor: pointer;
4247
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
4248
- }
4249
- @media (prefers-reduced-motion: reduce) {
4250
- .c4p--modified-tabs__tab-new-img,
4251
- .c4p--modified-tabs__tab-close {
4252
- transition: none;
4253
- }
4254
- }
4255
-
4256
- .c4p--modified-tabs__tab-new-icon {
4257
- display: flex;
4258
- align-items: center;
4259
- justify-content: center;
4260
- padding: 0;
4261
- margin-top: 0.125rem;
4262
- }
4263
-
4264
- .c4p--modified-tabs__tab-close:focus {
4265
- border-color: var(--cds-button-primary, #0f62fe);
4266
- outline: none;
4267
- }
4268
-
4269
- .c4p--modified-tabs__tab-close:hover {
4270
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
4271
- }
4272
-
4273
- .c4p--modified-tabs__tab-new-img {
4274
- display: flex;
4275
- align-items: center;
4276
- justify-content: center;
4277
- padding: 0;
4278
- }
4279
-
4280
- .c4p--modified-tabs .cds--tabs__nav-item.cds--tabs__nav-link {
4281
- width: 10rem;
4282
- }
4283
-
4284
- .c4p--modified-tabs .cds--tab--overflow-nav-button--previous,
4285
- .c4p--modified-tabs .cds--tab--overflow-nav-button--next {
4286
- z-index: 2;
4287
- }
4288
-
4289
4206
  .c4p--add-select__header {
4290
4207
  padding: 1rem;
4291
4208
  padding-bottom: 0;
@@ -4501,6 +4418,10 @@ c4p--card__icon:active {
4501
4418
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4502
4419
  }
4503
4420
 
4421
+ .c4p--add-select-sort_overflow {
4422
+ z-index: 9999;
4423
+ }
4424
+
4504
4425
  .c4p--add-select__tags {
4505
4426
  display: flex;
4506
4427
  align-items: center;
@@ -4513,7 +4434,7 @@ c4p--card__icon:active {
4513
4434
 
4514
4435
  .c4p--add-select__global-filter {
4515
4436
  position: absolute;
4516
- z-index: 6000;
4437
+ z-index: 999999;
4517
4438
  right: 0;
4518
4439
  width: 100%;
4519
4440
  max-width: 40rem;
@@ -4677,8 +4598,8 @@ button.c4p--add-select__global-filter-toggle--open {
4677
4598
  margin-top: 0.5rem;
4678
4599
  }
4679
4600
 
4680
- .c4p--add-select .cds--tooltip,
4681
- .c4p--add-select .cds--overflow-menu-options {
4601
+ .c4p--add-select + div .cds--tooltip,
4602
+ .c4p--add-select + div .cds--overflow-menu-options {
4682
4603
  z-index: 9000;
4683
4604
  }
4684
4605
 
@@ -7041,6 +6962,13 @@ button.c4p--add-select__global-filter-toggle--open {
7041
6962
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
7042
6963
  display: none;
7043
6964
  }
6965
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn {
6966
+ min-height: revert;
6967
+ padding: 0;
6968
+ }
6969
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn--ghost:hover {
6970
+ background-color: inherit;
6971
+ }
7044
6972
  @media (max-width: 41.98rem) {
7045
6973
  .c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
7046
6974
  display: none;
@@ -7491,7 +7419,7 @@ button.c4p--add-select__global-filter-toggle--open {
7491
7419
  white-space: nowrap;
7492
7420
  }
7493
7421
  .c4p--page-header .c4p--page-header__title-row {
7494
- margin-top: 0;
7422
+ margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
7495
7423
  margin-bottom: 0;
7496
7424
  transform: translateY(0.125rem);
7497
7425
  }
@@ -7551,9 +7479,6 @@ button.c4p--add-select__global-filter-toggle--open {
7551
7479
  text-overflow: ellipsis;
7552
7480
  white-space: nowrap;
7553
7481
  }
7554
- .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
7555
- transform: translateY(-2px);
7556
- }
7557
7482
  .c4p--page-header .c4p--page-header__title--editable {
7558
7483
  display: flex;
7559
7484
  overflow: visible;
@@ -9743,233 +9668,86 @@ button.c4p--add-select__global-filter-toggle--open {
9743
9668
  transition: none;
9744
9669
  }
9745
9670
  }
9746
- .c4p--inline-edit {
9747
- --c4p--inline-edit--size: 2.5rem;
9748
- --c4p--inline-edit--icon-size: 1rem;
9749
- --c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
9750
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
9751
- position: relative;
9752
- display: inline-block;
9753
- min-width: calc(4 * var(--c4p--inline-edit--size));
9754
- max-width: 100%;
9755
- height: var(--c4p--inline-edit--size);
9756
- background-color: var(--c4p--inline-edit--background-color);
9757
- cursor: text;
9758
- transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9), box-shadow 70ms cubic-bezier(0, 0, 0.38, 0.9), border-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
9759
- vertical-align: middle;
9760
- white-space: nowrap;
9761
- }
9762
- .c4p--inline-edit.c4p--inline-edit--light {
9763
- --c4p--inline-edit--background-color: transparent;
9764
- }
9765
- .c4p--inline-edit:hover {
9766
- --c4p--inline-edit--background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
9767
- }
9768
- .c4p--inline-edit.c4p--inline-edit--sm {
9769
- --c4p--inline-edit--size: 2rem;
9770
- --c4p--inline-edit--icon-size: 1rem;
9771
- }
9772
- .c4p--inline-edit.c4p--inline-edit--lg {
9773
- --c4p--inline-edit--size: 3rem;
9774
- --c4p--inline-edit--icon-size: 1rem;
9775
- }
9776
- .c4p--inline-edit.c4p--inline-edit--invalid {
9777
- /* stylelint-disable-next-line carbon/theme-token-use */
9778
- outline: 0.125rem solid var(--cds-support-error, #da1e28);
9779
- outline-offset: calc(-1 * 0.125rem);
9780
- }
9781
- @media screen and (prefers-contrast) {
9782
- .c4p--inline-edit.c4p--inline-edit--invalid {
9783
- outline-style: dotted;
9784
- }
9785
- }
9786
- .c4p--inline-edit.c4p--inline-edit--editing {
9787
- /* stylelint-disable-next-line carbon/theme-token-use */
9788
- outline: 0.125rem solid var(--cds-focus, #0f62fe);
9789
- outline-offset: calc(-1 * 0.125rem);
9790
- background-color: var(--cds-layer-01, #f4f4f4);
9791
- }
9792
- @media screen and (prefers-contrast) {
9793
- .c4p--inline-edit.c4p--inline-edit--editing {
9794
- outline-style: dotted;
9795
- }
9796
- }
9797
- .c4p--inline-edit .c4p--inline-edit__input {
9798
- display: inline-block;
9799
- overflow: hidden;
9800
- width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9801
- max-width: calc(
9802
- 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9803
- );
9804
- min-height: var(--c4p--inline-edit--size);
9805
- /* stylelint-disable-next-line carbon/layout-token-use */
9806
- margin-right: var(--c4p--inline-edit--toolbar-width);
9807
- margin-left: 1rem;
9808
- color: var(--cds-text-primary, #161616);
9809
- font-family: inherit;
9810
- line-height: var(--c4p--inline-edit--size);
9811
- }
9812
- .c4p--inline-edit .c4p--inline-edit__input:focus {
9813
- outline: none;
9814
- }
9815
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
9816
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
9817
- }
9818
- .c4p--inline-edit .c4p--inline-edit__input::after {
9819
- position: absolute;
9820
- top: 0;
9821
- left: 0;
9822
- display: block;
9823
- overflow: hidden;
9824
- width: 0;
9825
- margin-left: 1rem;
9826
- color: var(--cds-text-helper, #6f6f6f);
9827
- content: attr(data-placeholder);
9828
- opacity: 0;
9829
- visibility: hidden;
9830
- }
9831
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
9832
- display: inline-block;
9833
- overflow: hidden;
9834
- width: 0;
9835
- height: var(--c4p--inline-edit--size);
9836
- line-height: var(--c4p--inline-edit--size);
9837
- opacity: 0;
9838
- pointer-events: none;
9839
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9840
- }
9841
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
9842
- width: initial;
9843
- opacity: 1;
9844
- }
9845
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
9846
- position: absolute;
9847
- top: 0;
9848
- left: 0;
9849
- width: 100%;
9850
- height: 100%;
9851
- pointer-events: none;
9852
- }
9853
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
9854
- cursor: not-allowed;
9855
- pointer-events: all;
9856
- }
9857
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
9858
- width: initial;
9859
- opacity: 1;
9860
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9861
- visibility: visible;
9862
- }
9863
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
9864
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
9865
- position: absolute;
9866
- top: 0;
9867
- right: 0;
9868
- display: flex;
9869
- height: 100%;
9870
- justify-content: space-between;
9871
- cursor: text;
9872
- }
9873
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
9874
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
9875
- }
9876
- .c4p--inline-edit .c4p--inline-edit__toolbar {
9671
+ .c4p--edit-in-place {
9672
+ --c4p--edit-in-place--size: 2rem;
9877
9673
  display: flex;
9878
9674
  align-items: center;
9675
+ background: transparent;
9676
+ cursor: pointer;
9879
9677
  }
9880
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
9881
- position: absolute;
9882
- top: 0;
9883
- left: 0;
9884
- display: block;
9885
- width: 100%;
9886
- height: 100%;
9887
- box-sizing: border-box;
9888
- border: 2px solid var(--cds-focus, #0f62fe);
9889
- border-left: 0;
9890
- content: "";
9891
- pointer-events: none;
9892
- }
9893
- .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
9894
- display: inline-flex;
9895
- }
9896
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
9897
- width: var(--c4p--inline-edit--edit-size);
9898
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9899
- transition-property: margin, padding;
9900
- }
9901
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
9902
- width: 0;
9903
- padding: 0;
9904
- border-right: 0;
9905
- border-left: 0;
9906
- }
9907
- @media (hover: hover) {
9908
- .c4p--inline-edit .c4p--inline-edit__edit {
9909
- opacity: 0;
9910
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
9911
- }
9912
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
9913
- opacity: 1;
9914
- }
9915
- }
9916
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
9917
- opacity: 1;
9918
- }
9919
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
9920
- color: var(--cds-support-error, #da1e28);
9921
- }
9922
- .c4p--inline-edit .c4p--inline-edit__validation-text {
9923
- display: block;
9924
- overflow: visible;
9925
- margin-left: 1rem;
9678
+
9679
+ .c4p--edit-in-place--sm {
9680
+ --c4p--edit-in-place--size: 2rem;
9926
9681
  }
9927
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
9928
- color: var(--cds-support-error, #da1e28);
9682
+
9683
+ .c4p--edit-in-place--md {
9684
+ --c4p--edit-in-place--size: 2.5rem;
9929
9685
  }
9930
9686
 
9931
- .c4p--inline-edit-v2 {
9932
- display: flex;
9933
- align-items: center;
9934
- background: transparent;
9935
- cursor: pointer;
9687
+ .c4p--edit-in-place--lg {
9688
+ /* April 2023 max text input size */
9689
+ --c4p--edit-in-place--size: 3rem;
9936
9690
  }
9937
9691
 
9938
- .c4p--inline-edit-v2-readonly {
9692
+ .c4p--edit-in-place--readonly {
9939
9693
  cursor: not-allowed;
9940
9694
  }
9941
9695
 
9942
- .c4p--inline-edit-v2:hover {
9696
+ .c4p--edit-in-place:hover {
9943
9697
  background: var(--cds-field-01, #f4f4f4);
9944
9698
  }
9945
9699
 
9946
- .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9700
+ .c4p--edit-in-place:hover .c4p--edit-in-place__btn-edit,
9701
+ .c4p--edit-in-place__btn-edit.c4p--edit-in-place__btn-edit--always-visible {
9947
9702
  visibility: visible;
9948
9703
  }
9949
9704
 
9950
- .c4p--inline-edit-v2__btn-edit {
9705
+ .c4p--edit-in-place__btn-edit {
9951
9706
  visibility: hidden;
9952
9707
  }
9953
9708
 
9954
- .c4p--inline-edit-v2--focused {
9709
+ .c4p--edit-in-place--invalid {
9710
+ outline: 2px solid var(--cds-support-error, #da1e28);
9711
+ }
9712
+
9713
+ .c4p--edit-in-place--focused {
9955
9714
  background: var(--cds-field-01, #f4f4f4);
9956
9715
  outline: 2px solid var(--cds-focus, #0f62fe);
9957
9716
  }
9958
9717
 
9959
- .c4p--inline-edit-v2__text-input {
9718
+ .c4p--edit-in-place__text-input {
9960
9719
  flex: 1;
9961
9720
  }
9962
9721
 
9963
- .c4p--inline-edit-v2__text-input-label {
9722
+ .c4p--edit-in-place--inherit-type .c4p--edit-in-place__text-input {
9723
+ /* match font of container */
9724
+ font-size: inherit;
9725
+ font-weight: inherit;
9726
+ letter-spacing: inherit;
9727
+ line-height: inherit;
9728
+ }
9729
+
9730
+ .c4p--edit-in-place__ellipsis {
9731
+ position: relative;
9732
+ margin-left: -1rem;
9733
+ opacity: 0;
9734
+ }
9735
+
9736
+ .c4p--edit-in-place--overflows:not(.c4p--edit-in-place--focused) .c4p--edit-in-place__ellipsis {
9737
+ opacity: 1;
9738
+ }
9739
+
9740
+ .c4p--edit-in-place__text-input-label {
9964
9741
  display: none;
9965
9742
  }
9966
9743
 
9967
- .c4p--inline-edit-v2__warning-icon {
9968
- margin: 0.5rem;
9744
+ .c4p--edit-in-place__warning-icon {
9745
+ width: 1rem;
9746
+ margin: auto 0.5rem;
9969
9747
  color: var(--cds-support-error, #da1e28);
9970
9748
  }
9971
9749
 
9972
- .c4p--inline-edit-v2__warning-text {
9750
+ .c4p--edit-in-place__warning-text {
9973
9751
  font-size: var(--cds-label-01-font-size, 0.75rem);
9974
9752
  font-weight: var(--cds-label-01-font-weight, 400);
9975
9753
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -9978,34 +9756,30 @@ button.c4p--add-select__global-filter-toggle--open {
9978
9756
  color: var(--cds-support-error, #da1e28);
9979
9757
  }
9980
9758
 
9981
- .c4p--inline-edit-v2__text-input.cds--text-input {
9759
+ .c4p--edit-in-place__text-input.cds--text-input {
9982
9760
  border: none;
9983
9761
  background: transparent;
9984
9762
  cursor: pointer;
9985
9763
  outline: none;
9986
9764
  }
9987
9765
 
9988
- .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
9989
- .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
9990
- cursor: not-allowed;
9991
- }
9992
-
9993
- .c4p--inline-edit-v2__text-input.cds--text-input:focus,
9994
- .c4p--inline-edit-v2__text-input.cds--text-input:active {
9766
+ .c4p--edit-in-place__text-input.cds--text-input:focus,
9767
+ .c4p--edit-in-place__text-input.cds--text-input:active {
9995
9768
  outline: none;
9996
9769
  }
9997
9770
 
9998
- .c4p--inline-edit-v2__toolbar {
9999
- --toolbar-width: 2rem;
10000
- --toolbar-width-focussed: 4rem;
9771
+ .c4p--edit-in-place__toolbar {
9772
+ --toolbar-width: var(--c4p--edit-in-place--size);
9773
+ --toolbar-width-focussed: calc(2 * var(--c4p--edit-in-place--size));
10001
9774
  display: inline-flex;
10002
- overflow: hidden;
10003
9775
  width: var(--toolbar-width);
10004
9776
  }
10005
9777
 
10006
- .c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
10007
- --toolbar-width: 2rem;
10008
- --toolbar-width-focussed: 6rem;
9778
+ .c4p--edit-in-place--invalid .c4p--edit-in-place__toolbar {
9779
+ --toolbar-width: calc(var(--c4p--edit-in-place--size) + 2rem);
9780
+ --toolbar-width-focussed: calc(
9781
+ 2 * var(--c4p--edit-in-place--size) + 2rem
9782
+ );
10009
9783
  }
10010
9784
 
10011
9785
  @keyframes slide-in {
@@ -10022,7 +9796,7 @@ button.c4p--add-select__global-filter-toggle--open {
10022
9796
  width: var(--toolbar-width-focussed);
10023
9797
  }
10024
9798
  }
10025
- .c4p--inline-edit-v2--focused .c4p--inline-edit-v2__toolbar {
9799
+ .c4p--edit-in-place--focused .c4p--edit-in-place__toolbar {
10026
9800
  overflow: initial;
10027
9801
  width: var(--toolbar-width-focussed);
10028
9802
  animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -10266,7 +10040,7 @@ button.c4p--add-select__global-filter-toggle--open {
10266
10040
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
10267
10041
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
10268
10042
  background-color: var(--cds-background-inverse, #393939);
10269
- color: var(--cds-text-on-color, #ffffff);
10043
+ color: var(--cds-text-inverse, #ffffff);
10270
10044
  /* stylelint-disable-next-line max-nesting-depth */
10271
10045
  }
10272
10046
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
@@ -11367,13 +11141,6 @@ button.c4p--add-select__global-filter-toggle--open {
11367
11141
  border-bottom: none;
11368
11142
  }
11369
11143
 
11370
- /*
11371
- * Licensed Materials - Property of IBM
11372
- * 5724-Q36
11373
- * (c) Copyright IBM Corp. 2021
11374
- * US Government Users Restricted Rights - Use, duplication or disclosure
11375
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11376
- */
11377
11144
  .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
11378
11145
  .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
11379
11146
  /* stylelint-disable-next-line declaration-no-important */
@@ -11394,6 +11161,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
11394
11161
  margin-left: 0.125rem;
11395
11162
  }
11396
11163
 
11164
+ .c4p--datagrid__select-all-toggle-overflow.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
11165
+ width: 10rem;
11166
+ }
11167
+
11397
11168
  /*
11398
11169
  * Licensed Materials - Property of IBM
11399
11170
  * 5724-Q36