Tokenize Text fields height and spacing (#672)

plone · Nov 17, 2023 · 65accc3 · 65accc3
1 parent fa2bef2
commit 65accc3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 2.62.6 (2023-11-17)
+
+### Improvement
+- **Text fields**: tokenize text fields height and padding so we can easily override them
+
 # 2.62.5 (2023-11-03)
 
 ### Bug fix

diff --git a/projects/pastanaga-angular/package.json b/projects/pastanaga-angular/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@guillotinaweb/pastanaga-angular",
     "description": "Provides Pastanaga UI elements as Angular components",
-    "version": "2.62.5",
+    "version": "2.62.6",
     "license": "MIT",
     "keywords": [
         "angular",

diff --git a/projects/pastanaga-angular/src/styles/components/_textfields.scss b/projects/pastanaga-angular/src/styles/components/_textfields.scss
@@ -181,7 +181,7 @@
       left: $padding-field-control-left;
       max-width: calc(100% - #{$padding-field-control-left * 2});
       position: absolute;
-      top: calc(#{$padding-field-control-top} + #{rhythm(0.25)});
+      top: $top-control-label;
       transition: transform $transition-hint-duration cubic-bezier(0.4, 0, 0.2, 1); // copied from google transition
       transform-origin: 0 0;
 
@@ -217,7 +217,7 @@
     -webkit-appearance: none;
 
     &:not(textarea) {
-      height: calc(#{rhythm(6)} - #{rhythm(0.25)});
+      height: $height-field-control;
     }
 
     &.pa-field-control-icon:not(.pa-icon-on-right) {
@@ -246,11 +246,12 @@
     &:not(:disabled):not(:read-only):focus,
     &:not(:disabled):not(:read-only):active {
       & ~ .pa-field-label {
-        transform: scale(#{$scale-text-field-label}) translateY(-#{rhythm(3.5)}) translateX(-#{rhythm(0.5)});
+        transform: scale(#{$scale-text-field-label}) translateY(-#{$translateY-text-field-label})
+          translateX(-#{rhythm(0.5)});
         padding: 0 rhythm(1);
 
         &.pa-field-label-icon:not(.pa-icon-on-right) {
-          transform: scale(#{$scale-text-field-label}) translateY(-#{rhythm(3.5)})
+          transform: scale(#{$scale-text-field-label}) translateY(-#{$translateY-text-field-label})
             translateX(calc(-#{rhythm(0.5)} - #{$icon-width} - #{$padding-field-control-left * 2}));
         }
       }

diff --git a/projects/pastanaga-angular/src/styles/theme/_textfield.tokens.scss b/projects/pastanaga-angular/src/styles/theme/_textfield.tokens.scss
@@ -18,6 +18,7 @@ $color-text-field-label-error: $color-secondary-regular !default;
 $color-text-field-label-autofilled: $color-autofilled !default;
 
 $scale-text-field-label: 0.8 !default;
+$translateY-text-field-label: rhythm(3.5) !default;
 
 //
 // control
@@ -61,3 +62,5 @@ $line-height-field-control: line-height(l) !default;
 $padding-field-control-top: calc(#{rhythm(1.5)} - 1px) !default; // remove 1px taken by the border
 $padding-field-control-left: rhythm(1.5) !default;
 $margin-bottom-field: rhythm(3) !default;
+$height-field-control: calc(#{rhythm(6)} - #{rhythm(0.25)}) !default;
+$top-control-label: calc(#{$padding-field-control-top} + #{rhythm(0.25)}) !default;