@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.
Files changed (30) hide show
  1. package/css/index-full-carbon.css +128 -107
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +17 -18
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +17 -18
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +39 -19
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +47 -4
  18. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +6 -2
  19. package/es/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +63 -41
  20. package/es/components/SidePanel/SidePanel.js +6 -1
  21. package/es/components/Tearsheet/TearsheetShell.js +1 -1
  22. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +46 -3
  23. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +5 -1
  24. package/lib/components/Datagrid/Datagrid/addons/Filtering/motion/variants.js +63 -41
  25. package/lib/components/SidePanel/SidePanel.js +6 -1
  26. package/lib/components/Tearsheet/TearsheetShell.js +1 -1
  27. package/package.json +4 -4
  28. package/scss/components/Datagrid/styles/_datagrid.scss +8 -0
  29. package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +11 -8
  30. 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: 1fr 1fr;
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;