Story 2466: Update global Text Field component with disabled state by javiercoronadonarvaez · Pull Request #2495 · boostorg/website-v2

javiercoronadonarvaez · 2026-06-22T15:34:36Z

Issue: #2466

Summary & Context

Updates the global Text Field component's disabled state to match the Figma UI Kit. The disabled styling now uses a gray surface + stronger border + muted text/icon with a lock icon in the trailing slot, replacing the previous opacity: 0.5 dim and bringing the shared component to parity with the search bar's no-JS (disabled) state.

Figma link: UI Kit — Foundations Delivery, Text Field (node 89-2769)
Link to components/page: No live page currently renders a disabled Text Field. The closest existing instance is the header search bar's no-JS state. For recording, a throwaway demo page was used at localhost:8000/v3/field-demo/ . Please refer to the Screenshots section for more details.

Changes

Replaced the disabled treatment in static/css/v3/forms.css (.field__control--disabled): swapped opacity: 0.5 for background-color: --color-surface-mid, border-color: --color-stroke-strong, muted text/placeholder (--color-text-secondary) and icon (--color-icon-secondary), including hover/focus overrides so a disabled field no longer reacts to hover.
Updated templates/v3/includes/_field_text.html to render a lock icon in the trailing slot when disabled, taking priority over both submit_icon and icon_right.

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

No live disabled instances today: no template currently passes disabled=True into _field_text.html, so this defines correct behavior going forward rather than altering an existing screen. Low regression risk.
Shared class side effect (intentional/positive): _field_datetime.html reuses .field__control--disabled, so it automatically picks up the new gray styling. It keeps its own calendar affordance (no lock icon); this is consistent, not a regression.
Mobile hover left unchanged: the search bar's mobile hover (which intentionally does not turn gray on touch) is out of scope for this ticket and was not modified.
Tokens: all colors use existing design tokens (--color-surface-mid, --color-stroke-strong, --color-text-secondary, --color-icon-secondary) with the repo's standard hex fallbacks. No new hardcoded values.

Screenshots

About the recording: the video was captured on a temporary demo page (localhost:8000/v3/field-demo/) created only for testing/verification. It renders the real _field_text.html partial in Idle / Filled / Disabled states side by side so the disabled state can be seen in isolation. This demo page and its route are not part of this PR.

GlobalTextField.mov

Self-review Checklist

Tag at least one team member from each team to review this PR
Link this PR to the related GitHub Project ticket

Frontend

UI implementation matches Figma design
Tested in light and dark mode
Responsive / mobile verified
Accessibility checked (keyboard navigation, etc.)
Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
Test without JavaScript (if applicable)
No console errors or warnings

Summary by CodeRabbit

Style
- Refreshed disabled form field styling with stronger disabled background/border, improved disabled text/placeholder contrast, and consistent not-allowed cursor behavior across base, hover, and focus-within states.
- Disabled icon color now updates to the secondary icon color for normal, hover, and focus-within states.
UI
- Disabled form fields now show a lock icon in the right-side slot instead of the previous right-side icon.

coderabbitai · 2026-06-22T15:34:45Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

The disabled state of the text field component is updated in two files: the CSS replaces the opacity-based approach with explicit background, border, text, and icon color rules for .field__control--disabled, and the HTML template injects a lock icon when the disabled flag is set.

Changes

Disabled Text Field State

Layer / File(s)	Summary
Disabled state CSS and lock icon `static/css/v3/forms.css`, `templates/v3/includes/_field_text.html`	`.field__control--disabled` now applies a disabled background color, strong border color, `cursor: not-allowed`, secondary text/placeholder color, and secondary icon color (covering `:hover` and `:focus-within`), replacing the prior `opacity: 0.5` rule. The template adds a conditional branch that renders a lock icon (with explicit `size`/`viewbox` parameters) when `disabled` is truthy, short-circuiting the `submit_icon` path.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

Task: Update global Text Field component with disabled state #2466: The CSS and template changes directly implement the disabled state (lock icon and updated color/border/background properties) described in that issue's Figma design request.

Poem

🐰 A field gone quiet, a lock takes its place,
No opacity shroud — just colors with grace.
The border stands firm, the cursor says "nope,"
The icon turns grey, abandoning hope.
With CSS neat and a template so trim,
This rabbit hops on — to the very next whim! 🔒

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: updating the Text Field component's disabled state to match the design specification.
Description check	✅ Passed	The description is comprehensive and follows the template structure with all major sections completed: issue reference, summary with context, Figma link, component link, detailed changes, risks/considerations, and a thorough self-review checklist.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch javiercoronarv/2466-update-global-text-field-disabled-state

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

jlchilders11

Thanks for the work, looks good to me!

For an example/place to check that this style is correct, the edit user UI (found at /users/me/?edit=True) uses this styling for the email field.

julhoang

Hi @javiercoronadonarvaez , I have an additional request please! 🙏

For the ease of testing, would you mind adding a disabled field to the V3 Demo page (URL: http://localhost:8000/v3/demo/components/#form-inputs, component: _v3_example_section.html)?

julhoang · 2026-06-29T23:52:37Z

+  background-color: var(--color-surface-mid, #f7f7f8);
+  border-color: var(--color-stroke-strong, #05081640);
  cursor: not-allowed;
 }

+.field__control--disabled .field__input,
+.field__control--disabled .field__input::placeholder,
+.field__control--disabled:hover .field__input::placeholder {
+  color: var(--color-text-secondary, #6b6d78);
+}
+
 .field__control--disabled .field__input {
  cursor: not-allowed;
 }

+.field__control--disabled .field__icon,
+.field__control--disabled:hover .field__icon,
+.field__control--disabled:focus-within .field__icon {
+  color: var(--color-icon-secondary, #6b6d78);
+}
+


Would you mind removing the CSS fallback HEX values? In our project, we prefer not to provide those fallback values so that we can more easily spot if a token was not defined/set properly!

javiercoronadonarvaez · 2026-06-30T16:00:31Z

@jlchilders11 @julhoang

Once again, thanks for your observations. All addressed and ready for review.

herzog0

Looking good! Thanks @javiercoronadonarvaez

julhoang

Looks great to me ✨, thanks Javier!

javiercoronadonarvaez linked an issue Jun 22, 2026 that may be closed by this pull request

Task: Update global Text Field component with disabled state #2466

Open

javiercoronadonarvaez marked this pull request as ready for review June 22, 2026 15:57

javiercoronadonarvaez force-pushed the javiercoronarv/2466-update-global-text-field-disabled-state branch 4 times, most recently from 78b692d to 0ffa510 Compare June 23, 2026 19:48

jlchilders11 self-requested a review June 25, 2026 15:52

jlchilders11 approved these changes Jun 25, 2026

View reviewed changes

julhoang requested changes Jun 29, 2026

View reviewed changes

javiercoronadonarvaez force-pushed the javiercoronarv/2466-update-global-text-field-disabled-state branch from 0ffa510 to b43c4b7 Compare June 30, 2026 15:47

javiercoronadonarvaez requested review from jlchilders11 and julhoang June 30, 2026 15:59

javiercoronadonarvaez added 2 commits June 30, 2026 10:15

feat: update global text field disabled state

cf8a24e

fix: address review feedback on text field disabled state

a08c0cb

javiercoronadonarvaez force-pushed the javiercoronarv/2466-update-global-text-field-disabled-state branch from 5deb33c to a08c0cb Compare June 30, 2026 16:15

herzog0 self-requested a review July 2, 2026 16:26

herzog0 approved these changes Jul 2, 2026

View reviewed changes

julhoang approved these changes Jul 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Story 2466: Update global Text Field component with disabled state#2495

Story 2466: Update global Text Field component with disabled state#2495
javiercoronadonarvaez wants to merge 2 commits into
developfrom
javiercoronarv/2466-update-global-text-field-disabled-state

javiercoronadonarvaez commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Poem

Uh oh!

jlchilders11 left a comment

Uh oh!

julhoang left a comment

Uh oh!

julhoang Jun 29, 2026

Uh oh!

javiercoronadonarvaez commented Jun 30, 2026

Uh oh!

herzog0 left a comment

Uh oh!

julhoang left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

javiercoronadonarvaez commented Jun 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: #2466

Summary & Context

Changes

‼️ Risks & Considerations ‼️

Screenshots

Self-review Checklist

Frontend

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Poem

Uh oh!

jlchilders11 left a comment

Choose a reason for hiding this comment

Uh oh!

julhoang left a comment

Choose a reason for hiding this comment

Uh oh!

julhoang Jun 29, 2026

Choose a reason for hiding this comment

Uh oh!

javiercoronadonarvaez commented Jun 30, 2026

Uh oh!

herzog0 left a comment

Choose a reason for hiding this comment

Uh oh!

julhoang left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

javiercoronadonarvaez commented Jun 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 22, 2026 •

edited

Loading