Skip to content

Commit fb461ac

Browse files
weronikaolejniczaktkajtoch
weronikaolejniczak
and
tkajtoch
authored
feat(website): add typography utilities documentation (#8913)
Co-authored-by: Tomasz Kajtoch <[email protected]>
1 parent 62efd1c commit fb461ac

File tree

2 files changed

+275
-17
lines changed

2 files changed

+275
-17
lines changed

‎packages/website/docs/getting-started/theming/utilities/preview_utilities.tsx‎

Lines changed: 165 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,18 @@ import {
66
useEuiTheme,
77
EuiTextAlign,
88
EuiFlexGrid,
9+
EuiFlexGroup,
910
EuiFlexItem,
1011
EuiPanel,
1112
EuiTextColor,
1213
EuiCode,
14+
EuiText,
15+
EuiSpacer,
16+
} from '@elastic/eui';
17+
import {
18+
euiFontSizeFromScale,
19+
euiLineHeightFromBaseline,
20+
euiTextShift,
1321
} from '@elastic/eui';
1422

1523
const maxWidth = 300;
@@ -114,26 +122,26 @@ export const NumbersFormatFnPreview = () => {
114122
<EuiTextAlign textAlign="right">
115123
<EuiFlexGrid columns={2}>
116124
<EuiFlexItem>
117-
<p>
125+
<EuiText>
118126
<strong>Without function</strong>
119-
<br />
127+
<EuiSpacer size="s" />
120128
11317.11
121-
<br />
129+
<EuiSpacer size="s" />
122130
0040.900
123-
</p>
131+
</EuiText>
124132
</EuiFlexItem>
125133
<EuiFlexItem>
126-
<p
134+
<EuiText
127135
css={css`
128136
${euiNumberFormat(euiTheme)}
129137
`}
130138
>
131139
<strong>With function</strong>
132-
<br />
140+
<EuiSpacer size="s" />
133141
11317.11
134-
<br />
142+
<EuiSpacer size="s" />
135143
0040.900
136-
</p>
144+
</EuiText>
137145
</EuiFlexItem>
138146
</EuiFlexGrid>
139147
</EuiTextAlign>
@@ -145,22 +153,22 @@ export const NumbersFormatPreview = () => {
145153
<EuiTextAlign textAlign="right">
146154
<EuiFlexGrid columns={2}>
147155
<EuiFlexItem>
148-
<p>
156+
<EuiText>
149157
<strong>Without class</strong>
150-
<br />
158+
<EuiSpacer size="s" />
151159
11317.11
152-
<br />
160+
<EuiSpacer size="s" />
153161
0040.900
154-
</p>
162+
</EuiText>
155163
</EuiFlexItem>
156164
<EuiFlexItem>
157-
<p className="eui-textNumber">
165+
<EuiText className="eui-textNumber">
158166
<strong>With class</strong>
159-
<br />
167+
<EuiSpacer size="s" />
160168
11317.11
161-
<br />
169+
<EuiSpacer size="s" />
162170
0040.900
163-
</p>
171+
</EuiText>
164172
</EuiFlexItem>
165173
</EuiFlexGrid>
166174
</EuiTextAlign>
@@ -175,3 +183,144 @@ export const ColorInheritPreview = () => {
175183
</EuiTextColor>
176184
);
177185
};
186+
187+
export const FontSizeFromScaleFnPreview = () => {
188+
const { euiTheme } = useEuiTheme();
189+
190+
return (
191+
<EuiFlexGrid columns={3}>
192+
<EuiFlexItem>
193+
<EuiText
194+
css={css`
195+
font-size: ${euiFontSizeFromScale('s', euiTheme)};
196+
`}
197+
>
198+
<strong>s scale</strong>
199+
<EuiSpacer size="s" />
200+
This text uses <EuiCode>euiFontSizeFromScale('s')</EuiCode>
201+
</EuiText>
202+
</EuiFlexItem>
203+
<EuiFlexItem>
204+
<EuiText
205+
css={css`
206+
font-size: ${euiFontSizeFromScale('m', euiTheme)};
207+
`}
208+
>
209+
<strong>m scale</strong>
210+
<EuiSpacer size="s" />
211+
This text uses <EuiCode>euiFontSizeFromScale('m')</EuiCode>
212+
</EuiText>
213+
</EuiFlexItem>
214+
<EuiFlexItem>
215+
<EuiText
216+
css={css`
217+
font-size: ${euiFontSizeFromScale('l', euiTheme)};
218+
`}
219+
>
220+
<strong>l scale</strong>
221+
<EuiSpacer size="s" />
222+
This text uses <EuiCode>euiFontSizeFromScale('l')</EuiCode>
223+
</EuiText>
224+
</EuiFlexItem>
225+
</EuiFlexGrid>
226+
);
227+
};
228+
229+
export const LineHeightFromBaselineFnPreview = () => {
230+
const { euiTheme } = useEuiTheme();
231+
232+
return (
233+
<EuiFlexGrid columns={2}>
234+
<EuiFlexItem>
235+
<EuiText
236+
css={css`
237+
padding: 0.5em 1em;
238+
font-size: ${euiFontSizeFromScale('m', euiTheme)};
239+
line-height: 1.5;
240+
background-color: rgba(255, 0, 0, 0.1);
241+
`}
242+
>
243+
<strong>Regular line-height: 1.5</strong>
244+
<EuiSpacer size="s" />
245+
This text uses a regular line-height of 1.5. Notice how it doesn't
246+
align to the baseline grid.
247+
</EuiText>
248+
</EuiFlexItem>
249+
<EuiFlexItem>
250+
<EuiText
251+
css={css`
252+
padding: 0.5em 1em;
253+
font-size: ${euiFontSizeFromScale('m', euiTheme)};
254+
line-height: ${euiLineHeightFromBaseline('m', euiTheme)};
255+
background-color: rgba(0, 255, 0, 0.1);
256+
`}
257+
>
258+
<strong>Baseline-aligned line-height</strong>
259+
<EuiSpacer size="s" />
260+
This text uses <EuiCode>euiLineHeightFromBaseline('m')</EuiCode> to
261+
align to the baseline grid for consistency.
262+
</EuiText>
263+
</EuiFlexItem>
264+
</EuiFlexGrid>
265+
);
266+
};
267+
268+
export const TextShiftFnPreview = () => {
269+
const { euiTheme } = useEuiTheme();
270+
271+
return (
272+
<EuiFlexGrid columns={2}>
273+
<EuiFlexItem>
274+
<EuiText>
275+
Without <EuiCode>euiTextShift</EuiCode>
276+
</EuiText>
277+
<EuiSpacer size="s" />
278+
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
279+
<EuiFlexItem grow={false}>
280+
<EuiPanel
281+
paddingSize="s"
282+
color="subdued"
283+
css={css`
284+
cursor: pointer;
285+
&:hover {
286+
font-weight: ${euiTheme.font.weight.bold};
287+
}
288+
`}
289+
>
290+
Hover me
291+
</EuiPanel>
292+
</EuiFlexItem>
293+
<EuiText size="s"> - Notice layout shift on hover</EuiText>
294+
</EuiFlexGroup>
295+
</EuiFlexItem>
296+
<EuiFlexItem>
297+
<EuiText>
298+
With <EuiCode>euiTextShift</EuiCode>
299+
</EuiText>
300+
<EuiSpacer size="s" />
301+
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
302+
<EuiFlexItem grow={false}>
303+
<EuiPanel
304+
paddingSize="s"
305+
color="subdued"
306+
data-text="Hover me" // important for euiTextShift
307+
css={css`
308+
cursor: pointer;
309+
310+
${euiTextShift('bold', 'data-text', euiTheme)}
311+
&:hover {
312+
font-weight: ${euiTheme.font.weight.bold};
313+
}
314+
`}
315+
>
316+
Hover me
317+
</EuiPanel>
318+
</EuiFlexItem>
319+
<EuiFlexItem>
320+
<EuiText size="s"> - No layout shift on hover</EuiText>
321+
</EuiFlexItem>
322+
</EuiFlexGroup>
323+
</EuiFlexItem>
324+
</EuiFlexGrid>
325+
);
326+
};

0 commit comments

Comments
 (0)