Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Emotion] Convert EuiTitle #5842

Merged
merged 16 commits into from
Apr 27, 2022
Merged

[Emotion] Convert EuiTitle #5842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
9d37f3a
Set up basic CSS-in-JS styles
cee-chen Apr 25, 2022
5df2e0e
DRY out shared `euiTextBreakWord` and `color` used in Sass mixin
cee-chen Apr 25, 2022
2a593fb
Create JS euiTitle() mixin and add sizes styling
cee-chen Apr 25, 2022
39ef091
Add hook version + unit tests for euiTitle() mixin
cee-chen Apr 25, 2022
e0c1cdc
Remove Sass files and className maps
cee-chen Apr 25, 2022
154b1cd
Update EuiTitle tests/snapshots
cee-chen Apr 25, 2022
4d98003
Update downstream snapshots consuming EuiTitle
cee-chen Apr 25, 2022
cfffc8c
Add changelog entry
cee-chen Apr 25, 2022
d6236a5
[PR feedback] Move `euiTextBreakWord` out of variables and to mixins
cee-chen Apr 27, 2022
fac3d72
[PR feedback] add `euiTheme.font.title.weight` key
cee-chen Apr 27, 2022
8efc69b
[PR feedback] Remove letterSpacing
cee-chen Apr 27, 2022
9584973
[PR feedback] Simplify title font sizes & line heights
cee-chen Apr 27, 2022
47cc9bc
[PR feedback] Move `color` back into mixin
cee-chen Apr 27, 2022
c5ebeff
Update snapshots
cee-chen Apr 27, 2022
ee34565
[PR feedback] Copy
constancecchen Apr 27, 2022
3bf3262
[PR feedback] Standardize EuiStep title font weight
cee-chen Apr 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 114 additions & 38 deletions src/components/card/__snapshots__/card.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions ...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand Down Expand Up @@ -119,7 +119,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand All @@ -145,7 +145,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand All @@ -171,7 +171,7 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme
class="euiFlexItem"
>
<h2
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand Down Expand Up @@ -224,7 +224,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand Down Expand Up @@ -289,7 +289,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
class="euiFlexItem"
>
<h3
class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
class="euiTitle euiCollapsibleNavGroup__title css-1po7voc-euiTitle-xxs"
id="id__title"
>
Title
Expand Down
4 changes: 2 additions & 2 deletions src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
class="euiEmptyPrompt__contentInner"
>
<h2
class="euiTitle euiTitle--medium"
class="euiTitle css-1w464ad-euiTitle-m"
>
Title
</h2>
Expand Down Expand Up @@ -508,7 +508,7 @@ exports[`EuiEmptyPrompt props title renders alone 1`] = `
class="euiEmptyPrompt__contentInner"
>
<div
class="euiTitle euiTitle--medium"
class="euiTitle css-1w464ad-euiTitle-m"
>
title
</div>
Expand Down
1 change: 0 additions & 1 deletion src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
@import 'table/index';
@import 'tabs/index';
@import 'text_diff/index';
@import 'title/index';
@import 'toast/index';
@import 'token/index';
@import 'tool_tip/index';
Expand Down
10 changes: 5 additions & 5 deletions src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -70,7 +70,7 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -116,7 +116,7 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -162,7 +162,7 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -244,7 +244,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
>
<h1
aria-label="aria-label"
class="euiTitle euiTitle--large testClass1 testClass2"
class="euiTitle testClass1 testClass2 css-1bexacr-euiTitle-l"
data-test-subj="test subject string"
>
<span
Expand Down
18 changes: 9 additions & 9 deletions src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -69,7 +69,7 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -111,7 +111,7 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -290,7 +290,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand Down Expand Up @@ -394,7 +394,7 @@ exports[`EuiPageHeaderContent props pageTitle is rendered 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
Page title
</h1>
Expand All @@ -414,7 +414,7 @@ exports[`EuiPageHeaderContent props pageTitle is rendered with icon 1`] = `
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
<span
class="euiPageHeaderContent__titleIcon"
Expand All @@ -438,7 +438,7 @@ exports[`EuiPageHeaderContent props pageTitle is rendered with icon and iconProp
class="euiFlexItem"
>
<h1
class="euiTitle euiTitle--large"
class="euiTitle css-1bexacr-euiTitle-l"
>
<span
class="euiPageHeaderContent__titleIcon testClass1 testClass2"
Expand Down Expand Up @@ -466,7 +466,7 @@ exports[`EuiPageHeaderContent props pageTitle is rendered with pageTitleProps 1`
>
<h1
aria-label="aria-label"
class="euiTitle euiTitle--large testClass1 testClass2"
class="euiTitle testClass1 testClass2 css-1bexacr-euiTitle-l"
data-test-subj="test subject string"
>
Page title
Expand Down
12 changes: 12 additions & 0 deletions src/components/provider/__snapshots__/provider.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,9 @@ exports[`EuiProvider applying modifications propagates \`modify\` 1`] = `
"xxs": 0.6875,
"xxxs": 0.5625,
},
"title": Object {
"weight": "bold",
},
"weight": Object {
"bold": 700,
"light": 300,
Expand Down Expand Up @@ -555,6 +558,9 @@ exports[`EuiProvider changing color modes propagates \`colorMode\` 1`] = `
"xxs": 0.6875,
"xxxs": 0.5625,
},
"title": Object {
"weight": "bold",
},
"weight": Object {
"bold": 700,
"light": 300,
Expand Down Expand Up @@ -860,6 +866,9 @@ exports[`EuiProvider is rendered 1`] = `
"xxs": 0.6875,
"xxxs": 0.5625,
},
"title": Object {
"weight": "bold",
},
"weight": Object {
"bold": 700,
"light": 300,
Expand Down Expand Up @@ -1186,6 +1195,9 @@ exports[`EuiProvider providing an @emotion cache config applies the cache to glo
"xxs": 0.6875,
"xxxs": 0.5625,
},
"title": Object {
"weight": "bold",
},
"weight": Object {
"bold": 700,
"light": 300,
Expand Down
4 changes: 2 additions & 2 deletions src/components/side_nav/__snapshots__/side_nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`EuiSideNav props heading accepts more headingProps 1`] = `
>
<h3
aria-label="aria-label"
class="euiTitle euiTitle--xsmall euiSideNav__heading testClass1 testClass2 testClass1 testClass2"
class="euiTitle euiSideNav__heading testClass1 testClass2 testClass1 testClass2 css-1c9cwui-euiTitle-xs"
data-test-subj="test subject string"
id="testID"
>
Expand Down Expand Up @@ -57,7 +57,7 @@ exports[`EuiSideNav props heading is rendered 1`] = `
class="euiSideNav"
>
<h2
class="euiTitle euiTitle--xsmall euiSideNav__heading"
class="euiTitle euiSideNav__heading css-1c9cwui-euiTitle-xs"
id="euiSideNav_generated-id_heading"
>
Side Nav Heading
Expand Down
Loading