chore: Refactor button styles (#2259)
This commit is contained in:
Nithin David Thomas
committed by
GitHub
GitHub
parent
af8e681f2a
commit
c681e8a01b
185
stories/Sections/Button.stories.mdx
Normal file
185
stories/Sections/Button.stories.mdx
Normal file
@@ -0,0 +1,185 @@
|
||||
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>
|
||||
Reference in New Issue
Block a user