Skip to content

Commit ce59e98

Browse files
ethansharethanshar
authored
Update button docs (#3668)
* Update button docs * Bring back main button presets that relevant * Add back "Inverted" button presets and update button API documentation
1 parent 68a5ed0 commit ce59e98

File tree

2 files changed

+13
-116
lines changed

2 files changed

+13
-116
lines changed

‎src/components/button/button.api.json

+12-115
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@
135135
{
136136
"name": "enableShadow",
137137
"type": "boolean",
138-
"description": "Control shadow visibility (iOS-only)"
138+
"description": "Control shadow visibility"
139139
},
140140
{
141141
"name": "avoidInnerPadding",
@@ -164,16 +164,21 @@
164164
}
165165
],
166166
"snippet": [
167+
"<View flex>",
167168
"<View flex center gap-s5>",
168169
"<Button label={'Press'} backgroundColor={Colors.red30}/>",
169170
"<Button label={'Press'} outline size={Button.sizes.medium}/>",
170171
"<Button label={'Press'} iconSource={Assets.icons.demo.star}/>",
172+
"</View>",
173+
"<View flex bottom>",
174+
"<Button fullWidth label='Full Width Button'/>",
175+
"</View>",
171176
"</View>"
172177
],
173178
"docs": {
174179
"hero": {
175180
"title": "Button",
176-
"description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. 
Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
181+
"description": "A button triggers an event or action.\n\nPrimary buttons that indicate a call to action, are the most prominent. Secondary buttons, which indicate less commonly used actions, should be less prominent than primary buttons, second in hierarchy.\n\nButtons are placed where a user should expect them, i.e. in close proximity to the other elements that the action affects.",
177182
"type": "hero",
178183
"layout": "horizontal",
179184
"content": [
@@ -217,15 +222,6 @@
217222
}
218223
]
219224
},
220-
{
221-
"title": "Floating Button",
222-
"description": "The Floating Button is displayed at the bottom of the screen.",
223-
"content": [
224-
{
225-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_floatingButton.png"
226-
}
227-
]
228-
},
229225
{
230226
"title": "Full-Width Button",
231227
"description": "Full Width buttons are sticky on the bottom of the screens.",
@@ -234,15 +230,6 @@
234230
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_fullButton.png"
235231
}
236232
]
237-
},
238-
{
239-
"title": "Toggle Button",
240-
"description": "Toggle Button are mainly used to toggle between a state, f.e- favorite, like.",
241-
"content": [
242-
{
243-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_toggleButtons.png"
244-
}
245-
]
246233
}
247234
],
248235
"title": "Button Types",
@@ -309,7 +296,7 @@
309296
]
310297
},
311298
{
312-
"title": "Distructive",
299+
"title": "Destructive",
313300
"description": "Used for destructive actions such as Delete and Log out. ",
314301
"content": [
315302
{
@@ -319,18 +306,6 @@
319306
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructiveSecondary.png"
320307
}
321308
]
322-
},
323-
{
324-
"title": "Premium",
325-
"description": "Used as a premium upgrade entry point.",
326-
"content": [
327-
{
328-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumPrimary.png"
329-
},
330-
{
331-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumSecondary.png"
332-
}
333-
]
334309
}
335310
],
336311
"title": "",
@@ -432,51 +407,6 @@
432407
"description": "",
433408
"name": "Inverted"
434409
},
435-
{
436-
"type": "table",
437-
"columns": ["Property", "Primary", "Secondary"],
438-
"items": [
439-
{
440-
"title": "Active",
441-
"description": "",
442-
"content": [
443-
{
444-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActivePrimary.png"
445-
},
446-
{
447-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActiveSecondary.png"
448-
}
449-
]
450-
},
451-
{
452-
"title": "Loading",
453-
"description": "",
454-
"content": [
455-
{
456-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingPrimary.png"
457-
},
458-
{
459-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingSecondary.png"
460-
}
461-
]
462-
},
463-
{
464-
"title": "Disabled",
465-
"content": [
466-
{
467-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledPrimary.png"
468-
},
469-
{
470-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledSecondary.png"
471-
}
472-
],
473-
"description": ""
474-
}
475-
],
476-
"title": "",
477-
"description": "",
478-
"name": "Premium"
479-
},
480410
{
481411
"type": "table",
482412
"columns": ["Property", "Component"],
@@ -638,39 +568,6 @@
638568
"description": "",
639569
"name": "Main"
640570
},
641-
{
642-
"type": "table",
643-
"columns": ["Property", "Primary", "Secondary"],
644-
"items": [
645-
{
646-
"title": "Active",
647-
"description": "",
648-
"content": [
649-
{
650-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedPrimary.png"
651-
},
652-
{
653-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedActiveSecondary.png"
654-
}
655-
]
656-
},
657-
{
658-
"title": "Disabled",
659-
"description": "",
660-
"content": [
661-
{
662-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledPrimary.png"
663-
},
664-
{
665-
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledSecondary.png"
666-
}
667-
]
668-
}
669-
],
670-
"title": "",
671-
"description": "",
672-
"name": "Inverted"
673-
},
674571
{
675572
"type": "section",
676573
"title": "Usage Examples",
@@ -700,7 +597,7 @@
700597
]
701598
},
702599
{
703-
"title": "Distructive",
600+
"title": "Destructive",
704601
"description": "text style: bodyBold, $textDangerLight",
705602
"content": [
706603
{
@@ -780,7 +677,7 @@
780677
{
781678
"type": "section",
782679
"title": "Full-Width Button",
783-
"description": "Full-Width buttons are sticky on the bottom of the screens.
They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
680+
"description": "Full-Width buttons are sticky on the bottom of the screens.They are usually used for primary actions on management screens, e.g. adding a new item to a list.\nThey are great to use on screens with potentially long lists, since they stick to the bottom and are always visible."
784681
},
785682
{
786683
"type": "table",
@@ -796,7 +693,7 @@
796693
]
797694
},
798695
{
799-
"title": "Distructive ",
696+
"title": "Destructive ",
800697
"description": "",
801698
"content": [
802699
{
@@ -879,7 +776,7 @@
879776
},
880777
{
881778
"title": "Action text truncation/ellipsis",
882-
"description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. 
In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
779+
"description": "Action text truncation or ellipsis should be avoided at all costs.\nActions should be clear and down to the point. In case the action is complex, consider displaying an explanatory text outside the actual button component. ",
883780
"content": [
884781
{
885782
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_truncation.png"

‎src/components/button/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ export type ButtonProps = TouchableOpacityProps &
128128
*/
129129
round?: boolean;
130130
/**
131-
* Control shadow visibility (iOS-only)
131+
* Control shadow visibility
132132
*/
133133
enableShadow?: boolean;
134134
/**

0 commit comments

Comments
 (0)