@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. package/css/index-full-carbon.css +29 -74
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -0
  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 +29 -74
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +28 -74
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/AddSelect/AddSelectBody.js +1 -1
  18. package/es/components/AddSelect/hooks/usePath.js +8 -1
  19. package/es/components/CreateFullPage/CreateFullPage.js +9 -2
  20. package/es/components/CreateTearsheet/CreateTearsheet.js +9 -2
  21. package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  22. package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -3
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
  24. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -13
  25. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +28 -27
  26. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +31 -31
  27. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
  28. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
  29. package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +8 -4
  30. package/es/components/Datagrid/useCustomizeColumns.js +8 -8
  31. package/es/components/Datagrid/utils/getInlineEditColumns.js +1 -0
  32. package/es/components/Datagrid/utils/makeData.js +1 -1
  33. package/es/components/index.js +1 -1
  34. package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
  35. package/lib/components/AddSelect/AddSelectBody.js +1 -1
  36. package/lib/components/AddSelect/hooks/usePath.js +7 -0
  37. package/lib/components/CreateFullPage/CreateFullPage.js +9 -2
  38. package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -2
  39. package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
  40. package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -3
  41. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
  42. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +6 -6
  43. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +30 -28
  44. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +27 -25
  45. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +31 -36
  46. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
  47. package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +8 -4
  48. package/lib/components/Datagrid/useCustomizeColumns.js +7 -7
  49. package/lib/components/Datagrid/utils/getInlineEditColumns.js +1 -0
  50. package/lib/components/Datagrid/utils/makeData.js +1 -1
  51. package/lib/components/index.js +6 -0
  52. package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
  53. package/package.json +2 -2
  54. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  55. package/scss/components/Datagrid/styles/_draggableElement.scss +9 -8
  56. package/scss/components/Datagrid/styles/_index.scss +7 -8
  57. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +65 -0
  58. package/scss/components/Tearsheet/_tearsheet.scss +2 -0
  59. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
  60. package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -93
@@ -3620,6 +3620,7 @@
3620
3620
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
3621
3621
  -webkit-box-orient: vertical;
3622
3622
  -webkit-line-clamp: 2;
3623
+ word-break: break-all;
3623
3624
  }
3624
3625
  @media (min-width: 42rem) {
3625
3626
  .c4p--tearsheet .c4p--tearsheet__header-description {
@@ -10740,6 +10741,11 @@ button.c4p--add-select__global-filter-toggle--open {
10740
10741
  justify-content: center;
10741
10742
  }
10742
10743
 
10744
+ .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
10745
+ flex: 0 0 auto;
10746
+ margin-right: 0.5rem;
10747
+ }
10748
+
10743
10749
  .c4p--datagrid__virtual-scrollbar::-webkit-scrollbar {
10744
10750
  width: 10px;
10745
10751
  height: 7px;
@@ -11043,55 +11049,22 @@ button.c4p--add-select__global-filter-toggle--open {
11043
11049
  fill: var(--cds-layer-selected-disabled, #8d8d8d);
11044
11050
  }
11045
11051
 
11046
- /*
11047
- * Licensed Materials - Property of IBM
11048
- * 5724-Q36
11049
- * (c) Copyright IBM Corp. 2021, 2022
11050
- * US Government Users Restricted Rights - Use, duplication or disclosure
11051
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11052
- */
11053
- .c4p--datagrid__customize-columns-modal .cds--modal-content {
11054
- position: inherit;
11052
+ .c4p--datagrid__customize-columns-tearsheet .c4p--tearsheet__content {
11055
11053
  display: flex;
11056
11054
  flex-flow: column;
11057
- padding: 0;
11058
- margin: 0;
11059
11055
  }
11060
11056
 
11061
- .c4p--datagrid__customize-columns-checkbox-wrapper {
11062
- margin-bottom: 0;
11057
+ .c4p--datagrid__customize-columns-tearsheet--actions input[role=searchbox] {
11058
+ height: 3rem;
11059
+ padding-left: 3rem;
11060
+ border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
11063
11061
  }
11064
11062
 
11065
11063
  .c4p--datagrid__customize-columns-checkbox-wrapper {
11066
11064
  display: flex;
11067
11065
  justify-content: center;
11068
- }
11069
-
11070
- .c4p--datagrid__customize-columns-modal--actions {
11071
- display: flex;
11072
- height: 3rem;
11073
- flex-flow: row;
11074
- background-color: var(--cds-field-02, #ffffff);
11075
- }
11076
-
11077
- .c4p--datagrid__customize-columns-modal--actions input[role=searchbox] {
11078
- height: 3rem;
11079
- padding-left: 2.5rem;
11080
- border-bottom: none;
11081
- }
11082
-
11083
- .c4p--datagrid__customize-columns-modal--actions > button {
11084
- margin-left: 1rem;
11085
- }
11086
-
11087
- .c4p--datagrid__customize-columns-instructions {
11088
- padding-left: 1rem;
11089
- margin-bottom: 1.5rem;
11090
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
11091
- font-weight: var(--cds-body-long-01-font-weight, 400);
11092
- line-height: var(--cds-body-long-01-line-height, 1.42857);
11093
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
11094
- color: var(--cds-text-primary, #161616);
11066
+ padding-left: 0.5rem;
11067
+ margin-bottom: 0;
11095
11068
  }
11096
11069
 
11097
11070
  .c4p--datagrid__customize-columns-column-list {
@@ -11099,34 +11072,28 @@ button.c4p--add-select__global-filter-toggle--open {
11099
11072
  overflow: auto;
11100
11073
  }
11101
11074
 
11102
- .c4p--datagrid__customize-columns-select-all {
11075
+ .c4p--datagrid__customize-columns-select-all,
11076
+ .c4p--datagrid__customize-columns-select-all--selected {
11077
+ position: sticky;
11078
+ z-index: 1;
11079
+ top: 0;
11103
11080
  display: flex;
11104
11081
  height: 3rem;
11105
- align-items: center;
11106
11082
  padding-left: 2.5rem;
11107
11083
  border-bottom: 1px solid var(--cds-layer-active);
11108
- background-color: var(--cds-layer-01, #f4f4f4);
11109
- }
11110
-
11111
- .c4p--datagrid__customize-columns-select-all:hover {
11112
- background-color: var(--cds-layer-hover-01, #e8e8e8);
11084
+ background-color: var(--cds-layer);
11113
11085
  }
11114
-
11115
- .c4p--datagrid__customize-columns-select-all-selected {
11116
- display: flex;
11117
- height: 3rem;
11118
- align-items: center;
11119
- padding-left: 2.5rem;
11120
- border-bottom: 1px solid var(--cds-layer-active);
11121
- background-color: var(--cds-layer-selected-01, #e0e0e0);
11086
+ .c4p--datagrid__customize-columns-select-all .cds--checkbox-label-text,
11087
+ .c4p--datagrid__customize-columns-select-all--selected .cds--checkbox-label-text {
11088
+ font-weight: 600;
11122
11089
  }
11123
11090
 
11124
- .c4p--datagrid__customize-columns-select-all-selected:hover {
11125
- background-color: var(--cds-background-selected-hover, rgba(141, 141, 141, 0.32));
11091
+ .c4p--datagrid__customize-columns-select-all:hover {
11092
+ background-color: var(--cds-layer-hover);
11126
11093
  }
11127
11094
 
11128
- .c4p--datagrid .c4p--datagrid__customize-columns-modal .cds--modal-content {
11129
- margin-bottom: 0;
11095
+ .c4p--datagrid__customize-columns-select-all--selected {
11096
+ background-color: var(--cds-layer-selected);
11130
11097
  }
11131
11098
 
11132
11099
  /*
@@ -11304,13 +11271,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
11304
11271
  fill: var(--cds-layer-selected-inverse, #161616);
11305
11272
  }
11306
11273
 
11307
- /*
11308
- * Licensed Materials - Property of IBM
11309
- * 5724-Q36
11310
- * (c) Copyright IBM Corp. 2022
11311
- * US Government Users Restricted Rights - Use, duplication or disclosure
11312
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11313
- */
11314
11274
  .c4p--datagrid__draggable-handleStyle {
11315
11275
  display: flex;
11316
11276
  align-items: center;
@@ -11322,7 +11282,7 @@ th.c4p--datagrid__select-all-toggle-on.button {
11322
11282
  pointer-events: none;
11323
11283
  }
11324
11284
 
11325
- svg.c4p--datagrid__draggable-handleStyle.disable {
11285
+ .c4p--datagrid__draggable-handleStyle.disabled svg {
11326
11286
  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
11327
11287
  }
11328
11288
 
@@ -11358,6 +11318,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11358
11318
  .c4p--datagrid__draggable-handleHolder-droppable {
11359
11319
  display: flex;
11360
11320
  width: 100%;
11321
+ align-items: center;
11361
11322
  }
11362
11323
 
11363
11324
  .c4p--datagrid__draggable-handleHolder-grabbed {
@@ -11736,13 +11697,6 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
11736
11697
  background-color: var(--cds-support-error, #da1e28);
11737
11698
  }
11738
11699
 
11739
- /*
11740
- * Licensed Materials - Property of IBM
11741
- * 5724-Q36
11742
- * (c) Copyright IBM Corp. 2020, 2021
11743
- * US Government Users Restricted Rights - Use, duplication or disclosure
11744
- * restricted by GSA ADP Schedule Contract with IBM Corp.
11745
- */
11746
11700
  /* stylelint-disable max-nesting-depth */
11747
11701
  .c4p--datagrid__datagridWrap {
11748
11702
  display: block;
@@ -14009,6 +13963,7 @@ a.cds--side-nav__link--current::before {
14009
13963
  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
14010
13964
  -webkit-box-orient: vertical;
14011
13965
  -webkit-line-clamp: 2;
13966
+ word-break: break-all;
14012
13967
  }
14013
13968
 
14014
13969
  @media (min-width: 42rem) {