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

Sign up to get free protection for your applications and to get access to all the features.
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