@carbon/ibm-products 2.0.0-rc.25 → 2.0.0-rc.27
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 +129 -127
- 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 +69 -118
- 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 +129 -127
- 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 +129 -127
- 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/Card/Card.js +8 -6
- package/es/components/Card/CardHeader.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +15 -20
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -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/Filtering/hooks/useFilters.js +11 -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/ExpressiveCard/ExpressiveCard.js +3 -3
- package/es/components/InlineEditV1/InlineEditV1.js +15 -20
- package/es/components/InlineEditV2/InlineEditV2.js +21 -31
- package/es/components/PageHeader/PageHeader.js +4 -3
- package/es/components/ProductiveCard/ProductiveCard.js +3 -3
- 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/Card/Card.js +7 -5
- package/lib/components/Card/CardHeader.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +14 -19
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -2
- package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -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/Filtering/hooks/useFilters.js +11 -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/ExpressiveCard/ExpressiveCard.js +3 -3
- package/lib/components/InlineEditV1/InlineEditV1.js +14 -19
- package/lib/components/InlineEditV2/InlineEditV2.js +20 -30
- package/lib/components/PageHeader/PageHeader.js +4 -3
- package/lib/components/ProductiveCard/ProductiveCard.js +3 -3
- 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/ActionBar/_action-bar.scss +0 -4
- package/scss/components/AddSelect/_add-select.scss +4 -16
- package/scss/components/Card/_card.scss +13 -6
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +15 -2
- package/scss/components/Datagrid/styles/addons/_RowSizeDropdown.scss +18 -6
- package/scss/components/ExportModal/_export-modal.scss +0 -4
- package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +5 -89
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +42 -3
- package/scss/components/PageHeader/_page-header.scss +2 -3
- package/scss/components/ProductiveCard/_productive-card.scss +31 -2
- package/scss/components/SidePanel/_side-panel.scss +2 -1
- package/scss/components/TagSet/_tag-set.scss +1 -0
- package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
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;
|
@@ -3952,22 +3951,18 @@
|
|
3952
3951
|
fill: var(--cds-button-danger-primary, #da1e28);
|
3953
3952
|
}
|
3954
3953
|
|
3955
|
-
.cds--modal-content.c4p--export-modal__body-container {
|
3956
|
-
padding-bottom: 1.5rem;
|
3957
|
-
}
|
3958
|
-
|
3959
3954
|
.c4p--card {
|
3960
|
-
background: var(--cds-layer-01, #f4f4f4);
|
3955
|
+
background-color: var(--cds-layer-01, #f4f4f4);
|
3961
3956
|
color: var(--cds-text-primary, #161616);
|
3962
3957
|
}
|
3963
3958
|
|
3964
3959
|
.c4p--card__clickable {
|
3965
3960
|
cursor: pointer;
|
3966
|
-
transition: background 110ms;
|
3961
|
+
transition: background-color 110ms;
|
3967
3962
|
}
|
3968
3963
|
|
3969
3964
|
.c4p--card__clickable:hover {
|
3970
|
-
background: var(--cds-
|
3965
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
3971
3966
|
}
|
3972
3967
|
|
3973
3968
|
.c4p--card__media-left {
|
@@ -4027,10 +4022,10 @@
|
|
4027
4022
|
}
|
4028
4023
|
|
4029
4024
|
.c4p--card__body {
|
4030
|
-
font-size: var(--cds-body-
|
4031
|
-
font-weight: var(--cds-body-
|
4032
|
-
line-height: var(--cds-body-
|
4033
|
-
letter-spacing: var(--cds-body-
|
4025
|
+
font-size: var(--cds-body-compact-01-font-size, 0.875rem);
|
4026
|
+
font-weight: var(--cds-body-compact-01-font-weight, 400);
|
4027
|
+
line-height: var(--cds-body-compact-01-line-height, 1.28572);
|
4028
|
+
letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
|
4034
4029
|
padding: 1rem;
|
4035
4030
|
padding-top: 0;
|
4036
4031
|
}
|
@@ -4043,15 +4038,22 @@
|
|
4043
4038
|
.c4p--card__actions {
|
4044
4039
|
display: flex;
|
4045
4040
|
flex-direction: row;
|
4046
|
-
margin: 1rem;
|
4047
|
-
margin-top: 0;
|
4048
4041
|
}
|
4049
4042
|
|
4050
4043
|
.c4p--card__icon {
|
4044
|
+
padding: 0.5rem;
|
4051
4045
|
color: inherit;
|
4052
4046
|
cursor: pointer;
|
4053
4047
|
}
|
4054
4048
|
|
4049
|
+
.c4p--card__icon:hover {
|
4050
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
4051
|
+
}
|
4052
|
+
|
4053
|
+
c4p--card__icon:active {
|
4054
|
+
color: var(--cds-link-primary-hover, #0043ce);
|
4055
|
+
}
|
4056
|
+
|
4055
4057
|
.c4p--card__link {
|
4056
4058
|
color: inherit;
|
4057
4059
|
text-decoration: inherit;
|
@@ -4063,10 +4065,10 @@
|
|
4063
4065
|
}
|
4064
4066
|
|
4065
4067
|
.c4p--card__title {
|
4066
|
-
font-size: var(--cds-
|
4067
|
-
font-weight: var(--cds-
|
4068
|
-
line-height: var(--cds-
|
4069
|
-
letter-spacing: var(--cds-
|
4068
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
4069
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
4070
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
4071
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
4070
4072
|
}
|
4071
4073
|
|
4072
4074
|
.c4p--filter-summary {
|
@@ -4330,24 +4332,18 @@
|
|
4330
4332
|
border-bottom: 1px solid var(--cds-layer-selected-01, #e0e0e0);
|
4331
4333
|
background-color: var(--cds-layer-selected-01, #e0e0e0);
|
4332
4334
|
}
|
4333
|
-
.c4p--add-select__selections-
|
4335
|
+
.c4p--add-select__selections-form-control {
|
4334
4336
|
display: flex;
|
4335
4337
|
align-items: center;
|
4336
4338
|
}
|
4337
|
-
.c4p--add-select__selections-
|
4339
|
+
.c4p--add-select__selections-form-control-label-wrapper {
|
4338
4340
|
display: flex;
|
4339
4341
|
margin-left: 1rem;
|
4340
4342
|
}
|
4341
|
-
.c4p--add-select__selections-
|
4343
|
+
.c4p--add-select__selections-form-control-label-text {
|
4342
4344
|
display: flex;
|
4343
4345
|
flex-direction: column;
|
4344
4346
|
}
|
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
4347
|
.c4p--add-select__selections-cell-avatar {
|
4352
4348
|
margin-right: 0.5rem;
|
4353
4349
|
}
|
@@ -4453,7 +4449,7 @@
|
|
4453
4449
|
flex-grow: 1;
|
4454
4450
|
overflow-x: auto;
|
4455
4451
|
}
|
4456
|
-
.c4p--add-select__columns .c4p--add-select__selections-
|
4452
|
+
.c4p--add-select__columns .c4p--add-select__selections-form-control-label-wrapper {
|
4457
4453
|
margin-left: 0.5rem;
|
4458
4454
|
}
|
4459
4455
|
.c4p--add-select__columns .c4p--add-select__selections-row.cds--structured-list-row {
|
@@ -4654,10 +4650,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
4654
4650
|
opacity: 0;
|
4655
4651
|
}
|
4656
4652
|
|
4657
|
-
.c4p--add-select .cds--checkbox-label-text {
|
4658
|
-
padding-left: 0.5rem;
|
4659
|
-
}
|
4660
|
-
|
4661
4653
|
.c4p--add-select__multi .c4p--empty-state {
|
4662
4654
|
max-width: 16rem;
|
4663
4655
|
margin-top: 3rem;
|
@@ -6997,9 +6989,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
6997
6989
|
.c4p--action-bar .c4p--action-bar__displayed-items--right {
|
6998
6990
|
justify-content: flex-end;
|
6999
6991
|
}
|
7000
|
-
.c4p--action-bar .c4p--action-bar-overflow-items {
|
7001
|
-
display: inline-block;
|
7002
|
-
}
|
7003
6992
|
.c4p--action-bar .c4p--action-bar__hidden-sizing-items {
|
7004
6993
|
position: absolute;
|
7005
6994
|
top: -100vh;
|
@@ -7201,6 +7190,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7201
7190
|
padding: 0;
|
7202
7191
|
margin: 0;
|
7203
7192
|
background-color: inherit;
|
7193
|
+
border-radius: 0;
|
7204
7194
|
color: inherit;
|
7205
7195
|
text-overflow: ellipsis;
|
7206
7196
|
white-space: nowrap;
|
@@ -7727,7 +7717,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7727
7717
|
.c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
|
7728
7718
|
background-color: var(--cds-background, #ffffff);
|
7729
7719
|
}
|
7730
|
-
.c4p--page-header .
|
7720
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle {
|
7731
7721
|
position: absolute;
|
7732
7722
|
z-index: 100;
|
7733
7723
|
right: 0;
|
@@ -7736,7 +7726,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7736
7726
|
.c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
|
7737
7727
|
transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
7738
7728
|
}
|
7739
|
-
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed
|
7729
|
+
.c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed svg {
|
7740
7730
|
transform: scaleY(-1);
|
7741
7731
|
}
|
7742
7732
|
|
@@ -7763,16 +7753,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7763
7753
|
padding-right: 0;
|
7764
7754
|
}
|
7765
7755
|
.c4p--card__productive .c4p--card__title {
|
7766
|
-
font-size: var(--cds-
|
7767
|
-
font-weight: var(--cds-
|
7768
|
-
line-height: var(--cds-
|
7769
|
-
letter-spacing: var(--cds-
|
7756
|
+
font-size: var(--cds-heading-compact-02-font-size, 1rem);
|
7757
|
+
font-weight: var(--cds-heading-compact-02-font-weight, 600);
|
7758
|
+
line-height: var(--cds-heading-compact-02-line-height, 1.375);
|
7759
|
+
letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
|
7770
7760
|
}
|
7771
7761
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__title {
|
7772
|
-
font-size: var(--cds-
|
7773
|
-
font-weight: var(--cds-
|
7774
|
-
line-height: var(--cds-
|
7775
|
-
letter-spacing: var(--cds-
|
7762
|
+
font-size: var(--cds-heading-03-font-size, 1.25rem);
|
7763
|
+
font-weight: var(--cds-heading-03-font-weight, 400);
|
7764
|
+
line-height: var(--cds-heading-03-line-height, 1.4);
|
7765
|
+
letter-spacing: var(--cds-heading-03-letter-spacing, 0);
|
7776
7766
|
}
|
7777
7767
|
.c4p--card__productive .c4p--card__body {
|
7778
7768
|
padding-top: 0.5rem;
|
@@ -7786,12 +7776,36 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
7786
7776
|
justify-content: flex-end;
|
7787
7777
|
}
|
7788
7778
|
.c4p--card__productive .c4p--card__actions {
|
7779
|
+
min-height: 2rem;
|
7789
7780
|
margin: 0;
|
7790
7781
|
}
|
7791
7782
|
.c4p--card__productive .c4p--card__actions-header {
|
7792
7783
|
margin-top: calc(-1 * 0.25rem);
|
7793
7784
|
margin-right: 0.5rem;
|
7794
7785
|
}
|
7786
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button {
|
7787
|
+
min-height: 2rem;
|
7788
|
+
padding: 0 1rem;
|
7789
|
+
padding-right: 0.625rem;
|
7790
|
+
padding-left: 0.625rem;
|
7791
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7792
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7793
|
+
}
|
7794
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button::before {
|
7795
|
+
position: absolute;
|
7796
|
+
left: 0;
|
7797
|
+
width: 0.05rem;
|
7798
|
+
height: 1.5rem;
|
7799
|
+
background-color: var(--cds-layer-hover-01, #e8e8e8);
|
7800
|
+
content: "";
|
7801
|
+
opacity: 1;
|
7802
|
+
}
|
7803
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
|
7804
|
+
/* stylelint-disable-next-line max-nesting-depth */
|
7805
|
+
}
|
7806
|
+
.c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
|
7807
|
+
opacity: 0;
|
7808
|
+
}
|
7795
7809
|
.c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
|
7796
7810
|
.c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
|
7797
7811
|
margin-top: 0;
|
@@ -9387,6 +9401,11 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9387
9401
|
border-radius: 50%;
|
9388
9402
|
}
|
9389
9403
|
|
9404
|
+
.cds--btn--ghost.c4p--user-profile-image__tooltip:focus {
|
9405
|
+
border: 0;
|
9406
|
+
box-shadow: 0 0 0 0.25rem var(--cds-focus, #0f62fe);
|
9407
|
+
}
|
9408
|
+
|
9390
9409
|
.cds--tooltip__trigger .c4p--user-profile-image svg,
|
9391
9410
|
.c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
|
9392
9411
|
fill: var(--cds-layer-01, #f4f4f4);
|
@@ -9786,6 +9805,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9786
9805
|
/* stylelint-disable-next-line carbon/layout-token-use */
|
9787
9806
|
margin-right: var(--c4p--inline-edit--toolbar-width);
|
9788
9807
|
margin-left: 1rem;
|
9808
|
+
color: var(--cds-text-primary, #161616);
|
9789
9809
|
font-family: inherit;
|
9790
9810
|
line-height: var(--c4p--inline-edit--size);
|
9791
9811
|
}
|
@@ -9853,6 +9873,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9853
9873
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__after-input-elements {
|
9854
9874
|
--c4p--inline-edit--toolbar-width: calc(3 * var(--c4p--inline-edit--size));
|
9855
9875
|
}
|
9876
|
+
.c4p--inline-edit .c4p--inline-edit__toolbar {
|
9877
|
+
display: flex;
|
9878
|
+
align-items: center;
|
9879
|
+
}
|
9856
9880
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar::after {
|
9857
9881
|
position: absolute;
|
9858
9882
|
top: 0;
|
@@ -9868,82 +9892,18 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9868
9892
|
}
|
9869
9893
|
.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
9894
|
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
9895
|
}
|
9895
9896
|
.c4p--inline-edit.c4p--inline-edit--editing .c4p--inline-edit__toolbar--animation .c4p--inline-edit__save {
|
9896
|
-
overflow: visible;
|
9897
9897
|
width: var(--c4p--inline-edit--edit-size);
|
9898
9898
|
transition: all 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
9899
9899
|
transition-property: margin, padding;
|
9900
9900
|
}
|
9901
9901
|
.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
9902
|
width: 0;
|
9904
9903
|
padding: 0;
|
9905
9904
|
border-right: 0;
|
9906
9905
|
border-left: 0;
|
9907
9906
|
}
|
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
9907
|
@media (hover: hover) {
|
9948
9908
|
.c4p--inline-edit .c4p--inline-edit__edit {
|
9949
9909
|
opacity: 0;
|
@@ -9956,15 +9916,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9956
9916
|
.c4p--inline-edit .c4p--inline-edit__edit--always-visible {
|
9957
9917
|
opacity: 1;
|
9958
9918
|
}
|
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
9919
|
.c4p--inline-edit.c4p--inline-edit--invalid .c4p--inline-edit__validation-icon {
|
9969
9920
|
color: var(--cds-support-error, #da1e28);
|
9970
9921
|
}
|
@@ -10000,7 +9951,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10000
9951
|
visibility: hidden;
|
10001
9952
|
}
|
10002
9953
|
|
10003
|
-
.c4p--inline-edit-v2
|
9954
|
+
.c4p--inline-edit-v2--focused {
|
10004
9955
|
background: var(--cds-field-01, #f4f4f4);
|
10005
9956
|
outline: 2px solid var(--cds-focus, #0f62fe);
|
10006
9957
|
}
|
@@ -10014,8 +9965,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10014
9965
|
}
|
10015
9966
|
|
10016
9967
|
.c4p--inline-edit-v2__warning-icon {
|
10017
|
-
|
10018
|
-
margin-right: 0.4375rem;
|
9968
|
+
margin: 0.5rem;
|
10019
9969
|
color: var(--cds-support-error, #da1e28);
|
10020
9970
|
}
|
10021
9971
|
|
@@ -10045,6 +9995,39 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10045
9995
|
outline: none;
|
10046
9996
|
}
|
10047
9997
|
|
9998
|
+
.c4p--inline-edit-v2__toolbar {
|
9999
|
+
--toolbar-width: 2rem;
|
10000
|
+
--toolbar-width-focussed: 4rem;
|
10001
|
+
display: inline-flex;
|
10002
|
+
overflow: hidden;
|
10003
|
+
width: var(--toolbar-width);
|
10004
|
+
}
|
10005
|
+
|
10006
|
+
.c4p--inline-edit-v2--invalid .c4p--inline-edit-v2__toolbar {
|
10007
|
+
--toolbar-width: 2rem;
|
10008
|
+
--toolbar-width-focussed: 6rem;
|
10009
|
+
}
|
10010
|
+
|
10011
|
+
@keyframes slide-in {
|
10012
|
+
0% {
|
10013
|
+
overflow: hidden;
|
10014
|
+
width: var(--toolbar-width);
|
10015
|
+
}
|
10016
|
+
99% {
|
10017
|
+
overflow: hidden;
|
10018
|
+
width: var(--toolbar-width-focussed);
|
10019
|
+
}
|
10020
|
+
100% {
|
10021
|
+
overflow: visible;
|
10022
|
+
width: var(--toolbar-width-focussed);
|
10023
|
+
}
|
10024
|
+
}
|
10025
|
+
.c4p--inline-edit-v2--focused .c4p--inline-edit-v2__toolbar {
|
10026
|
+
overflow: initial;
|
10027
|
+
width: var(--toolbar-width-focussed);
|
10028
|
+
animation: slide-in 150ms cubic-bezier(0, 0, 0.38, 0.9);
|
10029
|
+
}
|
10030
|
+
|
10048
10031
|
.c4p--data-spreadsheet {
|
10049
10032
|
--c4p--data-spreadsheet--total-width: 0;
|
10050
10033
|
display: inline-block;
|
@@ -11111,10 +11094,16 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11111
11094
|
border-bottom: 1px solid var(--cds-background-active, rgba(141, 141, 141, 0.5));
|
11112
11095
|
}
|
11113
11096
|
|
11114
|
-
.c4p--datagrid__customize-columns-checkbox
|
11097
|
+
.cds--form-item.cds--checkbox-wrapper.c4p--datagrid__customize-columns-checkbox {
|
11115
11098
|
display: flex;
|
11099
|
+
flex: initial;
|
11100
|
+
align-items: center;
|
11116
11101
|
justify-content: center;
|
11117
|
-
|
11102
|
+
}
|
11103
|
+
|
11104
|
+
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-visible-label {
|
11105
|
+
/* stylelint-disable-next-line */
|
11106
|
+
padding-left: 0.375rem;
|
11118
11107
|
}
|
11119
11108
|
|
11120
11109
|
.c4p--datagrid__customize-columns-column-list .c4p--datagrid__customize-columns-checkbox-wrapper.cds--form-item {
|
@@ -11126,6 +11115,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11126
11115
|
overflow: auto;
|
11127
11116
|
}
|
11128
11117
|
|
11118
|
+
.c4p--datagrid__customize-columns-select-all {
|
11119
|
+
align-items: center;
|
11120
|
+
}
|
11121
|
+
|
11129
11122
|
.c4p--datagrid__customize-columns-select-all,
|
11130
11123
|
.c4p--datagrid__customize-columns-select-all--selected {
|
11131
11124
|
position: sticky;
|
@@ -11157,15 +11150,17 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11157
11150
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
11158
11151
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
11159
11152
|
*/
|
11160
|
-
.c4p--datagrid__row-size-
|
11161
|
-
padding: 1rem;
|
11153
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip-content {
|
11162
11154
|
background-color: var(--cds-layer-02, #ffffff);
|
11163
11155
|
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
11156
|
}
|
11165
11157
|
|
11166
|
-
.
|
11158
|
+
.c4p--datagrid .c4p--datagrid__row-size-radio-button .cds--radio-button__label {
|
11159
|
+
color: var(--cds-text-primary, #161616);
|
11160
|
+
}
|
11161
|
+
|
11162
|
+
.c4p--datagrid .c4p--datagrid__row-size-toggle-tip .cds--popover-caret {
|
11167
11163
|
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
11164
|
}
|
11170
11165
|
|
11171
11166
|
.c4p--datagrid .cds--popover--bottom-right.c4p--datagrid__row-height-settings-popover .cds--popover-caret {
|
@@ -11173,6 +11168,13 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
11173
11168
|
left: -4px;
|
11174
11169
|
}
|
11175
11170
|
|
11171
|
+
.c4p--datagrid__row-size-toggle-tip-button.cds--toggletip-button {
|
11172
|
+
display: flex;
|
11173
|
+
width: 3rem;
|
11174
|
+
height: 3rem;
|
11175
|
+
justify-content: center;
|
11176
|
+
}
|
11177
|
+
|
11176
11178
|
/*
|
11177
11179
|
* Licensed Materials - Property of IBM
|
11178
11180
|
* 5724-Q36
|