186 lines
6.5 KiB
Text
186 lines
6.5 KiB
Text
|
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
|
||
|
|
|
||
|
|
import WootButton from '../../app/javascript/dashboard/components/ui/WootButton.vue';
|
||
|
|
|
||
|
|
<Meta title="Styleguide/Buttons" />
|
||
|
|
|
||
|
|
# Buttons
|
||
|
|
|
||
|
|
Buttons can be used by `woot-button` component in `vue`. You can play with all the props here 👉 [woot-button](/story/components-button--primary). The button component is made on top of [foundation button](https://get.foundation/sites/docs/button.html)
|
||
|
|
so the style of button can be used outside of vue with `button` class.
|
||
|
|
|
||
|
|
Other than declred props the `woot-button` can be customised by providing custom classnames through `class-names` prop.
|
||
|
|
|
||
|
|
<Story name="default">
|
||
|
|
{{
|
||
|
|
template: `<woot-button size="" title="Press me">Default</woot-button>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
|
||
|
|
- While naming button labels make sure to describe the action with some context.
|
||
|
|
- For HTML forms use `<woot-button type="submit">` instead of `<input type="submit" />`
|
||
|
|
- Provide title or tooltip if possible.
|
||
|
|
|
||
|
|
## Button sizes
|
||
|
|
|
||
|
|
Size of the buttons can be set with `size` to `woot-button`. By default medium is the default size of a button. Other sizes are `tiny, small, medium, large`.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="sizes">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button size="tiny">Tiny</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button size="small">Small</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button size="">Default</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button size="large">Large</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
Buttons can expanded to full width by setting the `is-expanded` prop. For with by screen size or to make it responsive try with the classnames on
|
||
|
|
[Responsive Expanded buttons](https://get.foundation/sites/docs/button.html#responsive-expanded-buttons) with foundation.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="expanded">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="columns">
|
||
|
|
<woot-button size="large" is-expanded title="Micheal Scott said the rest">This is buttons is very long</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Button colors
|
||
|
|
|
||
|
|
Chatwoot comes with predefined set of colors for buttons. The color of the button can be set with `color-scheme` to `woot-button`.
|
||
|
|
Default color scheme is `primary`, other color-schemes are `secondary, success, alert, warning`.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="colors">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button >Primary</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="secondary">Secondary</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="success">Success</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="alert">Alert</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="warning">Warning</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Button style variations
|
||
|
|
|
||
|
|
There are diffrent styles that comes with chatwoot buttons. This can set with `variants` prop for `woot-button`. By deault the filled will be the style, other variations are `smooth, hollow, clear, link`
|
||
|
|
|
||
|
|
- Primary form actions like Save details, Create campaign etc should use default style.
|
||
|
|
- The Cancel action has to use the smooth style.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="variants">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button >Default</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button variant="smooth" color-scheme="alert">Smooth</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="secondary" variant="hollow">Hollow</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="success" variant="clear">Success</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="alert" variant="link">Link</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Button states
|
||
|
|
|
||
|
|
The button can be disbaled with `is-disabled` which accepts a boolean value. The button can set to a loading state with `is-loading` which accepts a boolean value.
|
||
|
|
|
||
|
|
These are states other than the default interaction states like hover, active, focused.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="states">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="alert" is-disabled>disabled :/</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button variant="smooth" color-scheme="primary" is-loading>Loading...</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
## Button with icon and text
|
||
|
|
|
||
|
|
Chatwoot currently use [IonIcons version 2](https://ionic.io/ionicons/v2) which are font-icons. The button position is fixed on the left.
|
||
|
|
The prop `icon` can be used to pass the **ion icon classname** to render the icon.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="icons">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="alert" icon="ion-stop">Stop</woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button icon="ion-person" variant="hollow">Hollow man</woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|
||
|
|
|
||
|
|
#### Buttons with only icon
|
||
|
|
|
||
|
|
The `woot-button` can be used as an icon only button by keeping the button text empty.
|
||
|
|
|
||
|
|
<Canvas>
|
||
|
|
<Story name="icononly">
|
||
|
|
{{
|
||
|
|
template: `<div class="row">
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="success" icon="ion-plus" size="tiny"></woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button color-scheme="secondary" icon="ion-plus" size="small" variant="smooth"></woot-button>
|
||
|
|
</div>
|
||
|
|
<div class="margin-horizontal-2">
|
||
|
|
<woot-button icon="ion-plus" variant="hollow"></woot-button>
|
||
|
|
</div>
|
||
|
|
</div>`,
|
||
|
|
}}
|
||
|
|
</Story>
|
||
|
|
</Canvas>
|