Feature/split button dropdown + themeing updates#45
Merged
Conversation
- Created MoltenPushButtonDropdown component with dropdown functionality - Refactored MoltenPushButton to display selected value from options - Both components can be used independently or together - Added 'grouped' prop to remove border radius where buttons connect - Main button shows selected item title with decorations - Dropdown button shows arrow and opens menu - Menu positioned at dropdown button end - Selection changes update button text reactively - Updated App.svelte example usage This allows separate tooltips for each button and cleaner component separation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- MoltenPushButton now measures and exports its width reactively - MoltenPushButtonDropdown measures its own width and receives button width - Dropdown menu min-width set to combined width of both buttons - Width updates reactively when selection changes - Ensures cohesive grouped button appearance with proper menu sizing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Added window resize listeners to both components for browser zoom compatibility - Width measurements now update reactively when zooming in/out - Added configurable placement prop to MoltenPushButtonDropdown - "end" (default): Menu aligns to right edge of arrow button - "start": Menu aligns to left edge with CSS transform offset - Fixed positioning misalignment issues at different zoom levels - Added test option with long text to demonstrate width calculations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Move z-index from button element to container level for cleaner stacking - Add "magic" placement option for dropdown with extended button padding - Remove invisible-wrapper approach, simplify positioning logic - Add tooltips to grouped button demo in App.svelte 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove placement prop, use bottom-start positioning by default - Apply overlapping button behavior automatically when grouped with menuWidth - Fix dropdown button height by matching font-size (100% instead of 0.75rem) - Add relative positioning context for grouped buttons and parent container - Simplify conditional logic based on grouped and menuWidth instead of placement 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove grouped prop from MoltenPushButtonDropdown - Infer grouping behavior automatically from menuWidth > 0 - Fix menu min-width to avoid counting menuWidth twice - When grouped: use menuWidth as min-width (can grow if content needs more) - When standalone: use button width as min-width - Simplifies component API by removing redundant prop 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Refactored MoltenPushButton to use proper CSS variables instead of hardcoded rgba() values. Added --accent, --accent-muted, and --accent-soft variables to theme.css following the same naming scheme as --foreground and --background variants. Also enabled popup functionality for the "Normal w/ popup" button demo. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replaced hardcoded rgba() values with CSS variables in MeltCheckbox, MeltRadio, and MoltenPushButtonDropdown to match the pattern established in MoltenPushButton. Also fixed MoltenPushButton accept disabled state to use var(--accent-soft) instead of color-mix with transparent. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Added a "To Be Deprecated" section at the top of App.svelte highlighting MoltenButton and ControlGroup components. Also updated ControlGroup to use var(--background-soft) instead of hardcoded rgba(0, 0, 0, 0.25). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Updated MeltSlider to use CSS variables instead of hardcoded rgba() and named colors. The track now uses background variants while the thumb and filled range use foreground variants. Also removed the focus highlight for a cleaner appearance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Added border to slider track matching Toggle component style and adjusted filled range color to use foreground-disabled for better contrast with the thumb. This creates a clearer visual hierarchy where the knob stands out more prominently. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Added --error CSS variable to theme.css and refactored MeltCombo to use CSS variables matching MoltenInput's styling pattern. Replaced all hardcoded rgba() values with proper variables for normal, error, and disabled states. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Updated the CSS variable preview section in App.svelte to display all available color variables including the newly added background variants (background-muted, background-soft), shadow, accent family (accent, accent-muted, accent-soft), and error. Variables are now organized in logical groups for easier reference. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Created MoltenPushButtonGroup component to provide proper container styling for grouped buttons with dropdowns. This simplifies the usage pattern by encapsulating the necessary flex layout and positioning styles. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
Visit the preview URL for this PR (updated for commit 5ba1aad): https://grid-uikit-web--pr45-feature-split-button-epkdqbw3.web.app (expires Sun, 14 Dec 2025 15:22:05 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: fa3702ba7646b18d80eab9773581f2606c0cda39 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Refactor CSS color system and add button group component
Replaced hardcoded
rgba()colors throughout the codebase with a centralized CSS variable system for bettermaintainability and theming support.
Changes:
--background-muted,--background-soft,--accent,--accent-muted,--accent-soft,--errorMeltCombo, ControlGroup
section
All components now use consistent CSS variables instead of ad-hoc transparency values, making the design system
more cohesive and easier to maintain.