@carbon/ibm-products 2.19.2 → 2.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +128 -107
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +17 -18
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +17 -18
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +39 -19
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +47 -4
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +63 -41
- package/es/components/SidePanel/SidePanel.js +6 -1
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +46 -3
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +5 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +63 -41
- package/lib/components/SidePanel/SidePanel.js +6 -1
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/package.json +4 -4
- package/scss/components/Datagrid/styles/_datagrid.scss +8 -0
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +11 -8
- package/scss/components/SidePanel/_side-panel.scss +4 -2
@@ -2405,8 +2405,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2405
2405
|
}
|
2406
2406
|
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
|
2407
2407
|
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
|
2408
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation
|
2409
|
-
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__actions-container.c4p--action-set--xs {
|
2408
|
+
.c4p--side-panel__container.c4p--side-panel__container--xs .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2410
2409
|
width: 16rem;
|
2411
2410
|
max-width: 100%;
|
2412
2411
|
}
|
@@ -2416,8 +2415,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2416
2415
|
}
|
2417
2416
|
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
|
2418
2417
|
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
|
2419
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation
|
2420
|
-
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__actions-container.c4p--action-set--sm {
|
2418
|
+
.c4p--side-panel__container.c4p--side-panel__container--sm .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2421
2419
|
width: 20rem;
|
2422
2420
|
max-width: 100%;
|
2423
2421
|
}
|
@@ -2427,8 +2425,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2427
2425
|
}
|
2428
2426
|
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
|
2429
2427
|
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
|
2430
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation
|
2431
|
-
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__actions-container.c4p--action-set--md {
|
2428
|
+
.c4p--side-panel__container.c4p--side-panel__container--md .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2432
2429
|
width: 30rem;
|
2433
2430
|
max-width: 100%;
|
2434
2431
|
}
|
@@ -2438,8 +2435,7 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2438
2435
|
}
|
2439
2436
|
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
|
2440
2437
|
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
|
2441
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation
|
2442
|
-
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__actions-container.c4p--action-set--lg {
|
2438
|
+
.c4p--side-panel__container.c4p--side-panel__container--lg .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2443
2439
|
width: 40rem;
|
2444
2440
|
max-width: 100%;
|
2445
2441
|
}
|
@@ -2449,11 +2445,13 @@ p.c4p--about-modal__copyright-text:first-child {
|
|
2449
2445
|
}
|
2450
2446
|
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__title-container.c4p--side-panel__title-container--no-title-animation,
|
2451
2447
|
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text.c4p--side-panel__subtitle-text-no-animation,
|
2452
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation
|
2453
|
-
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__actions-container.c4p--action-set--2xl {
|
2448
|
+
.c4p--side-panel__container.c4p--side-panel__container--2xl .c4p--side-panel__action-toolbar.c4p--side-panel__action-toolbar-no-animation {
|
2454
2449
|
width: 75%;
|
2455
2450
|
max-width: 100%;
|
2456
2451
|
}
|
2452
|
+
.c4p--side-panel__container .c4p--side-panel__actions-container {
|
2453
|
+
width: 100%;
|
2454
|
+
}
|
2457
2455
|
.c4p--side-panel__container.c4p--side-panel__container-right-placement {
|
2458
2456
|
right: 0;
|
2459
2457
|
border-left: 1px solid var(--cds-border-subtle-02, #e0e0e0);
|
@@ -9724,6 +9722,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
9724
9722
|
max-width: 280px;
|
9725
9723
|
}
|
9726
9724
|
|
9725
|
+
.c4p--datagrid__empty-state .cds--data-table tbody tr:not([data-child-row]):hover {
|
9726
|
+
background: inherit;
|
9727
|
+
}
|
9728
|
+
|
9727
9729
|
.c4p--datagrid__empty-state .c4p--datagrid__table-simple tr:hover {
|
9728
9730
|
background: transparent;
|
9729
9731
|
}
|
@@ -10529,13 +10531,6 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10529
10531
|
padding-top: 0.5rem;
|
10530
10532
|
}
|
10531
10533
|
|
10532
|
-
/*
|
10533
|
-
* Licensed Materials - Property of IBM
|
10534
|
-
* 5724-Q36
|
10535
|
-
* (c) Copyright IBM Corp. 2022
|
10536
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
10537
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
10538
|
-
*/
|
10539
10534
|
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
10540
10535
|
.c4p--datagrid-filter-flyout__container {
|
10541
10536
|
position: relative;
|
@@ -10601,7 +10596,7 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10601
10596
|
display: grid;
|
10602
10597
|
/* stylelint-disable-next-line -- to-rem carbon replacement for rem */
|
10603
10598
|
gap: 1rem 2rem;
|
10604
|
-
grid-template-columns:
|
10599
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
10605
10600
|
}
|
10606
10601
|
|
10607
10602
|
.c4p--datagrid-filter-flyout__trigger.cds--btn {
|
@@ -10622,6 +10617,10 @@ button.c4p--add-select__global-filter-toggle--open {
|
|
10622
10617
|
margin-bottom: 0;
|
10623
10618
|
}
|
10624
10619
|
|
10620
|
+
.c4p--datagrid-filter-flyout__stacked {
|
10621
|
+
grid-template-columns: 1fr;
|
10622
|
+
}
|
10623
|
+
|
10625
10624
|
/*
|
10626
10625
|
* Licensed Materials - Property of IBM
|
10627
10626
|
* 5724-Q36
|
@@ -17715,6 +17714,7 @@ li.cds--accordion__item--disabled:last-of-type {
|
|
17715
17714
|
overflow: visible;
|
17716
17715
|
}
|
17717
17716
|
.cds--accordion__item--active .cds--accordion__wrapper {
|
17717
|
+
max-block-size: fit-content;
|
17718
17718
|
opacity: 1;
|
17719
17719
|
padding-block: 0.5rem;
|
17720
17720
|
padding-block-end: 1.5rem;
|
@@ -30929,7 +30929,6 @@ optgroup.cds--select-optgroup:disabled,
|
|
30929
30929
|
.cds--modal-container {
|
30930
30930
|
position: fixed;
|
30931
30931
|
display: grid;
|
30932
|
-
overflow: hidden;
|
30933
30932
|
background-color: var(--cds-layer);
|
30934
30933
|
block-size: 100%;
|
30935
30934
|
grid-template-columns: 100%;
|
@@ -31246,6 +31245,28 @@ optgroup.cds--select-optgroup:disabled,
|
|
31246
31245
|
margin: 0;
|
31247
31246
|
}
|
31248
31247
|
|
31248
|
+
.cds--modal--slug .cds--modal-container {
|
31249
|
+
background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) 0%, var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) 0%, var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
|
31250
|
+
background-color: var(--cds-layer);
|
31251
|
+
}
|
31252
|
+
|
31253
|
+
.cds--modal--slug .cds--modal-container:has(.cds--btn-set:not(.cds--modal-footer--three-button) > button:not(:only-child)) {
|
31254
|
+
background: linear-gradient(0deg, var(--cds-slug-callout-aura-start, rgba(237, 245, 255, 0.6)) calc(0% + 64px), var(--cds-slug-callout-aura-end, rgba(255, 255, 255, 0)) 50%, transparent 50%), linear-gradient(180deg, var(--cds-slug-callout-gradient-top, rgba(244, 244, 244, 0.85)) calc(0% + 64px), var(--cds-slug-callout-gradient-bottom, rgba(224, 224, 224, 0.85)) 100%) rgba(0, 0, 0, 0.01);
|
31255
|
+
background-color: var(--cds-layer);
|
31256
|
+
}
|
31257
|
+
|
31258
|
+
.cds--modal--slug .cds--slug {
|
31259
|
+
position: absolute;
|
31260
|
+
inset-block-start: 0;
|
31261
|
+
inset-inline-end: 0;
|
31262
|
+
}
|
31263
|
+
|
31264
|
+
.cds--modal-header > .cds--slug:has(+ .cds--modal-close),
|
31265
|
+
.cds--modal-header > .cds--modal-close ~ .cds--slug,
|
31266
|
+
.cds--modal--slug .cds--modal-container-body > .cds--slug {
|
31267
|
+
inset-inline-end: 3rem;
|
31268
|
+
}
|
31269
|
+
|
31249
31270
|
/* stylelint-disable */
|
31250
31271
|
@media screen and (-ms-high-contrast: active), (forced-colors: active) {
|
31251
31272
|
.cds--modal-close__icon {
|
@@ -34053,6 +34074,94 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
34053
34074
|
}
|
34054
34075
|
|
34055
34076
|
/* stylelint-enable */
|
34077
|
+
.cds--toggletip-label {
|
34078
|
+
font-size: var(--cds-body-01-font-size, 0.875rem);
|
34079
|
+
font-weight: var(--cds-body-01-font-weight, 400);
|
34080
|
+
line-height: var(--cds-body-01-line-height, 1.42857);
|
34081
|
+
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
34082
|
+
color: var(--cds-text-secondary, #525252);
|
34083
|
+
margin-inline-end: 0.5rem;
|
34084
|
+
}
|
34085
|
+
|
34086
|
+
.cds--toggletip-button {
|
34087
|
+
box-sizing: border-box;
|
34088
|
+
padding: 0;
|
34089
|
+
border: 0;
|
34090
|
+
margin: 0;
|
34091
|
+
font-family: inherit;
|
34092
|
+
font-size: 100%;
|
34093
|
+
vertical-align: baseline;
|
34094
|
+
display: inline-block;
|
34095
|
+
padding: 0;
|
34096
|
+
border: 0;
|
34097
|
+
appearance: none;
|
34098
|
+
background: none;
|
34099
|
+
cursor: pointer;
|
34100
|
+
text-align: start;
|
34101
|
+
inline-size: 100%;
|
34102
|
+
display: flex;
|
34103
|
+
align-items: center;
|
34104
|
+
}
|
34105
|
+
.cds--toggletip-button *,
|
34106
|
+
.cds--toggletip-button *::before,
|
34107
|
+
.cds--toggletip-button *::after {
|
34108
|
+
box-sizing: inherit;
|
34109
|
+
}
|
34110
|
+
.cds--toggletip-button::-moz-focus-inner {
|
34111
|
+
border: 0;
|
34112
|
+
}
|
34113
|
+
|
34114
|
+
.cds--toggletip-button svg {
|
34115
|
+
fill: var(--cds-icon-secondary, #525252);
|
34116
|
+
}
|
34117
|
+
|
34118
|
+
.cds--toggletip-button:hover svg,
|
34119
|
+
.cds--toggletip--open .cds--toggletip-button svg {
|
34120
|
+
fill: var(--cds-icon-primary, #161616);
|
34121
|
+
}
|
34122
|
+
|
34123
|
+
.cds--toggletip-button:focus {
|
34124
|
+
outline: 1px solid var(--cds-focus, #0f62fe);
|
34125
|
+
}
|
34126
|
+
@media screen and (prefers-contrast) {
|
34127
|
+
.cds--toggletip-button:focus {
|
34128
|
+
outline-style: dotted;
|
34129
|
+
}
|
34130
|
+
}
|
34131
|
+
|
34132
|
+
.cds--toggletip {
|
34133
|
+
--cds-popover-offset: 0.8125rem;
|
34134
|
+
}
|
34135
|
+
|
34136
|
+
.cds--toggletip-content {
|
34137
|
+
--cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
|
34138
|
+
--cds-link-text-color: var(--cds-link-inverse, #78a9ff);
|
34139
|
+
--cds-link-hover-text-color: var(--cds-link-inverse, #78a9ff);
|
34140
|
+
--cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
|
34141
|
+
font-size: var(--cds-body-01-font-size, 0.875rem);
|
34142
|
+
font-weight: var(--cds-body-01-font-weight, 400);
|
34143
|
+
line-height: var(--cds-body-01-line-height, 1.42857);
|
34144
|
+
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
34145
|
+
display: grid;
|
34146
|
+
padding: 1rem;
|
34147
|
+
max-inline-size: 18rem;
|
34148
|
+
row-gap: 1rem;
|
34149
|
+
}
|
34150
|
+
|
34151
|
+
.cds--toggletip-content p {
|
34152
|
+
font-size: var(--cds-body-01-font-size, 0.875rem);
|
34153
|
+
font-weight: var(--cds-body-01-font-weight, 400);
|
34154
|
+
line-height: var(--cds-body-01-line-height, 1.42857);
|
34155
|
+
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
34156
|
+
}
|
34157
|
+
|
34158
|
+
.cds--toggletip-actions {
|
34159
|
+
display: flex;
|
34160
|
+
align-items: center;
|
34161
|
+
justify-content: space-between;
|
34162
|
+
column-gap: 1rem;
|
34163
|
+
}
|
34164
|
+
|
34056
34165
|
.cds--slug {
|
34057
34166
|
display: flex;
|
34058
34167
|
}
|
@@ -35764,94 +35873,6 @@ span.cds--pagination__text.cds--pagination__items-count {
|
|
35764
35873
|
fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
|
35765
35874
|
}
|
35766
35875
|
|
35767
|
-
.cds--toggletip-label {
|
35768
|
-
font-size: var(--cds-body-01-font-size, 0.875rem);
|
35769
|
-
font-weight: var(--cds-body-01-font-weight, 400);
|
35770
|
-
line-height: var(--cds-body-01-line-height, 1.42857);
|
35771
|
-
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
35772
|
-
color: var(--cds-text-secondary, #525252);
|
35773
|
-
margin-inline-end: 0.5rem;
|
35774
|
-
}
|
35775
|
-
|
35776
|
-
.cds--toggletip-button {
|
35777
|
-
box-sizing: border-box;
|
35778
|
-
padding: 0;
|
35779
|
-
border: 0;
|
35780
|
-
margin: 0;
|
35781
|
-
font-family: inherit;
|
35782
|
-
font-size: 100%;
|
35783
|
-
vertical-align: baseline;
|
35784
|
-
display: inline-block;
|
35785
|
-
padding: 0;
|
35786
|
-
border: 0;
|
35787
|
-
appearance: none;
|
35788
|
-
background: none;
|
35789
|
-
cursor: pointer;
|
35790
|
-
text-align: start;
|
35791
|
-
inline-size: 100%;
|
35792
|
-
display: flex;
|
35793
|
-
align-items: center;
|
35794
|
-
}
|
35795
|
-
.cds--toggletip-button *,
|
35796
|
-
.cds--toggletip-button *::before,
|
35797
|
-
.cds--toggletip-button *::after {
|
35798
|
-
box-sizing: inherit;
|
35799
|
-
}
|
35800
|
-
.cds--toggletip-button::-moz-focus-inner {
|
35801
|
-
border: 0;
|
35802
|
-
}
|
35803
|
-
|
35804
|
-
.cds--toggletip-button svg {
|
35805
|
-
fill: var(--cds-icon-secondary, #525252);
|
35806
|
-
}
|
35807
|
-
|
35808
|
-
.cds--toggletip-button:hover svg,
|
35809
|
-
.cds--toggletip--open .cds--toggletip-button svg {
|
35810
|
-
fill: var(--cds-icon-primary, #161616);
|
35811
|
-
}
|
35812
|
-
|
35813
|
-
.cds--toggletip-button:focus {
|
35814
|
-
outline: 1px solid var(--cds-focus, #0f62fe);
|
35815
|
-
}
|
35816
|
-
@media screen and (prefers-contrast) {
|
35817
|
-
.cds--toggletip-button:focus {
|
35818
|
-
outline-style: dotted;
|
35819
|
-
}
|
35820
|
-
}
|
35821
|
-
|
35822
|
-
.cds--toggletip {
|
35823
|
-
--cds-popover-offset: 0.8125rem;
|
35824
|
-
}
|
35825
|
-
|
35826
|
-
.cds--toggletip-content {
|
35827
|
-
--cds-button-focus-color: var(--cds-focus-inverse, #ffffff);
|
35828
|
-
--cds-link-text-color: var(--cds-link-inverse, #78a9ff);
|
35829
|
-
--cds-link-hover-text-color: var(--cds-link-inverse, #78a9ff);
|
35830
|
-
--cds-link-focus-text-color: var(--cds-focus-inverse, #ffffff);
|
35831
|
-
font-size: var(--cds-body-01-font-size, 0.875rem);
|
35832
|
-
font-weight: var(--cds-body-01-font-weight, 400);
|
35833
|
-
line-height: var(--cds-body-01-line-height, 1.42857);
|
35834
|
-
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
35835
|
-
display: grid;
|
35836
|
-
padding: 1rem;
|
35837
|
-
max-inline-size: 18rem;
|
35838
|
-
row-gap: 1rem;
|
35839
|
-
}
|
35840
|
-
|
35841
|
-
.cds--toggletip-content p {
|
35842
|
-
font-size: var(--cds-body-01-font-size, 0.875rem);
|
35843
|
-
font-weight: var(--cds-body-01-font-weight, 400);
|
35844
|
-
line-height: var(--cds-body-01-line-height, 1.42857);
|
35845
|
-
letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
|
35846
|
-
}
|
35847
|
-
|
35848
|
-
.cds--toggletip-actions {
|
35849
|
-
display: flex;
|
35850
|
-
align-items: center;
|
35851
|
-
justify-content: space-between;
|
35852
|
-
column-gap: 1rem;
|
35853
|
-
}
|
35854
|
-
|
35855
35876
|
.cds--toggle {
|
35856
35877
|
display: inline-block;
|
35857
35878
|
user-select: none;
|