@carbon/ibm-products 2.19.1 → 2.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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 +5 -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;