wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-26 13:37:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Use HorizontalGutter component, simplify Flex

Browse Source
This commit is contained in:
Chi Vinh Le
2018-08-24 19:11:56 +02:00
parent 10df1de98e
commit 3dc3e1435a
28 changed files with 286 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/components/Comment/Username.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const Username: StatelessComponent<UsernameProps> = props => {
<Typography
variant={matches ? "heading2" : "heading3"}
className={styles.root}
component="span"
container="span"
>
{props.children}
</Typography>
src/core/client/stream/components/PermalinkView.tsx
+2 -6
View File
@@ -1,7 +1,7 @@
import { Localized } from "fluent-react/compat";
import React, { MouseEvent, StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
import { Button, Typography } from "talk-ui/components";
import CommentContainer from "../containers/CommentContainer";
import * as styles from "./PermalinkView.css";
@@ -41,11 +41,7 @@ const PermalinkView: StatelessComponent<PermalinkViewProps> = ({
<Typography>Comment not found</Typography>
</Localized>
)}
{comment && (
<Flex direction="column">
<CommentContainer data={comment} />
</Flex>
)}
{comment && <CommentContainer data={comment} />}
</div>
);
};
src/core/client/stream/components/PostCommentForm.css
-2
View File
@@ -1,6 +1,5 @@
.root {
width: 100%;
padding-bottom: var(--spacing-unit);
}
.textarea {
@@ -9,7 +8,6 @@
height: 150px;
width: 100%;
box-sizing: border-box;
margin-bottom: var(--spacing-unit);
padding: var(--spacing-unit);
border-radius: var(--round-corners);
resize: vertical;
src/core/client/stream/components/PostCommentForm.tsx
+39 -33
View File
@@ -3,7 +3,7 @@ import React, { StatelessComponent } from "react";
import { Field, Form } from "react-final-form";
import { OnSubmit } from "talk-framework/lib/form";
import { required } from "talk-framework/lib/validation";
import { Button, Typography } from "talk-ui/components";
import { Button, Flex, HorizontalGutter, Typography } from "talk-ui/components";
import * as styles from "./PostCommentForm.css";
import PoweredBy from "./PoweredBy";
@@ -19,38 +19,44 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
<Form onSubmit={props.onSubmit}>
{({ handleSubmit, submitting }) => (
<form autoComplete="off" onSubmit={handleSubmit} className={styles.root}>
<Field name="body" validate={required}>
{({ input, meta }) => (
<div>
<textarea
className={styles.textarea}
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Post a comment"
/>
{meta.touched &&
(meta.error || meta.submitError) && (
<Typography align="right" color="error" gutterBottom>
{meta.error || meta.submitError}
</Typography>
)}
</div>
)}
</Field>
<div className={styles.postButtonContainer}>
<PoweredBy />
<Localized id="comments-postCommentForm-submit">
<Button
color="primary"
variant="filled"
disabled={submitting}
type="submit"
>
Submit
</Button>
</Localized>
</div>
<HorizontalGutter size="half">
<Field name="body" validate={required}>
{({ input, meta }) => (
<div style={{ width: "100%" }}>
<textarea
className={styles.textarea}
name={input.name}
onChange={input.onChange}
value={input.value}
placeholder="Post a comment"
/>
{meta.touched &&
(meta.error || meta.submitError) && (
<Typography align="right" color="error" gutterBottom>
{meta.error || meta.submitError}
</Typography>
)}
</div>
)}
</Field>
<Flex
direction="row"
justifyContent="space-between"
alignItems="flex-start"
>
<PoweredBy />
<Localized id="comments-postCommentForm-submit">
<Button
color="primary"
variant="filled"
disabled={submitting}
type="submit"
>
Submit
</Button>
</Localized>
</Flex>
</HorizontalGutter>
</form>
)}
</Form>
src/core/client/stream/components/PoweredBy.tsx
+9 -5
View File
@@ -1,12 +1,16 @@
import React, { StatelessComponent } from "react";
import { Flex, Typography } from "talk-ui/components";
import { Typography } from "talk-ui/components";
const PoweredBy: StatelessComponent = () => {
return (
<Flex itemGutter="half">
<Typography variant="bodyCopy">Powered by</Typography>
<Typography variant="heading4">The Coral Project</Typography>
</Flex>
<div>
<Typography variant="inputDescription" container="span">
Powered by
</Typography>{" "}
<Typography variant="heading4" container="span">
The Coral Project
</Typography>
</div>
);
};
src/core/client/stream/components/ReplyList.tsx
+3 -5
View File
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
import * as React from "react";
import { StatelessComponent } from "react";
import { Button, Flex } from "talk-ui/components";
import { Button, HorizontalGutter } from "talk-ui/components";
import CommentContainer from "../containers/CommentContainer";
import Indent from "./Indent";
@@ -18,11 +18,9 @@ export interface ReplyListProps {
const ReplyList: StatelessComponent<ReplyListProps> = props => {
return (
<Indent>
<Flex
direction="column"
<HorizontalGutter
id={`talk-comments-replyList-log--${props.commentID}`}
role="log"
itemGutter
>
{props.comments.map(comment => (
<CommentContainer key={comment.id} data={comment} />
@@ -41,7 +39,7 @@ const ReplyList: StatelessComponent<ReplyListProps> = props => {
</Button>
</Localized>
)}
</Flex>
</HorizontalGutter>
</Indent>
);
};
src/core/client/stream/components/Stream.tsx
+11 -11
View File
@@ -2,7 +2,7 @@ import { Localized } from "fluent-react/compat";
import * as React from "react";
import { StatelessComponent } from "react";
import { Button, Flex } from "talk-ui/components";
import { Button, HorizontalGutter } from "talk-ui/components";
import CommentContainer from "../containers/CommentContainer";
import PostCommentFormContainer from "../containers/PostCommentFormContainer";
@@ -22,21 +22,21 @@ export interface StreamProps {
const Stream: StatelessComponent<StreamProps> = props => {
return (
<Flex className={styles.root} direction="column" itemGutter>
<UserBoxContainer user={props.user} />
<PostCommentFormContainer assetID={props.assetID} />
<Flex
direction="column"
<HorizontalGutter className={styles.root}>
<HorizontalGutter size="half">
<UserBoxContainer user={props.user} />
<PostCommentFormContainer assetID={props.assetID} />
</HorizontalGutter>
<HorizontalGutter
id="talk-comments-stream-log"
role="log"
aria-live="polite"
itemGutter
>
{props.comments.map(comment => (
<Flex direction="column" key={comment.id} itemGutter>
<HorizontalGutter key={comment.id}>
<CommentContainer data={comment} />
<ReplyListContainer comment={comment} />
</Flex>
</HorizontalGutter>
))}
{props.hasMore && (
<Localized id="comments-stream-loadMore">
@@ -52,8 +52,8 @@ const Stream: StatelessComponent<StreamProps> = props => {
</Button>
</Localized>
)}
</Flex>
</Flex>
</HorizontalGutter>
</HorizontalGutter>
);
};
src/core/client/stream/components/UserBoxAuthenticated.tsx
+19 -28
View File
@@ -3,9 +3,6 @@ import React, { StatelessComponent } from "react";
import { Button, Flex, Typography } from "talk-ui/components";
import MatchMedia from "talk-ui/components/MatchMedia";
import * as styles from "./UserBoxAuthenticated.css";
export interface UserBoxAuthenticatedProps {
onSignOut: () => void;
username: string;
@@ -15,36 +12,30 @@ const UserBoxAuthenticated: StatelessComponent<
UserBoxAuthenticatedProps
> = props => {
return (
<Flex itemGutter="half">
<Flex itemGutter="half" className={styles.child}>
<MatchMedia gteWidth="sm">
<Localized id="comments-userBoxAuthenticated-signedInAs">
<Typography variant="bodyCopy" component="span">
Signed in as
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
{props.username}
</Typography>
</MatchMedia>
</Flex>
<Flex itemGutter="half" className={styles.child}>
<Localized id="comments-userBoxAuthenticated-notYou">
<Typography variant="bodyCopy" component="span">
Not you?
</Typography>
</Localized>
<Localized id="comments-userBoxAuthenticated-signOut">
<Flex itemGutter="half" wrap>
<Localized
id="comments-userBoxAuthenticated-signedInAs"
username={<Typography variant="bodyCopyBold" container="span" />}
>
<Typography variant="bodyCopy" container="div">
{"Signed in as <username>Username</username>."}
</Typography>
</Localized>
<Localized
id="comments-userBoxAuthenticated-notYou"
button={
<Button
color="primary"
size="small"
variant="underlined"
onClick={props.onSignOut}
>
Sign Out
</Button>
</Localized>
</Flex>
/>
}
>
<Typography variant="bodyCopy" container={<Flex inline wrap />}>
{"Not you? <button>Sign Out</button>"}
</Typography>
</Localized>
</Flex>
);
};
src/core/client/stream/components/UserBoxUnauthenticated.tsx
+2 -2
View File
@@ -21,12 +21,12 @@ const UserBoxUnauthenticated: StatelessComponent<
<Typography
className={styles.joinText}
variant="bodyCopyBold"
component="span"
container="span"
>
Join the conversation
</Typography>
</Localized>
<Typography variant="bodyCopyBold" component="span">
<Typography variant="bodyCopyBold" container="span">
|
</Typography>
</MatchMedia>
src/core/client/stream/index.tsx
+1 -3
View File
@@ -40,9 +40,7 @@ async function main() {
});
const Index: StatelessComponent = () => (
<TalkContextProvider
value={{ ...context, mediaQueryValues: { width: 640 } }}
>
<TalkContextProvider value={context}>
<AppContainer />
</TalkContextProvider>
);
src/core/client/ui/components/Button/Button.mdx
+4 -4
View File
@@ -13,7 +13,7 @@ import Flex from '../Flex'
## Regular Button
<Playground>
<Flex itemGutter>
<Flex itemGutter wrap>
<Button>Push Me</Button>
<Button size="small">Push Me</Button>
<Button size="large">Push Me</Button>
@@ -29,7 +29,7 @@ import Flex from '../Flex'
## Filled Button
<Playground>
<Flex itemGutter>
<Flex itemGutter wrap>
<Button variant="filled">Push Me</Button>
<Button variant="filled" size="small">Push Me</Button>
<Button variant="filled" size="large">Push Me</Button>
@@ -45,7 +45,7 @@ import Flex from '../Flex'
## Outlined Button
<Playground>
<Flex itemGutter>
<Flex itemGutter wrap>
<Button variant="outlined">Push Me</Button>
<Button variant="outlined" size="small">Push Me</Button>
<Button variant="outlined" size="large">Push Me</Button>
@@ -61,7 +61,7 @@ import Flex from '../Flex'
## Ghost Button
<Playground>
<Flex itemGutter>
<Flex itemGutter wrap>
<Button variant="ghost">Push Me</Button>
<Button variant="ghost" size="small">Push Me</Button>
<Button variant="ghost" size="large">Push Me</Button>
src/core/client/ui/components/CallOut/CallOut.mdx
+3 -3
View File
@@ -5,19 +5,19 @@ menu: UI Kit
import { Playground, PropsTable } from 'docz'
import CallOut from './CallOut'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# CallOut
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<CallOut>This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
<CallOut color="primary">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
<CallOut color="error">This is a component for a callout. Any text that you are wanting to draw attention to such as community guidelines, announcements, etc. can be placed in something like a callout box. The color of the callout box can be customized according your own needs.</CallOut>
<CallOut color="error">The email address or password you entered is incorrect. Try again</CallOut>
<CallOut color="error" fullWidth>The email address or password you entered is incorrect. Try again</CallOut>
</Flex>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/Flex/Flex.css
+4 -2
View File
@@ -1,10 +1,12 @@
.root {
width: 100%;
}
.flex {
display: flex;
width: 100%;
}
.inline {
width: auto;
}
.halfItemGutter {
src/core/client/ui/components/Flex/Flex.tsx
+29 -8
View File
@@ -28,6 +28,7 @@ interface InnerProps {
itemGutter?: boolean | "half" | "double";
className?: string;
wrap?: boolean | "reverse";
inline?: boolean;
/** Internal: Forwarded Ref */
forwardRef?: Ref<HTMLDivElement>;
@@ -44,6 +45,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
wrap,
forwardRef,
children,
inline,
...rest
} = props;
@@ -77,21 +79,40 @@ const Flex: StatelessComponent<InnerProps> = props => {
classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
}
const rootClassNames: string = cn(classes.root, className);
const rootClassNames: string = cn(classes.root, className, {
[classes.inline]: inline === true,
});
const flexClassNames: string = cn(classes.flex, classObject);
// The first div is required to support nested `Flex` components with itemGutters.
// text nodes can't be modified with css, so replace them with spans.
// Readd spaces at the beginning or end of text nodes because
// flex removes it.
const content = React.Children.map(children, child => {
if (typeof child === "string") {
return <span>{child.replace(/^ +| +$/g, "\xa0")}</span>;
}
return child;
});
if (wrap && itemGutter) {
// The first div is required to support nested `Flex` components with itemGutters.
return (
<div ref={forwardRef} className={rootClassNames} {...rest}>
<div className={flexClassNames}>{content}</div>
</div>
);
}
return (
<div ref={forwardRef} className={rootClassNames} {...rest}>
<div className={flexClassNames}>{children}</div>
<div
ref={forwardRef}
className={cn(rootClassNames, flexClassNames)}
{...rest}
>
{content}
</div>
);
};
Flex.defaultProps = {
wrap: true,
};
const enhanced = withForwardRef(withStyles(styles)(Flex));
export default enhanced;
export type FlexProps = PropTypesOf<typeof enhanced>;
src/core/client/ui/components/FormField/FormField.tsx
+5 -6
View File
@@ -1,10 +1,10 @@
import cn from "classnames";
import React, { HTMLAttributes, ReactNode } from "react";
import React, { ReactNode } from "react";
import { StatelessComponent } from "react";
import { withStyles } from "talk-ui/hocs";
import Flex from "../Flex";
import HorizontalGutter from "../HorizontalGutter";
import * as styles from "./FormField.css";
interface InnerProps {
@@ -18,14 +18,13 @@ const FormField: StatelessComponent<InnerProps> = props => {
const { classes, className, children, ...rest } = props;
return (
<Flex
direction="column"
<HorizontalGutter
className={cn(classes.root, className)}
itemGutter="half"
size="half"
{...rest}
>
{children}
</Flex>
</HorizontalGutter>
);
};
src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css
+27
View File
@@ -0,0 +1,27 @@
.root {
}
.half {
& > * {
margin: 0 0 calc(0.5 * var(--spacing-unit)) 0 !important;
}
& > *:last-child {
margin: 0 !important;
}
}
.full {
& > * {
margin: 0 0 var(--spacing-unit) 0 !important;
}
& > *:last-child {
margin: 0 !important;
}
}
.double {
& > * {
margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
}
& > *:last-child {
margin: 0 !important;
}
}
src/core/client/ui/components/HorizontalGutter/HorizontalGutter.mdx
+42
View File
@@ -0,0 +1,42 @@
---
name: HorizontalGutter
menu: UI Kit
---
import { Playground } from "docz"
import HorizontalGutter from "./HorizontalGutter"
import Button from "../Button"
# Spinner
## Usage
### Full gutter
<Playground>
<HorizontalGutter>
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
</HorizontalGutter>
</Playground>
### Half gutter
<Playground>
<HorizontalGutter size="half">
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
</HorizontalGutter>
</Playground>
### Double gutter
<Playground>
<HorizontalGutter size="double">
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
<div style={{backgroundColor: "grey", height: "30px"}} />
</HorizontalGutter>
</Playground>
src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx
+37
View File
@@ -0,0 +1,37 @@
import cn from "classnames";
import React, { HTMLAttributes, Ref, StatelessComponent } from "react";
import { withForwardRef, withStyles } from "talk-ui/hocs";
import { PropTypesOf } from "talk-ui/types";
import * as styles from "./HorizontalGutter.css";
interface InnerProps extends HTMLAttributes<HTMLSpanElement> {
/**
* This prop can be used to add custom classnames.
* It is handled by the `withStyles `HOC.
*/
classes: typeof styles;
size?: "half" | "full" | "double";
/** The name of the HorizontalGutter to render */
children?: React.ReactNode;
/** Internal: Forwarded Ref */
forwardRef?: Ref<HTMLDivElement>;
}
const HorizontalGutter: StatelessComponent<InnerProps> = props => {
const { classes, className, size, forwardRef, ...rest } = props;
const rootClassName = cn(classes.root, className, classes[size!]);
return <div className={rootClassName} {...rest} ref={forwardRef} />;
};
HorizontalGutter.defaultProps = {
size: "full",
};
const enhanced = withForwardRef(withStyles(styles)(HorizontalGutter));
export type HorizontalGutterProps = PropTypesOf<typeof enhanced>;
export default enhanced;
src/core/client/ui/components/HorizontalGutter/index.ts
+1
View File
@@ -0,0 +1 @@
export { default, HorizontalGutterProps } from "./HorizontalGutter";
src/core/client/ui/components/InputLabel/InputLabel.mdx
+3 -3
View File
@@ -5,15 +5,15 @@ menu: UI Kit
import { Playground, PropsTable } from 'docz'
import InputLabel from './InputLabel.tsx'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# InputLabel
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<InputLabel>Well... Hello there.</InputLabel>
</Flex>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/TextField/TextField.mdx
+3 -3
View File
@@ -5,16 +5,16 @@ menu: UI Kit
import { Playground, PropsTable } from 'docz'
import TextField from './TextField.tsx'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# TextField
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<TextField placeholder="This is a placeholder" />
<TextField defaultValue="This is an input field" />
<TextField color="error" defaultValue="A TextField with an error" />
<TextField color="error" defaultValue="A TextField with an error" fullWidth/>
</Flex>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+3 -3
View File
@@ -6,7 +6,7 @@ menu: UI Kit
import { Playground } from 'docz'
import ToggleShow from './ToggleShow'
import Button from '../Button'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# ToggleShow
A render props component to manage visible state.
@@ -15,12 +15,12 @@ A render props component to manage visible state.
<Playground>
<ToggleShow>
{({ toggleShow, show }) => (
<Flex itemGutter direction="column">
<HorizontalGutter>
{show && <div>Hello World!</div>}
<Button onClick={toggleShow} variant="filled" color="primary">
Toggle Show
</Button>
</Flex>
</HorizontalGutter>
)}
</ToggleShow>
</Playground>
src/core/client/ui/components/Typography/Typography.mdx
+7 -7
View File
@@ -5,13 +5,13 @@ menu: UI Kit
import { Playground } from 'docz'
import Typography from './Typography'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# Typography
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<Typography variant="heading1">Heading1</Typography>
<Typography variant="heading2">Heading2</Typography>
<Typography variant="heading3">Heading3</Typography>
@@ -19,28 +19,28 @@ import Flex from '../Flex'
<Typography variant="bodyCopy">BodyCopy</Typography>
<Typography variant="bodyCopyBold">bodyCopyBold</Typography>
<Typography variant="timestamp">timestamp</Typography>
</Flex>
</HorizontalGutter>
</Playground>
## Using different colors
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<Typography color="textPrimary">textPrimary</Typography>
<Typography color="textSecondary">textSecondary</Typography>
<Typography color="success">success</Typography>
<Typography color="error">error</Typography>
</Flex>
</HorizontalGutter>
</Playground>
## Set align
<Playground>
<Flex itemGutter direction="column" alignItems="stretch" style={{width: "200px"}}>
<HorizontalGutter style={{width: "200px"}}>
<Typography align="left">left</Typography>
<Typography align="center">center</Typography>
<Typography align="right">right</Typography>
<Typography align="justify"> No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo
quiera, simplemente porque es el dolor.</Typography>
</Flex>
</HorizontalGutter>
</Playground>
## Cut off long text
src/core/client/ui/components/Typography/Typography.tsx
+18 -8
View File
@@ -29,7 +29,7 @@ interface InnerProps extends HTMLAttributes<any> {
/**
* The content of the component.
*/
children: ReactNode;
children?: ReactNode;
/**
* Override or extend the styles applied to the component.
*/
@@ -49,11 +49,11 @@ interface InnerProps extends HTMLAttributes<any> {
| "error"
| "success";
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
* The container used for the root node.
* Either a string to use a DOM element, a component, or an element.
* By default, it maps the variant to a good default headline component.
*/
component?: React.ComponentType<any> | string;
container?: React.ReactElement<any> | React.ComponentType<any> | string;
/**
* If `true`, the text will have a bottom margin.
*/
@@ -87,7 +87,7 @@ const Typography: StatelessComponent<InnerProps> = props => {
classes,
className,
color,
component,
container,
gutterBottom,
headlineMapping,
noWrap,
@@ -117,10 +117,20 @@ const Typography: StatelessComponent<InnerProps> = props => {
className
);
const Component =
component || (paragraph ? "p" : headlineMapping![variant!]) || "span";
const Container =
container || (paragraph ? "p" : headlineMapping![variant!]) || "span";
return <Component ref={forwardRef} className={rootClassName} {...rest} />;
const innerProps = {
ref: forwardRef,
className: rootClassName,
...rest,
};
if (React.isValidElement<any>(Container)) {
return React.cloneElement(Container, innerProps);
} else {
return <Container {...innerProps} />;
}
};
Typography.defaultProps = {
src/core/client/ui/components/ValidationMessage/ValidationMessage.mdx
+3 -3
View File
@@ -5,16 +5,16 @@ menu: UI Kit
import { Playground } from 'docz'
import ValidationMessage from './ValidationMessage.tsx'
import Flex from '../Flex'
import HorizontalGutter from '../HorizontalGutter'
# ValidationMessage
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<HorizontalGutter>
<ValidationMessage>Invalid characters. Try again</ValidationMessage>
<ValidationMessage fullWidth>Account with this email address already exists. Try another email. </ValidationMessage>
</Flex>
</HorizontalGutter>
</Playground>
src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx
+3 -2
View File
@@ -1,7 +1,8 @@
import cn from "classnames";
import React from "react";
import { ReactNode, StatelessComponent } from "react";
import React, { ReactNode, StatelessComponent } from "react";
import { withStyles } from "talk-ui/hocs";
import Icon from "../Icon";
import * as styles from "./ValidationMessage.css";
src/core/client/ui/components/index.ts
+1
View File
@@ -17,3 +17,4 @@ export { default as Popup } from "./Popup";
export { default as FormField } from "./FormField";
export { default as InputDescription } from "./InputDescription";
export { default as Spinner } from "./Spinner";
export { default as HorizontalGutter } from "./HorizontalGutter";
src/locales/en-US/stream.ftl
+6
View File
@@ -15,3 +15,9 @@ comments-permalinkView-commentNotFound = Comment not found
comments-userBoxUnauthenticated-joinTheConversation = Join the conversation
comments-userBoxUnauthenticated-signIn = Sign in
comments-userBoxUnauthenticated-register = Register
comments-userBoxAuthenticated-signedInAs =
Signed in as <username>Username</username>.
comments-userBoxAuthenticated-notYou =
Not you? <button>Sign Out</button>