@carbon/ibm-products 2.22.0 → 2.23.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 (36) hide show
  1. package/README.md +2 -1
  2. package/css/index-full-carbon.css +32 -110
  3. package/css/index-full-carbon.css.map +1 -1
  4. package/css/index-full-carbon.min.css +1 -1
  5. package/css/index-full-carbon.min.css.map +1 -1
  6. package/css/index-without-carbon-released-only.css +32 -94
  7. package/css/index-without-carbon-released-only.css.map +1 -1
  8. package/css/index-without-carbon-released-only.min.css +1 -1
  9. package/css/index-without-carbon-released-only.min.css.map +1 -1
  10. package/css/index-without-carbon.css +32 -110
  11. package/css/index-without-carbon.css.map +1 -1
  12. package/css/index-without-carbon.min.css +1 -1
  13. package/css/index-without-carbon.min.css.map +1 -1
  14. package/css/index.css +32 -110
  15. package/css/index.css.map +1 -1
  16. package/css/index.min.css +1 -1
  17. package/css/index.min.css.map +1 -1
  18. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
  19. package/es/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +26 -0
  20. package/es/components/Datagrid/useDefaultStringRenderer.js +3 -3
  21. package/es/components/Datagrid/useSortableColumns.js +15 -5
  22. package/es/components/FilterSummary/FilterSummary.js +100 -19
  23. package/es/components/TagSet/TagSet.js +11 -3
  24. package/es/global/js/hooks/useResizeObserver.js +2 -2
  25. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +14 -4
  26. package/lib/components/Datagrid/Datagrid/addons/Slug/ColumnHeaderSlug.js +36 -0
  27. package/lib/components/Datagrid/useDefaultStringRenderer.js +3 -3
  28. package/lib/components/Datagrid/useSortableColumns.js +15 -5
  29. package/lib/components/FilterSummary/FilterSummary.js +103 -23
  30. package/lib/components/TagSet/TagSet.js +11 -3
  31. package/lib/global/js/hooks/useResizeObserver.js +2 -2
  32. package/package.json +3 -3
  33. package/scss/components/CreateSidePanel/_create-side-panel.scss +1 -38
  34. package/scss/components/Datagrid/styles/_datagrid.scss +15 -0
  35. package/scss/components/EditSidePanel/_edit-side-panel.scss +0 -18
  36. package/scss/components/FilterSummary/_filter-summary.scss +22 -1
package/README.md CHANGED
@@ -244,6 +244,7 @@ and
244
244
  <!-- ALL-CONTRIBUTORS-LIST:END -->
245
245
 
246
246
  ## <picture><source height="20" width="20" media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg"><source height="20" width="20" media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"><img height="20" width="20" alt="IBM Telemetry" src="https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg"></picture> IBM Telemetry
247
+
247
248
  This package uses IBM Telemetry to collect metrics data. By installing this
248
249
  package as a dependency you are agreeing to telemetry collection. To opt out,
249
250
  see
@@ -256,4 +257,4 @@ For more information on the data being collected, please see the
256
257
  Licensed under the
257
258
  [Apache-2.0 License](https://github.com/carbon-design-system/ibm-products/blob/master/LICENSE).
258
259
 
259
- [![This site is powered by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)
260
+ [![This site is powered by Netlify](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)
@@ -2771,76 +2771,6 @@ p.c4p--about-modal__copyright-text:first-child {
2771
2771
  padding-right: calc(20% - 1rem);
2772
2772
  }
2773
2773
 
2774
- .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__title-text {
2775
- width: calc(16rem - 1rem);
2776
- padding-right: calc(16rem * 0.2 - 1rem);
2777
- margin-bottom: 0.25rem;
2778
- }
2779
-
2780
- .c4p--create-side-panel.c4p--side-panel__container--xs .c4p--side-panel__subtitle-text {
2781
- width: calc(16rem - 1rem);
2782
- padding-right: calc(16rem * 0.2 - 1rem);
2783
- padding-bottom: 1rem;
2784
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2785
- color: var(--cds-text-secondary, #525252);
2786
- }
2787
-
2788
- .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__title-text {
2789
- width: calc(20rem - 1rem);
2790
- padding-right: calc(20rem * 0.2 - 1rem);
2791
- margin-bottom: 0.25rem;
2792
- }
2793
-
2794
- .c4p--create-side-panel.c4p--side-panel__container--sm .c4p--side-panel__subtitle-text {
2795
- width: calc(20rem - 1rem);
2796
- padding-right: calc(20rem * 0.2 - 1rem);
2797
- padding-bottom: 1rem;
2798
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2799
- color: var(--cds-text-secondary, #525252);
2800
- }
2801
-
2802
- .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__title-text {
2803
- width: calc(30rem - 1rem);
2804
- padding-right: calc(30rem * 0.2 - 1rem);
2805
- margin-bottom: 0.25rem;
2806
- }
2807
-
2808
- .c4p--create-side-panel.c4p--side-panel__container--md .c4p--side-panel__subtitle-text {
2809
- width: calc(30rem - 1rem);
2810
- padding-right: calc(30rem * 0.2 - 1rem);
2811
- padding-bottom: 1rem;
2812
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2813
- color: var(--cds-text-secondary, #525252);
2814
- }
2815
-
2816
- .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__title-text {
2817
- width: calc(40rem - 1rem);
2818
- padding-right: calc(40rem * 0.2 - 1rem);
2819
- margin-bottom: 0.25rem;
2820
- }
2821
-
2822
- .c4p--create-side-panel.c4p--side-panel__container--lg .c4p--side-panel__subtitle-text {
2823
- width: calc(40rem - 1rem);
2824
- padding-right: calc(40rem * 0.2 - 1rem);
2825
- padding-bottom: 1rem;
2826
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2827
- color: var(--cds-text-secondary, #525252);
2828
- }
2829
-
2830
- .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__title-text {
2831
- width: calc(40rem 75% - 1rem);
2832
- padding-right: calc(40rem 75% * 0.2 - 1rem);
2833
- margin-bottom: 0.25rem;
2834
- }
2835
-
2836
- .c4p--create-side-panel.c4p--side-panel__container--2xl .c4p--side-panel__subtitle-text {
2837
- width: calc(40rem 75% - 1rem);
2838
- padding-right: calc(40rem 75% * 0.2 - 1rem);
2839
- padding-bottom: 1rem;
2840
- border-bottom: 1px solid var(--cds-layer-accent-01, #e0e0e0);
2841
- color: var(--cds-text-secondary, #525252);
2842
- }
2843
-
2844
2774
  .cds--form.c4p--create-side-panel__form {
2845
2775
  padding-top: 1rem;
2846
2776
  }
@@ -2872,32 +2802,10 @@ p.c4p--about-modal__copyright-text:first-child {
2872
2802
  display: none;
2873
2803
  }
2874
2804
 
2875
- .c4p--create-side-panel__title {
2876
- font-size: var(--cds-heading-03-font-size, 1.25rem);
2877
- font-weight: var(--cds-heading-03-font-weight, 400);
2878
- line-height: var(--cds-heading-03-line-height, 1.4);
2879
- letter-spacing: var(--cds-heading-03-letter-spacing, 0);
2880
- margin-bottom: 0.25rem;
2881
- }
2882
-
2883
- .c4p--create-side-panel__subtitle {
2884
- font-size: var(--cds-body-compact-01-font-size, 0.875rem);
2885
- font-weight: var(--cds-body-compact-01-font-weight, 400);
2886
- line-height: var(--cds-body-compact-01-line-height, 1.28572);
2887
- letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
2888
- margin-bottom: 0.5rem;
2805
+ .c4p--create-side-panel .c4p--side-panel__subtitle-text {
2889
2806
  color: var(--cds-text-secondary, #525252);
2890
2807
  }
2891
2808
 
2892
- .c4p--side-panel .c4p--create-side-panel__actions-container {
2893
- position: absolute;
2894
- z-index: 4;
2895
- right: 0;
2896
- bottom: 0;
2897
- width: 100%;
2898
- margin-bottom: 0;
2899
- }
2900
-
2901
2809
  .c4p--tearsheet.c4p--tearsheet {
2902
2810
  z-index: 9001;
2903
2811
  align-items: flex-end;
@@ -3602,16 +3510,34 @@ p.c4p--about-modal__copyright-text:first-child {
3602
3510
  width: 100%;
3603
3511
  /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
3604
3512
  height: 3rem;
3605
- align-items: center;
3513
+ align-items: start;
3606
3514
  padding: 0.5rem;
3607
3515
  border-top: 1px solid var(--cds-border-subtle-01, #c6c6c6);
3608
3516
  background: var(--cds-layer-01, #f4f4f4);
3609
3517
  }
3518
+ .c4p--filter-summary.c4p--filter-summary__expanded {
3519
+ height: fit-content;
3520
+ }
3610
3521
 
3611
3522
  .c4p--filter-summary .c4p--tag-set.c4p--tag-set.c4p--filter-summary__clear-button-inline {
3612
3523
  width: auto;
3613
3524
  }
3614
3525
 
3526
+ .c4p--filter-summary__view-all--wrapper {
3527
+ position: absolute;
3528
+ top: 0.5rem;
3529
+ right: 0;
3530
+ }
3531
+
3532
+ .c4p--filter-summary__expanded .c4p--filter-summary__clear-all-button.cds--btn {
3533
+ margin-right: 2rem;
3534
+ }
3535
+
3536
+ .c4p--filter-summary__view-all--wrapper .c4p--filter-summary__view-all--chevron-multiline {
3537
+ transform: rotate(180deg);
3538
+ transition: transform 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
3539
+ }
3540
+
3615
3541
  .c4p--http-errors .c4p--http-errors__content {
3616
3542
  position: fixed;
3617
3543
  z-index: 2;
@@ -8920,22 +8846,6 @@ button.c4p--add-select__global-filter-toggle--open {
8920
8846
  .c4p--edit-side-panel.c4p--side-panel .cds--btn.c4p--side-panel__close-button {
8921
8847
  display: none;
8922
8848
  }
8923
- .c4p--edit-side-panel .c4p--side-panel .c4p--edit-side-panel__actions-container {
8924
- position: absolute;
8925
- z-index: 4;
8926
- bottom: 0;
8927
- left: 0;
8928
- width: 100%;
8929
- margin-bottom: 0;
8930
- }
8931
- .c4p--edit-side-panel .c4p--edit-side-panel__actions-container {
8932
- position: absolute;
8933
- z-index: 4;
8934
- right: 0;
8935
- bottom: 0;
8936
- width: 100%;
8937
- margin-bottom: 0;
8938
- }
8939
8849
 
8940
8850
  .c4p--options-tile {
8941
8851
  position: relative;
@@ -9639,6 +9549,15 @@ button.c4p--add-select__global-filter-toggle--open {
9639
9549
  background-color: var(--cds-background, #ffffff);
9640
9550
  }
9641
9551
 
9552
+ .c4p--datagrid th.c4p--datagrid__with-slug {
9553
+ background-image: linear-gradient(180deg, var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.2)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 100%, transparent 100%);
9554
+ border-block-end-color: var(--cds-ai-border-strong, #4589ff);
9555
+ }
9556
+
9557
+ .c4p--datagrid th.c4p--datagrid__with-slug .cds--slug {
9558
+ margin-left: 0.5rem;
9559
+ }
9560
+
9642
9561
  .c4p--datagrid__grid-container {
9643
9562
  display: block;
9644
9563
  width: 100%;
@@ -9710,6 +9629,9 @@ button.c4p--add-select__global-filter-toggle--open {
9710
9629
  -webkit-line-clamp: 2;
9711
9630
  white-space: initial;
9712
9631
  }
9632
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--slug {
9633
+ width: fit-content;
9634
+ }
9713
9635
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
9714
9636
  display: flex;
9715
9637
  overflow: hidden;