Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit d339bfc

Browse files
codebender828codebender828
authored
Merge pull request #21 from chakra-ui/develop
feat: button, icon-button and refactor dev environment
2 parents ee62a4b + da1c7f6 commit d339bfc

32 files changed

+1148
-213
lines changed

‎@types/index.d.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎@types/jsx.d.ts

Lines changed: 0 additions & 61 deletions
This file was deleted.

‎docs/.vitepress/__theme/index.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
import Default from '../../layouts/default.vue'
3+
import { domElements, chakra } from '@chakra-ui/vue-system'
4+
import ChakraUIVue from '@chakra-ui/vue-next'
5+
// import kebabCase from 'lodash.kebabcase'
6+
function kebabCase(key) {
7+
const result = key.replace(/([A-Z])/g, " $1").trim();
8+
return result.split(" ").join("-").toLowerCase();
9+
}
10+
11+
export default {
12+
Layout: Default,
13+
NotFound: () => 'custom 404', // <- this is a Vue 3 functional component
14+
enhanceApp({ app }) {
15+
// app is the Vue 3 app instance from `createApp()`. router is VitePress'
16+
// custom router. `siteData`` is a `ref`` of current site-level metadata.
17+
app.use(ChakraUIVue, {
18+
icons: {
19+
library: {
20+
feActivity
21+
}
22+
}
23+
})
24+
25+
domElements.forEach((tag) => {
26+
app.component(`chakra.${tag}`, chakra(tag))
27+
})
28+
29+
Object.keys(ChakraUIVue).forEach((component) => {
30+
if (kebabCase(component).startsWith('c-')) {
31+
app.component(component, ChakraUIVue[component])
32+
}
33+
})
34+
}
35+
}

‎docs/.vitepress/config.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
module.exports = {
2+
lang: 'en-US',
3+
title: '@chakra-ui/vue@next',
4+
description: 'Build accessible Vue apps with speed',
5+
6+
themeConfig: {
7+
repo: 'chakra-ui/chakra-ui-vue-next',
8+
docsDir: 'docs',
9+
10+
editLinks: true,
11+
editLinkText: 'Edit this page on GitHub',
12+
lastUpdated: 'Last Updated',
13+
14+
nav: [
15+
{ text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
16+
{
17+
text: 'Config Reference',
18+
link: '/config/basics',
19+
activeMatch: '^/config/'
20+
},
21+
{
22+
text: 'Release Notes',
23+
link: 'https://github.com/chakra-ui/chakra-ui-vue-next/releases'
24+
}
25+
],
26+
27+
sidebar: {
28+
'/setup/': getSetupSidebar(),
29+
'/components/': getSetupSidebar(),
30+
'/': getSetupSidebar()
31+
}
32+
}
33+
}
34+
35+
function getSetupSidebar() {
36+
return [
37+
{
38+
text: 'Introduction',
39+
children: [
40+
{ text: 'Chakra UI Vue', link: '/' },
41+
{ text: 'Getting Started', link: '/guide/getting-started' }
42+
]
43+
},
44+
{
45+
text: 'Components',
46+
children: [
47+
{ text: 'Alert', link: '/components/alert' },
48+
{ text: 'Button', link: '/components/button' },
49+
{ text: 'Icon', link: '/components/icon' },
50+
{ text: 'Spinner', link: '/components/spinner' },
51+
{ text: 'CSS reset', link: '/components/css-reset' },
52+
{ text: 'Visually hidden', link: '/components/visually-hidden' },
53+
]
54+
}
55+
]
56+
}
57+
58+
function getComponentsSidebar() {
59+
return [
60+
{
61+
text: 'Components',
62+
children: [
63+
{ text: 'Alert', link: '/components/alert' },
64+
{ text: 'Button', link: '/components/button' },
65+
{ text: 'Icon', link: '/components/icon' },
66+
{ text: 'Spinner', link: '/components/spinner' },
67+
{ text: 'CSS reset', link: '/components/css-reset' },
68+
{ text: 'Visually hidden', link: '/components/visually-hidden' },
69+
]
70+
},
71+
// {
72+
// text: 'Theme',
73+
// children: [
74+
// { text: 'Homepage', link: '/config/homepage' },
75+
// { text: 'Algolia Search', link: '/config/algolia-search' },
76+
// { text: 'Carbon Ads', link: '/config/carbon-ads' }
77+
// ]
78+
// }
79+
]
80+
}

‎docs/components/alert.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Alert
2+
3+
> TODO

‎docs/components/button.md

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
# Button
2+
3+
The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
4+
5+
## Import
6+
7+
```bash
8+
import { CButton, CButtonGroup } from "@chakra-ui/vue-next"
9+
```
10+
11+
- `CButton`: The button component with support for custom icons, spinners, etc.
12+
- `CButtonGroup`: Used to group buttons whose actions are related, with an option to flush them together.
13+
14+
## Usage
15+
```vue
16+
<c-button color-scheme="blue">Button</c-button>
17+
```
18+
19+
### Button sizes
20+
Use the `size` prop to change the size of the button. You can set the value to `xs`, `sm`, `md`, or `lg`.
21+
22+
```vue{1,4,7,10}
23+
<c-button color-scheme="teal" size="xs">
24+
Button
25+
</c-button>
26+
<c-button color-scheme="teal" size="sm">
27+
Button
28+
</c-button>
29+
<c-button color-scheme="teal" size="md">
30+
Button
31+
</c-button>
32+
<c-button color-scheme="teal" size="lg">
33+
Button
34+
</c-button>
35+
```
36+
37+
### Button variants
38+
39+
Use the `variant` prop to change the visual style of the Button. You can set the
40+
value to `solid`, `ghost`, `outline`, or `link`.
41+
42+
```vue{1,4,7,10}
43+
<c-button color-scheme="teal" variant="solid">
44+
Button
45+
</c-button>
46+
<c-button color-scheme="teal" variant="outline">
47+
Button
48+
</c-button>
49+
<c-button color-scheme="teal" variant="ghost">
50+
Button
51+
</c-button>
52+
<c-button color-scheme="teal" variant="link">
53+
Button
54+
</c-button>
55+
```
56+
57+
### Button with icon
58+
59+
You can add left and right icons to the Button component using the `left-icon`
60+
and `right-icon` props respectively.
61+
62+
::: warning TODO
63+
TODO: Link to icon documentation
64+
65+
:::
66+
67+
### Button loading state
68+
69+
Pass the `is-loading` prop to show its loading state. By default, the button will
70+
show a spinner and leave the button's width unchanged.
71+
72+
You can also pass the `loading-text` prop to show a spinner and the loading text.
73+
```vue
74+
<c-button is-loading color-scheme="teal" variant="solid">
75+
Email
76+
</c-button>
77+
<c-button is-loading loading-text="Submitting" color-scheme="teal" variant="outline">
78+
Submit
79+
</c-button>
80+
```
81+
82+
### Grouping Buttons
83+
84+
You can use the `CStack` or `CButtonGroup` component to group buttons. When you
85+
use the `CButtonGroup` component, it allows you to:
86+
87+
- Set the `size` and `variant` of all buttons within it.
88+
- Add `spacing` between the buttons.
89+
- Flush the buttons together by removing the border radius of the its children
90+
as needed.
91+
92+
```vue
93+
<c-button-group size="sm" is-attached variant="outline">
94+
<c-button mr="-px">Save</c-button>
95+
<c-icon-button aria-label="Add to friends" icon="plus" />
96+
</c-button-group>
97+
```
98+
99+
## Accessibility
100+
101+
- `CButton` has `role` of `button`.
102+
- When `CButton` has focus, <kbd>Space</kbd> or <kbd>Enter</kbd> activates it.
103+
104+
## Composition
105+
106+
Theming props passed into the `CButton` component (e.g. `variant`, `colorScheme`, etc.) are converted to style props. This means you can override any style of the `CButton` via type style props.
107+
108+
## Props
109+
110+
### Button Props
111+
112+
`CButton` composes the `CBox` component, so you can pass all its props.
113+
These are props specific to the `CButton` component:
114+
115+
## Composition
116+
117+
All props you pass (`variant`, `colorScheme`, etc.) are converted to style
118+
props. This means you can override any style of the Button via props.
119+
120+
```vue
121+
<!--
122+
The size prop affects the height of the button.
123+
It can still be overriden by passing a custom height
124+
-->
125+
<c-button
126+
size="md"
127+
height="48px"
128+
width="200px"
129+
border="2px"
130+
border-color="green.500"
131+
>
132+
Button
133+
</c-button>
134+
```
135+
136+
---
137+
138+
## Custom Button
139+
140+
In the event that you need to make your own custom button, you can leverage the
141+
`CBox` component. It provides the `hover`, `focus`, `active` and `disabled` style
142+
props to style the button.
143+
144+
```vue
145+
<!-- Button from facebook.com -->
146+
<c-box
147+
as="button"
148+
height="24px"
149+
line-height="1.2"
150+
transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
151+
border="1px"
152+
px="8px"
153+
border-radius="2px"
154+
font-size="14px"
155+
font-weight="semibold"
156+
bg="#f5f6f7"
157+
border-color="#ccd0d5"
158+
color="#4b4f56"
159+
:_hover="{ bg: '#ebedf0' }"
160+
:_active="{
161+
bg: '#dddfe2',
162+
transform: 'scale(0.98)',
163+
borderColor: '#bec3c9',
164+
}"
165+
:_focus="{
166+
boxShadow:
167+
'0 0 1px 2px rgba(88, 144, 255, .75), 0 1px 1px rgba(0, 0, 0, .15)",
168+
}"
169+
>
170+
Join Group
171+
</c-box>
172+
```
173+
## Props
174+
### Button Props
175+
| Name | Type | Description | Default |
176+
| :---: | :---: | :---: | :---: |
177+
|`colorScheme`|`"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"`| Theme color scheme |`"gray"`|
178+
|`iconSpacing`|`SystemProps["marginRight"]`| The space between the icon and the label | - |
179+
|`iconSpacing` | `SystemProps["marginRight"]` | The space between the button icon and label. | - |
180+
|`isActive` | `boolean` | If `true`, the button will be styled in its active state. | - |
181+
|`isDisabled` | `boolean` | If `true`, the button will be disabled. | - |
182+
|`isFullWidth` | `boolean` | If `true`, the button will take up the full width of its container.| - |
183+
|`isLoading` | `boolean` | If `true`, the button will show a spinner.| | - |
184+
|`leftIcon` | `string` | If added, the button will show an icon before the button's label. | - |
185+
|`loadingText` | `string` | The label to show in the button when `isLoading` is true If no text is passed, it only shows the spinner | - |
186+
|`rightIcon` | `string` | If added, the button will show an icon after the button's label. | - |
187+
|`size` | `"sm" | "md" | "lg" | "xs"` | |`"md"` |
188+
|`variant` | `"link" | "outline" | "solid" | "ghost" | "unstyled"` | | `"solid"` |
189+
190+
### Button Group Props
191+
192+
`CButtonGroup` composes the `CBox` component, so you can pass all its props.
193+
These are props specific to the `CButtonGroup` component:
194+
195+
| Name | Type | Description | Default |
196+
| :---: | :---: | :---: | :---: |
197+
| `colorScheme` | `"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | |"linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"` | Color Schemes for ButtonGroup are not implemented in the default theme. You can extend the theme to implement them. |-|
198+
| `isAttached` | `boolean` | If `true`, the borderRadius of button that are direct children will be altered to look flushed together |-|
199+
| `isDisabled` | `boolean` | If `true`, all wrapped button will be disabled | -|
200+
| `size` | `"sm" | "md" | "lg" | "xs"`| |-|
201+
| `spacing` | `SystemProps["marginRight"]` The spacing between the buttons | `'0.5rem'`|
202+
| `variant` | `"link" | "outline" | "solid" | "ghost" | "unstyled"` | |

‎docs/components/css-reset.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# CSS Reset
2+
3+
> TODO

0 commit comments

Comments
 (0)