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

Add gutterSize prop to EuiTimeline #5955

Merged
merged 13 commits into from
Jun 16, 2022
Merged

Add gutterSize prop to EuiTimeline #5955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1027341
Added `gap` prop to `EuiTimelineItem`
elizabetdev Jun 6, 2022
e6a08e4
Adding CL
elizabetdev Jun 6, 2022
4908cb8
Adding `gap` test
elizabetdev Jun 6, 2022
00895c8
Adding `logicalCSS`
elizabetdev Jun 6, 2022
35a6456
Moving `gap` to `EuiTimeline`. Removed `component` prop from `EuiTime…
elizabetdev Jun 6, 2022
97ac6e0
Improving callout
elizabetdev Jun 6, 2022
9381f38
Fixing typo in callout text
elizabetdev Jun 7, 2022
186f350
Vertical line only appearing when items are wrapped in `EuiTimeline`
elizabetdev Jun 7, 2022
7994aef
Renaming `gap` prop to `gutterSize`
elizabetdev Jun 14, 2022
bd0493d
Updating CL
elizabetdev Jun 14, 2022
aa69535
Merge remote-tracking branch 'upstream/main' into timeline-gap
elizabetdev Jun 14, 2022
48e0a7e
Moving vertical line to the icon to avoid min-width
elizabetdev Jun 14, 2022
8dfe180
Merge remote-tracking branch 'upstream/main' into timeline-gap
elizabetdev Jun 16, 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
11 changes: 7 additions & 4 deletions src-docs/src/views/timeline/timeline_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,13 @@ export const TimelineExample = {
iconType="accessibility"
title={
<>
For accessibility, it is highly recommended to provide a
descriptive <EuiCode>aria-label</EuiCode>, or a text node ID of
an external label to the <EuiCode>aria-labelledby</EuiCode> prop
of the <strong>EuiTimeline</strong>.
For accessibility, it is required to wrap your{' '}
<strong>EuiTimelineItem</strong>&apos;s with a{' '}
<strong>EuiTimeline</strong>. It is highly recommended to
provide a descriptive <EuiCode>aria-label</EuiCode>, or a text
node ID of an external label to the{' '}
<EuiCode>aria-labelledby</EuiCode> prop of the{' '}
<strong>EuiTimeline</strong>.
</>
}
/>
Expand Down
25 changes: 16 additions & 9 deletions src-docs/src/views/timeline/timeline_item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import React from 'react';
import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components';
import {
EuiTimeline,
EuiTimelineItem,
EuiText,
EuiCode,
} from '../../../../src/components';

export default () => (
<EuiTimelineItem icon="dot" iconAriaLabel="Main icon" component="div">
<EuiText size="s">
<p>
I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}
<EuiCode>icon</EuiCode> on the left side.
</p>
</EuiText>
</EuiTimelineItem>
<EuiTimeline aria-label="Timeline item example">
<EuiTimelineItem icon="dot" iconAriaLabel="Main icon">
<EuiText size="s">
<p>
I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}
<EuiCode>icon</EuiCode> on the left side.
</p>
</EuiText>
</EuiTimelineItem>
</EuiTimeline>
);
234 changes: 231 additions & 3 deletions src/components/timeline/__snapshots__/timeline.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

exports[`EuiTimeline is rendered with items 1`] = `
<ol
class="euiTimeline"
class="euiTimeline emotion-euiTimeline-xl"
role="list"
>
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
Expand Down Expand Up @@ -41,7 +41,235 @@ exports[`EuiTimeline is rendered with items 1`] = `
</div>
</li>
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-top"
>
<div
class="emotion-euiTimelineItemIcon-top"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title=""
>
<span
class="euiAvatar__icon"
data-euiicon-type="bolt"
/>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-top"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
</ol>
`;

exports[`EuiTimeline props gutterSize l is rendered 1`] = `
<ol
class="euiTimeline emotion-euiTimeline-l"
role="list"
>
<li
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label="email"
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title="email"
>
<span
class="euiAvatar__icon"
data-euiicon-type="email"
>
email
</span>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-center"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
<li
class="emotion-euiTimelineItem-top"
>
<div
class="emotion-euiTimelineItemIcon-top"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title=""
>
<span
class="euiAvatar__icon"
data-euiicon-type="bolt"
/>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-top"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
</ol>
`;

exports[`EuiTimeline props gutterSize m is rendered 1`] = `
<ol
class="euiTimeline emotion-euiTimeline-m"
role="list"
>
<li
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label="email"
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title="email"
>
<span
class="euiAvatar__icon"
data-euiicon-type="email"
>
email
</span>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-center"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
<li
class="emotion-euiTimelineItem-top"
>
<div
class="emotion-euiTimelineItemIcon-top"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title=""
>
<span
class="euiAvatar__icon"
data-euiicon-type="bolt"
/>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-top"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
</ol>
`;

exports[`EuiTimeline props gutterSize xl is rendered 1`] = `
<ol
class="euiTimeline emotion-euiTimeline-xl"
role="list"
>
<li
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
>
<div
class="emotion-euiTimelineItemIcon__content"
>
<div
aria-label="email"
class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-m-user-subdued"
role="img"
title="email"
>
<span
class="euiAvatar__icon"
data-euiicon-type="email"
>
email
</span>
</div>
</div>
</div>
<div
class="emotion-euiTimelineItemEvent-center"
>
<p>
<strong>
[email protected]
</strong>
was invited to the project
</p>
</div>
</li>
<li
class="emotion-euiTimelineItem-top"
>
<div
class="emotion-euiTimelineItemIcon-top"
Expand Down
10 changes: 5 additions & 5 deletions src/components/timeline/__snapshots__/timeline_item.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiTimelineItem is rendered 1`] = `
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
Expand Down Expand Up @@ -35,7 +35,7 @@ exports[`EuiTimelineItem is rendered 1`] = `

exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
Expand Down Expand Up @@ -70,7 +70,7 @@ exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `

exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
Expand Down Expand Up @@ -105,7 +105,7 @@ exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `

exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-center"
>
<div
class="emotion-euiTimelineItemIcon-center"
Expand Down Expand Up @@ -138,7 +138,7 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `

exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
<li
class="emotion-euiTimelineItem"
class="emotion-euiTimelineItem-top"
>
<div
class="emotion-euiTimelineItemIcon-top"
Expand Down
Loading