[ch-combo-box-render] Added support to customize the max size of the popover and fixed ch-popover not enforcing maximum sizes

src/components/combo-box/combo-box.scss

@@ -89,6 +89,20 @@
    */
   --ch-combo-box__placeholder-color: currentColor;
 
+  /**
+   * @prop --ch-combo-box__popover-max-block-size:
+   * Specifies the maximum block size of the popover. Only px values are supported.
+   * @default auto
+   */
+  --ch-combo-box__popover-max-block-size: auto;
+
+  /**
+   * @prop --ch-combo-box__popover-max-inline-size:
+   * Specifies the maximum inline size of the popover. Only px values are supported.
+   * @default auto
+   */
+  --ch-combo-box__popover-max-inline-size: auto;
+
   /**
    * @prop --ch-combo-box-item-gap:
    * Specifies the spacing between the images, text and the expandable button
@@ -209,6 +223,9 @@ select {
 //           Separation
 // - - - - - - - - - - - - - - - -
 ch-popover {
+  // TODO: Add e2e tests for these assignments
+  --ch-popover-max-inline-size: var(--ch-combo-box__popover-max-inline-size);
+  --ch-popover-max-block-size: var(--ch-combo-box__popover-max-block-size);
   --ch-popover-separation-x: var(--ch-combo-box-separation-x);
   --ch-popover-separation-y: var(--ch-combo-box-separation-y);
 

src/components/combo-box/readme.md

@@ -59,6 +59,8 @@
 | `--ch-combo-box__picker-mask-size`                   | Specifies the image size of the combo-box's picker. @default 100%                                                                                                                                                                                                                                           |
 | `--ch-combo-box__picker-size`                        | Specifies the box size that contains the combo-box's picker. @default 0.875em                                                                                                                                                                                                                               |
 | `--ch-combo-box__placeholder-color`                  | Define the placeholder color when the combo-box does not have a value set. (currentColor by default)                                                                                                                                                                                                        |
+| `--ch-combo-box__popover-max-block-size`             | Specifies the maximum block size of the popover. Only px values are supported. @default auto                                                                                                                                                                                                                |
+| `--ch-combo-box__popover-max-inline-size`            | Specifies the maximum inline size of the popover. Only px values are supported. @default auto                                                                                                                                                                                                               |
 
 
 ## Dependencies

src/components/popover/popover.scss

@@ -31,15 +31,15 @@ $ch-popover-y--same-layer: calc(
   /**
    * @prop --ch-popover-max-block-size:
    * Specifies the maximum block size of the popover. Useful for scenarios where the
-   * popover is resizable.
+   * popover is resizable. Only px values are supported.
    * @default auto
    */
   --ch-popover-max-block-size: auto;
 
   /**
      * @prop --ch-popover-max-inline-size:
      * Specifies the maximum inline size of the popover. Useful for scenarios
-     * where the popover is resizable.
+     * where the popover is resizable. Only px values are supported.
      * @default auto
      */
   --ch-popover-max-inline-size: auto;

src/components/popover/popover.tsx

@@ -49,6 +49,9 @@ const POPOVER_INLINE_SIZE = "--ch-popover-inline-size";
 const POPOVER_MIN_BLOCK_SIZE = "--ch-popover-min-block-size";
 const POPOVER_MIN_INLINE_SIZE = "--ch-popover-min-inline-size";
 
+const POPOVER_MAX_BLOCK_SIZE = "--ch-popover-max-block-size";
+const POPOVER_MAX_INLINE_SIZE = "--ch-popover-max-inline-size";
+
 const POPOVER_FORCED_MAX_BLOCK_SIZE = "--ch-popover-forced-max-block-size";
 const POPOVER_FORCED_MAX_INLINE_SIZE = "--ch-popover-forced-max-inline-size";
 
@@ -721,12 +724,44 @@ export class ChPopover {
       popoverScrollSizes
     );
 
+    // TODO: Add e2e tests for this
+    // We need to check if a maximum width/height for the popover was defined
+    // to give more priority to that value, instead of the actual width/height,
+    // even if the width/height comes from "action-element-as-minimum"
+    const maxInlineSizeCustomVarValue = computedStyle.getPropertyValue(
+      POPOVER_MAX_INLINE_SIZE
+    );
+    const maxBlockSizeCustomVarValue = computedStyle.getPropertyValue(
+      POPOVER_MAX_BLOCK_SIZE
+    );
+
+    let actualPopoverWidth = popoverWidth;
+    let actualPopoverHeight = popoverHeight;
+
+    // We only support "px" for the max-block-size and max-inline-size custom
+    // var values
+    // TODO: Add e2e tests for this
+    try {
+      if (maxInlineSizeCustomVarValue.endsWith("px")) {
+        actualPopoverWidth = Number(
+          maxInlineSizeCustomVarValue.replace("px", "").trim()
+        );
+      }
+      if (maxBlockSizeCustomVarValue.endsWith("px")) {
+        actualPopoverHeight = Number(
+          maxBlockSizeCustomVarValue.replace("px", "").trim()
+        );
+      }
+    } catch {
+      //
+    }
+
     const alignment = setResponsiveAlignment(
       documentRect,
       actionRect,
       actionInlineStart,
-      popoverWidth,
-      popoverHeight,
+      actualPopoverWidth,
+      actualPopoverHeight,
       computedStyle,
       this.inlineAlign,
       this.blockAlign,
@@ -737,8 +772,8 @@ export class ChPopover {
     const blockOverflow = alignment[1].alignmentOverflow;
 
     this.#setOverflowBehavior(
-      popoverWidth,
-      popoverHeight,
+      actualPopoverWidth,
+      actualPopoverHeight,
       inlineOverflow,
       blockOverflow
     );
@@ -832,6 +867,11 @@ export class ChPopover {
       return Math.max(actionRect.height, popoverRect.height);
     }
 
+    // Size is determined by the content
+    if (this.#resizeWasMade || this.blockSizeMatch === "content") {
+      return popoverRect.height;
+    }
+
     // Size is the same as the `actionElement`
     setProperty(this.el, POPOVER_BLOCK_SIZE, actionRect.height);
     return actionRect.height;

src/components/popover/readme.md

@@ -45,17 +45,17 @@ relative to an element, but placed on the top layer using `position: fixed`.
 
 ## CSS Custom Properties
 
-| Name                            | Description                                                                                                          |
-| ------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `--ch-popover-block-size`       | Specifies the block size of the popover. Useful for scenarios where the popover is resizable. @default max-content   |
-| `--ch-popover-inline-size`      | Specifies the inline size of the popover. Useful for scenarios where the popover is resizable. @default max-content  |
-| `--ch-popover-max-block-size`   | Specifies the maximum block size of the popover. Useful for scenarios where the popover is resizable. @default auto  |
-| `--ch-popover-max-inline-size`  | Specifies the maximum inline size of the popover. Useful for scenarios where the popover is resizable. @default auto |
-| `--ch-popover-min-block-size`   | Specifies the minimum block size of the popover. Useful for scenarios where the popover is resizable. @default auto  |
-| `--ch-popover-min-inline-size`  | Specifies the minimum inline size of the popover. Useful for scenarios where the popover is resizable. @default auto |
-| `--ch-popover-resize-threshold` | Specifies the size of the threshold to resize the popover. @default 4px                                              |
-| `--ch-popover-separation-x`     | Specifies the separation between the action and popover in the x axis. @default 0px                                  |
-| `--ch-popover-separation-y`     | Specifies the separation between the action and popover in the y axis. @default 0px                                  |
+| Name                            | Description                                                                                                                                        |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--ch-popover-block-size`       | Specifies the block size of the popover. Useful for scenarios where the popover is resizable. @default max-content                                 |
+| `--ch-popover-inline-size`      | Specifies the inline size of the popover. Useful for scenarios where the popover is resizable. @default max-content                                |
+| `--ch-popover-max-block-size`   | Specifies the maximum block size of the popover. Useful for scenarios where the popover is resizable. Only px values are supported. @default auto  |
+| `--ch-popover-max-inline-size`  | Specifies the maximum inline size of the popover. Useful for scenarios where the popover is resizable. Only px values are supported. @default auto |
+| `--ch-popover-min-block-size`   | Specifies the minimum block size of the popover. Useful for scenarios where the popover is resizable. @default auto                                |
+| `--ch-popover-min-inline-size`  | Specifies the minimum inline size of the popover. Useful for scenarios where the popover is resizable. @default auto                               |
+| `--ch-popover-resize-threshold` | Specifies the size of the threshold to resize the popover. @default 4px                                                                            |
+| `--ch-popover-separation-x`     | Specifies the separation between the action and popover in the x axis. @default 0px                                                                |
+| `--ch-popover-separation-y`     | Specifies the separation between the action and popover in the y axis. @default 0px                                                                |
 
 
 ## Dependencies