-
Notifications
You must be signed in to change notification settings - Fork 831
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.
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 Sass typography mixins to JS #5854
Merged
Merged
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
c966bca
Add unit tests for euiFontSize mixin
cee-chen 16c7195
Convert euiTextBreakWord to function + add unit test
cee-chen db454d8
[misc] fix downstream mounted snapshot by changing to render
cee-chen 90fc6de
Convert euiTextTruncate mixin from Sass to CSS-in-JS
cee-chen c1a3273
Convert euiNumberFormat mixin from Sass to CSS-in-JS
cee-chen 545eba1
Convert euiTextShift from Sass to CSS-in-JS + move to `functions` rat…
cee-chen 27ac2f3
[Docs] Move text utilities to their own page
cee-chen c4f1e5e
[Docs] Split text utilities into sections + add mixin snippets
cee-chen 9fe7b65
[Docs] Add prop to ThemeExample that allows stacking/removing margin-…
cee-chen 14c4604
[PR feedback] Remove margin-bottom/stacking behavior - Caroline will …
cee-chen ab3f6b1
[PR feedback] Documentation copy + example fixes
cee-chen e257273
[PR feedback] Comment copy, remove IE workaround
cee-chen a3cff1f
[PR feedback] DRY out unit measurement tests
cee-chen 65517bf
[PR feedback] Fix euiNumberFormat to use `euiTheme.font.featureSettings`
cee-chen ec27f55
[PR feedback] Add callouts to CSS utilities docs page
cee-chen b4d2c2d
[PR feedback] Tweak text align documentation
cee-chen b0467f8
[PR feedback] Document euiTextTruncate parameters in title
constancecchen e38cd3a
Add changelog entry
cee-chen File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import React from 'react'; | ||
|
||
import { EuiCode, EuiMark } from '../../../../src'; | ||
import { ThemeExample } from '../theme/_components/_theme_example'; | ||
|
||
export default () => ( | ||
<> | ||
<ThemeExample | ||
title={<code>.eui-textLeft</code>} | ||
description={ | ||
<p> | ||
Changes the element’s text alignment property to{' '} | ||
<EuiCode language="sass">text-align: left;</EuiCode> | ||
</p> | ||
} | ||
example={ | ||
<div className="eui-textLeft"> | ||
<EuiMark>Left align text</EuiMark> | ||
</div> | ||
} | ||
snippet={`<div className="eui-textLeft"> | ||
/* Your content */ | ||
</div>`} | ||
/> | ||
|
||
<ThemeExample | ||
title={<code>.eui-textCenter</code>} | ||
description={ | ||
<p> | ||
Changes the element’s text alignment property to{' '} | ||
<EuiCode language="sass">text-align: center;</EuiCode> | ||
</p> | ||
} | ||
example={ | ||
<div className="eui-textCenter"> | ||
<EuiMark>Center align text</EuiMark> | ||
</div> | ||
} | ||
snippet={`<div className="eui-textCenter"> | ||
/* Your content */ | ||
</div>`} | ||
/> | ||
|
||
<ThemeExample | ||
title={<code>.eui-textRight</code>} | ||
description={ | ||
<p> | ||
Changes the element’s text alignment property to{' '} | ||
<EuiCode language="sass">text-align: right;</EuiCode> | ||
</p> | ||
} | ||
example={ | ||
<div className="eui-textRight"> | ||
<EuiMark>Right align text</EuiMark> | ||
</div> | ||
} | ||
snippet={`<div className="eui-textRight"> | ||
/* Your content */ | ||
</div>`} | ||
/> | ||
</> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import React from 'react'; | ||
import { Link } from 'react-router-dom'; | ||
|
||
import { EuiCode, EuiTextColor } from '../../../../src'; | ||
import { ThemeExample } from '../theme/_components/_theme_example'; | ||
|
||
export default () => ( | ||
<ThemeExample | ||
title={<code>.eui-textInheritColor</code>} | ||
description={ | ||
<> | ||
<p>Forces the component to inherit its text color from its parent.</p> | ||
<p> | ||
For changing the color of your text to on of the named colors,{' '} | ||
<Link to="/display/text#coloring-text"> | ||
use <strong>EuiText</strong> or <strong>EuiTextColor</strong> | ||
</Link> | ||
. | ||
</p> | ||
</> | ||
} | ||
example={ | ||
<EuiTextColor color="danger"> | ||
<EuiCode className="eui-textInheritColor">I am code</EuiCode> that | ||
matches the EuiTextColor | ||
</EuiTextColor> | ||
} | ||
snippet={`<EuiTextColor color="danger"> | ||
<EuiCode className="eui-textInheritColor">I am danger code</EuiCode> | ||
</EuiTextColor>`} | ||
/> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
import React, { useContext } from 'react'; | ||
|
||
import { ThemeContext } from '../../components/with_theme'; | ||
|
||
import { | ||
EuiCode, | ||
EuiTextAlign, | ||
EuiFlexGrid, | ||
EuiFlexItem, | ||
} from '../../../../src'; | ||
import { ThemeExample } from '../theme/_components/_theme_example'; | ||
|
||
export default () => { | ||
const themeContext = useContext(ThemeContext); | ||
const currentLanguage = themeContext.themeLanguage; | ||
const showSass = currentLanguage.includes('sass'); | ||
|
||
return ( | ||
<> | ||
<ThemeExample | ||
title={<code>.eui-textNumber</code>} | ||
description={ | ||
<p> | ||
Applies{' '} | ||
<EuiCode language="sass"> | ||
{'font-feature-settings: "tnum";'} | ||
</EuiCode>{' '} | ||
so that numbers align more properly in a column, especially when | ||
right aligned. | ||
</p> | ||
} | ||
example={ | ||
<EuiTextAlign textAlign="right"> | ||
<EuiFlexGrid columns={2}> | ||
<EuiFlexItem> | ||
<p> | ||
<strong>Without class</strong> | ||
<br /> | ||
11317.11 | ||
<br /> | ||
0040.900 | ||
</p> | ||
</EuiFlexItem> | ||
<EuiFlexItem> | ||
<p className="eui-textNumber"> | ||
<strong>With class</strong> | ||
<br /> | ||
11317.11 | ||
<br /> | ||
0040.900 | ||
</p> | ||
</EuiFlexItem> | ||
</EuiFlexGrid> | ||
</EuiTextAlign> | ||
} | ||
snippet={`<div className="eui-textNumber"> | ||
/* Your number content */ | ||
</div>`} | ||
hasSpacing={false} | ||
/> | ||
{/* Mixin */} | ||
{!showSass ? ( | ||
<ThemeExample | ||
title={<code>euiNumberFormat()</code>} | ||
description={ | ||
<p> | ||
Use this style function to apply{' '} | ||
<EuiCode>.eui-textNumber</EuiCode> within your CSS-in-JS styling. | ||
cee-chen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
No parameters are taken for this utility. | ||
</p> | ||
} | ||
snippet={'${euiNumberFormat()}'} | ||
snippetLanguage="emotion" | ||
/> | ||
) : ( | ||
<ThemeExample | ||
title={<code>Mixin</code>} | ||
description={ | ||
<p> | ||
Use this Sass mixin to apply <EuiCode>.eui-textNumber</EuiCode>{' '} | ||
within your classes. No parameters are taken for this utility. | ||
cee-chen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</p> | ||
} | ||
snippet={'@include euiNumberFormat;'} | ||
snippetLanguage="scss" | ||
/> | ||
)} | ||
</> | ||
); | ||
}; |
45 changes: 45 additions & 0 deletions
45
src-docs/src/views/text_utilities/text_utilities_example.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import React from 'react'; | ||
|
||
import { EuiText } from '../../../../src/components'; | ||
|
||
import TextAlignUtilities from './align'; | ||
import TextWrappingUtilities from './wrapping'; | ||
import TextNumberUtilities from './numbers'; | ||
import TextColorUtilities from './color'; | ||
|
||
export const TextUtilitiesExample = { | ||
title: 'Text', | ||
showThemeLanguageToggle: true, | ||
intro: ( | ||
<EuiText> | ||
<p> | ||
These text utilities are available primarily as CSS classes to aid in | ||
quickly tweaking your text. Some utilities are additionally available as | ||
cee-chen marked this conversation as resolved.
Show resolved
Hide resolved
|
||
either CSS-in-JS or Sass mixins to optionally compose within your own | ||
custom styles. | ||
</p> | ||
</EuiText> | ||
), | ||
sections: [ | ||
{ | ||
title: 'Alignment', | ||
wrapText: false, | ||
text: <TextAlignUtilities />, | ||
}, | ||
{ | ||
title: 'Wrapping', | ||
wrapText: false, | ||
text: <TextWrappingUtilities />, | ||
}, | ||
{ | ||
title: 'Numbers', | ||
wrapText: false, | ||
text: <TextNumberUtilities />, | ||
}, | ||
{ | ||
title: 'Color', | ||
wrapText: false, | ||
text: <TextColorUtilities />, | ||
}, | ||
], | ||
}; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just realized we need to be changing these all to logical properties. 😬
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would still keep the name of the thing as
left
andright
, but the output should be logical.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As in I should be changing this in Sass itself? Could we maybe wait until we convert our Sass-only text utils to CSS-in-JS globals before doing this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry no, I didn't realize this PR didn't contain the JS version of the Sass utility. When we do convert the pure utility, we need to make sure output uses the logical properties. Then in this description, instead of explicitly saying what the output style is, we'd just say something like:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahh gotcha! Makes sense.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I made that documentation tweak while here since I figured it was easy enough - LMK if you'd rather revert/wait until we tackle Sass/Emotion globals b4d2c2d