@carbon/ibm-products 1.6.1 → 1.9.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (173) hide show
  1. package/css/index-full-carbon.css +224 -143
  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 +178 -142
  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 +178 -142
  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/APIKeyModal/APIKeyModal.js +10 -13
  18. package/es/components/ActionBar/ActionBar.js +0 -3
  19. package/es/components/ActionBar/ActionBarItem.js +2 -6
  20. package/es/components/ActionSet/ActionSet.js +11 -13
  21. package/es/components/AddSelect/AddSelect.js +121 -25
  22. package/es/components/AddSelect/AddSelectBreadcrumbs.js +5 -5
  23. package/es/components/AddSelect/AddSelectColumn.js +21 -0
  24. package/es/components/AddSelect/AddSelectList.js +68 -9
  25. package/es/components/AddSelect/AddSelectSidebar.js +43 -5
  26. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +0 -3
  27. package/es/components/ButtonMenu/ButtonMenu.js +6 -4
  28. package/es/components/ButtonMenu/ButtonMenuItem.js +1 -2
  29. package/es/components/Card/Card.js +31 -21
  30. package/es/components/Card/CardFooter.js +14 -10
  31. package/es/components/Card/CardHeader.js +8 -6
  32. package/es/components/Cascade/Cascade.js +5 -4
  33. package/es/components/ComboButton/ComboButton.js +0 -4
  34. package/es/components/ComboButton/ComboButtonItem/index.js +0 -5
  35. package/es/components/CreateFullPage/CreateFullPageStep.js +15 -8
  36. package/es/components/CreateModal/CreateModal.js +1 -4
  37. package/es/components/CreateTearsheet/CreateTearsheet.js +10 -11
  38. package/es/components/CreateTearsheet/CreateTearsheetStep.js +18 -14
  39. package/es/components/DataSpreadsheet/DataSpreadsheet.js +454 -0
  40. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +322 -0
  41. package/es/components/DataSpreadsheet/DataSpreadsheetHeader.js +64 -0
  42. package/es/components/DataSpreadsheet/createActiveCellFn.js +45 -0
  43. package/es/components/DataSpreadsheet/createCellSelectionArea.js +45 -0
  44. package/es/components/DataSpreadsheet/generateData.js +47 -0
  45. package/es/components/DataSpreadsheet/getCellSize.js +30 -0
  46. package/es/components/{CancelableTextEdit → DataSpreadsheet}/index.js +2 -2
  47. package/es/components/EditSidePanel/EditSidePanel.js +9 -10
  48. package/es/components/EmptyStates/EmptyState.js +7 -6
  49. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -8
  50. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -8
  51. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -8
  52. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -8
  53. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -8
  54. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -8
  55. package/es/components/ExampleComponent/ExampleComponent.js +12 -13
  56. package/es/components/ExportModal/ExportModal.js +13 -9
  57. package/es/components/ExpressiveCard/ExpressiveCard.js +0 -8
  58. package/es/components/ImportModal/ImportModal.js +7 -5
  59. package/es/components/InlineEdit/InlineEdit.js +51 -46
  60. package/es/components/LoadingBar/LoadingBar.js +13 -17
  61. package/es/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  62. package/es/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  63. package/es/components/ModifiedTabs/ModifiedTabs.js +24 -18
  64. package/es/components/NotificationsPanel/NotificationsPanel.js +109 -86
  65. package/es/components/OptionsTile/OptionsTile.js +6 -9
  66. package/es/components/PageHeader/PageHeader.js +10 -7
  67. package/es/components/ProductiveCard/ProductiveCard.js +23 -12
  68. package/es/components/RemoveModal/RemoveModal.js +0 -3
  69. package/es/components/SidePanel/SidePanel.js +22 -17
  70. package/es/components/TagSet/TagSet.js +13 -9
  71. package/es/components/TagSet/TagSetModal.js +16 -12
  72. package/es/components/TagSet/TagSetOverflow.js +21 -13
  73. package/es/components/Tearsheet/Tearsheet.js +27 -18
  74. package/es/components/Tearsheet/TearsheetNarrow.js +18 -15
  75. package/es/components/Tearsheet/TearsheetShell.js +3 -4
  76. package/es/components/Toolbar/ToolbarButton.js +0 -3
  77. package/es/components/WebTerminal/WebTerminal.js +17 -18
  78. package/es/components/index.js +2 -2
  79. package/es/global/js/hooks/index.js +1 -0
  80. package/es/global/js/hooks/useActiveElement.js +27 -0
  81. package/es/global/js/package-settings.js +2 -1
  82. package/es/global/js/utils/DisplayBox.js +31 -0
  83. package/es/global/js/utils/Wrap.js +7 -5
  84. package/es/global/js/utils/deepCloneObject.js +26 -0
  85. package/es/global/js/utils/getScrollbarWidth.js +14 -0
  86. package/lib/components/APIKeyModal/APIKeyModal.js +10 -13
  87. package/lib/components/ActionBar/ActionBar.js +0 -3
  88. package/lib/components/ActionBar/ActionBarItem.js +2 -6
  89. package/lib/components/ActionSet/ActionSet.js +11 -13
  90. package/lib/components/AddSelect/AddSelect.js +119 -24
  91. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +3 -4
  92. package/lib/components/AddSelect/AddSelectColumn.js +37 -0
  93. package/lib/components/AddSelect/AddSelectList.js +66 -9
  94. package/lib/components/AddSelect/AddSelectSidebar.js +43 -4
  95. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +0 -3
  96. package/lib/components/ButtonMenu/ButtonMenu.js +6 -4
  97. package/lib/components/ButtonMenu/ButtonMenuItem.js +1 -2
  98. package/lib/components/Card/Card.js +31 -21
  99. package/lib/components/Card/CardFooter.js +14 -10
  100. package/lib/components/Card/CardHeader.js +8 -6
  101. package/lib/components/Cascade/Cascade.js +5 -4
  102. package/lib/components/ComboButton/ComboButton.js +0 -4
  103. package/lib/components/ComboButton/ComboButtonItem/index.js +0 -5
  104. package/lib/components/CreateFullPage/CreateFullPageStep.js +17 -14
  105. package/lib/components/CreateModal/CreateModal.js +1 -4
  106. package/lib/components/CreateTearsheet/CreateTearsheet.js +10 -11
  107. package/lib/components/CreateTearsheet/CreateTearsheetStep.js +20 -20
  108. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +478 -0
  109. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +349 -0
  110. package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js +80 -0
  111. package/lib/components/DataSpreadsheet/createActiveCellFn.js +56 -0
  112. package/lib/components/DataSpreadsheet/createCellSelectionArea.js +56 -0
  113. package/lib/components/DataSpreadsheet/generateData.js +58 -0
  114. package/lib/components/DataSpreadsheet/getCellSize.js +39 -0
  115. package/lib/components/DataSpreadsheet/index.js +13 -0
  116. package/lib/components/EditSidePanel/EditSidePanel.js +9 -10
  117. package/lib/components/EmptyStates/EmptyState.js +9 -8
  118. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +3 -7
  119. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +3 -7
  120. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +3 -7
  121. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +3 -7
  122. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +3 -7
  123. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +3 -7
  124. package/lib/components/ExampleComponent/ExampleComponent.js +12 -13
  125. package/lib/components/ExportModal/ExportModal.js +13 -9
  126. package/lib/components/ExpressiveCard/ExpressiveCard.js +0 -8
  127. package/lib/components/ImportModal/ImportModal.js +7 -5
  128. package/lib/components/InlineEdit/InlineEdit.js +51 -46
  129. package/lib/components/LoadingBar/LoadingBar.js +13 -17
  130. package/lib/components/ModifiedTabs/ModifiedTabLabelNew.js +0 -4
  131. package/lib/components/ModifiedTabs/ModifiedTabLabelWithClose.js +0 -5
  132. package/lib/components/ModifiedTabs/ModifiedTabs.js +24 -18
  133. package/lib/components/NotificationsPanel/NotificationsPanel.js +109 -86
  134. package/lib/components/OptionsTile/OptionsTile.js +6 -9
  135. package/lib/components/PageHeader/PageHeader.js +9 -6
  136. package/lib/components/ProductiveCard/ProductiveCard.js +24 -18
  137. package/lib/components/RemoveModal/RemoveModal.js +0 -3
  138. package/lib/components/SidePanel/SidePanel.js +22 -17
  139. package/lib/components/TagSet/TagSet.js +13 -9
  140. package/lib/components/TagSet/TagSetModal.js +17 -13
  141. package/lib/components/TagSet/TagSetOverflow.js +24 -19
  142. package/lib/components/Tearsheet/Tearsheet.js +26 -17
  143. package/lib/components/Tearsheet/TearsheetNarrow.js +18 -15
  144. package/lib/components/Tearsheet/TearsheetShell.js +2 -3
  145. package/lib/components/Toolbar/ToolbarButton.js +0 -3
  146. package/lib/components/WebTerminal/WebTerminal.js +17 -18
  147. package/lib/components/index.js +8 -8
  148. package/lib/global/js/hooks/index.js +8 -0
  149. package/lib/global/js/hooks/useActiveElement.js +39 -0
  150. package/lib/global/js/package-settings.js +2 -1
  151. package/lib/global/js/utils/DisplayBox.js +46 -0
  152. package/lib/global/js/utils/Wrap.js +7 -5
  153. package/lib/global/js/utils/deepCloneObject.js +37 -0
  154. package/lib/global/js/utils/getScrollbarWidth.js +23 -0
  155. package/package.json +18 -16
  156. package/scss/components/{CancelableTextEdit → ActionBar}/_storybook-styles.scss +2 -2
  157. package/scss/components/ActionSet/_storybook-styles.scss +1 -3
  158. package/scss/components/AddSelect/_add-select.scss +77 -1
  159. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +8 -0
  160. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +8 -0
  161. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +120 -0
  162. package/scss/components/{CancelableTextEdit → DataSpreadsheet}/_index.scss +2 -2
  163. package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
  164. package/scss/components/InlineEdit/_inline-edit.scss +22 -8
  165. package/scss/components/InlineEdit/_storybook-styles.scss +1 -0
  166. package/scss/components/TagSet/_storybook-styles.scss +8 -0
  167. package/scss/components/Tearsheet/_tearsheet.scss +1 -2
  168. package/scss/components/_index.scss +1 -1
  169. package/scss/global/styles/_display-box.scss +62 -0
  170. package/es/components/CancelableTextEdit/CancelableTextEdit.js +0 -245
  171. package/lib/components/CancelableTextEdit/CancelableTextEdit.js +0 -265
  172. package/lib/components/CancelableTextEdit/index.js +0 -13
  173. package/scss/components/CancelableTextEdit/_cancelable-text-edit.scss +0 -212
@@ -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,31 @@ 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);
16702
+ }
16703
+
16704
+ .c4p--add-select .c4p--add-select__sidebar-item-remove-button:hover {
16705
+ background: var(--cds-disabled-02, #c6c6c6);
16706
+ }
16707
+
16708
+ .c4p--add-select .c4p--add-select__sidebar-accordion-title {
16709
+ display: flex;
16710
+ align-items: center;
16711
+ justify-content: space-between;
16712
+ }
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);
16678
16726
  }
16679
16727
 
16680
16728
  .c4p--add-select .c4p--tearsheet .c4p--tearsheet__influencer {
@@ -16682,6 +16730,10 @@ a.bx--side-nav__link--current::before {
16682
16730
  flex: 0 0 50%;
16683
16731
  }
16684
16732
 
16733
+ .c4p--add-select .c4p--tearsheet__header-description {
16734
+ color: var(--cds-text-02, #525252);
16735
+ }
16736
+
16685
16737
  .c4p--add-select .c4p--add-select__items-label {
16686
16738
  font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
16687
16739
  font-weight: var(--cds-productive-heading-01-font-weight, 600);
@@ -16697,6 +16749,10 @@ a.bx--side-nav__link--current::before {
16697
16749
  padding-bottom: var(--cds-spacing-05, 1rem);
16698
16750
  }
16699
16751
 
16752
+ .c4p--add-select .bx--radio-button__appearance {
16753
+ margin: 0 var(--cds-spacing-05, 1rem) 0 0;
16754
+ }
16755
+
16700
16756
  .c4p--add-select .bx--radio-button-wrapper .bx--radio-button__label {
16701
16757
  justify-content: left;
16702
16758
  }
@@ -16705,6 +16761,17 @@ a.bx--side-nav__link--current::before {
16705
16761
  cursor: pointer;
16706
16762
  }
16707
16763
 
16764
+ .c4p--add-select .bx--accordion__item:hover .c4p--add-select__sidebar-accordion-title button {
16765
+ opacity: 1;
16766
+ }
16767
+ .c4p--add-select .bx--accordion__item .c4p--add-select__sidebar-accordion-title button {
16768
+ opacity: 0;
16769
+ }
16770
+
16771
+ .c4p--add-select .bx--checkbox-label-text {
16772
+ padding-left: var(--cds-spacing-05, 1rem);
16773
+ }
16774
+
16708
16775
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16709
16776
  /* stylelint-disable-line no-invalid-position-at-import-rule */
16710
16777
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -22689,134 +22756,6 @@ a.bx--side-nav__link--current::before {
22689
22756
  transition: none;
22690
22757
  }
22691
22758
  }
22692
- /* stylelint-disable-line no-invalid-position-at-import-rule */
22693
- /* stylelint-disable-line no-invalid-position-at-import-rule */
22694
- /* stylelint-disable-line no-invalid-position-at-import-rule */
22695
- .c4p--cancelable-text-edit {
22696
- --size: var(--cds-spacing-08, 2.5rem);
22697
- --icon-size: var(--cds-spacing-05, 1rem);
22698
- }
22699
-
22700
- .c4p--cancelable-text-edit--sm {
22701
- --size: var(--cds-spacing-07, 2rem);
22702
- --icon-size: var(--cds-spacing-05, 1rem);
22703
- }
22704
-
22705
- .c4p--cancelable-text-edit--lg {
22706
- --size: var(--cds-spacing-09, 3rem);
22707
- --icon-size: var(--cds-spacing-05, 1rem);
22708
- }
22709
-
22710
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__main {
22711
- position: relative;
22712
- display: inline-flex;
22713
- width: 100%;
22714
- min-height: var(--size);
22715
- vertical-align: top;
22716
- }
22717
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__input {
22718
- height: var(--size);
22719
- padding-right: calc(2 * var(--size));
22720
- }
22721
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons {
22722
- position: absolute;
22723
- top: 0;
22724
- right: 0;
22725
- display: flex;
22726
- flex-direction: column;
22727
- }
22728
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__buttons-inner {
22729
- display: flex;
22730
- }
22731
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22732
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22733
- border: 1px solid transparent;
22734
- }
22735
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:hover,
22736
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:hover {
22737
- border-color: var(--cds-hover-field, #e5e5e5);
22738
- border-bottom-color: transparent;
22739
- background-clip: content-box;
22740
- box-shadow: initial;
22741
- outline: initial;
22742
- }
22743
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus,
22744
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active,
22745
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus {
22746
- border-color: var(--cds-focus, #0f62fe);
22747
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe);
22748
- outline: initial;
22749
- }
22750
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert:focus:active:hover,
22751
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save:focus:active:hover {
22752
- box-shadow: inset 0 0 0 1px var(--cds-focus, #0f62fe), inset 0 0 0 2px var(--cds-field-01, #f4f4f4);
22753
- }
22754
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert::before,
22755
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save::before {
22756
- background-color: transparent;
22757
- }
22758
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert[disabled],
22759
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save[disabled] {
22760
- border-color: transparent;
22761
- }
22762
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover,
22763
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__revert:hover {
22764
- border: 1px solid transparent;
22765
- box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28);
22766
- }
22767
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .c4p--cancelable-text-edit__save:hover {
22768
- box-shadow: inset 0 1px 0 var(--cds-support-01, #da1e28), inset 0 -1px 0 var(--cds-support-01, #da1e28), inset -1px 0 0 var(--cds-support-01, #da1e28);
22769
- }
22770
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert,
22771
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22772
- border: 1px solid transparent;
22773
- box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe);
22774
- }
22775
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__revert:hover,
22776
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save:hover {
22777
- background-clip: content-box;
22778
- }
22779
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input-wrapper:focus-within ~ .c4p--cancelable-text-edit__buttons .c4p--cancelable-text-edit__save {
22780
- box-shadow: inset 0 1px 0 var(--cds-focus, #0f62fe), inset 0 -1px 0 var(--cds-focus, #0f62fe), inset -1px 0 0 var(--cds-focus, #0f62fe);
22781
- }
22782
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert,
22783
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save {
22784
- display: flex;
22785
- width: var(--size);
22786
- height: var(--size);
22787
- min-height: var(--size);
22788
- flex-direction: column;
22789
- align-items: center;
22790
- justify-content: center;
22791
- padding: 0;
22792
- }
22793
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__revert svg,
22794
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .c4p--cancelable-text-edit__save svg {
22795
- width: var(--icon-size);
22796
- height: var(--icon-size);
22797
- }
22798
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn .bx--form-requirement {
22799
- display: block;
22800
- max-height: initial;
22801
- }
22802
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid.c4p--cancelable-text-edit--inline .bx--form-requirement, .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--warn.c4p--cancelable-text-edit--inline .bx--form-requirement {
22803
- margin-left: calc(20% + 1.25rem);
22804
- }
22805
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit--invalid .bx--form-requirement {
22806
- display: block;
22807
- overflow: visible;
22808
- color: var(--cds-text-error, #da1e28);
22809
- }
22810
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input {
22811
- padding-right: calc(2 * var(--size));
22812
- }
22813
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input--invalid {
22814
- padding-right: calc(3 * var(--size));
22815
- }
22816
- .c4p--cancelable-text-edit.c4p--cancelable-text-edit.c4p--cancelable-text-edit .bx--text-input__invalid-icon {
22817
- margin-right: var(--cds-spacing-11, 5rem);
22818
- }
22819
-
22820
22759
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22821
22760
  /* stylelint-disable-line no-invalid-position-at-import-rule */
22822
22761
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -22831,6 +22770,7 @@ a.bx--side-nav__link--current::before {
22831
22770
  background-color: var(--c4p--inline-edit--background-color);
22832
22771
  cursor: text;
22833
22772
  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);
22773
+ vertical-align: middle;
22834
22774
  white-space: nowrap;
22835
22775
  }
22836
22776
  .c4p--inline-edit.c4p--inline-edit--light {
@@ -22847,22 +22787,22 @@ a.bx--side-nav__link--current::before {
22847
22787
  --c4p--inline-edit--size: var(--cds-spacing-09, 3rem);
22848
22788
  --c4p--inline-edit--icon-size: var(--cds-spacing-05, 1rem);
22849
22789
  }
22850
- .c4p--inline-edit.c4p--inline-edit--editing {
22851
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
22790
+ .c4p--inline-edit.c4p--inline-edit--invalid {
22791
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
22852
22792
  outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
22853
- background-color: var(--cds-ui-01, #f4f4f4);
22854
22793
  }
22855
22794
  @media screen and (prefers-contrast) {
22856
- .c4p--inline-edit.c4p--inline-edit--editing {
22795
+ .c4p--inline-edit.c4p--inline-edit--invalid {
22857
22796
  outline-style: dotted;
22858
22797
  }
22859
22798
  }
22860
- .c4p--inline-edit .c4p--inline-edit--invalid {
22861
- outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-support-01, #da1e28);
22799
+ .c4p--inline-edit.c4p--inline-edit--editing {
22800
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-focus, #0f62fe);
22862
22801
  outline-offset: calc(-1 * var(--cds-spacing-01, 0.125rem));
22802
+ background-color: var(--cds-ui-01, #f4f4f4);
22863
22803
  }
22864
22804
  @media screen and (prefers-contrast) {
22865
- .c4p--inline-edit .c4p--inline-edit--invalid {
22805
+ .c4p--inline-edit.c4p--inline-edit--editing {
22866
22806
  outline-style: dotted;
22867
22807
  }
22868
22808
  }
@@ -22884,10 +22824,13 @@ a.bx--side-nav__link--current::before {
22884
22824
  top: 0;
22885
22825
  left: 0;
22886
22826
  display: block;
22827
+ overflow: hidden;
22828
+ width: 0;
22887
22829
  margin-left: var(--cds-spacing-05, 1rem);
22888
22830
  color: var(--cds-text-05, #6f6f6f);
22889
22831
  content: attr(data-placeholder);
22890
22832
  opacity: 0;
22833
+ visibility: hidden;
22891
22834
  }
22892
22835
  .c4p--inline-edit .c4p--inline-edit__ellipsis {
22893
22836
  display: inline-block;
@@ -22916,8 +22859,10 @@ a.bx--side-nav__link--current::before {
22916
22859
  pointer-events: all;
22917
22860
  }
22918
22861
  .c4p--inline-edit .c4p--inline-edit__input--empty::after {
22862
+ width: initial;
22919
22863
  opacity: 1;
22920
22864
  transition: opacity 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
22865
+ visibility: visible;
22921
22866
  }
22922
22867
  .c4p--inline-edit .c4p--inline-edit__after-input-elements {
22923
22868
  position: absolute;
@@ -22997,11 +22942,16 @@ a.bx--side-nav__link--current::before {
22997
22942
  box-shadow: initial;
22998
22943
  outline: initial;
22999
22944
  }
23000
- .c4p--inline-edit .c4p--inline-edit__edit--hover-visible {
23001
- opacity: 0;
23002
- 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
+ }
23003
22953
  }
23004
- .c4p--inline-edit:hover .c4p--inline-edit__edit--hover-visible {
22954
+ .c4p--inline-edit .c4p--inline-edit__edit--always-visible {
23005
22955
  opacity: 1;
23006
22956
  }
23007
22957
  .c4p--inline-edit .c4p--inline-edit__validation-icon {
@@ -23030,6 +22980,92 @@ a.bx--side-nav__link--current::before {
23030
22980
  color: var(--cds-support-error, #da1e28);
23031
22981
  }
23032
22982
 
22983
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22984
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22985
+ /* stylelint-disable-line no-invalid-position-at-import-rule */
22986
+ .c4p--data-spreadsheet {
22987
+ display: inline-block;
22988
+ border-spacing: 0;
22989
+ }
22990
+ .c4p--data-spreadsheet.c4p--data-spreadsheet__container-has-focus {
22991
+ outline: 2px solid var(--cds-inverse-link, #78a9ff);
22992
+ }
22993
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__header--container {
22994
+ position: relative;
22995
+ }
22996
+ .c4p--data-spreadsheet button.c4p--data-spreadsheet__td {
22997
+ margin: 0;
22998
+ background-color: transparent;
22999
+ }
23000
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__tr :last-child .c4p--data-spreadsheet__td {
23001
+ border-bottom: 0;
23002
+ }
23003
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
23004
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
23005
+ padding: 0 var(--cds-spacing-03, 0.5rem);
23006
+ border: 0;
23007
+ margin: 0;
23008
+ color: var(--cds-text-01, #161616);
23009
+ }
23010
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th:last-child,
23011
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td:last-child {
23012
+ border-right: 1px solid var(--cds-text-03, #a8a8a8);
23013
+ }
23014
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th,
23015
+ .c4p--data-spreadsheet button.c4p--data-spreadsheet__td-th {
23016
+ border-right: 1px solid var(--cds-text-03, #a8a8a8);
23017
+ border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
23018
+ background-color: var(--cds-ui-01, #f4f4f4);
23019
+ cursor: pointer;
23020
+ }
23021
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th {
23022
+ font-weight: 600;
23023
+ display: flex;
23024
+ align-items: center;
23025
+ justify-content: flex-end;
23026
+ }
23027
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
23028
+ border-right: 1px solid var(--cds-ui-03, #e0e0e0);
23029
+ border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
23030
+ cursor: cell;
23031
+ text-align: left;
23032
+ }
23033
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th {
23034
+ font-size: var(--cds-productive-heading-01-font-size, 0.875rem);
23035
+ font-weight: var(--cds-productive-heading-01-font-weight, 600);
23036
+ line-height: var(--cds-productive-heading-01-line-height, 1.28572);
23037
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
23038
+ color: var(--cds-text-01, #161616);
23039
+ text-align: left;
23040
+ }
23041
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
23042
+ position: absolute;
23043
+ z-index: 2;
23044
+ border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
23045
+ background-color: transparent;
23046
+ }
23047
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight:focus {
23048
+ border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
23049
+ outline: 0;
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
+ }
23068
+
23033
23069
  /* stylelint-disable-line no-invalid-position-at-import-rule */
23034
23070
  /* stylelint-disable-line no-invalid-position-at-import-rule */
23035
23071
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -25198,14 +25234,33 @@ li.bx--accordion__item--disabled:last-of-type {
25198
25234
  color: var(--cds-text-secondary, #525252);
25199
25235
  text-align: left;
25200
25236
  text-decoration: none;
25201
- transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
25237
+ transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25202
25238
  white-space: nowrap;
25203
25239
  }
25240
+ .bx--content-switcher-btn::after {
25241
+ position: absolute;
25242
+ top: 0;
25243
+ left: 0;
25244
+ display: block;
25245
+ width: 100%;
25246
+ height: 100%;
25247
+ background-color: var(--cds-layer-selected-inverse, #161616);
25248
+ content: "";
25249
+ transform: scaleY(0);
25250
+ transform-origin: bottom;
25251
+ transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
25252
+ }
25253
+ .bx--content-switcher-btn:disabled::after {
25254
+ display: none;
25255
+ }
25204
25256
  .bx--content-switcher-btn:focus {
25205
25257
  z-index: 3;
25206
25258
  border-color: var(--cds-focus, #0f62fe);
25207
25259
  box-shadow: inset 0 0 0 2px var(--cds-focus, #0f62fe), inset 0 0 0 3px var(--cds-focus-inset, #ffffff);
25208
25260
  }
25261
+ .bx--content-switcher-btn:focus::after {
25262
+ clip-path: inset(3px 3px 3px 3px);
25263
+ }
25209
25264
  .bx--content-switcher-btn:hover {
25210
25265
  color: var(--cds-text-primary, #161616);
25211
25266
  cursor: pointer;
@@ -25289,6 +25344,7 @@ li.bx--accordion__item--disabled:last-of-type {
25289
25344
  }
25290
25345
 
25291
25346
  .bx--content-switcher__label {
25347
+ z-index: 1;
25292
25348
  overflow: hidden;
25293
25349
  max-width: 100%;
25294
25350
  text-overflow: ellipsis;
@@ -25305,6 +25361,9 @@ li.bx--accordion__item--disabled:last-of-type {
25305
25361
  background-color: var(--cds-layer-selected-inverse, #161616);
25306
25362
  color: var(--cds-text-inverse, #ffffff);
25307
25363
  }
25364
+ .bx--content-switcher-btn.bx--content-switcher--selected::after {
25365
+ transform: scaleY(1);
25366
+ }
25308
25367
  .bx--content-switcher-btn.bx--content-switcher--selected:disabled {
25309
25368
  background-color: var(--cds-layer-selected-disabled, #8d8d8d);
25310
25369
  color: var(--cds-text-disabled, #c6c6c6);
@@ -25829,6 +25888,7 @@ li.bx--accordion__item--disabled:last-of-type {
25829
25888
  .bx--table-toolbar--small,
25830
25889
  .bx--table-toolbar--sm {
25831
25890
  height: 2rem;
25891
+ min-height: 2rem;
25832
25892
  }
25833
25893
  .bx--table-toolbar--small .bx--toolbar-search-container-expandable,
25834
25894
  .bx--table-toolbar--small .bx--toolbar-search-container-persistent,
@@ -25912,6 +25972,16 @@ li.bx--accordion__item--disabled:last-of-type {
25912
25972
  outline-offset: -2px;
25913
25973
  background-color: transparent;
25914
25974
  }
25975
+ .bx--table-toolbar--small .bx--overflow-menu.bx--toolbar-action,
25976
+ .bx--table-toolbar--sm .bx--overflow-menu.bx--toolbar-action {
25977
+ width: 2rem;
25978
+ min-width: 2rem;
25979
+ height: 2rem;
25980
+ }
25981
+ .bx--table-toolbar--small .bx--toolbar-content,
25982
+ .bx--table-toolbar--sm .bx--toolbar-content {
25983
+ height: 2rem;
25984
+ }
25915
25985
 
25916
25986
  .bx--search--disabled .bx--search-magnifier-icon:hover {
25917
25987
  background-color: transparent;
@@ -25948,6 +26018,11 @@ li.bx--accordion__item--disabled:last-of-type {
25948
26018
  height: 2rem;
25949
26019
  }
25950
26020
 
26021
+ .bx--table-toolbar--small .bx--batch-summary,
26022
+ .bx--table-toolbar--sm .bx--batch-summary {
26023
+ min-height: 2rem;
26024
+ }
26025
+
25951
26026
  /* stylelint-disable-line no-invalid-position-at-import-rule */
25952
26027
  /* stylelint-disable-line no-invalid-position-at-import-rule */
25953
26028
  /* stylelint-disable-line no-invalid-position-at-import-rule */
@@ -32029,6 +32104,12 @@ span.bx--pagination__text {
32029
32104
  color: transparent;
32030
32105
  }
32031
32106
 
32107
+ .bx--text-area__label-wrapper {
32108
+ display: flex;
32109
+ width: 100%;
32110
+ justify-content: space-between;
32111
+ }
32112
+
32032
32113
  /* stylelint-disable-line no-invalid-position-at-import-rule */
32033
32114
  /* stylelint-disable-line no-invalid-position-at-import-rule */
32034
32115
  /* stylelint-disable-line no-invalid-position-at-import-rule */