@genexus/mercury 0.1.8 → 0.1.10

package/dist/mercury.scss

@@ -740,7 +740,7 @@ Window
   --mer-window__padding: var(--mer-spacing--xs);
   --mer-window__bg-color: var(--mer-color__elevation--01);
   --mer-window__gap: var(--mer-spacing--xs);
-  --mer-window__box-shadow: var(--mer-spacing--xs);
+  --mer-window__box-shadow: var(--mer-box-shadow--01);
 
   /*----------------------
   Focus
@@ -857,7 +857,7 @@ Window
     @extend %label--before;
   }
 }
-
+ // should be at the top, since other elements use it.
 @mixin button-tokens-base() {
   //font
   --button-base__font-family: inherit;
@@ -2167,6 +2167,183 @@ Window
   }
 }
 
+@mixin combo-box-tokens() {
+  // - - - - - - - - - - - - - - - - - - - -
+  //     Provided by the ch-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-spacing--md);
+  --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-item__background-image-size: 100%;
+}
+
+
+%combo-box {
+  @include combo-box-tokens();
+}
+
+%combo-box__window {
+  background-color: var(--mer-window__bg-color);
+  border: var(--mer-color__elevation--01);
+  border-radius: var(--mer-window__border-radius);
+  box-shadow: var(--mer-window__box-shadow);
+  padding: var(--mer-spacing--2xs);
+}
+
+%combo-box__group {
+  border-block-end: var(--mer-border__width--sm) solid
+    var(--mer-color__elevation--04);
+}
+
+%combo-box__group-header {
+  font-family: var(--mer-font-family--inter-semi-bold);
+  padding-block: var(--mer-spacing--3xs);
+  padding-inline: var(--mer-spacing--xs);
+  color: var(--mer-text__bright);
+
+  &-expandable--hover {
+    background-color: var(--mer-item__bg-color--selected);
+    color: var(--mer-item__color--hover);
+  }
+}
+
+%combo-box__item {
+  border-radius: var(--mer-border__radius--sm);
+  padding-block: var(--mer-spacing--3xs);
+  padding-inline: var(--mer-spacing--xs);
+  color: var(--mer-text__on-elevation);
+  font-family: var(--mer-font-family--inter-regular);
+
+  &--disabled {
+    color: var(--mer-text__on-disabled);
+  }
+
+  &--nested {
+    padding-inline-start: calc(
+      var(--ch-combo-box-item-gap) +
+        var(--ch-combo-box-group__expandable-button-size) +
+        var(--mer-spacing--2xs)
+    );
+  }
+
+  &--selected {
+    background-color: var(--mer-item__bg-color--selected);
+    color: var(--mer-item__color--hover);
+  }
+}
+
+/// @group ComboBox
+/// @param {String} $combo-box-selector [".combo-box"] -
+/// @param {String} $combo-box--disabled-selector [".combo-box[disabled]"] -
+/// @param {String} $combo-box__placeholder-selector [".combo-box::part(placeholder)"] -
+/// @param {String} $window-selector [".combo-box::part(window)"] -
+/// @param {String} $group__selector [".combo-box::part(group)"] -
+/// @param {String} $group__header-selector [".combo-box::part(group__header)"] -
+/// @param {String} $group__header--disabled-selector [".combo-box::part(group__header disabled)"] -
+/// @param {String} $group__header--expandable-selector [".combo-box::part(group__header expandable)"] -
+/// @param {String} $item-selector [".combo-box::part(item)"] -
+/// @param {String} $item--disabled-selector [".combo-box::part(item disabled)"] -
+/// @param {String} $item--nested-selector [".combo-box::part(item nested)"] -
+/// @param {String} $item--selected-selector [".combo-box::part(item selected)"] -
+/// @param {Boolean} $add--disabled [true] -
+/// @param {Boolean} $add--placeholder [true] -
+/// @param {Boolean} $add--placeholder-var [true] -
+/// @param {Boolean} $add--error [true] -
+@mixin combo-box(
+  $combo-box-selector: ".combo-box",
+  $combo-box--disabled-selector: ".combo-box[disabled]",
+  $combo-box__placeholder-selector: ".combo-box::part(placeholder)",
+  $window-selector: ".combo-box::part(window)",
+  $group__selector: ".combo-box::part(group)",
+  $group__header-selector: ".combo-box::part(group__header)",
+  $group__header--disabled-selector: ".combo-box::part(group__header disabled)",
+  $group__header--expandable-selector:
+    ".combo-box::part(group__header expandable)",
+  $item-selector: ".combo-box::part(item)",
+  $item--disabled-selector: ".combo-box::part(item disabled)",
+  $item--nested-selector: ".combo-box::part(item nested)",
+  $item--selected-selector: ".combo-box::part(item selected)",
+  $add--disabled: true,
+  $add--placeholder: true,
+  $add--placeholder-var: true,
+  $add--error: true
+) {
+  // TODO: IMPROVE STYLE. Unanimo's implementation does not work well in Sidebar Menus
+
+  #{$combo-box-selector} {
+    @extend %form-input;
+    @extend %combo-box;
+    &:focus {
+      @extend %form-input--focus;
+    }
+
+    @if $add--placeholder-var {
+      // @include form-input-placeholder-var();
+    }
+  }
+
+  @if $add--placeholder {
+    #{$combo-box__placeholder-selector} {
+      @extend %form-input__placeholder;
+    }
+  }
+
+  @if $add--disabled {
+    #{$combo-box--disabled-selector} {
+      @extend %form-input--disabled;
+    }
+
+    #{$group__header--disabled-selector} {
+      @extend %combo-box__item--disabled;
+    }
+
+    #{$item--disabled-selector} {
+      @extend %combo-box__item--disabled;
+    }
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                 Window
+  // - - - - - - - - - - - - - - - - - - - -
+  #{$window-selector} {
+    @extend %combo-box__window;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Group
+  // - - - - - - - - - - - - - - - - - - - -
+  #{$group__selector} {
+    @extend %combo-box__group;
+  }
+
+  #{$group__header-selector} {
+    @extend %combo-box__group-header;
+  }
+
+  #{$group__header--expandable-selector}:hover {
+    @extend %combo-box__group-header-expandable--hover;
+  }
+
+  // - - - - - - - - - - - - - - - - - - - -
+  //                  Item
+  // - - - - - - - - - - - - - - - - - - - -
+  #{$item-selector} {
+    @extend %combo-box__item;
+  }
+
+  #{$item--nested-selector} {
+    @extend %combo-box__item--nested;
+  }
+
+  #{$item--selected-selector} {
+    @extend %combo-box__item--selected;
+  }
+}
+
 @mixin radio-group-tokens() {
   // css properties provided by ch-radio-group-render component. Do not edit their names.
   --ch-radio-group__radio-container-size: var(--mer-control__block-size--tiny);
@@ -3529,6 +3706,7 @@ Window
 
   // Components
   $components: true,
+  $combo-box: true,
   $checkbox: true,
   $radio-group: true,
   $tree-view-primary: true,
@@ -19114,10 +19292,17 @@ gemini-tools: $gemini-tools,
     @if $tree-view-primary {
       @include tree-view-primary();
     }
+
+    // combo box
+    @if $combo-box {
+      @include combo-box();
+    }
+
     // tabular grid
     @if $tabular-grid {
       @include tabular-grid();
     }
+
     // code
     @if $code {
       @include code();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "files": [