Skip to content

Commit

Permalink
fix(Typography): Removed forced color
Browse files Browse the repository at this point in the history
  • Loading branch information
@JF-Cozy
JF-Cozy committed Jul 1, 2022
1 parent f9d4107 commit 8abb1db
Show file tree
Hide file tree
Showing 8 changed files with 895 additions and 922 deletions.
2 changes: 1 addition & 1 deletion react/ActionMenu/__snapshots__/index.spec.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ exports[`ActionMenu should render as expected 1`] = `
class="styles__bd___1Uv-F u-mr-1 u-stack-xs"
>
<p
class="MuiTypography-root MuiTypography-body1 MuiTypography-gutterBottom"
class="MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-gutterBottom"
>
Item 4
</p>
Expand Down
2 changes: 1 addition & 1 deletion react/ContactsList/__snapshots__/ContactRow.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`ContactRow should match the contact snapshot 1`] = `
</span>
</div>
<p
className="MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline"
className="MuiTypography-root u-ml-1 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap MuiTypography-gutterBottom MuiTypography-displayInline"
>
<span
className=""
Expand Down
12 changes: 2 additions & 10 deletions react/MuiCozyTheme/makeTypography.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,33 @@ export const makeTypography = palette => ({
fontFamily: getCssVariableValue('primaryFont') || 'Lato',
h1: {
fontSize: 48,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.087,
letterSpacing: -0.8
},
h2: {
fontSize: 32,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.313,
letterSpacing: -0.4
},
h3: {
fontSize: 24,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.167
},
h4: {
fontSize: 20,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.167
},
h5: {
fontSize: 18,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.313
},
h6: {
fontSize: 16,
color: palette.text.primary,
fontWeight: 'bold',
lineHeight: 1.313
},
Expand All @@ -48,13 +42,11 @@ export const makeTypography = palette => ({
},
body1: {
fontSize: 16,
lineHeight: 1.313,
color: palette.text.primary
lineHeight: 1.313
},
body2: {
fontSize: 14,
lineHeight: 1.313,
color: palette.text.primary
lineHeight: 1.313
},
button: {
fontWeight: 'bold',
Expand Down
20 changes: 10 additions & 10 deletions react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
Test
</h6>
Expand Down Expand Up @@ -77,7 +77,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
modified
</h6>
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
testslug
</h6>
Expand Down Expand Up @@ -168,7 +168,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
/>
</div>
`;
Expand Down Expand Up @@ -220,7 +220,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
Test
</h6>
Expand Down Expand Up @@ -262,7 +262,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
Test
</h6>
Expand Down Expand Up @@ -304,7 +304,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
Test
</h6>
Expand All @@ -324,7 +324,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
style="background-color: rgb(61, 166, 126);"
>
<h2
class="MuiTypography-root makeStyles-letter-44 MuiTypography-h2 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-letter-44 MuiTypography-h2 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
S
</h2>
Expand All @@ -349,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
</span>
</span>
<h6
class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
shortcut
</h6>
Expand Down Expand Up @@ -392,7 +392,7 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
/>
</span>
<h6
class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
>
custom icon
</h6>
Expand Down
107 changes: 52 additions & 55 deletions react/Text/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,67 @@
⚠️ Those components are deprecated, instead please use the Typography component.

#### Standard text
### From old `Text` to new `Typography` :

```jsx
import Text from 'cozy-ui/transpiled/react/Text';

<Text>This a standard text</Text>
```

#### Main title

```jsx
import { MainTitle } from 'cozy-ui/transpiled/react/Text';

<MainTitle>This a main title text</MainTitle>
```

#### Title

```jsx
import { Title } from 'cozy-ui/transpiled/react/Text';

<Title>This a title text</Title>
```

#### SubTitle

```jsx
import { SubTitle } from 'cozy-ui/transpiled/react/Text';

<SubTitle>This a subtitle text</SubTitle>
import { Text, Caption, MainTitle, SubTitle, Title, Bold, ErrorMessage } from 'cozy-ui/transpiled/react/Text'
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
import Typography from 'cozy-ui/transpiled/react/Typography'

const trStyle = { borderBottom: '1px solid gray'}
const tdStyle = { borderRight: '1px solid gray'}

;

<table className='u-w-100'>
<tbody>
<tr style={trStyle}>
<td style={tdStyle}><MainTitle>MainTitle</MainTitle></td>
<td><Typography className="u-ml-1" variant='h3'>is replaced by &lt;Typography variant="h3" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Title>Title</Title></td>
<td><Typography className="u-ml-1" variant='h4'>is replaced by &lt;Typography variant="h4" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><SubTitle>SubTitle</SubTitle></td>
<td><Typography className="u-ml-1" variant='h5'>is replaced by &lt;Typography variant="h5" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Bold>Bold</Bold></td>
<td><Typography className="u-ml-1" variant='h6'>is replaced by &lt;Typography variant="h6" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Caption>Caption</Caption></td>
<td><Typography className="u-ml-1" variant='caption' color='textSecondary'>is replaced by &lt;Typography variant="caption" color="textSecondary" /&gt; </Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><ErrorMessage>ErrorMessage</ErrorMessage></td>
<td><Typography className="u-ml-1" variant='body1' color='error'>is replaced by &lt;Typography color="error" variant='body1' /&gt; </Typography></td>
</tr>
</tbody>
</table>
```

#### Bold text
### Exemples

```jsx
import { Bold } from 'cozy-ui/transpiled/react/Text';
import Text, { Title, MainTitle, SubTitle, Bold, Uppercase, Caption, ErrorMessage } from 'cozy-ui/transpiled/react/Text'

<Bold>This a bold text</Bold>
```

#### Uppercase test

```jsx
import { Uppercase } from 'cozy-ui/transpiled/react/Text';

<Uppercase>This is an uppercase text</Uppercase>
```

#### Caption text

```jsx
import { Caption } from 'cozy-ui/transpiled/react/Text';

<Caption>This a caption text</Caption>
```

#### ErrorMessage text
;

```jsx
import { ErrorMessage } from 'cozy-ui/transpiled/react/Text';

<ErrorMessage>This is an error message text</ErrorMessage>
<>
<Text>This a standard text</Text>
<MainTitle>This a main title text</MainTitle>
<Title>This a title text</Title>
<SubTitle>This a subtitle text</SubTitle>
<Bold>This a bold text</Bold>
<Uppercase>This is an uppercase text</Uppercase>
<Caption>This a caption text</Caption>
<ErrorMessage>This is an error message text</ErrorMessage>
</>
```

#### Utility classes
### Utility classes

Utility classes can be used for status texts

Expand Down
92 changes: 22 additions & 70 deletions react/Typography/Readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,12 @@
Use typographic components to have sensible defaults for text
content. The typography variants naming is based on material design.
Use typographic components to have sensible defaults for text content. The typography variants naming is based on material design.

Read the original [Typography component](https://material-ui.com/components/typography/)
documentation for more information.

🆕 The Typography component should be used instead of Text components.

<details>
<summary>⤵️ A codemod can be used to help you migrate the code (click here for more information).</summary>

```bash
npm install -g jscodeshift
jscodeshift -t node_modules/cozy-ui/codemods/transform-typography.js --parser babel src/
```

</details>
Read the original [Typography component](https://v4.mui.com/components/typography/) documentation for more information.

```jsx
import Typography from 'cozy-ui/transpiled/react/Typography'
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
import Stack from 'cozy-ui/transpiled/react/Stack'
import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'

const variants = [
'h1',
Expand All @@ -32,58 +19,23 @@ const variants = [
'body1',
'body2',
'caption',
];

<Stack spacing='s'>
{ variants.map(variant => (
<Typography variant={variant}>{variant}</Typography>
)) }
</Stack>
```

You can use `color="textSecondary"`:

```jsx
<Typography variant='body1' color="textSecondary">A text written in secondary text color.</Typography>
```

From old to new :

```jsx
import { Text, Caption, MainTitle, SubTitle, Title, Bold, ErrorMessage } from 'cozy-ui/transpiled/react/Text'
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
import Typography from 'cozy-ui/transpiled/react/Typography';

const trStyle = { borderBottom: '1px solid gray'}
const tdStyle = { borderRight: '1px solid gray'};

<table className='u-w-100'>
<tbody>
<tr style={trStyle}>
<td style={tdStyle}><MainTitle>MainTitle</MainTitle></td>
<td><Typography variant='h3'>is replaced by &lt;Typography variant="h3" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Title>Title</Title></td>
<td><Typography variant='h4'>is replaced by &lt;Typography variant="h4" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><SubTitle>SubTitle</SubTitle></td>
<td><Typography variant='h5'>is replaced by &lt;Typography variant="h5" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Bold>Bold</Bold></td>
<td><Typography variant='h6'>is replaced by &lt;Typography variant="h6" &gt;</Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><Caption>Caption</Caption></td>
<td><Typography variant='caption' color='textSecondary'>is replaced by &lt;Typography variant="caption" color="textSecondary" /&gt; </Typography></td>
</tr>
<tr style={trStyle}>
<td style={tdStyle}><ErrorMessage>ErrorMessage</ErrorMessage></td>
<td><Typography variant='body1' color='error'>is replaced by &lt;Typography color="error" variant='body1' /&gt; </Typography></td>
</tr>
</tbody>
</table>

]
const colors = ['initial', 'inherit', 'primary', 'secondary', 'textPrimary', 'textSecondary', 'error']

;

<Grid container>
{colors.map((color, index) =>
<Grid item xs={6} sm={3} md={2} className="u-mb-2" key={index}>
<Stack spacing="s">
<div>{color}</div>
{variants.map(variant =>
<div key={variant + color}>
<Typography variant={variant} color={color}>{variant}</Typography>
</div>
)}
</Stack>
</Grid>
)}
</Grid>
```
Loading

0 comments on commit 8abb1db

Please sign in to comment.