Skip to content

Commit 598bb8a

Browse files
codebender828codebender828
authored
Merge branch 'develop' into fix/nuxt-module-regression
2 parents 5249f83 + b68daea commit 598bb8a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+175
-176
lines changed

‎website/pages/accessibility.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ All authored components are compliant with the WAI-ARIA standards for authored c
77

88
<carbon-ad />
99

10-
We've taken the time to write summarized description of the accessibility support for
10+
We've taken the time to write a summarized description of the accessibility support for
1111
all authored components in @chakra-ui/vue. We called this document an accessibility report
1212
and can be found in the `accessibility.md` file in the respective component's source directory.
1313

‎website/pages/accordion.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ In the example below, we change the icon rendered by the `CAccordionIcon` based
205205
```
206206

207207
### Accessibility
208-
Pressing **`space`** or **`enter`** when focus is on the `CAccordionHeader` will toggle (expand or collapse) the accordion item.
208+
Pressing **`space`** or **`enter`** when the focus is on the `CAccordionHeader` will toggle (expand or collapse) the accordion item.
209209

210210
# Props
211211
## `CAccordion`

‎website/pages/alert.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@ import SEO from '../components/SEO'
22

33
<SEO
44
title="Alert"
5-
description="Alerts are used to communicate a state that affects a system, feature or page."
5+
description="Alerts are used to communicate a state that affects a system, feature, or page."
66
/>
77

88
# Alert
99

10-
Alerts are used to communicate a state that affects a system, feature or page.
10+
Alerts are used to communicate a state that affects a system, feature, or page.
1111

1212
See `CAlert`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAlert/accessibility.md">accessibility report</a>
1313

1414
<carbon-ad />
1515

1616
## Import
1717

18-
Chakra UI Vue exports 4 Alert related components.
18+
Chakra UI Vue exports four Alert-related components.
1919

2020
- `CAlert`: The wrapper for alert components.
2121
- `CAlertIcon`: The visual icon for the alert that changes based on the `status` prop.
@@ -89,7 +89,7 @@ You can also use custom Alert icons by passing the name of the icon in the `name
8989

9090
### Variant
9191

92-
The `CAlert` component has 4 variant styles you can use. Pass the `variant` prop and use either
92+
The `CAlert` component has four variant styles you can use. Pass the `variant` prop and use either
9393
`subtle`, `solid`, `left-accent` or `top-accent`.
9494

9595
```vue live=true
@@ -115,8 +115,8 @@ The `CAlert` component has 4 variant styles you can use. Pass the `variant` prop
115115

116116
### Composition
117117

118-
`CAlert` ships with other smaller components to allow for flexibility and make it easy to
119-
create all kinds of layout. Here's an example of a custom alert style and layout.
118+
`CAlert` ships with other smaller components to allow for flexibility and make it possible to
119+
create all kinds of layouts. Here's an example of a custom alert style and layout.
120120

121121
```vue live=true
122122
<c-alert

‎website/pages/alertdialog.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ See `CAlertDialog`'s <a href="https://github.com/chakra-ui/chakra-ui-vue/blob/ma
1616

1717
## Import
1818

19-
Chakra UI exports 7 alert dialog related components.
19+
Chakra UI exports seven alert dialog-related components.
2020

2121
- `CAlertDialog`: provides context and state for the dialog.
2222
- `CAlertDialogHeader`: should contain the title announced by screen readers.
@@ -47,7 +47,7 @@ Vue ref to a focusable element or component in your alert dialog. The `leastDest
4747
a function that returns a ref.
4848

4949
Based on [WAI-ARIA specifications for alert dialogs](https://www.w3.org/TR/wai-aria-practices/#alertdialog)
50-
when the dialog opens, focus should be placed on the least destructive element
50+
when the dialog opens, the focus should be placed on the least destructive element
5151
to prevent users from accidentally confirming the destructive action.
5252

5353
```vue live=true
@@ -103,18 +103,18 @@ export default {
103103
## Accessibility
104104

105105
- `CAlertDialog` has role `alertdialog`, and `aria-modal` set to true.
106-
- When the dialog opens, focus is automatically set to the least destructive
106+
- When the dialog opens, the focus is automatically set to the least destructive
107107
element.
108108
- When the dialog opens, the content in the `CAlertDialogHeader` and
109-
`CAlertDialogBody` are announced by screen readers via `aria-labelledby` and
109+
`CAlertDialogBody` is announced by screen readers via `aria-labelledby` and
110110
`aria-describedby` attributes.
111111
- Clicking on the overlay closes the `CAlertDialog`.
112112
- Pressing <kbd>esc</kbd> closes the dialog.
113113

114114

115115
## Props
116116

117-
AlertDialog and it's components composes the `CModal` component, the only
117+
AlertDialog and its components composes the `CModal` component, the only
118118
exception is that it requires a `leastDestructiveRef` which is similar to the
119119
`initialFocusRef` in `CModal`
120120

‎website/pages/auto-import-components.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { CodeGroup, CodeTab } from '~/components/code'
1010
We know that it can be cumbersome to import every single Chakra component you want to use in your Vue templates. Chakra UI offers webpack plugin solution that allows
1111
you to directly consume Chakra UI Vue components without manually importing and globally registering all Chakra components.
1212

13-
This provides a better developer experience without sacrificing your applications bundle-size performance.
13+
This provides a better developer experience without sacrificing your application's bundle-size performance.
1414

1515
<carbon-ad />
1616

@@ -104,7 +104,7 @@ export default {
104104

105105

106106
## How it works
107-
`ChakraLoaderPlugin` will analyse your SFC template at during development and at build time, and scan it for all Chakra UI Vue components that you consume in it. The loader will then proceed to automatically import those components and register them while preserving treeshaking.
107+
`ChakraLoaderPlugin` will analyse your SFC template during development and at build time, and scan it for all Chakra UI Vue components that you consume in it. The loader will then proceed to automatically import those components and register them while preserving treeshaking.
108108

109109
For example, consider the component below, `Component.vue` which uses Chakra's `CBox` and `CButton` components.
110110
```vue

‎website/pages/avatar.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The `CAvatar` component is used to visually represent a user by displaying their
1313

1414
## Import
1515

16-
Chakra UI Vue exports 3 Avatar related components.
16+
Chakra UI Vue exports three Avatar-related components.
1717

1818
- `CAvatar`: The image that represents the user.
1919
- `CAvatarBadge`: A widget that displays the status of a user on the bottom-right corner of the `CAvatar`.
@@ -131,7 +131,7 @@ component to do this
131131
| size | `2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | `md` | The size of the avatar |
132132
| showBorder | `boolean` | `false` | If `true`, the `CAvatar` will show a border around it. Best for a group of avatars |
133133
| name | `string` | | The name of the user in the avatar |
134-
| src | `string` | | The image url of the `CAvatar` |
134+
| src | `string` | | The image URL of the `CAvatar` |
135135

136136
> - `CAvatar` composes the `CBox` component. So it also accepts
137137
> all `CBox` props.

‎website/pages/badge.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ object.
4242

4343
### Badge Variants
4444

45-
Pass the `variant` prop and set to either `subtle`, `solid`, or `outline` to get a
45+
Pass the `variant` prop and set it to either `subtle`, `solid`, or `outline` to get a
4646
different style.
4747

4848
```vue live=true

‎website/pages/box.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import SEO from '../components/SEO'
1212

1313
<br />
1414

15-
**The `CBox` component is useful because it helps with 3 common use cases:**
15+
**The `CBox` component is useful because it helps with three common use cases:**
1616
- Creation of responsive layouts with ease.
1717
- Provides a shorthand way to pass styles via props (`bg` instead of `backgroundColor`).
1818
- Composition of new components by providing for overrides by using the `as` prop.
@@ -108,7 +108,7 @@ import { CBox } from '@chakra-ui/vue';
108108

109109
### `as` prop
110110

111-
You can use the `as` prop to change the element render, just like the `tag` prop on Vue's global dynamic component.
111+
You can use the `as` prop to change the element render, like the `tag` prop on Vue's global dynamic component.
112112

113113
```vue live=true
114114
<c-box as="button" rounded="md" bg="tomato" color="white" px="4" h="8">

‎website/pages/breadcrumb.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import SEO from '../components/SEO'
22

33
<SEO
44
title="Breadcrumb"
5-
description="Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products."
5+
description="Breadcrumbs, or breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products."
66
/>
77

88

99
# Breadcrumb
1010

11-
Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate
11+
Breadcrumbs, or breadcrumb navigation, can help to enhance how users navigate
1212
to previous page levels of a website, especially if that website has many pages
1313
or products.
1414

@@ -19,11 +19,11 @@ See `CBreadcrumb`'s [accessibility report](https://github.com/chakra-ui/chakra-u
1919
<carbon-ad />
2020

2121
## Import
22-
Chakra UI exports 4 Breadcrumb related components:
22+
Chakra UI exports four Breadcrumb related components:
2323

2424
- `CBreadcrumb`: The parent container for breadcrumbs.
2525
- `CBreadcrumbItem`: Individual breadcrumb element containing a link and a divider.
26-
- `CBreadcrumbLink`: The breadcrumb link, obviously.
26+
- `CBreadcrumbLink`: The breadcrumb link.
2727
- `CBreadcrumbSeparator`: The visual separator between each breadcrumb
2828

2929
<br />
@@ -133,7 +133,7 @@ breadcrumbs.
133133
To use the `CBreadcrumb` with a routing Library like [Vue Router](https://router.vuejs.org),
134134
all you need to do is to pass the `as` prop to the `CBreadcrumbLink` component.
135135

136-
It'll replace the rendered `a` tag with with `router-link` or `nuxt-link`.
136+
It will replace the rendered `a` tag with `router-link` or `nuxt-link`.
137137

138138
```vue live=true
139139
<c-breadcrumb separator="›">
@@ -154,7 +154,7 @@ It'll replace the rendered `a` tag with with `router-link` or `nuxt-link`.
154154
- The `CBreadcrumb` `nav` has `aria-label` set to `breadcrumb`.
155155
- The `CBreadcrumbItem` with `isCurrentPage` prop adds the `aria-current=page` to
156156
the `CBreadcrumbLink`.
157-
- The separator has `role` set to `presentation` to denote that its for
157+
- The separator has `role` set to `presentation` to denote that it's for
158158
presentation purposes.
159159

160160

‎website/pages/button.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ You can add left and right icons to the Button component. See how to [add icons]
8787

8888
### Button loading state
8989

90-
Pass `isLoading` prop to the Button component to show it's loading state. You can optionally pass `loadingText` prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.
90+
Pass `isLoading` prop to the Button component to show its loading state. You can optionally pass `loadingText` prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.
9191

9292
```vue live=true
9393
<c-button-group :spacing="4">
@@ -108,7 +108,7 @@ Pass `isLoading` prop to the Button component to show it's loading state. You ca
108108
### Accessibility
109109

110110
- `CButton` has `role` button.
111-
- When `CButton` has focus, `space` and `enter` activates it.
111+
- When `CButton` has focus, `space` and `enter` activate it.
112112

113113
### Composition
114114

@@ -125,7 +125,7 @@ Pass `isLoading` prop to the Button component to show it's loading state. You ca
125125

126126
### Custom Button
127127

128-
In event you need to make your own custom button, you can leverage the `PseudoBox` component. It provides the `hover`, `focus`, `active` and `disabled` style props to style the button.
128+
In the event you need to make your own custom button, you can leverage the `PseudoBox` component. It provides the `hover`, `focus`, `active` and `disabled` style props to style the button.
129129

130130
```vue live=true
131131
<c-pseudo-box
@@ -149,7 +149,7 @@ In event you need to make your own custom button, you can leverage the `PseudoBo
149149

150150
## Props
151151

152-
The Button composes the `CPseudoBox` component so you can pass props for `CPseudoBox`. These are props related to the Button component.
152+
The button composes the `CPseudoBox` component so you can pass props for `CPseudoBox`. These are props related to the Button component.
153153

154154
| Name | Type | Default | Description |
155155
| --------------------- | ------------------------------------------------| --------| ------------------------------------------------------------------------------------------------------- |

0 commit comments

Comments
 (0)