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

Adding conditional rendering in EuiCallOut component based on title #3549

Merged
merged 7 commits into from
Jun 4, 2020
Merged

Adding conditional rendering in EuiCallOut component based on title #3549

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
46d467f
Adding conditional rendering in callout component based on title
shrey Jun 4, 2020
1980f67
adopting better practice
shrey Jun 4, 2020
fd92dcb
Updated the snapshots for the callout function
shrey Jun 4, 2020
1175006
Updated changelog
shrey Jun 4, 2020
710d82e
Used better practices
shrey Jun 4, 2020
c495b93
Updated changelog
shrey Jun 4, 2020
5b60d3b
Move CL entry out of Bug fixes
cchaos Jun 4, 2020
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Added conditional rendering of the title element in `EuiCallOut` to avoid usage of additional space caused by the rendered `<div>` element ([#3549](https://github.com/elastic/eui/pull/3549))

**Bug fixes**

- Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
Expand Down
132 changes: 12 additions & 120 deletions src/components/call_out/__snapshots__/call_out.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,6 @@ exports[`EuiCallOut is rendered 1`] = `
class="euiCallOut euiCallOut--primary testClass1 testClass2"
data-test-subj="test subject string"
>
<div
class="euiCallOutHeader"
>
<span
class="euiCallOutHeader__title"
/>
</div>
<div
class="euiText euiText--small"
>
Expand All @@ -24,174 +17,73 @@ exports[`EuiCallOut is rendered 1`] = `
exports[`EuiCallOut props color danger is rendered 1`] = `
<div
class="euiCallOut euiCallOut--danger"
>
<div
class="euiCallOutHeader"
>
<span
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props color primary is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<span
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props color success is rendered 1`] = `
<div
class="euiCallOut euiCallOut--success"
>
<div
class="euiCallOutHeader"
>
<span
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props color warning is rendered 1`] = `
<div
class="euiCallOut euiCallOut--warning"
>
<div
class="euiCallOutHeader"
>
<span
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h1 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h1
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h2 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h2
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h3 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h3
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h4 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h4
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h5 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h5
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading h6 is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<h6
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props heading p is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<p
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props iconType is rendered 1`] = `
<div
class="euiCallOut euiCallOut--primary"
>
<div
class="euiCallOutHeader"
>
<div
aria-hidden="true"
class="euiCallOutHeader__icon"
data-euiicon-type="user"
/>
<span
class="euiCallOutHeader__title"
/>
</div>
</div>
/>
`;

exports[`EuiCallOut props title is rendered 1`] = `
Expand Down
11 changes: 8 additions & 3 deletions src/components/call_out/call_out.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,19 @@ export const EuiCallOut: FunctionComponent<EuiCallOutProps> = ({
}

const H: any = heading ? `${heading}` : 'span';
let header;

return (
<div className={classes} {...rest}>
if (title) {
header = (
<div className="euiCallOutHeader">
{headerIcon}

<H className="euiCallOutHeader__title">{title}</H>
</div>
);
}
return (
<div className={classes} {...rest}>
{header}

{optionalChildren}
</div>
Expand Down