Repository navigation
v0.23.0
Mobile and touch: hover that no longer sticks after a tap, a pressed state for every control,
44px targets on a touch screen, safe areas, the on-screen keyboard, holds and pinches, and
fixes for the Sheet's drag and the editor's caret keys. foldkit-mixins 0.13.0,
foldkit-mixins-ui 0.12.0, foldkit-primitives 0.12.0, foldkit-richtext-dom 0.6.0 and
foldkit-mixins-form 0.7.0 change; foldkit-mixins-data-grid 0.2.4 is fixes. Packages that
pin one of them republish with a patch to re-pin (foldkit-builder, foldkit-cms,
foldkit-cms-drizzle, foldkit-mixins-builder, foldkit-mixins-crud,
foldkit-mixins-richtext), and foldkit-plus is 0.5.0. Changes that can break code written
for 0.22: a Table without fluid is wrapped in its frame; the ImageCropper's zoom Mount is
ImageCropperZoom; the Menu's and the Toast's Models gain fields; and an editor edit that
changes nothing returns a RichText.answer Command, which a Scene test resolves.
Added
foldkit-richtext-dom/editor'sanswerEditor(hostId)and the attachment'sanswered():
the editor bundle answers every edit its editor asks for, once drawn or refused, with a
RichText.answerCommand. A Scene test that sends an edit which changes nothing now
resolves that Command, and an application that replaces the editor'sRichText.patch
with its own runs its patch before the editor's other Commands.foldkit-primitives/dom'sKeyboardInsetMount (andkeyboardInset,KEYBOARD_INSET): the
on-screen keyboard's height as--fk-keyboard-inseton its element, from the visual
viewport.foldkit-mixins-ui'sDialog.keyboardmixin runs it on a dialog's or sheet's
panel, and the Dialog and Sheet recipes keep the panel above the keys: iOS Safari, and
Chrome on Android, leave a fixed panel under them when a field in it takes focus.foldkit-mixins-form:FieldAttrstakesautocomplete,inputMode,enterKeyHint,
autocapitalizeandspellcheck, for text, multiline and number fields; anemail,telor
urltype turns capitalizing and spellchecking off by default.foldkit-mixins: asafetoken group,Theme.ref.safe.top/right/bottom/left:
what a notch, rounded corners or the home indicator take from each screen edge
(env(safe-area-inset-*), 0 unless the page's viewport meta saysviewport-fit=cover).
Changed
foldkit-mixins: a rule whose selector hovers is written for a pointer that can hover
(@media (hover: hover)), with a copy for one that cannot that keeps every other branch
(:is(:hover, :focus-within)still shows on focus there). A touch screen keeps:hoveron
what was tapped last, so a hover fill stayed behind after the finger left. Class names do
not change.foldkit-mixins:Defaults.resetdraws no tap highlight of the browser's own, sets
touch-action: manipulationon interactive elements (a second quick tap is not a zoom),
andtext-size-adjust: 100%in place ofnone, which also turned off the reader's own
text size.Defaults.linksandDefaults.controlshover only where the pointer can, and
show:active.
Fixed
foldkit-mixins: a control's words are no text to select:Defaults.resetsets
user-select: noneon buttons,summary, and the button, tab, option, menu item, switch,
checkbox and radio roles, so a long press on one no longer selects its label and offers to
copy it on a phone, nor a double tap a word of it. A tree's rows and a grid's cells keep
theirs.foldkit-mixins-ui: a Toast stack under a finger holds its countdown without spreading out
(a newtouchholder in its Model): a stack spread as a tap landed, or as a swipe began,
moved what the finger was on, and the focus Android gives a tapped action spread it too. Its
close and action buttons have a finger's target where the pointer is coarse.foldkit-mixins-ui: an ImageCropper zooms by two fingers, spread or pinched (Pinched): its
viewport took the page's own pinch away and gave none back. Its zoom Mount is now
ImageCropperZoom, for the wheel and the fingers both.foldkit-primitives:PointerDragdrags by touch. A finger's press is a drag once held
stillHOLD_TO_DRAG_MS(400ms), and one that movesHOLD_SLOP(8px) first is a scroll, so a
list of draggable rows still scrolls; once the drag is on, the page is kept still and
Android's own menu shut. Before, the browser took every finger's drag for a scroll and
cancelled it, so the Builder's palette, layers and canvas could not be dragged on a phone.foldkit-mixins-ui: a context menu opens on a touch screen. A finger or a pen held on
Menu.target's area forMenu.HOLD_MS(500ms) opens it under the finger, since iOS fires
nocontextmenu, while a finger that moves 10px is a scroll and opens nothing; Android's
owncontextmenufor the hold opens it once, under the finger, aspointTargetnow records a
finger's press. The Menu's Model gainsholdingandhold.foldkit-mixins-data-grid: the fill handle takes its drag on a touch screen (touch-action: none), where a finger panned the grid instead, and it and the column resize grip have a
finger's target there (44px and 24px) around what they draw.foldkit-mixins-ui: a Carousel's autoplay pauses while a finger is on it and goes on when
it lifts; a tap's emulatedmouseenterheld it paused until something else was tapped.foldkit-richtext-dom: a press on a block's handle is a drag only once it moves 5px
(DRAG_THRESHOLD): a tap's wander, or the page scrolling under a still finger, dropped the
block.foldkit-mixins-ui: a Combobox's and the Command's field ask a phone's keyboard not to
capitalize or correct what filters, and to show a search key (autocapitalize,
autocorrect,spellcheck,enterkeyhint).foldkit-mixins-ui: a Table always stands in itsframe, which scrolls sideways when the
table is wider than the screen (the default static header; a sticky one keeps sticking to
the application's scroller). Breaking for markup: a Table withoutfluidis now wrapped
in the frame'sdiv.foldkit-mixins-ui: scrolled to its end, a swipe on a Dialog or Sheet panel, a popup list,
the Command list or the Sidebar's nav no longer moves the page behind
(overscroll-behavior: contain); a popup list is at most 40% of the screen a phone's
keyboard leaves; menu, listbox and HoverCard panels are never wider than the screen.foldkit-mixins:user-selectis written with-webkit-user-selectbeside it, which iOS
Safari still reads alone, so a long press on a drag surface no longer selects its text there.
The recipes' drag surfaces (sliders' dials, the colour area, the cropper, the signature pad,
splitters, the toast's body, the Sheet's handle, the FloatingPanel's grips) also set
-webkit-touch-callout: none.foldkit-mixins-ui,foldkit-mixins-data-grid: the OTP input, the colour picker's fields
and the grid's cell editor are 16px or more on a touch screen, where iOS zoomed the page into
them.foldkit-mixins-ui: on a touch screen the recipes' controls are as large as a finger
needs, 44px:Defaults.resetsets--fk-touch-floorwhere the pointer is coarse, and a
control's height on the size ladder is at least that (buttons, icon buttons square, fields,
selects, tabs, segmented items, menu and list rows, accordion triggers, calendar days,
carousel, alert and chat actions). A desktop keeps the ladder's density, and a region that
must stay dense sets the floor to0px.foldkit-mixins-ui: Toast stacks and Dialog panels keep clear of the notch and the home
indicator: each edge a stack sits at is held off by the screen's inset there, and a panel's
margins and largest size leave every inset out.foldkit-mixins-ui: a tap shows. The recipes' hover is also their pressed state
(:is(:hover, :active)), as are the hover fills of menu, listbox and tree rows, nav and
sidebar items, accordion triggers, table sort buttons, steppers, tag removers and pressable
cards and items: with hover written only where a pointer can, a finger on one of them
shows it, and lifting takes it away.foldkit-mixins-ui: a Sheet grabbed while its Dialog was still opening (an animation
ending, aSucceededShowDialog) lost the drag, and its handle took no new press until the
pointer was let go. A drag now ends only when the Dialog opens or closes. (#186)foldkit-richtext-dom: a caret key pressed before an edit was drawn moved the caret
through the page as it was: three fast Enters and an ArrowUp went two lines up. Caret keys,
and edits typed behind them, wait until the edits before them are drawn. (#187)