1 files changed, 33 insertions, 14 deletions
diff --git a/src/quickcontrols/material/TextField.qml b/src/quickcontrols/material/TextField.qml
index 598f66f938..e2ec69dc27 100644
--- a/src/quickcontrols/material/TextField.qml
+++ b/src/quickcontrols/material/TextField.qml
@@ -13,11 +13,17 @@ T.TextField {
     implicitWidth: implicitBackgroundWidth + leftInset + rightInset
                    || Math.max(contentWidth, placeholder.implicitWidth) + leftPadding + rightPadding
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
-                             contentHeight + topPadding + bottomPadding,
-                             placeholder.implicitHeight + topPadding + bottomPadding)
+                             contentHeight + topPadding + bottomPadding)
 
-    topPadding: 8
-    bottomPadding: 16
+    leftPadding: Material.textFieldHorizontalPadding
+    rightPadding: Material.textFieldHorizontalPadding
+    // Need to account for the placeholder text when it's sitting on top.
+    topPadding: Material.containerStyle === Material.Filled
+        ? placeholderText.length > 0 && (activeFocus || length > 0)
+            ? Material.textFieldVerticalPadding + placeholder.largestHeight
+            : Material.textFieldVerticalPadding
+        : Material.textFieldVerticalPadding
+    bottomPadding: Material.textFieldVerticalPadding
 
     color: enabled ? Material.foreground : Material.hintTextColor
     selectionColor: Material.accentColor
@@ -25,28 +31,41 @@ T.TextField {
     placeholderTextColor: Material.hintTextColor
     verticalAlignment: TextInput.AlignVCenter
 
+    Material.containerStyle: Material.Outlined
+
     cursorDelegate: CursorDelegate { }
 
-    PlaceholderText {
+    FloatingPlaceholderText {
         id: placeholder
         x: control.leftPadding
-        y: control.topPadding
         width: control.width - (control.leftPadding + control.rightPadding)
-        height: control.height - (control.topPadding + control.bottomPadding)
         text: control.placeholderText
         font: control.font
         color: control.placeholderTextColor
-        verticalAlignment: control.verticalAlignment
         elide: Text.ElideRight
         renderType: control.renderType
-        visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
+
+        filled: control.Material.containerStyle === Material.Filled
+        verticalPadding: control.Material.textFieldVerticalPadding
+        controlHasActiveFocus: control.activeFocus
+        controlHasText: control.length > 0
+        controlImplicitBackgroundHeight: control.implicitBackgroundHeight
     }
 
-    background: Rectangle {
-        y: control.height - height - control.bottomPadding + 8
+    background: MaterialTextContainer {
         implicitWidth: 120
-        height: control.activeFocus || (enabled && control.hovered) ? 2 : 1
-        color: control.activeFocus ? control.Material.accentColor
-            : ((enabled && control.hovered) ? control.Material.primaryTextColor : control.Material.hintTextColor)
+        implicitHeight: control.Material.textFieldHeight
+
+        filled: control.Material.containerStyle === Material.Filled
+        fillColor: control.Material.textFieldFilledContainerColor
+        outlineColor: (enabled && control.hovered) ? control.Material.primaryTextColor : control.Material.hintTextColor
+        focusedOutlineColor: control.Material.accentColor
+        // When the control's size is set larger than its implicit size, use whatever size is smaller
+        // so that the gap isn't too big.
+        placeholderTextWidth: Math.min(placeholder.width, placeholder.implicitWidth) * placeholder.scale
+        controlHasActiveFocus: control.activeFocus
+        controlHasText: control.length > 0
+        placeholderHasText: placeholder.text.length > 0
+        horizontalPadding: control.Material.textFieldHorizontalPadding
     }
 }