@carbon/ibm-products 2.0.0-rc.24 → 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 +87 -123
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +18 -109
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +87 -123
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +87 -123
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- 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/CreateFullPage/CreateFullPageStep.js +16 -9
- package/es/components/CreateTearsheet/CreateTearsheetStep.js +8 -8
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +11 -17
- package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +9 -13
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +15 -4
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +15 -60
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +6 -8
- 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 +19 -9
- 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/SidePanel/SidePanel.js +3 -5
- 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/CreateFullPage/CreateFullPageStep.js +14 -7
- package/lib/components/CreateTearsheet/CreateTearsheetStep.js +7 -7
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +10 -16
- package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js +9 -13
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +15 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +16 -64
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +6 -8
- 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 +19 -9
- 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/SidePanel/SidePanel.js +2 -4
- 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/CreateFullPage/_create-full-page.scss +5 -10
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +8 -3
- package/scss/components/Datagrid/styles/_datagrid.scss +4 -0
- package/scss/components/Datagrid/styles/_useSortableColumns.scss +6 -3
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +15 -2
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +18 -6
- package/scss/components/EmptyStates/_empty-state.scss +2 -2
- 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 +7 -15
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
|
|
@@ -2730,8 +2730,6 @@
|
|
2730
2730
|
font-weight: var(--cds-productive-heading-01-font-weight, 600);
|
2731
2731
|
line-height: var(--cds-productive-heading-01-line-height, 1.28572);
|
2732
2732
|
letter-spacing: var(--cds-productive-heading-01-letter-spacing, 0.16px);
|
2733
|
-
max-width: 50%;
|
2734
|
-
padding-left: 2.5rem;
|
2735
2733
|
margin-bottom: 0.5rem;
|
2736
2734
|
}
|
2737
2735
|
|
@@ -2740,8 +2738,6 @@
|
|
2740
2738
|
font-weight: var(--cds-body-long-01-font-weight, 400);
|
2741
2739
|
line-height: var(--cds-body-long-01-line-height, 1.42857);
|
2742
2740
|
letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
|
2743
|
-
max-width: 50%;
|
2744
|
-
padding-left: 2.5rem;
|
2745
2741
|
margin-bottom: 1.5rem;
|
2746
2742
|
}
|
2747
2743
|
|
@@ -2796,7 +2792,8 @@
|
|
2796
2792
|
position: relative;
|
2797
2793
|
padding-bottom: 2rem;
|
2798
2794
|
}
|
2799
|
-
|
2795
|
+
|
2796
|
+
.c4p--create-full-page__step .cds--css-grid {
|
2800
2797
|
margin-left: 0;
|
2801
2798
|
}
|
2802
2799
|
|
@@ -2833,8 +2830,6 @@
|
|
2833
2830
|
font-weight: var(--cds-productive-heading-04-font-weight, 400);
|
2834
2831
|
line-height: var(--cds-productive-heading-04-line-height, 1.28572);
|
2835
2832
|
letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
|
2836
|
-
max-width: 50%;
|
2837
|
-
padding-left: 2.5rem;
|
2838
2833
|
margin-bottom: 1rem;
|
2839
2834
|
}
|
2840
2835
|
|
@@ -3239,17 +3234,7 @@
|
|
3239
3234
|
background-color: var(--cds-layer-01, #f4f4f4);
|
3240
3235
|
transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
3241
3236
|
}
|
3242
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar
|
3243
|
-
min-width: 2rem;
|
3244
|
-
}
|
3245
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button {
|
3246
|
-
padding: 0;
|
3247
|
-
color: var(--cds-text-primary, #161616);
|
3248
|
-
}
|
3249
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-icon-only-button svg {
|
3250
|
-
margin-left: 0.5rem;
|
3251
|
-
}
|
3252
|
-
.c4p--side-panel__container .c4p--side-panel__action-toolbar .c4p--side-panel__action-toolbar-button.c4p--side-panel__action-toolbar-leading-button {
|
3237
|
+
.c4p--side-panel__container .c4p--side-panel__action-toolbar-leading-button {
|
3253
3238
|
margin-right: 0.5rem;
|
3254
3239
|
}
|
3255
3240
|
.c4p--side-panel__container .cds--btn.c4p--side-panel__navigation-back-button {
|
@@ -3272,7 +3257,6 @@
|
|
3272
3257
|
display: flex;
|
3273
3258
|
align-items: center;
|
3274
3259
|
justify-content: center;
|
3275
|
-
background-color: var(--cds-layer-01, #f4f4f4);
|
3276
3260
|
}
|
3277
3261
|
.c4p--side-panel__container .cds--btn.c4p--side-panel__close-button .cds--btn__icon {
|
3278
3262
|
margin: 0;
|
@@ -3738,6 +3722,9 @@
|
|
3738
3722
|
}
|
3739
3723
|
}
|
3740
3724
|
.c4p--tearsheet-create .c4p--tearsheet-create__step__step--visible-step {
|
3725
|
+
padding-right: 0.5rem;
|
3726
|
+
padding-left: 0.5rem;
|
3727
|
+
margin-left: 0;
|
3741
3728
|
animation: step-content-entrance 400ms;
|
3742
3729
|
animation-fill-mode: forwards;
|
3743
3730
|
animation-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
|
@@ -3749,7 +3736,6 @@
|
|
3749
3736
|
}
|
3750
3737
|
|
3751
3738
|
.c4p--tearsheet-create__step .cds--css-grid {
|
3752
|
-
padding-left: 0;
|
3753
3739
|
margin-left: 0;
|
3754
3740
|
}
|
3755
3741
|
|
@@ -3772,7 +3758,8 @@
|
|
3772
3758
|
}
|
3773
3759
|
.c4p--tearsheet-create .c4p--tearsheet-create__content {
|
3774
3760
|
height: 100%;
|
3775
|
-
padding: 1.5rem;
|
3761
|
+
padding-top: 1.5rem;
|
3762
|
+
padding-bottom: 1.5rem;
|
3776
3763
|
overflow-x: hidden;
|
3777
3764
|
}
|
3778
3765
|
|
@@ -3888,7 +3875,7 @@
|
|
3888
3875
|
font-weight: var(--cds-heading-03-font-weight, 400);
|
3889
3876
|
line-height: var(--cds-heading-03-line-height, 1.4);
|
3890
3877
|
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
3891
|
-
padding-bottom: 0.
|
3878
|
+
padding-bottom: 0.5rem;
|
3892
3879
|
margin: 0;
|
3893
3880
|
}
|
3894
3881
|
.c4p--empty-state .c4p--empty-state__subtitle {
|
@@ -4342,24 +4329,18 @@
|
|
4342
4329
|
border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
|
4343
4330
|
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
4344
4331
|
}
|
4345
|
-
.c4p--add-select__selections-
|
4332
|
+
.c4p--add-select__selections-form-control {
|
4346
4333
|
display: flex;
|
4347
4334
|
align-items: center;
|
4348
4335
|
}
|
4349
|
-
.c4p--add-select__selections-
|
4336
|
+
.c4p--add-select__selections-form-control-label-wrapper {
|
4350
4337
|
display: flex;
|
4351
4338
|
margin-left: 1rem;
|
4352
4339
|
}
|
4353
|
-
.c4p--add-select__selections-
|
4340
|
+
.c4p--add-select__selections-form-control-label-text {
|
4354
4341
|
display: flex;
|
4355
4342
|
flex-direction: column;
|
4356
4343
|
}
|
4357
|
-
.c4p--add-select__selections-checkbox-wrapper.cds--form-item {
|
4358
|
-
flex: 0;
|
4359
|
-
}
|
4360
|
-
.c4p--add-select__selections-checkbox-wrapper .cds--checkbox-label-text {
|
4361
|
-
display: none;
|
4362
|
-
}
|
4363
4344
|
.c4p--add-select__selections-cell-avatar {
|
4364
4345
|
margin-right: 0.5rem;
|
4365
4346
|
}
|
@@ -4465,7 +4446,7 @@
|
|
4465
4446
|
flex-grow: 1;
|
4466
4447
|
overflow-x: auto;
|
4467
4448
|
}
|
4468
|
-
.c4p--add-select__columns .c4p--add-select__selections-
|
4449
|
+
.c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
|
4469
4450
|
margin-left: 0.5rem;
|
4470
4451
|
}
|
4471
4452
|
.c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
|
@@ -4666,10 +4647,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4666
4647
|
opacity: 0;
|
4667
4648
|
}
|
4668
4649
|
|
4669
|
-
.c4p--add-select .cds--checkbox-label-text {
|
4670
|
-
padding-left: 0.5rem;
|
4671
|
-
}
|
4672
|
-
|
4673
4650
|
.c4p--add-select__multi .c4p--empty-state {
|
4674
4651
|
max-width: 16rem;
|
4675
4652
|
margin-top: 3rem;
|
@@ -9798,6 +9775,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9798
9775
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
9799
9776
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
9800
9777
|
margin-left: 1rem;
|
9778
|
+
color: var(--cds-text-primary, #161616);
|
9801
9779
|
font-family: inherit;
|
9802
9780
|
line-height: var(--c4p--inline-edit--size);
|
9803
9781
|
}
|
@@ -9865,6 +9843,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9865
9843
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
9866
9844
|
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9867
9845
|
}
|
9846
|
+
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
9847
|
+
display: flex;
|
9848
|
+
align-items: center;
|
9849
|
+
}
|
9868
9850
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
9869
9851
|
position: absolute;
|
9870
9852
|
top: 0;
|
@@ -9880,82 +9862,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9880
9862
|
}
|
9881
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 {
|
9882
9864
|
display: inline-flex;
|
9883
|
-
height: 100%;
|
9884
|
-
min-height: initial;
|
9885
|
-
max-height: var(--c4p--inline-edit--size);
|
9886
|
-
align-items: center;
|
9887
|
-
justify-content: center;
|
9888
|
-
border: 2px solid transparent;
|
9889
|
-
}
|
9890
|
-
.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 {
|
9891
|
-
outline: initial;
|
9892
|
-
}
|
9893
|
-
.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 {
|
9894
|
-
border-color: var(--cds-focus, #0f62fe);
|
9895
|
-
box-shadow: initial;
|
9896
|
-
outline: initial;
|
9897
|
-
}
|
9898
|
-
.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 {
|
9899
|
-
box-shadow: inset 0 0 0 1px var(--cds-field-01, #f4f4f4);
|
9900
|
-
}
|
9901
|
-
.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 {
|
9902
|
-
background-color: transparent;
|
9903
|
-
}
|
9904
|
-
.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] {
|
9905
|
-
border-color: transparent;
|
9906
9865
|
}
|
9907
9866
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9908
|
-
overflow: visible;
|
9909
9867
|
width: var(--c4p--inline-edit--edit-size);
|
9910
9868
|
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9911
9869
|
transition-property: margin, padding;
|
9912
9870
|
}
|
9913
9871
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9914
|
-
overflow: hidden;
|
9915
9872
|
width: 0;
|
9916
9873
|
padding: 0;
|
9917
9874
|
border-right: 0;
|
9918
9875
|
border-left: 0;
|
9919
9876
|
}
|
9920
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9921
|
-
margin-right: 0;
|
9922
|
-
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9923
|
-
transition-property: margin, padding;
|
9924
|
-
}
|
9925
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
9926
|
-
transition: width 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9927
|
-
}
|
9928
|
-
@media (prefers-reduced-motion: reduce) {
|
9929
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save svg {
|
9930
|
-
transition: none;
|
9931
|
-
}
|
9932
|
-
}
|
9933
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save {
|
9934
|
-
padding-right: 0;
|
9935
|
-
padding-left: 0;
|
9936
|
-
border-right: 0;
|
9937
|
-
border-left: 0;
|
9938
|
-
margin-right: calc(-1 * var(--c4p--inline-edit--size));
|
9939
|
-
}
|
9940
|
-
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation:not(.c4p--inline-edit__toolbar--saveable) .c4p--inline-edit__save svg {
|
9941
|
-
overflow: hidden;
|
9942
|
-
width: 0;
|
9943
|
-
}
|
9944
|
-
.c4p--inline-edit.c4p--inline-edit.c4p--inline-edit .c4p--inline-edit__edit {
|
9945
|
-
display: inline-flex;
|
9946
|
-
height: 100%;
|
9947
|
-
min-height: initial;
|
9948
|
-
max-height: var(--c4p--inline-edit--size);
|
9949
|
-
align-items: center;
|
9950
|
-
justify-content: center;
|
9951
|
-
border: 2px solid transparent;
|
9952
|
-
}
|
9953
|
-
.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 {
|
9954
|
-
border-color: transparent;
|
9955
|
-
background-color: transparent;
|
9956
|
-
box-shadow: initial;
|
9957
|
-
outline: initial;
|
9958
|
-
}
|
9959
9877
|
@media (hover: hover) {
|
9960
9878
|
.c4p--inline-edit .c4p--inline-edit__edit {
|
9961
9879
|
opacity: 0;
|
@@ -9968,15 +9886,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9968
9886
|
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
9969
9887
|
opacity: 1;
|
9970
9888
|
}
|
9971
|
-
.c4p--inline-edit .c4p--inline-edit__validation-icon {
|
9972
|
-
display: inline-flex;
|
9973
|
-
height: 100%;
|
9974
|
-
min-height: initial;
|
9975
|
-
max-height: var(--c4p--inline-edit--size);
|
9976
|
-
align-items: center;
|
9977
|
-
justify-content: center;
|
9978
|
-
border: 2px solid transparent;
|
9979
|
-
}
|
9980
9889
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
9981
9890
|
color: var(--cds-support-error, #da1e28);
|
9982
9891
|
}
|
@@ -10012,7 +9921,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10012
9921
|
visibility: hidden;
|
10013
9922
|
}
|
10014
9923
|
|
10015
|
-
.c4p--inline-edit-v2
|
9924
|
+
.c4p--inline-edit-v2--focused {
|
10016
9925
|
background: var(--cds-field-01, #f4f4f4);
|
10017
9926
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
10018
9927
|
}
|
@@ -10026,8 +9935,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10026
9935
|
}
|
10027
9936
|
|
10028
9937
|
.c4p--inline-edit-v2__warning-icon {
|
10029
|
-
|
10030
|
-
margin-right: 0.4375rem;
|
9938
|
+
margin: 0.5rem;
|
10031
9939
|
color: var(--cds-support-error, #da1e28);
|
10032
9940
|
}
|
10033
9941
|
|
@@ -10057,6 +9965,39 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10057
9965
|
outline: none;
|
10058
9966
|
}
|
10059
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
|
+
|
10060
10001
|
.c4p--data-spreadsheet {
|
10061
10002
|
--c4p--data-spreadsheet--total-width: 0;
|
10062
10003
|
display: inline-block;
|
@@ -10835,6 +10776,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10835
10776
|
padding: 0 0.5rem;
|
10836
10777
|
}
|
10837
10778
|
|
10779
|
+
.c4p--datagrid .c4p--datagrid__head-wrap {
|
10780
|
+
background-color: var(--cds-layer-accent);
|
10781
|
+
}
|
10782
|
+
|
10838
10783
|
/*
|
10839
10784
|
* Licensed Materials - Property of IBM
|
10840
10785
|
* 5724-Q36
|
@@ -10930,7 +10875,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10930
10875
|
}
|
10931
10876
|
.c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:focus,
|
10932
10877
|
.c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort:active,
|
10933
|
-
.c4p--datagrid__sortableColumn .cds--table-header-label button:focus
|
10878
|
+
.c4p--datagrid__sortableColumn .cds--table-header-label button:focus .c4p--datagrid__sortable-icon {
|
10934
10879
|
/* stylelint-disable-next-line declaration-no-important */
|
10935
10880
|
background: none !important;
|
10936
10881
|
/* stylelint-disable-next-line declaration-no-important */
|
@@ -10951,7 +10896,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10951
10896
|
color: var(--cds-text-primary, #161616) !important;
|
10952
10897
|
font: inherit;
|
10953
10898
|
}
|
10954
|
-
.c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort
|
10899
|
+
.c4p--datagrid__sortableColumn .cds--table-header-label .cds--table-sort .c4p--datagrid__sortable-icon {
|
10955
10900
|
fill: var(--cds-text-primary, #161616);
|
10956
10901
|
opacity: 0;
|
10957
10902
|
visibility: hidden;
|
@@ -10961,9 +10906,9 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10961
10906
|
margin: 0 calc(-1 * 1rem);
|
10962
10907
|
}
|
10963
10908
|
|
10964
|
-
.c4p--datagrid__sortableColumn:hover .cds--table-header-label
|
10965
|
-
.c4p--datagrid__sortableColumn:focus-within .cds--table-header-label
|
10966
|
-
.c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label
|
10909
|
+
.c4p--datagrid__sortableColumn:hover .cds--table-header-label .c4p--datagrid__sortable-icon,
|
10910
|
+
.c4p--datagrid__sortableColumn:focus-within .cds--table-header-label .c4p--datagrid__sortable-icon,
|
10911
|
+
.c4p--datagrid__sortableColumn.c4p--datagrid__isSorted .cds--table-header-label .c4p--datagrid__sortable-icon {
|
10967
10912
|
opacity: 1;
|
10968
10913
|
visibility: visible;
|
10969
10914
|
}
|
@@ -11119,10 +11064,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11119
11064
|
border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
11120
11065
|
}
|
11121
11066
|
|
11122
|
-
.c4p--datagrid__customize-columns-checkbox
|
11067
|
+
.cds--form-item.cds--checkbox-wrapper.c4p--datagrid__customize-columns-checkbox {
|
11123
11068
|
display: flex;
|
11069
|
+
flex: initial;
|
11070
|
+
align-items: center;
|
11124
11071
|
justify-content: center;
|
11125
|
-
|
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;
|
11126
11077
|
}
|
11127
11078
|
|
11128
11079
|
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
|
@@ -11134,6 +11085,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11134
11085
|
overflow: auto;
|
11135
11086
|
}
|
11136
11087
|
|
11088
|
+
.c4p--datagrid__customize-columns-select-all {
|
11089
|
+
align-items: center;
|
11090
|
+
}
|
11091
|
+
|
11137
11092
|
.c4p--datagrid__customize-columns-select-all,
|
11138
11093
|
.c4p--datagrid__customize-columns-select-all--selected {
|
11139
11094
|
position: sticky;
|
@@ -11165,15 +11120,17 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11165
11120
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11166
11121
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11167
11122
|
*/
|
11168
|
-
.c4p--datagrid__row-size-
|
11169
|
-
padding: 1rem;
|
11123
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
|
11170
11124
|
background-color: var(--cds-layer-02, #ffffff);
|
11171
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));
|
11172
11126
|
}
|
11173
11127
|
|
11174
|
-
.
|
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 {
|
11175
11133
|
background-color: var(--cds-layer-02, #ffffff);
|
11176
|
-
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));
|
11177
11134
|
}
|
11178
11135
|
|
11179
11136
|
.c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
|
@@ -11181,6 +11138,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11181
11138
|
left: -4px;
|
11182
11139
|
}
|
11183
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
|
+
|
11184
11148
|
/*
|
11185
11149
|
* Licensed Materials - Property of IBM
|
11186
11150
|
* 5724-Q36
|