Skip to content

[EuiText] Update nested ordered lists styles #6615

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
elizabetdev merged 3 commits into from
Feb 23, 2023
Merged

[EuiText] Update nested ordered lists styles #6615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17c2200
[EuiText] Updated nested ordered lists styles
elizabetdev Feb 22, 2023
efba14c
Adding margin bottom only to direct child `ul` and `ol` elements
elizabetdev Feb 23, 2023
4e3e963
Adding CL
elizabetdev Feb 23, 2023
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
75 changes: 71 additions & 4 deletions src-docs/src/views/text/text.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,40 @@ export default () => (

<h4>This is Heading Four</h4>

<p>
So it thought the dog was making a poor life choice by focusing so much
on mindfulness. What if its car broke down?
</p>
<ol>
<li>
C
<ol>
<li>Procedural</li>
<li>Structured</li>
<li>Low-level</li>
</ol>
</li>
<li>
Java
<ol>
<li>Object-oriented</li>
<li>Class-based</li>
<li>Compiled</li>
</ol>
</li>
<li>
Python
<ol>
<li>Interpreted</li>
<li>High-level</li>
<li>Scripting</li>
<li>
Object-oriented
<ol>
<li>Dynamic typing</li>
<li>Garbage collection</li>
</ol>
</li>
<li>Functional</li>
</ol>
</li>
</ol>

<h5>This is Heading Five</h5>

Expand All @@ -95,6 +125,43 @@ export default () => (

<h6>This is Heading Six</h6>

<ul>
<li>
Programming Languages
<ul>
<li>
Backend
<ul>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
</ul>
</li>
<li>
Frontend
<ul>
<li>
JavaScript
<ul>
<li>React.js</li>
<li>Angular.js</li>
<li>Vue.js</li>
</ul>
</li>
<li>
CSS
<ul>
<li>SASS</li>
<li>Less</li>
<li>Stylus</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<EuiHorizontalRule />

<dl>
Expand Down
84 changes: 72 additions & 12 deletions src/components/text/__snapshots__/text.styles.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,19 +79,34 @@ exports[`euiTextStyles sizes m 1`] = `
}

p,
ul,
ol,
dl,
blockquote,
img,
pre {
pre,
> ul,
> ol {
margin-block-end: 1.7143rem;
}

ul,
ol {
margin-inline-start: 1.7143rem;
}

// The styles of the nested ordered lists follow the style of GitHub
// which is commonly used in Markdown or MDX formatting.

ol ol,
ul ol {
list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}

blockquote {
font-size: 1.1429rem;
Expand Down Expand Up @@ -227,19 +242,34 @@ exports[`euiTextStyles sizes relative 1`] = `
}

p,
ul,
ol,
dl,
blockquote,
img,
pre {
pre,
> ul,
> ol {
margin-block-end: 1.5000em;
}

ul,
ol {
margin-inline-start: 1.5000em;
}

// The styles of the nested ordered lists follow the style of GitHub
// which is commonly used in Markdown or MDX formatting.

ol ol,
ul ol {
list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}

blockquote {
font-size: 1em;
Expand Down Expand Up @@ -360,19 +390,34 @@ exports[`euiTextStyles sizes s 1`] = `
}

p,
ul,
ol,
dl,
blockquote,
img,
pre {
pre,
> ul,
> ol {
margin-block-end: 1.4286rem;
}

ul,
ol {
margin-inline-start: 1.4286rem;
}

// The styles of the nested ordered lists follow the style of GitHub
// which is commonly used in Markdown or MDX formatting.

ol ol,
ul ol {
list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}

blockquote {
font-size: 1.0000rem;
Expand Down Expand Up @@ -493,19 +538,34 @@ exports[`euiTextStyles sizes xs 1`] = `
}

p,
ul,
ol,
dl,
blockquote,
img,
pre {
pre,
> ul,
> ol {
margin-block-end: 1.1429rem;
}

ul,
ol {
margin-inline-start: 1.1429rem;
}

// The styles of the nested ordered lists follow the style of GitHub
// which is commonly used in Markdown or MDX formatting.

ol ol,
ul ol {
list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}

blockquote {
font-size: 0.8571rem;
Expand Down
21 changes: 18 additions & 3 deletions src/components/text/text.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,19 +142,34 @@ const euiScaleText = (
}

p,
ul,
ol,
dl,
blockquote,
img,
pre {
pre,
> ul,
> ol {
${logicalCSS('margin-bottom', lineHeightSize)}
}

ul,
ol {
${logicalCSS('margin-left', lineHeightSize)}
}

// The styles of the nested ordered lists follow the style of GitHub
// which is commonly used in Markdown or MDX formatting.

ol ol,
ul ol {
list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
list-style-type: lower-alpha;
}
Comment on lines +162 to +172
Copy link
Contributor

@cee-chen cee-chen Feb 23, 2023

Choose a reason for hiding this comment

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

[Adding this comment for reference] Just want to quickly note that it (sadly) looks like there isn't a way to alternate style types to an infinite depth with current CSS spec, so anything past 3 levels of nesting will just use a/b/c.

Copy link
Contributor

@glitteringkatie glitteringkatie Feb 23, 2023

Choose a reason for hiding this comment

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

Also for reference, this is consistent with markdown in GitHub:

  1. Number
    1. Roman
      1. Alpha
        1. Alpha
          1. Alpha!


blockquote {
font-size: ${fontSize};
Expand Down
2 changes: 2 additions & 0 deletions upcoming_changelogs/6615.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Updated the styling of nested ordered lists in `EuiText` to align with GitHub's list style, which is a popular format used in Markdown or MDX formatting
- Added a margin-bottom property exclusively to the direct child `ul` and `ol` elements of the `EuiText` component