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

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 (68) hide show
  1. package/css/index-full-carbon.css +67 -21
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon.css +67 -21
  6. package/css/index-without-carbon.css.map +1 -1
  7. package/css/index-without-carbon.min.css +4 -2
  8. package/css/index-without-carbon.min.css.map +1 -1
  9. package/css/index.css +67 -21
  10. package/css/index.css.map +1 -1
  11. package/css/index.min.css +4 -2
  12. package/css/index.min.css.map +1 -1
  13. package/es/components/ActionBar/ActionBarOverflowItems.js +1 -0
  14. package/es/components/AddSelect/AddSelect.js +6 -3
  15. package/es/components/AddSelect/AddSelectBody.js +50 -26
  16. package/es/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  17. package/es/components/AddSelect/AddSelectColumn.js +3 -3
  18. package/es/components/AddSelect/AddSelectFilter.js +5 -3
  19. package/es/components/AddSelect/AddSelectList.js +6 -5
  20. package/es/components/AddSelect/AddSelectMetaPanel.js +6 -0
  21. package/es/components/AddSelect/AddSelectSidebar.js +5 -2
  22. package/es/components/AddSelect/AddSelectSort.js +1 -1
  23. package/es/components/AddSelect/add-select-utils.js +7 -0
  24. package/es/components/AddSelect/hooks/useItemSort.js +6 -0
  25. package/es/components/AddSelect/hooks/useParentSelect.js +6 -0
  26. package/es/components/AddSelect/hooks/usePath.js +15 -1
  27. package/es/components/AddSelect/index.js +1 -1
  28. package/es/components/CreateFullPage/CreateFullPage.js +4 -1
  29. package/es/components/Datagrid/Datagrid/DatagridRow.js +41 -2
  30. package/es/components/Datagrid/useNestedRows.js +14 -2
  31. package/es/components/Datagrid/utils/DatagridActions.js +130 -46
  32. package/es/components/MultiAddSelect/MultiAddSelect.js +14 -7
  33. package/es/components/MultiAddSelect/index.js +6 -0
  34. package/es/components/SingleAddSelect/SingleAddSelect.js +6 -0
  35. package/es/components/SingleAddSelect/index.js +6 -0
  36. package/lib/components/ActionBar/ActionBarOverflowItems.js +1 -0
  37. package/lib/components/AddSelect/AddSelect.js +5 -2
  38. package/lib/components/AddSelect/AddSelectBody.js +45 -25
  39. package/lib/components/AddSelect/AddSelectBreadcrumbs.js +1 -1
  40. package/lib/components/AddSelect/AddSelectColumn.js +2 -2
  41. package/lib/components/AddSelect/AddSelectFilter.js +4 -2
  42. package/lib/components/AddSelect/AddSelectList.js +5 -4
  43. package/lib/components/AddSelect/AddSelectMetaPanel.js +6 -0
  44. package/lib/components/AddSelect/AddSelectSidebar.js +4 -1
  45. package/lib/components/AddSelect/AddSelectSort.js +1 -1
  46. package/lib/components/AddSelect/add-select-utils.js +7 -0
  47. package/lib/components/AddSelect/hooks/useItemSort.js +6 -0
  48. package/lib/components/AddSelect/hooks/useParentSelect.js +6 -0
  49. package/lib/components/AddSelect/hooks/usePath.js +9 -1
  50. package/lib/components/CreateFullPage/CreateFullPage.js +4 -1
  51. package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -2
  52. package/lib/components/Datagrid/useNestedRows.js +15 -2
  53. package/lib/components/Datagrid/utils/DatagridActions.js +134 -44
  54. package/lib/components/MultiAddSelect/MultiAddSelect.js +14 -7
  55. package/lib/components/SingleAddSelect/SingleAddSelect.js +6 -0
  56. package/package.json +2 -2
  57. package/scss/components/AddSelect/_add-select.scss +24 -25
  58. package/scss/components/AddSelect/_index.scss +1 -1
  59. package/scss/components/AddSelect/_storybook-styles.scss +1 -1
  60. package/scss/components/Datagrid/_storybook-styles.scss +5 -0
  61. package/scss/components/Datagrid/styles/_datagrid.scss +49 -4
  62. package/scss/components/MultiAddSelect/_multi-add-select.scss +7 -0
  63. package/scss/components/MultiAddSelect/_storybook-styles.scss +1 -1
  64. package/scss/components/SingleAddSelect/_carbon-imports.scss +1 -1
  65. package/scss/components/SingleAddSelect/_index-with-carbon.scss +1 -1
  66. package/scss/components/SingleAddSelect/_index.scss +7 -0
  67. package/scss/components/SingleAddSelect/_single-add-select.scss +7 -0
  68. package/scss/components/SingleAddSelect/_storybook-styles.scss +1 -1
@@ -4325,13 +4325,14 @@
4325
4325
  flex-direction: column;
4326
4326
  justify-content: center;
4327
4327
  }
4328
- .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover {
4328
+ .c4p--add-select__selections-cell:hover .c4p--add-select__selections-hidden-hover,
4329
+ .c4p--add-select__selections .cds--structured-list-row:focus-within .c4p--add-select__selections-hidden-hover {
4329
4330
  visibility: visible;
4330
4331
  }
4331
4332
  .c4p--add-select__selections-hidden-hover {
4332
4333
  visibility: hidden;
4333
4334
  }
4334
- .c4p--add-select__selections-row-selectedcds--structured-list-row {
4335
+ .c4p--add-select__selections-row--selected.cds--structured-list-row {
4335
4336
  border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
4336
4337
  background-color: var(--cds-layer-selected-01, #e0e0e0);
4337
4338
  }
@@ -4362,7 +4363,7 @@
4362
4363
  .c4p--add-select__selections-row {
4363
4364
  border-left: 0.125rem solid transparent;
4364
4365
  }
4365
- .c4p--add-select__selections-row-meta-selected {
4366
+ .c4p--add-select__selections-row-meta--selected {
4366
4367
  border-left: 0.125rem solid var(--cds-interactive, #0f62fe);
4367
4368
  background-color: var(--cds-layer-hover-01, #e8e8e8);
4368
4369
  }
@@ -4377,11 +4378,6 @@
4377
4378
  fill: currentColor;
4378
4379
  }
4379
4380
 
4380
- .c4p--add-select cds--structured-list--selection .c4p--add-select__selections-row-selectedcds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4381
- border-bottom: 1px solid var(--cds-layer-accent-hover-01, #d1d1d1);
4382
- background-color: var(--cds-layer-selected-hover-01, #d1d1d1);
4383
- }
4384
-
4385
4381
  .c4p--add-select__sub-header {
4386
4382
  display: flex;
4387
4383
  align-items: flex-end;
@@ -4391,11 +4387,11 @@
4391
4387
  padding: 0 1rem;
4392
4388
  }
4393
4389
 
4394
- .c4p--add-select cds--structured-list-row {
4390
+ .c4p--add-select .cds--structured-list-row {
4395
4391
  border-bottom: 0;
4396
4392
  }
4397
4393
 
4398
- .c4p--add-select cds--structured-list--selection cds--structured-list-row:hover:not(cds--structured-list-row--header-row):not(cds--structured-list-row--selected) {
4394
+ .c4p--add-select .cds--structured-list--selection .cds--structured-list-row:hover:not(.cds--structured-list-row--header-row):not(.cds--structured-list-row--selected) {
4399
4395
  border-bottom: 0;
4400
4396
  }
4401
4397
 
@@ -4466,7 +4462,7 @@
4466
4462
  .c4p--add-select__columns .c4p--add-select__selections-checkbox-label-wrapper {
4467
4463
  margin-left: 0.5rem;
4468
4464
  }
4469
- .c4p--add-select__columns .c4p--add-select__selections-rowcds--structured-list-row {
4465
+ .c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
4470
4466
  border-left: 0;
4471
4467
  }
4472
4468
  .c4p--add-select__columns .c4p--add-select__selections .c4p--add-select__selections-cell {
@@ -4476,14 +4472,14 @@
4476
4472
  height: auto;
4477
4473
  padding: 0 0.5rem;
4478
4474
  }
4479
- .c4p--add-select__columns .c4p--add-select__tag-container {
4475
+ .c4p--add-select__columns .c4p--add-select__tags {
4480
4476
  padding: 0 0.5rem;
4481
4477
  margin-bottom: 0;
4482
4478
  }
4483
4479
  .c4p--add-select__columns .c4p--add-select__selections-wrapper-multi {
4484
4480
  padding: 0;
4485
4481
  }
4486
- .c4p--add-select__columns .c4p--add-select__selectionscds--structured-list {
4482
+ .c4p--add-select__columns .c4p--add-select__selections.cds--structured-list {
4487
4483
  border-top: 0;
4488
4484
  }
4489
4485
 
@@ -4515,13 +4511,13 @@
4515
4511
  border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
4516
4512
  }
4517
4513
 
4518
- .c4p--add-select__tag-container {
4514
+ .c4p--add-select__tags {
4519
4515
  display: flex;
4520
4516
  align-items: center;
4521
4517
  margin-top: 1rem;
4522
4518
  margin-bottom: 0.5rem;
4523
4519
  }
4524
- .c4p--add-select__tag-container-label {
4520
+ .c4p--add-select__tags-label {
4525
4521
  margin-right: 0.5rem;
4526
4522
  }
4527
4523
 
@@ -4603,7 +4599,11 @@ button.c4p--add-select__global-filter-toggle--open {
4603
4599
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4604
4600
  }
4605
4601
 
4606
- .c4p--add-select__tag-container .cds--tag {
4602
+ .c4p--add-select__selections .cds--list-box__menu {
4603
+ left: auto;
4604
+ }
4605
+
4606
+ .c4p--add-select__tags .cds--tag {
4607
4607
  margin: 0;
4608
4608
  }
4609
4609
 
@@ -4677,15 +4677,15 @@ button.c4p--add-select__global-filter-toggle--open {
4677
4677
  transform: rotate(90deg);
4678
4678
  }
4679
4679
 
4680
- .c4p--add-select cds--accordion--start cds--accordion__arrow {
4680
+ .c4p--add-select .cds--accordion--start .cds--accordion__arrow {
4681
4681
  margin: 0 0 0 1rem;
4682
4682
  }
4683
4683
 
4684
- .c4p--add-select cds--accordion--start cds--accordion__title {
4684
+ .c4p--add-select .cds--accordion--start .cds--accordion__title {
4685
4685
  margin: 0 1rem 0 0.5rem;
4686
4686
  }
4687
4687
 
4688
- .c4p--add-select cds--accordion__item--active cds--accordion__content {
4688
+ .c4p--add-select .cds--accordion__item--active .cds--accordion__content {
4689
4689
  padding-top: 0;
4690
4690
  padding-bottom: 0;
4691
4691
  margin-top: 0.5rem;
@@ -10619,8 +10619,22 @@ button.c4p--add-select__global-filter-toggle--open {
10619
10619
  max-height: 100%;
10620
10620
  }
10621
10621
 
10622
- .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active ~ .c4p--datagrid__carbon-nested-row {
10623
- border-left: 1px solid var(--cds-button-primary, #0f62fe);
10622
+ .c4p--datagrid__carbon-row-expanded {
10623
+ position: relative;
10624
+ }
10625
+ .c4p--datagrid__carbon-row-expanded.c4p--datagrid__carbon-row-expanded-hover-active::before {
10626
+ position: absolute;
10627
+ z-index: 2;
10628
+ /* stylelint-disable-next-line carbon/layout-token-use */
10629
+ top: var(--c4p--datagrid--row-height);
10630
+ /* stylelint-disable-next-line carbon/layout-token-use */
10631
+ left: calc(
10632
+ var(--c4p--datagrid--indicator-offset-amount) + 1rem
10633
+ );
10634
+ width: 1px;
10635
+ height: var(--c4p--datagrid--indicator-height);
10636
+ border-left: 1px solid var(--cds-background-brand, #0f62fe);
10637
+ content: "";
10624
10638
  }
10625
10639
 
10626
10640
  .c4p--datagrid .cds--data-table-header {
@@ -10716,6 +10730,38 @@ button.c4p--add-select__global-filter-toggle--open {
10716
10730
  justify-content: center;
10717
10731
  }
10718
10732
 
10733
+ .cds--body--with-modal-open .c4p--datagrid__grid-container {
10734
+ overflow: hidden;
10735
+ height: 100vh;
10736
+ }
10737
+
10738
+ .c4p--datagrid .cds--modal {
10739
+ width: 100%;
10740
+ }
10741
+
10742
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger {
10743
+ flex-shrink: 0;
10744
+ background-color: var(--cds-interactive, #0f62fe);
10745
+ }
10746
+
10747
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger svg {
10748
+ fill: var(--cds-background, #ffffff);
10749
+ }
10750
+
10751
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger:hover,
10752
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open:hover,
10753
+ .cds--overflow-menu.c4p--datagrid__toolbar-menu__trigger.cds--overflow-menu--open {
10754
+ background-color: var(--cds-button-primary-hover, #0050e6);
10755
+ }
10756
+
10757
+ .c4p--datagrid__toolbar-options.cds--overflow-menu-options::after {
10758
+ background-color: transparent;
10759
+ }
10760
+
10761
+ .c4p--datagrid__mobile-toolbar-modal .cds--modal-container {
10762
+ position: absolute;
10763
+ }
10764
+
10719
10765
  /*
10720
10766
  * Licensed Materials - Property of IBM
10721
10767
  * 5724-Q36