@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.26
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +10 -4
- package/css/index-full-carbon.css +69 -97
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +9 -88
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +69 -97
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +69 -97
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelectBody.js +1 -0
- package/es/components/AddSelect/AddSelectFormControl.js +92 -0
- package/es/components/AddSelect/AddSelectList.js +26 -195
- package/es/components/AddSelect/AddSelectRow.js +220 -0
- package/es/components/AddSelect/hooks/useFocus.js +35 -0
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -65
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +112 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +29 -23
- package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/es/components/Datagrid/index.js +7 -7
- package/es/components/Datagrid/useInfiniteScroll.js +5 -1
- package/es/components/Datagrid/useOnRowClick.js +3 -3
- package/es/components/Datagrid/useSortableColumns.js +7 -5
- package/es/components/Datagrid/utils/getAutoSizedColumnWidth.js +29 -0
- package/es/components/ExampleComponent/ExampleComponent.js +39 -5
- package/es/components/ExampleComponent/useExample.js +51 -0
- package/es/components/InlineEditV1/InlineEditV1.js +15 -20
- package/es/components/InlineEditV2/InlineEditV2.js +21 -31
- package/es/components/index.js +1 -1
- package/es/global/js/package-settings.js +24 -3
- package/es/global/js/utils/story-helper.js +9 -0
- package/es/global/js/utils/test-helper.js +38 -6
- package/lib/components/AddSelect/AddSelectBody.js +1 -0
- package/lib/components/AddSelect/AddSelectFormControl.js +110 -0
- package/lib/components/AddSelect/AddSelectList.js +29 -203
- package/lib/components/AddSelect/AddSelectRow.js +247 -0
- package/lib/components/AddSelect/hooks/useFocus.js +46 -0
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +16 -69
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +5 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +132 -0
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -0
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +23 -16
- package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +1 -0
- package/lib/components/Datagrid/index.js +9 -1
- package/lib/components/Datagrid/useInfiniteScroll.js +5 -0
- package/lib/components/Datagrid/useOnRowClick.js +3 -3
- package/lib/components/Datagrid/useSortableColumns.js +7 -5
- package/lib/components/Datagrid/utils/getAutoSizedColumnWidth.js +40 -0
- package/lib/components/ExampleComponent/ExampleComponent.js +47 -4
- package/lib/components/ExampleComponent/useExample.js +63 -0
- package/lib/components/InlineEditV1/InlineEditV1.js +14 -19
- package/lib/components/InlineEditV2/InlineEditV2.js +20 -30
- package/lib/components/index.js +6 -0
- package/lib/global/js/package-settings.js +24 -3
- package/lib/global/js/utils/story-helper.js +13 -2
- package/lib/global/js/utils/test-helper.js +42 -8
- package/package.json +2 -2
- package/scss/components/AddSelect/_add-select.scss +4 -16
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +15 -2
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +18 -6
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +5 -89
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +42 -3
- package/scss/components/SidePanel/_side-panel.scss +2 -1
package/README.md
CHANGED
@@ -102,7 +102,7 @@ const App = () => {
|
|
102
102
|
};
|
103
103
|
```
|
104
104
|
|
105
|
-
### Enabling Canary components
|
105
|
+
### Enabling Canary components and flagged features
|
106
106
|
|
107
107
|
Components that have not yet completed the release review process are considered
|
108
108
|
to be canary and require the consumer to enable via a feature flag in a
|
@@ -121,14 +121,20 @@ pkg.component.SidePanel = true;
|
|
121
121
|
// Live dangerously: enable all components!
|
122
122
|
pkg.setAllComponents(true);
|
123
123
|
|
124
|
-
// Enable
|
125
|
-
pkg.
|
124
|
+
// Enable a feature flagged examples
|
125
|
+
pkg.feature.nameOfFeature = true;
|
126
|
+
pkg.feature['Component.feature'] = true;
|
126
127
|
|
127
128
|
// Live dangerously: enable all pre-release features!
|
128
129
|
pkg.setAllFeatures(true);
|
129
130
|
```
|
130
131
|
|
131
|
-
**Note:** The above settings must happen before a component first renders
|
132
|
+
**Note:** The above settings must happen before a component first renders or a
|
133
|
+
feature is first used.
|
134
|
+
|
135
|
+
**Note: 2** In the case of features implemented via hooks the feature may
|
136
|
+
function without enabling. In all cases features that disabled by default will
|
137
|
+
log in the console a warning if enabled via a feature flag or an error if not.
|
132
138
|
|
133
139
|
### Building and running locally
|
134
140
|
|
@@ -3257,7 +3257,6 @@
|
|
3257
3257
|
display: flex;
|
3258
3258
|
align-items: center;
|
3259
3259
|
justify-content: center;
|
3260
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
3261
3260
|
}
|
3262
3261
|
.c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
|
3263
3262
|
margin: 0;
|
@@ -4330,24 +4329,18 @@
|
|
4330
4329
|
border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
|
4331
4330
|
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
4332
4331
|
}
|
4333
|
-
.c4p--add-select__selections-
|
4332
|
+
.c4p--add-select__selections-form-control {
|
4334
4333
|
display: flex;
|
4335
4334
|
align-items: center;
|
4336
4335
|
}
|
4337
|
-
.c4p--add-select__selections-
|
4336
|
+
.c4p--add-select__selections-form-control-label-wrapper {
|
4338
4337
|
display: flex;
|
4339
4338
|
margin-left: 1rem;
|
4340
4339
|
}
|
4341
|
-
.c4p--add-select__selections-
|
4340
|
+
.c4p--add-select__selections-form-control-label-text {
|
4342
4341
|
display: flex;
|
4343
4342
|
flex-direction: column;
|
4344
4343
|
}
|
4345
|
-
.c4p--add-select__selections-checkbox-wrapper.cds--form-item {
|
4346
|
-
flex: 0;
|
4347
|
-
}
|
4348
|
-
.c4p--add-select__selections-checkbox-wrapper .cds--checkbox-label-text {
|
4349
|
-
display: none;
|
4350
|
-
}
|
4351
4344
|
.c4p--add-select__selections-cell-avatar {
|
4352
4345
|
margin-right: 0.5rem;
|
4353
4346
|
}
|
@@ -4453,7 +4446,7 @@
|
|
4453
4446
|
flex-grow: 1;
|
4454
4447
|
overflow-x: auto;
|
4455
4448
|
}
|
4456
|
-
.c4p--add-select__columns .c4p--add-select__selections-
|
4449
|
+
.c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
|
4457
4450
|
margin-left: 0.5rem;
|
4458
4451
|
}
|
4459
4452
|
.c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
|
@@ -4654,10 +4647,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4654
4647
|
opacity: 0;
|
4655
4648
|
}
|
4656
4649
|
|
4657
|
-
.c4p--add-select .cds--checkbox-label-text {
|
4658
|
-
padding-left: 0.5rem;
|
4659
|
-
}
|
4660
|
-
|
4661
4650
|
.c4p--add-select__multi .c4p--empty-state {
|
4662
4651
|
max-width: 16rem;
|
4663
4652
|
margin-top: 3rem;
|
@@ -9786,6 +9775,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9786
9775
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
9787
9776
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
9788
9777
|
margin-left: 1rem;
|
9778
|
+
color: var(--cds-text-primary, #161616);
|
9789
9779
|
font-family: inherit;
|
9790
9780
|
line-height: var(--c4p--inline-edit--size);
|
9791
9781
|
}
|
@@ -9853,6 +9843,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9853
9843
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
9854
9844
|
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9855
9845
|
}
|
9846
|
+
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
9847
|
+
display: flex;
|
9848
|
+
align-items: center;
|
9849
|
+
}
|
9856
9850
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
9857
9851
|
position: absolute;
|
9858
9852
|
top: 0;
|
@@ -9868,82 +9862,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9868
9862
|
}
|
9869
9863
|
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel {
|
9870
9864
|
display: inline-flex;
|
9871
|
-
height: 100%;
|
9872
|
-
min-height: initial;
|
9873
|
-
max-height: var(--c4p--inline-edit--size);
|
9874
|
-
align-items: center;
|
9875
|
-
justify-content: center;
|
9876
|
-
border: 2px solid transparent;
|
9877
|
-
}
|
9878
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:hover {
|
9879
|
-
outline: initial;
|
9880
|
-
}
|
9881
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus {
|
9882
|
-
border-color: var(--cds-focus, #0f62fe);
|
9883
|
-
box-shadow: initial;
|
9884
|
-
outline: initial;
|
9885
|
-
}
|
9886
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save:focus:active:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel:focus:active:hover {
|
9887
|
-
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
9888
|
-
}
|
9889
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save::before, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel::before {
|
9890
|
-
background-color: transparent;
|
9891
|
-
}
|
9892
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__save[disabled], .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__cancel[disabled] {
|
9893
|
-
border-color: transparent;
|
9894
9865
|
}
|
9895
9866
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9896
|
-
overflow: visible;
|
9897
9867
|
width: var(--c4p--inline-edit--edit-size);
|
9898
9868
|
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9899
9869
|
transition-property: margin, padding;
|
9900
9870
|
}
|
9901
9871
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9902
|
-
overflow: hidden;
|
9903
9872
|
width: 0;
|
9904
9873
|
padding: 0;
|
9905
9874
|
border-right: 0;
|
9906
9875
|
border-left: 0;
|
9907
9876
|
}
|
9908
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9909
|
-
margin-right: 0;
|
9910
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9911
|
-
transition-property: margin, padding;
|
9912
|
-
}
|
9913
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
9914
|
-
transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9915
|
-
}
|
9916
|
-
@media (prefers-reduced-motion: reduce) {
|
9917
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
9918
|
-
transition: none;
|
9919
|
-
}
|
9920
|
-
}
|
9921
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9922
|
-
padding-right: 0;
|
9923
|
-
padding-left: 0;
|
9924
|
-
border-right: 0;
|
9925
|
-
border-left: 0;
|
9926
|
-
margin-right: calc(-1 * var(--c4p--inline-edit--size));
|
9927
|
-
}
|
9928
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
|
9929
|
-
overflow: hidden;
|
9930
|
-
width: 0;
|
9931
|
-
}
|
9932
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
9933
|
-
display: inline-flex;
|
9934
|
-
height: 100%;
|
9935
|
-
min-height: initial;
|
9936
|
-
max-height: var(--c4p--inline-edit--size);
|
9937
|
-
align-items: center;
|
9938
|
-
justify-content: center;
|
9939
|
-
border: 2px solid transparent;
|
9940
|
-
}
|
9941
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:hover, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:active, .c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit:focus {
|
9942
|
-
border-color: transparent;
|
9943
|
-
background-color: transparent;
|
9944
|
-
box-shadow: initial;
|
9945
|
-
outline: initial;
|
9946
|
-
}
|
9947
9877
|
@media (hover: hover) {
|
9948
9878
|
.c4p--inline-edit .c4p--inline-edit__edit {
|
9949
9879
|
opacity: 0;
|
@@ -9956,15 +9886,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9956
9886
|
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
9957
9887
|
opacity: 1;
|
9958
9888
|
}
|
9959
|
-
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
9960
|
-
display: inline-flex;
|
9961
|
-
height: 100%;
|
9962
|
-
min-height: initial;
|
9963
|
-
max-height: var(--c4p--inline-edit--size);
|
9964
|
-
align-items: center;
|
9965
|
-
justify-content: center;
|
9966
|
-
border: 2px solid transparent;
|
9967
|
-
}
|
9968
9889
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
9969
9890
|
color: var(--cds-support-error, #da1e28);
|
9970
9891
|
}
|
@@ -10000,7 +9921,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10000
9921
|
visibility: hidden;
|
10001
9922
|
}
|
10002
9923
|
|
10003
|
-
.c4p--inline-edit-v2
|
9924
|
+
.c4p--inline-edit-v2--focused {
|
10004
9925
|
background: var(--cds-field-01, #f4f4f4);
|
10005
9926
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
10006
9927
|
}
|
@@ -10014,8 +9935,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10014
9935
|
}
|
10015
9936
|
|
10016
9937
|
.c4p--inline-edit-v2__warning-icon {
|
10017
|
-
|
10018
|
-
margin-right: 0.4375rem;
|
9938
|
+
margin: 0.5rem;
|
10019
9939
|
color: var(--cds-support-error, #da1e28);
|
10020
9940
|
}
|
10021
9941
|
|
@@ -10045,6 +9965,39 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10045
9965
|
outline: none;
|
10046
9966
|
}
|
10047
9967
|
|
9968
|
+
.c4p--inline-edit-v2__toolbar {
|
9969
|
+
--toolbar-width: 2rem;
|
9970
|
+
--toolbar-width-focussed: 4rem;
|
9971
|
+
display: inline-flex;
|
9972
|
+
overflow: hidden;
|
9973
|
+
width: var(--toolbar-width);
|
9974
|
+
}
|
9975
|
+
|
9976
|
+
.c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
|
9977
|
+
--toolbar-width: 2rem;
|
9978
|
+
--toolbar-width-focussed: 6rem;
|
9979
|
+
}
|
9980
|
+
|
9981
|
+
@keyframes slide-in {
|
9982
|
+
0% {
|
9983
|
+
overflow: hidden;
|
9984
|
+
width: var(--toolbar-width);
|
9985
|
+
}
|
9986
|
+
99% {
|
9987
|
+
overflow: hidden;
|
9988
|
+
width: var(--toolbar-width-focussed);
|
9989
|
+
}
|
9990
|
+
100% {
|
9991
|
+
overflow: visible;
|
9992
|
+
width: var(--toolbar-width-focussed);
|
9993
|
+
}
|
9994
|
+
}
|
9995
|
+
.c4p--inline-edit-v2--focused .c4p--inline-edit-v2__toolbar {
|
9996
|
+
overflow: initial;
|
9997
|
+
width: var(--toolbar-width-focussed);
|
9998
|
+
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
9999
|
+
}
|
10000
|
+
|
10048
10001
|
.c4p--data-spreadsheet {
|
10049
10002
|
--c4p--data-spreadsheet--total-width: 0;
|
10050
10003
|
display: inline-block;
|
@@ -11111,10 +11064,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11111
11064
|
border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
11112
11065
|
}
|
11113
11066
|
|
11114
|
-
.c4p--datagrid__customize-columns-checkbox
|
11067
|
+
.cds--form-item.cds--checkbox-wrapper.c4p--datagrid__customize-columns-checkbox {
|
11115
11068
|
display: flex;
|
11069
|
+
flex: initial;
|
11070
|
+
align-items: center;
|
11116
11071
|
justify-content: center;
|
11117
|
-
|
11072
|
+
}
|
11073
|
+
|
11074
|
+
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-visible-label {
|
11075
|
+
/* stylelint-disable-next-line */
|
11076
|
+
padding-left: 0.375rem;
|
11118
11077
|
}
|
11119
11078
|
|
11120
11079
|
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
|
@@ -11126,6 +11085,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11126
11085
|
overflow: auto;
|
11127
11086
|
}
|
11128
11087
|
|
11088
|
+
.c4p--datagrid__customize-columns-select-all {
|
11089
|
+
align-items: center;
|
11090
|
+
}
|
11091
|
+
|
11129
11092
|
.c4p--datagrid__customize-columns-select-all,
|
11130
11093
|
.c4p--datagrid__customize-columns-select-all--selected {
|
11131
11094
|
position: sticky;
|
@@ -11157,15 +11120,17 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11157
11120
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11158
11121
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11159
11122
|
*/
|
11160
|
-
.c4p--datagrid__row-size-
|
11161
|
-
padding: 1rem;
|
11123
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
|
11162
11124
|
background-color: var(--cds-layer-02, #ffffff);
|
11163
11125
|
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
11164
11126
|
}
|
11165
11127
|
|
11166
|
-
.
|
11128
|
+
.c4p--datagrid .c4p--datagrid__row-size-radio-button .cds--radio-button__label {
|
11129
|
+
color: var(--cds-text-primary, #161616);
|
11130
|
+
}
|
11131
|
+
|
11132
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip .cds--popover-caret {
|
11167
11133
|
background-color: var(--cds-layer-02, #ffffff);
|
11168
|
-
box-shadow: 1px 4px 8px -3px var(--cds-overlay, rgba(22, 22, 22, 0.5)), -1px 6px 8px -5px var(--cds-overlay, rgba(22, 22, 22, 0.5));
|
11169
11134
|
}
|
11170
11135
|
|
11171
11136
|
.c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
|
@@ -11173,6 +11138,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11173
11138
|
left: -4px;
|
11174
11139
|
}
|
11175
11140
|
|
11141
|
+
.c4p--datagrid__row-size-toggle-tip-button.cds--toggletip-button {
|
11142
|
+
display: flex;
|
11143
|
+
width: 3rem;
|
11144
|
+
height: 3rem;
|
11145
|
+
justify-content: center;
|
11146
|
+
}
|
11147
|
+
|
11176
11148
|
/*
|
11177
11149
|
* Licensed Materials - Property of IBM
|
11178
11150
|
* 5724-Q36
|