@muonic/muon 0.0.2-beta.26 → 0.0.2-beta.27

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.27](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.26...v0.0.2-beta.27) (2023-07-12)
+
+
+### Features
+
+* inputter wrapper max-width ([194e0f0](https://github.com/centrica-engineering/muon/commit/194e0f0ee326188fb7041c3d7b59661b78fc7112))
+
 ### [0.0.2-beta.26](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.25...v0.0.2-beta.26) (2023-07-10)
 
 

package/components/inputter/src/inputter-component.js

@@ -48,6 +48,9 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
   }
 
   get classes() {
+    const type = this._isSingle && this.querySelector('input').type;
+    const autocomplete = this._isSingle && this.querySelector('input').autocomplete || undefined;
+
     return {
       inputter: true,
       select: this._isSelect,
@@ -56,7 +59,9 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
       checkbox: this._inputType === this._inputTypes.CHECKBOX,
       search: this._inputType === this._inputTypes.SEARCH,
       date: this._inputType === this._inputTypes.DATE,
-      'has-disabled': this._hasDisabled
+      'has-disabled': this._hasDisabled,
+      [`type-${type}`]: !!type,
+      [`autocomplete-${autocomplete}`]: !!autocomplete
     };
   }
 

package/components/inputter/src/inputter-extends.css

@@ -25,6 +25,7 @@
   border-color: $INPUTTER_FIELD_BORDER_COLOR;
   border-radius: $INPUTTER_FIELD_BORDER_RADIUS;
   font-family: $INPUTTER_FIELD_FONT_FAMILY;
+  width: 100%; /* NOTE: @drew - 2023-07-06 - rely on the width of `.wrapper` to contain the width. */
 }
 
 %input-hover {

package/components/inputter/src/inputter-styles.css

@@ -8,8 +8,10 @@
     @extend %label;
   }
 
-  & ::slotted(*)::placeholder {
-    @extend %placeholder;
+  & ::slotted(*){
+    &::placeholder {
+      @extend %placeholder;
+    }
   }
 
   & ::slotted(:is(
@@ -74,6 +76,22 @@
 
   & .wrapper {
     position: relative;
+
+    /* NOTE: this calc will take the `ch` value in the `inputter.field.xxxx.max.width` token
+    * and add the inline padding and border width to produce the `max-width` value. This allows the token value
+    * to be equal to the amount of characters that will fit in the field.
+    * The `ch` unit is equal to the width of the `0` charachter in the font.
+    * Consider using a monospace font if accurate spacing is required (as we do in the masked inputter).
+    * This could benefit from the `tnum` OpenType feature of a font file.
+    * With a fallback to $THEME_FONT_LINE_LENGTH if the variable is not defined.
+    */
+    max-width: calc(
+      var(--inputter-field-max-width, $THEME_FONT_LINE_LENGTH)
+      + $INPUTTER_FIELD_PADDING_INLINE_START
+      + $INPUTTER_FIELD_PADDING_INLINE_END
+      + $INPUTTER_FIELD_BORDER_WIDTH
+      + $INPUTTER_FIELD_BORDER_WIDTH
+    );
   }
 
   & .checkbox,
@@ -197,15 +215,6 @@
       input[type="tel"],
       input[type="text"])) {
       @extend %input-mask;
-
-      width: calc(
-        (var(--maxlength))
-        * 1ch
-        + $INPUTTER_FIELD_PADDING_INLINE_START
-        + $INPUTTER_FIELD_PADDING_INLINE_END
-        + $INPUTTER_FIELD_BORDER_WIDTH
-        + $INPUTTER_FIELD_BORDER_WIDTH
-      );
     }
 
     & .input-mask {
@@ -229,6 +238,17 @@
       text-align: start;
     }
 
+    & .wrapper {
+      max-width: calc(
+        (var(--maxlength))
+        * 1ch
+        + $INPUTTER_FIELD_PADDING_INLINE_START
+        + $INPUTTER_FIELD_PADDING_INLINE_END
+        + $INPUTTER_FIELD_BORDER_WIDTH
+        + $INPUTTER_FIELD_BORDER_WIDTH
+      );
+   }
+
     & ::slotted(input[type="text"]) {
       @extend %input-mask-text;
     }

package/components/inputter/src/inputter-styles.slotted.css

@@ -68,8 +68,10 @@ light-dom {
     @extend %label;
   }
 
-  & *::placeholder {
-    @extend %placeholder;
+  & * {
+    &::placeholder {
+      @extend %placeholder;
+    }
   }
 
   & :is(
@@ -121,8 +123,7 @@ light-dom {
     input[type="tel"]:disabled,
     input[type="text"]:disabled,
     select:disabled,
-    textarea:disabled
-  ) {
+    textarea:disabled) {
     @extend %input-disabled;
   }
 
@@ -132,30 +133,26 @@ light-dom {
 
   & :is(
     input[type="checkbox"],
-    input[type="radio"]
-  ) {
+    input[type="radio"]) {
     @extend %input-multiple;
   }
 
   & :is(
     input[type="checkbox"]:hover,
-    input[type="radio"]:hover
-  ) {
+    input[type="radio"]:hover) {
     @extend %input-multiple-hover;
   }
 
   & :is(
     input[type="checkbox"]:focus-visible,
-    input[type="radio"]:focus-visible
-  ) {
+    input[type="radio"]:focus-visible) {
     @extend %input-multiple-focus;
   }
 
   /* @TODO: configure how to remove if disable off */
   & :is(
     input[type="checkbox"]:disabled,
-    input[type="radio"]:disabled
-  ) {
+    input[type="radio"]:disabled) {
     @extend %input-multiple-disabled;
   }
 
@@ -185,8 +182,7 @@ light-dom {
 
   & :is(
     select,
-    input[type="date"]
-  ) {
+    input[type="date"]) {
     @extend %input-select;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.26",
+  "version": "0.0.2-beta.27",
   "description": "",
   "main": "index.js",
   "scripts": {