Skip to content

Commit

Permalink
update onClose type and header end style
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyrspl
kyrspl committed Sep 7, 2023
1 parent fab246e commit 83003c0
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 252 deletions.
198 changes: 1 addition & 197 deletions src/components/call_out/__snapshots__/call_out.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,6 @@ exports[`EuiCallOut is rendered 1`] = `
class="euiText emotion-euiText-s-euiTextColor-default-euiCallOut__description"
>
Content
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
</div>
`;
Expand All @@ -56,20 +42,6 @@ exports[`EuiCallOut props color danger is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-danger"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -89,20 +61,6 @@ exports[`EuiCallOut props color primary is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -122,20 +80,6 @@ exports[`EuiCallOut props color success is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-success"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -155,20 +99,6 @@ exports[`EuiCallOut props color warning is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-warning"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -188,20 +118,6 @@ exports[`EuiCallOut props heading h1 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -221,20 +137,6 @@ exports[`EuiCallOut props heading h2 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -254,20 +156,6 @@ exports[`EuiCallOut props heading h3 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -287,20 +175,6 @@ exports[`EuiCallOut props heading h4 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -320,20 +194,6 @@ exports[`EuiCallOut props heading h5 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -353,20 +213,6 @@ exports[`EuiCallOut props heading h6 is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -386,20 +232,6 @@ exports[`EuiCallOut props heading p is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -419,20 +251,6 @@ exports[`EuiCallOut props iconType is rendered 1`] = `
data-euiicon-type="cross"
/>
</button>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
`;

Expand All @@ -453,28 +271,14 @@ exports[`EuiCallOut props title is rendered 1`] = `
/>
</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>
<div
class="euiText emotion-euiText-s-euiTextColor-default-euiCallOut__description"
>
Content
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
class="eui-textTruncate"
>
Dismiss
</span>
</span>
</button>
</div>
</div>
`;
6 changes: 3 additions & 3 deletions src/components/call_out/call_out.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,6 @@ export const euiCallOutStyles = ({ euiTheme }: UseEuiTheme) => {
${logicalCSS('margin-top', euiTheme.size.s)}
}
`,
euiCallOut__title_endSpace: css`
padding-inline-end: ${euiTheme.size.l};
`,
};
};

Expand All @@ -47,6 +44,9 @@ export const euiCallOutHeadingStyles = ({ euiTheme }: UseEuiTheme) => {
// @ts-ignore In case it's nested inside EuiText
)}
`,
euiCallOutHeader_endSpace: css`
padding-inline-end: ${euiTheme.size.l};
`,
primary: css`
color: ${euiTheme.colors.primaryText};
`,
Expand Down
10 changes: 3 additions & 7 deletions src/components/call_out/call_out.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,7 @@ export type EuiCallOutProps = CommonProps &
color?: Color;
size?: Size;
heading?: Heading;
onClose?: (
event?:
| React.KeyboardEvent<HTMLDivElement>
| React.MouseEvent<HTMLButtonElement>
) => void;
onClose?: () => void;
isDismissible?: boolean;
};

Expand All @@ -65,12 +61,12 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
const styles = euiCallOutStyles(theme);
const cssStyles = [styles.euiCallOut];
const cssCloseIconStyle = [styles.euiCallOut__closeIcon];
const cssTitleEndStyle = [styles.euiCallOut__title_endSpace];

const cssIconStyle = [styles.euiCallOut__icon];
const cssDescriptionStyle = [styles.euiCallOut__description];

const headerStyles = euiCallOutHeadingStyles(theme);
const cssHeaderEndStyle = [headerStyles.euiCallOutHeader_endSpace];
const cssHeaderStyles = [
headerStyles.euiCallOutHeader,
headerStyles[color],
Expand Down Expand Up @@ -111,7 +107,7 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
const header = title ? (
<EuiTitle
size={size === 's' ? 'xxs' : 'xs'}
css={[cssHeaderStyles, isDismissible && cssTitleEndStyle]}
css={[cssHeaderStyles, isDismissible && cssHeaderEndStyle]}
>
<H className="euiCallOutHeader__title">
{headerIcon}
Expand Down
Loading

0 comments on commit 83003c0

Please sign in to comment.