[Emotion] Convert EuiTitle #5842

cee-chen · 2022-04-25T21:26:46Z

Summary

I strongly recommend following along by commit.

What this PR does:

Converts EuiTitle fully over to CSS-in-JS
Removes extra CSS modifier classes (5404cb8)
- I grepped through Kibana and this will only affect in snapshot changes and 1 source code usage that should be converted to <EuiTitle /> in any case
Adds an euiTextBreakWord CSS 'mixin' that matches what EuiBeacon did with euiCanAnimate
Creates a CSS-in-JS version of the euiTitle() Sass mixin, that now lives in the component directory and not in global_styling
- This is a deliberate breaking change away from our previous Sass theme variables that allowed styling titles per-sizes
- Per @thompsongl: Moving more styling into the component makes it easier for a component to react to theme differences, rather than needing the theme to account for each component

What this PR does not do:

Look through internal usage of the euiTitle() Sass mixin and potentially convert them <EuiTitle /> (TBD, hopefully my next PR)
Delete the euiTitle() Sass mixin or $euiTitles Sass variable/JSON mappings
Update documentation around the Sass mixin or variable

Checklist

Does the output CSS match the previous CSS / as expected
Does the rendered class read as expected

src/components/title/title.styles.ts

upcoming_changelogs/5842.md

kibanamachine · 2022-04-25T22:08:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/

cchaos

Update documentation around the Sass mixin or variable

I highly suggest adding documentation around the new JS version of euiTextBreakWord. You can just follow the same pattern as we did for Scroll and create a new Utility page for Text and move the CSS utilities there too. If you really want to do that in a follow up, that's fine as long as we're tracking those somewhere. But I'm hoping not to fall into the trap where we had so many undocumented but helpful Sass helpers/mixins.

src/global_styling/variables/typography.ts

src/components/title/title.styles.ts

- not yet touching the mixin

- and per-theme titles settings - just amsterdam for now, but we can possibly expand this if we add more themes in the future + delete old global_styling title files in favor of component-specific logic

+ fix test failure due to emotion sometimes generating a random 6 character className

cee-chen · 2022-04-27T00:37:42Z

I think that should be all your comments addressed @cchaos (excepting euiTextBreakWord, if you're fine with that being a follow-up PR). Let me know what you think!

kibanamachine · 2022-04-27T01:18:47Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/

cchaos

Just a couple code nits while I spot check some of these downstream components

upcoming_changelogs/5842.md

cchaos · 2022-04-27T14:45:12Z

src/global_styling/variables/typography.ts

+
+export interface _EuiThemeTitle {
+  /**
+   * A font weight key for setting the base title weight


Suggested change

* A font weight key for setting the base title weight

* A font weight key for setting the base weight for titles and headings

We'll also need to add this to the Customizing section of the theme docs at some point. No rush now since we don't have anything setup yet for selecting from a list.

Also, do you think we should actually move the colors.title into this new theme key specifically? So we'd get:

euiTheme.title.weight and euiTheme.title.color

I'm good with that! I'll make that change here in a little bit

Oh actually, spoke too soon. Looks like we can't easily do that because colors has its own custom computed logic plus light vs dark mode settings. We should probably just leave it where it is 🤔

No problem, we can check it out in a later PR.

src/components/title/title.styles.ts

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

cchaos

I've checked through the updated snapshot components for any regressions, didn't find anything too big. I think just one small thing we can do here, the rest will follow up on.

src/components/steps/__snapshots__/step.test.tsx.snap

src/components/tour/__snapshots__/tour_step.test.tsx.snap

cee-chen · 2022-04-27T18:30:32Z

jenkins test this

leathekd · 2022-04-27T20:10:35Z

jenkins test this

kibanamachine · 2022-04-27T20:40:06Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5842/

cee-chen added the emotion label Apr 25, 2022

cee-chen requested review from cchaos and thompsongl April 25, 2022 21:26

cee-chen commented Apr 25, 2022

View reviewed changes

src/components/title/title.styles.ts Outdated Show resolved Hide resolved

src/components/title/title.styles.ts Outdated Show resolved Hide resolved

src/components/title/title.styles.ts Outdated Show resolved Hide resolved

upcoming_changelogs/5842.md Show resolved Hide resolved

cchaos suggested changes Apr 26, 2022

View reviewed changes

cee-chen added 12 commits April 26, 2022 17:32

Set up basic CSS-in-JS styles

9d37f3a

- not yet touching the mixin

DRY out shared euiTextBreakWord and color used in Sass mixin

5df2e0e

Create JS euiTitle() mixin and add sizes styling

2a593fb

- and per-theme titles settings - just amsterdam for now, but we can possibly expand this if we add more themes in the future + delete old global_styling title files in favor of component-specific logic

Add hook version + unit tests for euiTitle() mixin

39ef091

Remove Sass files and className maps

e0c1cdc

Update EuiTitle tests/snapshots

154b1cd

+ fix test failure due to emotion sometimes generating a random 6 character className

Update downstream snapshots consuming EuiTitle

4d98003

Add changelog entry

cfffc8c

[PR feedback] Move euiTextBreakWord out of variables and to mixins

d6236a5

[PR feedback] add euiTheme.font.title.weight key

fac3d72

[PR feedback] Remove letterSpacing

8efc69b

[PR feedback] Simplify title font sizes & line heights

9584973

cee-chen force-pushed the emotion/eui-title branch from e828c51 to dfc1e0a Compare April 27, 2022 00:32

cee-chen added 2 commits April 26, 2022 17:48

[PR feedback] Move color back into mixin

47cc9bc

Update snapshots

c5ebeff

cee-chen force-pushed the emotion/eui-title branch from dfc1e0a to c5ebeff Compare April 27, 2022 00:48

cchaos reviewed Apr 27, 2022

View reviewed changes

cchaos mentioned this pull request Apr 27, 2022

[Emotion] Convert the rest of the Loading components #5845

Merged

6 tasks

[PR feedback] Copy

ee34565

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

cchaos approved these changes Apr 27, 2022

View reviewed changes

src/components/steps/__snapshots__/step.test.tsx.snap Show resolved Hide resolved

src/components/tour/__snapshots__/tour_step.test.tsx.snap Show resolved Hide resolved

cchaos mentioned this pull request Apr 27, 2022

[EuiStep] Add padding to step title to better align with icon #5847

Closed

[PR feedback] Standardize EuiStep title font weight

3bf3262

cee-chen enabled auto-merge (squash) April 27, 2022 16:51

cchaos mentioned this pull request Apr 27, 2022

[EuiTour] Add extra spacing between the title and subtitle #5848

Closed

cee-chen merged commit a66b23c into elastic:main Apr 27, 2022

cee-chen deleted the emotion/eui-title branch April 27, 2022 20:57

This was referenced May 2, 2022

[Meta][CSS-in-JS] Component conversions #5685

Closed

[CSS-in-JS] Convert EuiScreenReaderOnly #5846

Merged

breehall mentioned this pull request May 16, 2022

Upgrade EUI to v58.0.0 elastic/kibana#132257

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiTitle #5842

[Emotion] Convert EuiTitle #5842

cee-chen commented Apr 25, 2022 •

edited

Loading

kibanamachine commented Apr 25, 2022

cchaos left a comment

cee-chen commented Apr 27, 2022

kibanamachine commented Apr 27, 2022

cchaos left a comment

cchaos Apr 27, 2022

cchaos Apr 27, 2022

cee-chen Apr 27, 2022

cee-chen Apr 27, 2022 •

edited

Loading

cchaos Apr 27, 2022

cchaos left a comment

cee-chen commented Apr 27, 2022

leathekd commented Apr 27, 2022

kibanamachine commented Apr 27, 2022

	* A font weight key for setting the base title weight
	* A font weight key for setting the base weight for titles and headings

[Emotion] Convert EuiTitle #5842

[Emotion] Convert EuiTitle #5842

Conversation

cee-chen commented Apr 25, 2022 • edited Loading

Summary

Checklist

kibanamachine commented Apr 25, 2022

cchaos left a comment

Choose a reason for hiding this comment

cee-chen commented Apr 27, 2022

kibanamachine commented Apr 27, 2022

cchaos left a comment

Choose a reason for hiding this comment

cchaos Apr 27, 2022

Choose a reason for hiding this comment

cchaos Apr 27, 2022

Choose a reason for hiding this comment

cee-chen Apr 27, 2022

Choose a reason for hiding this comment

cee-chen Apr 27, 2022 • edited Loading

Choose a reason for hiding this comment

cchaos Apr 27, 2022

Choose a reason for hiding this comment

cchaos left a comment

Choose a reason for hiding this comment

cee-chen commented Apr 27, 2022

leathekd commented Apr 27, 2022

kibanamachine commented Apr 27, 2022

cee-chen commented Apr 25, 2022 •

edited

Loading

cee-chen Apr 27, 2022 •

edited

Loading