Skip to content

stabilize bit ui and envs react 19#10386

Open
GiladShoham wants to merge 11 commits into
masterfrom
stabilize-bit-ui-and-envs-react-19
Open

stabilize bit ui and envs react 19#10386
GiladShoham wants to merge 11 commits into
masterfrom
stabilize-bit-ui-and-envs-react-19

Conversation

@GiladShoham
Copy link
Copy Markdown
Member

  • ui fixes
  • hook order fix
  • fixes
  • clean up
  • clean up
  • chore: upgrade envs to react 19
  • rename cache to core-aspect-env-v0.1.5-v1
  • fix component compare ui runtime tabs getter missing return type

Proposed Changes

Copilot AI review requested due to automatic review settings May 20, 2026 08:14
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR focuses on stabilizing the Bit UI during the React 19/envs upgrade by fixing hook ordering issues, improving theming behavior for portaled UI, refining the compositions live-controls UX, and updating CI/cache and workspace mapping metadata.

Changes:

  • Fix React hook order in the workspace UI and improve several UI/theme styles (including portaled dropdown/menu theming).
  • Rework compositions live-controls tray behavior (collapse/expand + resize UX) and expose a toggle action in the compositions list.
  • Update Component Compare tabs getter typing, bump CircleCI cache key, and apply broad .bitmap env/config updates.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
scopes/workspace/workspace/ui/workspace/workspace.tsx Moves useLocation() to maintain stable hook order.
scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.module.scss Aligns card surfaces with theme variables; improves menu/dropdown styling.
scopes/ui-foundation/ui/ui/stable-theme-switcher.tsx Adds pre-flash theme detection and mirrors BaseTheme CSS vars onto :root for portaled UI.
scopes/ui-foundation/ui/ui/client-context.module.scss Ensures global font applies to content portaled to body.
scopes/ui-foundation/ui/rspack/html.ts Adds a synchronous pre-mount theme applicator to reduce FOUC.
scopes/preview/ui/preview-placeholder/preview-placeholder.module.scss Adjusts skeleton layout sizing behavior.
scopes/compositions/compositions/ui/compositions-panel/live-control-input.module.scss Fixes toggle sizing/stretch behavior to match component’s intrinsic dimensions.
scopes/compositions/compositions/ui/compositions-panel/compositions-panel.tsx Adds a live-controls toggle action to the active composition row.
scopes/compositions/compositions/ui/compositions-panel/compositions-panel.module.scss Adds icon-button styling and “active” visual state for the new action.
scopes/compositions/compositions/compositions.tsx Refactors live-controls tray into a component; adds collapse state and resize logic.
scopes/compositions/compositions/compositions.module.scss Updates tray layout/styles for resize strip + collapsible header and improved overflow behavior.
scopes/component/component-compare/component-compare.ui.runtime.tsx Adds explicit return type for tabs getter.
.circleci/config.yml Bumps cache key from core-aspect-env-v0.1.4-v1 to v0.1.5-v1.
.bitmap Large workspace mapping/config updates to reflect env/config changes.

Comment on lines 125 to 129
const onMove = (ev: MouseEvent) => {
const next = Math.max(120, Math.min(600, startHeight + (startY - ev.clientY)));
trayHeightRef.current = next;
if (trayRef.current) {
trayRef.current.style.maxHeight = `${next}px`;
}
const delta = startY - ev.clientY;
const next = Math.max(120, Math.min(maxHeight, startHeight + delta));
setTrayHeight(next);
};
Comment on lines +278 to +285
type LiveControlsTrayProps = {
trayRef: React.RefObject<HTMLDivElement | null>;
collapsed: boolean;
height: number | null;
ready: boolean;
defs: any[];
values: Record<string, any>;
onChange: (key: string, value: any) => void;
export type CompositionsPanelProps = {
compositions: Composition[];
onSelectComposition: (composition: Composition) => void;
onToggleLiveControls?: (composition: Composition) => void;
placement="bottom"
>
<button
type="button"
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.

4 participants