diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js index 0e65d607702..e21f44563c2 100644 --- a/src-docs/src/views/call_out/call_out_example.js +++ b/src-docs/src/views/call_out/call_out_example.js @@ -75,7 +75,7 @@ export const CallOutExample = { s (small).
  • - Use an icon prop if it adds context. + Use an iconType if it adds context.
    • @@ -86,7 +86,7 @@ export const CallOutExample = { title: 'Info', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: infoSource, }, ], @@ -107,7 +107,7 @@ export const CallOutExample = { title: 'Success', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: successSource, }, ], @@ -125,7 +125,7 @@ export const CallOutExample = { title: 'Warning', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: warningSource, }, ], @@ -141,7 +141,7 @@ export const CallOutExample = { title: 'Danger', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: dangerSource, }, ], diff --git a/src-docs/src/views/call_out/danger.js b/src-docs/src/views/call_out/danger.tsx similarity index 80% rename from src-docs/src/views/call_out/danger.js rename to src-docs/src/views/call_out/danger.tsx index 49608a2568b..88dc0740990 100644 --- a/src-docs/src/views/call_out/danger.js +++ b/src-docs/src/views/call_out/danger.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiCallOut, EuiLink } from '../../../../src/components'; +import { EuiCallOut, EuiLink } from '../../../../src'; export default () => ( diff --git a/src-docs/src/views/call_out/info.js b/src-docs/src/views/call_out/info.tsx similarity index 92% rename from src-docs/src/views/call_out/info.js rename to src-docs/src/views/call_out/info.tsx index 24fec6ba976..76f1eb714ab 100644 --- a/src-docs/src/views/call_out/info.js +++ b/src-docs/src/views/call_out/info.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiCallOut, EuiLink, EuiSpacer } from '../../../../src/components'; +import { EuiCallOut, EuiLink, EuiSpacer } from '../../../../src'; export default () => (
    diff --git a/src-docs/src/views/call_out/success.js b/src-docs/src/views/call_out/success.tsx similarity index 80% rename from src-docs/src/views/call_out/success.js rename to src-docs/src/views/call_out/success.tsx index 3cd8f917c7d..003f1739843 100644 --- a/src-docs/src/views/call_out/success.js +++ b/src-docs/src/views/call_out/success.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiCallOut, EuiLink } from '../../../../src/components'; +import { EuiCallOut, EuiLink } from '../../../../src'; export default () => ( diff --git a/src-docs/src/views/call_out/warning.js b/src-docs/src/views/call_out/warning.tsx similarity index 82% rename from src-docs/src/views/call_out/warning.js rename to src-docs/src/views/call_out/warning.tsx index ef2cf9d8b44..cb782cec89d 100644 --- a/src-docs/src/views/call_out/warning.js +++ b/src-docs/src/views/call_out/warning.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { EuiCallOut, EuiLink, EuiButton } from '../../../../src/components'; +import { EuiCallOut, EuiLink, EuiButton } from '../../../../src'; export default () => ( diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap index 78f3d9caf06..63a232c6134 100644 --- a/src/components/call_out/__snapshots__/call_out.test.tsx.snap +++ b/src/components/call_out/__snapshots__/call_out.test.tsx.snap @@ -3,11 +3,11 @@ exports[`EuiCallOut is rendered 1`] = `
    `; exports[`EuiCallOut props color primary is rendered 1`] = `
    `; exports[`EuiCallOut props color success is rendered 1`] = `
    `; exports[`EuiCallOut props color warning is rendered 1`] = `
    `; exports[`EuiCallOut props heading h1 is rendered 1`] = `
    `; exports[`EuiCallOut props heading h2 is rendered 1`] = `
    `; exports[`EuiCallOut props heading h3 is rendered 1`] = `
    `; exports[`EuiCallOut props heading h4 is rendered 1`] = `
    `; exports[`EuiCallOut props heading h5 is rendered 1`] = `
    `; exports[`EuiCallOut props heading h6 is rendered 1`] = `
    `; exports[`EuiCallOut props heading p is rendered 1`] = `
    `; exports[`EuiCallOut props iconType is rendered 1`] = `
    `; exports[`EuiCallOut props title is rendered 1`] = `
    -
    - - Title - -
    + Title +

    * + * { - margin-left: $euiSizeS; /* 3 */ - } -} diff --git a/src/components/call_out/_index.scss b/src/components/call_out/_index.scss index 950298dc9c5..d1ee44203d1 100644 --- a/src/components/call_out/_index.scss +++ b/src/components/call_out/_index.scss @@ -1,4 +1,3 @@ @import 'variables'; @import 'mixins'; -@import 'call_out'; diff --git a/src/components/call_out/_mixins.scss b/src/components/call_out/_mixins.scss index 10b644a3d8e..f3f140c240a 100644 --- a/src/components/call_out/_mixins.scss +++ b/src/components/call_out/_mixins.scss @@ -1,4 +1,10 @@ +// Kibana's Ace Editor uses this function, can't remove yet +// https://github.com/elastic/kibana/blob/main/src/core/public/styles/_ace_overrides.scss +// As well as deprecation notices +// https://github.com/elastic/kibana/blob/main/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/_step_progress.scss @function euiCallOutColor($type: 'primary', $returnBackgroundOrForeground: 'background') { + @warn 'euiCallOutColor() is set for deprecation. Please consider using EuiCallOut directly.'; + @if (map-has-key($euiCallOutTypes, $type)) { $color: map-get($euiCallOutTypes, $type); $backgroundColor: tintOrShade($color, 90%, 70%); @@ -15,13 +21,3 @@ @warn 'Incorrect type of call out provided. See the $euiCallOutTypes map for allowed values.'; } } - -@mixin euiCallOutTitle($size: null) { - @if ($size == 's') { - @include euiTitle('xxs'); - font-weight: $euiFontWeightRegular; - } @else { - @include euiTitle('xs'); - font-weight: $euiFontWeightRegular; - } -} diff --git a/src/components/call_out/_variables.scss b/src/components/call_out/_variables.scss index ecfd7e7e7a2..3e09e74d962 100644 --- a/src/components/call_out/_variables.scss +++ b/src/components/call_out/_variables.scss @@ -1,4 +1,4 @@ -// Modifier naming and colors. +// Used in mixin that's used in Kibana $euiCallOutTypes: ( primary: $euiColorPrimary, success: $euiColorSuccess, diff --git a/src/components/call_out/call_out.styles.ts b/src/components/call_out/call_out.styles.ts new file mode 100644 index 00000000000..16b1ebf799a --- /dev/null +++ b/src/components/call_out/call_out.styles.ts @@ -0,0 +1,47 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; +import { logicalCSS } from '../../global_styling'; +import { UseEuiTheme } from '../../services'; + +export const euiCallOutStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiCallOut: css``, + euiCallOut__icon: css` + position: relative; + ${logicalCSS('top', '-1px')}; + ${logicalCSS('margin-right', euiTheme.size.s)}; + `, + euiCallOut__description: css` + ${logicalCSS('margin-top', euiTheme.size.s)}; + `, + }; +}; + +export const euiCallOutHeadingStyles = ({ euiTheme }: UseEuiTheme) => { + return { + euiCallOutHeader: css` + font-weight: ${euiTheme.font.weight.medium}; + margin-bottom: 0 !important; // In case it's nested inside EuiText + `, + + primary: css` + color: ${euiTheme.colors.primaryText}; + `, + success: css` + color: ${euiTheme.colors.successText}; + `, + warning: css` + color: ${euiTheme.colors.warningText}; + `, + danger: css` + color: ${euiTheme.colors.dangerText}; + `, + }; +}; diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx index 7fc09e2a1aa..0d4257d501d 100644 --- a/src/components/call_out/call_out.tsx +++ b/src/components/call_out/call_out.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { forwardRef, Ref, HTMLAttributes, ReactNode } from 'react'; +import React, { forwardRef, HTMLAttributes, ReactNode } from 'react'; import classNames from 'classnames'; @@ -14,6 +14,11 @@ import { CommonProps, keysOf } from '../common'; import { IconType, EuiIcon } from '../icon'; import { EuiText } from '../text'; +import { useEuiTheme } from '../../services'; +import { EuiPanel } from '../panel'; +import { EuiTitle } from '../title'; + +import { euiCallOutStyles, euiCallOutHeadingStyles } from './call_out.styles'; type Color = 'primary' | 'success' | 'warning' | 'danger'; type Size = 's' | 'm'; @@ -38,11 +43,6 @@ const colorToClassNameMap: { [color in Color]: string } = { export const COLORS = keysOf(colorToClassNameMap); export const HEADINGS: Heading[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']; -const sizeToClassNameMap: { [size in Size]: string } = { - s: 'euiCallOut--small', - m: '', -}; - export const EuiCallOut = forwardRef( ( { @@ -52,15 +52,26 @@ export const EuiCallOut = forwardRef( iconType, children, className, - heading, + heading = 'p', ...rest }, - ref: Ref + ref ) => { + const theme = useEuiTheme(); + const styles = euiCallOutStyles(theme); + const cssStyles = [styles.euiCallOut]; + const cssIconStyle = [styles.euiCallOut__icon]; + const cssDescriptionStyle = [styles.euiCallOut__description]; + + const headerStyles = euiCallOutHeadingStyles(theme); + const cssHeaderStyles = [ + headerStyles.euiCallOutHeader, + headerStyles[color], + ]; + const classes = classNames( 'euiCallOut', colorToClassNameMap[color], - sizeToClassNameMap[size], className ); @@ -69,7 +80,7 @@ export const EuiCallOut = forwardRef( if (iconType) { headerIcon = (
    `; @@ -49,21 +45,17 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul >