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

Harmonize typography

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-20 10:46:48 -03:00
parent 7f265a93c8
commit f8e9b5dd50
16 changed files with 161 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/ui/components/Button/Button.css
+11 -11
View File
@@ -46,7 +46,7 @@
.variantRegular {
&.colorRegular {
color: var(--palette-secondary-main);
color: var(--palette-grey-main);
}
&.colorPrimary {
color: var(--palette-primary-main);
@@ -61,10 +61,10 @@
&:not(.disabled) {
&.colorRegular {
&.mouseHover {
color: var(--palette-secondary-light);
color: var(--palette-grey-light);
}
&:active {
color: var(--palette-secondary-lighter);
color: var(--palette-grey-lighter);
}
}
&.colorPrimary {
@@ -97,7 +97,7 @@
.variantFilled {
color: var(--palette-common-white);
&.colorRegular {
background-color: var(--palette-secondary-main);
background-color: var(--palette-grey-main);
}
&.colorPrimary {
background-color: var(--palette-primary-main);
@@ -112,10 +112,10 @@
&:not(.disabled) {
&.colorRegular {
&.mouseHover {
background-color: var(--palette-secondary-light);
background-color: var(--palette-grey-light);
}
&:active {
background-color: var(--palette-secondary-lighter);
background-color: var(--palette-grey-lighter);
}
}
&.colorPrimary {
@@ -147,7 +147,7 @@
.variantOutlined {
&.colorRegular {
color: var(--palette-secondary-main);
color: var(--palette-grey-main);
border: 1px solid currentColor;
}
&.colorPrimary {
@@ -166,11 +166,11 @@
&:not(.disabled) {
&.colorRegular {
&.mouseHover {
color: var(--palette-secondary-light);
color: var(--palette-grey-light);
border: 1px solid currentColor;
}
&:active {
color: var(--palette-secondary-lighter);
color: var(--palette-grey-lighter);
border: 1px solid currentColor;
}
}
@@ -209,7 +209,7 @@
.variantGhost {
&.colorRegular {
color: var(--palette-secondary-main);
color: var(--palette-grey-main);
}
&.colorPrimary {
color: var(--palette-primary-main);
@@ -228,7 +228,7 @@
}
&:active {
color: var(--palette-common-white);
background-color: var(--palette-secondary-main);
background-color: var(--palette-grey-main);
}
}
&.colorPrimary {
src/core/client/ui/components/RelativeTime/RelativeTime.css
+1 -1
View File
@@ -1,4 +1,4 @@
.root {
composes: body1 from "talk-ui/shared/typography.css";
composes: bodyCopy from "talk-ui/shared/typography.css";
background-color: transparent;
}
src/core/client/ui/components/Typography/Typography.css
+10 -18
View File
@@ -19,28 +19,16 @@
composes: heading4 from "talk-ui/shared/typography.css";
}
.subtitle1 {
composes: subtitle1 from "talk-ui/shared/typography.css";
}
.subtitle2 {
composes: subtitle2 from "talk-ui/shared/typography.css";
}
.body1 {
composes: body1 from "talk-ui/shared/typography.css";
}
.body2 {
composes: body2 from "talk-ui/shared/typography.css";
.bodyCopy {
composes: bodyCopy from "talk-ui/shared/typography.css";
}
.button {
composes: button from "talk-ui/shared/typography.css";
}
.overline {
composes: overline from "talk-ui/shared/typography.css";
.buttonLarge {
composes: buttonLarge from "talk-ui/shared/typography.css";
}
.timestamp {
@@ -85,8 +73,8 @@
color: var(--palette-primary-main);
}
.colorSecondary {
color: var(--palette-secondary-main);
.colorTextPrimary {
color: var(--palette-text-primary);
}
.colorTextSecondary {
@@ -96,3 +84,7 @@
.colorError {
color: var(--palette-error-main);
}
.colorSuccess {
color: var(--palette-success-main);
}
src/core/client/ui/components/Typography/Typography.mdx
+56
View File
@@ -0,0 +1,56 @@
---
name: Typography
menu: UI Kit
---
import { Playground } from 'docz'
import Typography from './Typography'
import Flex from '../Flex'
# Typography
## Basic Use
<Playground>
<Flex itemGutter direction="column">
<Typography variant="heading1">Heading1</Typography>
<Typography variant="heading2">Heading2</Typography>
<Typography variant="heading3">Heading3</Typography>
<Typography variant="heading4">Heading4</Typography>
<Typography variant="bodyCopy">BodyCopy</Typography>
<Typography variant="timestamp">timestamp</Typography>
</Flex>
</Playground>
## Using different colors
<Playground>
<Flex itemGutter direction="column">
<Typography color="textPrimary">textPrimary</Typography>
<Typography color="textSecondary">textSecondary</Typography>
<Typography color="success">success</Typography>
<Typography color="error">error</Typography>
</Flex>
</Playground>
## Set align
<Playground>
<Flex itemGutter direction="column" alignItems="stretch" 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>
</Playground>
## Cut off long text
<Playground>
<Typography noWrap style={{width: "200px"}}>No hay nadie que ame el dolor mismo, que lo busque, lo encuentre y lo quiera, simplemente porque es el dolor.</Typography>
</Playground>
## Gutters
<Playground>
<Typography gutterBottom>I have a bottom gutter</Typography>
<Typography paragraph>I have a paragraph gutter</Typography>
<Typography>Just a normal text</Typography>
</Playground>
src/core/client/ui/components/Typography/Typography.spec.tsx
+20
View File
@@ -0,0 +1,20 @@
import React from "react";
import TestRenderer from "react-test-renderer";
import { PropTypesOf } from "talk-ui/types";
import Typography from "./Typography";
it("renders correctly", () => {
const props: PropTypesOf<typeof Typography> = {
className: "custom",
variant: "heading1",
color: "textSecondary",
gutterBottom: true,
children: "Hello World",
noWrap: true,
align: "left",
};
const renderer = TestRenderer.create(<Typography {...props} />);
expect(renderer.toJSON()).toMatchSnapshot();
});
src/core/client/ui/components/Typography/Typography.tsx
+10 -16
View File
@@ -12,11 +12,7 @@ type Variant =
| "heading2"
| "heading3"
| "heading4"
| "subtitle1"
| "subtitle2"
| "body1"
| "body2"
| "button"
| "bodyCopy"
| "timestamp";
// Based on Typography Component of Material UI.
@@ -45,10 +41,10 @@ interface InnerProps extends HTMLAttributes<any> {
color?:
| "inherit"
| "primary"
| "textPrimary"
| "textSecondary"
| "secondary"
| "error"
| "default";
| "success";
/**
* The component used for the root node.
* Either a string to use a DOM element or a component.
@@ -102,10 +98,11 @@ const Typography: StatelessComponent<InnerProps> = props => {
classes.root,
classes[variant!],
{
[classes.colorPrimary]: color === "primary",
[classes.colorSecondary]: color === "secondary",
[classes.colorError]: color === "error",
[classes.colorTextPrimary]: color === "textPrimary",
[classes.colorTextSecondary]: color === "textSecondary",
[classes.colorPrimary]: color === "primary",
[classes.colorError]: color === "error",
[classes.colorSuccess]: color === "success",
[classes.noWrap]: noWrap,
[classes.gutterBottom]: gutterBottom,
[classes.paragraph]: paragraph,
@@ -125,22 +122,19 @@ const Typography: StatelessComponent<InnerProps> = props => {
Typography.defaultProps = {
align: "inherit",
color: "default",
color: "textPrimary",
gutterBottom: false,
headlineMapping: {
heading1: "h1",
heading2: "h1",
heading3: "h1",
heading4: "h1",
subtitle1: "h2",
subtitle2: "h3",
body1: "p",
body2: "aside",
bodyCopy: "p",
timestamp: "span",
},
noWrap: false,
paragraph: false,
variant: "body1",
variant: "bodyCopy",
};
const enhanced = withForwardRef(withStyles(styles)(Typography));
src/core/client/ui/components/Typography/__snapshots__/Typography.spec.tsx.snap
+9
View File
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
<h1
className="Typography-root Typography-heading1 Typography-colorTextSecondary Typography-noWrap Typography-gutterBottom Typography-alignLeft"
>
Hello World
</h1>
`;