[mercury][combo-box][paginator] Use a chevron icon for the combo-box picker, that affects the paginator as well, since it uses a combo-box (#606)

* `[common]` Add mercury as a dependency

* `[mercury][combo-box]` Use chevron icon on picker ::after

* `[mercury][bundles]` Update bundles tests

* Update yarn.lock

* Update yarn.lock

* `[mercury][bundles]` Update combo-box test bundle

Author: bsastregx

packages/common/package.json

@@ -22,7 +22,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@genexus/chameleon-controls-library": "~6.15.0"
+    "@genexus/chameleon-controls-library": "~6.15.0",
+    "@genexus/mercury": "*"
   },
   "devDependencies": {
     "@eslint/js": "~9.26.0",

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

@@ -9,6 +9,7 @@
   --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);
 
   @include body-regular-m();
 
@@ -32,6 +33,16 @@
     @include control-colors-error();
   }
 
+  &--after {
+    --icon-path: var(--icon__system_chevron-small-down_bright--enabled);
+    background: no-repeat center / var(--mer-icon__size--md) var(--icon-path);
+    -webkit-mask: none;
+    mask: none; /* for non-WebKit browsers */
+  }
+  &--after-disabled {
+    --icon-path: var(--icon__system_chevron-small-down_on-disabled--enabled);
+  }
+
   &__window {
     @include items-container-border();
     @include items-container-border-radius();
@@ -148,6 +159,10 @@
     &:focus {
       @extend %combo-box--focus;
     }
+
+    &::after {
+      @extend %combo-box--after;
+    }
   }
 
   @if $add--placeholder {
@@ -159,13 +174,15 @@
   // - - - - - - - - - - - - - - - - - - - -
   //                 Window
   // - - - - - - - - - - - - - - - - - - - -
+
   #{$window-selector} {
     @extend %combo-box__window;
   }
 
   // - - - - - - - - - - - - - - - - - - - -
   //                  Group
   // - - - - - - - - - - - - - - - - - - - -
+
   #{$group__header-selector} {
     @extend %combo-box-group__header;
   }
@@ -189,6 +206,7 @@
   // - - - - - - - - - - - - - - - - - - - -
   //                  Item
   // - - - - - - - - - - - - - - - - - - - -
+
   #{$item-selector} {
     @extend %combo-box__item;
   }
@@ -204,9 +222,14 @@
   // - - - - - - - - - - - - - - - - - - - -
   //                Disabled
   // - - - - - - - - - - - - - - - - - - - -
+
   @if $add--disabled {
     #{$combo-box--disabled-selector} {
       @extend %combo-box--disabled;
+
+      &::after {
+        @extend %combo-box--after-disabled;
+      }
     }
 
     #{$group__header--disabled-selector} {

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

@@ -140,9 +140,11 @@
   ".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); 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); 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); }",
+  ".combo-box::after, .paginator::part(items-per-page__combo-box)::after { --icon-path: var(--icon__system_chevron-small-down_bright--enabled); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); mask: none; }",
   ".combo-box::part(group), .paginator::part(group) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__content), .paginator::part(group__content) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__header disabled) { --item__bg-color: var(--item__bg-color--disabled); --item__border-color: var(--item__border-color--disabled); --item__color: var(--item__color--disabled); }",

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

@@ -1,10 +1,12 @@
 [
-  ".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); 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); 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); }",
   ".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); }",
+  ".combo-box::after { --icon-path: var(--icon__system_chevron-small-down_bright--enabled); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); mask: none; }",
   ".combo-box::part(group) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__content) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__header disabled) { --item__bg-color: var(--item__bg-color--disabled); --item__border-color: var(--item__border-color--disabled); --item__color: var(--item__color--disabled); }",

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

@@ -17,9 +17,10 @@
   ".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); }",
   ".paginator::part(items-per-page) { align-items: center; gap: var(--mer-spacing--xs); }",
   ".paginator::part(items-per-page-info) { color: var(--mer-text__complementary); }",
-  ".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); 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); }",
+  ".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); }",
   ".paginator::part(items-per-page__combo-box) { inline-size: 80px; }",
   ".paginator::part(items-per-page__combo-box), .paginator::part(go-to__input), .paginator { font-weight: var(--font-weight-regular); }",
+  ".paginator::part(items-per-page__combo-box)::after { --icon-path: var(--icon__system_chevron-small-down_bright--enabled); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); mask: none; }",
   ".paginator::part(items-per-page__combo-box):focus { border-color: var(--borders-un-border-color__focused); }",
   ".paginator::part(items-per-page__combo-box):hover { --control__border-color: var(--control__border-color--hover); }",
   ".paginator::part(items-per-page__label) { font-size: var(--font-size-body-m); }",

packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json

@@ -37,10 +37,12 @@
   ".checkbox::part(option indeterminate) { block-size: var(--mer-spacing--3xs); }",
   ".checkbox:hover { --control__border-color: var(--control__border-color--hover); }",
   ".checkbox:hover::part(label) { --label__color: var(--label__color--hover); }",
-  ".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); 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); 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, .input { font-weight: var(--font-weight-regular); }",
   ".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); }",
+  ".combo-box::after { --icon-path: var(--icon__system_chevron-small-down_bright--enabled); background: no-repeat center/var(--mer-icon__size--md) var(--icon-path); mask: none; }",
   ".combo-box::part(group) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__content) { gap: var(--items-container__gap); }",
   ".combo-box::part(group__header disabled) { --item__bg-color: var(--item__bg-color--disabled); --item__border-color: var(--item__border-color--disabled); --item__color: var(--item__color--disabled); }",