Add text field size support

sampler/src/main/java/atlantafx/sampler/page/components/TextFieldPage.java

@@ -1,15 +1,16 @@
 /* SPDX-License-Identifier: MIT */
 package atlantafx.sampler.page.components;
 
-import atlantafx.base.theme.Styles;
 import atlantafx.sampler.page.AbstractPage;
 import atlantafx.sampler.page.SampleBlock;
+import javafx.geometry.Pos;
 import javafx.scene.control.PasswordField;
 import javafx.scene.control.TextField;
-import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.VBox;
 
-import static atlantafx.base.theme.Styles.STATE_DANGER;
+import static atlantafx.base.theme.Styles.*;
-import static atlantafx.base.theme.Styles.STATE_SUCCESS;
+import static atlantafx.sampler.page.SampleBlock.BLOCK_HGAP;
 
 public class TextFieldPage extends AbstractPage {
 
@@ -20,15 +21,11 @@ public class TextFieldPage extends AbstractPage {
 
     public TextFieldPage() {
         super();
-        setUserContent(new FlowPane(
+        setUserContent(new VBox(
-                PAGE_HGAP, PAGE_VGAP,
+                PAGE_VGAP,
-                basicSample(),
+                expandingHBox(basicSample(), promptSample(), passwordSample()),
-                promptSample(),
+                expandingHBox(readonlySample(), successSample(), dangerSample()),
-                passwordSample(),
+                expandingHBox(sizeSample(), roundedSample()),
-                readonlySample(),
-                successSample(),
-                dangerSample(),
-                roundedSample(),
                 disabledSample()
         ));
     }
@@ -68,15 +65,37 @@ public class TextFieldPage extends AbstractPage {
         return new SampleBlock("Danger", field);
     }
 
+    private SampleBlock sizeSample() {
+        var smallField = new TextField("Small");
+        smallField.getStyleClass().add(SMALL);
+        smallField.setPrefWidth(70);
+
+        var normalField = new TextField("Normal");
+        normalField.setPrefWidth(120);
+
+        var largeField = new TextField("Large");
+        largeField.getStyleClass().add(LARGE);
+        largeField.setPrefWidth(200);
+
+        var content = new HBox(BLOCK_HGAP, smallField, normalField, largeField);
+        content.setAlignment(Pos.CENTER_LEFT);
+
+        return new SampleBlock("Size", content);
+    }
+
     private SampleBlock roundedSample() {
         var field = new TextField("Text");
-        field.getStyleClass().add(Styles.ROUNDED);
+        field.getStyleClass().add(ROUNDED);
         return new SampleBlock("Rounded", field);
     }
 
     private SampleBlock disabledSample() {
         var field = new TextField("Text");
         field.setDisable(true);
-        return new SampleBlock("Disabled", field);
+
+        var block = new SampleBlock("Disabled", field);
+        block.setMaxWidth(250);
+
+        return block;
     }
 }

styles/src/components/_text-input.scss

@@ -2,35 +2,35 @@
 
 @use "../settings/config" as cfg;
 
-$color-bg:     -color-bg-default     !default;
+$color-bg: -color-bg-default !default;
-$color-fg:     -color-fg-default     !default;
+$color-fg: -color-fg-default !default;
 $color-border: -color-border-default !default;
 
-$color-bg-focused:     -color-bg-default      !default;
+$color-bg-focused: -color-bg-default !default;
 $color-border-focused: -color-accent-emphasis !default;
 
 $color-bg-highlight: -color-accent-subtle !default;
-$color-fg-highlight: -color-fg-default    !default;
+$color-fg-highlight: -color-fg-default !default;
 
-$color-bg-success:     -color-bg-default       !default;
+$color-bg-success: -color-bg-default !default;
-$color-fg-success:     -color-success-fg       !default;
+$color-fg-success: -color-success-fg !default;
 $color-border-success: -color-success-emphasis !default;
 
-$color-bg-danger:     -color-bg-default      !default;
+$color-bg-danger: -color-bg-default !default;
-$color-fg-danger:     -color-danger-fg       !default;
+$color-fg-danger: -color-danger-fg !default;
 $color-border-danger: -color-danger-emphasis !default;
 
 // not exposed as looked-up color variables
 $color-fg-placeholder: -color-fg-subtle !default;
-$color-fg-password:    -color-fg-muted  !default;
+$color-fg-password: -color-fg-muted !default;
 
 .text-input {
 
-  -color-input-bg:     $color-bg;
+  -color-input-bg: $color-bg;
-  -color-input-fg:     $color-fg;
+  -color-input-fg: $color-fg;
   -color-input-border: $color-border;
 
-  -color-input-bg-focused:     $color-bg-focused;
+  -color-input-bg-focused: $color-bg-focused;
   -color-input-border-focused: $color-border-focused;
 
   -color-input-bg-highlight: $color-bg-highlight;
@@ -63,24 +63,19 @@ $color-fg-password:    -color-fg-muted  !default;
   }
 
   &:success {
-    -color-input-bg:     $color-bg-success;
+    -color-input-bg: $color-bg-success;
-    -color-input-fg:     $color-fg-success;
+    -color-input-fg: $color-fg-success;
     -color-input-border: $color-border-success;
     -color-input-border-focused: $color-border-success;
   }
 
   &:danger {
-    -color-input-bg:     $color-bg-danger;
+    -color-input-bg: $color-bg-danger;
-    -color-input-fg:     $color-fg-danger;
+    -color-input-fg: $color-fg-danger;
     -color-input-border: $color-border-danger;
     -color-input-border-focused: $color-border-danger;
   }
 
-  &.rounded {
-    -fx-padding: cfg.$padding-y cfg.$padding-x-large cfg.$padding-y cfg.$padding-x-large;
-    -fx-background-radius: 10em;
-  }
-
   // input group
   &.left-pill {
     -fx-background-radius: cfg.$border-radius 0 0 cfg.$border-radius;
@@ -110,6 +105,22 @@ $color-fg-password:    -color-fg-muted  !default;
   }
 }
 
+.text-field {
+  &.small {
+    -fx-padding: cfg.$padding-y-small cfg.$padding-x-small cfg.$padding-y-small cfg.$padding-x-small;
+    -fx-font-size: cfg.$font-small;
+  }
+
+  &.large {
+    -fx-padding: cfg.$padding-y-large cfg.$padding-x-large cfg.$padding-y-large cfg.$padding-x-large;
+    -fx-font-size: cfg.$font-title-4;
+  }
+
+  &.rounded {
+    -fx-background-radius: 10em;
+  }
+}
+
 .text-area {
   // scroll pane offset to avoid overlapping input borders
   -fx-padding: 2px;