Skip to content

[WIP] Unify editor suggest widget and suggest details styling#325366

Draft
hawkticehurst wants to merge 1 commit into
mainfrom
agents/unify-suggest-widget-styling
Draft

[WIP] Unify editor suggest widget and suggest details styling#325366
hawkticehurst wants to merge 1 commit into
mainfrom
agents/unify-suggest-widget-styling

Conversation

@hawkticehurst

Copy link
Copy Markdown
Member

Summary

  • use the themed widget shadow for standalone suggestions
  • remove overlapping seam shadows when details are docked
  • round only exposed corners for each details placement
  • add component-fixture coverage

Validation

  • npm run typecheck-client
  • gulp compile-client
  • targeted suggest tests
  • stylelint and hygiene
  • npm run valid-layers-check
  • second independent Copilot review found no significant issues

Manual verification

Open JavaScript suggestions for window. with details visible. Check standalone and east/west/north/south placements in Light+, Dark+, HC Light/Black, and Modern UI on/off, including a customized widget.shadow.

Fixes #324994

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings July 10, 2026 21:28
@hawkticehurst hawkticehurst changed the title suggest: Unify widget and details styling Unify editor suggest widget and suggest details styling Jul 10, 2026
@github-actions

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: be1e3368 Current: b8e21e6d

Changed (4)

editor/suggestWidget/MethodCompletions/Dark
Before After
before after
editor/suggestWidget/MethodCompletions/Light
Before After
before after
editor/suggestWidget/MixedKinds/Dark
Before After
before after
editor/suggestWidget/MixedKinds/Light
Before After
before after

1 insignificant change(s) omitted (≤20 px, Δ≤2). See CI logs for details.

Added (2)

editor/suggestWidget/MethodCompletionsWithDetails/Dark

current

editor/suggestWidget/MethodCompletionsWithDetails/Light

current

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Unifies suggestion widget and details styling across placements and themes.

Changes:

  • Applies themed shadows and placement-aware corner radii.
  • Tracks details placement through shared CSS classes.
  • Adds screenshot fixture coverage for visible details.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
suggestWidgetDetails.ts Tracks details placement and alignment.
suggestWidget.ts Connects the suggest widget DOM to the details overlay.
suggest.css Adds themed shadows and docked corner styling.
roundedCorners.css Adds corresponding Modern UI overrides.
suggestWidget.fixture.ts Adds a visible-details screenshot fixture.

maxSize = placement.maxSizeTop;
}
}
this._setPlacement(placement.className, alignAtTop ? 'details-align-top' : 'details-align-bottom');
}),
}),

MethodCompletionsWithDetails: defineComponentFixture({
@hawkticehurst hawkticehurst changed the title Unify editor suggest widget and suggest details styling [WIP] Unify editor suggest widget and suggest details styling Jul 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Corner radius of editor.widget.suggestWidget and suggest.details are different

2 participants