@carbon/ibm-products 2.3.2 → 2.4.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 (47) hide show
  1. package/css/index-full-carbon.css +235 -110
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +24 -24
  6. package/css/index-without-carbon-released-only.min.css +1 -1
  7. package/css/index-without-carbon.css +59 -54
  8. package/css/index-without-carbon.css.map +1 -1
  9. package/css/index-without-carbon.min.css +2 -2
  10. package/css/index-without-carbon.min.css.map +1 -1
  11. package/css/index.css +122 -38
  12. package/css/index.css.map +1 -1
  13. package/css/index.min.css +3 -3
  14. package/css/index.min.css.map +1 -1
  15. package/es/components/Datagrid/Datagrid/Datagrid.js +5 -1
  16. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +15 -21
  17. package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -20
  18. package/es/components/Datagrid/Datagrid.docs-page.js +123 -0
  19. package/es/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +13 -0
  20. package/es/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +13 -0
  21. package/es/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +47 -0
  22. package/es/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +13 -0
  23. package/es/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +57 -0
  24. package/es/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +13 -0
  25. package/es/components/Datagrid/utils/DatagridActions.js +1 -1
  26. package/es/components/Datagrid/utils/getArgTypes.js +4 -0
  27. package/es/components/FilterSummary/FilterSummary.js +7 -3
  28. package/es/components/OptionsTile/OptionsTile.js +8 -1
  29. package/es/global/js/utils/StoryDocsPage.js +6 -2
  30. package/lib/components/Datagrid/Datagrid/Datagrid.js +5 -1
  31. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js +14 -20
  32. package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +6 -23
  33. package/lib/components/Datagrid/Datagrid.docs-page.js +134 -0
  34. package/lib/components/Datagrid/Extensions/ColumnAlignment/ColumnAlignment.docs-page.js +21 -0
  35. package/lib/components/Datagrid/Extensions/ColumnCustomization/ColumnCustomization.docs-page.js +21 -0
  36. package/lib/components/Datagrid/Extensions/EditableCell/EditableCell.docs-page.js +55 -0
  37. package/lib/components/Datagrid/Extensions/ExpandableRow/ExpandableRow.docs-page.js +21 -0
  38. package/lib/components/Datagrid/Extensions/Filtering/Filtering.docs-page.js +65 -0
  39. package/lib/components/Datagrid/Extensions/RowActionButtons/RowActionButtons.docs-page.js +21 -0
  40. package/lib/components/Datagrid/utils/DatagridActions.js +1 -1
  41. package/lib/components/Datagrid/utils/getArgTypes.js +4 -0
  42. package/lib/components/FilterSummary/FilterSummary.js +7 -3
  43. package/lib/components/OptionsTile/OptionsTile.js +8 -1
  44. package/lib/global/js/utils/StoryDocsPage.js +6 -2
  45. package/package.json +16 -16
  46. package/scss/components/Datagrid/_datagrid.scss +17 -10
  47. package/scss/components/FilterSummary/_storybook-styles.scss +2 -0
package/css/index-without-carbon.css CHANGED
@@ -2942,15 +2942,15 @@ p.c4p--about-modal__copyright-text:first-child {
2942
2942
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2943
2943
  }
2944
2944
 
2945
- .cds--layout-constraint--size\:default-xs {
2945
+ .cds--layout-constraint--size__default-xs {
2946
2946
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
2947
2947
  }
2948
2948
 
2949
- .cds--layout-constraint--size\:min-xs {
2949
+ .cds--layout-constraint--size__min-xs {
2950
2950
  --cds-layout-size-height-min: var(--cds-layout-size-height-xs, 1.5rem);
2951
2951
  }
2952
2952
 
2953
- .cds--layout-constraint--size\:max-xs {
2953
+ .cds--layout-constraint--size__max-xs {
2954
2954
  --cds-layout-size-height-max: var(--cds-layout-size-height-xs, 1.5rem);
2955
2955
  }
2956
2956
 
@@ -2959,15 +2959,15 @@ p.c4p--about-modal__copyright-text:first-child {
2959
2959
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2960
2960
  }
2961
2961
 
2962
- .cds--layout-constraint--size\:default-sm {
2962
+ .cds--layout-constraint--size__default-sm {
2963
2963
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
2964
2964
  }
2965
2965
 
2966
- .cds--layout-constraint--size\:min-sm {
2966
+ .cds--layout-constraint--size__min-sm {
2967
2967
  --cds-layout-size-height-min: var(--cds-layout-size-height-sm, 2rem);
2968
2968
  }
2969
2969
 
2970
- .cds--layout-constraint--size\:max-sm {
2970
+ .cds--layout-constraint--size__max-sm {
2971
2971
  --cds-layout-size-height-max: var(--cds-layout-size-height-sm, 2rem);
2972
2972
  }
2973
2973
 
@@ -2976,15 +2976,15 @@ p.c4p--about-modal__copyright-text:first-child {
2976
2976
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2977
2977
  }
2978
2978
 
2979
- .cds--layout-constraint--size\:default-md {
2979
+ .cds--layout-constraint--size__default-md {
2980
2980
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
2981
2981
  }
2982
2982
 
2983
- .cds--layout-constraint--size\:min-md {
2983
+ .cds--layout-constraint--size__min-md {
2984
2984
  --cds-layout-size-height-min: var(--cds-layout-size-height-md, 2.5rem);
2985
2985
  }
2986
2986
 
2987
- .cds--layout-constraint--size\:max-md {
2987
+ .cds--layout-constraint--size__max-md {
2988
2988
  --cds-layout-size-height-max: var(--cds-layout-size-height-md, 2.5rem);
2989
2989
  }
2990
2990
 
@@ -2993,15 +2993,15 @@ p.c4p--about-modal__copyright-text:first-child {
2993
2993
  --cds-layout-size-height: var(--cds-layout-size-height-context);
2994
2994
  }
2995
2995
 
2996
- .cds--layout-constraint--size\:default-lg {
2996
+ .cds--layout-constraint--size__default-lg {
2997
2997
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
2998
2998
  }
2999
2999
 
3000
- .cds--layout-constraint--size\:min-lg {
3000
+ .cds--layout-constraint--size__min-lg {
3001
3001
  --cds-layout-size-height-min: var(--cds-layout-size-height-lg, 3rem);
3002
3002
  }
3003
3003
 
3004
- .cds--layout-constraint--size\:max-lg {
3004
+ .cds--layout-constraint--size__max-lg {
3005
3005
  --cds-layout-size-height-max: var(--cds-layout-size-height-lg, 3rem);
3006
3006
  }
3007
3007
 
@@ -3010,15 +3010,15 @@ p.c4p--about-modal__copyright-text:first-child {
3010
3010
  --cds-layout-size-height: var(--cds-layout-size-height-context);
3011
3011
  }
3012
3012
 
3013
- .cds--layout-constraint--size\:default-xl {
3013
+ .cds--layout-constraint--size__default-xl {
3014
3014
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
3015
3015
  }
3016
3016
 
3017
- .cds--layout-constraint--size\:min-xl {
3017
+ .cds--layout-constraint--size__min-xl {
3018
3018
  --cds-layout-size-height-min: var(--cds-layout-size-height-xl, 4rem);
3019
3019
  }
3020
3020
 
3021
- .cds--layout-constraint--size\:max-xl {
3021
+ .cds--layout-constraint--size__max-xl {
3022
3022
  --cds-layout-size-height-max: var(--cds-layout-size-height-xl, 4rem);
3023
3023
  }
3024
3024
 
@@ -3027,15 +3027,15 @@ p.c4p--about-modal__copyright-text:first-child {
3027
3027
  --cds-layout-size-height: var(--cds-layout-size-height-context);
3028
3028
  }
3029
3029
 
3030
- .cds--layout-constraint--size\:default-2xl {
3030
+ .cds--layout-constraint--size__default-2xl {
3031
3031
  --cds-layout-size-height: var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
3032
3032
  }
3033
3033
 
3034
- .cds--layout-constraint--size\:min-2xl {
3034
+ .cds--layout-constraint--size__min-2xl {
3035
3035
  --cds-layout-size-height-min: var(--cds-layout-size-height-2xl, 5rem);
3036
3036
  }
3037
3037
 
3038
- .cds--layout-constraint--size\:max-2xl {
3038
+ .cds--layout-constraint--size__max-2xl {
3039
3039
  --cds-layout-size-height-max: var(--cds-layout-size-height-2xl, 5rem);
3040
3040
  }
3041
3041
 
@@ -3044,15 +3044,15 @@ p.c4p--about-modal__copyright-text:first-child {
3044
3044
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3045
3045
  }
3046
3046
 
3047
- .cds--layout-constraint--density\:default-condensed {
3047
+ .cds--layout-constraint--density__default-condensed {
3048
3048
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
3049
3049
  }
3050
3050
 
3051
- .cds--layout-constraint--density\:min-condensed {
3051
+ .cds--layout-constraint--density__min-condensed {
3052
3052
  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3053
3053
  }
3054
3054
 
3055
- .cds--layout-constraint--density\:max-condensed {
3055
+ .cds--layout-constraint--density__max-condensed {
3056
3056
  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-condensed, 0.5rem);
3057
3057
  }
3058
3058
 
@@ -3061,15 +3061,15 @@ p.c4p--about-modal__copyright-text:first-child {
3061
3061
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context);
3062
3062
  }
3063
3063
 
3064
- .cds--layout-constraint--density\:default-normal {
3064
+ .cds--layout-constraint--density__default-normal {
3065
3065
  --cds-layout-density-padding-inline: var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
3066
3066
  }
3067
3067
 
3068
- .cds--layout-constraint--density\:min-normal {
3068
+ .cds--layout-constraint--density__min-normal {
3069
3069
  --cds-layout-density-padding-inline-min: var(--cds-layout-density-padding-inline-normal, 1rem);
3070
3070
  }
3071
3071
 
3072
- .cds--layout-constraint--density\:max-normal {
3072
+ .cds--layout-constraint--density__max-normal {
3073
3073
  --cds-layout-density-padding-inline-max: var(--cds-layout-density-padding-inline-normal, 1rem);
3074
3074
  }
3075
3075
 
@@ -11864,14 +11864,19 @@ th.c4p--datagrid__select-all-toggle-on.button {
11864
11864
  .c4p--datagrid__datagridWrap :global(.cds--checkbox) {
11865
11865
  display: none;
11866
11866
  }
11867
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11868
- left: 0.125rem;
11869
- width: 112px;
11867
+
11868
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .cds--popover-container .cds--btn--icon-only {
11869
+ display: flex;
11870
+ width: 3rem;
11871
+ height: 3rem;
11872
+ align-items: center;
11873
+ justify-content: center;
11874
+ padding-top: 0;
11870
11875
  }
11871
11876
 
11872
- .c4p--datagrid__datagridWrap .cds--overflow-menu-options > .c4p--datagrid__row-size-dropdown {
11873
- left: 0.125rem;
11874
- width: 112px;
11877
+ .c4p--datagrid .c4p--datagrid__row-size-options-container .c4p--datagrid__row-size-dropdown {
11878
+ padding: 1rem;
11879
+ background-color: var(--cds-layer);
11875
11880
  }
11876
11881
 
11877
11882
  .c4p--datagrid__datagridWrap-simple {
@@ -13938,15 +13943,15 @@ a.cds--side-nav__link--current::before {
13938
13943
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13939
13944
  }
13940
13945
 
13941
- .cds--layout-constraint--size\:default-xs {
13946
+ .cds--layout-constraint--size__default-xs {
13942
13947
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xs, 1.5rem));
13943
13948
  }
13944
13949
 
13945
- .cds--layout-constraint--size\:min-xs {
13950
+ .cds--layout-constraint--size__min-xs {
13946
13951
  --cds-layout-size-height-min:var(--cds-layout-size-height-xs, 1.5rem);
13947
13952
  }
13948
13953
 
13949
- .cds--layout-constraint--size\:max-xs {
13954
+ .cds--layout-constraint--size__max-xs {
13950
13955
  --cds-layout-size-height-max:var(--cds-layout-size-height-xs, 1.5rem);
13951
13956
  }
13952
13957
 
@@ -13955,15 +13960,15 @@ a.cds--side-nav__link--current::before {
13955
13960
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13956
13961
  }
13957
13962
 
13958
- .cds--layout-constraint--size\:default-sm {
13963
+ .cds--layout-constraint--size__default-sm {
13959
13964
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-sm, 2rem));
13960
13965
  }
13961
13966
 
13962
- .cds--layout-constraint--size\:min-sm {
13967
+ .cds--layout-constraint--size__min-sm {
13963
13968
  --cds-layout-size-height-min:var(--cds-layout-size-height-sm, 2rem);
13964
13969
  }
13965
13970
 
13966
- .cds--layout-constraint--size\:max-sm {
13971
+ .cds--layout-constraint--size__max-sm {
13967
13972
  --cds-layout-size-height-max:var(--cds-layout-size-height-sm, 2rem);
13968
13973
  }
13969
13974
 
@@ -13972,15 +13977,15 @@ a.cds--side-nav__link--current::before {
13972
13977
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13973
13978
  }
13974
13979
 
13975
- .cds--layout-constraint--size\:default-md {
13980
+ .cds--layout-constraint--size__default-md {
13976
13981
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-md, 2.5rem));
13977
13982
  }
13978
13983
 
13979
- .cds--layout-constraint--size\:min-md {
13984
+ .cds--layout-constraint--size__min-md {
13980
13985
  --cds-layout-size-height-min:var(--cds-layout-size-height-md, 2.5rem);
13981
13986
  }
13982
13987
 
13983
- .cds--layout-constraint--size\:max-md {
13988
+ .cds--layout-constraint--size__max-md {
13984
13989
  --cds-layout-size-height-max:var(--cds-layout-size-height-md, 2.5rem);
13985
13990
  }
13986
13991
 
@@ -13989,15 +13994,15 @@ a.cds--side-nav__link--current::before {
13989
13994
  --cds-layout-size-height:var(--cds-layout-size-height-context);
13990
13995
  }
13991
13996
 
13992
- .cds--layout-constraint--size\:default-lg {
13997
+ .cds--layout-constraint--size__default-lg {
13993
13998
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-lg, 3rem));
13994
13999
  }
13995
14000
 
13996
- .cds--layout-constraint--size\:min-lg {
14001
+ .cds--layout-constraint--size__min-lg {
13997
14002
  --cds-layout-size-height-min:var(--cds-layout-size-height-lg, 3rem);
13998
14003
  }
13999
14004
 
14000
- .cds--layout-constraint--size\:max-lg {
14005
+ .cds--layout-constraint--size__max-lg {
14001
14006
  --cds-layout-size-height-max:var(--cds-layout-size-height-lg, 3rem);
14002
14007
  }
14003
14008
 
@@ -14006,15 +14011,15 @@ a.cds--side-nav__link--current::before {
14006
14011
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14007
14012
  }
14008
14013
 
14009
- .cds--layout-constraint--size\:default-xl {
14014
+ .cds--layout-constraint--size__default-xl {
14010
14015
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-xl, 4rem));
14011
14016
  }
14012
14017
 
14013
- .cds--layout-constraint--size\:min-xl {
14018
+ .cds--layout-constraint--size__min-xl {
14014
14019
  --cds-layout-size-height-min:var(--cds-layout-size-height-xl, 4rem);
14015
14020
  }
14016
14021
 
14017
- .cds--layout-constraint--size\:max-xl {
14022
+ .cds--layout-constraint--size__max-xl {
14018
14023
  --cds-layout-size-height-max:var(--cds-layout-size-height-xl, 4rem);
14019
14024
  }
14020
14025
 
@@ -14023,15 +14028,15 @@ a.cds--side-nav__link--current::before {
14023
14028
  --cds-layout-size-height:var(--cds-layout-size-height-context);
14024
14029
  }
14025
14030
 
14026
- .cds--layout-constraint--size\:default-2xl {
14031
+ .cds--layout-constraint--size__default-2xl {
14027
14032
  --cds-layout-size-height:var(--cds-layout-size-height-context, var(--cds-layout-size-height-2xl, 5rem));
14028
14033
  }
14029
14034
 
14030
- .cds--layout-constraint--size\:min-2xl {
14035
+ .cds--layout-constraint--size__min-2xl {
14031
14036
  --cds-layout-size-height-min:var(--cds-layout-size-height-2xl, 5rem);
14032
14037
  }
14033
14038
 
14034
- .cds--layout-constraint--size\:max-2xl {
14039
+ .cds--layout-constraint--size__max-2xl {
14035
14040
  --cds-layout-size-height-max:var(--cds-layout-size-height-2xl, 5rem);
14036
14041
  }
14037
14042
 
@@ -14040,15 +14045,15 @@ a.cds--side-nav__link--current::before {
14040
14045
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14041
14046
  }
14042
14047
 
14043
- .cds--layout-constraint--density\:default-condensed {
14048
+ .cds--layout-constraint--density__default-condensed {
14044
14049
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-condensed, 0.5rem));
14045
14050
  }
14046
14051
 
14047
- .cds--layout-constraint--density\:min-condensed {
14052
+ .cds--layout-constraint--density__min-condensed {
14048
14053
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14049
14054
  }
14050
14055
 
14051
- .cds--layout-constraint--density\:max-condensed {
14056
+ .cds--layout-constraint--density__max-condensed {
14052
14057
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed, 0.5rem);
14053
14058
  }
14054
14059
 
@@ -14057,15 +14062,15 @@ a.cds--side-nav__link--current::before {
14057
14062
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context);
14058
14063
  }
14059
14064
 
14060
- .cds--layout-constraint--density\:default-normal {
14065
+ .cds--layout-constraint--density__default-normal {
14061
14066
  --cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context, var(--cds-layout-density-padding-inline-normal, 1rem));
14062
14067
  }
14063
14068
 
14064
- .cds--layout-constraint--density\:min-normal {
14069
+ .cds--layout-constraint--density__min-normal {
14065
14070
  --cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal, 1rem);
14066
14071
  }
14067
14072
 
14068
- .cds--layout-constraint--density\:max-normal {
14073
+ .cds--layout-constraint--density__max-normal {
14069
14074
  --cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal, 1rem);
14070
14075
  }
14071
14076