Important
This is a experimental library
Caution
Experiment has ended as of 2024-08-11 - see conclusion below. You can also checkout the last build of the storybook here.
This library is experimental library to test the concept of using margin collapsing as a way to create safety area that meets AA or AAA level touch target guideline.
Other things being tested:
- React 19 (rc)
- CSS anchor in React 19 (rc)
- Popover API in React 19 (rc)
- DatePicker using Temporal (temporal-polyfill)
This was a tricky one. Concept itself would work but it was not able to fully automate. For example, if the Button sits on the far left of the Page, it will need to ignore the margin-inline-start to align prefectly with top and bottom contents.
Also, when used with flexbox and gaps, it did not collapse those.
Not much of the feature of react19 was used in this library. Mainly benefited from being able to use CSS anchor and Popover API, and also NOT having to deal with forwardRef!!!
Temporal-polyfill is a work in progress polyfill that isn't fully up-to-date with the temporal proposal. But it really did make the build of the DatePicker so much easier. One of the mian benefit was being able to use PlainDate without time which reduced so much of the complexity DatePicker does not need to handle.