Skip to content

v0.23.0

Choose a tag to compare

@github-actions github-actions released this 18 Oct 04:38
· 19 commits to main since this release

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's answerEditor(hostId) and the attachment's answered():
    the editor bundle answers every edit its editor asks for, once drawn or refused, with a
    RichText.answer Command. A Scene test that sends an edit which changes nothing now
    resolves that Command, and an application that replaces the editor's RichText.patch
    with its own runs its patch before the editor's other Commands.
  • foldkit-primitives/dom's KeyboardInset Mount (and keyboardInset, KEYBOARD_INSET): the
    on-screen keyboard's height as --fk-keyboard-inset on its element, from the visual
    viewport. foldkit-mixins-ui's Dialog.keyboard mixin 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: FieldAttrs takes autocomplete, inputMode, enterKeyHint,
    autocapitalize and spellcheck, for text, multiline and number fields; an email, tel or
    url type turns capitalizing and spellchecking off by default.
  • foldkit-mixins: a safe token 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 says viewport-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 :hover on
    what was tapped last, so a hover fill stayed behind after the finger left. Class names do
    not change.
  • foldkit-mixins: Defaults.reset draws no tap highlight of the browser's own, sets
    touch-action: manipulation on interactive elements (a second quick tap is not a zoom),
    and text-size-adjust: 100% in place of none, which also turned off the reader's own
    text size. Defaults.links and Defaults.controls hover only where the pointer can, and
    show :active.

Fixed

  • foldkit-mixins: a control's words are no text to select: Defaults.reset sets
    user-select: none on 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 new touch holder 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: PointerDrag drags by touch. A finger's press is a drag once held
    still HOLD_TO_DRAG_MS (400ms), and one that moves HOLD_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 for Menu.HOLD_MS (500ms) opens it under the finger, since iOS fires
    no contextmenu, while a finger that moves 10px is a scroll and opens nothing; Android's
    own contextmenu for the hold opens it once, under the finger, as pointTarget now records a
    finger's press. The Menu's Model gains holding and hold.
  • 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 emulated mouseenter held 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 its frame, 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 without fluid is now wrapped
    in the frame's div.
  • 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-select is written with -webkit-user-select beside 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.reset sets --fk-touch-floor where 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 to 0px.
  • 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, a SucceededShowDialog) 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)