Skip to content

Commit ec05b2e

Browse files
cee-chencee-chen
committed
Convert more of euiScaleText, + add unit tests
1 parent 2d326aa commit ec05b2e

4 files changed

Lines changed: 159 additions & 21 deletions

File tree

‎src/components/text/__snapshots__/text.styles.test.ts.snap‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`euiTextStyles sizes m 1`] = `
4+
"
5+
font-size: 1.1429rem;
6+
line-height: 1.7143rem;
7+
8+
p,
9+
ul,
10+
ol,
11+
dl,
12+
blockquote,
13+
img,
14+
pre {
15+
margin-block-end: 1.7143rem;
16+
}
17+
18+
ul,
19+
ol {
20+
margin-inline-start: 1.7143rem;
21+
}
22+
23+
blockquote {
24+
font-size: 1.1429rem;
25+
padding: 1.7143rem;
26+
}
27+
;;label:m;"
28+
`;
29+
30+
exports[`euiTextStyles sizes relative 1`] = `
31+
"
32+
font-size: 1em;
33+
line-height: 1.5000;
34+
35+
p,
36+
ul,
37+
ol,
38+
dl,
39+
blockquote,
40+
img,
41+
pre {
42+
margin-block-end: 1.5000em;
43+
}
44+
45+
ul,
46+
ol {
47+
margin-inline-start: 1.5000em;
48+
}
49+
50+
blockquote {
51+
font-size: 1em;
52+
padding: 1.5000em;
53+
}
54+
;;label:relative;"
55+
`;
56+
57+
exports[`euiTextStyles sizes s 1`] = `
58+
"
59+
font-size: 1.0000rem;
60+
line-height: 1.4286rem;
61+
62+
p,
63+
ul,
64+
ol,
65+
dl,
66+
blockquote,
67+
img,
68+
pre {
69+
margin-block-end: 1.4286rem;
70+
}
71+
72+
ul,
73+
ol {
74+
margin-inline-start: 1.4286rem;
75+
}
76+
77+
blockquote {
78+
font-size: 1.0000rem;
79+
padding: 1.4286rem;
80+
}
81+
;;label:s;"
82+
`;
83+
84+
exports[`euiTextStyles sizes xs 1`] = `
85+
"
86+
font-size: 0.8571rem;
87+
line-height: 1.1429rem;
88+
89+
p,
90+
ul,
91+
ol,
92+
dl,
93+
blockquote,
94+
img,
95+
pre {
96+
margin-block-end: 1.1429rem;
97+
}
98+
99+
ul,
100+
ol {
101+
margin-inline-start: 1.1429rem;
102+
}
103+
104+
blockquote {
105+
font-size: 0.8571rem;
106+
padding: 1.1429rem;
107+
}
108+
;;label:xs;"
109+
`;

‎src/components/text/_text.scss‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,6 @@
22
@mixin euiScaleText($baseFontSize, $sizingMethod: 'rem') {
33
$baseLineHeightMultiplier: $baseFontSize / 2;
44

5-
p,
6-
ul,
7-
ol,
8-
dl,
9-
blockquote,
10-
img,
11-
pre {
12-
margin-bottom: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
13-
}
14-
15-
ul,
16-
ol {
17-
margin-left: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
18-
}
19-
20-
blockquote {
21-
font-size: fontSizeToRemOrEm($baseFontSize, $sizingMethod);
22-
padding: marginToRemOrEm(($baseLineHeightMultiplier * 3), $baseFontSize, $sizingMethod);
23-
}
24-
255
// headings
266
$fontSizeH1: $baseFontSize * nth($euiTextScale, 1);
277
$fontSizeH2: $baseFontSize * nth($euiTextScale, 2);

‎src/components/text/text.styles.test.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0 and the Server Side Public License, v 1; you may not use this file except
5+
* in compliance with, at your election, the Elastic License 2.0 or the Server
6+
* Side Public License, v 1.
7+
*/
8+
9+
import { testCustomHook } from '../../test/internal';
10+
import { useEuiTheme } from '../../services';
11+
12+
import { TEXT_SIZES } from './text';
13+
import { euiTextStyles } from './text.styles';
14+
15+
describe('euiTextStyles sizes', () => {
16+
TEXT_SIZES.forEach((size) => {
17+
test(size, () => {
18+
const emotionReturn = testCustomHook(() => euiTextStyles(useEuiTheme()))
19+
.return as any;
20+
expect(emotionReturn[size].styles).toMatchSnapshot();
21+
});
22+
});
23+
});

‎src/components/text/text.styles.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88

99
import { css } from '@emotion/react';
1010
import { UseEuiTheme } from '../../services';
11-
import { euiFontSize, _FontScaleOptions } from '../../global_styling';
11+
import {
12+
logicalCSS,
13+
euiFontSize,
14+
_FontScaleOptions,
15+
} from '../../global_styling';
1216

1317
import { euiLinkCSS } from '../link/link.styles';
1418
import { euiTitle } from '../title/title.styles';
@@ -34,10 +38,32 @@ const euiScaleText = (
3438
options: _FontScaleOptions
3539
) => {
3640
const { fontSize, lineHeight } = euiFontSize('m', euiTheme, options);
41+
const { measurement } = options;
42+
const lineHeightSize = measurement === 'em' ? `${lineHeight}em` : lineHeight;
3743

3844
return `
3945
font-size: ${fontSize};
4046
line-height: ${lineHeight};
47+
48+
p,
49+
ul,
50+
ol,
51+
dl,
52+
blockquote,
53+
img,
54+
pre {
55+
${logicalCSS('margin-bottom', lineHeightSize)}
56+
}
57+
58+
ul,
59+
ol {
60+
${logicalCSS('margin-left', lineHeightSize)}
61+
}
62+
63+
blockquote {
64+
font-size: ${fontSize};
65+
padding: ${lineHeightSize};
66+
}
4167
`;
4268
};
4369

0 commit comments

Comments
 (0)