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

[EuiCallOut] Add onDismiss prop #7156

Merged
merged 20 commits into from
Sep 25, 2023
Merged

[EuiCallOut] Add onDismiss prop #7156

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
e818cfa
add dismissible behavior
kyrspl Sep 5, 2023
a055e79
add isDismissible
kyrspl Sep 5, 2023
bbf3fa8
refactor
kyrspl Sep 5, 2023
0c29f60
fix title spacing
kyrspl Sep 5, 2023
ffff086
remove dismissble button logic
kyrspl Sep 5, 2023
8560710
remove css declaration
kyrspl Sep 5, 2023
c818071
refactor
kyrspl Sep 5, 2023
fab246e
add ignore statement
kyrspl Sep 7, 2023
83003c0
update onClose type and header end style
kyrspl Sep 7, 2023
0533b24
Update src/components/call_out/call_out.tsx
kyrspl Sep 19, 2023
ed63118
Update src/components/call_out/call_out.tsx
kyrspl Sep 19, 2023
e05e1d7
Update src/components/call_out/call_out.tsx
kyrspl Sep 19, 2023
220ef7c
Merge branch 'main' into callout
cee-chen Sep 22, 2023
5bd9446
[PR feedback] Prop name/copy
cee-chen Sep 23, 2023
8b4cd06
Add Jest unit test
cee-chen Sep 23, 2023
6dc8363
Add docs example + playground
cee-chen Sep 23, 2023
de207f1
Fix various conditional style issues
cee-chen Sep 23, 2023
70f3e6f
Update snapshots
cee-chen Sep 23, 2023
7fe66b3
changelog
cee-chen Sep 23, 2023
0bc10f0
[PR feedback] copy
cee-chen Sep 25, 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
206 changes: 193 additions & 13 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,6 +6,18 @@ exports[`EuiCallOut is rendered 1`] = `
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary testClass1 testClass2 emotion-euiPanel-none-m-primary-euiCallOut-euiTestCss"
data-test-subj="test subject string"
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
<div
class="euiText emotion-euiText-s-euiTextColor-default-euiCallOut__description"
>
Expand All @@ -17,81 +29,249 @@ exports[`EuiCallOut is rendered 1`] = `
exports[`EuiCallOut props color danger is rendered 1`] = `
<div
class="euiPanel euiPanel--danger euiPanel--paddingMedium euiCallOut euiCallOut--danger emotion-euiPanel-none-m-danger-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-danger-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props color primary is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props color success is rendered 1`] = `
<div
class="euiPanel euiPanel--success euiPanel--paddingMedium euiCallOut euiCallOut--success emotion-euiPanel-none-m-success-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-success-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props color warning is rendered 1`] = `
<div
class="euiPanel euiPanel--warning euiPanel--paddingMedium euiCallOut euiCallOut--warning emotion-euiPanel-none-m-warning-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-warning-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h1 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h2 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h3 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h4 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h5 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading h6 is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props heading p is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props iconType is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
/>
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
`;

exports[`EuiCallOut props title is rendered 1`] = `
<div
class="euiPanel euiPanel--primary euiPanel--paddingMedium euiCallOut euiCallOut--primary emotion-euiPanel-none-m-primary-euiCallOut"
>
<button
aria-label="Close callout"
class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary-euiCallOut__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
<p
class="euiTitle euiCallOutHeader__title emotion-euiTitle-xs-euiCallOutHeader-primary"
class="euiTitle euiCallOutHeader__title emotion-euiTitle-xs-euiCallOutHeader-primary-euiCallOutHeader_endSpace-header"
>
Title
</p>
Expand Down
16 changes: 13 additions & 3 deletions src/components/call_out/call_out.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,15 @@ import { UseEuiTheme } from '../../services';

export const euiCallOutStyles = ({ euiTheme }: UseEuiTheme) => {
return {
euiCallOut: css``,
euiCallOut: css`
position: relative;
`,
euiCallOut__closeIcon: css`
position: absolute;
${logicalCSS('top', euiTheme.size.s)}
${logicalCSS('right', euiTheme.size.s)}
cursor: pointer;
kyrspl marked this conversation as resolved.
Show resolved Hide resolved
`,
euiCallOut__icon: css`
position: relative;
${logicalCSS('top', '-1px')}
Expand All @@ -33,10 +41,12 @@ export const euiCallOutHeadingStyles = ({ euiTheme }: UseEuiTheme) => {
${logicalCSS(
'margin-bottom',
'0 !important'
// In case it's nested inside EuiText
// @ts-ignore In case it's nested inside EuiText
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
)}
`,

euiCallOutHeader_endSpace: css`
padding-inline-end: ${euiTheme.size.l};
`,
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
primary: css`
color: ${euiTheme.colors.primaryText};
`,
Expand Down
Loading