Skip to content

Commit

Permalink
fix(button): fix button types
Browse files Browse the repository at this point in the history
  • Loading branch information
@leonid
leonid committed Jul 16, 2024
1 parent 416abff commit f5dc2bc
Show file tree
Hide file tree
Showing 23 changed files with 415 additions and 262 deletions.
4 changes: 4 additions & 0 deletions packages/documentation/.vitepress/configuration/examples.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,12 @@ export const enExamples = [
link: '/examples/button',
items: [
{ text: 'Basic', link: '/examples/button/basic' },
{ text: 'Button types', link: '/examples/button/types' },
{ text: 'Button sizes', link: '/examples/button/sizes' },
{ text: 'Button colors', link: '/examples/button/colors' },
{ text: 'Button variants', link: '/examples/button/variants' },
{ text: 'Button pill', link: '/examples/button/pill' },
{ text: 'Button squared', link: '/examples/button/squared' },
],
},
{
Expand Down
125 changes: 29 additions & 96 deletions packages/documentation/components/button/button.doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ editLink: true

# ACV Button

Button is an input that allows for user-triggered actions when clicked or pressed.
Button is used to highlight key actions and clearly inform user of what will happen after the interaction.

Use buttons for actions in forms, dialogs, and much more.

Expand All @@ -20,58 +20,25 @@ It supports multiple variants, sizes, and states.
<<< @/demos/button/ButtonBasic.vue
:::

## Variants

Button supports the several predefined types, for different semantic purposes.
Use the `variant` prop to set the variant of the button.
By default, the button is rendered as a solid primary button.

There are 4 variant types available: `solid`, `outline`, `ghost` and `light`.

There are 5 variant color patterns available: `primary`, `secondary`, `success`, `danger`, `warning`, `info` and `inverted` for the dark surfaces.

### Solid

`solid` is a default variant for button.

Button with a solid variant is a button with a solid background color.

Use the `variant` prop to set the variant of the button.

<ButtonVariantSolid />

### Outline

Button with an outline variant is a button with a border and transparent background.
You can use `variant="outline"` to create outlined button.

:::details Customize `border-style` of outlined buttons
To create outlined button with different border style just add relevant class.

e.g. To create outline button with dashed border, add `acv-border-style-dashed` class.
:::

<ButtonVariantOutline />

### Ghost

You can use `variant="ghost"` to create button with a transparent background and without a border.

<ButtonVariantGhost />
## Types

### Light
<ButtonDocTypes />

You can use `variant="light"` Button with light semi-opaque background color.
## States

<ButtonVariantLight />
<ButtonDocStates />

## Sizing

Specify the size(small, large) of the button using the `size` prop.

<ButtonSizes />
<ButtonDocSizes />

## Types
## With icons

<ButtonDocWithIcons />

## Button types

By default `<acv-button>` renders a `<button>` element.
You can change the type of the button by setting the `type` prop.
Expand All @@ -85,10 +52,6 @@ It is ignored when either _href_ or _to_ props are set.

<ButtonTypes />

## With icons

<ButtonWithIcons />

## With single icon

<ButtonWithSingleIcon />
Expand All @@ -97,41 +60,14 @@ It is ignored when either _href_ or _to_ props are set.

<ButtonWithLoading />

## Colors

Button supports the following color variants:
`primary`, `secondary`, `success`, `danger`, `warning`, `info` and `inverted`.

### Primary

<ButtonColorPrimary />

### Secondary

<ButtonColorSecondary />

## Block buttons

Create block buttons that use full width of the parent container.
Set up the `block` prop to make the button full width.

<ButtonBlock />

## Pill buttons

Create pill buttons by setting the `pill` prop.

TODO: replace with _roundness_ prop

<ButtonPill />

## Squared buttons

Create squared buttons by setting the `squared` prop.

<ButtonSquared />

## Accessibility ♿️
## Accessibility

Provided `AcvButton` component must adapt to the list of
[WAI-ARIA button accessibility patterns](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
Expand Down Expand Up @@ -182,26 +118,23 @@ When `href` or `to` props are set, the button is rendered as an `<a>` element wi

## Props

| Prop name | Description | Type | Values | Default |
| ---------- | -------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------- | --------- |
| tag | Button tag | "a" \| "span" \| "button" \| "label" | a, span, button, label | 'button' |
| buttonType | Button type | "button" \| "submit" \| "reset" | button, submit, reset | button |
| variant | Button variant | AcvButtonVariant | primary, secondary, ghost, danger, inverted | primary |
| icon | Button icon, accepts an icon name of Icon component | IconProp | - | |
| color | Color of the button | ColorProp | primary, secondary, success, danger, warning, info, inverted, light, dark | 'primary' |
| height | Button height for fluid variant | AcvButtonHeight | 32, 48 | |
| size | Button size | AcvButtonSize | small, medium, large | medium |
| autofocus | Same as native button's autofocus | boolean | - | |
| disabled | Disable the button | boolean | - | |
| loading | Determine whether it's loading | boolean | - | |
| fluid | Whether button should fill all available width | boolean | - | |
| multiline | Turn on multiline mode | boolean | - | |
| rightIcon | Button icon on the right side,<br/> accepts an icon name of Icon component | IconProp | - | |
| block | Whether the button is block style or not | boolean | - | |
| pill | | boolean | - | |
| squared | | boolean | - | |
| to | Button router-link path | string \| object | - | |
| kind | | - | - | 'solid' |
| Prop name | Description | Type | Values | Default |
| ---------- | -------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------- | -------- |
| type | Button type | AcvButtonType | primary, secondary, ghost, danger, inverted | |
| variant | Button variant | AcvButtonVariant | solid, outline, ghost, light | solid |
| color | Color of the button | ButtonColor | primary, secondary, inverted, neutral, info, warning, success, critical, danger, info | primary |
| tag | Button tag | "a" \| "span" \| "button" \| "label" | a, span, button, label | 'button' |
| buttonType | Button type | "button" \| "submit" \| "reset" | button, submit, reset | button |
| icon | Button icon, accepts an icon name of Icon component | IconProp | - | |
| size | Button size | AcvButtonSize | small, medium, large | medium |
| autofocus | Same as native button's autofocus | boolean | - | |
| disabled | Disable the button | boolean | - | |
| loading | Determine whether it's loading | boolean | - | |
| rightIcon | Button icon on the right side,<br/> accepts an icon name of Icon component | IconProp | - | |
| block | Whether the button is block styled or not | boolean | - | false |
| pill | Whether the button is rounded or not | boolean | - | false |
| squared | Whether the button is squared or not | boolean | - | false |
| to | Button router-link path | string \| object | - | |

## Slots

Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/demos/button/ButtonColorDanger.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
:class="state"
color="danger"
>
Button solid {{ state }}
Solid {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="outline"
color="danger"
>
Button outline {{ state }}
Outline {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="ghost"
color="danger"
>
Button ghost {{ state }}
Ghost {{ state }}
</AcvButton>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/demos/button/ButtonColorInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
:class="state"
color="info"
>
Button solid {{ state }}
Solid {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="outline"
color="info"
>
Button outline {{ state }}
Outline {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="ghost"
color="info"
>
Button ghost {{ state }}
Ghost {{ state }}
</AcvButton>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/demos/button/ButtonColorInverted.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
:class="state"
color="inverted"
>
Button solid {{ state }}
Solid {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="outline"
color="inverted"
>
Button outline {{ state }}
Outline {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="ghost"
color="inverted"
>
Button ghost {{ state }}
Ghost {{ state }}
</AcvButton>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/demos/button/ButtonColorSuccess.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
:class="state"
color="success"
>
Button solid {{ state }}
Solid {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="outline"
color="success"
>
Button outline {{ state }}
Outline {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="ghost"
color="success"
>
Button ghost {{ state }}
Ghost {{ state }}
</AcvButton>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/demos/button/ButtonColorWarning.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@
:class="state"
color="warning"
>
Button solid {{ state }}
Solid {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="outline"
color="warning"
>
Button outline {{ state }}
Outline {{ state }}
</AcvButton>
<AcvButton
:class="state"
variant="ghost"
color="warning"
>
Button ghost {{ state }}
Ghost {{ state }}
</AcvButton>
</div>
</div>
Expand Down
31 changes: 31 additions & 0 deletions packages/documentation/demos/button/ButtonDocSizes.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<script setup>
import Row from '@/components/row/row.vue';
</script>

<template>
<Row
justify="center"
:gap="16"
>
<AcvButton>
Default AcvButton
</AcvButton>
<AcvButton size="large">
Large AcvButton
</AcvButton>
</Row>
<Row
justify="center"
:gap="16"
>
<AcvButton variant="outline">
Default AcvButton
</AcvButton>
<AcvButton
variant="outline"
size="large"
>
Large AcvButton
</AcvButton>
</Row>
</template>
Loading

0 comments on commit f5dc2bc

Please sign in to comment.