@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
@@ -842,61 +842,66 @@
842
842
  }
843
843
 
844
844
  .c4p--about-modal .c4p--about-modal__logo {
845
- margin: 1rem;
845
+ margin: 1rem 1rem 2rem 1rem;
846
846
  }
847
847
 
848
848
  .c4p--about-modal .c4p--about-modal__header {
849
- padding: 0 20% 0.5rem 1rem;
849
+ padding: 0 20% 0 1rem;
850
850
  margin-bottom: 0;
851
851
  grid-row: auto;
852
852
  }
853
853
 
854
854
  .c4p--about-modal .c4p--about-modal__title {
855
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
856
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
857
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
858
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
855
+ font-size: var(--cds-heading-04-font-size, 1.75rem);
856
+ font-weight: var(--cds-heading-04-font-weight, 400);
857
+ line-height: var(--cds-heading-04-line-height, 1.28572);
858
+ letter-spacing: var(--cds-heading-04-letter-spacing, 0);
859
859
  color: var(--cds-text-primary, #161616);
860
860
  }
861
861
 
862
862
  .c4p--about-modal .c4p--about-modal__body {
863
- font-size: var(--cds-body-short-02-font-size, 1rem);
864
- font-weight: var(--cds-body-short-02-font-weight, 400);
865
- line-height: var(--cds-body-short-02-line-height, 1.375);
866
- letter-spacing: var(--cds-body-short-02-letter-spacing, 0);
863
+ font-size: var(--cds-body-compact-02-font-size, 1rem);
864
+ font-weight: var(--cds-body-compact-02-font-weight, 400);
865
+ line-height: var(--cds-body-compact-02-line-height, 1.375);
866
+ letter-spacing: var(--cds-body-compact-02-letter-spacing, 0);
867
867
  min-height: 4rem;
868
868
  padding: 0 20% 0 1rem;
869
+ margin-bottom: 1.5rem;
869
870
  grid-row: auto;
870
871
  overflow-x: hidden;
871
872
  overflow-y: auto;
872
873
  }
873
874
 
874
- .c4p--about-modal.c4p--about-modal--with-tabs .c4p--about-modal__body {
875
- min-height: calc(4rem + 2.5rem);
876
- margin-bottom: calc(3rem + 2.5rem);
877
- }
878
-
879
- .c4p--about-modal.c4p--about-modal--with-tabs .cds--modal-content--overflow-indicator {
880
- bottom: calc(3rem + 2.5rem);
881
- }
882
-
883
875
  .c4p--about-modal .cds--modal-content--overflow-indicator {
876
+ bottom: 1.5rem;
884
877
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--cds-layer-01, #f4f4f4));
885
878
  }
886
879
 
887
880
  .c4p--about-modal .c4p--about-modal__links-container {
888
- margin-top: 1rem;
881
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
882
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
883
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
884
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
885
+ margin-top: 1.5rem;
886
+ }
887
+
888
+ .c4p--about-modal .c4p--about-modal__version {
889
+ color: var(--cds-text-secondary, #525252);
889
890
  }
890
891
 
891
892
  .c4p--about-modal .c4p--about-modal__links-container a + a {
892
893
  padding-left: 0.5rem;
893
- border-left: 1px solid var(--cds-text-primary, #161616);
894
+ border-left: 1px solid var(--cds-border-strong-01, #8d8d8d);
894
895
  margin-left: 0.5rem;
895
896
  }
896
897
 
897
- .c4p--about-modal .c4p--about-modal__legal-text,
898
+ .c4p--about-modal .c4p--about-modal__content,
898
899
  .c4p--about-modal .c4p--about-modal__copyright-text {
899
- margin-top: 2rem;
900
+ font-size: var(--cds-label-01-font-size, 0.75rem);
901
+ font-weight: var(--cds-label-01-font-weight, 400);
902
+ line-height: var(--cds-label-01-line-height, 1.33333);
903
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
904
+ margin-top: 1.5rem;
900
905
  margin-bottom: 0;
901
906
  color: var(--cds-text-secondary, #525252);
902
907
  }
@@ -905,51 +910,33 @@
905
910
  margin-top: 1rem;
906
911
  }
907
912
 
913
+ p.c4p--about-modal__content:first-child,
914
+ p.c4p--about-modal__copyright-text:first-child {
915
+ margin-top: 2rem;
916
+ }
917
+
908
918
  .c4p--about-modal .c4p--about-modal__footer {
909
919
  position: relative;
910
- height: 4.5rem;
920
+ height: calc(
921
+ 1rem + 0.25rem + 1.5rem + 2rem
922
+ );
911
923
  flex-direction: column;
912
924
  justify-content: center;
913
- background-color: var(--cds-background-inverse, #393939);
914
- color: var(--cds-text-inverse, #ffffff);
915
- }
916
-
917
- .c4p--about-modal .c4p--about-modal__tab-container {
918
- position: absolute;
919
- bottom: 0;
920
- }
921
-
922
- .c4p--about-modal .c4p--about-modal__version-label,
923
- .c4p--about-modal .c4p--about-modal__version-number {
924
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
925
- font-weight: var(--cds-body-short-01-font-weight, 400);
926
- line-height: var(--cds-body-short-01-line-height, 1.28572);
927
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
928
- padding-left: 1rem;
929
- margin-top: 0;
930
- margin-bottom: 0;
931
- color: var(--cds-text-inverse, #ffffff);
932
- }
933
-
934
- .c4p--about-modal .c4p--about-modal__version-label {
935
- font-weight: 600;
936
- }
937
-
938
- .c4p--about-modal .cds--tabs .cds--tabs__nav-link,
939
- .c4p--about-modal .cds--tab-content {
940
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
941
- font-weight: var(--cds-body-short-01-font-weight, 400);
942
- line-height: var(--cds-body-short-01-line-height, 1.28572);
943
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
925
+ background-color: var(--cds-layer-02, #ffffff);
944
926
  }
945
927
 
946
- .c4p--about-modal .cds--tab-content {
947
- height: 4.5rem;
928
+ .c4p--about-modal .c4p--about-modal__footer-label {
929
+ font-size: var(--cds-label-01-font-size, 0.75rem);
930
+ font-weight: var(--cds-label-01-font-weight, 400);
931
+ line-height: var(--cds-label-01-line-height, 1.33333);
932
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
933
+ padding: 1rem 0 0 1rem;
934
+ margin-bottom: 0.25rem;
935
+ color: var(--cds-text-secondary, #525252);
948
936
  }
949
937
 
950
- .c4p--about-modal .cds--tab-content:not([hidden]) {
951
- display: flex;
952
- align-items: center;
938
+ .c4p--about-modal .c4p--about-modal__footer-content {
939
+ padding: 0 0 1rem 1rem;
953
940
  }
954
941
 
955
942
  .c4p--action-set {
@@ -4215,76 +4202,6 @@ c4p--card__icon:active {
4215
4202
  background: var(--cds-layer-02, #ffffff);
4216
4203
  }
4217
4204
 
4218
- .c4p--modified-tabs .c4p--modified-tabs__tab-label {
4219
- display: flex;
4220
- width: 100%;
4221
- align-items: flex-end;
4222
- justify-content: space-between;
4223
- }
4224
-
4225
- .c4p--modified-tabs__tab-new,
4226
- .c4p--modified-tabs__tab {
4227
- position: relative;
4228
- display: inline-block;
4229
- width: 100%;
4230
- height: 100%;
4231
- }
4232
-
4233
- .c4p--modified-tabs__tab-new-img,
4234
- .c4p--modified-tabs__tab-close {
4235
- position: absolute;
4236
- top: -0.75rem;
4237
- right: -1rem;
4238
- overflow: hidden;
4239
- width: 2.5rem;
4240
- height: 2.5rem;
4241
- padding: 0.75rem;
4242
- border: 0.125rem solid transparent;
4243
- background-color: transparent;
4244
- border-radius: 0;
4245
- cursor: pointer;
4246
- transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
4247
- }
4248
- @media (prefers-reduced-motion: reduce) {
4249
- .c4p--modified-tabs__tab-new-img,
4250
- .c4p--modified-tabs__tab-close {
4251
- transition: none;
4252
- }
4253
- }
4254
-
4255
- .c4p--modified-tabs__tab-new-icon {
4256
- display: flex;
4257
- align-items: center;
4258
- justify-content: center;
4259
- padding: 0;
4260
- margin-top: 0.125rem;
4261
- }
4262
-
4263
- .c4p--modified-tabs__tab-close:focus {
4264
- border-color: var(--cds-button-primary, #0f62fe);
4265
- outline: none;
4266
- }
4267
-
4268
- .c4p--modified-tabs__tab-close:hover {
4269
- background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
4270
- }
4271
-
4272
- .c4p--modified-tabs__tab-new-img {
4273
- display: flex;
4274
- align-items: center;
4275
- justify-content: center;
4276
- padding: 0;
4277
- }
4278
-
4279
- .c4p--modified-tabs .cds--tabs__nav-item.cds--tabs__nav-link {
4280
- width: 10rem;
4281
- }
4282
-
4283
- .c4p--modified-tabs .cds--tab--overflow-nav-button--previous,
4284
- .c4p--modified-tabs .cds--tab--overflow-nav-button--next {
4285
- z-index: 2;
4286
- }
4287
-
4288
4205
  .c4p--add-select__header {
4289
4206
  padding: 1rem;
4290
4207
  padding-bottom: 0;
@@ -4500,6 +4417,10 @@ c4p--card__icon:active {
4500
4417
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4501
4418
  }
4502
4419
 
4420
+ .c4p--add-select-sort_overflow {
4421
+ z-index: 9999;
4422
+ }
4423
+
4503
4424
  .c4p--add-select__tags {
4504
4425
  display: flex;
4505
4426
  align-items: center;
@@ -4512,7 +4433,7 @@ c4p--card__icon:active {
4512
4433
 
4513
4434
  .c4p--add-select__global-filter {
4514
4435
  position: absolute;
4515
- z-index: 6000;
4436
+ z-index: 999999;
4516
4437
  right: 0;
4517
4438
  width: 100%;
4518
4439
  max-width: 40rem;
@@ -4676,8 +4597,8 @@ button.c4p--add-select__global-filter-toggle--open {
4676
4597
  margin-top: 0.5rem;
4677
4598
  }
4678
4599
 
4679
- .c4p--add-select .cds--tooltip,
4680
- .c4p--add-select .cds--overflow-menu-options {
4600
+ .c4p--add-select + div .cds--tooltip,
4601
+ .c4p--add-select + div .cds--overflow-menu-options {
4681
4602
  z-index: 9000;
4682
4603
  }
4683
4604
 
@@ -7040,6 +6961,13 @@ button.c4p--add-select__global-filter-toggle--open {
7040
6961
  .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__breadcrumb-back {
7041
6962
  display: none;
7042
6963
  }
6964
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn {
6965
+ min-height: revert;
6966
+ padding: 0;
6967
+ }
6968
+ .c4p--breadcrumb-with-overflow .c4p--breadcrumb-with-overflow__back__button.cds--btn--ghost:hover {
6969
+ background-color: inherit;
6970
+ }
7043
6971
  @media (max-width: 41.98rem) {
7044
6972
  .c4p--breadcrumb-with-overflow .cds--breadcrumb-item {
7045
6973
  display: none;
@@ -7490,7 +7418,7 @@ button.c4p--add-select__global-filter-toggle--open {
7490
7418
  white-space: nowrap;
7491
7419
  }
7492
7420
  .c4p--page-header .c4p--page-header__title-row {
7493
- margin-top: 0;
7421
+ margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
7494
7422
  margin-bottom: 0;
7495
7423
  transform: translateY(0.125rem);
7496
7424
  }
@@ -7550,9 +7478,6 @@ button.c4p--add-select__global-filter-toggle--open {
7550
7478
  text-overflow: ellipsis;
7551
7479
  white-space: nowrap;
7552
7480
  }
7553
- .c4p--page-header .c4p--page-header__title .c4p--inline-edit__value {
7554
- transform: translateY(-2px);
7555
- }
7556
7481
  .c4p--page-header .c4p--page-header__title--editable {
7557
7482
  display: flex;
7558
7483
  overflow: visible;
@@ -9742,233 +9667,86 @@ button.c4p--add-select__global-filter-toggle--open {
9742
9667
  transition: none;
9743
9668
  }
9744
9669
  }
9745
- .c4p--inline-edit {
9746
- --c4p--inline-edit--size: 2.5rem;
9747
- --c4p--inline-edit--icon-size: 1rem;
9748
- --c4p--inline-edit--background-color: var(--cds-layer-01, #f4f4f4);
9749
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
9750
- position: relative;
9751
- display: inline-block;
9752
- min-width: calc(4 * var(--c4p--inline-edit--size));
9753
- max-width: 100%;
9754
- height: var(--c4p--inline-edit--size);
9755
- background-color: var(--c4p--inline-edit--background-color);
9756
- cursor: text;
9757
- 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);
9758
- vertical-align: middle;
9759
- white-space: nowrap;
9760
- }
9761
- .c4p--inline-edit.c4p--inline-edit--light {
9762
- --c4p--inline-edit--background-color: transparent;
9763
- }
9764
- .c4p--inline-edit:hover {
9765
- --c4p--inline-edit--background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
9766
- }
9767
- .c4p--inline-edit.c4p--inline-edit--sm {
9768
- --c4p--inline-edit--size: 2rem;
9769
- --c4p--inline-edit--icon-size: 1rem;
9770
- }
9771
- .c4p--inline-edit.c4p--inline-edit--lg {
9772
- --c4p--inline-edit--size: 3rem;
9773
- --c4p--inline-edit--icon-size: 1rem;
9774
- }
9775
- .c4p--inline-edit.c4p--inline-edit--invalid {
9776
- /* stylelint-disable-next-line carbon/theme-token-use */
9777
- outline: 0.125rem solid var(--cds-support-error, #da1e28);
9778
- outline-offset: calc(-1 * 0.125rem);
9779
- }
9780
- @media screen and (prefers-contrast) {
9781
- .c4p--inline-edit.c4p--inline-edit--invalid {
9782
- outline-style: dotted;
9783
- }
9784
- }
9785
- .c4p--inline-edit.c4p--inline-edit--editing {
9786
- /* stylelint-disable-next-line carbon/theme-token-use */
9787
- outline: 0.125rem solid var(--cds-focus, #0f62fe);
9788
- outline-offset: calc(-1 * 0.125rem);
9789
- background-color: var(--cds-layer-01, #f4f4f4);
9790
- }
9791
- @media screen and (prefers-contrast) {
9792
- .c4p--inline-edit.c4p--inline-edit--editing {
9793
- outline-style: dotted;
9794
- }
9795
- }
9796
- .c4p--inline-edit .c4p--inline-edit__input {
9797
- display: inline-block;
9798
- overflow: hidden;
9799
- width: calc(100% - var(--c4p--inline-edit--toolbar-width) - 1rem);
9800
- max-width: calc(
9801
- 100% - var(--c4p--inline-edit--toolbar-width) - 1rem
9802
- );
9803
- min-height: var(--c4p--inline-edit--size);
9804
- /* stylelint-disable-next-line carbon/layout-token-use */
9805
- margin-right: var(--c4p--inline-edit--toolbar-width);
9806
- margin-left: 1rem;
9807
- color: var(--cds-text-primary, #161616);
9808
- font-family: inherit;
9809
- line-height: var(--c4p--inline-edit--size);
9810
- }
9811
- .c4p--inline-edit .c4p--inline-edit__input:focus {
9812
- outline: none;
9813
- }
9814
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__input {
9815
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
9816
- }
9817
- .c4p--inline-edit .c4p--inline-edit__input::after {
9818
- position: absolute;
9819
- top: 0;
9820
- left: 0;
9821
- display: block;
9822
- overflow: hidden;
9823
- width: 0;
9824
- margin-left: 1rem;
9825
- color: var(--cds-text-helper, #6f6f6f);
9826
- content: attr(data-placeholder);
9827
- opacity: 0;
9828
- visibility: hidden;
9829
- }
9830
- .c4p--inline-edit .c4p--inline-edit__ellipsis {
9831
- display: inline-block;
9832
- overflow: hidden;
9833
- width: 0;
9834
- height: var(--c4p--inline-edit--size);
9835
- line-height: var(--c4p--inline-edit--size);
9836
- opacity: 0;
9837
- pointer-events: none;
9838
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9839
- }
9840
- .c4p--inline-edit.c4p--inline-edit--overflows:not(.c4p--inline-edit--editing) .c4p--inline-edit__ellipsis {
9841
- width: initial;
9842
- opacity: 1;
9843
- }
9844
- .c4p--inline-edit .c4p--inline-edit__disabled-cover {
9845
- position: absolute;
9846
- top: 0;
9847
- left: 0;
9848
- width: 100%;
9849
- height: 100%;
9850
- pointer-events: none;
9851
- }
9852
- .c4p--inline-edit.c4p--inline-edit--disabled .c4p--inline-edit__disabled-cover {
9853
- cursor: not-allowed;
9854
- pointer-events: all;
9855
- }
9856
- .c4p--inline-edit .c4p--inline-edit__input--empty::after {
9857
- width: initial;
9858
- opacity: 1;
9859
- transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9860
- visibility: visible;
9861
- }
9862
- .c4p--inline-edit .c4p--inline-edit__after-input-elements {
9863
- --c4p--inline-edit--toolbar-width: calc(2 * var(--c4p--inline-edit--size));
9864
- position: absolute;
9865
- top: 0;
9866
- right: 0;
9867
- display: flex;
9868
- height: 100%;
9869
- justify-content: space-between;
9870
- cursor: text;
9871
- }
9872
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
9873
- --c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
9874
- }
9875
- .c4p--inline-edit .c4p--inline-edit__toolbar {
9670
+ .c4p--edit-in-place {
9671
+ --c4p--edit-in-place--size: 2rem;
9876
9672
  display: flex;
9877
9673
  align-items: center;
9674
+ background: transparent;
9675
+ cursor: pointer;
9878
9676
  }
9879
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
9880
- position: absolute;
9881
- top: 0;
9882
- left: 0;
9883
- display: block;
9884
- width: 100%;
9885
- height: 100%;
9886
- box-sizing: border-box;
9887
- border: 2px solid var(--cds-focus, #0f62fe);
9888
- border-left: 0;
9889
- content: "";
9890
- pointer-events: none;
9891
- }
9892
- .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 {
9893
- display: inline-flex;
9894
- }
9895
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
9896
- width: var(--c4p--inline-edit--edit-size);
9897
- transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
9898
- transition-property: margin, padding;
9899
- }
9900
- .c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
9901
- width: 0;
9902
- padding: 0;
9903
- border-right: 0;
9904
- border-left: 0;
9905
- }
9906
- @media (hover: hover) {
9907
- .c4p--inline-edit .c4p--inline-edit__edit {
9908
- opacity: 0;
9909
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
9910
- }
9911
- .c4p--inline-edit:hover .c4p--inline-edit__edit {
9912
- opacity: 1;
9913
- }
9914
- }
9915
- .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
9916
- opacity: 1;
9917
- }
9918
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
9919
- color: var(--cds-support-error, #da1e28);
9920
- }
9921
- .c4p--inline-edit .c4p--inline-edit__validation-text {
9922
- display: block;
9923
- overflow: visible;
9924
- margin-left: 1rem;
9677
+
9678
+ .c4p--edit-in-place--sm {
9679
+ --c4p--edit-in-place--size: 2rem;
9925
9680
  }
9926
- .c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-text {
9927
- color: var(--cds-support-error, #da1e28);
9681
+
9682
+ .c4p--edit-in-place--md {
9683
+ --c4p--edit-in-place--size: 2.5rem;
9928
9684
  }
9929
9685
 
9930
- .c4p--inline-edit-v2 {
9931
- display: flex;
9932
- align-items: center;
9933
- background: transparent;
9934
- cursor: pointer;
9686
+ .c4p--edit-in-place--lg {
9687
+ /* April 2023 max text input size */
9688
+ --c4p--edit-in-place--size: 3rem;
9935
9689
  }
9936
9690
 
9937
- .c4p--inline-edit-v2-readonly {
9691
+ .c4p--edit-in-place--readonly {
9938
9692
  cursor: not-allowed;
9939
9693
  }
9940
9694
 
9941
- .c4p--inline-edit-v2:hover {
9695
+ .c4p--edit-in-place:hover {
9942
9696
  background: var(--cds-field-01, #f4f4f4);
9943
9697
  }
9944
9698
 
9945
- .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9699
+ .c4p--edit-in-place:hover .c4p--edit-in-place__btn-edit,
9700
+ .c4p--edit-in-place__btn-edit.c4p--edit-in-place__btn-edit--always-visible {
9946
9701
  visibility: visible;
9947
9702
  }
9948
9703
 
9949
- .c4p--inline-edit-v2__btn-edit {
9704
+ .c4p--edit-in-place__btn-edit {
9950
9705
  visibility: hidden;
9951
9706
  }
9952
9707
 
9953
- .c4p--inline-edit-v2--focused {
9708
+ .c4p--edit-in-place--invalid {
9709
+ outline: 2px solid var(--cds-support-error, #da1e28);
9710
+ }
9711
+
9712
+ .c4p--edit-in-place--focused {
9954
9713
  background: var(--cds-field-01, #f4f4f4);
9955
9714
  outline: 2px solid var(--cds-focus, #0f62fe);
9956
9715
  }
9957
9716
 
9958
- .c4p--inline-edit-v2__text-input {
9717
+ .c4p--edit-in-place__text-input {
9959
9718
  flex: 1;
9960
9719
  }
9961
9720
 
9962
- .c4p--inline-edit-v2__text-input-label {
9721
+ .c4p--edit-in-place--inherit-type .c4p--edit-in-place__text-input {
9722
+ /* match font of container */
9723
+ font-size: inherit;
9724
+ font-weight: inherit;
9725
+ letter-spacing: inherit;
9726
+ line-height: inherit;
9727
+ }
9728
+
9729
+ .c4p--edit-in-place__ellipsis {
9730
+ position: relative;
9731
+ margin-left: -1rem;
9732
+ opacity: 0;
9733
+ }
9734
+
9735
+ .c4p--edit-in-place--overflows:not(.c4p--edit-in-place--focused) .c4p--edit-in-place__ellipsis {
9736
+ opacity: 1;
9737
+ }
9738
+
9739
+ .c4p--edit-in-place__text-input-label {
9963
9740
  display: none;
9964
9741
  }
9965
9742
 
9966
- .c4p--inline-edit-v2__warning-icon {
9967
- margin: 0.5rem;
9743
+ .c4p--edit-in-place__warning-icon {
9744
+ width: 1rem;
9745
+ margin: auto 0.5rem;
9968
9746
  color: var(--cds-support-error, #da1e28);
9969
9747
  }
9970
9748
 
9971
- .c4p--inline-edit-v2__warning-text {
9749
+ .c4p--edit-in-place__warning-text {
9972
9750
  font-size: var(--cds-label-01-font-size, 0.75rem);
9973
9751
  font-weight: var(--cds-label-01-font-weight, 400);
9974
9752
  line-height: var(--cds-label-01-line-height, 1.33333);
@@ -9977,34 +9755,30 @@ button.c4p--add-select__global-filter-toggle--open {
9977
9755
  color: var(--cds-support-error, #da1e28);
9978
9756
  }
9979
9757
 
9980
- .c4p--inline-edit-v2__text-input.cds--text-input {
9758
+ .c4p--edit-in-place__text-input.cds--text-input {
9981
9759
  border: none;
9982
9760
  background: transparent;
9983
9761
  cursor: pointer;
9984
9762
  outline: none;
9985
9763
  }
9986
9764
 
9987
- .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
9988
- .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
9989
- cursor: not-allowed;
9990
- }
9991
-
9992
- .c4p--inline-edit-v2__text-input.cds--text-input:focus,
9993
- .c4p--inline-edit-v2__text-input.cds--text-input:active {
9765
+ .c4p--edit-in-place__text-input.cds--text-input:focus,
9766
+ .c4p--edit-in-place__text-input.cds--text-input:active {
9994
9767
  outline: none;
9995
9768
  }
9996
9769
 
9997
- .c4p--inline-edit-v2__toolbar {
9998
- --toolbar-width: 2rem;
9999
- --toolbar-width-focussed: 4rem;
9770
+ .c4p--edit-in-place__toolbar {
9771
+ --toolbar-width: var(--c4p--edit-in-place--size);
9772
+ --toolbar-width-focussed: calc(2 * var(--c4p--edit-in-place--size));
10000
9773
  display: inline-flex;
10001
- overflow: hidden;
10002
9774
  width: var(--toolbar-width);
10003
9775
  }
10004
9776
 
10005
- .c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
10006
- --toolbar-width: 2rem;
10007
- --toolbar-width-focussed: 6rem;
9777
+ .c4p--edit-in-place--invalid .c4p--edit-in-place__toolbar {
9778
+ --toolbar-width: calc(var(--c4p--edit-in-place--size) + 2rem);
9779
+ --toolbar-width-focussed: calc(
9780
+ 2 * var(--c4p--edit-in-place--size) + 2rem
9781
+ );
10008
9782
  }
10009
9783
 
10010
9784
  @keyframes slide-in {
@@ -10021,7 +9795,7 @@ button.c4p--add-select__global-filter-toggle--open {
10021
9795
  width: var(--toolbar-width-focussed);
10022
9796
  }
10023
9797
  }
10024
- .c4p--inline-edit-v2--focused .c4p--inline-edit-v2__toolbar {
9798
+ .c4p--edit-in-place--focused .c4p--edit-in-place__toolbar {
10025
9799
  overflow: initial;
10026
9800
  width: var(--toolbar-width-focussed);
10027
9801
  animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
@@ -10265,7 +10039,7 @@ button.c4p--add-select__global-filter-toggle--open {
10265
10039
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
10266
10040
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
10267
10041
  background-color: var(--cds-background-inverse, #393939);
10268
- color: var(--cds-text-on-color, #ffffff);
10042
+ color: var(--cds-text-inverse, #ffffff);
10269
10043
  /* stylelint-disable-next-line max-nesting-depth */
10270
10044
  }
10271
10045
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,
@@ -11366,13 +11140,6 @@ button.c4p--add-select__global-filter-toggle--open {
11366
11140
  border-bottom: none;
11367
11141
  }
11368
11142
 
11369
- /*
11370
- * Licensed Materials - Property of IBM
11371
- * 5724-Q36
11372
- * (c) Copyright IBM Corp. 2021
11373
- * US Government Users Restricted Rights - Use, duplication or disclosure
11374
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11375
- */
11376
11143
  .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
11377
11144
  .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
11378
11145
  /* stylelint-disable-next-line declaration-no-important */
@@ -11393,6 +11160,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
11393
11160
  margin-left: 0.125rem;
11394
11161
  }
11395
11162
 
11163
+ .c4p--datagrid__select-all-toggle-overflow.cds--overflow-menu-options--sm.cds--overflow-menu-options[data-floating-menu-direction=bottom]::after {
11164
+ width: 10rem;
11165
+ }
11166
+
11396
11167
  /*
11397
11168
  * Licensed Materials - Property of IBM
11398
11169
  * 5724-Q36