Dataforms: Add icons to email and telephone controls #71514

jorgefilipecosta · 2025-09-05T09:16:56Z

Enhances the email control in DataViews with a visual @ symbol icon prefix, making email fields instantly recognizable.

Changes

Enhanced email control: Replaced generic ValidatedText utility with custom ValidatedInputControl implementation
Added @ icon prefix: Uses atSymbol icon from @wordpress/icons with proper InputControlPrefixWrapper spacing
Extended private APIs: Added ValidatedInputControl to components private API exports
Maintained functionality: Preserved all existing validation logic and field behavior

Technical Implementation

Email Control Enhancement

Migrated from ValidatedTextControl to ValidatedInputControl for better prefix support
Implemented custom validation state management with customValidity
Added comprehensive validation callback handling for both required and custom validation rules
Used InputControlPrefixWrapper with variant="icon" for optimal spacing and alignment

Icon Integration

Imported atSymbol icon from WordPress icons library
Wrapped icon in Icon component for consistent rendering
Applied proper spacing wrapper following established WordPress patterns
Maintained email input type for browser validation benefits

Test Plan

Went to http://localhost:50240/?path=/story/dataviews-fieldtypes--email and verified the email field works well.
Went to http://localhost:50240/?path=/story/dataviews-dataform--validation and verified the validated email field works well.

github-actions · 2025-09-05T09:17:06Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jorgefilipecosta <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: ntsekouras <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

jorgefilipecosta · 2025-09-05T09:19:03Z

If we agree with this solution I may create a new util component under the controls folder used by both email and telephone controls to make having icons easier.

oandregal · 2025-09-05T09:25:18Z

packages/dataviews/src/dataform-controls/email.tsx

+	);
+
 	return (
-		<ValidatedText


This validatedtext component was added recently to share logic among text, email, and telephone. Can we instead add a prefix in ValidatedText and update it for email and telephone?

Yeah, probably it would be better to update ValidatedText to use ValidatedInputControl instead of ValidatedTextControl. I'm not sure though if there are any nuances doing so.

In general it seems that InputControl is aimed to replace TextControl. I'll cc @ciampo for any input.

Even if text doesn't need a prefix right now (and so it could still use ValidatedText), that's something we want to open to consumers soon (see) — I've seen a few use cases already where people are using custom Edits just for the prefix.

github-actions · 2025-09-05T09:43:17Z

Flaky tests detected in e1b5412.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17548430172
📝 Reported issues:

[Flaky Test] Redirection after template creation #60678 in /test/e2e/specs/site-editor/site-editor-url-navigation.spec.js
[Flaky Test] should select the wrapper div for a group #71211 in /test/e2e/specs/editor/various/block-hierarchy-navigation.spec.js

oandregal · 2025-09-05T14:17:01Z

@jorgefilipecosta #71518 just landed adding support for a new url type. Would it be too much to ask to also add a prefix for this one here? The icon would be link.

jorgefilipecosta · 2025-09-05T15:20:11Z

@jorgefilipecosta #71518 just landed adding support for a new url type. Would it be too much to ask to also add a prefix for this one here? The icon would be link.

Hi @oandregal it is done 👍

…ndividual controls Changed approach from modifying individual form controls to enhancing the shared ValidatedText utility: - Replaced ValidatedTextControl with ValidatedInputControl for prefix support - Added automatic type-to-icon mapping (email → @, tel → mobile phone) - Added optional icon prop for manual overrides - Maintained backward compatibility while adding new capabilities This systematic approach benefits all text-based controls and provides better maintainability. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Changed approach from ValidatedText automatically determining icons based on input type to individual controls explicitly passing their desired icons: - ValidatedText: Removed getIconForType function and automatic icon imports, now only uses explicitly passed icon prop - Email control: Added atSymbol import and explicitly passes icon prop - Telephone control: Added mobile import and explicitly passes icon prop This makes the icon choice more explicit and gives each control full control over its visual appearance. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

ntsekouras · 2025-09-09T14:26:41Z

packages/dataviews/src/dataform-controls/utils/validated-text.tsx

+					</InputControlPrefixWrapper>
+				) : undefined
+			}
+			__next40pxDefaultSize


ValidatedInputControl has already this prop. I think we don't need it here.

ntsekouras · 2025-09-09T14:27:55Z

packages/dataviews/src/dataform-controls/utils/validated-text.tsx

+		/**
+		 * Optional icon to display as prefix.
+		 */
+		icon?: React.ComponentType | React.ReactElement;


I'm a bit late here, but wouldn't it be better if the prop is prefix and keep the flexibility of the inner component?

Why restrict to icon?

* Add @ icon prefix to email control with proper spacing * Refactor icon support by enhancing ValidatedText utility instead of individual controls Changed approach from modifying individual form controls to enhancing the shared ValidatedText utility: - Replaced ValidatedTextControl with ValidatedInputControl for prefix support - Added automatic type-to-icon mapping (email → @, tel → mobile phone) - Added optional icon prop for manual overrides - Maintained backward compatibility while adding new capabilities This systematic approach benefits all text-based controls and provides better maintainability. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * Refactor to explicit icon passing instead of automatic type-based icons Changed approach from ValidatedText automatically determining icons based on input type to individual controls explicitly passing their desired icons: - ValidatedText: Removed getIconForType function and automatic icon imports, now only uses explicitly passed icon prop - Email control: Added atSymbol import and explicitly passes icon prop - Telephone control: Added mobile import and explicitly passes icon prop This makes the icon choice more explicit and gives each control full control over its visual appearance. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]> * remove unneed var * add icon for url * Fix unit test --------- Co-authored-by: Claude <[email protected]>

jorgefilipecosta requested review from ajitbohra and oandregal as code owners September 5, 2025 09:16

jorgefilipecosta requested review from oandregal and removed request for ajitbohra and oandregal September 5, 2025 09:17

oandregal reviewed Sep 5, 2025

View reviewed changes

oandregal requested a review from ntsekouras September 5, 2025 09:25

oandregal assigned jorgefilipecosta Sep 5, 2025

oandregal added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Sep 5, 2025

jorgefilipecosta force-pushed the add/email-icon-prefix branch from cdf50c0 to 96a4efa Compare September 5, 2025 13:17

jorgefilipecosta changed the title ~~Dataforms: Add @ icon prefix to email control~~ Dataforms: Add icons to email and telephone controls Sep 5, 2025

jorgefilipecosta force-pushed the add/email-icon-prefix branch from 96a4efa to 30fcb83 Compare September 5, 2025 13:19

jorgefilipecosta force-pushed the add/email-icon-prefix branch from 1cbaf24 to e137445 Compare September 5, 2025 15:18

t-hamano mentioned this pull request Sep 6, 2025

Social Icons: Add a 'Phone' icon which takes a tel: link #55718

Open

oandregal approved these changes Sep 8, 2025

View reviewed changes

jorgefilipecosta and others added 5 commits September 8, 2025 11:31

Add @ icon prefix to email control with proper spacing

adf041f

remove unneed var

5ede93d

add icon for url

00f95ac

jorgefilipecosta force-pushed the add/email-icon-prefix branch from 3ddfc71 to 00f95ac Compare September 8, 2025 10:32

Fix unit test

e1b5412

jorgefilipecosta merged commit a02282b into trunk Sep 8, 2025
67 of 69 checks passed

jorgefilipecosta deleted the add/email-icon-prefix branch September 8, 2025 11:21

github-actions bot added this to the Gutenberg 21.7 milestone Sep 8, 2025

ntsekouras reviewed Sep 9, 2025

View reviewed changes

m1r0 mentioned this pull request Sep 19, 2025

Expose ValidatedInputControl via privateAPIs #71451

Closed

maxschmeling mentioned this pull request Oct 7, 2025

Add BlockCanvasCover SlotFill #72119

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dataforms: Add icons to email and telephone controls #71514

Dataforms: Add icons to email and telephone controls #71514

Uh oh!

jorgefilipecosta commented Sep 5, 2025

Uh oh!

github-actions bot commented Sep 5, 2025 •

edited

Loading

Uh oh!

jorgefilipecosta commented Sep 5, 2025

Uh oh!

oandregal Sep 5, 2025

Uh oh!

ntsekouras Sep 5, 2025

Uh oh!

oandregal Sep 5, 2025

Uh oh!

github-actions bot commented Sep 5, 2025 •

edited

Loading

Uh oh!

oandregal commented Sep 5, 2025

Uh oh!

jorgefilipecosta commented Sep 5, 2025

Uh oh!

Uh oh!

ntsekouras Sep 9, 2025

Uh oh!

ntsekouras Sep 9, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Dataforms: Add icons to email and telephone controls #71514

Dataforms: Add icons to email and telephone controls #71514

Uh oh!

Conversation

jorgefilipecosta commented Sep 5, 2025

Changes

Technical Implementation

Email Control Enhancement

Icon Integration

Test Plan

Uh oh!

github-actions bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jorgefilipecosta commented Sep 5, 2025

Uh oh!

oandregal Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

ntsekouras Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

oandregal Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oandregal commented Sep 5, 2025

Uh oh!

jorgefilipecosta commented Sep 5, 2025

Uh oh!

Uh oh!

ntsekouras Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

ntsekouras Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Sep 5, 2025 •

edited

Loading

github-actions bot commented Sep 5, 2025 •

edited

Loading