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

Commit 160e85b

Browse files
segunadebayosegunadebayo
committed
fix: table of content
1 parent 4fcf170 commit 160e85b

File tree

9 files changed

+51
-40
lines changed

9 files changed

+51
-40
lines changed

‎.prettierrc

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
22
"bracketSpacing": true,
3-
"jsxSingleQuote": true,
3+
"jsxSingleQuote": false,
44
"printWidth": 80,
55
"proseWrap": "always",
6-
"semi": true,
7-
"singleQuote": true,
6+
"semi": false,
7+
"singleQuote": false,
88
"tabWidth": 2,
99
"trailingComma": "all"
1010
}

‎pages/docs/data-display/kbd.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@
22
title: Keyboard Key
33
package: "@chakra-ui/layout"
44
image: "components/kbd.svg"
5+
description: "The keyboard key component exists to show which key or combination of keys
6+
performs a given action"
57
---
68

7-
The `keyboard key` component exists to show which key or combination of keys
9+
The keyboard key component exists to show which key or combination of keys
810
performs a given action.
911

1012
The action itself should be further explained in accompanying content. It

‎pages/docs/form/range-slider.mdx

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
---
22
title: Range Slider
3-
package: "@chakra-ui/slider"
3+
package: '@chakra-ui/slider'
44
version: 1.6.9
5-
image: "components/range-slider.svg"
5+
image: 'components/range-slider.svg'
6+
description:
7+
'The RangeSlider is a multi thumb slider used to select a range of related
8+
values.'
69
---
710

811
The `RangeSlider` is a multi thumb slider used to select a range of related
912
values. A common use-case of this component is a price range picker that allows
1013
a user to set the minimum and maximum price.
1114

1215
<ComponentLinks
13-
theme={{ componentName: "slider" }}
14-
github={{ package: "slider" }}
15-
npm={{ package: "@chakra-ui/slider" }}
16+
theme={{ componentName: 'slider' }}
17+
github={{ package: 'slider' }}
18+
npm={{ package: '@chakra-ui/slider' }}
1619
/>
1720

1821
<carbon-ad></carbon-ad>
@@ -33,7 +36,7 @@ import {
3336
RangeSliderTrack,
3437
RangeSliderFilledTrack,
3538
RangeSliderThumb,
36-
} from "@chakra-ui/react"
39+
} from '@chakra-ui/react';
3740
```
3841

3942
## Usage
@@ -42,7 +45,7 @@ import {
4245
> provide an accessible label for the Slider.
4346
4447
```jsx
45-
<RangeSlider aria-label={["min", "max"]} defaultValue={[10, 30]}>
48+
<RangeSlider aria-label={['min', 'max']} defaultValue={[10, 30]}>
4649
<RangeSliderTrack>
4750
<RangeSliderFilledTrack />
4851
</RangeSliderTrack>
@@ -58,8 +61,8 @@ You can override the color scheme of the slider to any color key specified in
5861

5962
```jsx
6063
<RangeSlider
61-
aria-label={["min", "max"]}
62-
colorScheme="pink"
64+
aria-label={['min', 'max']}
65+
colorScheme='pink'
6366
defaultValue={[10, 30]}
6467
>
6568
<RangeSliderTrack>
@@ -77,11 +80,11 @@ it vertical, pass the `orientation` prop and set its value to `vertical`.
7780

7881
```jsx
7982
<RangeSlider
80-
aria-label={["min", "max"]}
81-
colorScheme="pink"
83+
aria-label={['min', 'max']}
84+
colorScheme='pink'
8285
defaultValue={[10, 30]}
83-
orientation="vertical"
84-
minH="32"
86+
orientation='vertical'
87+
minH='32'
8588
>
8689
<RangeSliderTrack>
8790
<RangeSliderFilledTrack />
@@ -97,15 +100,15 @@ it vertical, pass the `orientation` prop and set its value to `vertical`.
97100
customize its styles.
98101

99102
```jsx
100-
<RangeSlider aria-label={["min", "max"]} defaultValue={[30, 80]}>
101-
<RangeSliderTrack bg="red.100">
102-
<RangeSliderFilledTrack bg="tomato" />
103+
<RangeSlider aria-label={['min', 'max']} defaultValue={[30, 80]}>
104+
<RangeSliderTrack bg='red.100'>
105+
<RangeSliderFilledTrack bg='tomato' />
103106
</RangeSliderTrack>
104107
<RangeSliderThumb boxSize={6} index={0}>
105-
<Box color="tomato" as={MdGraphicEq} />
108+
<Box color='tomato' as={MdGraphicEq} />
106109
</RangeSliderThumb>
107110
<RangeSliderThumb boxSize={6} index={1}>
108-
<Box color="tomato" as={MdGraphicEq} />
111+
<Box color='tomato' as={MdGraphicEq} />
109112
</RangeSliderThumb>
110113
</RangeSlider>
111114
```
@@ -117,8 +120,8 @@ accomplished using the `step` prop.
117120

118121
```jsx
119122
<RangeSlider defaultValue={[120, 240]} min={0} max={300} step={30}>
120-
<RangeSliderTrack bg="red.100">
121-
<RangeSliderFilledTrack bg="tomato" />
123+
<RangeSliderTrack bg='red.100'>
124+
<RangeSliderFilledTrack bg='tomato' />
122125
</RangeSliderTrack>
123126
<RangeSliderThumb boxSize={6} index={0} />
124127
<RangeSliderThumb boxSize={6} index={1} />
@@ -133,7 +136,7 @@ interested in the final result after sliding is complete. You can use
133136

134137
```jsx live=false
135138
<RangeSlider
136-
aria-label={["min", "max"]}
139+
aria-label={['min', 'max']}
137140
onChangeEnd={(val) => console.log(val)}
138141
>
139142
<RangeSliderTrack>
@@ -157,7 +160,7 @@ The `RangeSlider` component wraps all its children in the
157160
[Box](/docs/layout/box) component, so you can pass all `Box` props to change its
158161
style.
159162

160-
<PropsTable of="RangeSlider" />
163+
<PropsTable of='RangeSlider' />
161164

162165
### RangeSliderThumb Props
163166

‎pages/docs/form/slider.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Slider
33
package: "@chakra-ui/slider"
44
image: "components/slider.svg"
5+
description: "The Slider is used to allow users to make selections from a range of values"
56
---
67

78
The `Slider` is used to allow users to make selections from a range of values.

‎pages/docs/form/switch.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Switch
33
package: "@chakra-ui/switch"
44
image: "components/switch.svg"
5+
description: "The Switch component is used as an alternative for the checkbox component."
56
---
67

78
The `Switch` component is used as an alternative for the

‎pages/docs/form/textarea.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
title: Textarea
33
package: "@chakra-ui/textarea"
44
image: "components/textarea.svg"
5+
description: "The Textarea component allows you to easily create multi-line text inputs"
56
---
67

78
The `Textarea` component allows you to easily create multi-line text inputs.

‎pages/docs/hooks/use-clipboard.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: useClipboard
33
package: "@chakra-ui/hooks"
4+
description:
5+
"useClipboard is a custom hook that handles copying content to clipboard."
46
---
57

68
`useClipboard` is a custom hook that handles copying content to clipboard.

‎pages/docs/media-and-icons/icon.mdx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Icon"
33
package: "@chakra-ui/icon"
44
image: "components/icon.svg"
5+
description: "Chakra provides a set of commonly used interface icons you can use in your
6+
project"
57
---
68

79
Chakra provides multiple ways to use icons in your project:
@@ -24,8 +26,8 @@ Chakra provides multiple ways to use icons in your project:
2426
## Using Chakra UI icons
2527

2628
Chakra provides a set of commonly used interface icons you can use in your
27-
project. To use these icons, install `@chakra-ui/icons`, import the icons you need
28-
and style them.
29+
project. To use these icons, install `@chakra-ui/icons`, import the icons you
30+
need and style them.
2931

3032
### Installation
3133

@@ -199,14 +201,14 @@ When `children` is not provided, the `Icon` component renders a fallback icon.
199201

200202
### `Icon` props
201203

202-
| Name | Type | Default | Description |
203-
| ----------- | --------------------- | -------------- | ----------------------------------------------------------------------------------- |
204-
| `viewBox` | `string` | `0 0 24 24` | The viewBox of the icon. |
205-
| `boxSize` | `string` | `1em` | The size (width and height) of the icon. |
206-
| `color` | `string` | `currentColor` | The color of the icon. |
204+
| Name | Type | Default | Description |
205+
| ----------- | --------------------- | -------------- | ------------------------------------------------------------------------------------ |
206+
| `viewBox` | `string` | `0 0 24 24` | The viewBox of the icon. |
207+
| `boxSize` | `string` | `1em` | The size (width and height) of the icon. |
208+
| `color` | `string` | `currentColor` | The color of the icon. |
207209
| `focusable` | `boolean` | `false` | Denotes that the icon is not an interactive element, and only used for presentation. |
208-
| `role` | `presentation`, `img` | `presentation` | The html role of the icon. |
209-
| `children` | `React.ReactNode` | | The Path or Group of the icon |
210+
| `role` | `presentation`, `img` | `presentation` | The html role of the icon. |
211+
| `children` | `React.ReactNode` | | The Path or Group of the icon |
210212

211213
## `createIcon` options
212214

‎pages/faqs/index.mdx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
2-
title: 'FAQ'
2+
title: "FAQ"
33
description:
4-
'Some of the most asked questions with their answers to help you get started
5-
with Chakra UI.'
6-
slug: '/faq'
4+
"Some of the most asked questions with their answers to help you get started
5+
with Chakra UI."
76
---
87

98
## Is there a Datepicker in Chakra UI?
109

1110
No, currently we don't provide a datepicker component. You can easily build your
12-
own custom Datepicker with Chakra UI and `react-datepicker` or `dayzed`.
11+
own custom Datepicker with Chakra UI and `react-datepicker` or `dayzed`.

0 commit comments

Comments
 (0)