@carbon/ibm-products 1.8.0 → 1.9.0

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 (52) hide show
  1. package/css/index-full-carbon.css +82 -9
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +3 -3
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -2
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +82 -9
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +3 -3
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +82 -9
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +3 -3
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelect.js +104 -16
  18. package/es/components/AddSelect/AddSelectBreadcrumbs.js +4 -4
  19. package/es/components/AddSelect/AddSelectColumn.js +21 -0
  20. package/es/components/AddSelect/AddSelectList.js +67 -8
  21. package/es/components/AddSelect/AddSelectSidebar.js +7 -1
  22. package/es/components/DataSpreadsheet/DataSpreadsheet.js +42 -2
  23. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +194 -10
  24. package/es/components/DataSpreadsheet/createActiveCellFn.js +1 -1
  25. package/es/components/DataSpreadsheet/createCellSelectionArea.js +45 -0
  26. package/es/components/InlineEdit/InlineEdit.js +23 -13
  27. package/es/global/js/utils/DisplayBox.js +31 -0
  28. package/es/global/js/utils/deepCloneObject.js +26 -0
  29. package/lib/components/AddSelect/AddSelect.js +102 -15
  30. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +2 -3
  31. package/lib/components/AddSelect/AddSelectColumn.js +37 -0
  32. package/lib/components/AddSelect/AddSelectList.js +65 -8
  33. package/lib/components/AddSelect/AddSelectSidebar.js +7 -1
  34. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +42 -2
  35. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +198 -10
  36. package/lib/components/DataSpreadsheet/createActiveCellFn.js +1 -1
  37. package/lib/components/DataSpreadsheet/createCellSelectionArea.js +56 -0
  38. package/lib/components/InlineEdit/InlineEdit.js +23 -13
  39. package/lib/global/js/utils/DisplayBox.js +46 -0
  40. package/lib/global/js/utils/deepCloneObject.js +37 -0
  41. package/package.json +8 -8
  42. package/scss/components/ActionBar/_storybook-styles.scss +8 -0
  43. package/scss/components/ActionSet/_storybook-styles.scss +1 -3
  44. package/scss/components/AddSelect/_add-select.scss +58 -2
  45. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +8 -0
  46. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +8 -0
  47. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +18 -0
  48. package/scss/components/InlineEdit/_inline-edit.scss +11 -4
  49. package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
  50. package/scss/components/TagSet/_storybook-styles.scss +8 -0
  51. package/scss/components/Tearsheet/_tearsheet.scss +1 -2
  52. package/scss/global/styles/_display-box.scss +62 -0
@@ -13936,8 +13936,7 @@ a.bx--side-nav__link--current::before {
13936
13936
  margin: 0;
13937
13937
  }
13938
13938
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
13939
- padding-right: var(--cds-spacing-05, 1rem);
13940
- margin-right: var(--cds-spacing-09, 3rem);
13939
+ padding-right: var(--cds-spacing-10, 4rem);
13941
13940
  }
13942
13941
  .c4p--tearsheet .c4p--tearsheet__header-content {
13943
13942
  display: flex;
@@ -16641,6 +16640,18 @@ a.bx--side-nav__link--current::before {
16641
16640
  align-items: center;
16642
16641
  justify-content: space-between;
16643
16642
  }
16643
+ .c4p--add-select__selections-cell-title {
16644
+ display: block;
16645
+ color: var(--cds-text-01, #161616);
16646
+ }
16647
+ .c4p--add-select__selections-cell-subtitle {
16648
+ font-size: var(--cds-label-01-font-size, 0.75rem);
16649
+ font-weight: var(--cds-label-01-font-weight, 400);
16650
+ line-height: var(--cds-label-01-line-height, 1.33333);
16651
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16652
+ display: block;
16653
+ color: var(--cds-text-02, #525252);
16654
+ }
16644
16655
 
16645
16656
  .c4p--add-select__sidebar-header {
16646
16657
  display: flex;
@@ -16658,6 +16669,17 @@ a.bx--side-nav__link--current::before {
16658
16669
  margin-right: var(--cds-spacing-03, 0.5rem);
16659
16670
  }
16660
16671
 
16672
+ .c4p--add-select__sidebar-selected-item-title {
16673
+ color: var(--cds-text-01, #161616);
16674
+ }
16675
+ .c4p--add-select__sidebar-selected-item-subtitle {
16676
+ font-size: var(--cds-label-01-font-size, 0.75rem);
16677
+ font-weight: var(--cds-label-01-font-weight, 400);
16678
+ line-height: var(--cds-label-01-line-height, 1.33333);
16679
+ letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16680
+ color: var(--cds-text-02, #525252);
16681
+ }
16682
+
16661
16683
  .c4p--add-select__sidebar-body {
16662
16684
  padding: var(--cds-spacing-05, 1rem);
16663
16685
  }
@@ -16667,6 +16689,8 @@ a.bx--side-nav__link--current::before {
16667
16689
  font-weight: var(--cds-label-01-font-weight, 400);
16668
16690
  line-height: var(--cds-label-01-line-height, 1.33333);
16669
16691
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16692
+ margin-bottom: var(--cds-spacing-03, 0.5rem);
16693
+ color: var(--cds-text-02, #525252);
16670
16694
  }
16671
16695
 
16672
16696
  .c4p--add-select .c4p--add-select__sidebar-item-body {
@@ -16674,7 +16698,7 @@ a.bx--side-nav__link--current::before {
16674
16698
  font-weight: var(--cds-body-long-01-font-weight, 400);
16675
16699
  line-height: var(--cds-body-long-01-line-height, 1.42857);
16676
16700
  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
16677
- margin-bottom: var(--cds-spacing-03, 0.5rem);
16701
+ margin-bottom: var(--cds-spacing-05, 1rem);
16678
16702
  }
16679
16703
 
16680
16704
  .c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
@@ -16687,11 +16711,29 @@ a.bx--side-nav__link--current::before {
16687
16711
  justify-content: space-between;
16688
16712
  }
16689
16713
 
16714
+ .c4p--add-select__columns {
16715
+ display: flex;
16716
+ flex-direction: row;
16717
+ }
16718
+
16719
+ .c4p--add-select__columns .c4p--add-select__selections-cell {
16720
+ padding: 0 var(--cds-spacing-05, 1rem) !important;
16721
+ }
16722
+
16723
+ .c4p--add-select__column {
16724
+ padding: var(--cds-spacing-05, 1rem);
16725
+ border-right: var(--cds-ui-03, #e0e0e0);
16726
+ }
16727
+
16690
16728
  .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
16691
16729
  max-width: 29rem;
16692
16730
  flex: 0 0 50%;
16693
16731
  }
16694
16732
 
16733
+ .c4p--add-select .c4p--tearsheet__header-description {
16734
+ color: var(--cds-text-02, #525252);
16735
+ }
16736
+
16695
16737
  .c4p--add-select .c4p--add-select__items-label {
16696
16738
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16697
16739
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -16707,6 +16749,10 @@ a.bx--side-nav__link--current::before {
16707
16749
  padding-bottom: var(--cds-spacing-05, 1rem);
16708
16750
  }
16709
16751
 
16752
+ .c4p--add-select .bx--radio-button__appearance {
16753
+ margin: 0 var(--cds-spacing-05, 1rem) 0 0;
16754
+ }
16755
+
16710
16756
  .c4p--add-select .bx--radio-button-wrapper .bx--radio-button__label {
16711
16757
  justify-content: left;
16712
16758
  }
@@ -16715,13 +16761,17 @@ a.bx--side-nav__link--current::before {
16715
16761
  cursor: pointer;
16716
16762
  }
16717
16763
 
16718
- .bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
16764
+ .c4p--add-select .bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
16719
16765
  opacity: 1;
16720
16766
  }
16721
- .bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
16767
+ .c4p--add-select .bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
16722
16768
  opacity: 0;
16723
16769
  }
16724
16770
 
16771
+ .c4p--add-select .bx--checkbox-label-text {
16772
+ padding-left: var(--cds-spacing-05, 1rem);
16773
+ }
16774
+
16725
16775
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16726
16776
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16727
16777
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -22892,11 +22942,16 @@ a.bx--side-nav__link--current::before {
22892
22942
  box-shadow: initial;
22893
22943
  outline: initial;
22894
22944
  }
22895
- .c4p--inline-edit .c4p--inline-edit__edit--hover-visible {
22896
- opacity: 0;
22897
- transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
22945
+ @media (hover: hover) {
22946
+ .c4p--inline-edit .c4p--inline-edit__edit {
22947
+ opacity: 0;
22948
+ transition: opacity 70ms cubic-bezier(0, 0, 0.38, 0.9);
22949
+ }
22950
+ .c4p--inline-edit:hover .c4p--inline-edit__edit {
22951
+ opacity: 1;
22952
+ }
22898
22953
  }
22899
- .c4p--inline-edit:hover .c4p--inline-edit__edit--hover-visible {
22954
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
22900
22955
  opacity: 1;
22901
22956
  }
22902
22957
  .c4p--inline-edit .c4p--inline-edit__validation-icon {
@@ -22985,6 +23040,7 @@ a.bx--side-nav__link--current::before {
22985
23040
  }
22986
23041
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
22987
23042
  position: absolute;
23043
+ z-index: 2;
22988
23044
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
22989
23045
  background-color: transparent;
22990
23046
  }
@@ -22992,6 +23048,23 @@ a.bx--side-nav__link--current::before {
22992
23048
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
22993
23049
  outline: 0;
22994
23050
  }
23051
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element {
23052
+ position: absolute;
23053
+ z-index: 2;
23054
+ border: 1px solid var(--cds-interactive-01, #0f62fe);
23055
+ pointer-events: none;
23056
+ }
23057
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__selection-area--element::before {
23058
+ position: absolute;
23059
+ top: 0;
23060
+ left: 0;
23061
+ display: block;
23062
+ width: 100%;
23063
+ height: 100%;
23064
+ background-color: var(--cds-interactive-01, #0f62fe);
23065
+ content: "";
23066
+ opacity: 0.25;
23067
+ }
22995
23068
 
22996
23069
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22997
23070
  /* stylelint-disable-line no-invalid-position-at-import-rule */