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 input components (text and secure), integrates them into ADS preview, updates theme colors, and adds lint rules enforcing trailing icon usage.

Design System (Compose):
- DaxTextField and DaxSecureTextField added with label, error, input modes (editable/read-only/disabled), line limits, keyboard options, input transformation, and trailing icon API via DaxTextFieldTrailingIconScope.
- Password visibility toggle integrated in DaxSecureTextField and combinable with custom trailing icon.
- Previews for both components.
Theme:
- Extend DuckDuckGoColors with textField.borders and icons.primary; add White78.
- Wire new colors in DuckDuckGoTheme (light/dark palettes) and expose iconColors.
ADS Preview (internal):
- ComponentTextInputFragment and component_text_input_view.xml updated to showcase Compose variants: single/multi/form, read-only with/without icons, passwords (incl. visibility), error/disabled, IP/URL inputs, observable text, auto-select on focus, and programmatic focus.
Lint rules:
- New detectors DaxTextFieldTrailingIconDetector and DaxSecureTextFieldTrailingIconDetector; register in DuckDuckGoIssueRegistry with comprehensive tests.

^{Written by Cursor Bugbot for commit a7aa6a2. 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 😅

.../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?

GerardPaligot · 2025-12-12T16:52:10Z

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

+        }
+
+        // Error
+        view.setupThemedComposeView(id = com.duckduckgo.common.ui.internal.R.id.compose_text_input_21, isDarkTheme = isDarkTheme) {


We have a difference between the XML and Compose components here.
When I'm clicking on the XML view, the cursor is white/black (according to if you are in dark/light mode).
When I'm clicking on the Compose view, the cursor is in red.
From my opinion, we should keep the Compose behavior but because there is a difference, I want to report it here.

Good catch! I also vote for the Compose behavior, but making the cursor color match XML should be simple. @mikescamell How do you feel?

GerardPaligot · 2025-12-12T17:00:35Z

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

+) {
+    // needed by the OutlinedTextField container
+    val internalInteractionSource = interactionSource ?: remember { MutableInteractionSource() }
+    var isPasswordVisible by remember { mutableStateOf(false) }


Suggestion: What do you think to put a boolean parameter in the compose contract and let the component consumer control the visibility state of this component? This will allow us to keep a stateless component and give a better control of the component to the consumer. If we want to display the password for any other reasons than a click on the trailing icon, we can't with our actual contract.

Lifted the state outside so it's now the consumers responsibility. It makes sense to have a stateless component, however I do think this impacts the ease of use by needing more boilerplate state management.

In all the currently supported use-cases , the only reason to show/hide password is because of the internal icon click. It seems we're predicting potential other usages in the future, incorporating that in the API, and by doing that, making it harder to use for existing purpose.

...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

cursor · 2025-12-16T07:02:27Z

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

+            Icon(
+                painter = painter,
+                contentDescription = contentDescription,
+                tint = DuckDuckGoTheme.iconColors.primary,


Bug: Trailing icon ignores error state color configuration

The DaxTextFieldTrailingIcon hardcodes tint = DuckDuckGoTheme.iconColors.primary, which overrides the Material3 LocalContentColor mechanism. This means the errorTrailingIconColor = DuckDuckGoTheme.colors.destructive configured in daxTextFieldColors() is never applied - when a text field is in error state, the border and label turn red but the trailing icon stays in its normal primary color instead of changing to destructive. Using LocalContentColor.current or Color.Unspecified for the tint would allow the icon to properly reflect error state.

_{Please tell me if this was useful or not with a 👍 or 👎.}

Additional Locations (1)

android-design-system/design-system/src/main/java/com/duckduckgo/common/ui/compose/textfield/DaxTextField.kt#L320-L321

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 added 8 commits December 11, 2025 19:20

WIP: compose text field

fce69e5

Finalize component

a789356

Finalize component

3fce1a3

Add previews

2a32f29

Revert DaxText change

d953884

Remove unused color

92a662b

Fix code formatting

387b52e

Fix lint issue

32877ad

Refactor based on feedback

b3b471e

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

Remove unused press listener

a01564c

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

Lift password state

9c4d4a6

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

Add new lint detector

a7aa6a2

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

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!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

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!

cursor bot Dec 16, 2025

Choose a reason for hiding this comment

Bug: Trailing icon ignores error state color configuration

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

landomen commented Nov 28, 2025 •

edited by cursor bot

Loading

landomen commented Dec 16, 2025 •

edited

Loading