This patch reworks the mobile breakpoint to allow whitespace wrapping of
code snippets and does away with horizontal scroll. Overall, the
usability and intuitiveness is much better, though readability of the
code itself takes a hit.
In addition, we added the ability to download an icon as a PNG thanks to
the svg2png-converter library. PNGs adopt the current preview weight and
color, and are sized at 256x256.
While phosphor-icons uses an icon font implementation, we won't be able
to provide the duotone weight in that library. We now indicate lack of
support by disabling the code snippet and copy button.
When the debounced search query changes, scroll to the top of the grid
if the query is not the empty string. This has the same smooth behavior
as the scroll buttons, which is not currently available on WebKit.
We were, for some reason, preventing the default behavior of touch
events onTouchStart and onTouchEnd. This made the slider unusable with
drag actions on mobile. I can't remember why we did this to begin with,
probably something important...
The slider thumb size was also increased for better tap target size.
We relocated window measurment logic into a hook, useGridSpans(), which
tells us the appropriate number of columns for the IconGrid. This is
useful for rendering an InfoPanel in the right place! In future we
should look into a custom implementation using ResizeObserver and
polyfills, and that may be extensible for other use-cases.
The input slider handle now animates in response to
mousedown/touchstart, and returns to its initial state on
mouseup/touchend. This does not break existing behaviour when navigating
via keyboard.
When search returns no results, the empty-list state now adopts the
current color theme and animates in. The IconGrid also takes up a
minimum of 80vh vertical space, whether the list is populated or empty.
We now generate snippets for the phosphor-vue in addition to HTML and
React libraries. The panel interface may be getting a bit too cluttered,
and we should consider a redesign in the future.
We now have a consolidated source of truth for whether the UI should us
dark mode to accomodate a light icon color. This is a recoil selector
that derives from iconColorAtom.
In addition, we renamed styleQueryAtom -> iconStyleAtom for consistency.
