Skip to content

[OUI Docs] Updated the content and Icons in the section CssUtilityClasses #368

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

Merged
seanneumann merged 1 commit into from
Feb 26, 2023
Merged

[OUI Docs] Updated the content and Icons in the section CssUtilityClasses #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
59 changes: 33 additions & 26 deletions src-docs/src/views/utility_classes/utility_classes_overflow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,22 +61,25 @@ export default () => (
size="s"
style={{ padding: 16 }}>
<p>
Orbiting this at a distance of roughly ninety-two million miles is
an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed, ullamcorper
eget nibh. Donec ligula orci, vestibulum eget lacus eget, luctus
feugiat sapien. Aliquam et elementum ante. Donec malesuada tellus
sit amet lorem convallis, et convallis massa suscipit. Nullam
dolor libero, placerat ac mi at, ultrices scelerisque neque
</p>
<p>
Orbiting this at a distance of roughly ninety-two million miles is
an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed, ullamcorper
eget nibh. Donec ligula orci, vestibulum eget lacus eget, luctus
feugiat sapien. Aliquam et elementum ante. Donec malesuada tellus
sit amet lorem convallis, et convallis massa suscipit. Nullam
dolor libero, placerat ac mi at, ultrices scelerisque neque
</p>
<p>
Orbiting this at a distance of roughly ninety-two million miles is
an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed, ullamcorper
eget nibh. Donec ligula orci, vestibulum eget lacus eget, luctus
feugiat sapien. Aliquam et elementum ante. Donec malesuada tellus
sit amet lorem convallis, et convallis massa suscipit. Nullam
dolor libero, placerat ac mi at, ultrices scelerisque neque
</p>
</OuiText>
</OuiPanel>
Expand Down Expand Up @@ -117,10 +120,12 @@ export default () => (
<div tabIndex={0} className="oui-xScrollWithShadows">
<OuiText size="s" style={{ width: '150%', padding: 16 }}>
<p>
Orbiting this at a distance of roughly ninety-two million miles
is an utterly insignificant little blue green planet whose
ape-descended life forms are so amazingly primitive that they
still think digital watches are a pretty neat idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed, ullamcorper
eget nibh. Donec ligula orci, vestibulum eget lacus eget, luctus
feugiat sapien. Aliquam et elementum ante. Donec malesuada
tellus sit amet lorem convallis, et convallis massa suscipit.
Nullam dolor libero, placerat ac mi at, ultrices scelerisque
neque.
</p>
</OuiText>
</div>
Expand Down Expand Up @@ -166,11 +171,12 @@ export default () => (
<OuiPanel className="oui-yScroll" color="warning" tabIndex="0">
<OuiText size="s">
<p>
Orbiting this at a distance of roughly ninety-two million
miles is an utterly insignificant little blue green planet
whose ape-descended life forms are so amazingly primitive
that they still think digital watches are a pretty neat
idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed,
ullamcorper eget nibh. Donec ligula orci, vestibulum eget
lacus eget, luctus feugiat sapien. Aliquam et elementum
ante. Donec malesuada tellus sit amet lorem convallis, et
convallis massa suscipit. Nullam dolor libero, placerat ac
mi at, ultrices scelerisque neque.
</p>
</OuiText>
</OuiPanel>
Expand All @@ -179,11 +185,12 @@ export default () => (
<OuiPanel className="oui-yScroll" color="warning" tabIndex="0">
<OuiText size="s">
<p>
Orbiting this at a distance of roughly ninety-two million
miles is an utterly insignificant little blue green planet
whose ape-descended life forms are so amazingly primitive
that they still think digital watches are a pretty neat
idea.
Vestibulum ipsum ipsum, dapibus iaculis rutrum sed,
ullamcorper eget nibh. Donec ligula orci, vestibulum eget
lacus eget, luctus feugiat sapien. Aliquam et elementum
ante. Donec malesuada tellus sit amet lorem convallis, et
convallis massa suscipit. Nullam dolor libero, placerat ac
mi at, ultrices scelerisque neque.
</p>
</OuiText>
</OuiPanel>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/utility_classes/utility_classes_text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
import { UtilityClassesSection } from './utility_classes_section';

const longLink =
'http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool';
'https://playground.opensearch.org/app/dashboards#/list?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-15m,to:now))';

const wrappingExampleStyle = {
background: 'rgba(254, 228, 181, 0.5)',
Expand Down
38 changes: 8 additions & 30 deletions src-docs/src/views/utility_classes/utility_classes_vert_align.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,11 @@ export default () => (
}
example={
<p>
<OuiIcon
type="logoElasticStack"
size="xxl"
className="oui-alignTop"
/>
<OuiIcon type="grid" size="xxl" className="oui-alignTop" />
&emsp; Icon is aligned to the top of the text
</p>
}
snippet={'<OuiIcon className="oui-alignTop" type="logoElasticStack" />'}
snippet={'<OuiIcon className="oui-alignTop" type="grid" />'}
/>
<OuiSpacer />
<UtilityClassesSection
Expand All @@ -47,17 +43,11 @@ export default () => (
}
example={
<p>
<OuiIcon
type="logoElasticStack"
size="xxl"
className="oui-alignMiddle"
/>
<OuiIcon type="grid" size="xxl" className="oui-alignMiddle" />
&emsp; Icon is aligned to the middle of the text
</p>
}
snippet={
'<OuiIcon className="oui-alignMiddle" type="logoElasticStack" />'
}
snippet={'<OuiIcon className="oui-alignMiddle" type="grid" />'}
/>
<OuiSpacer />
<UtilityClassesSection
Expand All @@ -70,17 +60,11 @@ export default () => (
}
example={
<p>
<OuiIcon
type="logoElasticStack"
size="xxl"
className="oui-alignBottom"
/>
<OuiIcon type="grid" size="xxl" className="oui-alignBottom" />
&emsp; Icon is aligned to the bottom of the text
</p>
}
snippet={
'<OuiIcon className="oui-alignBottom" type="logoElasticStack" />'
}
snippet={'<OuiIcon className="oui-alignBottom" type="grid" />'}
/>
<OuiSpacer />
<UtilityClassesSection
Expand All @@ -93,17 +77,11 @@ export default () => (
}
example={
<p>
<OuiIcon
type="logoElasticStack"
size="xxl"
className="oui-alignBaseline"
/>
<OuiIcon type="grid" size="xxl" className="oui-alignBaseline" />
&emsp; Icon is aligned to the baseline of the text
</p>
}
snippet={
'<OuiIcon className="oui-alignBaseline" type="logoElasticStack" />'
}
snippet={'<OuiIcon className="oui-alignBaseline" type="grid" />'}
/>
</>
);