Skip to content
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.

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

refactor: Casing showcase examples #39 #40

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c8f9911
fix: change casing for props and components
carwack Jun 10, 2023
c683f9f
refactor: change name casing responsive styles
carwack Jun 11, 2023
66065e3
refactor: change name casing accordion
carwack Jun 11, 2023
5839c4e
refactor: change name casing alert
carwack Jun 11, 2023
843d124
refactor: change name casing avatar
carwack Jun 11, 2023
71e81e7
refactor: change name casing breadcrumb
carwack Jun 11, 2023
ecf07f4
refactor: change name casing button
carwack Jun 11, 2023
418df18
refactor: change name casing checkbox
carwack Jun 11, 2023
6f692e4
refactor: change name casing closebutton
carwack Jun 11, 2023
8f37abc
refactor: change name casing input
carwack Jun 11, 2023
7b63b0e
refactor: change name casing tag
carwack Jun 11, 2023
83622f6
fix: fix Cbox typo
carwack Jul 7, 2023
4116af8
refactor: change name casing accordion examples
carwack Jul 7, 2023
abc348c
refactor: change name casing examples alert
carwack Jul 8, 2023
db79841
refactor: change name casing avatar examples
carwack Jul 8, 2023
8adf3bf
refactor: change name casing breadcrumb examples
carwack Jul 8, 2023
4e15ad1
refactor: change name casing tag
carwack Jul 8, 2023
3272aab
refactor: change name casing checkbox examples
carwack Jul 8, 2023
aa91d4e
refactor: change name casing close button examples
carwack Jul 8, 2023
da40d6d
refactor: change name casing icon examples
carwack Jul 8, 2023
1fcec23
refactor: change name casing input examples
carwack Jul 8, 2023
969b341
refactor: change script position to above template
carwack Jul 8, 2023
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
Prev Previous commit
Next Next commit
refactor: change name casing button
  • Loading branch information
carwack committed Jun 11, 2023
commit ecf07f4ce228f786f4b851f7a5677a34130a4015
50 changes: 25 additions & 25 deletions content/4.components/button.md
Original file line number Diff line number Diff line change
@@ -43,10 +43,10 @@ Use the size prop to change the size of the button. You can set the value to `xs
::

```html
<c-button size="xs" mr="3" color-scheme="teal"> Button </c-button>
<c-button size="sm" mr="3" color-scheme="teal"> Button </c-button>
<c-button size="md" mr="3" color-scheme="teal"> Button </c-button>
<c-button size="lg" mr="3" color-scheme="teal"> Button </c-button>
<CButton size="xs" mr="3" color-scheme="teal"> Button </CButton>
<CButton size="sm" mr="3" color-scheme="teal"> Button </CButton>
<CButton size="md" mr="3" color-scheme="teal"> Button </CButton>
<CButton size="lg" mr="3" color-scheme="teal"> Button </CButton>
```

### Button Variants
@@ -59,11 +59,11 @@ You can change the button style to either `solid` `ghost` `outline` or `link` by
::

```html
<c-button mr="3" variant="luxury"> Button </c-button>
<c-button mr="3" variant="solid" color-scheme="teal"> Button </c-button>
<c-button mr="3" variant="outline" color-scheme="teal"> Button </c-button>
<c-button mr="3" variant="ghost" color-scheme="teal"> Button </c-button>
<c-button mr="3" variant="link" color-scheme="teal"> Button </c-button>
<CButton mr="3" variant="luxury"> Button </CButton>
<CButton mr="3" variant="solid" color-scheme="teal"> Button </CButton>
<CButton mr="3" variant="outline" color-scheme="teal"> Button </CButton>
<CButton mr="3" variant="ghost" color-scheme="teal"> Button </CButton>
<CButton mr="3" variant="link" color-scheme="teal"> Button </CButton>
```

### Button with Icon
@@ -76,12 +76,12 @@ You can change the button style to either `solid` `ghost` `outline` or `link` by
::

```html
<c-button mr="3" left-icon="email" variant="solid" color-scheme="teal">
<CButton mr="3" left-icon="email" variant="solid" color-scheme="teal">
Base button
</c-button>
<c-button mr="3" right-icon="star" variant="outline" color-scheme="teal">
</CButton>
<CButton mr="3" right-icon="star" variant="outline" color-scheme="teal">
Base button
</c-button>
</CButton>
```

### Button Loading State
@@ -94,7 +94,7 @@ You can set the loading props on a button when it is loading,to indicate it is c
::

```html
<c-button
<CButton
mr="3"
:is-loading="isLoading"
color-scheme="teal"
@@ -105,8 +105,8 @@ You can set the loading props on a button when it is loading,to indicate it is c
@click="doTask"
>
Click me
</c-button>
<c-button
</CButton>
<CButton
mr="3"
:is-loading="isLoading"
@click="doTask"
@@ -115,7 +115,7 @@ You can set the loading props on a button when it is loading,to indicate it is c
font-size="sm"
>
Click me
</c-button>
</CButton>
```

### Button Group
@@ -132,10 +132,10 @@ You can use the `CButtonGroup` component to group buttons. When you use the Butt
::

```html
<c-button-group variant="outline">
<c-button color-scheme="blue">Proceed</c-button>
<c-button>Cancel</c-button>
</c-button-group>
<CButtonGroup variant="outline">
<CButton color-scheme="blue">Proceed</CButton>
<CButton>Cancel</CButton>
</CButtonGroup>
```

## Accessibility
@@ -153,7 +153,7 @@ All props you pass `variant`, `colorScheme`, `size` etc are converted to style p
::

```html
<c-button
<CButton
size="md"
height="48px"
width="200px"
@@ -163,7 +163,7 @@ All props you pass `variant`, `colorScheme`, `size` etc are converted to style p
variant="outline"
>
Button
</c-button>
</CButton>
```

## Customizable Button
@@ -176,7 +176,7 @@ You can pass-in other props to make fully customizable buttons, you can do this
::

```html
<c-button
<CButton
border="1px solid rgba(47, 43, 67, 0.1)"
border-radius="12px"
mr="3"
@@ -186,5 +186,5 @@ You can pass-in other props to make fully customizable buttons, you can do this
size="lg"
>
Button
</c-button>
</CButton>
```