wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-01 17:29:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding Spinner Component to UI and some corrections to the docs

Browse Source
This commit is contained in:
Belen Curcio
2018-08-17 09:06:00 -03:00
parent 6e1b9c99ac
commit d1e938112e
8 changed files with 151 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/FormField/FormField.mdx
+9 -23
View File
@@ -5,32 +5,18 @@ menu: UI Kit
import { Playground, PropsTable } from 'docz'
import FormField from './FormField'
import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
# Flex
# FormField
`FormField` is to be used with Form Components `flexbox`.
`FormField` is to be used with Form Components: `InputLabel`, `InputDescription`, `TextField`, `ValidationMessage`, etc.
FormField manages the gutters between inner elements. It's a form field wrapper of the `Flex` Component.
## Justify content
<Playground>
<FormField>
</FormField>
</Playground>
## Align items
<Playground>
<Flex alignItems="center" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled" size="small">Push Me</Button>
<Button variant="filled" size="large">Push Me</Button>
</Flex>
</Playground>
## Direction
<Playground>
<Flex direction="column" itemGutter>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
<Button variant="filled">Push Me</Button>
</Flex>
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
</Playground>
src/core/client/ui/components/InputDescription/InputDescription.mdx
+2 -4
View File
@@ -4,7 +4,7 @@ menu: UI Kit
---
import { Playground, PropsTable } from 'docz'
import { InputDescription } from '../core/client/ui/components'
import InputDescription from './InputDescription'
# Flex
@@ -12,7 +12,5 @@ import { InputDescription } from '../core/client/ui/components'
## Align items
<Playground>
<Flex alignItems="center" itemGutter>
<InputDescription>This is a description</Button>
</Flex>
<InputDescription>This is a description</InputDescription>
</Playground>
src/core/client/ui/components/Spinner/Spinner.css
+68
View File
@@ -0,0 +1,68 @@
.root {
display: block;
text-align: center;
}
.spinner {
animation: rotator 1.4s linear infinite;
}
@keyframes rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
.path {
stroke: var(--palette-primary-main);
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}
@keyframes colors {
0% {
stroke: var(--palette-primary-main);
}
100% {
stroke: var(--palette-primary-light);
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
@keyframes fullRotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Hack for IE and Edge as they don't support css animations on SVG elements. */
_:-ms-lang(x),
.path {
stroke-dasharray: 160;
}
_:-ms-lang(x),
.spinner {
animation: fullRotator 1.4s linear infinite;
}
src/core/client/ui/components/Spinner/Spinner.mdx
+15
View File
@@ -0,0 +1,15 @@
---
name: Spinner
menu: UI Kit
---
import { Playground } from "docz"
import Spinner from "./Spinner"
# Spinner
## Basic usage
<Playground>
<Spinner />
</Playground>
src/core/client/ui/components/Spinner/Spinner.tsx
+46
View File
@@ -0,0 +1,46 @@
import cn from "classnames";
import React, { StatelessComponent } from "react";
import { withStyles } from "talk-ui/hocs";
import * as styles from "./Spinner.css";
export interface SpinnerProps {
/**
* Convenient prop to override the root styling.
*/
className?: string;
/**
* Override or extend the styles applied to the component.
*/
classes: typeof styles;
}
const Spinner: StatelessComponent<SpinnerProps> = props => {
const { className, classes } = props;
const rootClassName = cn(classes.root, className);
return (
<div className={rootClassName}>
<svg
className={styles.spinner}
width="40px"
height="40px"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle
className={styles.path}
fill="none"
strokeWidth="6"
strokeLinecap="round"
cx="33"
cy="33"
r="30"
/>
</svg>
</div>
);
};
const enhanced = withStyles(styles)(Spinner);
export default enhanced;
src/core/client/ui/components/Spinner/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from "./Spinner";
src/core/client/ui/components/index.ts
+1
View File
@@ -16,3 +16,4 @@ export { default as ClickOutside } from "./ClickOutside";
export { default as Popup } from "./Popup";
export { default as FormField } from "./FormField";
export { default as InputDescription } from "./InputDescription";
export { default as Spinner } from "./Spinner";
src/docs/forms.mdx
+9 -10
View File
@@ -10,13 +10,13 @@ Let's build some forms! We will use the following compoenents `InputLabel`, `Typ
### Examples
import { Playground, PropsTable } from 'docz'
import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} from '../core/client/ui/components'
import { InputLabel, ValidationMessage, TextField, InputDescription, Flex, Button, FormField, Typography } from '../core/client/ui/components'
# InputLabel
## Simple Form
<Playground>
<Flex>
<Flex itemGutter direction="column">
<Typography variant="heading1">Sign up to join the conversation</Typography>
<FormField>
@@ -26,14 +26,13 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel>Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
</FormField>
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<InputDescription>Must be at least 8 characters</InputDescription>
<TextField/>
</FormField>
@@ -42,14 +41,14 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>
## Simple Form with error
<Playground>
<Flex>
<Flex itemGutter direction="column">
<Typography variant="heading1">Sign up to join the conversation</Typography>
<FormField>
@@ -59,7 +58,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel defaultValue="something.com" color="error" >Username</InputLabel>
<Typography>A unique identifier displayed on your comments. You may use “_” and “.”</Typography>
<InputDescription>A unique identifier displayed on your comments. You may use “_” and “.”</InputDescription>
<TextField/>
<ValidationMessage>Invalid characters. Try again.</ValidationMessage>
</FormField>
@@ -67,7 +66,7 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<FormField>
<InputLabel>Password</InputLabel>
<Typography>Must be at least 8 characters</Typography>
<InputDescription>Must be at least 8 characters</InputDescription>
<TextField/>
</FormField>
@@ -76,6 +75,6 @@ import { InputLabel, ValidationMessage, TextField, Typography, Flex, Button} fro
<TextField/>
</FormField>
<Button variant="filled" color="primary" size="large" >Sign up and join the conversation</Button>
<Button variant="filled" color="primary" size="large" fullWidth>Sign up and join the conversation</Button>
</Flex>
</Playground>