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

Sign up to get free protection for your applications and to get access to all the features.
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);