[mercury] Fixed the popover max size not working in some situations for the combo-box and pill components (#637)

* Fixed the popover max size not working in some situations for the combo-box and pill components

* Update yarn.lock

* Update expected values in e2e tests

* Update form--full.json

Author: ncamera

packages/mercury/src/base/_common.scss

@@ -184,7 +184,9 @@
   gap: var(--items-container__gap--small);
 }
 @mixin items-container-max-height() {
-  max-block-size: var(--items-container__max-block-size);
+  --ch-combo-box__popover-max-block-size: var(
+    --items-container__max-block-size
+  );
 }
 @mixin items-container-separator() {
   block-size: var(--items-container-separator__block-size);

packages/mercury/src/components/combo-box/_combo-box-styles.scss

@@ -10,6 +10,7 @@
   --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md);
   --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);
   --ch-combo-box__picker-size: var(--mer-icon__box--md);
+  @include items-container-max-height();
 
   @include body-regular-m();
 
@@ -49,7 +50,6 @@
     @include items-container-colors();
     @include items-container-padding();
     @include items-container-gap();
-    @include items-container-max-height();
     @include items-container-dropdown();
 
     // Reset the font-style to avoid font-style: italic inherit when the

packages/mercury/src/components/pills/_pills-styles.scss

@@ -17,6 +17,7 @@
   --ch-pills-item__background-image-size: 100%;
   --ch-pills-group__expandable-button-size: var(--mer-spacing--md);
   --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm);
+  @include items-container-max-height();
 
   // "control" tokens overrides
   --control__border-radius: var(--mer-spacing--md);
@@ -240,7 +241,6 @@
     @include items-container-padding();
     @include items-container-dropdown();
     @include items-container-gap();
-    @include items-container-max-height();
     @include items-container-border-radius();
     --items-container__border-radius: var(--mer-border__radius--lg);
     // TODO: define a items-container-border-radius-sm() and a

packages/mercury/src/tests/bundles/expected-bundle-content/all.json

@@ -119,7 +119,7 @@
   ".checkbox:hover, .tree-view::part(item__checkbox):hover { --control__border-color: var(--control__border-color--hover); }",
   ".checkbox:hover::part(label) { --label__color: var(--label__color--hover); }",
   ".code { --code__color-base: var(--mer-text__on-surface); --code__color-blue: var(--mer-color__primary--400); --code__color-light-blue: var(--mer-color__primary--200); --code__color-red: var(--mer-color__message-red--200); --code__color-green: var(--mer-color__message-green--200); --code__bg-color: var(--mer-surface__elevation--01); --code__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--03); --code__border-radius: var(--mer-border__radius--sm); --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm); --ch-code__doctag: var(--code__color-blue); --ch-code__keyword: var(--code__color-blue); --ch-code__meta__keyword: var(--code__color-blue); --ch-code__template-tag: var(--code__color-blue); --ch-code__template-variable: var(--code__color-blue); --ch-code__type: var(--code__color-blue); --ch-code__variable-language: var(--code__color-blue); --ch-code__title: var(--code__color-base); --ch-code__title-class: var(--code__color-base); --ch-code__title-class-inherited: var(--code__color-base); --ch-code__title-function: var(--code__color-base); --ch-code__attr: var(--code__color-blue); --ch-code__attribute: var(--code__color-blue); --ch-code__literal: var(--code__color-blue); --ch-code__meta: var(--code__color-blue); --ch-code__number: var(--code__color-blue); --ch-code__operator: var(--code__color-blue); --ch-code__variable: var(--code__color-blue); --ch-code__selector-attr: var(--code__color-blue); --ch-code__selector-class: var(--code__color-blue); --ch-code__selector-id: var(--code__color-blue); --ch-code__regexp: var(--code__color-green); --ch-code__string: var(--code__color-green); --ch-code__meta__string: var(--code__color-green); --ch-code__built-in: var(--code__color-green); --ch-code__symbol: #e36209; --ch-code__comment: var(--code__color-green); --ch-code__code: var(--code__color-green); --ch-code__formula: var(--code__color-green); --ch-code__name: var(--code__color-light-blue); --ch-code__quote: var(--code__color-light-blue); --ch-code__selector-tag: var(--code__color-light-blue); --ch-code__selector-pseudo: var(--code__color-light-blue); --ch-code__subst: #24292e; padding: var(--code__padding); background-color: var(--code__bg-color); border: var(--code__border); border-radius: var(--code__border-radius); font-size: 13px; line-height: 1.55em; overflow: auto; }",
-  ".combo-box, .paginator::part(items-per-page__combo-box) { --ch-combo-box-separation-y: var(--mer-spacing--3xs); --ch-combo-box-item-gap: var(--mer-spacing--xs); --ch-combo-box-item__image-size: var(--mer-icon__box--md); --ch-combo-box-item__background-image-size: 100%; --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); --ch-combo-box__picker-size: var(--mer-icon__box--md); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
+  ".combo-box, .paginator::part(items-per-page__combo-box) { --ch-combo-box-separation-y: var(--mer-spacing--3xs); --ch-combo-box-item-gap: var(--mer-spacing--xs); --ch-combo-box-item__image-size: var(--mer-icon__box--md); --ch-combo-box-item__background-image-size: 100%; --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); --ch-combo-box__picker-size: var(--mer-icon__box--md); --ch-combo-box__popover-max-block-size: var( --items-container__max-block-size ); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
   ".combo-box-error { --control__border-color: var(--control__border-color--error); }",
   ".combo-box.ch-disabled { --control__bg-color: var(--control__background-color--disabled); --control__border-color: var(--control__border-color--disabled); --control__color: var(--control__color--disabled); --ch-placeholder-color: var(--control-placeholder__color--disabled); }",
   ".combo-box.ch-disabled::after { --icon-path: var(--icon__system_chevron-small-down_on-disabled--enabled); }",
@@ -134,7 +134,7 @@
   ".combo-box::part(item nested), .paginator::part(item nested) { padding-inline-start: calc(var(--ch-combo-box-item-gap) + var(--ch-combo-box-group__expandable-button-size) + var(--item__padding-inline)); }",
   ".combo-box::part(item selected), .paginator::part(item selected) { --item__bg-color: var(--item__bg-color--selected); --item__border-color: var(--item__border-color--selected); --item__color: var(--item__color--selected); }",
   ".combo-box::part(item), .paginator::part(item) { background-color: var(--item__bg-color); color: var(--item__color); border: var(--item__border-width) var(--item__border-style) var(--item__border-color); border-radius: var(--item__border-radius); padding-block: var(--item__padding-block); padding-inline: var(--item__padding-inline); }",
-  ".combo-box::part(window), .paginator::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); max-block-size: var(--items-container__max-block-size); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
+  ".combo-box::part(window), .paginator::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
   ".combo-box:focus, .paginator::part(items-per-page__combo-box):focus { border-color: var(--borders-un-border-color__focused); }",
   ".combo-box:hover, .paginator::part(items-per-page__combo-box):hover { --control__border-color: var(--control__border-color--hover); }",
   ".control-footer, .control-footer-with-border { --control-footer-justify-content: end; padding-block-start: var(--mer-spacing--xs); display: flex; justify-content: var(--control-footer-justify-content); align-items: center; }",
@@ -294,7 +294,7 @@
   ".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }",
   ".paginator::part(pages) { gap: var(--mer-spacing--xs); }",
   ".paginator::part(prev__button)::before { --button-arrow-icon: var(--icon__system_chevron-left_primary--enabled); }",
-  ".pill { --ch-pills-separation-y: var(--mer-spacing--3xs); --ch-pills-item-gap: var(--mer-spacing--xs); --ch-pills-item__image-size: var(--mer-spacing--md); --ch-pills-item__background-image-size: 100%; --ch-pills-group__expandable-button-size: var(--mer-spacing--md); --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm); --control__border-radius: var(--mer-spacing--md); --control__padding-inline: var(--mer-spacing--sm); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
+  ".pill { --ch-pills-separation-y: var(--mer-spacing--3xs); --ch-pills-item-gap: var(--mer-spacing--xs); --ch-pills-item__image-size: var(--mer-spacing--md); --ch-pills-item__background-image-size: 100%; --ch-pills-group__expandable-button-size: var(--mer-spacing--md); --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm); --ch-combo-box__popover-max-block-size: var( --items-container__max-block-size ); --control__border-radius: var(--mer-spacing--md); --control__padding-inline: var(--mer-spacing--sm); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
   ".pill { --status-circle-color: var(--control__color); --status-circle-size: 6px; --status-circle-inset-inline-start: 17px; position: relative; padding-inline-start: 36px; }",
   ".pill::before { content: \"\"; position: absolute; background-color: var(--status-circle-color); inset-inline-start: var(--status-circle-inset-inline-start); block-size: var(--status-circle-size); inline-size: var(--status-circle-size); display: inline-block; border-radius: 50%; }",
   ".pill::part(item disabled) { --item__bg-color: var(--item__bg-color--disabled); --item__border-color: var(--item__border-color--disabled); --item__color: var(--item__color--disabled); }",
@@ -306,7 +306,7 @@
   ".pill::part(item success) { background-image: var(--icon__states_pill-filled_success--enabled); }",
   ".pill::part(item warning) { background-image: var(--icon__states_pill-filled_warning--enabled); }",
   ".pill::part(item) { background-color: var(--item__bg-color); color: var(--item__color); border: var(--item__border-width) var(--item__border-style) var(--item__border-color); border-radius: var(--item__border-radius); padding-block: var(--item__padding-block); padding-inline: var(--item__padding-inline); }",
-  ".pill::part(window) { background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); box-shadow: var(--items-container__box-shadow); gap: var(--items-container__gap); max-block-size: var(--items-container__max-block-size); border-radius: var(--items-container__border-radius); --items-container__border-radius: var(--mer-border__radius--lg); }",
+  ".pill::part(window) { background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); box-shadow: var(--items-container__box-shadow); gap: var(--items-container__gap); border-radius: var(--items-container__border-radius); --items-container__border-radius: var(--mer-border__radius--lg); }",
   ".pill:hover { --control__border-color: var(--control__border-color--hover); }",
   ".pill[disabled] { --control__bg-color: var(--control__background-color--disabled); --control__border-color: var(--control__border-color--disabled); --control__color: var(--control__color--disabled); --ch-placeholder-color: var(--control-placeholder__color--disabled); }",
   ".pill[part=\"enabled\"] { --control__border-color: var(--mer-border-color__dim); --control__bg-color: transparent; --control__color: var(--mer-text__neutral); }",

packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json

@@ -1,5 +1,5 @@
 [
-  ".combo-box { --ch-combo-box-separation-y: var(--mer-spacing--3xs); --ch-combo-box-item-gap: var(--mer-spacing--xs); --ch-combo-box-item__image-size: var(--mer-icon__box--md); --ch-combo-box-item__background-image-size: 100%; --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); --ch-combo-box__picker-size: var(--mer-icon__box--md); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
+  ".combo-box { --ch-combo-box-separation-y: var(--mer-spacing--3xs); --ch-combo-box-item-gap: var(--mer-spacing--xs); --ch-combo-box-item__image-size: var(--mer-icon__box--md); --ch-combo-box-item__background-image-size: 100%; --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); --ch-combo-box__picker-size: var(--mer-icon__box--md); --ch-combo-box__popover-max-block-size: var( --items-container__max-block-size ); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); background-color: var(--control__bg-color); color: var(--control__color); --ch-placeholder-color: var(--control-placeholder__color); padding-block: var(--control__padding-block); padding-inline: var(--control__padding-inline); }",
   ".combo-box { font-weight: var(--font-weight-regular); }",
   ".combo-box, .combo-box[part=\"ch-combo-box-render--placeholder\"] { font-size: var(--font-size-body-m); }",
   ".combo-box, .combo-box[part=\"ch-combo-box-render--placeholder\"] { line-height: var(--line-height-tight); }",
@@ -17,7 +17,7 @@
   ".combo-box::part(item nested) { padding-inline-start: calc(var(--ch-combo-box-item-gap) + var(--ch-combo-box-group__expandable-button-size) + var(--item__padding-inline)); }",
   ".combo-box::part(item selected) { --item__bg-color: var(--item__bg-color--selected); --item__border-color: var(--item__border-color--selected); --item__color: var(--item__color--selected); }",
   ".combo-box::part(item) { background-color: var(--item__bg-color); color: var(--item__color); border: var(--item__border-width) var(--item__border-style) var(--item__border-color); border-radius: var(--item__border-radius); padding-block: var(--item__padding-block); padding-inline: var(--item__padding-inline); }",
-  ".combo-box::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); max-block-size: var(--items-container__max-block-size); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
+  ".combo-box::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
   ".combo-box:focus { border-color: var(--borders-un-border-color__focused); }",
   ".combo-box:hover { --control__border-color: var(--control__border-color--hover); }",
   ".combo-box[part=\"ch-combo-box-render--placeholder\"] { font-weight: var(--font-weight-regular); font-style: italic; }",