Skip to content

Update button docs #3668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 1, 2025
Merged

Update button docs #3668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
68d8118
Update button docs
ethanshar Mar 31, 2025
31c4c5e
Bring back main button presets that relevant
ethanshar Mar 31, 2025
e59d940
Add back "Inverted" button presets and update button API documentation
ethanshar Apr 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 12 additions & 115 deletions src/components/button/button.api.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
{
"name": "enableShadow",
"type": "boolean",
"description": "Control shadow visibility (iOS-only)"
"description": "Control shadow visibility"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be changes in the ts file as well

},
{
"name": "avoidInnerPadding",
Expand Down Expand Up @@ -164,16 +164,21 @@
}
],
"snippet": [
"<View flex>",
"<View flex center gap-s5>",
"<Button label={'Press'} backgroundColor={Colors.red30}/>",
"<Button label={'Press'} outline size={Button.sizes.medium}/>",
"<Button label={'Press'} iconSource={Assets.icons.demo.star}/>",
"</View>",
"<View flex bottom>",
"<Button fullWidth label='Full Width Button'/>",
"</View>",
"</View>"
],
"docs": {
"hero": {
"title": "Button",
"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.",
"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.",
"type": "hero",
"layout": "horizontal",
"content": [
Expand Down Expand Up @@ -217,15 +222,6 @@
}
]
},
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You kept the Full-Width Vs. Floating Button section in the UX Guidelines

Copy link
Collaborator Author

@ethanshar ethanshar Apr 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can keep it, FloatingButton is available in public
I just didn't want to be in this component types, cause it's a different componetn

"title": "Floating Button",
"description": "The Floating Button is displayed at the bottom of the screen.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_floatingButton.png"
}
]
},
{
"title": "Full-Width Button",
"description": "Full Width buttons are sticky on the bottom of the screens.",
Expand All @@ -234,15 +230,6 @@
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_fullButton.png"
}
]
},
{
"title": "Toggle Button",
"description": "Toggle Button are mainly used to toggle between a state, f.e- favorite, like.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_types_toggleButtons.png"
}
]
}
],
"title": "Button Types",
Expand Down Expand Up @@ -309,7 +296,7 @@
]
},
{
"title": "Distructive",
"title": "Destructive",
"description": "Used for destructive actions such as Delete and Log out. ",
"content": [
{
Expand All @@ -319,18 +306,6 @@
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_distructiveSecondary.png"
}
]
},
{
"title": "Premium",
"description": "Used as a premium upgrade entry point.",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumPrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_presets_premiumSecondary.png"
}
]
}
],
"title": "",
Expand Down Expand Up @@ -432,51 +407,6 @@
"description": "",
"name": "Inverted"
},
{
"type": "table",
"columns": ["Property", "Primary", "Secondary"],
"items": [
{
"title": "Active",
"description": "",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActivePrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumActiveSecondary.png"
}
]
},
{
"title": "Loading",
"description": "",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingPrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumLoadingSecondary.png"
}
]
},
{
"title": "Disabled",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledPrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_states_premiumDisabledSecondary.png"
}
],
"description": ""
}
],
"title": "",
"description": "",
"name": "Premium"
},
{
"type": "table",
"columns": ["Property", "Component"],
Expand Down Expand Up @@ -638,39 +568,6 @@
"description": "",
"name": "Main"
},
{
"type": "table",
"columns": ["Property", "Primary", "Secondary"],
"items": [
{
"title": "Active",
"description": "",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_presets_invertedPrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedActiveSecondary.png"
}
]
},
{
"title": "Disabled",
"description": "",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledPrimary.png"
},
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_overview_iconButton_states_invertedDisabledSecondary.png"
}
]
}
],
"title": "",
"description": "",
"name": "Inverted"
},
{
"type": "section",
"title": "Usage Examples",
Expand Down Expand Up @@ -700,7 +597,7 @@
]
},
{
"title": "Distructive",
"title": "Destructive",
"description": "text style: bodyBold, $textDangerLight",
"content": [
{
Expand Down Expand Up @@ -780,7 +677,7 @@
{
"type": "section",
"title": "Full-Width Button",
"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."
"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."
},
{
"type": "table",
Expand All @@ -796,7 +693,7 @@
]
},
{
"title": "Distructive ",
"title": "Destructive ",
"description": "",
"content": [
{
Expand Down Expand Up @@ -879,7 +776,7 @@
},
{
"title": "Action text truncation/ellipsis",
"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. ",
"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. ",
"content": [
{
"value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Button/button_UX_dosDonts_truncation.png"
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export type ButtonProps = TouchableOpacityProps &
*/
round?: boolean;
/**
* Control shadow visibility (iOS-only)
* Control shadow visibility
*/
enableShadow?: boolean;
/**
Expand Down