refactor(elements): ino-input/select add dense

packages/elements-angular/src/directives/proxies.ts

@@ -515,15 +515,15 @@ export declare interface InoImgList extends Components.InoImgList {}
 
 
 @ProxyCmp({
-  inputs: ['autoFocus', 'autocomplete', 'dataList', 'disabled', 'error', 'helper', 'helperCharacterCounter', 'helperPersistent', 'helperValidation', 'label', 'max', 'maxlength', 'min', 'name', 'outline', 'pattern', 'placeholder', 'required', 'showLabelHint', 'step', 'type', 'unit', 'value'],
+  inputs: ['autoFocus', 'autocomplete', 'dataList', 'dense', 'disabled', 'error', 'helper', 'helperCharacterCounter', 'helperPersistent', 'helperValidation', 'label', 'max', 'maxlength', 'min', 'name', 'outline', 'pattern', 'placeholder', 'required', 'showLabelHint', 'step', 'type', 'unit', 'value'],
   methods: ['getInputElement', 'setFocus', 'setBlur']
 })
 @Component({
   selector: 'ino-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autoFocus', 'autocomplete', 'dataList', 'disabled', 'error', 'helper', 'helperCharacterCounter', 'helperPersistent', 'helperValidation', 'label', 'max', 'maxlength', 'min', 'name', 'outline', 'pattern', 'placeholder', 'required', 'showLabelHint', 'step', 'type', 'unit', 'value'],
+  inputs: ['autoFocus', 'autocomplete', 'dataList', 'dense', 'disabled', 'error', 'helper', 'helperCharacterCounter', 'helperPersistent', 'helperValidation', 'label', 'max', 'maxlength', 'min', 'name', 'outline', 'pattern', 'placeholder', 'required', 'showLabelHint', 'step', 'type', 'unit', 'value'],
 })
 export class InoInput {
   protected el: HTMLElement;
@@ -1048,14 +1048,14 @@ export declare interface InoSegmentGroup extends Components.InoSegmentGroup {
 
 
 @ProxyCmp({
-  inputs: ['disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'label', 'name', 'outline', 'required', 'showLabelHint', 'value']
+  inputs: ['dense', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'label', 'name', 'outline', 'required', 'showLabelHint', 'value']
 })
 @Component({
   selector: 'ino-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'label', 'name', 'outline', 'required', 'showLabelHint', 'value'],
+  inputs: ['dense', 'disabled', 'error', 'helper', 'helperPersistent', 'helperValidation', 'label', 'name', 'outline', 'required', 'showLabelHint', 'value'],
 })
 export class InoSelect {
   protected el: HTMLElement;

packages/elements-vue/src/proxies.ts

@@ -243,6 +243,7 @@ export const InoInput = /*@__PURE__*/ defineContainer<JSX.InoInput, JSX.InoInput
   'autoFocus',
   'dataList',
   'disabled',
+  'dense',
   'error',
   'helper',
   'helperCharacterCounter',
@@ -455,6 +456,7 @@ export const InoSelect = /*@__PURE__*/ defineContainer<JSX.InoSelect, JSX.InoSel
   'showLabelHint',
   'label',
   'outline',
+  'dense',
   'value',
   'helper',
   'helperValidation',

packages/elements/src/components.d.ts

@@ -740,6 +740,10 @@ export namespace Components {
           * The id of the datalist child
          */
         "dataList"?: string;
+        /**
+          * Makes the input text and container slightly smaller.
+         */
+        "dense": boolean;
         /**
           * Disables this element.
          */
@@ -1323,6 +1327,10 @@ export namespace Components {
      * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
      */
     interface InoSelect {
+        /**
+          * Makes the input text and container slightly smaller.
+         */
+        "dense": boolean;
         /**
           * Disables this element.
          */
@@ -3140,6 +3148,10 @@ declare namespace LocalJSX {
           * The id of the datalist child
          */
         "dataList"?: string;
+        /**
+          * Makes the input text and container slightly smaller.
+         */
+        "dense"?: boolean;
         /**
           * Disables this element.
          */
@@ -3773,6 +3785,10 @@ declare namespace LocalJSX {
      * Use the custom `ino-option` component to add options to the select component. The `label` attribute sets an optional floating label for this element.
      */
     interface InoSelect {
+        /**
+          * Makes the input text and container slightly smaller.
+         */
+        "dense"?: boolean;
         /**
           * Disables this element.
          */

packages/elements/src/components/ino-input/ino-input.scss

@@ -20,8 +20,17 @@ $padding-top: 24px;
 
 $icon-padding-to-text: 12px;
 $icon-padding-to-border: 6px;
+$icon-padding-to-text-dense: 6px;
+$icon-padding-to-bottom-dense: 15px;
+$icon-padding-to-border-dense: 0px;
+
+$filled-input-height: 56px;
+$filled-input-height-dense: 30px;
+$filled-input-padding-dense: calc($padding-top - 22px) 0 0;
+$filled-selected-text-height-dense: 25px;
 
 $outline-input-height: 40px;
+$outline-input-height-dense: 30px;
 $outline-shape-radius: $outline-input-height / 2;
 $outline-shape-radius-corner: $outline-shape-radius $outline-shape-radius
   $outline-shape-radius 0;
@@ -80,7 +89,7 @@ ino-input {
 
   .mdc-text-field {
     @include textfield.ink-color(var(--input-color));
-    @include textfield.height(56px);
+    @include textfield.height($filled-input-height);
   }
 
   & * {
@@ -130,7 +139,6 @@ ino-input .mdc-text-field--filled {
   @include textfield.fill-color(transparent);
   @include textfield.disabled-fill-color(transparent);
   @include textfield.line-ripple-color(var(--input-line-color));
-
   &.mdc-text-field--invalid {
     @include textfield.line-ripple-color(theme.$error);
   }
@@ -173,11 +181,51 @@ ino-input .mdc-text-field--filled {
   );
 }
 
+// filled dense
+ino-input .mdc-text-field--filled.ino-input--dense {
+  @include textfield.density(-1);
+  @include textfield.height($filled-input-height-dense);
+  align-items: end;
+  overflow: visible;
+
+  .mdc-text-field__input {
+    padding: $filled-input-padding-dense;
+    height: $filled-selected-text-height-dense;
+  }
+
+  .mdc-floating-label {
+    display: unset;
+    padding-bottom: 2px;
+  }
+
+  .mdc-floating-label.mdc-floating-label--float-above {
+    margin-top: 3px;
+  }
+
+  &:has(.mdc-text-field__icon.mdc-text-field__icon--leading) {
+    @include setIconMargins(
+      (
+        0 $icon-padding-to-text-dense $icon-padding-to-bottom-dense
+          $icon-padding-to-border-dense
+      ),
+      (
+        0 $icon-padding-to-border-dense $icon-padding-to-bottom-dense
+          $icon-padding-to-text-dense
+      )
+    );
+    .mdc-floating-label,
+    .mdc-floating-label--float-above {
+      left: 21px;
+    }
+  }
+}
+
 // Outlined textfield specific
 ino-input .mdc-text-field--outlined {
   @include textfield.focused-outline-color(var(--input-line-color));
   @include textfield.outline-shape-radius(20px);
   @include textfield.outlined-height($outline-input-height);
+  @include setIconMargins((0 $icon-padding-to-text 0 $icon-padding-to-text));
 
   border-style: none !important;
 
@@ -208,16 +256,26 @@ ino-input .mdc-text-field--outlined {
     height: 16px;
     width: 16px;
   }
-
-  @include setIconMargins((0 $icon-padding-to-text 0 $icon-padding-to-text));
 }
 
-ino-input {
-  .mdc-text-field + .mdc-text-field-helper-line {
-    padding-left: 0;
+// outlined dense
+ino-input .mdc-text-field--outlined.ino-input--dense {
+  @include textfield.outlined-height($outline-input-height-dense);
+
+  &[class*='--with-leading-icon'] .mdc-floating-label {
+    left: 21px;
+  }
+
+  &[class*='--with-leading-icon']
+    .mdc-floating-label.mdc-floating-label--float-above {
+    left: 5px;
   }
 }
 
+ino-input .mdc-text-field + .mdc-text-field-helper-line {
+  padding-left: 0;
+}
+
 // Custom number arrows
 ino-input[type='number'] {
   @include hideNativeNumberInputArrows();

packages/elements/src/components/ino-input/ino-input.tsx

@@ -92,6 +92,11 @@ export class Input implements ComponentInterface {
    */
   @Prop() disabled?: boolean;
 
+  /**
+   * Makes the input text and container slightly smaller.
+   */
+  @Prop() dense = false;
+
   /**
    * Displays the input field as invalid if set to true.
    * If the property is not set or set to false, the validation is handled by the `pattern` property.
@@ -469,6 +474,7 @@ export class Input implements ComponentInterface {
 
     const classTextfield = classNames({
       'ino-input__composer': true,
+      'ino-input--dense': this.dense,
       'mdc-text-field': true,
       'mdc-text-field--disabled': this.disabled,
       'mdc-text-field--focused': this.autoFocus,

packages/elements/src/components/ino-input/readme.md

@@ -17,6 +17,7 @@ Use this element for **simple types** like `text`, `password`, `number` or `emai
 | `autoFocus`              | `auto-focus`               | The autofocus of this element.                                                                                                                                                                                                                            | `boolean`                                                                                        | `undefined` |
 | `autocomplete`           | `autocomplete`             | The autocomplete property of this element.                                                                                                                                                                                                                | `string`                                                                                         | `undefined` |
 | `dataList`               | `data-list`                | The id of the datalist child                                                                                                                                                                                                                              | `string`                                                                                         | `undefined` |
+| `dense`                  | `dense`                    | Makes the input text and container slightly smaller.                                                                                                                                                                                                      | `boolean`                                                                                        | `false`     |
 | `disabled`               | `disabled`                 | Disables this element.                                                                                                                                                                                                                                    | `boolean`                                                                                        | `undefined` |
 | `error`                  | `error`                    | Displays the input field as invalid if set to true. If the property is not set or set to false, the validation is handled by the `pattern` property. This functionality might be useful if the input validation is (additionally) handled by the backend. | `boolean`                                                                                        | `undefined` |
 | `helper`                 | `helper`                   | The optional helper text.                                                                                                                                                                                                                                 | `string`                                                                                         | `undefined` |