Add mobile drawer mode and UI component enhancements#110
Merged
Conversation
…aptive drawer - Toggle: add size="sm" / size="lg" variants matching Button/Input dimensions - Button: add variant="input" for picker triggers (input border, left-aligned, normal weight) - Popover: fix display override so utility classes (.flex, etc.) work on open dialogs by moving display:none to :not([open]) and removing display:inline-block from [open] - Popover: add mobile="drawer" prop for adaptive bottom-sheet on ≤640px viewports using beforetoggle interception to switch between show() and showModal() https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
✅ Deploy Preview for kinu-sh ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: +753 B (+2.47%) Total Size: 31.2 kB 📦 View Changed
ℹ️ View Unchanged
|
Instead of duplicating ~45 lines of drawer CSS in popover/style.css, extend drawer/style.css selectors with [k="popover-content"][mobile="drawer"]. Popover only adds 3 overrides: --modal, max-height, border-radius. Also fix TS error from Object.assign on beforetoggle event. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
- Regenerate docs to pick up mobile prop on PopoverContentProps - Add note about mobile="drawer" to popover metadata - Replace basic popover demo with two examples: a dimensions form popover and an adaptive color picker that becomes a drawer on mobile - Also regenerates toggle (size prop) and button docs https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
Incidental updates from running generate-docs script. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
PopoverClose was defined but not re-exported from src/index.ts. Add it to the public exports and use it in the popover demo. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
The popover-as-drawer selectors in drawer/style.css were applied unconditionally, making the popover always render as a drawer. Wrap them in @media (max-width: 640px) so they only activate on mobile. Also drop hardcoded widths from the demo popovers. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
…tem in demo Revert drawer/style.css to its original state — the adaptive popover styles don't belong there since they can't actually be shared (media query boundary). Full mobile drawer styles now live in popover/style.css. Replace manual k="dropdown-item" with inline styles in the demo with DropdownMenuItem which already has the right default styles. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
…ackdrop Match the backdrop pattern used by dialog, drawer, sheet, and sidebar. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
Stack width/height fields vertically with labels on the left using a two-column grid. Use Label and Input components instead of raw HTML, and switch to type="number" inputs. https://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf
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
2 participants
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.
Summary
This PR adds adaptive mobile UI patterns and enhances component styling and functionality. The main focus is introducing a mobile drawer mode for popovers on small screens, along with new size variants for toggle buttons and a new input variant for buttons.
Key Changes
Adaptive Popover Drawer: Added
mobile="drawer"prop to PopoverContent that transforms popovers into bottom-sheet drawers on mobile devices (≤640px) while maintaining popover behavior on larger screens. Includes smooth animations and backdrop blur effects.Command System Enhancement: Implemented
installAdaptiveCommands()function that interceptsbeforetoggleevents and automatically convertsshow()calls toshowModal()for elements with the--modalCSS variable set, enabling the drawer behavior.Toggle Button Sizes: Added
sizeprop support with'sm','md', and'lg'presets to the Toggle component with appropriate height, padding, and border-radius adjustments.Button Input Variant: Added new
'input'variant for buttons that mimics input field styling with border, background, and hover states.CSS Display Logic Refactor: Reorganized popover/dropdown/context-menu/combobox display rules to use
:not([open])selector for hiding instead of defaultdisplay: none, providing better control over visibility states.Implementation Details
position: fixedwithtransform: translateY(100%)for smooth slide-up animationbackdrop-filter: blur(1px)and semi-transparent overlay@supportsqueryallowTogglecounter to prevent recursion when convertingshow()toshowModal()allow-discretefor proper display property animation supporthttps://claude.ai/code/session_01Qo8Cg3pzfcfQK9kkCFNPLf