Skip to content

Components: migrate SearchControl to SCSS module - #80474

Merged
im3dabasia merged 3 commits into
WordPress:trunkfrom
im3dabasia:migrate/move-search-control-to-module-scss
Jul 21, 2026
Merged

Components: migrate SearchControl to SCSS module#80474
im3dabasia merged 3 commits into
WordPress:trunkfrom
im3dabasia:migrate/move-search-control-to-module-scss

Conversation

@im3dabasia

@im3dabasia im3dabasia commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

What?

Part of: #66806

Migrates SearchControl from Emotion (@emotion/styled) to an SCSS module.

Why?

The @wordpress/components package is moving off Emotion (CSS-in-JS) to SCSS modules to reduce runtime bundle size and execution cost, remove dev-tools class pollution, and avoid iframe/portal styling issues. SearchControl only has two static styled wrappers, making it a low-risk component to migrate.

How?

  • Replaced the StyledInputControl = styled( InputControl ) and StyledIcon = styled( Icon ) definitions in styles.ts with .input and .icon classes in a new style.module.scss.
  • Rendered plain InputControl and Icon with the module classes instead of the styled components.
  • Merged the .input class into the existing clsx on InputControl so the pre-existing components-search-control class and any consumer-passed className are preserved.
  • Deleted the now-unused styles.ts.

No public API, class name, or behavior changes.

Testing Instructions

  1. Open a view that renders a SearchControl (e.g. Storybook → Components → SearchControl, or the block inserter / global styles search fields).
  2. Confirm the search input renders correctly and the native WebKit search decorations/clear button remain hidden.
  3. Confirm the search icon renders and is horizontally flipped in LTR (and appears normally in RTL).
  4. Type a query and clear it; confirm behavior is unchanged.

Use of AI Tools

This PR was authored with the assistance of Claude Code (Anthropic). All generated changes were reviewed, tested, and verified by me.

@github-actions github-actions Bot added the [Package] Components /packages/components label Jul 20, 2026
@im3dabasia im3dabasia added the [Type] Code Quality Issues or PRs that relate to code quality label Jul 20, 2026
@im3dabasia
im3dabasia marked this pull request as ready for review July 20, 2026 12:48
@im3dabasia
im3dabasia requested review from a team and ajitbohra as code owners July 20, 2026 12:48
@github-actions

github-actions Bot commented Jul 20, 2026

Copy link
Copy Markdown

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: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

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

@mirka mirka left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, please add a changelog before merge 🙏 (also).

@im3dabasia im3dabasia self-assigned this Jul 21, 2026
@im3dabasia
im3dabasia merged commit 0a63036 into WordPress:trunk Jul 21, 2026
57 checks passed
@im3dabasia
im3dabasia deleted the migrate/move-search-control-to-module-scss branch July 21, 2026 12:26
@github-actions github-actions Bot added this to the Gutenberg 23.7 milestone Jul 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants