@carbon/ibm-products 1.12.0 → 1.13.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 (47) hide show
  1. package/css/index-full-carbon.css +60 -13
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +6 -6
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +14 -6
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +60 -13
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +5 -5
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +60 -13
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +6 -6
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ActionBar/ActionBar.js +3 -1
  18. package/es/components/ActionBar/ActionBarOverflowItems.js +5 -3
  19. package/es/components/AddSelect/AddSelectList.js +27 -1
  20. package/es/components/AddSelect/AddSelectSidebar.js +15 -5
  21. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  22. package/es/components/DataSpreadsheet/DataSpreadsheet.js +87 -31
  23. package/es/components/DataSpreadsheet/DataSpreadsheetBody.js +87 -33
  24. package/es/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -4
  25. package/es/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  26. package/es/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  27. package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  28. package/es/components/TagSet/TagSet.js +12 -3
  29. package/es/components/UserProfileImage/UserProfileImage.js +37 -9
  30. package/lib/components/ActionBar/ActionBar.js +3 -1
  31. package/lib/components/ActionBar/ActionBarOverflowItems.js +5 -3
  32. package/lib/components/AddSelect/AddSelectList.js +28 -1
  33. package/lib/components/AddSelect/AddSelectSidebar.js +15 -11
  34. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +2 -0
  35. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +89 -30
  36. package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js +86 -33
  37. package/lib/components/DataSpreadsheet/hooks/useSpreadsheetOutsideClick.js +6 -3
  38. package/lib/components/HTTPErrors/assets/HTTPErrorSvg403.js +2 -3
  39. package/lib/components/HTTPErrors/assets/HTTPErrorSvg404.js +2 -3
  40. package/lib/components/HTTPErrors/assets/HTTPErrorSvgOther.js +2 -3
  41. package/lib/components/TagSet/TagSet.js +12 -3
  42. package/lib/components/UserProfileImage/UserProfileImage.js +37 -9
  43. package/package.json +9 -9
  44. package/scss/components/AddSelect/_add-select.scss +14 -2
  45. package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +37 -5
  46. package/scss/components/HTTPErrors/_http-errors.scss +16 -16
  47. package/scss/components/PageHeader/_page-header.scss +4 -0
@@ -13456,9 +13456,14 @@ a.bx--side-nav__link--current::before {
13456
13456
  z-index: 2;
13457
13457
  top: 50%;
13458
13458
  left: 50%;
13459
- transform: translate(-50%, -150%);
13459
+ transform: translate(-50%, -75%);
13460
13460
  }
13461
13461
  @media (min-width: 42rem) {
13462
+ .c4p--http-errors .c4p--http-errors__content {
13463
+ transform: translate(-50%, -100%);
13464
+ }
13465
+ }
13466
+ @media (min-width: 66rem) {
13462
13467
  .c4p--http-errors .c4p--http-errors__content {
13463
13468
  transform: translate(-50%, -50%);
13464
13469
  }
@@ -13501,14 +13506,15 @@ a.bx--side-nav__link--current::before {
13501
13506
 
13502
13507
  .c4p--http-errors .c4p--http-errors__image {
13503
13508
  position: fixed;
13504
- top: 50%;
13505
- left: 50%;
13509
+ bottom: 0;
13510
+ left: 0;
13506
13511
  width: 100%;
13507
- transform: translate(-50%, -40%);
13512
+ max-height: 100%;
13508
13513
  }
13509
- @media (min-width: 42rem) {
13514
+ @media (max-width: 41.98rem) {
13510
13515
  .c4p--http-errors .c4p--http-errors__image {
13511
- transform: translate(-50%, -50%);
13516
+ left: 10%;
13517
+ transform: scale(1.5);
13512
13518
  }
13513
13519
  }
13514
13520
 
@@ -14297,10 +14303,13 @@ a.bx--side-nav__link--current::before {
14297
14303
  display: flex;
14298
14304
  align-items: center;
14299
14305
  }
14306
+ .c4p--add-select__selections-checkbox-label-wrapper {
14307
+ display: flex;
14308
+ margin-left: var(--cds-spacing-03, 0.5rem);
14309
+ }
14300
14310
  .c4p--add-select__selections-checkbox-label-text {
14301
14311
  display: flex;
14302
14312
  flex-direction: column;
14303
- padding-left: var(--cds-spacing-05, 1rem);
14304
14313
  }
14305
14314
  .c4p--add-select__selections-checkbox-wrapper.bx--form-item {
14306
14315
  flex: 0;
@@ -14308,6 +14317,12 @@ a.bx--side-nav__link--current::before {
14308
14317
  .c4p--add-select__selections-checkbox-wrapper .bx--checkbox-label-text {
14309
14318
  display: none;
14310
14319
  }
14320
+ .c4p--add-select__selections-cell-avatar {
14321
+ margin-right: var(--cds-spacing-03, 0.5rem);
14322
+ }
14323
+ .c4p--add-select__selections-cell-icon {
14324
+ margin-right: var(--cds-spacing-03, 0.5rem);
14325
+ }
14311
14326
 
14312
14327
  .c4p--add-select__sidebar-header {
14313
14328
  display: flex;
@@ -14461,7 +14476,7 @@ a.bx--side-nav__link--current::before {
14461
14476
  }
14462
14477
 
14463
14478
  .c4p--add-select .bx--checkbox-label-text {
14464
- padding-left: var(--cds-spacing-05, 1rem);
14479
+ padding-left: var(--cds-spacing-03, 0.5rem);
14465
14480
  }
14466
14481
 
14467
14482
  @keyframes fade-in {
@@ -16589,6 +16604,7 @@ a.bx--side-nav__link--current::before {
16589
16604
  .c4p--page-header .c4p--page-header__title-row {
16590
16605
  margin-top: 0;
16591
16606
  margin-bottom: 0;
16607
+ transform: translateY(var(--cds-spacing-01, 0.125rem));
16592
16608
  }
16593
16609
  @media (min-width: 42rem) {
16594
16610
  .c4p--page-header .c4p--page-header__title-row {
@@ -16598,6 +16614,7 @@ a.bx--side-nav__link--current::before {
16598
16614
  }
16599
16615
  .c4p--page-header .c4p--page-header__title-row.c4p--page-header__title-row--under-action-bar {
16600
16616
  margin-top: var(--cds-spacing-05, 1rem);
16617
+ transform: translateY(0);
16601
16618
  }
16602
16619
  .c4p--page-header .c4p--page-header__title-row + .c4p--page-header__last-row-buffer--active {
16603
16620
  height: var(--cds-spacing-07, 2rem);
@@ -19196,6 +19213,7 @@ a.bx--side-nav__link--current::before {
19196
19213
  }
19197
19214
 
19198
19215
  .c4p--data-spreadsheet {
19216
+ --c4p--data-spreadsheet--total-width: 0;
19199
19217
  display: inline-block;
19200
19218
  border-spacing: 0;
19201
19219
  }
@@ -19227,9 +19245,14 @@ a.bx--side-nav__link--current::before {
19227
19245
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td {
19228
19246
  border-right: 1px solid var(--cds-text-03, #a8a8a8);
19229
19247
  border-bottom: 1px solid var(--cds-text-03, #a8a8a8);
19230
- background-color: var(--cds-ui-01, #f4f4f4);
19248
+ background-color: var(--cds-ui-03, #e0e0e0);
19231
19249
  cursor: pointer;
19232
19250
  }
19251
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__th:hover, .c4p--data-spreadsheet .c4p--data-spreadsheet__th:focus,
19252
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td:hover,
19253
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td:focus {
19254
+ background-color: var(--cds-hover-selected-ui, #cacaca);
19255
+ }
19233
19256
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th.c4p--data-spreadsheet__td {
19234
19257
  font-weight: 600;
19235
19258
  display: flex;
@@ -19239,8 +19262,9 @@ a.bx--side-nav__link--current::before {
19239
19262
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td {
19240
19263
  border-right: 1px solid var(--cds-ui-03, #e0e0e0);
19241
19264
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
19265
+ overflow: hidden;
19242
19266
  margin: 0;
19243
- background-color: var(--cds-ui-background, #ffffff);
19267
+ background-color: var(--cds-field-01, #f4f4f4);
19244
19268
  cursor: cell;
19245
19269
  text-align: left;
19246
19270
  }
@@ -19260,15 +19284,36 @@ a.bx--side-nav__link--current::before {
19260
19284
  position: absolute;
19261
19285
  z-index: 4;
19262
19286
  display: none;
19287
+ overflow: hidden;
19263
19288
  /* stylelint-disable-next-line carbon/layout-token-use */
19264
19289
  padding: 0 calc(var(--cds-spacing-03, 0.5rem) + 1px) 0 var(--cds-spacing-03, 0.5rem);
19265
- background-color: var(--cds-ui-background, #ffffff);
19290
+ background-color: var(--cds-field-01, #f4f4f4);
19266
19291
  resize: none;
19267
19292
  }
19268
19293
  .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor.bx--text-area {
19269
19294
  min-width: initial;
19270
19295
  min-height: initial;
19271
19296
  }
19297
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor.c4p--data-spreadsheet__cell-editor--active {
19298
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19299
+ outline-offset: -2px;
19300
+ }
19301
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor-ruler {
19302
+ font-size: var(--cds-body-short-01-font-size, 0.875rem);
19303
+ font-weight: var(--cds-body-short-01-font-weight, 400);
19304
+ line-height: var(--cds-body-short-01-line-height, 1.28572);
19305
+ letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
19306
+ position: absolute;
19307
+ overflow: hidden;
19308
+ width: fit-content;
19309
+ max-width: var(--c4p--data-spreadsheet--total-width);
19310
+ /* stylelint-disable-next-line carbon/layout-token-use */
19311
+ padding: 0 calc(var(--cds-spacing-03, 0.5rem) + 1px) 0 var(--cds-spacing-03, 0.5rem);
19312
+ visibility: hidden;
19313
+ }
19314
+ .c4p--data-spreadsheet .c4p--data-spreadsheet__cell-editor-ruler:focus {
19315
+ outline: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19316
+ }
19272
19317
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight {
19273
19318
  font-size: var(--cds-body-short-01-font-size, 0.875rem);
19274
19319
  font-weight: var(--cds-body-short-01-font-weight, 400);
@@ -19279,11 +19324,13 @@ a.bx--side-nav__link--current::before {
19279
19324
  position: absolute;
19280
19325
  z-index: 3;
19281
19326
  display: none;
19327
+ overflow: hidden;
19282
19328
  /* stylelint-disable-next-line carbon/layout-token-use */
19283
19329
  padding-right: calc(var(--cds-spacing-03, 0.5rem) - 1px);
19284
19330
  padding-bottom: var(--cds-spacing-01, 0.125rem);
19285
19331
  border: var(--cds-spacing-01, 0.125rem) solid var(--cds-interactive-01, #0f62fe);
19286
- background-color: var(--cds-ui-background, #ffffff);
19332
+ background-color: var(--cds-field-01, #f4f4f4);
19333
+ color: var(--cds-text-01, #161616);
19287
19334
  text-align: left;
19288
19335
  }
19289
19336
  .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-row-index=header], .c4p--data-spreadsheet .c4p--data-spreadsheet__active-cell--highlight[data-active-column-index=header] {
@@ -19312,7 +19359,7 @@ a.bx--side-nav__link--current::before {
19312
19359
  }
19313
19360
  .c4p--data-spreadsheet .c4p--data-spreadsheet__th--active-header,
19314
19361
  .c4p--data-spreadsheet .c4p--data-spreadsheet__td-th--active-header.c4p--data-spreadsheet__td {
19315
- background-color: var(--cds-ui-03, #e0e0e0);
19362
+ background-color: var(--cds-hover-selected-ui, #cacaca);
19316
19363
  }
19317
19364
 
19318
19365
  @font-face {