@carbon/ibm-products 2.0.0-rc.26 → 2.0.0-rc.27

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 (49) hide show
  1. package/css/index-full-carbon.css +60 -30
  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 +60 -30
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +2 -2
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +60 -30
  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 +60 -30
  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/Card/Card.js +8 -6
  18. package/es/components/Card/CardHeader.js +2 -2
  19. package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +15 -20
  20. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
  21. package/es/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  22. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -2
  23. package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
  24. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +11 -0
  26. package/es/components/ExpressiveCard/ExpressiveCard.js +3 -3
  27. package/es/components/PageHeader/PageHeader.js +4 -3
  28. package/es/components/ProductiveCard/ProductiveCard.js +3 -3
  29. package/lib/components/Card/Card.js +7 -5
  30. package/lib/components/Card/CardHeader.js +2 -2
  31. package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +14 -19
  32. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +6 -2
  33. package/lib/components/Datagrid/Datagrid/DatagridRefBody.js +3 -1
  34. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -2
  35. package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js +3 -1
  36. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +3 -1
  37. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +11 -0
  38. package/lib/components/ExpressiveCard/ExpressiveCard.js +3 -3
  39. package/lib/components/PageHeader/PageHeader.js +4 -3
  40. package/lib/components/ProductiveCard/ProductiveCard.js +3 -3
  41. package/package.json +2 -2
  42. package/scss/components/ActionBar/_action-bar.scss +0 -4
  43. package/scss/components/Card/_card.scss +13 -6
  44. package/scss/components/ExportModal/_export-modal.scss +0 -4
  45. package/scss/components/ExpressiveCard/_expressive-card.scss +1 -1
  46. package/scss/components/PageHeader/_page-header.scss +2 -3
  47. package/scss/components/ProductiveCard/_productive-card.scss +31 -2
  48. package/scss/components/TagSet/_tag-set.scss +1 -0
  49. package/scss/components/UserProfileImage/_user-profile-image.scss +5 -0
@@ -3951,22 +3951,18 @@
3951
3951
  fill: var(--cds-button-danger-primary, #da1e28);
3952
3952
  }
3953
3953
 
3954
- .cds--modal-content.c4p--export-modal__body-container {
3955
- padding-bottom: 1.5rem;
3956
- }
3957
-
3958
3954
  .c4p--card {
3959
- background: var(--cds-layer-01, #f4f4f4);
3955
+ background-color: var(--cds-layer-01, #f4f4f4);
3960
3956
  color: var(--cds-text-primary, #161616);
3961
3957
  }
3962
3958
 
3963
3959
  .c4p--card__clickable {
3964
3960
  cursor: pointer;
3965
- transition: background 110ms;
3961
+ transition: background-color 110ms;
3966
3962
  }
3967
3963
 
3968
3964
  .c4p--card__clickable:hover {
3969
- background: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
3965
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
3970
3966
  }
3971
3967
 
3972
3968
  .c4p--card__media-left {
@@ -4026,10 +4022,10 @@
4026
4022
  }
4027
4023
 
4028
4024
  .c4p--card__body {
4029
- font-size: var(--cds-body-short-01-font-size, 0.875rem);
4030
- font-weight: var(--cds-body-short-01-font-weight, 400);
4031
- line-height: var(--cds-body-short-01-line-height, 1.28572);
4032
- letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
4025
+ font-size: var(--cds-body-compact-01-font-size, 0.875rem);
4026
+ font-weight: var(--cds-body-compact-01-font-weight, 400);
4027
+ line-height: var(--cds-body-compact-01-line-height, 1.28572);
4028
+ letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
4033
4029
  padding: 1rem;
4034
4030
  padding-top: 0;
4035
4031
  }
@@ -4042,15 +4038,22 @@
4042
4038
  .c4p--card__actions {
4043
4039
  display: flex;
4044
4040
  flex-direction: row;
4045
- margin: 1rem;
4046
- margin-top: 0;
4047
4041
  }
4048
4042
 
4049
4043
  .c4p--card__icon {
4044
+ padding: 0.5rem;
4050
4045
  color: inherit;
4051
4046
  cursor: pointer;
4052
4047
  }
4053
4048
 
4049
+ .c4p--card__icon:hover {
4050
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
4051
+ }
4052
+
4053
+ c4p--card__icon:active {
4054
+ color: var(--cds-link-primary-hover, #0043ce);
4055
+ }
4056
+
4054
4057
  .c4p--card__link {
4055
4058
  color: inherit;
4056
4059
  text-decoration: inherit;
@@ -4062,10 +4065,10 @@
4062
4065
  }
4063
4066
 
4064
4067
  .c4p--card__title {
4065
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
4066
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
4067
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
4068
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
4068
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
4069
+ font-weight: var(--cds-heading-03-font-weight, 400);
4070
+ line-height: var(--cds-heading-03-line-height, 1.4);
4071
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
4069
4072
  }
4070
4073
 
4071
4074
  .c4p--filter-summary {
@@ -6986,9 +6989,6 @@ button.c4p--add-select__global-filter-toggle--open {
6986
6989
  .c4p--action-bar .c4p--action-bar__displayed-items--right {
6987
6990
  justify-content: flex-end;
6988
6991
  }
6989
- .c4p--action-bar .c4p--action-bar-overflow-items {
6990
- display: inline-block;
6991
- }
6992
6992
  .c4p--action-bar .c4p--action-bar__hidden-sizing-items {
6993
6993
  position: absolute;
6994
6994
  top: -100vh;
@@ -7190,6 +7190,7 @@ button.c4p--add-select__global-filter-toggle--open {
7190
7190
  padding: 0;
7191
7191
  margin: 0;
7192
7192
  background-color: inherit;
7193
+ border-radius: 0;
7193
7194
  color: inherit;
7194
7195
  text-overflow: ellipsis;
7195
7196
  white-space: nowrap;
@@ -7716,7 +7717,7 @@ button.c4p--add-select__global-filter-toggle--open {
7716
7717
  .c4p--page-header .c4p--page-header__navigation-row .cds--content-switcher-btn {
7717
7718
  background-color: var(--cds-background, #ffffff);
7718
7719
  }
7719
- .c4p--page-header .cds--btn.cds--btn--icon-only.c4p--page-header__collapse-expand-toggle {
7720
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle {
7720
7721
  position: absolute;
7721
7722
  z-index: 100;
7722
7723
  right: 0;
@@ -7725,7 +7726,7 @@ button.c4p--add-select__global-filter-toggle--open {
7725
7726
  .c4p--page-header .c4p--page-header__collapse-expand-toggle .cds--btn__icon {
7726
7727
  transition: all 400ms cubic-bezier(0.2, 0, 0.38, 0.9);
7727
7728
  }
7728
- .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed .cds--btn__icon {
7729
+ .c4p--page-header .c4p--page-header__collapse-expand-toggle--collapsed svg {
7729
7730
  transform: scaleY(-1);
7730
7731
  }
7731
7732
 
@@ -7752,16 +7753,16 @@ button.c4p--add-select__global-filter-toggle--open {
7752
7753
  padding-right: 0;
7753
7754
  }
7754
7755
  .c4p--card__productive .c4p--card__title {
7755
- font-size: var(--cds-productive-heading-02-font-size, 1rem);
7756
- font-weight: var(--cds-productive-heading-02-font-weight, 600);
7757
- line-height: var(--cds-productive-heading-02-line-height, 1.375);
7758
- letter-spacing: var(--cds-productive-heading-02-letter-spacing, 0);
7756
+ font-size: var(--cds-heading-compact-02-font-size, 1rem);
7757
+ font-weight: var(--cds-heading-compact-02-font-weight, 600);
7758
+ line-height: var(--cds-heading-compact-02-line-height, 1.375);
7759
+ letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
7759
7760
  }
7760
7761
  .c4p--card__productive .c4p--card__title-lg .c4p--card__title {
7761
- font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
7762
- font-weight: var(--cds-productive-heading-03-font-weight, 400);
7763
- line-height: var(--cds-productive-heading-03-line-height, 1.4);
7764
- letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
7762
+ font-size: var(--cds-heading-03-font-size, 1.25rem);
7763
+ font-weight: var(--cds-heading-03-font-weight, 400);
7764
+ line-height: var(--cds-heading-03-line-height, 1.4);
7765
+ letter-spacing: var(--cds-heading-03-letter-spacing, 0);
7765
7766
  }
7766
7767
  .c4p--card__productive .c4p--card__body {
7767
7768
  padding-top: 0.5rem;
@@ -7775,12 +7776,36 @@ button.c4p--add-select__global-filter-toggle--open {
7775
7776
  justify-content: flex-end;
7776
7777
  }
7777
7778
  .c4p--card__productive .c4p--card__actions {
7779
+ min-height: 2rem;
7778
7780
  margin: 0;
7779
7781
  }
7780
7782
  .c4p--card__productive .c4p--card__actions-header {
7781
7783
  margin-top: calc(-1 * 0.25rem);
7782
7784
  margin-right: 0.5rem;
7783
7785
  }
7786
+ .c4p--card__productive .c4p--card__actions-header-ghost-button {
7787
+ min-height: 2rem;
7788
+ padding: 0 1rem;
7789
+ padding-right: 0.625rem;
7790
+ padding-left: 0.625rem;
7791
+ /* stylelint-disable-next-line max-nesting-depth */
7792
+ /* stylelint-disable-next-line max-nesting-depth */
7793
+ }
7794
+ .c4p--card__productive .c4p--card__actions-header-ghost-button::before {
7795
+ position: absolute;
7796
+ left: 0;
7797
+ width: 0.05rem;
7798
+ height: 1.5rem;
7799
+ background-color: var(--cds-layer-hover-01, #e8e8e8);
7800
+ content: "";
7801
+ opacity: 1;
7802
+ }
7803
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover {
7804
+ /* stylelint-disable-next-line max-nesting-depth */
7805
+ }
7806
+ .c4p--card__productive .c4p--card__actions-header-ghost-button:hover::before {
7807
+ opacity: 0;
7808
+ }
7784
7809
  .c4p--card__productive .c4p--card__title-lg .c4p--card__actions-header,
7785
7810
  .c4p--card__productive .c4p--card__header-has-label .c4p--card__actions-header {
7786
7811
  margin-top: 0;
@@ -9376,6 +9401,11 @@ button.c4p--add-select__global-filter-toggle--open {
9376
9401
  border-radius: 50%;
9377
9402
  }
9378
9403
 
9404
+ .cds--btn--ghost.c4p--user-profile-image__tooltip:focus {
9405
+ border: 0;
9406
+ box-shadow: 0 0 0 0.25rem var(--cds-focus, #0f62fe);
9407
+ }
9408
+
9379
9409
  .cds--tooltip__trigger .c4p--user-profile-image svg,
9380
9410
  .c4p--user-profile-image__tooltip.cds--btn--ghost:not([disabled]) svg {
9381
9411
  fill: var(--cds-layer-01, #f4f4f4);