@genexus/mercury 0.4.18 → 0.4.20

package/dist/mercury.scss

@@ -339,20 +339,27 @@ Control
 // Font Size
 @mixin control-font-size-small() {
   font-size: var(--control__font-size--small);
+  line-height: var(--control__line-height);
 }
 @mixin control-font-size-regular() {
   font-size: var(--control__font-size--regular);
+  line-height: var(--control__line-height);
 }
 // Height
 @mixin control-height-regular() {
   block-size: var(--control__height);
+  // to be removed (TODO)
+  // fixed block-size comes with some issues.
 }
 // Padding
-@mixin control-padding-inline-block() {
-  padding-block: var(--control__padding-block);
+@mixin control-padding-inline() {
   padding-inline: var(--control__padding-inline);
 }
-@mixin control-padding-inline() {
+@mixin control-padding-block() {
+  padding-block: var(--control__padding-block);
+}
+@mixin control-padding-inline-block() {
+  padding-block: var(--control__padding-block);
   padding-inline: var(--control__padding-inline);
 }
 // Placeholder
@@ -521,6 +528,23 @@ Grid Item
   // as a border to the user.
   box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
+@mixin grid-cell-padding-inline() {
+  padding-inline: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-block() {
+  padding-block: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-inline-block() {
+  padding-block: var(--grid-cell__padding-block);
+  padding-inline: var(--grid-cell__padding-inline);
+}
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell__padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
   padding-block-end: var(--mer-spacing--2xs);
@@ -1143,6 +1167,7 @@ Body Spacing
 
   --control__font-size--small: var(--mer-font__size--3xs);
   --control__font-size--regular: var(--mer-font__size--xs);
+  --control__line-height: var(--mer-line-height--spaced);
 
   // - - - - - - - Height - - - - - - -
 
@@ -1150,7 +1175,7 @@ Body Spacing
 
   // - - - - - - - Padding - - - - - - -
 
-  --control__padding-block: var(--mer-spacing--xs);
+  --control__padding-block: var(--mer-spacing--2xs);
   --control__padding-inline: var(--mer-spacing--xs);
 
   // - - - - - - - Gap - - - - - - -
@@ -1369,7 +1394,8 @@ Body Spacing
   --grid-cell__border: var(--mer-border__width--sm) solid
     var(--grid-cell__border-color);
   --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color);
-
+  --grid-cell__padding-block: var(--mer-spacing--xs);
+  --grid-cell__padding-inline: var(--mer-spacing--sm);
   // - - - - - - - - - - - - - - - - - - - -
   //          Tab Caption (Button)
   // - - - - - - - - - - - - - - - - - - - -
@@ -1718,20 +1744,27 @@ Control
 // Font Size
 @mixin control-font-size-small() {
   font-size: var(--control__font-size--small);
+  line-height: var(--control__line-height);
 }
 @mixin control-font-size-regular() {
   font-size: var(--control__font-size--regular);
+  line-height: var(--control__line-height);
 }
 // Height
 @mixin control-height-regular() {
   block-size: var(--control__height);
+  // to be removed (TODO)
+  // fixed block-size comes with some issues.
 }
 // Padding
-@mixin control-padding-inline-block() {
-  padding-block: var(--control__padding-block);
+@mixin control-padding-inline() {
   padding-inline: var(--control__padding-inline);
 }
-@mixin control-padding-inline() {
+@mixin control-padding-block() {
+  padding-block: var(--control__padding-block);
+}
+@mixin control-padding-inline-block() {
+  padding-block: var(--control__padding-block);
   padding-inline: var(--control__padding-inline);
 }
 // Placeholder
@@ -1900,6 +1933,23 @@ Grid Item
   // as a border to the user.
   box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
+@mixin grid-cell-padding-inline() {
+  padding-inline: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-block() {
+  padding-block: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-inline-block() {
+  padding-block: var(--grid-cell__padding-block);
+  padding-inline: var(--grid-cell__padding-inline);
+}
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell__padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
   padding-block-end: var(--mer-spacing--2xs);
@@ -3524,20 +3574,27 @@ Control
 // Font Size
 @mixin control-font-size-small() {
   font-size: var(--control__font-size--small);
+  line-height: var(--control__line-height);
 }
 @mixin control-font-size-regular() {
   font-size: var(--control__font-size--regular);
+  line-height: var(--control__line-height);
 }
 // Height
 @mixin control-height-regular() {
   block-size: var(--control__height);
+  // to be removed (TODO)
+  // fixed block-size comes with some issues.
 }
 // Padding
-@mixin control-padding-inline-block() {
-  padding-block: var(--control__padding-block);
+@mixin control-padding-inline() {
   padding-inline: var(--control__padding-inline);
 }
-@mixin control-padding-inline() {
+@mixin control-padding-block() {
+  padding-block: var(--control__padding-block);
+}
+@mixin control-padding-inline-block() {
+  padding-block: var(--control__padding-block);
   padding-inline: var(--control__padding-inline);
 }
 // Placeholder
@@ -3706,6 +3763,23 @@ Grid Item
   // as a border to the user.
   box-shadow: var(--grid-cell__box-shadow-inline-block);
 }
+@mixin grid-cell-padding-inline() {
+  padding-inline: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-block() {
+  padding-block: var(--grid-cell__padding-block);
+}
+@mixin grid-cell-padding-inline-block() {
+  padding-block: var(--grid-cell__padding-block);
+  padding-inline: var(--grid-cell__padding-inline);
+}
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell__padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
 @mixin grid-rowset-legend-padding-block() {
   padding-block-start: var(--mer-spacing--2xs);
   padding-block-end: var(--mer-spacing--2xs);
@@ -3938,11 +4012,11 @@ Body Spacing
   --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm);
   --ch-combo-box-item__background-image-size: 100%;
 
+  @include control-border();
   @include control-colors-enabled();
   @include control-font-weight-regular();
-  @include control-height-regular();
-  @include control-border();
-  @include control-padding-inline();
+  @include control-font-size-small();
+  @include control-padding-inline-block();
 
   &:hover {
     @include control-colors-hover();
@@ -4294,11 +4368,11 @@ Body Spacing
   --ch-edit-gap: var(--control__icon-gap);
   --ch-edit__image-size: var(--mer-icon__box--md);
 
-  @include control-colors-enabled();
   @include control-border();
+  @include control-colors-enabled();
   @include control-font-weight-regular();
-  @include control-height-regular();
-  @include control-padding-inline();
+  @include control-font-size-small();
+  @include control-padding-inline-block();
 
   &--focus {
     @include focus-border();
@@ -5746,7 +5820,7 @@ Body Spacing
 %tabular-grid-column__bar {
   --grid-label__gap: 0;
   @include grid-row-colors-enabled();
-  @include control-padding-inline-block();
+  @include grid-cell-padding-inline-block();
   @include control-font-weight-semi-bold();
   gap: var(--grid-common__gap);
   width: 100%;
@@ -5839,7 +5913,7 @@ Body Spacing
 
 %tabular-grid-cell {
   @include grid-cell-border-inline-block();
-  @include control-padding-inline-block();
+  @include grid-cell-padding-inline-block();
   @include grid-row-colors-enabled();
   --item__bg-color: var(--items-container__bg-color);
   border: 0; //WA
@@ -6383,6 +6457,152 @@ Body Spacing
   }
 }
 
+// node type
+@mixin cell-node-type-text() {
+  @include grid-cell-padding-inline-block();
+}
+@mixin cell-node-type-element() {
+  @include control-remove-border();
+  @include grid-cell-remove-padding();
+  --control__padding-inline: var(--grid-cell__padding-inline);
+  // to stretch the control
+  display: grid;
+  align-items: stretch;
+}
+@mixin cell-node-type-element--hover() {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--control__border-color--hover);
+  outline-offset: var(--focus__outline-offset);
+}
+// cell alignment block
+@mixin cell-alignment-block-start() {
+  align-items: start;
+}
+@mixin cell-alignment-block-center() {
+  align-items: center;
+}
+@mixin cell-alignment-block-end() {
+  align-items: end;
+}
+// cell alignment inline
+@mixin cell-alignment-inline-start() {
+  justify-content: start;
+}
+@mixin cell-alignment-inline-center() {
+  justify-content: center;
+}
+@mixin cell-alignment-inline-end() {
+  justify-content: center;
+}
+// cell with ellipsis
+@mixin cell-ellipsis() {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/// @group Grid
+/// @param {String} $tabular-grid-selector [".tabular-grid"] -
+/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] -
+/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] -
+/// @param {List} $tabular-grid-affected-columns-nth-list [null] -
+
+@mixin tabular-grid-cell-layout(
+  $tabular-grid-selector: ".tabular-grid",
+  $tabular-grid-cell-node-type: "text",
+  $tabular-grid-cell-block-alignment: "start",
+  $tabular-grid-cell-inline-alignment: "start",
+  $tabular-grid-cell-apply-ellipsis: false,
+  $tabular-grid-affected-columns-nth-list: null
+) {
+  $selector: null;
+  $cell-tag-name: "ch-tabular-grid-cell";
+  $where-pseudo-class: ":where";
+  $where-selector: ();
+  // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not.
+  // if it is null, all cells should be affected.
+  @if $tabular-grid-affected-columns-nth-list != null {
+    @each $nth in $tabular-grid-affected-columns-nth-list {
+      $where-selector: append($where-selector, ":nth-child(#{$nth})", comma);
+    }
+    $selector: #{$tabular-grid-selector}
+      #{$cell-tag-name}#{$where-pseudo-class
+      }(#{$where-selector});
+  } @else {
+    // if no $editable-columns-nth was provided, apply to all cells
+    $selector: #{$tabular-grid-selector} #{$cell-tag-name};
+  }
+  #{$selector} {
+    // node type
+    @if $tabular-grid-cell-node-type == "text" {
+      @include cell-node-type-text();
+    }
+    @if $tabular-grid-cell-node-type == "element" {
+      @include cell-node-type-element();
+    }
+    &:hover {
+      @if $tabular-grid-cell-node-type == "element" {
+        @include cell-node-type-element--hover();
+      }
+    }
+    // block alignment (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "start"
+    {
+      @include cell-alignment-block-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "center"
+    {
+      @include cell-alignment-block-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "end"
+    {
+      @include cell-alignment-block-end();
+    }
+    // inline alignment
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "start"
+    {
+      @include cell-alignment-inline-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "center"
+    {
+      @include cell-alignment-inline-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "end"
+    {
+      @include cell-alignment-inline-end();
+    }
+    // ellipsis (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-apply-ellipsis ==
+      true
+    {
+      @include cell-ellipsis();
+    }
+  }
+}
+
 @mixin tree-view-tokens() {
   // - - - - - - - - - - - - - - - - - - - -
   //               Tree View
@@ -14959,6 +15179,7 @@ Body Spacing
   // tabular grid
   @if $tabular-grid {
     @include tabular-grid();
+    @include tabular-grid-cell-layout();
     @include property-grid(); // property-grid extends tabular-grid
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "description": "Mercury is the design system designed for GeneXus IDE Web and GeneXus Next",
   "main": "dist/mercury.scss",
   "module": "dist/assets-manager.js",
@@ -10,7 +10,7 @@
   ],
   "type": "module",
   "scripts": {
-    "build": "tsc && npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks",
+    "build": "tsc && npm run icons-svg && npm run icons-sass && npm run build.scss && npm run copy-tasks && npm run showcase.scss",
     "build-no-svg": "tsc && npm run build.scss && npm run copy-tasks",
     "build.scss": "scss-bundle -e ./src/mercury.scss -o dist/mercury.scss && npm run build.bundles && npm run copy-all.css && npm run showcase.scss",
     "build.bundles": "fse copy --all --keepExisting --errorOnExist --dereference --preserveTimestamps --quiet src/bundles/scss dist/bundles/scss && sass --load-path=src --no-source-map --style compressed dist/bundles/scss:dist/bundles/css",
@@ -22,7 +22,7 @@
     "watch.scss.mac": "chokidar 'src/**/*.scss' '../common/**/*.scss' -c \"npm run build.scss\"",
     "copy-all.css": "fse copy dist/bundles/css/all.css showcase/all.css",
     "copy-tasks": "node copy-tasks.js",
-    "showcase.scss": "sass showcase/scss/dummy-items.scss showcase/css/dummy-items.css"
+    "showcase.scss": "sass showcase/scss/showcase-sass.scss showcase/css/showcase-sass.css"
   },
   "license": "MIT",
   "devDependencies": {