Compose: Add DaxTextField #7247

landomen · 2025-11-28T15:57:07Z

Task/Issue URL: https://app.asana.com/1/137249556945/project/1210594645151737/task/1211659112661196?focus=true

Description

Adds a Compose version of the DaxTextField.

Steps to test this PR

ADS Preview

Go to ADS Preview screen and click on Text Input tab
Check compose versions

UI changes

See ADS Preview screen

Note

Introduces Compose text fields (standard and secure) with trailing icon API and previews, adds theme text-field colors, and enforces trailing icon usage via new lint checks.

Design System (Compose):
- New components: DaxTextField and DaxSecureTextField with DaxTextFieldInputMode, DaxTextFieldLineLimits, keyboard options, input transformations, error/supporting text, and DaxTextFieldTrailingIconScope API.
- Secure field: visibility toggle integrated with optional trailing icon.
- Previews: comprehensive previews for states and configurations.
ADS Preview/Examples:
- Integrates multiple Compose samples in ComponentTextInputFragment and component_text_input_view.xml (hint, single/multi/form, read-only, disabled, error, URL/IP, focus behaviors, observable text, password variants).
Theme:
- Adds DuckDuckGoTextFieldColors (colors.textField.borders) and exposes DuckDuckGoTheme.iconColors; minor color addition White78.
Lint Rules:
- New detectors: DaxTextFieldTrailingIconDetector and DaxSecureTextFieldTrailingIconDetector; registered in DuckDuckGoIssueRegistry with extensive tests to enforce using DaxTextFieldTrailingIconScope in trailingIcon.

^{Written by Cursor Bugbot for commit 33aa9f1. This will update automatically on new commits. Configure here.}

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

malmstein

very nice work, just a couple of nits. I’ll leave it to @mikescamell for the final approval.

...id-design-system/design-system/src/main/java/com/duckduckgo/common/ui/compose/theme/Theme.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

...id-design-system/design-system/src/main/java/com/duckduckgo/common/ui/compose/theme/Theme.kt

...id-design-system/design-system/src/main/java/com/duckduckgo/common/ui/compose/theme/Color.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt

mikescamell · 2025-12-10T09:40:23Z

@landomen I can still click on the disabled version and get focus.

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

mikescamell · 2025-12-10T10:16:45Z

@landomen I can still click on the disabled version and get focus.

I think we need yo end up in a state of

            enabled = false,
            readOnly = true,

For it not to be focusable

landomen · 2025-12-12T07:59:56Z

@landomen I can still click on the disabled version and get focus.

I think we need yo end up in a state of
            enabled = false,
            readOnly = true,
For it not to be focusable

Thanks for catching this! This was a bug because of the wrong combination of arguments after I cleaned up the code 😅. It's fixed now with the new enum.

landomen · 2025-12-12T14:36:24Z

@mikescamell @GerardPaligot Thanks for all your great feedback! I've refactored the composable, please take another look when you get a chance.

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt

GerardPaligot

This new version is really good!

GerardPaligot · 2025-12-12T16:41:27Z

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt

+        }
+
+        // Non-editable text full click listener with end icon
+        view.setupThemedComposeView(id = com.duckduckgo.common.ui.internal.R.id.compose_text_input_30, isDarkTheme = isDarkTheme) {


We have a difference between the XML and Compose components here.
When I'm clicking on the XML view, the view isn't focused.
The same thing on the Compose component switch the border in blue (focus mode).

Not sure if there is an easy way to prevent that. Would probably have to do something with the MutableInteractionSource but that could be tricky. In my opinion, the current behavior is okay, because you interacted with the text field (it's still enabled).

The XML one sometimes also behaves like that, at least on the "Non-editable text with line truncation" example. And there is a bug on the XML one where the keyboard still shows up and you can enter new text even though its set to non-editable 😅

💡 Wouldn't this be solved by setting enabled to false when in ReadOnly state? I'm wondering if there are any ramifications to this.

Yes, from my opinion, the current behavior is okay too because if the component is enabled, it should be focusable (and therefore readable by screen readers). I'm okay to keep the compose behavior.

Wouldn't this be solved by setting enabled to false when in ReadOnly state?

@mikescamell Setting enabled=false and readOnly=true does make it not focus like we want. However, there are three side-effects: longer text is not scrollable, you can't copy text and the text field won't be picked up by accessibility services. I think those tradeoffs are not worth it.

These are descriptions of the fields from the documentation. I think Compose behavior is the correct one and the one we should prefer over the XML one. But let me know if you feel different.

Enabled: "When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services."

ReadOnly: "When true, the text field cannot be modified. However, a user can focus it and copy text from it. Read-only text fields are usually used to display pre-filled forms that a user cannot edit."

SGTM @landomen, lets go with it 👍

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt

GerardPaligot · 2025-12-12T16:49:13Z

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt

+        // Editable password that fits in one line
+        view.setupThemedComposeView(id = com.duckduckgo.common.ui.internal.R.id.compose_text_input_6, isDarkTheme = isDarkTheme) {
+            val state = rememberTextFieldState("Loremipsumolor")
+            DaxSecureTextField(


We have a difference between the XML and Compose components here.
When I'm clicking on the XML view, the content is no more masked.
When I'm clicking on the Compose view, the content stay masked.
From my opinion, we should keep the Compose behavior but because there is a difference, I want to report it here.

Thanks for reporting it!

Yeah, the XML one first shows unmasked text when focused and masking it requires action.
The Compose one first shows masked text when focused and unmasking it requires action.

I agree the Compose behavior is better, more secure and I think more in line with how a secure text input should behave. So I'm voting for keeping it. @mikescamell Your thoughts?

Yeah I agree, it feels weird to have the show password icon button if clicking into the shows the password implicitly 🤔

@malmstein any historical context on why this happens?

Clicking on the View version, password shown automatically:

What we'd expect, clicking doesn't automatically show the password until the show password button is clicked:

@malmstein Any idea why the xml input field reveals the password automatically when clicked?

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt

landomen · 2025-12-16T06:27:22Z

@GerardPaligot @mikescamell I pushed two new commits:

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxTextFieldTrailingIconDetector.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxTextFieldTrailingIconDetector.kt

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxSecureTextFieldTrailingIconDetector.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

GerardPaligot

Potential few changes to do in linter rules but for the rest, everything is good for me now! Well done!

GerardPaligot · 2025-12-16T09:06:49Z

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxSecureTextFieldTrailingIconDetector.kt

+
+            // Only DaxTextFieldTrailingIcon should be used in the trailingIcon parameter
+            // If the source doesn't contain it, then it's invalid
+            return !source.contains("DaxTextFieldTrailingIcon")


We can probably get member list declared in the scope object class and check if the source contains one member of this list? This will allow us to avoid to edit this linter rule every time we need to edit the scope.

I've updated the detector so it works with any additional new composable we declare in the scope. Let me know if this is what you had in mind

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxSecureTextFieldTrailingIconDetector.kt

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxTextFieldTrailingIconDetector.kt

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt

landomen · 2025-12-18T19:33:13Z

@mikescamell @GerardPaligot I've addressed the open comments, please take another look

GerardPaligot

LGTM! 🎉 Congrats @landomen for this contribution

landomen requested review from malmstein and mikescamell as code owners November 28, 2025 15:57

landomen commented Nov 28, 2025

View reviewed changes

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt Show resolved Hide resolved

landomen commented Nov 28, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Show resolved Hide resolved

landomen assigned mikescamell Nov 28, 2025

landomen commented Nov 28, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Show resolved Hide resolved

malmstein reviewed Nov 28, 2025

View reviewed changes

...id-design-system/design-system/src/main/java/com/duckduckgo/common/ui/compose/theme/Theme.kt Outdated Show resolved Hide resolved

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Show resolved Hide resolved

GerardPaligot reviewed Dec 2, 2025

View reviewed changes

mikescamell reviewed Dec 10, 2025

View reviewed changes

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt Outdated Show resolved Hide resolved

mikescamell reviewed Dec 10, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Outdated Show resolved Hide resolved

landomen force-pushed the feature/domen/compose-text-field branch from 89c6858 to b3b471e Compare December 12, 2025 14:35

landomen requested review from GerardPaligot, malmstein and mikescamell December 12, 2025 14:36

cursor bot reviewed Dec 12, 2025

View reviewed changes

.../java/com/duckduckgo/common/ui/internal/ui/component/textinput/ComponentTextInputFragment.kt Show resolved Hide resolved

cursor bot reviewed Dec 12, 2025

View reviewed changes

...design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxSecureTextField.kt Show resolved Hide resolved

GerardPaligot reviewed Dec 12, 2025

View reviewed changes

landomen requested a review from GerardPaligot December 16, 2025 06:26

cursor bot reviewed Dec 16, 2025

View reviewed changes

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxTextFieldTrailingIconDetector.kt Show resolved Hide resolved

landomen force-pushed the feature/domen/compose-text-field branch from 464f7a6 to a7aa6a2 Compare December 16, 2025 06:56

cursor bot reviewed Dec 16, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Show resolved Hide resolved

mikescamell reviewed Dec 16, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Show resolved Hide resolved

mikescamell reviewed Dec 16, 2025

View reviewed changes

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxTextFieldTrailingIconDetector.kt Show resolved Hide resolved

mikescamell reviewed Dec 16, 2025

View reviewed changes

lint-rules/src/main/java/com/duckduckgo/lint/ui/DaxSecureTextFieldTrailingIconDetector.kt Show resolved Hide resolved

mikescamell reviewed Dec 16, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Outdated Show resolved Hide resolved

GerardPaligot reviewed Dec 16, 2025

View reviewed changes

landomen added 8 commits December 18, 2025 20:20

WIP: compose text field

72466a6

Finalize component

80381b6

Finalize component

62a6b0f

Add previews

6759260

Revert DaxText change

7398c5d

Remove unused color

a87aa84

Fix code formatting

942f070

Fix lint issue

bf70752

cursor bot reviewed Dec 18, 2025

View reviewed changes

...ystem/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt Outdated Show resolved Hide resolved

landomen added 6 commits December 18, 2025 20:22

Refactor based on feedback

b08866a

Remove unused press listener

2e25a24

Lift password state

95e4b1b

Add new lint detector

70786de

Update implementation

1c7d88b

Fix rebase issues

33aa9f1

landomen force-pushed the feature/domen/compose-text-field branch from f23d1ef to 33aa9f1 Compare December 18, 2025 19:32

landomen requested review from GerardPaligot and mikescamell December 18, 2025 19:32

GerardPaligot approved these changes Dec 19, 2025

View reviewed changes

Compose: Add DaxTextField #7247

Are you sure you want to change the base?

Compose: Add DaxTextField #7247

Conversation

landomen commented Nov 28, 2025 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Steps to test this PR

UI changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

malmstein left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mikescamell commented Dec 10, 2025

Uh oh!

Uh oh!

mikescamell commented Dec 10, 2025

Uh oh!

landomen commented Dec 12, 2025

Uh oh!

landomen commented Dec 12, 2025

Uh oh!

Uh oh!

Uh oh!

GerardPaligot left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

landomen commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

GerardPaligot left a comment

Choose a reason for hiding this comment

Uh oh!

landomen commented Nov 28, 2025 •

edited by cursor bot

Loading

landomen commented Dec 16, 2025 •

edited

Loading

landomen commented Dec 18, 2025 •

edited

Loading