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

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