Skip to content

Commit 59b872f

Browse files
rnuinoci[bot]ethanshar
rnuinoci[bot]
and
ethanshar
authored
Update toast api.json (#3567)
* wix-noci: update api.json * Enhance toast API documentation with detailed usage examples and guidelines --------- Co-authored-by: rnuinoci[bot] <182611266+rnuinoci[bot]@users.noreply.github.com> Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
1 parent 38e9126 commit 59b872f

File tree

2 files changed

+128
-110
lines changed

2 files changed

+128
-110
lines changed

‎src/components/toast/toast.api.json‎

Lines changed: 1 addition & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -5,113 +5,5 @@
55
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ToastsScreen.js",
66
"caution": "Please consider moving to our new Toast implementation and use Incubator.Toast instead",
77
"images": [],
8-
"props": [],
9-
"docs": {
10-
"hero": {
11-
"title": "Toast",
12-
"description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
13-
"type": "hero",
14-
"layout": "horizontal",
15-
"content": [
16-
{
17-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
18-
}
19-
]
20-
},
21-
"tabs": [
22-
{
23-
"title": "Overview",
24-
"sections": [
25-
{
26-
"type": "section",
27-
"title": "Usage Examples",
28-
"content": [
29-
{
30-
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
31-
}
32-
]
33-
},
34-
{
35-
"type": "table",
36-
"columns": [
37-
"Type of message",
38-
"Preview"
39-
],
40-
"items": [
41-
{
42-
"title": "Generic",
43-
"content": [
44-
{
45-
"props": {
46-
"visible": true,
47-
"message": "\"Mika Or\" was saved to contacts."
48-
}
49-
}
50-
]
51-
},
52-
{
53-
"title": "Success"
54-
},
55-
{
56-
"title": "Validation"
57-
},
58-
{
59-
"title": "Offline Error"
60-
}
61-
],
62-
"title": "Types"
63-
},
64-
{
65-
"type": "table",
66-
"columns": [
67-
"Prop",
68-
"Preview"
69-
],
70-
"items": [
71-
{
72-
"title": "None"
73-
},
74-
{
75-
"title": "With action"
76-
},
77-
{
78-
"title": "With loader"
79-
}
80-
],
81-
"title": "Accessories"
82-
},
83-
{
84-
"type": "section",
85-
"title": "Timing",
86-
"description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
87-
},
88-
{
89-
"type": "section",
90-
"layout": "horizontal",
91-
"title": "Spec",
92-
"description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar. \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user. \nToast can be dismissed manually by swiping it down.",
93-
"content": [
94-
{
95-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
96-
}
97-
]
98-
},
99-
{
100-
"type": "section",
101-
"title": "Tablet Spec",
102-
"description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content. \n- Min-width: 200px \n- Max-width: 524px",
103-
"content": [
104-
{
105-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
106-
}
107-
]
108-
}
109-
]
110-
},
111-
{
112-
"title": "UX Guidelines",
113-
"sections": []
114-
}
115-
]
116-
}
8+
"props": []
1179
}

‎src/incubator/toast/toast.api.json‎

Lines changed: 127 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,131 @@
6868
" autoDismiss={5000$2}",
6969
" onDismiss={onDismiss$3}",
7070
">"
71-
]
71+
],
72+
"docs": {
73+
"hero": {
74+
"title": "Toast",
75+
"description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
76+
"type": "hero",
77+
"layout": "horizontal",
78+
"content": [
79+
{
80+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
81+
}
82+
]
83+
},
84+
"tabs": [
85+
{
86+
"title": "Overview",
87+
"sections": [
88+
{
89+
"type": "section",
90+
"title": "Usage Examples",
91+
"content": [
92+
{
93+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
94+
}
95+
]
96+
},
97+
{
98+
"type": "table",
99+
"columns": ["Type of message", "Preview"],
100+
"items": [
101+
{
102+
"title": "Generic",
103+
"content": [
104+
{
105+
"props": {
106+
"visible": true,
107+
"message": "\"Mika Or\" was saved to contacts."
108+
}
109+
}
110+
]
111+
},
112+
{
113+
"title": "Success"
114+
},
115+
{
116+
"title": "Validation"
117+
},
118+
{
119+
"title": "Offline Error"
120+
}
121+
],
122+
"title": "Types"
123+
},
124+
{
125+
"type": "table",
126+
"columns": ["Prop", "Preview"],
127+
"items": [
128+
{
129+
"title": "None"
130+
},
131+
{
132+
"title": "With action"
133+
},
134+
{
135+
"title": "With loader"
136+
}
137+
],
138+
"title": "Accessories"
139+
},
140+
{
141+
"type": "section",
142+
"title": "Timing",
143+
"description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
144+
},
145+
{
146+
"type": "section",
147+
"layout": "horizontal",
148+
"title": "Spec",
149+
"description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar. \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user. \nToast can be dismissed manually by swiping it down.",
150+
"content": [
151+
{
152+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
153+
}
154+
]
155+
},
156+
{
157+
"type": "section",
158+
"title": "Tablet Spec",
159+
"description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content. \n- Min-width: 200px \n- Max-width: 524px",
160+
"content": [
161+
{
162+
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
163+
}
164+
]
165+
}
166+
]
167+
},
168+
{
169+
"title": "UX Guidelines",
170+
"sections": [
171+
{
172+
"type": "list",
173+
"items": [
174+
{
175+
"title": "",
176+
"content": [
177+
{
178+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
179+
}
180+
]
181+
},
182+
{
183+
"title": "",
184+
"content": [
185+
{
186+
"value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247643&embed-host=share"
187+
}
188+
]
189+
}
190+
],
191+
"title": "Do’s & Don’ts",
192+
"description": "markdown:\n**Message Length**\nDo not display long messages in a Toast, keep the Toast message short and focused, yet informative. \nFurther information regarding the phrasing of toast messages can be found in UX Writers - Toast Guidelines."
193+
}
194+
]
195+
}
196+
]
197+
}
72198
}

0 commit comments

Comments
 (0)