Open
Conversation
Replace native date input with a full inline calendar featuring: - Semantic HTML with proper aria attributes (aria-current, aria-selected, aria-disabled) - DOM-based month state using hidden input + command system (--prev/--next) - CSS-driven styling with no class name concatenation - Proper calendar grid with week headers and 6-week layout - Visual distinction for today, selected date, and out-of-month dates - Full keyboard navigation support with focus-visible states The component follows PUI design patterns: minimal JS, maximum CSS, leveraging native HTML attributes for state management instead of JavaScript state hooks.
✅ Deploy Preview for pui-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: +857 B (+7.59%) 🔍 Total Size: 12.1 kB
|
- Add missing installCommands() call to fix --prev/--next buttons - Use state for displayed month so re-renders happen on nav - Replace onChange callback with hidden date input (data-date attribute) - Dispatch change events instead of requiring manual onChange handling - Inline calendar grid calculation for ~35% smaller component - Remove verbose helper functions and simplify logic - Reduce JS bundle by fixing unused code paths Month navigation now works. Date selection via hidden input is more DOM-native and requires no parent callback setup. Calendar can be used standalone.
Remove aria-disabled attributes and checks across all 42 day buttons. Out-of-month dates are now clickable and fully functional, just styled without special distinction. This trades visual separation for bundle size savings (~20 bytes gzipped). - Remove aria-disabled checking logic from grid map - Remove pointer-events: none from out-of-month styling - Out-of-month dates remain clickable and valid selections - Gzipped size: 5.73 KB (down from 5.75 KB)
…butes
Two successful optimizations for 110 bytes gzipped reduction (5.73→5.62KB):
1. Drop command/commandFor system:
- Remove installCommands() import and call
- Replace with direct onClick handlers on nav buttons
- Inline nav() function to update month state directly
- Eliminates event listener setup and command attributes
2. Remove internal p attributes:
- Only keep p="calendar" and p="calendar-day"
- Target internal elements with CSS selectors:
[p="calendar"] > div:nth-of-type(N)
[p="calendar"] > button, etc.
- HTML output smaller, CSS selectors are well-compressed
Gzipped size: 5.62 KB (down from 5.73 KB originally, 5.75 KB with command system)
Two successful optimizations for 30 bytes gzipped reduction (5.62→5.59KB): 1. Remove hidden month input entirely: - Month state is already managed via useState - No need to persist to DOM with data-month input - Saves: HTML bytes, onChange handler setup, querySelector calls - Removes: 1 input element, 1 onChange callback 2. Remove onChange handler from data-date input: - We manually call setDate() on day selection - The onChange on data-date is never triggered/used - Dead code that adds unnecessary bytes - Just keep it as a read-only value holder Code remains clean with array-based grid tuples [day, monthOffset] and straightforward month navigation logic. Gzipped size: 5.59 KB (down from 5.62 KB, originally 5.73 KB before all optimizations)
Two successful optimizations for 2 bytes gzipped reduction (5.59→5.57KB): 1. Use single-letter weekday names (S M T W T F S): - More compact than full names (Sun, Mon, etc.) - Still readable for a calendar header - Saves 6 bytes in source, ~1 byte in gzip 2. Simplify defaultValue parameter: - Use default parameter syntax: defaultValue = new Date() - Eliminates conditional check in useState initialization - Removes the ternary operator overhead - Saves ~1 byte in gzip Total optimization trajectory: - Original: 5.73 KB - Round 1: 5.62 KB (-110 bytes: command system, p attributes) - Round 2: 5.59 KB (-30 bytes: remove inputs, unused onChange) - Round 3: 5.57 KB (-2 bytes: weekdays, default value) - Total: 160 bytes saved (2.8% reduction)
✅ Deploy Preview for pui-demo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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
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.
This pull request introduces a complete redesign and implementation of the
Calendarcomponent, transforming it from a simple input into a fully interactive calendar UI with improved accessibility, styling, and functionality. The changes include a new React/Preact-based calendar grid, navigation for months, day selection, and a corresponding update to the documentation example.Component Implementation and API:
Calendarcomponent that displays a monthly grid, supports selecting dates, and allows navigation between months. The component now acceptsvalueandonChangeprops for controlled usage. (src/components/calendar/index.tsx, src/components/calendar/index.tsxL2-R172)UI and Accessibility Enhancements:
src/components/calendar/index.tsx, src/components/calendar/index.tsxL2-R172)Styling Overhaul:
src/components/calendar/style.css, src/components/calendar/style.cssL4-R124)Documentation Update:
docs/examples/calendar.tsxto demonstrate the new controlled calendar usage and show the selected date, making the documentation more practical and user-friendly. (docs/examples/calendar.tsx, docs/examples/calendar.tsxR2-R26)