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

Fix text wrapping utilities #2157

Merged
merged 5 commits into from
Jul 23, 2019
Merged

Fix text wrapping utilities #2157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0fbd26d
Fix word breaking CSS utilites properties
Jul 23, 2019
fe0e0e6
Set `.eui-textOverflowWrap` to be deprecated
Jul 23, 2019
0ff462f
Fix up guidelines and change `. euiYScrollWithShadows` to `.eui-yScro…
Jul 23, 2019
25c411f
cl
Jul 23, 2019
d2c4c6c
Merge branch 'master' into fix-text-wrapping-utilities
cchaos Jul 23, 2019
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

- Fixed invalid `aria-desribedby` values set by `EuiToolTip` ([#2156](https://github.com/elastic/eui/pull/2156))
- Added `"center"` as an acceptable value to `EuiBasicTable`'s `align` proptype ([#2158](https://github.com/elastic/eui/pull/2158))
- Fixed `.eui-textBreakWord` utility class to be cross-browser compatible ([#2157](https://github.com/elastic/eui/pull/2157))

## [`13.0.0`](https://github.com/elastic/eui/tree/v13.0.0)

Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/guidelines/sass.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,7 +762,7 @@ export const SassGuidelines = ({ selectedTheme }) => {
<Link to="/utilities/css-utility-classes">
CSS utility class
</Link>{' '}
<EuiCode>.euiYScrollWithShadows</EuiCode>.
<EuiCode>.eui-yScrollWithShadows</EuiCode>.
</p>
<p>
<b>Example:</b>
Expand Down
197 changes: 71 additions & 126 deletions src-docs/src/views/utility_classes/utility_classes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,36 @@ import {
const longLink =
'http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool';

const wrappingExampleStyle = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if it's any better or worse, and I know this was already in there, but anytime we've needed docs specific styling I've done it in the Sass over in this file.

https://github.com/elastic/eui/blob/master/src-docs/src/components/guide_components.scss

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... this was already in the file, I just noticed it was being repeated a lot, so I just moved it to a var.

width: 290,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
};

export default () => (
<EuiText>
<h4>Display</h4>

<EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>

<EuiSpacer />

<EuiCode className="eui-displayInline">.eui-displayInline</EuiCode>

<EuiSpacer />

<EuiCode className="eui-displayInlineBlock">
.eui-displayInlineBlock
</EuiCode>

<EuiSpacer />

<EuiCode className="eui-fullWidth">
.eui-fullWidth (similar to eui-displayBlock but adds 100% width)
</EuiCode>

<EuiSpacer />

<h4>Text</h4>

<EuiSpacer />
Expand All @@ -38,103 +66,77 @@ export default () => (

<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
className="eui-textNoWrap">
<EuiSpacer />

<div style={wrappingExampleStyle} className="eui-textNoWrap">
<EuiCode>.eui-textNoWrap</EuiCode> will force text not to wrap even in
small containers.
</div>

<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
className="eui-textTruncate">
<div style={wrappingExampleStyle} className="eui-textTruncate">
<EuiCode>.eui-textTruncate</EuiCode> will ellipsis after a certain point.
</div>

<EuiSpacer />
<h4>Word breaking</h4>
<p>
We recommend using <EuiCode>.eui-textOverflowWrap</EuiCode> to break on
long words above all other options as it is supported by all major
browsers (except for IE11). The one caveat is that it does not work on{' '}
<EuiCode>display: flex</EuiCode> elements. To remedy, you can either add
another wrapper with this class or use{' '}
<EuiCode>.eui-textBreakWord</EuiCode> instead.
</p>
<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
className="eui-textOverflowWrap">
<EuiCode>.eui-textOverflowWrap</EuiCode> will only break up at the end of
words. Long urls will still break
{longLink}.
<strong>
Falls back to <EuiCode>break-all</EuiCode> on IE11.
</strong>
</div>

<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
className="eui-textBreakWord">
<div style={wrappingExampleStyle} className="eui-textBreakWord">
<EuiCode>.eui-textBreakWord</EuiCode> will only break up at the end of
words. Long urls will still break
{longLink}.
<strong>
Falls back to <EuiCode>break-all</EuiCode> on Firefox and IE11.
</strong>
words. Long urls will still break {longLink}.
</div>

<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
className="eui-textBreakAll">
<div style={wrappingExampleStyle} className="eui-textBreakAll">
<EuiCode>.eui-textBreakAll</EuiCode> will break up anything. It is useful
for long urls like
{longLink}.
for long urls like {longLink}.
</div>

<EuiSpacer />

<div
style={{
width: 300,
padding: 16,
background: 'rgba(254, 228, 181, 0.5)',
}}
style={wrappingExampleStyle}
className="eui-textBreakWord eui-textBreakNormal">
<EuiCode>.eui-textBreakNormal</EuiCode> revert back to not forcing word
breaks. It is <strong>not</strong> useful for long urls like
{longLink}.
breaks. It is <strong>not</strong> useful for long urls like {longLink}.
</div>

<EuiSpacer />

<h4>Overflows</h4>

<div className="guideSass__overflowShadows">
<EuiText className="guideSass__overflowShadowText" size="s">
<p>
It requires a wrapping element to control the height with{' '}
<EuiCode>overflow-y: hidden;</EuiCode> and the content to use the CSS
utility class <EuiCode>.eui-yScrollWithShadows</EuiCode>.
</p>
<p>
<b>Example:</b>
</p>
<EuiCodeBlock language="html" isCopyable paddingSize="s">
{`<BodyContent style={{ height: 200, overflowY: 'hidden' }}>
<BodyScroll className="eui-yScrollWithShadows" />
</BodyContent>`}
</EuiCodeBlock>
<p>
Consequuntur atque nulla atque nemo tenetur numquam. Assumenda
aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor
qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut
similique ut. Sed repellendus commodi iure officiis exercitationem
praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam
id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
tempore sit placeat maxime laudantium. Mollitia tempore minus qui
autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit.
Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti
voluptates qui exercitationem dolores.
</p>
</EuiText>
</div>

<EuiSpacer />
<h4>Vertical alignment</h4>
<EuiSpacer />
Expand Down Expand Up @@ -171,63 +173,6 @@ export default () => (

<EuiSpacer />

<h4>Display</h4>

<EuiCode className="eui-displayBlock">.eui-displayBlock</EuiCode>

<EuiSpacer />

<EuiCode className="eui-displayInline">.eui-displayInline</EuiCode>

<EuiSpacer />

<EuiCode className="eui-displayInlineBlock">
.eui-displayInlineBlock
</EuiCode>

<EuiSpacer />

<EuiCode className="eui-fullWidth">
.eui-fullWidth (similar to eui-displayBlock but adds 100% width)
</EuiCode>

<EuiSpacer />

<h4>Overflows</h4>

<div className="guideSass__overflowShadows">
<EuiText className="guideSass__overflowShadowText" size="s">
<p>
It requires a wrapping element to control the height with{' '}
<EuiCode>overflow-y: hidden;</EuiCode> and the content to use the CSS
utility class <EuiCode>.euiYScrollWithShadows</EuiCode>.
</p>
<p>
<b>Example:</b>
</p>
<EuiCodeBlock language="html" isCopyable paddingSize="s">
{`<BodyContent style={{ height: 200, overflowY: 'hidden' }}>
<BodyScroll className="euiYScrollWithShadows" />
</BodyContent>`}
</EuiCodeBlock>
<p>
Consequuntur atque nulla atque nemo tenetur numquam. Assumenda
aspernatur qui aut sit. Aliquam doloribus iure sint id. Possimus dolor
qui soluta cum id tempore ea illum. Facilis voluptatem aut aut ut
similique ut. Sed repellendus commodi iure officiis exercitationem
praesentium dolor. Ratione non ut nulla accusamus et. Optio laboriosam
id incidunt. Ipsam voluptate ab quia necessitatibus sequi earum
voluptate. Porro tempore et veritatis quo omnis. Eaque ut libero
tempore sit placeat maxime laudantium. Mollitia tempore minus qui
autem modi adipisci ad. Iste reprehenderit accusamus voluptatem velit.
Quidem delectus eos veritatis et vitae et nisi. Doloribus ut corrupti
voluptates qui exercitationem dolores.
</p>
</EuiText>
</div>

<EuiSpacer />

<h4>Responsive</h4>

<EuiCode className="eui-hideFor--xs">.eui-hideFor--xs</EuiCode>
Expand Down
19 changes: 15 additions & 4 deletions src/global_styling/utility/_utility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,23 @@
.eui-textInheritColor {color: inherit !important;}

.eui-textBreakWord {
word-break: break-all !important; // Fallback for FF and IE
word-break: break-word !important;
// https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for including stuff like this.

overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
word-wrap: break-word !important; // spec says, they are literally just alternate names for each other but some browsers support one and not the other
word-break: break-word; // IE doesn't understand but that's ok
}
.eui-textBreakAll {word-break: break-all !important;}
.eui-textBreakNormal {word-break: normal !important;}

.eui-textBreakAll {
word-break: break-all !important;
}

.eui-textBreakNormal {
overflow-wrap: normal !important;
word-wrap: normal !important;
word-break: normal !important;
}

// TODO: 7/23 DEPRECATE in favor of .eui-textBreakWord now that it's working as intended
.eui-textOverflowWrap {
@include internetExplorerOnly {
word-break: break-all !important;
Expand Down