feat: support color style for x-textarea #1382
Conversation
🦋 Changeset detectedLatest commit: 358b121 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📝 WalkthroughWalkthroughThis change introduces support for color styling in the Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yaml ⛔ Files ignored due to path filters (6)
📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (4)
🧰 Additional context used🧠 Learnings (1)📓 Common learnings🔇 Additional comments (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
PupilTong
force-pushed
the
p/hw/textarea-color
branch
from
179bfd8 to
8e5e121
Compare
There was a problem hiding this comment.
Pull Request Overview
This PR adds color style support for the x-textarea web component by adding color: inherit to the CSS styles and includes a test to verify the functionality.
- Adds
color: inheritto the textarea CSS part styling - Creates a new test case that renders an x-textarea with red color styling
- Adds a screenshot-based test to verify the color styling works correctly
Reviewed Changes
Copilot reviewed 4 out of 7 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/web-platform/web-elements/src/XTextarea/x-textarea.css | Adds color: inherit to enable color style inheritance |
| packages/web-platform/web-tests/tests/react/basic-element-x-textarea-color/index.jsx | Test component demonstrating red color styling on x-textarea |
| packages/web-platform/web-tests/tests/react.spec.ts | Adds screenshot test for the color styling functionality |
| .changeset/afraid-cameras-hide.md | Documents the feature addition as a patch release |
packages/web-platform/web-tests/tests/react/basic-element-x-textarea-color/index.jsx
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/web-platform/web-elements/src/XTextarea/x-textarea.css (1)
14-32: Placeholder color now diverges fromcurrentColor.Adding
color: inherit;(Line 31) correctly lets the textarea’s text follow the surrounding color.
However, the placeholder’s default is still hard-coded to grey (Lines 41-42). That means when developers set a custom text color (e.g. red in the new test), the placeholder will remain grey instead of matchingcurrentColor, creating an inconsistent UX.Consider defaulting the placeholder to use
currentColorwhile still allowing overrides through the existing CSS custom property:-x-textarea::part(textarea)::placeholder { - color: var(--placeholder-color); +x-textarea::part(textarea)::placeholder { + /* fall back to current text color unless overridden */ + color: var(--placeholder-color, currentColor);This preserves the opt-in variable but keeps placeholders visually aligned out-of-the-box.
Also applies to: 41-46
packages/web-platform/web-tests/tests/react/basic-element-x-textarea-color/index.jsx (1)
4-4: UnuseduseStateimport.
useStateis imported but never used, which will trigger lint warnings in most setups.
Safe to drop it:-import { useState, root } from '@lynx-js/react'; +import { root } from '@lynx-js/react';
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-textarea/basic-element-x-textarea-color/initial-chromium-linux.pngis excluded by!**/*.pngpackages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-textarea/basic-element-x-textarea-color/initial-firefox-linux.pngis excluded by!**/*.pngpackages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-textarea/basic-element-x-textarea-color/initial-webkit-linux.pngis excluded by!**/*.png
📒 Files selected for processing (4)
.changeset/afraid-cameras-hide.md(1 hunks)packages/web-platform/web-elements/src/XTextarea/x-textarea.css(1 hunks)packages/web-platform/web-tests/tests/react.spec.ts(1 hunks)packages/web-platform/web-tests/tests/react/basic-element-x-textarea-color/index.jsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-mainthread-apis/src/createMainThreadGlobalThis.ts:214-217
Timestamp: 2025-07-16T06:25:41.055Z
Learning: In the lynx-stack codebase, CSS strings produced by `genCssContent` are considered trusted developer input, so additional sanitization/escaping is not required.
Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T05:57:29.837Z
Learning: In the lynx-stack codebase, PupilTong prefers avoiding regex for parsing in performance-critical code paths like SSR hydration, preferring simple string manipulation operations even if they're less robust, when the input format is predictable and controlled.
.changeset/afraid-cameras-hide.md (2)
Learnt from: colinaaa
PR: #1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.
Learnt from: colinaaa
PR: #1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.
🔇 Additional comments (2)
.changeset/afraid-cameras-hide.md (1)
1-6: Changeset entry looks good.Patch bump for
@lynx-js/web-elementsaccurately reflects the user-visible enhancement and satisfies CI requirements. No action needed.packages/web-platform/web-tests/tests/react.spec.ts (1)
3875-3882: LGTM! Well-structured test implementation.The new test case for x-textarea color support follows the established patterns perfectly:
- Consistent naming convention with other element tests
- Appropriate 500ms wait time for styling to take effect
- Standard screenshot comparison approach
- Properly integrated into the x-textarea test suite
This test will effectively verify that the color styling feature works as expected.
CodSpeed Performance ReportMerging #1382 will not alter performanceComparing Summary
|
React Example#3496 Bundle Size — 235.08KiB (0%).358b121(current) vs e104ca9 main#3495(baseline) Bundle metrics
|
| Current #3496 |
Baseline #3495 |
|
|---|---|---|
 Initial JS |
0B |
0B |
| Initial CSS |
0B |
0B |
| Cache Invalidation |
0% |
0% |
| Chunks |
0 |
0 |
| Assets |
4 |
4 |
| Modules |
156 |
156 |
| Duplicate Modules |
63 |
63 |
| Duplicate Code |
45.94% |
45.94% |
| Packages |
2 |
2 |
| Duplicate Packages |
0 |
0 |
Bundle size by type no changes
| Current #3496 |
Baseline #3495 |
|
|---|---|---|
| IMG |
145.76KiB |
145.76KiB |
| Other |
89.33KiB |
89.33KiB |
Bundle analysis report Branch PupilTong:p/hw/textarea-color Project dashboard
Generated by RelativeCI Documentation Report issue
Web Explorer#3487 Bundle Size — 341.35KiB (~+0.01%).358b121(current) vs e104ca9 main#3485(baseline) Bundle metrics
|
| Current #3487 |
Baseline #3485 |
|
|---|---|---|
| Initial JS |
142.12KiB |
142.12KiB |
 Initial CSS |
31.84KiB(+0.04%) |
31.83KiB |
 Cache Invalidation |
9.32% |
0% |
| Chunks |
7 |
7 |
| Assets |
7 |
7 |
| Modules |
215 |
215 |
| Duplicate Modules |
17 |
17 |
| Duplicate Code |
4% |
4% |
| Packages |
4 |
4 |
| Duplicate Packages |
0 |
0 |
Bundle size by type 1 change 1 regression
| Current #3487 |
Baseline #3485 |
|
|---|---|---|
| JS |
226.4KiB |
226.4KiB |
| Other |
83.11KiB |
83.11KiB |
| CSS |
31.84KiB (+0.04%) |
31.83KiB |
Bundle analysis report Branch PupilTong:p/hw/textarea-color Project dashboard
Generated by RelativeCI Documentation Report issue
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
PupilTong
force-pushed
the
p/hw/textarea-color
branch
from
803cf28 to
b5fe7a8
Compare
PupilTong
force-pushed
the
p/hw/textarea-color
branch
from
b5fe7a8 to
358b121
Compare
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/[email protected] ### Minor Changes - Add support for Lynx UI plugin system with configurable options. ([#1363](#1363)) - Introduced `lynxUIPlugins` option in `createLynxPreset`, allowing userland opt-in to Lynx UI specific plugins. - Implemented `uiVariants` plugin as the first UI plugin, supporting `ui-*` variant prefixes (e.g. `ui-checked`, `ui-open`) with customizable mappings. ## @lynx-js/[email protected] ### Patch Changes - Fix crash caused by not removing event listeners during destroy. ([#1379](#1379)) - Fix missing "type" in "update-list-info" in hydrate ([#1392](#1392)) ## @lynx-js/[email protected] ### Patch Changes - Bump Rsbuild v1.4.12 with Rspack v1.4.11. ([#1326](#1326)) ## @lynx-js/[email protected] ### Patch Changes - Updated dependencies \[[`e9edca0`](e9edca0), [`6f37db2`](6f37db2)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - feat: support `__ElementFromBinary` ([#1391](#1391)) - Updated dependencies \[]: - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - feat: support `__ElementFromBinary` ([#1391](#1391)) - fix: crash on chrome<96 ([#1361](#1361)) <wasm-bindgen/wasm-bindgen#4211 (comment)> <WebAssembly/binaryen#7358> The rust toolchain enables WASM feature `reference types` by default. However this feature is not supported by chromium lower than version 96 Therefore we found a workaround for it. In this implementation we detect if browser supports `reference types` first. If user's browser supported it, we load the wasm file with `reference types` on, otherwise we load the wasm file with `reference types` off. - Updated dependencies \[[`22ca433`](22ca433), [`8645d12`](8645d12), [`143e481`](143e481)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - refactor: bundle web-core-server ([#819](#819)) ## @lynx-js/[email protected] ### Patch Changes - feat: support color style for x-textarea ([#1382](#1382)) - Updated dependencies \[]: - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - feat: support `__ElementFromBinary` ([#1391](#1391)) - fix: crash on chrome<96 ([#1361](#1361)) <wasm-bindgen/wasm-bindgen#4211 (comment)> <WebAssembly/binaryen#7358> The rust toolchain enables WASM feature `reference types` by default. However this feature is not supported by chromium lower than version 96 Therefore we found a workaround for it. In this implementation we detect if browser supports `reference types` first. If user's browser supported it, we load the wasm file with `reference types` on, otherwise we load the wasm file with `reference types` off. - Updated dependencies \[[`22ca433`](22ca433)]: - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - optimize IO for all-on-ui: make startMainThreadWorker async and defer import ([#1385](#1385)) - Updated dependencies \[[`22ca433`](22ca433), [`143e481`](143e481)]: - @lynx-js/[email protected] - @lynx-js/[email protected] - @lynx-js/[email protected] ## @lynx-js/[email protected] ### Patch Changes - Support Rspack v1.4.9. ([#1351](#1351)) ## @lynx-js/[email protected] ### Patch Changes - feat: support elementTemplate for web ([#1374](#1374)) ## [email protected] ## @lynx-js/[email protected] ## [email protected] ## @lynx-js/[email protected] ## @lynx-js/[email protected] ## @lynx-js/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
2 participants
Summary by CodeRabbit
New Features
Tests
Checklist