@astryxdesign/lab 0.3.0-canary.9753e39 → 0.3.0-canary.a522206
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@astryxdesign/lab",
|
|
3
|
-
"version": "0.3.0-canary.
|
|
3
|
+
"version": "0.3.0-canary.a522206",
|
|
4
4
|
"description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
|
|
5
5
|
"author": "Meta Open Source",
|
|
6
6
|
"license": "MIT",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@stylexjs/stylex": ">=0.10.0",
|
|
48
|
-
"@astryxdesign/core": "0.3.0-canary.
|
|
48
|
+
"@astryxdesign/core": "0.3.0-canary.a522206",
|
|
49
49
|
"react": ">=19.0.0",
|
|
50
50
|
"react-dom": ">=19.0.0",
|
|
51
51
|
"lexical": "^0.46.0",
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"d3-shape": "^3.2.0"
|
|
67
67
|
},
|
|
68
68
|
"devDependencies": {
|
|
69
|
-
"@astryxdesign/cli": "0.3.0-canary.
|
|
69
|
+
"@astryxdesign/cli": "0.3.0-canary.a522206",
|
|
70
70
|
"@lexical/code": "^0.46.0",
|
|
71
71
|
"@lexical/headless": "^0.46.0",
|
|
72
72
|
"@lexical/html": "^0.46.0",
|
|
@@ -52,7 +52,7 @@ export const docs = {
|
|
|
52
52
|
},
|
|
53
53
|
],
|
|
54
54
|
usage: {
|
|
55
|
-
description: 'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. Drag the grab handle to resize: a slow drag settles to the nearest snap point (a short peek, ~half, and ~full detent, filtered to those shorter than the sheet), a fast flick down dismisses, a fast flick up expands. Pulling down on the content when it is scrolled to the top also drags the sheet, giving a larger, more forgiving target. The scrim thins to a faint glance state (but never fully clears) as the sheet collapses onto its shortest "peek" detent
|
|
55
|
+
description: 'A mobile touch surface for filters, actions, and detail views that should rise from the bottom of the screen. Drag the grab handle to resize: a slow drag settles to the nearest snap point (a short peek, ~half, and ~full detent, filtered to those shorter than the sheet), a fast flick down dismisses, a fast flick up expands. Pulling down on the content when it is scrolled to the top also drags the sheet, giving a larger, more forgiving target. The scrim thins to a faint glance state (but never fully clears) as the sheet collapses onto its shortest "peek" detent; the sheet stays modal, so the background remains inert until dismissed; a residual dim keeps that legible. The sheet is modal: focus is trapped while open and restored to the opener on close, and Escape dismisses, so the swipe gesture always has a keyboard equivalent. Content padding clears the home indicator via env(safe-area-inset-bottom).',
|
|
56
56
|
bestPractices: [
|
|
57
57
|
{ guidance: true, description: 'Use for mobile-first surfaces (filters, share sheets, quick actions) where the content should rise from the bottom edge.' },
|
|
58
58
|
{ guidance: true, description: 'Keep the caller as the source of truth: derive isOpen from state and clear it in onOpenChange.' },
|
|
@@ -95,7 +95,7 @@ export const docs = {
|
|
|
95
95
|
</BottomSheet>`,
|
|
96
96
|
},
|
|
97
97
|
{
|
|
98
|
-
label: 'Non-modal sheet (no scrim)
|
|
98
|
+
label: 'Non-modal sheet (no scrim): page stays interactive',
|
|
99
99
|
code: `const [isOpen, setIsOpen] = useState(true);
|
|
100
100
|
<BottomSheet
|
|
101
101
|
isOpen={isOpen}
|
package/src/Tour/Tour.doc.mjs
CHANGED
|
@@ -8,13 +8,13 @@ export const docs = {
|
|
|
8
8
|
category: 'Feedback & Status',
|
|
9
9
|
keywords: ["tour","nux","onboarding","walkthrough","product tour","coachmark","spotlight","guide","feature step","step"],
|
|
10
10
|
description:
|
|
11
|
-
'A guided product tour (NUX / onboarding). Tour is a controller that steps a user through a sequence of spotlight callouts anchored to elements on the page. It renders no chrome itself
|
|
11
|
+
'A guided product tour (NUX / onboarding). Tour is a controller that steps a user through a sequence of spotlight callouts anchored to elements on the page. It renders no chrome itself; it owns the active-step state and shares it with declaratively-nested TourStep children (step order follows the children). Experimental: lands in lab first (facebook/astryx#4239).',
|
|
12
12
|
components: [
|
|
13
13
|
{
|
|
14
14
|
name: 'Tour',
|
|
15
15
|
displayName: 'Tour',
|
|
16
16
|
description:
|
|
17
|
-
'Controller for a guided tour. Coordinates the active step among its TourStep children, exposes advance / retreat / complete / dismiss, and optionally dims the page around the active step (spotlight cutout). Controlled via isActive
|
|
17
|
+
'Controller for a guided tour. Coordinates the active step among its TourStep children, exposes advance / retreat / complete / dismiss, and optionally dims the page around the active step (spotlight cutout). Controlled via isActive: the consumer owns "has this user seen the tour?".',
|
|
18
18
|
props: [
|
|
19
19
|
{
|
|
20
20
|
name: 'isActive',
|
|
@@ -27,7 +27,7 @@ export const docs = {
|
|
|
27
27
|
name: 'children',
|
|
28
28
|
type: 'ReactNode',
|
|
29
29
|
description:
|
|
30
|
-
'The tour steps
|
|
30
|
+
'The tour steps: TourStep elements. Step order follows their order here; only the active step renders its callout.',
|
|
31
31
|
slotElements: [{__element: 'TourStep', props: {heading: 'Step'}, children: 'Step body'}],
|
|
32
32
|
},
|
|
33
33
|
{
|
|
@@ -41,7 +41,7 @@ export const docs = {
|
|
|
41
41
|
name: 'hasBackdrop',
|
|
42
42
|
type: 'boolean',
|
|
43
43
|
description:
|
|
44
|
-
'Dim the page around the active step as a spotlight cutout
|
|
44
|
+
'Dim the page around the active step as a spotlight cutout: the target stays lit while everything else darkens. Use for modal-style steps that demand focus; leave off for a lightweight coachmark that only rings the target.',
|
|
45
45
|
default: 'false',
|
|
46
46
|
},
|
|
47
47
|
{
|
|
@@ -94,13 +94,13 @@ export const docs = {
|
|
|
94
94
|
],
|
|
95
95
|
usage: {
|
|
96
96
|
description:
|
|
97
|
-
'Use a Tour to introduce a feature or onboard a user through a few key parts of the UI. Compose it from TourStep children, each pointing at an element via targetRef; the Tour advances through them with Next/Back and ends on Done. It is controlled
|
|
97
|
+
'Use a Tour to introduce a feature or onboard a user through a few key parts of the UI. Compose it from TourStep children, each pointing at an element via targetRef; the Tour advances through them with Next/Back and ends on Done. It is controlled: keep isActive in your own state and persist "has seen this tour" yourself (the component only reports dismissal via onDismiss). Built on the existing Popover/Layer anchoring and overlay tokens rather than a bespoke positioning engine.',
|
|
98
98
|
bestPractices: [
|
|
99
|
-
{ guidance: true, description: 'Keep tours short
|
|
99
|
+
{ guidance: true, description: 'Keep tours short: a few high-value steps. Long tours get skipped.' },
|
|
100
100
|
{ guidance: true, description: 'Persist completion yourself (from onDismiss) so a user does not see the same tour on every visit.' },
|
|
101
101
|
{ guidance: true, description: 'Point each step at a stable, visible element; ensure the target is on-screen before its step becomes active.' },
|
|
102
|
-
{ guidance: false, description: 'Gate essential, must-see information behind a tour step
|
|
103
|
-
{ guidance: false, description: 'Use a tour as a substitute for clear UI
|
|
102
|
+
{ guidance: false, description: 'Gate essential, must-see information behind a tour step; users can dismiss it; put critical info inline.' },
|
|
103
|
+
{ guidance: false, description: 'Use a tour as a substitute for clear UI; fix confusing interfaces rather than narrating them.' },
|
|
104
104
|
],
|
|
105
105
|
},
|
|
106
106
|
};
|