Text field update

5 files changed, 52 insertions, 40 deletions

diff --git a/package.json b/package.json
index b1233f2..de64393 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x send smile public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 75c16ff..19e097c 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -30,6 +30,10 @@
             padding: 0;
         }
 
+        @include iro.bem-modifier('gapless') {
+            gap: 0;
+        }
+
         @include iro.bem-elem('block') {
             flex: 0 0 auto;
 
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 1bd7ea1..b18b404 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -89,7 +89,6 @@
     @include iro.bem-object(iro.props-namespace()) {
         position:         relative;
         min-width:        0;
-        padding:          fn.dim(--pad-y) fn.dim(--pad-x);
         background-color: fn.color(--bg);
 
         @include iro.bem-elem('bg') {
@@ -106,9 +105,11 @@
         }
 
         @include iro.bem-elem('native') {
-            width:  100%;
-            color:  fn.color(--text);
-            resize: none;
+            box-sizing: border-box;
+            width:      100%;
+            padding:    fn.dim(--pad-y) fn.dim(--pad-x);
+            color:      fn.color(--text);
+            resize:     none;
 
             &::placeholder {
                 opacity:    1;
@@ -167,15 +168,6 @@
             }
         }
 
-        @include iro.bem-modifier('fill') {
-            padding: 0;
-
-            @include iro.bem-elem('native') {
-                box-sizing: border-box;
-                padding:    fn.dim(--pad-y) fn.dim(--pad-x);
-            }
-        }
-
         @include iro.bem-is('disabled') {
             background-color: fn.color(--disabled --bg);
             box-shadow:       fn.color(--disabled --shadow);
diff --git a/tpl/index.pug b/tpl/index.pug
index a6a8f87..365ca52 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -112,28 +112,25 @@ html
             +rule('medium')
 
             +box
-                +text-field(placeholder='Placeholder')
-                br
-                br
-                +text-field(value='Just landed in L.A.')
-                br
-                br
-                +text-field(value='Readonly' readonly=true)
-                br
-                br
-                +text-field(value='Incorrect input' pattern='a+' required=true)
-                br
-                br
-                +text-field(placeholder='Placeholder' disabled=true)
-                br
-                br
-                +text-field(value='Just landed in L.A.' disabled=true)
-                br
-                br
-                +text-field(value='Readonly' readonly=true disabled=true)
-                br
+                div(style={ display: 'flex', gap: '1rem' })
+                    +text-field(placeholder='Placeholder')
+                    +text-field(value='Just landed in L.A.')
+                    +text-field(value='Readonly' readonly=true)
+                    +text-field(value='Incorrect input' pattern='a+' required=true)
                 br
-                +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
+                div(style={ display: 'flex', gap: '1rem' })
+                    +text-field(placeholder='Placeholder' disabled=true)
+                    +text-field(value='Just landed in L.A.' disabled=true)
+                    +text-field(value='Readonly' readonly=true disabled=true)
+                    +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
+                br
+                div
+                    +text-field(placeholder='Just landed in L.A.')
+                        +slot('pre')
+                            +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
+                        +slot('post')
+                            +action-button(quiet=true icon='smile' class='l-card__block')
+                            +action-button(quiet=true icon='send' class='l-card__block')
 
             //-----------------------------------------
 
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index c933b69..24f8e21 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -1,13 +1,32 @@
 include icon.pug
 
 mixin text-field
+  - const slots = {}
+
+  mixin slot(key)
+    - slots[key] = block
+
   -
+    block ? block() : undefined 
+
     let classes = {
-      'o-text-field': true,
-      'is-invalid':   attributes.invalid,
-      'is-disabled':  attributes.disabled,
+      'o-text-field':      true,
+      'o-text-field--ext': attributes.ext,
+      'is-invalid':        attributes.invalid,
+      'is-disabled':       attributes.disabled,
+      'l-card':            !!block,
+      'l-card--flush':     !!block,
+      'l-card--gapless':   !!block
     }
 
   div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
-    input(class='o-text-field__native')&attributes(attributes)
-    .o-text-field__bg
+    if !!block
+      if slots.pre
+        - slots.pre()
+      input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes)
+      if slots.post
+        - slots.post()
+      .o-text-field__bg
+    else
+      input.o-text-field__native&attributes(attributes)
+      .o-text-field__bg