Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ee35d9d

Browse files
segunadebayosegunadebayo
committed
Merge branch 'master' of github.com:chakra-ui/chakra-ui
2 parents 182ae9b + 1627fb1 commit ee35d9d

File tree

8 files changed

+42
-22
lines changed

8 files changed

+42
-22
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ To start using the components, please follow these steps:
106106
to remove all browser styling.
107107

108108
```jsx
109-
import { ThemeProvider, CSSReset } from "@chakra-ui/core".
109+
import { ThemeProvider, CSSReset } from "@chakra-ui/core"
110110

111111
// Do this at the root of your application
112112
const App = ({ children }) => (

‎packages/chakra-ui-docs/components/DocsHeader.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { DiGithubBadge } from "react-icons/di";
1515
import Logo from "./Logo";
1616
import MobileNav from "./MobileNav";
1717
import SponsorButton from "./SponsorButton";
18+
import { StorybookIcon } from "./Storybook-icon";
1819

1920
const styles = css`
2021
.algolia-autocomplete {
@@ -86,6 +87,24 @@ const ThemeSwitch = props => (
8687
/>
8788
);
8889

90+
export const StorybookLink = props => (
91+
<PseudoBox
92+
as="a"
93+
href="https://chakra-ui.netlify.com"
94+
rel="noopener noreferrer"
95+
target="_blank"
96+
size="32px"
97+
display="flex"
98+
alignItems="center"
99+
justifyContent="center"
100+
borderRadius="md"
101+
isExternal
102+
{...props}
103+
>
104+
<Box as={StorybookIcon} size="6" color="current" />
105+
</PseudoBox>
106+
);
107+
89108
const DocsHeader = props => {
90109
const { colorMode, toggleColorMode } = useColorMode();
91110
const bg = { light: "white", dark: "gray.800" };
@@ -104,6 +123,7 @@ const DocsHeader = props => {
104123
>
105124
<SponsorButton />
106125
<GithubLink />
126+
<StorybookLink ml="3" />
107127
<ThemeSwitch
108128
aria-label={`Switch to ${
109129
colorMode === "light" ? "dark" : "light"

‎packages/chakra-ui-docs/components/Header.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,11 @@ import Logo from "./Logo";
1212
import GitHubButton from "./GitHubButton";
1313
import { Container } from "../pages";
1414
import { StorybookIcon } from "./Storybook-icon";
15-
import { Header as HeaderContainer, GithubLink } from "./DocsHeader";
15+
import {
16+
Header as HeaderContainer,
17+
GithubLink,
18+
StorybookLink,
19+
} from "./DocsHeader";
1620
import SponsorButton from "./SponsorButton";
1721

1822
const Header = props => {
@@ -33,21 +37,17 @@ const Header = props => {
3337
<GitHubButton />
3438
</Box>
3539
</Box>
36-
<Flex align="center" color="gray.500">
40+
<Flex
41+
flex={{ sm: "1", md: "none" }}
42+
ml={5}
43+
align="center"
44+
color="gray.500"
45+
justify="flex-end"
46+
>
3747
<SponsorButton mr="4" />
3848
<Stack align="center" isInline spacing="3">
3949
<GithubLink />
40-
<Link
41-
size="32px"
42-
display="flex"
43-
alignItems="center"
44-
justifyContent="center"
45-
borderRadius="md"
46-
isExternal
47-
href="https://chakra-ui.netlify.com"
48-
>
49-
<Box as={StorybookIcon} size="6" color="current" />
50-
</Link>
50+
<StorybookLink />
5151
</Stack>
5252
<IconButton
5353
aria-label={`Switch to ${

‎packages/chakra-ui-docs/pages/editable.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ props. Here are the custom props:
103103
| onCancel | `string` | | Callback invoked when user cancels input with the `Esc` key. It provides the last confirmed value as argument. |
104104
| onSubmit | `string` | | Callback invoked when user confirms value with `enter` key or by blurring the input. |
105105
| onEdit | `string` | | Callback invoked once the user enters edit mode. |
106-
| isPreviewFocusable | `boolean` | `true` | If `true`, the read only view, has a `tabIndex` set to `0` so it can recieve focus via the keyboard or click. |
106+
| isPreviewFocusable | `boolean` | `true` | If `true`, the read only view, has a `tabIndex` set to `0` so it can receive focus via the keyboard or click. |
107107
| startWithEditView | `boolean` | | If `true`, the Editable will start with edit mode by default. |
108108
| submitOnBlur | `boolean` | `true` | If `true`, it'll update the value onBlur and turn off the edit mode. |
109109
| selectAllOnFocus | `boolean` | `true` | If `true`, the input's text will be highlighted on focus. |

‎packages/chakra-ui-docs/pages/principles.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Our goal is to design simple, composable components that cater to real life UI
1010
design problems. In order to do that, we developed a set of principles that help
1111
us always be on that path.
1212

13-
- **Style Props:** All component styles can be overriden or extended via style
13+
- **Style Props:** All component styles can be overridden or extended via style
1414
props to reduce the use of `css` prop or `styled()`. Compose new components
1515
from `Box` or `PseudoBox`.
1616

@@ -31,5 +31,5 @@ us always be on that path.
3131

3232
- **Naming Props:** We all know naming is the hardest thing in this industry.
3333
Generally, ensure a prop name is indicative of what it does. Boolean props
34-
should be named using auxilliary verbs such as `does`, `has`, `is` and
34+
should be named using auxiliary verbs such as `does`, `has`, `is` and
3535
`should`. For example, `Button` uses `isDisabled`, `isLoading`, etc.

‎packages/chakra-ui-docs/pages/tabs.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ function Example() {
212212
}
213213
```
214214

215-
### Make a tab initally active
215+
### Make a tab initially active
216216

217217
If you want a tab to be initially active, simply pass the `defaultIndex` prop
218218
and set it to the index of that tab.
@@ -277,7 +277,7 @@ arrow keys to change tabs, the tab is activated and focused.
277277
> keyboard and screen reader users.
278278
279279
In this scenario, you should use a manually activated tab, it moves focus
280-
without activating the tabs. With focus on a specifc tab, users can activate a
280+
without activating the tabs. With focus on a specific tab, users can activate a
281281
tab by pressing <kbd>Space</kbd> or <kbd>Enter</kbd>.
282282

283283
```jsx
@@ -461,7 +461,7 @@ Tabs composes `Box` so you call pass all `Box` related props.
461461
| `onChange` | `(index: number) => void` | | The callback to update the active tab index. |
462462
| `index` | `number` | | The controlled index of the tabs. |
463463
| `defaultIndex` | `number` | | The index of the initial active tab. |
464-
| `isManual` | `boolean` | | If `true`, keyboard navigation changes focus between tabs but doens't activate it. User will have to press `Enter` to active it |
464+
| `isManual` | `boolean` | | If `true`, keyboard navigation changes focus between tabs but doesn't activate it. User will have to press `Enter` to active it |
465465
| `children` | `React.ReactNode` | | The children of the switch. |
466466
| `variant` | `line`,`enclosed`,`enclosed-colored`, `soft-rounded`, `solid-rounded`, `unstyled` | `line` | The visual style of the tab. |
467467
| `variantColor` | `string` | | The primary color to use for the selected variant. Use a color key in `theme.colors` |

‎packages/chakra-ui/src/Button/index.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export interface IButton {
3535
* The label to show in the button when `isLoading` is true
3636
* If no text is passed, it only shows the spinner
3737
*/
38-
loadingText?: string;
38+
loadingText?: React.ReactNode;
3939
/**
4040
* If `true`, the button will take up the full width of its container.
4141
*/

‎packages/chakra-ui/src/FormControl/examples.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ stories.add("with helper text", () => (
3636
<FormLabel htmlFor="lname">Last name</FormLabel>
3737
<Input id="lname" aria-describedby="lname-help" placeholder="Last name" />
3838
<FormHelperText id="lname-help">
39-
Ensure it's up to 7 charaters
39+
Ensure it's up to 7 characters
4040
</FormHelperText>
4141
</FormControl>
4242
));

0 commit comments

Comments
 (0)