OpenNoodl/dev-docs/tasks/phase-9-styles-overhaul/CLEANUP-SUBTASKS/TASK-000G-component-dialogs-panels/CHANGELOG.md

TASK-000G: Component Visual Updates - Dialogs & Panels - CHANGELOG

Date: December 31, 2025
Status: ✅ COMPLETE
Effort: ~1.5 hours
Risk Level: Medium

---

Overview

Applied comprehensive visual refinements to dialog, modal, panel, and tooltip components using the design token system established in TASK-000E. These high-visibility container components now have a modern, elevated feel with consistent borders, shadows, rounded corners, and proper spacing throughout.

---

Changes Made

1. BaseDialog Visual Polish

File: packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss

Updates:

• ✅ Replaced hardcoded border-radius: 2px with var(--radius-lg) (8px)
• ✅ Added modern elevated shadow: var(--shadow-popup)
• ✅ Added subtle border: 1px solid var(--theme-color-border-subtle)
• ✅ Added size constraints: max-height: 90vh; max-width: 90vw
• ✅ Added custom scrollbar styling (webkit) with themed colors
• ✅ Included optional backdrop blur (commented out with performance note)
• ✅ Updated ::after pseudo-element to use var(--radius-lg)

Impact:

• Dialogs now feel more elevated and modern
• Better definition against backdrop
• Improved scrolling experience with custom scrollbars
• Consistent rounded corners throughout

---

2. Modal Component Polish

File: packages/noodl-core-ui/src/components/layout/Modal/Modal.module.scss

Updates:

• ✅ Added border-radius: var(--radius-lg) (8px rounded corners)
• ✅ Added border: 1px solid var(--theme-color-border-subtle)
• ✅ Upgraded shadow to var(--shadow-popup)
• ✅ Replaced ALL hardcoded padding with spacing tokens:
  • Header: var(--spacing-5) var(--spacing-10) var(--spacing-4) (20px 40px 16px)
  • Footer: var(--spacing-5) var(--spacing-10) var(--spacing-4)
  • TitleWrapper: var(--spacing-5) top, var(--spacing-10) right
  • Content: var(--spacing-10) sides/bottom, var(--spacing-4) top
  • CloseButton: var(--spacing-2) positioning
• ✅ Changed divider colors to var(--theme-color-border-subtle)
• ✅ Added custom scrollbar styling to content area

Impact:

• Modal structure is now clearly defined with borders
• Consistent spacing throughout using design tokens
• Better scrolling experience
• More professional appearance

---

3. Section Component Polish

File: packages/noodl-core-ui/src/components/sidebar/Section/Section.module.scss

Updates:

• ✅ Replaced hardcoded padding with spacing tokens:
  • Header: var(--spacing-2-5) right, var(--spacing-4) left (was 10px/16px)
  • Body: var(--spacing-2) top (was 8px)
  • has-bottom-spacing: var(--spacing-3) (was 12px)
  • has-gutter: var(--spacing-section-padding) (was 15px)
• ✅ Added hover state for collapsible sections: background-color: var(--theme-color-bg-hover)
• ✅ Added custom scrollbar styling to body

Impact:

• Sections feel more interactive with hover states
• Consistent spacing using semantic tokens
• Better scrolling experience
• Collapsible sections provide better visual feedback

---

4. BasePanel Component Polish

File: packages/noodl-core-ui/src/components/sidebar/BasePanel/BasePanel.module.scss

Updates:

• ✅ Added background: var(--theme-color-bg-2)
• ✅ Added border: 1px solid var(--theme-color-border-subtle)
• ✅ Added border-radius: var(--radius-md) (6px)
• ✅ Added consistent padding: var(--spacing-panel-padding)
• ✅ Added gap between children: var(--spacing-panel-gap)
• ✅ Updated Footer shadow to use var(--spacing-1) for positioning
• ✅ Changed Footer shadow to use var(--shadow-sm)
• ✅ Added custom scrollbar styling to ChildrenContainer

Impact:

• Panels now have clear visual structure
• Subtle borders provide definition
• Modern rounded corners
• Consistent spacing throughout

---

5. Tooltip Component Polish

File: packages/noodl-core-ui/src/components/popups/Tooltip/Tooltip.module.scss

Updates:

• ✅ Added explicit typography tokens:
  • Font size: var(--font-size-sm) (14px)
  • Line height: var(--line-height-normal)
• ✅ Added background and color:
  • Background: var(--theme-color-bg-4)
  • Color: var(--theme-color-fg-default)
• ✅ Replaced hardcoded padding with var(--spacing-3-5) (14px)
• ✅ Added border-radius: var(--radius-default) (4px)
• ✅ Added elevated appearance: var(--shadow-md) + border
• ✅ Added explicit z-index: var(--z-tooltip)
• ✅ Increased max-width from 160px to 250px for better readability
• ✅ Updated FineType to use spacing tokens and font size token
• ✅ FineType now uses var(--theme-color-fg-default-shy) for secondary text

Impact:

• Tooltips are now more readable with better contrast
• Elevated appearance with proper shadows
• Consistent with other elevated components
• Better spacing and typography

---

Component Search Results

SidebarItem Component

Status: ❌ NOT FOUND
The OVERVIEW mentioned updating SidebarItem component, but a search of the codebase found no such component. This component may not exist yet or may be planned for future implementation.

---

Design Token Usage

All components now consistently use:

Spacing Tokens

• --spacing-1 through --spacing-10
• --spacing-panel-padding (semantic)
• --spacing-panel-gap (semantic)
• --spacing-section-padding (semantic)

Border Radius

• --radius-default (4px) - tooltips, smaller elements
• --radius-md (6px) - panels
• --radius-lg (8px) - modals, dialogs
• --radius-full - scrollbar thumbs

Shadows

• --shadow-sm - subtle panel footer
• --shadow-md - tooltips
• --shadow-popup - modals, dialogs

Colors

• --theme-color-bg-2, --theme-color-bg-3, --theme-color-bg-4 - backgrounds
• --theme-color-bg-hover - interactive hover states
• --theme-color-fg-default - primary text
• --theme-color-fg-default-shy - secondary text
• --theme-color-fg-muted - muted elements (scrollbar hover)
• --theme-color-border-subtle - subtle borders
• --theme-color-border-default - standard borders

Typography

• --font-size-xs, --font-size-sm - small text
• --line-height-normal - standard line height

Z-Index

• --z-tooltip - tooltip stacking

---

Visual Improvements Summary

Before

• Hardcoded pixel values throughout
• Inconsistent border radii (2px in some places, none in others)
• Basic shadows or no shadows
• No custom scrollbar styling
• Minimal visual definition between components

After

• Consistent design token usage
• Modern 4-8px rounded corners
• Elevated shadows for depth
• Custom-styled scrollbars with hover states
• Clear borders for visual definition
• Better spacing rhythm
• Improved hover states for interactivity

---

Testing Recommendations

In Storybook

npm run storybook

Navigate to and test:

• Layout / BaseDialog - Check backdrop, shadow, borders, scrolling
• Layout / Modal - Verify header/footer spacing, content scrolling
• Sidebar / BasePanel - Check panel structure and borders
• Sidebar / Section - Test collapsible sections with hover states
• Popups / Tooltip - Verify readability and positioning

In Editor

Test these components in real usage:

• Open any modal dialog (e.g., create new component)
• Inspect sidebar panels (property editor, components panel)
• Hover over icons/buttons to see tooltips
• Check sections in sidebar (expand/collapse functionality)
• Verify scrolling behavior in long dialogs/panels

---

Breaking Changes

None - All changes are purely visual refinements. No props changed, no functionality altered, all variants preserved.

---

Performance Notes

1. Backdrop Blur: Included as commented code in BaseDialog due to performance implications on older hardware. Can be enabled by uncommenting if performance is acceptable.

2. Custom Scrollbars: Only apply to webkit browsers (Chrome, Safari, Edge). Other browsers will use system scrollbars.

3. Shadow Tokens: Use optimized shadow definitions that are GPU-accelerated.

---

Dependencies

This task builds on:

• ✅ TASK-000A: Color token consolidation
• ✅ TASK-000D: Core UI hardcoded colors cleanup
• ✅ TASK-000E: Typography & spacing token system

---

Files Modified

1. packages/noodl-core-ui/src/components/layout/BaseDialog/BaseDialog.module.scss
2. packages/noodl-core-ui/src/components/layout/Modal/Modal.module.scss
3. packages/noodl-core-ui/src/components/sidebar/Section/Section.module.scss
4. packages/noodl-core-ui/src/components/sidebar/BasePanel/BasePanel.module.scss
5. packages/noodl-core-ui/src/components/popups/Tooltip/Tooltip.module.scss

Total: 5 files modified

---

Success Criteria

• Dialogs feel elevated and professional
• Modals have clear visual structure
• Panels have proper borders and definition
• Sections organize content clearly with hover feedback
• Tooltips are readable and well-positioned
• Consistent use of design tokens throughout
• No visual regressions from previous functionality
• All variants preserved
• Custom scrollbars enhance UX

---

Next Steps

TASK-000G is COMPLETE! 🎉

This marks the completion of the entire TASK-000 Styles Overhaul Series:

• ✅ TASK-000A: Token Consolidation
• ✅ TASK-000B: Legacy Hardcoded Colors
• ✅ TASK-000C: Nodegraph Colors
• ✅ TASK-000D: Core UI Colors
• ✅ TASK-000E: Typography & Spacing Tokens
• ✅ TASK-000F: Buttons & Inputs Visual Polish
• ✅ TASK-000G: Dialogs & Panels Visual Polish

The OpenNoodl editor now has a comprehensive, token-based design system with modern visual polish across all major UI components. 🚀

---

Validation Commands

# View changes in Storybook
npm run storybook

# Run editor to test in context
npm run dev

# Type check
npx tsc --noEmit

# Check for hardcoded values (should find very few now)
grep -r "padding: [0-9]" packages/noodl-core-ui/src/components/layout/
grep -r "padding: [0-9]" packages/noodl-core-ui/src/components/sidebar/
grep -r "padding: [0-9]" packages/noodl-core-ui/src/components/popups/Tooltip/

---

Task Completed: December 31, 2025
Component Quality: Production-ready ✨