diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css index a9f4d2273..abbd6ac69 100644 --- a/src/core/client/stream/components/Comment/Comment.css +++ b/src/core/client/stream/components/Comment/Comment.css @@ -1,3 +1,3 @@ .footer { - margin: 6px 0; + margin-top: calc(1.5 * var(--spacing-unit)); } diff --git a/src/core/client/stream/components/Permalink/Permalink.tsx b/src/core/client/stream/components/Permalink/Permalink.tsx index 3acfc3d71..40500904e 100644 --- a/src/core/client/stream/components/Permalink/Permalink.tsx +++ b/src/core/client/stream/components/Permalink/Permalink.tsx @@ -3,21 +3,21 @@ import React from "react"; import { Button, ButtonIcon, Popover } from "talk-ui/components"; import PermalinkPopover from "./PermalinkPopover"; -interface InnerProps { +interface PermalinkProps { commentID: string; assetURL: string | null; } -class Permalink extends React.Component { +class Permalink extends React.Component { public render() { const { commentID, assetURL } = this.props; return ( ( + body={({ toggleVisibility }) => ( )} diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.css b/src/core/client/stream/components/Permalink/PermalinkPopover.css deleted file mode 100644 index fe47c28d3..000000000 --- a/src/core/client/stream/components/Permalink/PermalinkPopover.css +++ /dev/null @@ -1,6 +0,0 @@ -.textField { - margin-right: 5px; -} - -.root { -} diff --git a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx index 61a2d3ba4..32495a902 100644 --- a/src/core/client/stream/components/Permalink/PermalinkPopover.tsx +++ b/src/core/client/stream/components/Permalink/PermalinkPopover.tsx @@ -1,14 +1,11 @@ import { Localized } from "fluent-react/compat"; import React, { CSSProperties } from "react"; import CopyToClipboard from "react-copy-to-clipboard"; -import { RefHandler } from "react-popper"; import { Button, ClickOutside, Flex, TextField } from "talk-ui/components"; -import * as styles from "./PermalinkPopover.css"; interface InnerProps { permalinkUrl: string; style?: CSSProperties; - forwardRef?: RefHandler; toggleVisibility: () => void; } @@ -39,8 +36,8 @@ class PermalinkPopover extends React.Component { const { copied } = this.state; return ( - - + + + )} - {assetURL && ( - - )} ); diff --git a/src/core/client/ui/components/AriaInfo/AiraInfo.mdx b/src/core/client/ui/components/AriaInfo/AriaInfo.mdx similarity index 100% rename from src/core/client/ui/components/AriaInfo/AiraInfo.mdx rename to src/core/client/ui/components/AriaInfo/AriaInfo.mdx diff --git a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx index a113c9776..b23f7ff3c 100644 --- a/src/core/client/ui/components/ClickOutside/ClickOutside.tsx +++ b/src/core/client/ui/components/ClickOutside/ClickOutside.tsx @@ -6,7 +6,7 @@ export interface ClickOutsideProps { children: React.ReactNode; } -export class ClickOutside extends React.Component { +class ClickOutside extends React.Component { public domNode: Element | null = null; public handleClick = (e: MouseEvent) => { diff --git a/src/core/client/ui/components/ClickOutside/index.ts b/src/core/client/ui/components/ClickOutside/index.ts index f3f59adad..c0ce145a8 100644 --- a/src/core/client/ui/components/ClickOutside/index.ts +++ b/src/core/client/ui/components/ClickOutside/index.ts @@ -1 +1 @@ -export { default, ClickOutside } from "./ClickOutside"; +export { default } from "./ClickOutside"; diff --git a/src/core/client/ui/components/Popover/Popover.tsx b/src/core/client/ui/components/Popover/Popover.tsx index 0d775b34f..1122c73db 100644 --- a/src/core/client/ui/components/Popover/Popover.tsx +++ b/src/core/client/ui/components/Popover/Popover.tsx @@ -1,6 +1,12 @@ import cn from "classnames"; -import React, { CSSProperties, isValidElement } from "react"; -import { Manager, Popper, Reference, RefHandler } from "react-popper"; +import React from "react"; +import { + Manager, + Popper, + PopperArrowProps, + Reference, + RefHandler, +} from "react-popper"; import AriaInfo from "../AriaInfo"; import * as styles from "./Popover.css"; @@ -21,11 +27,11 @@ type Placement = | "left" | "left-start"; -interface InnerProps { - body: (props: RenderProps) => any | React.ReactElement; - children: (props: RenderProps) => any; +interface PopoverProps { + body: (props: RenderProps) => React.ReactNode | React.ReactElement; + children: (props: RenderProps) => React.ReactNode; description?: string; - id?: string; + id: string; onClose?: () => void; className?: string; placement?: Placement; @@ -35,17 +41,12 @@ interface State { visible: false; } -interface Props { - ref: any; - style: CSSProperties; -} - interface RenderProps { toggleVisibility: () => void; forwardRef?: RefHandler; } -class Popover extends React.Component { +class Popover extends React.Component { public state: State = { visible: false, }; @@ -92,7 +93,7 @@ class Popover extends React.Component { return ( - {(props: Props) => + {(props: PopperArrowProps) => children({ forwardRef: props.ref, toggleVisibility: this.toggleVisibility, @@ -105,7 +106,7 @@ class Popover extends React.Component { eventsEnabled positionFixed={false} > - {(props: Props) => + {(props: PopperArrowProps) => visible && (
{ className={cn(styles.root, className)} ref={props.ref} > - {isValidElement(body) - ? body - : body({ + {typeof body === "function" + ? body({ toggleVisibility: this.toggleVisibility, - forwardRef: props.ref, - })} + }) + : body}
) diff --git a/src/core/client/ui/components/Popover/index.ts b/src/core/client/ui/components/Popover/index.ts index 7e46e3708..04072ed30 100644 --- a/src/core/client/ui/components/Popover/index.ts +++ b/src/core/client/ui/components/Popover/index.ts @@ -1,2 +1 @@ -export * from "./Popover"; export { default } from "./Popover"; diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css index 4d2e9e88a..3e8f769a9 100644 --- a/src/core/client/ui/components/TextField/TextField.css +++ b/src/core/client/ui/components/TextField/TextField.css @@ -1,3 +1,5 @@ +// TODO: (bc) move this to typograhpy! + .root { font-family: "Source Sans Pro"; font-weight: 400; diff --git a/src/core/client/ui/components/TextField/TextField.d.ts b/src/core/client/ui/components/TextField/TextField.d.ts deleted file mode 100644 index f99662ba2..000000000 --- a/src/core/client/ui/components/TextField/TextField.d.ts +++ /dev/null @@ -1 +0,0 @@ -export const root: string; diff --git a/src/core/client/ui/components/TextField/TextField.tsx b/src/core/client/ui/components/TextField/TextField.tsx index 6b530a3db..57f26e7d1 100644 --- a/src/core/client/ui/components/TextField/TextField.tsx +++ b/src/core/client/ui/components/TextField/TextField.tsx @@ -3,11 +3,14 @@ import React, { InputHTMLAttributes, StatelessComponent } from "react"; import * as styles from "./TextField.css"; -interface InnerProps extends InputHTMLAttributes { +interface TextFieldProps extends InputHTMLAttributes { classes?: typeof styles; } -const TextField: StatelessComponent = ({ className, ...rest }) => { +const TextField: StatelessComponent = ({ + className, + ...rest +}) => { return ; };