@carbon/ibm-products 2.0.0-rc.6 → 2.0.0-rc.8

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 (65) hide show
  1. package/README.md +2 -2
  2. package/css/index-full-carbon.css +96 -12
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +3 -3
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +6 -9
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +2 -2
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +96 -12
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +3 -3
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +89 -9
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +3 -3
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/ActionSet/ActionSet.js +7 -3
  19. package/es/components/AddSelect/add-select-utils.js +2 -2
  20. package/es/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  21. package/es/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
  22. package/es/components/Datagrid/useNestedRowExpander.js +7 -2
  23. package/es/components/InlineEdit/InlineEdit.js +27 -427
  24. package/es/components/InlineEditV1/InlineEditV1.js +447 -0
  25. package/es/components/InlineEditV1/index.js +7 -0
  26. package/es/components/InlineEditV2/InlineEditV2.js +289 -0
  27. package/es/components/InlineEditV2/index.js +7 -0
  28. package/es/components/OptionsTile/OptionsTile.js +28 -12
  29. package/es/components/PageHeader/PageHeaderTitle.js +2 -4
  30. package/es/global/js/hooks/index.js +2 -1
  31. package/es/global/js/hooks/useControllableState.js +83 -0
  32. package/es/global/js/package-settings.js +3 -1
  33. package/lib/components/ActionSet/ActionSet.js +7 -3
  34. package/lib/components/AddSelect/add-select-utils.js +2 -2
  35. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +2 -1
  36. package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js +10 -1
  37. package/lib/components/Datagrid/useNestedRowExpander.js +7 -1
  38. package/lib/components/InlineEdit/InlineEdit.js +27 -428
  39. package/lib/components/InlineEditV1/InlineEditV1.js +464 -0
  40. package/lib/components/InlineEditV1/index.js +13 -0
  41. package/lib/components/InlineEditV2/InlineEditV2.js +309 -0
  42. package/lib/components/InlineEditV2/index.js +13 -0
  43. package/lib/components/OptionsTile/OptionsTile.js +28 -11
  44. package/lib/components/PageHeader/PageHeaderTitle.js +2 -4
  45. package/lib/global/js/hooks/index.js +9 -1
  46. package/lib/global/js/hooks/useControllableState.js +94 -0
  47. package/lib/global/js/package-settings.js +3 -1
  48. package/package.json +2 -2
  49. package/scss/components/ActionSet/_action-set.scss +9 -4
  50. package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
  51. package/scss/components/{InlineEdit → InlineEditV1}/_carbon-imports.scss +0 -0
  52. package/scss/components/{InlineEdit → InlineEditV1}/_index-with-carbon.scss +1 -1
  53. package/scss/components/{InlineEdit → InlineEditV1}/_index.scss +1 -1
  54. package/scss/components/{InlineEdit/_inline-edit.scss → InlineEditV1/_inline-edit-v1.scss} +0 -0
  55. package/scss/components/{InlineEdit → InlineEditV1}/_storybook-styles.scss +0 -0
  56. package/scss/components/InlineEditV2/_carbon-imports.scss +9 -0
  57. package/scss/components/InlineEditV2/_index-with-carbon.scss +9 -0
  58. package/scss/components/InlineEditV2/_index.scss +10 -0
  59. package/scss/components/InlineEditV2/_inline-edit-v2.scss +83 -0
  60. package/scss/components/InlineEditV2/_storybook-styles.scss +9 -0
  61. package/scss/components/PageHeader/_page-header.scss +0 -4
  62. package/scss/components/_index-released-only-with-carbon.scss +1 -1
  63. package/scss/components/_index-released-only.scss +1 -1
  64. package/scss/components/_index-with-carbon.scss +2 -1
  65. package/scss/components/_index.scss +2 -1
package/README.md CHANGED
@@ -10,8 +10,8 @@
10
10
 
11
11
  [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
12
12
  [![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/LICENSE)
13
- [![Build status](https://github.com/carbon-design-system/ibm-cloud-cognitive/workflows/ci/badge.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/actions?query=workflow%3Aci)
14
- [![Netlify status](https://img.shields.io/netlify/19d81e71-7987-4124-8a3a-36e051486e6b)](https://app.netlify.com/sites/ibm-cloud-cognitive/deploys)
13
+ [![Build status](https://github.com/carbon-design-system/ibm-cloud-cognitive/actions/workflows/ci.yml/badge.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/actions/workflows/ci.yml)
14
+ [![Netlify status](https://img.shields.io/netlify/e8cd9972-0fc8-4c51-a911-e9a930ca6605)](https://app.netlify.com/sites/v11-carbon-for-ibm-products/deploys)
15
15
  [![GitHub Lerna version](https://img.shields.io/github/lerna-json/v/carbon-design-system/ibm-cloud-cognitive)](https://lerna.js.org)
16
16
  [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/.github/CONTRIBUTING.md)
17
17
 
@@ -963,14 +963,17 @@
963
963
  font-weight: var(--cds-body-short-01-font-weight, 400);
964
964
  line-height: var(--cds-body-short-01-line-height, 1.28572);
965
965
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
966
- height: 4rem;
967
966
  align-items: center;
967
+ margin: 0;
968
+ }
969
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
970
+ height: 4rem;
968
971
  padding-top: 1rem;
969
972
  padding-bottom: 2rem;
970
- margin: 0;
971
973
  }
972
974
 
973
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
975
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
976
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
974
977
  max-width: none;
975
978
  }
976
979
 
@@ -7575,12 +7578,6 @@ button.c4p--add-select__global-filter-toggle--open {
7575
7578
  transform: translateY(-2px);
7576
7579
  vertical-align: middle;
7577
7580
  }
7578
- .c4p--page-header .c4p--page-header__title-wrapper {
7579
- font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
7580
- font-weight: var(--cds-productive-heading-04-font-weight, 400);
7581
- line-height: var(--cds-productive-heading-04-line-height, 1.28572);
7582
- letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
7583
- }
7584
7581
  .c4p--page-header .c4p--page-header__page-actions {
7585
7582
  flex: 0 0 100%;
7586
7583
  margin-top: 1rem;
@@ -9959,6 +9956,74 @@ button.c4p--add-select__global-filter-toggle--open {
9959
9956
  color: var(--cds-support-error, #da1e28);
9960
9957
  }
9961
9958
 
9959
+ .c4p--inline-edit-v2 {
9960
+ display: flex;
9961
+ align-items: center;
9962
+ background: transparent;
9963
+ cursor: pointer;
9964
+ }
9965
+
9966
+ .c4p--inline-edit-v2-readonly {
9967
+ cursor: not-allowed;
9968
+ }
9969
+
9970
+ .c4p--inline-edit-v2:hover {
9971
+ background: var(--cds-field-01, #f4f4f4);
9972
+ }
9973
+
9974
+ .c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
9975
+ visibility: visible;
9976
+ }
9977
+
9978
+ .c4p--inline-edit-v2__btn-edit {
9979
+ visibility: hidden;
9980
+ }
9981
+
9982
+ .c4p--inline-edit-v2-focused {
9983
+ background: var(--cds-field-01, #f4f4f4);
9984
+ outline: 2px solid var(--cds-focus, #0f62fe);
9985
+ }
9986
+
9987
+ .c4p--inline-edit-v2__text-input {
9988
+ flex: 1;
9989
+ }
9990
+
9991
+ .c4p--inline-edit-v2__text-input-label {
9992
+ display: none;
9993
+ }
9994
+
9995
+ .c4p--inline-edit-v2__warning-icon {
9996
+ /* stylelint-disable-next-line carbon/layout-token-use */
9997
+ margin-right: 0.4375rem;
9998
+ color: var(--cds-support-error, #da1e28);
9999
+ }
10000
+
10001
+ .c4p--inline-edit-v2__warning-text {
10002
+ font-size: var(--cds-label-01-font-size, 0.75rem);
10003
+ font-weight: var(--cds-label-01-font-weight, 400);
10004
+ line-height: var(--cds-label-01-line-height, 1.33333);
10005
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
10006
+ margin-top: 0.5rem;
10007
+ color: var(--cds-support-error, #da1e28);
10008
+ }
10009
+
10010
+ .c4p--inline-edit-v2__text-input.cds--text-input {
10011
+ border: none;
10012
+ background: transparent;
10013
+ cursor: pointer;
10014
+ outline: none;
10015
+ }
10016
+
10017
+ .c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.cds--text-input,
10018
+ .c4p--inline-edit-v2-readonly .cds--btn.cds--btn--icon-only.cds--tooltip__trigger {
10019
+ cursor: not-allowed;
10020
+ }
10021
+
10022
+ .c4p--inline-edit-v2__text-input.cds--text-input:focus,
10023
+ .c4p--inline-edit-v2__text-input.cds--text-input:active {
10024
+ outline: none;
10025
+ }
10026
+
9962
10027
  .c4p--data-spreadsheet {
9963
10028
  --c4p--data-spreadsheet--total-width: 0;
9964
10029
  display: inline-block;
@@ -10677,6 +10742,21 @@ button.c4p--add-select__global-filter-toggle--open {
10677
10742
  border-bottom: none;
10678
10743
  }
10679
10744
 
10745
+ .c4p--datagrid .c4p--datagrid__carbon-row-expandable {
10746
+ position: relative;
10747
+ }
10748
+
10749
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row + :not(tr.c4p--datagrid__carbon-nested-row)::before {
10750
+ position: absolute;
10751
+ /* stylelint-disable-next-line carbon/layout-token-use */
10752
+ top: -1px;
10753
+ left: 0;
10754
+ width: 100%;
10755
+ height: 1px;
10756
+ background-color: var(--cds-border-subtle);
10757
+ content: "";
10758
+ }
10759
+
10680
10760
  /*
10681
10761
  * Licensed Materials - Property of IBM
10682
10762
  * 5724-Q36
@@ -13580,14 +13660,18 @@ a.cds--side-nav__link--current::before {
13580
13660
  font-weight: var(--cds-body-short-01-font-weight, 400);
13581
13661
  line-height: var(--cds-body-short-01-line-height, 1.28572);
13582
13662
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
13583
- height: 4rem;
13584
13663
  align-items: center;
13664
+ margin: 0;
13665
+ }
13666
+
13667
+ .c4p--action-set .c4p--action-set__action-button.c4p--action-set__action-button--expressive {
13668
+ height: 4rem;
13585
13669
  padding-top: 1rem;
13586
13670
  padding-bottom: 2rem;
13587
- margin: 0;
13588
13671
  }
13589
13672
 
13590
- .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive {
13673
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn.cds--btn--expressive,
13674
+ .c4p--action-set.cds--btn-set .c4p--action-set__action-button.cds--btn {
13591
13675
  max-width: none;
13592
13676
  }
13593
13677