From 833f06dda887b68fb47b560ab95d6c6eb98611aa Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 4 May 2022 16:12:33 -0400 Subject: [PATCH 1/7] =?UTF-8?q?Fixed=20position=20logicals=20=F0=9F=98=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../__snapshots__/logicals.test.ts.snap | 16 ++++++++-------- src/global_styling/functions/logicals.ts | 8 ++++---- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/global_styling/functions/__snapshots__/logicals.test.ts.snap b/src/global_styling/functions/__snapshots__/logicals.test.ts.snap index 970290eebe1..8fb87d8fe18 100644 --- a/src/global_styling/functions/__snapshots__/logicals.test.ts.snap +++ b/src/global_styling/functions/__snapshots__/logicals.test.ts.snap @@ -8,7 +8,7 @@ exports[`logicalCSS mixin returns a string property for each directional propert exports[`logicalCSS mixin returns a string property for each directional property: border-top-right-radius 1`] = `"border-start-end-radius: 8px;"`; -exports[`logicalCSS mixin returns a string property for each directional property: bottom 1`] = `"inset-inline-end: 8px;"`; +exports[`logicalCSS mixin returns a string property for each directional property: bottom 1`] = `"inset-block-end: 8px;"`; exports[`logicalCSS mixin returns a string property for each directional property: height 1`] = `"block-size: 8px;"`; @@ -16,7 +16,7 @@ exports[`logicalCSS mixin returns a string property for each directional propert exports[`logicalCSS mixin returns a string property for each directional property: inset 1`] = `"inset: 8px;"`; -exports[`logicalCSS mixin returns a string property for each directional property: left 1`] = `"inset-block-end: 8px;"`; +exports[`logicalCSS mixin returns a string property for each directional property: left 1`] = `"inset-inline-end: 8px;"`; exports[`logicalCSS mixin returns a string property for each directional property: margin-bottom 1`] = `"margin-block-end: 8px;"`; @@ -54,9 +54,9 @@ exports[`logicalCSS mixin returns a string property for each directional propert exports[`logicalCSS mixin returns a string property for each directional property: padding-vertical 1`] = `"padding-block: 8px;"`; -exports[`logicalCSS mixin returns a string property for each directional property: right 1`] = `"inset-block-start: 8px;"`; +exports[`logicalCSS mixin returns a string property for each directional property: right 1`] = `"inset-inline-start: 8px;"`; -exports[`logicalCSS mixin returns a string property for each directional property: top 1`] = `"inset-inline-start: 8px;"`; +exports[`logicalCSS mixin returns a string property for each directional property: top 1`] = `"inset-block-start: 8px;"`; exports[`logicalCSS mixin returns a string property for each directional property: vertical 1`] = `"inset-inline: 8px;"`; @@ -88,7 +88,7 @@ Object { exports[`logicalStyle mixin returns an object property for each directional property: bottom 1`] = ` Object { - "insetInlineEnd": "8px", + "insetBlockEnd": "8px", } `; @@ -112,7 +112,7 @@ Object { exports[`logicalStyle mixin returns an object property for each directional property: left 1`] = ` Object { - "insetBlockEnd": "8px", + "insetInlineEnd": "8px", } `; @@ -226,13 +226,13 @@ Object { exports[`logicalStyle mixin returns an object property for each directional property: right 1`] = ` Object { - "insetBlockStart": "8px", + "insetInlineStart": "8px", } `; exports[`logicalStyle mixin returns an object property for each directional property: top 1`] = ` Object { - "insetInlineStart": "8px", + "insetBlockStart": "8px", } `; diff --git a/src/global_styling/functions/logicals.ts b/src/global_styling/functions/logicals.ts index bab3ab877b9..05cb66f2d77 100644 --- a/src/global_styling/functions/logicals.ts +++ b/src/global_styling/functions/logicals.ts @@ -46,10 +46,10 @@ const logicalPaddings = { }; const logicalPosition = { - top: 'inset-inline-start', - right: 'inset-block-start', - bottom: 'inset-inline-end', - left: 'inset-block-end', + top: 'inset-block-start', + right: 'inset-inline-start', + bottom: 'inset-block-end', + left: 'inset-inline-end', horizontal: 'inset-block', vertical: 'inset-inline', inset: 'inset', From c3bd61777eaad76a376d98f81334698d1a6cb5f5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 4 May 2022 18:34:05 -0400 Subject: [PATCH 2/7] [EuiCallOut] Initial conversion --- .../__snapshots__/call_out.test.tsx.snap | 44 ++++++------- src/components/call_out/_call_out.scss | 58 ----------------- src/components/call_out/_index.scss | 1 - src/components/call_out/_mixins.scss | 14 ++-- src/components/call_out/_variables.scss | 2 +- src/components/call_out/call_out.styles.ts | 47 ++++++++++++++ src/components/call_out/call_out.tsx | 64 ++++++++++++------- .../form/__snapshots__/form.test.tsx.snap | 46 +++++-------- src/themes/amsterdam/overrides/_call_out.scss | 7 -- src/themes/amsterdam/overrides/_index.scss | 1 - 10 files changed, 131 insertions(+), 153 deletions(-) delete mode 100644 src/components/call_out/_call_out.scss create mode 100644 src/components/call_out/call_out.styles.ts delete mode 100644 src/themes/amsterdam/overrides/_call_out.scss 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..22256fc90ee 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..4aac156a602 100644 --- a/src/components/call_out/_mixins.scss +++ b/src/components/call_out/_mixins.scss @@ -1,3 +1,7 @@ +// 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') { @if (map-has-key($euiCallOutTypes, $type)) { $color: map-get($euiCallOutTypes, $type); @@ -15,13 +19,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..c395d73d547 100644 --- a/src/components/call_out/call_out.tsx +++ b/src/components/call_out/call_out.tsx @@ -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( ( { @@ -57,10 +57,21 @@ export const EuiCallOut = forwardRef( }, 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 >