Skip to content

fix(design-lab): correct component previews, prevent overlap and preserve menu focus rings - #2681

Merged
kev1n77 merged 3 commits into
GCWing:1.0.0-explorefrom
kev1n77:fmy/ui-sys
Aug 30, 2026
Merged

fix(design-lab): correct component previews, prevent overlap and preserve menu focus rings#2681
kev1n77 merged 3 commits into
GCWing:1.0.0-explorefrom
kev1n77:fmy/ui-sys

Conversation

@kev1n77

@kev1n77 kev1n77 commented Aug 30, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Replace incorrect Switch fallbacks with actual previews for Textarea and six other components, including states and code examples.
  • Stack Menu, NavigationPanel, and FieldGroup states independently to prevent overlapping content.
  • Adjust preview column widths, scrolling boundaries, Combobox spacing, and state labels.
  • Reserve space inside Menu scroll content to prevent focus rings from being clipped.
  • Add rendering and CSS contract regression tests.

Fixes: N/A

Type and Areas

Type: Bug fix / UI/UX / Test

Areas: Design Lab, shared React component library (@bitfun/ui), localization

Motivation / Impact

Some Design Lab details displayed the wrong component, wide specimens overlapped, and menu focus rings were partially clipped. These issues made component inspection and manual validation unreliable.

This change improves preview accuracy and readability. The shared Menu fix also preserves focus-ring visibility during real keyboard navigation.

Verification

The following commands passed during implementation; they were not rerun while preparing this PR description:

  • pnpm run design-system:check
    • Design system and Design Lab production builds passed.
    • All 51 Design Lab tests and 159 UI component tests passed.
    • Token, theme, and package contract checks passed.
  • pnpm run theme:color-audit:all
  • git diff --check

New rendering tests cover actual Textarea specimens, the other incorrect Switch fallbacks, independent FieldGroup state containers, and explicit handling of unsupported previews.

Final visual validation remains manual. Verification was local only; remote scenarios were not exercised.

Reviewer Notes

  • Does not introduce a new property inspector or modify FlowChat or main conversation composer business logic.
  • The Menu fix preserves existing scrolling and clipping behavior, using the existing focus token to reserve space.
  • No public API, persisted data, or protocol changes; no migration required.
  • Suggested manual checks: FieldGroup at narrow widths, all Textarea states, and keyboard focus on the first and last menu items.
  • The production build still reports a chunk-size warning above 500 kB; the build passes.

Checklist

  • This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
  • Relevant verification is recorded above, or skipped checks are explained.
  • User-facing strings, docs, and locales are updated where applicable.

@kev1n77
kev1n77 merged commit 4db6369 into GCWing:1.0.0-explore Aug 30, 2026
7 of 8 checks passed
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.

1 participant