@carbon/ibm-products 1.46.1 → 1.47.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 (51) hide show
  1. package/css/index-full-carbon.css +42 -13
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +4 -1
  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 +38 -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 +42 -13
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Card/CardFooter.js +2 -2
  18. package/es/components/Datagrid/Datagrid/DatagridRow.js +37 -10
  19. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +18 -4
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +15 -2
  21. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
  22. package/es/components/Datagrid/useActionsColumn.js +22 -1
  23. package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
  24. package/es/components/Datagrid/useNestedRows.js +2 -4
  25. package/es/components/Datagrid/useSelectAllToggle.js +16 -2
  26. package/es/components/Datagrid/useSelectRows.js +17 -3
  27. package/es/components/Datagrid/useStickyColumn.js +19 -5
  28. package/es/components/Datagrid/utils/getArgTypes.js +5 -0
  29. package/es/components/SidePanel/SidePanel.js +14 -5
  30. package/lib/components/Card/CardFooter.js +2 -2
  31. package/lib/components/Datagrid/Datagrid/DatagridRow.js +37 -10
  32. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -3
  33. package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +14 -1
  34. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
  35. package/lib/components/Datagrid/useActionsColumn.js +22 -1
  36. package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
  37. package/lib/components/Datagrid/useNestedRows.js +2 -4
  38. package/lib/components/Datagrid/useSelectAllToggle.js +19 -2
  39. package/lib/components/Datagrid/useSelectRows.js +19 -2
  40. package/lib/components/Datagrid/useStickyColumn.js +18 -4
  41. package/lib/components/Datagrid/utils/getArgTypes.js +5 -0
  42. package/lib/components/SidePanel/SidePanel.js +14 -5
  43. package/package.json +5 -5
  44. package/scss/components/Datagrid/_storybook-styles.scss +26 -0
  45. package/scss/components/Datagrid/styles/_datagrid.scss +22 -3
  46. package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
  47. package/scss/components/Datagrid/styles/_useNestedRows.scss +17 -0
  48. package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +11 -8
  49. package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
  50. package/scss/components/EmptyStates/_empty-state.scss +4 -3
  51. package/scss/components/Tearsheet/_tearsheet.scss +4 -0
@@ -3058,7 +3058,7 @@ em {
3058
3058
  }
3059
3059
  }
3060
3060
 
3061
- .bx--modal-content p,
3061
+ .bx--modal-content > p,
3062
3062
  .bx--modal-content__regular-content {
3063
3063
  padding-right: 20%;
3064
3064
  font-size: var(--cds-body-long-01-font-size, 0.875rem);
@@ -3100,7 +3100,7 @@ em {
3100
3100
  .bx--modal-container--xs .bx--modal-content__regular-content {
3101
3101
  padding-right: var(--cds-spacing-05, 1rem);
3102
3102
  }
3103
- .bx--modal-container--xs .bx--modal-content p {
3103
+ .bx--modal-container--xs .bx--modal-content > p {
3104
3104
  padding-right: 0;
3105
3105
  }
3106
3106
  @media (min-width: 42rem) {
@@ -3123,7 +3123,7 @@ em {
3123
3123
  .bx--modal-container--sm .bx--modal-content__regular-content {
3124
3124
  padding-right: var(--cds-spacing-05, 1rem);
3125
3125
  }
3126
- .bx--modal-container--sm .bx--modal-content p {
3126
+ .bx--modal-container--sm .bx--modal-content > p {
3127
3127
  padding-right: 0;
3128
3128
  }
3129
3129
  @media (min-width: 42rem) {
@@ -3136,7 +3136,7 @@ em {
3136
3136
  width: 42%;
3137
3137
  max-height: 72%;
3138
3138
  }
3139
- .bx--modal-container--sm .bx--modal-content p,
3139
+ .bx--modal-container--sm .bx--modal-content > p,
3140
3140
  .bx--modal-container--sm .bx--modal-content__regular-content {
3141
3141
  padding-right: 20%;
3142
3142
  }
@@ -12366,6 +12366,9 @@ a.bx--side-nav__link--current::before {
12366
12366
  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
12367
12367
  margin: 0;
12368
12368
  }
12369
+ .c4p--tearsheet.c4p--tearsheet--narrow .c4p--tearsheet__header-description {
12370
+ max-width: 80%;
12371
+ }
12369
12372
  .c4p--tearsheet.c4p--tearsheet--wide .c4p--tearsheet__header--with-close-icon {
12370
12373
  padding-right: var(--cds-spacing-10, 4rem);
12371
12374
  }
@@ -12801,7 +12804,7 @@ a.bx--side-nav__link--current::before {
12801
12804
  font-weight: var(--cds-productive-heading-03-font-weight, 400);
12802
12805
  line-height: var(--cds-productive-heading-03-line-height, 1.4);
12803
12806
  letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
12804
- padding-bottom: calc(var(--cds-spacing-01, 0.125rem) + var(--cds-spacing-02, 0.25rem));
12807
+ padding-bottom: var(--cds-spacing-03, 0.5rem);
12805
12808
  margin: 0;
12806
12809
  }
12807
12810
  .c4p--empty-state .c4p--empty-state__subtitle {
@@ -21196,7 +21199,9 @@ button.c4p--add-select__global-filter-toggle--open {
21196
21199
  .c4p--datagrid__grid-container td.bx--table-column-checkbox,
21197
21200
  .c4p--datagrid__grid-container th.bx--table-column-checkbox {
21198
21201
  /* stylelint-disable-next-line declaration-no-important */
21199
- padding-right: var(--cds-spacing-06, 1.5rem) !important;
21202
+ width: var(--cds-spacing-09, 3rem) !important;
21203
+ /* stylelint-disable-next-line declaration-no-important */
21204
+ padding-right: var(--cds-spacing-05, 1rem) !important;
21200
21205
  }
21201
21206
 
21202
21207
  .c4p--datagrid__empty-state .c4p--datagrid__table-simple {
@@ -21260,7 +21265,7 @@ button.c4p--add-select__global-filter-toggle--open {
21260
21265
  }
21261
21266
 
21262
21267
  .c4p--datagrid__head-hidden-select-all {
21263
- padding-right: var(--cds-spacing-08, 2.5rem);
21268
+ padding-right: var(--cds-spacing-09, 3rem);
21264
21269
  }
21265
21270
  .c4p--datagrid__head-hidden-select-all.c4p--datagrid__select-all-sticky-left {
21266
21271
  position: sticky;
@@ -21301,6 +21306,13 @@ button.c4p--add-select__global-filter-toggle--open {
21301
21306
  width: 100% !important;
21302
21307
  }
21303
21308
 
21309
+ .c4p--datagrid__sticky thead {
21310
+ display: flex;
21311
+ }
21312
+ .c4p--datagrid__sticky thead tr.c4p--datagrid__sticky {
21313
+ width: auto;
21314
+ }
21315
+
21304
21316
  .block-class__displayFlex {
21305
21317
  position: relative;
21306
21318
  display: flex;
@@ -21364,7 +21376,7 @@ button.c4p--add-select__global-filter-toggle--open {
21364
21376
  );
21365
21377
  width: 1px;
21366
21378
  height: var(--c4p--datagrid--indicator-height);
21367
- border-left: 1px solid var(--cds-interactive-01, #0f62fe);
21379
+ border-left: 1px solid var(--cds-active-ui, #c6c6c6);
21368
21380
  content: "";
21369
21381
  }
21370
21382
 
@@ -21554,6 +21566,19 @@ button.c4p--add-select__global-filter-toggle--open {
21554
21566
  content: "";
21555
21567
  }
21556
21568
 
21569
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row td:first-child:empty,
21570
+ .c4p--datagrid tr.c4p--datagrid__carbon-nested-row .c4p--datagrid__expandable-row-cell {
21571
+ border-bottom: none;
21572
+ }
21573
+
21574
+ .bx--data-table td.c4p--datagrid__expandable-row-cell {
21575
+ padding-left: var(--cds-spacing-03, 0.5rem);
21576
+ }
21577
+
21578
+ .c4p--datagrid__carbon-row-expanded .c4p--datagrid__expandable-row-cell {
21579
+ border-bottom: none;
21580
+ }
21581
+
21557
21582
  /*
21558
21583
  * Licensed Materials - Property of IBM
21559
21584
  * 5724-Q36
@@ -21695,7 +21720,7 @@ button.c4p--add-select__global-filter-toggle--open {
21695
21720
  right: 0;
21696
21721
  display: flex;
21697
21722
  align-items: center;
21698
- border-left: 1px solid var(--cds-ui-03, #e0e0e0);
21723
+ border-left: 1px solid var(--cds-active-light-ui, #c6c6c6);
21699
21724
  }
21700
21725
 
21701
21726
  .c4p--datagrid__right-sticky-column-header {
@@ -21710,7 +21735,7 @@ button.c4p--add-select__global-filter-toggle--open {
21710
21735
  left: 0;
21711
21736
  display: flex;
21712
21737
  align-items: center;
21713
- border-right: 1px solid var(--cds-ui-03, #e0e0e0);
21738
+ border-right: 1px solid var(--cds-active-light-ui, #c6c6c6);
21714
21739
  }
21715
21740
 
21716
21741
  .c4p--datagrid__left-sticky-column-header {
@@ -21722,7 +21747,7 @@ button.c4p--add-select__global-filter-toggle--open {
21722
21747
 
21723
21748
  .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
21724
21749
  .c4p--datagrid__left-sticky-column-header.c4p--datagrid__left-sticky-column-header--with-extra-select-column {
21725
- left: var(--cds-spacing-08, 2.5rem);
21750
+ left: var(--cds-spacing-09, 3rem);
21726
21751
  }
21727
21752
 
21728
21753
  .c4p--datagrid__sticky-noShadow {
@@ -22046,8 +22071,8 @@ button.c4p--add-select__global-filter-toggle--open {
22046
22071
  * US Government Users Restricted Rights - Use, duplication or disclosure
22047
22072
  * restricted by GSA ADP Schedule Contract with IBM Corp.
22048
22073
  */
22049
- th.c4p--datagrid__select-all-toggle-on,
22050
- td.c4p--datagrid__select-all-toggle-on {
22074
+ .c4p--datagrid__grid-container th.c4p--datagrid__select-all-toggle-on,
22075
+ .c4p--datagrid__grid-container td.c4p--datagrid__select-all-toggle-on {
22051
22076
  /* stylelint-disable-next-line declaration-no-important */
22052
22077
  width: 4.5rem !important;
22053
22078
  /* stylelint-disable-next-line declaration-no-important */
@@ -22549,6 +22574,10 @@ th.c4p--datagrid__select-all-toggle-on.button {
22549
22574
  outline-color: var(--cds-support-01, #da1e28);
22550
22575
  }
22551
22576
 
22577
+ .c4p--datagrid .bx--text-input:focus {
22578
+ background: var(--cds-field-01, #f4f4f4);
22579
+ }
22580
+
22552
22581
  .c4p--datagrid .c4p--datagrid__inline-edit--outer-cell-button--invalid .bx--number input[type=number][data-invalid]:focus ~ .bx--number__controls .bx--number__control-btn.up-icon::after {
22553
22582
  background-color: var(--cds-support-01, #da1e28);
22554
22583
  }