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

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 (67) hide show
  1. package/css/config.css +3 -0
  2. package/css/config.css.map +1 -0
  3. package/css/index-full-carbon.css +55 -134
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +5 -3
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +54 -63
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +4 -2
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +55 -134
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +5 -3
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +55 -134
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +5 -3
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/AboutModal/AboutModal.js +41 -62
  20. package/es/components/AddSelect/AddSelectBody.js +4 -2
  21. package/es/components/AddSelect/AddSelectColumn.js +11 -5
  22. package/es/components/AddSelect/AddSelectFilter.js +5 -4
  23. package/es/components/AddSelect/AddSelectRow.js +3 -3
  24. package/es/components/AddSelect/AddSelectSort.js +2 -1
  25. package/es/components/Datagrid/index.js +1 -0
  26. package/es/components/Datagrid/useEditableCell.js +13 -0
  27. package/es/components/Datagrid/useInlineEdit.js +16 -11
  28. package/es/components/ExampleComponent/ExampleDeprecatedComponent.js +24 -0
  29. package/es/components/Tearsheet/Tearsheet.js +5 -0
  30. package/es/components/index.js +0 -1
  31. package/es/global/js/package-settings.js +2 -2
  32. package/es/settings.js +40 -20
  33. package/lib/components/AboutModal/AboutModal.js +40 -62
  34. package/lib/components/AddSelect/AddSelectBody.js +4 -2
  35. package/lib/components/AddSelect/AddSelectColumn.js +11 -5
  36. package/lib/components/AddSelect/AddSelectFilter.js +4 -3
  37. package/lib/components/AddSelect/AddSelectRow.js +2 -2
  38. package/lib/components/AddSelect/AddSelectSort.js +2 -1
  39. package/lib/components/Datagrid/index.js +8 -0
  40. package/lib/components/Datagrid/useEditableCell.js +23 -0
  41. package/lib/components/Datagrid/useInlineEdit.js +22 -11
  42. package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js +38 -0
  43. package/lib/components/Tearsheet/Tearsheet.js +5 -0
  44. package/lib/components/index.js +0 -8
  45. package/lib/global/js/package-settings.js +2 -2
  46. package/lib/settings.js +43 -21
  47. package/package.json +2 -2
  48. package/scss/components/AboutModal/_about-modal.scss +34 -53
  49. package/scss/components/AboutModal/_storybook-styles.scss +10 -4
  50. package/scss/components/AddSelect/_add-select.scss +7 -3
  51. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +1 -1
  52. package/scss/components/_index-with-carbon.scss +0 -1
  53. package/scss/components/_index.scss +0 -1
  54. package/scss/config.scss +1 -0
  55. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -34
  56. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -47
  57. package/es/components/ModifiedTabs/ModifiedTabs.js +0 -141
  58. package/es/components/ModifiedTabs/index.js +0 -1
  59. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -50
  60. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -63
  61. package/lib/components/ModifiedTabs/ModifiedTabs.js +0 -164
  62. package/lib/components/ModifiedTabs/index.js +0 -13
  63. package/scss/components/ModifiedTabs/_carbon-imports.scss +0 -10
  64. package/scss/components/ModifiedTabs/_index-with-carbon.scss +0 -9
  65. package/scss/components/ModifiedTabs/_index.scss +0 -8
  66. package/scss/components/ModifiedTabs/_modified-tabs.scss +0 -89
  67. package/scss/components/ModifiedTabs/_storybook-styles.scss +0 -6
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
 
@@ -10119,7 +10040,7 @@ button.c4p--add-select__global-filter-toggle--open {
10119
10040
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header,
10120
10041
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--selected-header.c4p--data-spreadsheet__td {
10121
10042
  background-color: var(--cds-background-inverse, #393939);
10122
- color: var(--cds-text-on-color, #ffffff);
10043
+ color: var(--cds-text-inverse, #ffffff);
10123
10044
  /* stylelint-disable-next-line max-nesting-depth */
10124
10045
  }
10125
10046
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:focus, .c4p--data-spreadsheet .c4p--data-spreadsheet__th--selected-header:hover,