@carbon/ibm-products 1.33.0 → 1.34.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +78 -145
- 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 +6 -142
- 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 +61 -143
- 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 +76 -143
- 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/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/es/components/Datagrid/utils/getArgTypes.js +4 -0
- package/es/components/InlineEditV2/InlineEditV2.js +249 -0
- package/es/components/InlineEditV2/index.js +1 -0
- package/es/components/PageHeader/PageHeaderTitle.js +3 -1
- package/es/components/SidePanel/SidePanel.js +44 -51
- package/es/components/SidePanel/motion/variants.js +39 -0
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +2 -1
- package/es/global/js/utils/getBezierValues.js +20 -0
- package/es/global/js/utils/motionConstants.js +45 -0
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +0 -1
- package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
- package/lib/components/InlineEditV2/InlineEditV2.js +277 -0
- package/lib/components/InlineEditV2/index.js +13 -0
- package/lib/components/PageHeader/PageHeaderTitle.js +3 -1
- package/lib/components/SidePanel/SidePanel.js +45 -50
- package/lib/components/SidePanel/motion/variants.js +49 -0
- package/lib/components/index.js +9 -1
- package/lib/global/js/package-settings.js +2 -1
- package/lib/global/js/utils/getBezierValues.js +29 -0
- package/lib/global/js/utils/motionConstants.js +55 -0
- package/package.json +16 -14
- package/scss/components/Datagrid/_storybook-styles.scss +4 -0
- package/scss/components/InlineEditV2/_index.scss +10 -0
- package/scss/components/InlineEditV2/_inline-edit-v2.scss +81 -0
- package/scss/components/ModifiedTabs/_modified-tabs.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -0
- package/scss/components/SidePanel/_side-panel.scss +0 -75
- package/scss/components/_index.scss +2 -0
@@ -10716,6 +10716,20 @@ a.bx--overflow-menu-options__btn::before {
|
|
10716
10716
|
border-radius: 0;
|
10717
10717
|
}
|
10718
10718
|
|
10719
|
+
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
10720
|
+
.bx--toggle__switch::before {
|
10721
|
+
outline: 1px solid transparent;
|
10722
|
+
}
|
10723
|
+
}
|
10724
|
+
|
10725
|
+
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
10726
|
+
.bx--toggle__switch::after,
|
10727
|
+
.bx--toggle-input:checked + .bx--toggle-input__label > .bx--toggle__switch::after {
|
10728
|
+
outline: 1px solid transparent;
|
10729
|
+
background-color: ButtonText;
|
10730
|
+
}
|
10731
|
+
}
|
10732
|
+
|
10719
10733
|
@keyframes influencer-menu-entrance {
|
10720
10734
|
0% {
|
10721
10735
|
opacity: 0;
|
@@ -11076,26 +11090,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11076
11090
|
stroke-dashoffset: 0;
|
11077
11091
|
}
|
11078
11092
|
}
|
11079
|
-
@keyframes side-panel-exit-left {
|
11080
|
-
0% {
|
11081
|
-
opacity: 1;
|
11082
|
-
transform: translateX(0);
|
11083
|
-
}
|
11084
|
-
100% {
|
11085
|
-
opacity: 0;
|
11086
|
-
transform: translateX(calc(-1 * 30rem));
|
11087
|
-
}
|
11088
|
-
}
|
11089
|
-
@keyframes side-panel-exit-right {
|
11090
|
-
0% {
|
11091
|
-
opacity: 1;
|
11092
|
-
transform: translateX(0);
|
11093
|
-
}
|
11094
|
-
100% {
|
11095
|
-
opacity: 0;
|
11096
|
-
transform: translateX(30rem);
|
11097
|
-
}
|
11098
|
-
}
|
11099
11093
|
.c4p--side-panel__container {
|
11100
11094
|
--c4p--side-panel--subtitle-opacity: 1;
|
11101
11095
|
--c4p--side-panel--title-container-height: 0;
|
@@ -11114,7 +11108,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11114
11108
|
box-sizing: border-box;
|
11115
11109
|
background-color: var(--cds-ui-01, #f4f4f4);
|
11116
11110
|
color: var(--cds-text-01, #161616);
|
11117
|
-
transition: transform 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11118
11111
|
}
|
11119
11112
|
.c4p--side-panel__container.c4p--side-panel__container--xs {
|
11120
11113
|
width: 16rem;
|
@@ -11128,37 +11121,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11128
11121
|
max-width: 100%;
|
11129
11122
|
}
|
11130
11123
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--xs {
|
11131
|
-
width: 16rem;
|
11132
|
-
max-width: 100%;
|
11133
11124
|
right: 0;
|
11134
11125
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11135
11126
|
}
|
11136
|
-
@keyframes side-panel-entrance-right {
|
11137
|
-
0% {
|
11138
|
-
opacity: 0;
|
11139
|
-
transform: translateX(16rem);
|
11140
|
-
}
|
11141
|
-
100% {
|
11142
|
-
opacity: 1;
|
11143
|
-
transform: translateX(0);
|
11144
|
-
}
|
11145
|
-
}
|
11146
11127
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--xs {
|
11147
|
-
width: 16rem;
|
11148
|
-
max-width: 100%;
|
11149
11128
|
left: 0;
|
11150
11129
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11151
11130
|
}
|
11152
|
-
@keyframes side-panel-entrance-left {
|
11153
|
-
0% {
|
11154
|
-
opacity: 0;
|
11155
|
-
transform: translateX(-16rem);
|
11156
|
-
}
|
11157
|
-
100% {
|
11158
|
-
opacity: 1;
|
11159
|
-
transform: translateX(0);
|
11160
|
-
}
|
11161
|
-
}
|
11162
11131
|
.c4p--side-panel__container.c4p--side-panel__container--sm {
|
11163
11132
|
width: 20rem;
|
11164
11133
|
max-width: 100%;
|
@@ -11171,37 +11140,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11171
11140
|
max-width: 100%;
|
11172
11141
|
}
|
11173
11142
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--sm {
|
11174
|
-
width: 20rem;
|
11175
|
-
max-width: 100%;
|
11176
11143
|
right: 0;
|
11177
11144
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11178
11145
|
}
|
11179
|
-
@keyframes side-panel-entrance-right {
|
11180
|
-
0% {
|
11181
|
-
opacity: 0;
|
11182
|
-
transform: translateX(20rem);
|
11183
|
-
}
|
11184
|
-
100% {
|
11185
|
-
opacity: 1;
|
11186
|
-
transform: translateX(0);
|
11187
|
-
}
|
11188
|
-
}
|
11189
11146
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--sm {
|
11190
|
-
width: 20rem;
|
11191
|
-
max-width: 100%;
|
11192
11147
|
left: 0;
|
11193
11148
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11194
11149
|
}
|
11195
|
-
@keyframes side-panel-entrance-left {
|
11196
|
-
0% {
|
11197
|
-
opacity: 0;
|
11198
|
-
transform: translateX(-20rem);
|
11199
|
-
}
|
11200
|
-
100% {
|
11201
|
-
opacity: 1;
|
11202
|
-
transform: translateX(0);
|
11203
|
-
}
|
11204
|
-
}
|
11205
11150
|
.c4p--side-panel__container.c4p--side-panel__container--md {
|
11206
11151
|
width: 30rem;
|
11207
11152
|
max-width: 100%;
|
@@ -11214,37 +11159,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11214
11159
|
max-width: 100%;
|
11215
11160
|
}
|
11216
11161
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--md {
|
11217
|
-
width: 30rem;
|
11218
|
-
max-width: 100%;
|
11219
11162
|
right: 0;
|
11220
11163
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11221
11164
|
}
|
11222
|
-
@keyframes side-panel-entrance-right {
|
11223
|
-
0% {
|
11224
|
-
opacity: 0;
|
11225
|
-
transform: translateX(30rem);
|
11226
|
-
}
|
11227
|
-
100% {
|
11228
|
-
opacity: 1;
|
11229
|
-
transform: translateX(0);
|
11230
|
-
}
|
11231
|
-
}
|
11232
11165
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--md {
|
11233
|
-
width: 30rem;
|
11234
|
-
max-width: 100%;
|
11235
11166
|
left: 0;
|
11236
11167
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11237
11168
|
}
|
11238
|
-
@keyframes side-panel-entrance-left {
|
11239
|
-
0% {
|
11240
|
-
opacity: 0;
|
11241
|
-
transform: translateX(-30rem);
|
11242
|
-
}
|
11243
|
-
100% {
|
11244
|
-
opacity: 1;
|
11245
|
-
transform: translateX(0);
|
11246
|
-
}
|
11247
|
-
}
|
11248
11169
|
.c4p--side-panel__container.c4p--side-panel__container--lg {
|
11249
11170
|
width: 40rem;
|
11250
11171
|
max-width: 100%;
|
@@ -11257,37 +11178,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11257
11178
|
max-width: 100%;
|
11258
11179
|
}
|
11259
11180
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--lg {
|
11260
|
-
width: 40rem;
|
11261
|
-
max-width: 100%;
|
11262
11181
|
right: 0;
|
11263
11182
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11264
11183
|
}
|
11265
|
-
@keyframes side-panel-entrance-right {
|
11266
|
-
0% {
|
11267
|
-
opacity: 0;
|
11268
|
-
transform: translateX(40rem);
|
11269
|
-
}
|
11270
|
-
100% {
|
11271
|
-
opacity: 1;
|
11272
|
-
transform: translateX(0);
|
11273
|
-
}
|
11274
|
-
}
|
11275
11184
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--lg {
|
11276
|
-
width: 40rem;
|
11277
|
-
max-width: 100%;
|
11278
11185
|
left: 0;
|
11279
11186
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11280
11187
|
}
|
11281
|
-
@keyframes side-panel-entrance-left {
|
11282
|
-
0% {
|
11283
|
-
opacity: 0;
|
11284
|
-
transform: translateX(-40rem);
|
11285
|
-
}
|
11286
|
-
100% {
|
11287
|
-
opacity: 1;
|
11288
|
-
transform: translateX(0);
|
11289
|
-
}
|
11290
|
-
}
|
11291
11188
|
.c4p--side-panel__container.c4p--side-panel__container--max {
|
11292
11189
|
width: 75%;
|
11293
11190
|
max-width: 100%;
|
@@ -11300,37 +11197,13 @@ a.bx--overflow-menu-options__btn::before {
|
|
11300
11197
|
max-width: 100%;
|
11301
11198
|
}
|
11302
11199
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement.c4p--side-panel__container--max {
|
11303
|
-
width: 75%;
|
11304
|
-
max-width: 100%;
|
11305
11200
|
right: 0;
|
11306
11201
|
border-left: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11307
11202
|
}
|
11308
|
-
@keyframes side-panel-entrance-right {
|
11309
|
-
0% {
|
11310
|
-
opacity: 0;
|
11311
|
-
transform: translateX(75%);
|
11312
|
-
}
|
11313
|
-
100% {
|
11314
|
-
opacity: 1;
|
11315
|
-
transform: translateX(0);
|
11316
|
-
}
|
11317
|
-
}
|
11318
11203
|
.c4p--side-panel__container.c4p--side-panel__container-left-placement.c4p--side-panel__container--max {
|
11319
|
-
width: 75%;
|
11320
|
-
max-width: 100%;
|
11321
11204
|
left: 0;
|
11322
11205
|
border-right: 1px solid var(--cds-decorative-01, #e0e0e0);
|
11323
11206
|
}
|
11324
|
-
@keyframes side-panel-entrance-left {
|
11325
|
-
0% {
|
11326
|
-
opacity: 0;
|
11327
|
-
transform: translateX(-75%);
|
11328
|
-
}
|
11329
|
-
100% {
|
11330
|
-
opacity: 1;
|
11331
|
-
transform: translateX(0);
|
11332
|
-
}
|
11333
|
-
}
|
11334
11207
|
.c4p--side-panel__container.c4p--side-panel__container-with-action-toolbar.c4p--side-panel__with-condensed-header .c4p--side-panel__title-container::before {
|
11335
11208
|
content: none;
|
11336
11209
|
}
|
@@ -11650,7 +11523,6 @@ a.bx--overflow-menu-options__btn::before {
|
|
11650
11523
|
width: 100%;
|
11651
11524
|
height: 100%;
|
11652
11525
|
background-color: var(--cds-overlay-01, rgba(22, 22, 22, 0.5));
|
11653
|
-
transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
11654
11526
|
}
|
11655
11527
|
|
11656
11528
|
.c4p--create-side-panel.c4p--side-panel__container .c4p--create-side-panel__content-text {
|
@@ -13081,6 +12953,7 @@ a.bx--side-nav__link--current::before {
|
|
13081
12953
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
13082
12954
|
.bx--radio-button:checked + .bx--radio-button__label .bx--radio-button__appearance::before {
|
13083
12955
|
fill: ButtonText;
|
12956
|
+
background-color: ButtonText;
|
13084
12957
|
}
|
13085
12958
|
}
|
13086
12959
|
|
@@ -13894,8 +13767,8 @@ a.bx--side-nav__link--current::before {
|
|
13894
13767
|
height: 2.5rem;
|
13895
13768
|
padding: var(--cds-spacing-04, 0.75rem);
|
13896
13769
|
border: var(--cds-spacing-01, 0.125rem) solid transparent;
|
13897
|
-
background-color: transparent;
|
13898
13770
|
border-radius: 0;
|
13771
|
+
background-color: transparent;
|
13899
13772
|
cursor: pointer;
|
13900
13773
|
transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
|
13901
13774
|
}
|
@@ -16756,6 +16629,12 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
16756
16629
|
transform: translateY(-2px);
|
16757
16630
|
vertical-align: middle;
|
16758
16631
|
}
|
16632
|
+
.c4p--page-header .c4p--page-header__title-wrapper {
|
16633
|
+
font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
|
16634
|
+
font-weight: var(--cds-productive-heading-04-font-weight, 400);
|
16635
|
+
line-height: var(--cds-productive-heading-04-line-height, 1.28572);
|
16636
|
+
letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
|
16637
|
+
}
|
16759
16638
|
.c4p--page-header .c4p--page-header__page-actions {
|
16760
16639
|
flex: 0 0 100%;
|
16761
16640
|
margin-top: var(--cds-spacing-05, 1rem);
|
@@ -20964,6 +20843,60 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
|
|
20964
20843
|
margin-bottom: var(--cds-spacing-05, 1rem);
|
20965
20844
|
}
|
20966
20845
|
|
20846
|
+
.c4p--inline-edit-v2 {
|
20847
|
+
display: flex;
|
20848
|
+
align-items: center;
|
20849
|
+
background: transparent;
|
20850
|
+
cursor: pointer;
|
20851
|
+
}
|
20852
|
+
.c4p--inline-edit-v2-readonly {
|
20853
|
+
cursor: not-allowed;
|
20854
|
+
}
|
20855
|
+
.c4p--inline-edit-v2:hover {
|
20856
|
+
background: var(--cds-hover-ui, #e5e5e5);
|
20857
|
+
}
|
20858
|
+
.c4p--inline-edit-v2:hover .c4p--inline-edit-v2__btn-edit {
|
20859
|
+
visibility: visible;
|
20860
|
+
}
|
20861
|
+
.c4p--inline-edit-v2__btn-edit {
|
20862
|
+
visibility: hidden;
|
20863
|
+
}
|
20864
|
+
.c4p--inline-edit-v2-focused {
|
20865
|
+
background: var(--cds-hover-ui, #e5e5e5);
|
20866
|
+
outline: 2px solid var(--cds-focus, #0f62fe);
|
20867
|
+
}
|
20868
|
+
.c4p--inline-edit-v2__text-input {
|
20869
|
+
flex: 1;
|
20870
|
+
}
|
20871
|
+
.c4p--inline-edit-v2__warning-icon {
|
20872
|
+
color: var(--cds-support-01, #da1e28);
|
20873
|
+
}
|
20874
|
+
.c4p--inline-edit-v2__warning-text {
|
20875
|
+
font-size: var(--cds-caption-01-font-size, 0.75rem);
|
20876
|
+
font-weight: var(--cds-caption-01-font-weight, 400);
|
20877
|
+
line-height: var(--cds-caption-01-line-height, 1.33333);
|
20878
|
+
letter-spacing: var(--cds-caption-01-letter-spacing, 0.32px);
|
20879
|
+
margin-top: var(--cds-spacing-03, 0.5rem);
|
20880
|
+
color: var(--cds-support-01, #da1e28);
|
20881
|
+
}
|
20882
|
+
|
20883
|
+
.c4p--inline-edit-v2__text-input.bx--text-input {
|
20884
|
+
border: none;
|
20885
|
+
background: transparent;
|
20886
|
+
cursor: pointer;
|
20887
|
+
outline: none;
|
20888
|
+
}
|
20889
|
+
|
20890
|
+
.c4p--inline-edit-v2-readonly .c4p--inline-edit-v2__text-input.bx--text-input {
|
20891
|
+
color: var(--cds-disabled-02, #c6c6c6);
|
20892
|
+
cursor: not-allowed;
|
20893
|
+
}
|
20894
|
+
|
20895
|
+
.c4p--inline-edit-v2__text-input.bx--text-input:focus,
|
20896
|
+
.c4p--inline-edit-v2__text-input.bx--text-input:active {
|
20897
|
+
outline: none;
|
20898
|
+
}
|
20899
|
+
|
20967
20900
|
@font-face {
|
20968
20901
|
font-display: auto;
|
20969
20902
|
font-family: "IBM Plex Mono";
|
@@ -27914,7 +27847,7 @@ button.bx--dropdown-text:focus {
|
|
27914
27847
|
}
|
27915
27848
|
|
27916
27849
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
27917
|
-
.bx--inline-
|
27850
|
+
.bx--inline-notification .bx--inline-notification__close-icon {
|
27918
27851
|
fill: ButtonText;
|
27919
27852
|
}
|
27920
27853
|
}
|
@@ -28174,7 +28107,7 @@ button.bx--dropdown-text:focus {
|
|
28174
28107
|
}
|
28175
28108
|
|
28176
28109
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
28177
|
-
.bx--toast-
|
28110
|
+
.bx--toast-notification .bx--toast-notification__close-icon {
|
28178
28111
|
fill: ButtonText;
|
28179
28112
|
}
|
28180
28113
|
}
|