Feat(web): Add support for TextField's size attribute #DS-154

Author: ondrej-kaspar

examples/web/index.html

@@ -199,6 +199,10 @@ <h2 class="typography-heading-medium-text mt-1100 mb-800">TextField</h2>
               <label for="textfieldEmail" class="TextField__label TextField__label--required">E-mail</label>
               <input type="email" id="textfieldEmail" class="TextField__input" />
             </div>
+            <div class="TextField">
+              <label for="textfieldNumber" class="TextField__label">Number (2 digits)</label>
+              <input type="number" size="2" id="textfieldNumber" class="TextField__input" />
+            </div>
             <div class="TextField">
               <label for="textfieldMessage" class="TextField__label">Label</label>
               <input type="text" id="textfieldMessage" class="TextField__input" placeholder="Placeholder" />

examples/web/jobs.html

@@ -206,6 +206,10 @@ <h2 class="jobs-typography-heading-medium-text jobs-mt-1100 jobs-mb-800">TextFie
               <label for="textfieldEmail" class="jobs-TextField__label jobs-TextField__label--required">E-mail</label>
               <input type="email" id="textfieldEmail" class="jobs-TextField__input" />
             </div>
+            <div class="jobs-TextField">
+              <label for="textfieldNumber" class="jobs-TextField__label">Number (2 digits)</label>
+              <input type="number" size="2" id="textfieldNumber" class="jobs-TextField__input" />
+            </div>
             <div class="jobs-TextField">
               <label for="textfieldMessage" class="jobs-TextField__label">Label</label>
               <input type="text" id="textfieldMessage" class="jobs-TextField__input" placeholder="Placeholder" />

packages/web/src/scss/components/TextField/README.md

@@ -53,6 +53,27 @@ TextField supports the following input types:
 
 Other meaningful values (e.g. `date`, `file`) will work but design of the input field is not consistent across platforms/browsers.
 
+## Input width
+
+There are several ways to adjust the input width:
+
+### `size` attribute
+
+The `size` attribute is supported on inputs of the following types: `email`, `password`, `tel`, `text`, `url`.
+
+This option is generally recommended for inputs with a limited value length (e.g. numeric representation of day, month, year). Supported values are `2`, `3` and `4` (characters). If you need any other value or prefer using `em` unit instead of default `ch`, define a `--width` CSS custom property on the `<input>` element:
+
+```html
+<div class="TextField">
+  <label for="textfield-size" class="TextField__label">4000 (in Roman numerals)</label>
+  <input type="text" size="4" id="textfield-size" class="TextField__input" style="--width: 4em;" />
+</div>
+```
+
+### Grid
+
+For other use cases (wider input or input with unknown value length), we recommend placing them inside the Grid component and using `TextField--fluid` modifier to fill the available space.
+
 ## TextField password toggle
 
 TextField with `type="password"` can have a toggle button. When toggling don't forget to change

packages/web/src/scss/components/TextField/_TextField.scss

@@ -53,6 +53,22 @@
     &[type='url'] {
         appearance: none;
     }
+
+    &[type='number'] {
+        --arrows-width: #{theme.$input-number-arrows-width};
+    }
+
+    &[size] {
+        width: calc(
+            var(--width) + 2 * #{theme.$input-padding-x} + 2 * #{theme.$input-border-width} + var(--arrows-width, 0px)
+        );
+    }
+
+    @each $size in theme.$input-size-characters {
+        &[size='#{$size}'] {
+            --width: #{$size}ch;
+        }
+    }
 }
 
 .TextField--fluid {

packages/web/src/scss/components/TextField/_theme.scss

@@ -27,6 +27,8 @@ $input-background: tokens.$background-basic;
 $input-focus-shadow: tokens.$focus;
 $input-placeholder-color-default: tokens.$text-secondary-default;
 $input-placeholder-color-disabled: tokens.$text-secondary-disabled;
+$input-size-characters: (2, 3, 4);
+$input-number-arrows-width: 1.25rem;
 
 $input-password-toggle-padding: tokens.$space-400;
 $input-password-toggle-icon-size: tokens.$space-700;