Added placeholder-text to TextEdit (#5239)

---------

Co-authored-by: Simon Hausmann <simon.hausmann@slint.dev>

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 # Changelog
 All notable changes to this project are documented in this file.
+
+## Unreleased
+
+### Widgets
+
+ - Added `placeholder-text` property to `TextEdit`.
+ 
 ## [1.6.0] - 2024-05-13
 
 ## General

docs/reference/src/language/widgets/textedit.md

@@ -15,6 +15,7 @@ shortcut will be implemented in a future version: <https://github.com/slint-ui/s
 -   **`read-only`** (_in_ _bool_): When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically (default value: `false`)
 -   **`wrap`** (_in_ _enum [`TextWrap`](../builtins/enums.md#textwrap)_): The way the text wraps (default: word-wrap).
 -   **`horizontal-alignment`** (_in_ _enum [`TextHorizontalAlignment`](../builtins/enums.md#texthorizontalalignment)_): The horizontal alignment of the text.
+-   **`placeholder-text`**: (_in_ _string_): A placeholder text being shown when there is no text in the edit field.
 
 ### Functions
 

examples/gallery/ui/pages/text_edit_page.slint

@@ -16,6 +16,7 @@ export component TextEditPage inherits Page {
             te1 := TextEdit {
                 // min-width: 200px;
                 text: @tr("This is our TextEdit widget, which allows for editing text that spans over multiple paragraphs.\nFor example this line starts in a new paragraph.\n\nWhen the amount of lines - due to wrapping and number of paragraphs - exceeds the available vertical height, a vertical scrollbar is shown that allows scrolling.\nYou may want to enter a bit of text here then in order to make them visible.");
+                placeholder-text: @tr("Add some text");
                 wrap: word-wrap;
                 enabled: GallerySettings.widgets-enabled;
             }

internal/compiler/widgets/common/textedit-base.slint

@@ -25,6 +25,9 @@ export component TextEditBase inherits Rectangle {
     in property <brush> selection-background-color;
     in property <brush> selection-foreground-color;
 
+    in property <string> placeholder-text;
+    in property <brush> placeholder-color;
+
     callback edited(/* text */ string);
 
     public function set-selection-offsets(start: int,end: int){
@@ -88,5 +91,21 @@ export component TextEditBase inherits Rectangle {
         }
     }
 
+    placeholder := Text {
+        x: scroll-view.x;
+        y: scroll-view.y;
+        width: scroll-view.width;
+        vertical-alignment: top;
+        text: (root.text == "" && text-input.preedit-text == "") ? root.placeholder-text : "";
+        font-size: text-input.font-size;
+        font-italic: text-input.font-italic;
+        font-weight: text-input.font-weight;
+        font-family: text-input.font-family;
+        color: root.placeholder-color;
+        overflow: elide;
+        // the label is set on the TextEdit itself
+        accessible-role: none;
+    }
+
     @children
 }

internal/compiler/widgets/cosmic-base/textedit.slint

@@ -11,6 +11,7 @@ export component TextEdit {
     in property <bool> read-only <=> base.read-only;
     in property <length> font-size <=> base.font-size;
     in property <bool> enabled <=> base.enabled;
+    in property <string> placeholder-text <=> base.placeholder-text;
     in-out property <bool> has-focus: base.has-focus;
     out property <length> visible-width <=> base.visible-width;
     out property <length> visible-height <=> base.visible-height;
@@ -71,6 +72,7 @@ export component TextEdit {
         font-weight: CosmicFontSettings.body.font-weight;
         selection-background-color: CosmicPalette.selection-background;
         selection-foreground-color: CosmicPalette.selection-foreground;
+        placeholder-color: CosmicPalette.placeholder-foreground;
         if root.has-focus && root.enabled: Rectangle {
             width: parent.width + 2px;
             height: parent.height + 2px;

internal/compiler/widgets/cupertino-base/textedit.slint

@@ -8,12 +8,12 @@ import { FocusBorder } from "components.slint";
 // FIXME: After auto-hiding of scrollbars is implemented, use TextEditBase
 component ScrollView {
     in property <bool> enabled: true;
-    out property <length> visible-width <=> i-flickable.width;
+    out property <length> visible-width <=> flickable.width;
-    out property <length> visible-height <=> i-flickable.height;
+    out property <length> visible-height <=> flickable.height;
-    in-out property <length> viewport-width <=> i-flickable.viewport-width;
+    in-out property <length> viewport-width <=> flickable.viewport-width;
-    in-out property <length> viewport-height <=> i-flickable.viewport-height;
+    in-out property <length> viewport-height <=> flickable.viewport-height;
-    in-out property <length> viewport-x <=> i-flickable.viewport-x;
+    in-out property <length> viewport-x <=> flickable.viewport-x;
-    in-out property <length> viewport-y <=> i-flickable.viewport-y;
+    in-out property <length> viewport-y <=> flickable.viewport-y;
     // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
     in-out property <bool> has-focus;
 
@@ -24,98 +24,98 @@ component ScrollView {
     preferred-height: 100%;
     preferred-width: 100%;
 
-    i-flickable := Flickable {
+    flickable := Flickable {
         x: 2px;
         y: 2px;
         interactive: false;
-        viewport-y <=> i-vertical-bar.value;
+        viewport-y <=> vertical-bar.value;
-        viewport-x <=> i-horizontal-bar.value;
+        viewport-x <=> horizontal-bar.value;
         width: parent.width - 16px;
         height: 100%;
 
         @children
     }
 
-    i-vertical-bar := ScrollBar {
+    vertical-bar := ScrollBar {
         enabled: root.enabled;
         x: parent.width - self.width;
         y: 0;
         width: self.has-hover ? 20px : 12px;
-        height: i-horizontal-bar.visible ? parent.height - i-horizontal-bar.height : parent.height;
+        height: horizontal-bar.visible ? parent.height - horizontal-bar.height : parent.height;
         horizontal: false;
-        maximum:  i-flickable.viewport-height - i-flickable.height;
+        maximum: flickable.viewport-height - flickable.height;
-        page-size:  i-flickable.height;
+        page-size: flickable.height;
-        visible: i-flickable.viewport-height > i-flickable.height;
+        visible: flickable.viewport-height > flickable.height;
     }
 
-    i-horizontal-bar := ScrollBar {
+    horizontal-bar := ScrollBar {
         enabled: root.enabled;
-        width: i-vertical-bar.visible ? parent.width - i-vertical-bar.width : parent.width;
+        width: vertical-bar.visible ? parent.width - vertical-bar.width : parent.width;
         height: self.has-hover ? 20px : 12px;
         y: parent.height - self.height;
         x: 0;
         horizontal: true;
-        maximum:  i-flickable.viewport-width - i-flickable.width;
+        maximum: flickable.viewport-width - flickable.width;
-        page-size:  i-flickable.width;
+        page-size: flickable.width;
-        visible: i-flickable.viewport-width > i-flickable.width;
+        visible: flickable.viewport-width > flickable.width;
     }
 }
 
 export component TextEdit {
-    in property <TextWrap> wrap <=> i-text-input.wrap;
+    in property <TextWrap> wrap <=> text-input.wrap;
-    in property <TextHorizontalAlignment> horizontal-alignment <=> i-text-input.horizontal-alignment;
+    in property <TextHorizontalAlignment> horizontal-alignment <=> text-input.horizontal-alignment;
-    in property <bool> read-only <=> i-text-input.read-only;
+    in property <bool> read-only <=> text-input.read-only;
-    in property <length> font-size <=> i-text-input.font-size;
+    in property <length> font-size <=> text-input.font-size;
-    in property <bool> enabled <=> i-text-input.enabled;
+    in property <bool> enabled <=> text-input.enabled;
-    out property <length> visible-width <=> i-scroll-view.visible-width;
+    out property <length> visible-width <=> scroll-view.visible-width;
-    out property <length> visible-height <=> i-scroll-view.visible-height;
+    out property <length> visible-height <=> scroll-view.visible-height;
-    in-out property <bool> has-focus: i-text-input.has-focus;
+    in-out property <bool> has-focus: text-input.has-focus;
-    in-out property <string> text <=> i-text-input.text;
+    in-out property <string> text <=> text-input.text;
-    in-out property <length> viewport-x <=> i-scroll-view.viewport-x;
+    in-out property <length> viewport-x <=> scroll-view.viewport-x;
-    in-out property <length> viewport-y <=> i-scroll-view.viewport-y;
+    in-out property <length> viewport-y <=> scroll-view.viewport-y;
-    in-out property <length> viewport-width <=> i-scroll-view.viewport-width;
+    in-out property <length> viewport-width <=> scroll-view.viewport-width;
-    in-out property <length> viewport-height <=> i-scroll-view.viewport-height;
+    in-out property <length> viewport-height <=> scroll-view.viewport-height;
+    in property <string> placeholder-text;
 
     callback edited(/* text */ string);
     accessible-role: AccessibleRole.text-input;
     accessible-value <=> text;
 
-
     public function set-selection-offsets(start: int,end: int){
-        i-text-input.set-selection-offsets(start, end);
+        text-input.set-selection-offsets(start, end);
     }
 
     public function select-all(){
-        i-text-input.select-all();
+        text-input.select-all();
     }
 
     public function clear-selection(){
-        i-text-input.clear-selection();
+        text-input.clear-selection();
     }
 
     public function cut(){
-        i-text-input.cut();
+        text-input.cut();
     }
 
     public function copy(){
-        i-text-input.copy();
+        text-input.copy();
     }
 
     public function paste(){
-        i-text-input.paste();
+        text-input.paste();
     }
 
-    forward-focus: i-text-input;
+    forward-focus: text-input;
     horizontal-stretch: 1;
     vertical-stretch: 1;
 
     states [
         disabled when !root.enabled: {
-            i-text-input.color: CupertinoPalette.foreground-secondary;
+            text-input.color: CupertinoPalette.foreground-secondary;
-            i-background.background: CupertinoPalette.tertiary-control-background;
+            background.background: CupertinoPalette.tertiary-control-background;
         }
         focused when root.has-focus: {
-            i-background.background: CupertinoPalette.control-background;
+            background.background: CupertinoPalette.control-background;
         }
     ]
 
@@ -127,21 +127,21 @@ export component TextEdit {
         has-focus: root.has-focus;
     }
 
-    i-background := Rectangle {
+    background := Rectangle {
         background: CupertinoPalette.alternate-background;
         border-color: CupertinoPalette.border;
         border-width: 1px;
     }
 
-    i-scroll-view := ScrollView {
+    scroll-view := ScrollView {
         x: 8px;
         y: 8px;
         width: parent.width - 16px;
         height: parent.height - 16px;
-        viewport-width: root.wrap == TextWrap.word-wrap ? self.visible-width : max(self.visible-width, i-text-input.preferred-width);
+        viewport-width: root.wrap == TextWrap.word-wrap ? self.visible-width : max(self.visible-width, text-input.preferred-width);
-        viewport-height: max(self.visible-height, i-text-input.preferred-height);
+        viewport-height: max(self.visible-height, text-input.preferred-height);
 
-        i-text-input := TextInput {
+        text-input := TextInput {
             enabled: true;
             color: CupertinoPalette.foreground;
             font-size: CupertinoFontSettings.body.font-size;
@@ -170,4 +170,20 @@ export component TextEdit {
             }
         }
     }
+
+    placeholder := Text {
+        x: scroll-view.x;
+        y: scroll-view.y;
+        width: scroll-view.width;
+        vertical-alignment: top;
+        text: (root.text == "" && text-input.preedit-text == "") ? root.placeholder-text : "";
+        font-size: text-input.font-size;
+        font-italic: text-input.font-italic;
+        font-weight: text-input.font-weight;
+        font-family: text-input.font-family;
+        color: CupertinoPalette.foreground-secondary;
+        overflow: elide;
+        // the label is set on the TextEdit itself
+        accessible-role: none;
+    }
 }

internal/compiler/widgets/fluent-base/textedit.slint

@@ -11,6 +11,7 @@ export component TextEdit {
     in property <bool> read-only <=> base.read-only;
     in property <length> font-size <=> base.font-size;
     in property <bool> enabled <=> base.enabled;
+    in property <string> placeholder-text <=> base.placeholder-text;
     in-out property <bool> has-focus: base.has-focus;
     out property <length> visible-width <=> base.visible-width;
     out property <length> visible-height <=> base.visible-height;
@@ -77,6 +78,7 @@ export component TextEdit {
         foreground: FluentPalette.foreground;
         font-size: FluentFontSettings.body.font-size;
         font-weight: FluentFontSettings.body.font-weight;
+        placeholder-color: FluentPalette.text-secondary;
         selection-background-color: FluentPalette.selection-background;
         selection-foreground-color: FluentPalette.selection-foreground;
 

internal/compiler/widgets/material-base/textedit.slint

@@ -11,6 +11,7 @@ export component TextEdit {
     in property <bool> read-only <=> base.read-only;
     in property <length> font-size <=> base.font-size;
     in property <bool> enabled <=> base.enabled;
+    in property <string> placeholder-text <=> base.placeholder-text;
     in-out property <bool> has-focus: base.has-focus;
     out property <length> visible-width <=> base.visible-width;
     out property <length> visible-height <=> base.visible-height;
@@ -72,6 +73,7 @@ export component TextEdit {
         foreground: MaterialPalette.foreground;
         font-size: MaterialFontSettings.body-large.font-size;
         font-weight: MaterialFontSettings.body-large.font-weight;
+        placeholder-color: MaterialPalette.border-variant;
         selection-background-color: MaterialPalette.selection-background;
         selection-foreground-color: MaterialPalette.selection-foreground;
     }

internal/compiler/widgets/qt/textedit.slint

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.2 OR LicenseRef-Slint-commercial
 
 import { TextEditBase } from "../common/textedit-base.slint";
+import { StyleMetrics  } from "std-widgets-impl.slint";
 
 export component TextEdit {
     in property <TextWrap> wrap <=> base.wrap;
@@ -9,6 +10,7 @@ export component TextEdit {
     in property <bool> read-only <=> base.read-only;
     in property <length> font-size <=> base.font-size;
     in property <bool> enabled <=> base.enabled;
+    in property <string> placeholder-text <=> base.placeholder-text;
     in-out property <bool> has-focus: base.has-focus;
     out property <length> visible-width <=> base.visible-width;
     out property <length> visible-height <=> base.visible-height;
@@ -68,6 +70,7 @@ export component TextEdit {
         border-color: NativePalette.border;
         scroll-view-padding: 4px;
         foreground: NativePalette.foreground;
+        placeholder-color: self.enabled ? StyleMetrics.placeholder-color : StyleMetrics.placeholder-color-disabled;
         selection-background-color: NativePalette.selection-background;
         selection-foreground-color: NativePalette.selection-foreground;
     }