Releases: FgrReloaded/docentjs
Releases · FgrReloaded/docentjs
Release list
v0.18.0
@docentjs/core, @docentjs/devtools, @docentjs/dom
Minor Changes
- fb26a99: A compact card for phones:
options.mobile.card: 'compact'. Instead of a card as wide as the screen, the popover becomes a coachmark that sits right beside its target and points at it, as on a large screen, so most of the page stays in view. It is sized by its content, up to about 70% of the screen. The counter becomes a row of dots with the current step as a pill, Back is a round chevron (its label stays for screen readers), Next is a small pill, and Skip steps aside for the close button, which does the same. The card springs open from its caret and lands with a small spring on each step. Buttons are drawn small but keep a ~44px area to tap. It never docks unlesslayoutis'dock': when no side of the target has room, it overlaps the target's edge from above or below, without a caret. Connector arrows show on it, so themes keep their character on phones. Themes can set it too, and the devtools Edit tab lists it under Phone card.
Packages, all at 0.18.0:
v0.17.0
@docentjs/cli
Patch Changes
- @docentjs/core@0.17.0
@docentjs/core
No changes in this release.
@docentjs/devtools
Minor Changes
- 842ec1b: Pocket: the phone button in the panel's header shows your page at phone size, in a frame beside the panel, with the selected tour running in it. Pick 360, 390, 430 or 480 px, or turn it sideways; the page inside lays out at that width, so its own phone styles apply. The phone is always drawn at its true size, never scaled (which looked soft): in a short window it is shorter instead, and a phone wider than the room scrolls. Edits in the panel show up in the phone as you make them, choosing a step takes the phone there, Preview step starts in it, and the panel's top bar follows the phone. The page inside runs its devtools as a quiet guest, with no second panel. A tour already running on the page is left alone (stopping it would record it as skipped). The phone's rounded screen corners are painted over the frame rather than clipping it, since rounded clipping makes Chrome blur a
bluroverlay's spotlight inside the frame.
@docentjs/dom
Patch Changes
- 842ec1b: On a small screen, a target taller than the room above a docked card no longer ends up under the app's sticky header. Its top now comes to just below the header, including a header that only pins once the page scrolls, and the spotlight is cropped to below it. Before, part of the target sat under the header, and a frosted (backdrop-blurred) header showed it blurred inside the spotlight.
- @docentjs/core@0.17.0
Packages, all at 0.17.0:
v0.16.0
@docentjs/cli, @docentjs/dom
Patch Changes
- @docentjs/core@0.16.0
@docentjs/core
No changes in this release.
@docentjs/devtools
Minor Changes
- 9dd6926: The Edit tab's Look section sets how a tour looks on phones: Phone layout (auto, beside the target, docked) and Phone card (stories or classic). Back at both defaults, the
mobileblock is removed from the tour, so the JSON stays as written.
Patch Changes
- @docentjs/core@0.16.0
- @docentjs/dom@0.16.0
@docentjs/react, @docentjs/svelte, @docentjs/vue
Patch Changes
- @docentjs/core@0.16.0
- @docentjs/dom@0.16.0
Packages, all at 0.16.0:
v0.15.0
@docentjs/core, @docentjs/dom
Minor Changes
- 1d09da8: Themes and templates can say how tours look on phones: a
mobileblock (layoutandcard) in a theme file or template applies to every tour using it, so a theme can, for example, keep its classic card or always dock on small screens. Settings merge field by field, renderer options first, then the theme, then the tour. The theme file schema checks the new field, sovalidateThemeanddocent theme addcatch a misspelled value.
Packages, all at 0.15.0:
v0.14.0
@docentjs/core, @docentjs/dom
Minor Changes
- 0dd9cbe: A card laid out for phones. Below
sheetBreakpointthe step counter becomes one segment per step across the top of the card, the current one filling as the step opens; the main button (Next or Done) is full width and 48px tall; Back and Skip sit beneath it as quiet text. A step with no target, such as a welcome or a finish, is centred on the screen instead of docked, with a larger title and its image at the top. New optionoptions.mobile.card:'stories'(the default) or'classic'for the large-screen card. The count stays available to screen readers, and themes' own progress styles keep applying on large screens.
Packages, all at 0.14.0:
v0.13.0
@docentjs/cli
Patch Changes
- @docentjs/core@0.13.0
@docentjs/core
No changes in this release.
@docentjs/devtools
Patch Changes
- ece3af2: Motion. The scrim fades in with the first step and the whole tour fades out when it ends, instead of vanishing; a docked card on a phone slides up from the edge it sits on and back out. Between steps the card grows or shrinks to the new step's height instead of jumping, and on small screens the content slides in the direction of travel (Next from the end, Back from the start). The content cross-fade between steps now actually shows: it was running on the slots, which draw nothing. Everything respects
prefers-reduced-motion. A tour that is leaving keeps its host for the exit, markeddata-leaving; lookups of the live tour (beacons, devtools) skip it.
@docentjs/dom
Minor Changes
- ece3af2: Motion. The scrim fades in with the first step and the whole tour fades out when it ends, instead of vanishing; a docked card on a phone slides up from the edge it sits on and back out. Between steps the card grows or shrinks to the new step's height instead of jumping, and on small screens the content slides in the direction of travel (Next from the end, Back from the start). The content cross-fade between steps now actually shows: it was running on the slots, which draw nothing. Everything respects
prefers-reduced-motion. A tour that is leaving keeps its host for the exit, markeddata-leaving; lookups of the live tour (beacons, devtools) skip it.
Patch Changes
- @docentjs/core@0.13.0
Packages, all at 0.13.0:
v0.12.0
@docentjs/core
Minor Changes
- 2275cdd: On small screens the card now sits beside its target when it fits: as wide as the screen, directly above or below the element, pointing at it with the caret or the tour's connector arrow. It docks near the bottom only when it fits on neither side, and a docked card now points at its target too (caret lined up with it, or the connector drawn to it). A target pinned to the bottom of the screen, such as a tab bar, or at the very end of the page gets the card docked at the top instead. The choice is made once per step, so the card does not jump while the page scrolls. New tour option
options.mobile.layout('auto','float'or'dock') and renderer optionmobilechoose the behaviour. A target shown after its step starts is now scrolled into view.
@docentjs/dom
Minor Changes
- 2275cdd: On small screens the card now sits beside its target when it fits: as wide as the screen, directly above or below the element, pointing at it with the caret or the tour's connector arrow. It docks near the bottom only when it fits on neither side, and a docked card now points at its target too (caret lined up with it, or the connector drawn to it). A target pinned to the bottom of the screen, such as a tab bar, or at the very end of the page gets the card docked at the top instead. The choice is made once per step, so the card does not jump while the page scrolls. New tour option
options.mobile.layout('auto','float'or'dock') and renderer optionmobilechoose the behaviour. A target shown after its step starts is now scrolled into view.
Patch Changes
- 2275cdd: The step counter no longer runs under the buttons when the footer is short of room (phones, long button labels, Skip + Back + Next). It moves to a row of its own above the buttons instead, and the buttons stay aligned to the end.
- 2275cdd: Small-screen fixes. A step whose target is hidden (
display: none, e.g. a desktop sidebar on a phone) shows a centred card instead of a stray spotlight in the corner, and spotlights the target once it is shown. When several elements match a target, the one on screen wins, so onedata-docentname can mark a desktop and a mobile variant. The popover keeps clear of the notch and home indicator on pages withviewport-fit=cover. On touch screens the dialog takes focus instead of Next, so no keyboard focus ring appears unasked. A target taller than the screen has its spotlight framed to the visible part, and the docked card no longer scrolls its top out of view.
Packages, all at 0.12.0:
v0.11.0
@docentjs/core, @docentjs/devtools, @docentjs/dom
Minor Changes
- 54dd1d7: Add beacons:
trigger: { type: 'beacon' }puts a small mark on the first step's target that opens the tour on click, or on hover and keyboard focus withopen: 'hover'.options.beaconsets the style (pulse,dot,ring,badge, ornonefor a plain tooltip), position, offset, size and badge text, and thebeacontheme token its colour. A beacon's tip keeps the page usable, closes on an outside click (the newcloseOnOutsideClickoption) and, with one step, drops the counter and says "Got it". New eventsbeacon:shownandbeacon:opened, afocusrenderer option, and devtools support in the Tours, Edit and Audit tabs. The beacon code loads only on pages that have a beacon tour.
Packages, all at 0.11.0:
v0.10.3
@docentjs/cli, @docentjs/dom
Patch Changes
- @docentjs/core@0.10.3
@docentjs/core
No changes in this release.
@docentjs/devtools
Patch Changes
- 8eba522: Devtools: the panel's first-run tour no longer opens on top of a tour your app starts while the panel is opening. It waits until that tour ends.
- @docentjs/core@0.10.3
- @docentjs/dom@0.10.3
@docentjs/react, @docentjs/svelte, @docentjs/vue
Patch Changes
- @docentjs/core@0.10.3
- @docentjs/dom@0.10.3
Packages, all at 0.10.3:
v0.10.2
@docentjs/cli
Patch Changes
- @docentjs/core@0.10.2
@docentjs/core
No changes in this release.
@docentjs/devtools
Patch Changes
-
0eee360: Devtools: a short guided tour of the panel, built with Docent, runs the first time the panel opens. It covers the Tours and Edit tabs, drafts, and what each step and tour setting means (target, element picker, placement, advance, interaction, route, tour settings, look and theme). The new "?" button in the header replays it, and
mount(docent, { onboarding: false })turns off the first-run start. The tour runs on its own controller, so it never appears in your tours, events, audit or perf. The panel also moves from violet to a darker slate palette with a blue accent.A popover now follows its target when the target scrolls inside a shadow root, such as a scrolling area in a web component. Before, it stayed where it was.
@docentjs/dom
Patch Changes
-
0eee360: Devtools: a short guided tour of the panel, built with Docent, runs the first time the panel opens. It covers the Tours and Edit tabs, drafts, and what each step and tour setting means (target, element picker, placement, advance, interaction, route, tour settings, look and theme). The new "?" button in the header replays it, and
mount(docent, { onboarding: false })turns off the first-run start. The tour runs on its own controller, so it never appears in your tours, events, audit or perf. The panel also moves from violet to a darker slate palette with a blue accent.A popover now follows its target when the target scrolls inside a shadow root, such as a scrolling area in a web component. Before, it stayed where it was.
-
@docentjs/core@0.10.2
Packages, all at 0.10.2: