Skip to content

Commit

Permalink
feat(typography): Renamed Text to Typography
Browse files Browse the repository at this point in the history
BREAKING CHANGE: The Text component has been renamed to Typography to
help with auto-imports conflicting with the Text element that exists in
`lib.d.ts`
  • Loading branch information
mlaursen committed Nov 24, 2021
1 parent 219937e commit 30cf056
Show file tree
Hide file tree
Showing 127 changed files with 647 additions and 606 deletions.
4 changes: 2 additions & 2 deletions README.md
Expand Up @@ -148,7 +148,7 @@ components from react-md. It is generally recommended to update your base
+ Configuration,
+ Layout,
+ useLayoutNavigation,
+ Text,
+ Typography,
+ Button,
+} from 'react-md';
+
Expand All @@ -162,7 +162,7 @@ components from react-md. It is generally recommended to update your base
+ navHeaderTitle="My Nav Title"
+ treeProps={...useLayoutNavigation(routes, pathname)}
+ >
+ <Text type="headline-4">Hello, world!</Text>
+ <Typography type="headline-4">Hello, world!</Typography>
+ <Button theme="primary">Example button</Button>
+ </Layout>
+ </Configuration>
Expand Down
4 changes: 2 additions & 2 deletions examples/create-react-app-typescript/src/components/Home.tsx
@@ -1,10 +1,10 @@
import type { ReactElement } from "react";
import { TextContainer, Text } from "react-md";
import { TextContainer, Typography } from "react-md";

export default function Home(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
);
}
@@ -1,10 +1,10 @@
import type { ReactElement } from "react";
import { TextContainer, Text } from "react-md";
import { TextContainer, Typography } from "react-md";

export default function Route1(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/create-react-app/src/components/Home.js
@@ -1,9 +1,9 @@
import { TextContainer, Text } from 'react-md';
import { TextContainer, Typography } from 'react-md';

export default function Home() {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/create-react-app/src/components/Route1.js
@@ -1,9 +1,9 @@
import { TextContainer, Text } from 'react-md';
import { TextContainer, Typography } from 'react-md';

export default function Route1() {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/gatsby-typescript/src/pages/index.tsx
@@ -1,10 +1,10 @@
import type { ReactElement } from "react"
import { Text, TextContainer } from "react-md"
import { Typography, TextContainer } from "react-md"

export default function index(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
)
}
4 changes: 2 additions & 2 deletions examples/gatsby-typescript/src/pages/route-1.tsx
@@ -1,10 +1,10 @@
import type { ReactElement } from "react"
import { TextContainer, Text } from "react-md"
import { TextContainer, Typography } from "react-md"

export default function Route1(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
)
}
4 changes: 2 additions & 2 deletions examples/gatsby/src/pages/index.jsx
@@ -1,9 +1,9 @@
import { Text, TextContainer } from "react-md"
import { Typography, TextContainer } from "react-md"

export default function index() {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
)
}
4 changes: 2 additions & 2 deletions examples/gatsby/src/pages/route-1.jsx
@@ -1,9 +1,9 @@
import { TextContainer, Text } from "react-md"
import { TextContainer, Typography } from "react-md"

export default function Route1() {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
)
}
4 changes: 2 additions & 2 deletions examples/nextjs-typescript/src/pages/index.tsx
@@ -1,10 +1,10 @@
import type { ReactElement } from "react";
import { Text, TextContainer } from "react-md";
import { Typography, TextContainer } from "react-md";

export default function index(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/nextjs-typescript/src/pages/route-1.tsx
@@ -1,10 +1,10 @@
import type { ReactElement } from "react";
import { TextContainer, Text } from "react-md";
import { TextContainer, Typography } from "react-md";

export default function Route1(): ReactElement {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/nextjs/src/pages/index.jsx
@@ -1,9 +1,9 @@
import { Text, TextContainer } from 'react-md';
import { Typography, TextContainer } from 'react-md';

export default function index() {
return (
<TextContainer>
<Text type="headline-4">Hello, world!</Text>
<Typography type="headline-4">Hello, world!</Typography>
</TextContainer>
);
}
4 changes: 2 additions & 2 deletions examples/nextjs/src/pages/route-1.jsx
@@ -1,9 +1,9 @@
import { TextContainer, Text } from 'react-md';
import { TextContainer, Typography } from 'react-md';

export default function Route1() {
return (
<TextContainer>
<Text type="headline-4">Route 1</Text>
<Typography type="headline-4">Route 1</Typography>
</TextContainer>
);
}
2 changes: 1 addition & 1 deletion examples/umd/README.md
Expand Up @@ -10,7 +10,7 @@ A super simple `index.html` file that:
- loads the Material Icons and Roboto fonts
- loads the `React`, `ReactDOM`, and `ReactMD` UMD bundles
- creates a simple [index.html](./index.html) that uses the `TextContainer` and
`Text` components from `ReactMD`
`Typography` components from `ReactMD`

## How to Use

Expand Down
2 changes: 1 addition & 1 deletion examples/umd/index.html
Expand Up @@ -56,7 +56,7 @@
ReactMD.TextContainer,
{},
React.createElement(
ReactMD.Text,
ReactMD.Typography,
{ type: "headline-2" },
"Hello, World!"
)
Expand Down
4 changes: 2 additions & 2 deletions packages/card/README.md
Expand Up @@ -39,15 +39,15 @@ import { Fragment } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Card, CardHeader, CardTitle, CardSubtitle, CardActions } from "@react-md/card"
import { Text } from "@react-md/typography"
import { Typography } from "@react-md/typography"

const App = () => (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
</CardHeader>
<CardContent>
<Text>Here is some text to display in the card. It is
<Typography>Here is some text to display in the card. It is
</CardContent>
<CardActions>
<Button>Action 1</Button>
Expand Down
4 changes: 2 additions & 2 deletions packages/dialog/CHANGELOG.md
Expand Up @@ -419,15 +419,15 @@ import {
DialogContent,
DialogFooter,
} from "@react-md/dialog";
import { Text } from "@react-md/typography";
import { Typography } from "@react-md/typography";

const App = () => (
<Dialog {...props}>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
</DialogHeader>
<Text>Here is some text that should go in the dialog.</Text>
<Typography>Here is some text that should go in the dialog.</Typography>
<DialogFooter>
<Button id="close-dialog">Close</Button>
</DialogFooter>
Expand Down
3 changes: 2 additions & 1 deletion packages/dialog/src/Dialog.tsx
Expand Up @@ -240,6 +240,7 @@ export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
* DialogContent,
* DialogFooter,
* } from "@react-md/dialog";
* import { Typography } from "@react-md/typography";
*
* function Example(): ReactElement {
* const [visible, setVisible] = useState(false);
Expand All @@ -262,7 +263,7 @@ export const DEFAULT_DIALOG_TIMEOUT: Readonly<TransitionTimeout> = {
* <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
* </DialogHeader>
* <DialogContent>
* <Text margin="none">This is some text in a dialog.</Text>
* <Typography margin="none">This is some text in a dialog.</Typography>
* </DialogContent>
* <DialogFooter>
* <Button onClick={hide}>
Expand Down
5 changes: 3 additions & 2 deletions packages/divider/README.md
Expand Up @@ -40,15 +40,16 @@ dividers or to add dividers between page elements:
import { render } from "react-dom";
import { Divider } from "@react-md/divider";
import { List, ListItem } from "@react-md/list";
import { Typography } from "@react-m/typography";

const App = () => (
<main>
<div className="section-1">
<Text>Here is some text.</Text>
<Typography>Here is some text.</Typography>
</div>
<Divider />
<div className="section-2">
<Text>Here is some more text.</Text>
<Typography>Here is some more text.</Typography>
</div>
<List>
<ListItem id="item-1">Item 1</ListItem>
Expand Down
6 changes: 3 additions & 3 deletions packages/documentation/src/components/Blog/Blog.tsx
@@ -1,6 +1,6 @@
import { ReactElement } from "react";
import { Divider } from "@react-md/divider";
import { Text, TextContainer } from "@react-md/typography";
import { Typography, TextContainer } from "@react-md/typography";

import Post, { BlogPost } from "./Post";

Expand Down Expand Up @@ -62,15 +62,15 @@ export default function Blog({ children }: BlogProps): ReactElement {
<>
<TextContainer>
{({ className }) => (
<Text
<Typography
id="latest-news"
align="center"
type="headline-4"
component="h2"
className={className}
>
The latest news about react-md
</Text>
</Typography>
)}
</TextContainer>
<Divider />
Expand Down