From 9da3c2048161166700057b425931c74d5204ad6e Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 14 Jun 2022 08:58:06 -0400 Subject: [PATCH 01/24] Move Amsterdam Sass overrides to src/ --- src/components/popover/_popover.scss | 37 ++++++- src/components/popover/_popover_footer.scss | 8 +- src/components/popover/_popover_title.scss | 8 +- src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_popover.scss | 104 ------------------- wiki/writing-styles-with-emotion.md | 33 +++--- 6 files changed, 63 insertions(+), 128 deletions(-) delete mode 100644 src/themes/amsterdam/overrides/_popover.scss diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss index 808d3154893..e7b984cd081 100644 --- a/src/components/popover/_popover.scss +++ b/src/components/popover/_popover.scss @@ -40,6 +40,10 @@ opacity: 0; /* 2 */ transition: opacity $euiAnimSlightBounce $euiAnimSpeedSlow; /* 2 */ + &:focus { + outline-offset: 0; + } + // Don't animate when using the attached mode like for inputs &:not(.euiPopover__panel-isAttached) { transform: translateY(0) translateX(0) translateZ(0); /* 2 */ @@ -48,6 +52,18 @@ transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms); } + &.euiPopover__panel-isAttached { + @include euiBottomShadowMedium; + + // Reset border radius to panel's + // Specificity also helps override default theme + @each $modifier, $amount in $euiPanelBorderRadiusModifiers { + &.euiPanel--#{$modifier} { + border-radius: $amount; + } + } + } + &.euiPopover__panel-isOpen { opacity: 1; pointer-events: auto; @@ -64,6 +80,8 @@ content: ''; height: 0; width: 0; + filter: blur($euiSizeXS - 1px); + opacity: .2; } // This part of the arrow matches the panel. @@ -74,16 +92,20 @@ width: 0; } + $arrowShadowCompensation: $euiSizeXS; + &.euiPopover__panelArrow--top { &:before { - bottom: -$euiPopoverArrowSize + 2; border-left: $euiPopoverArrowSize solid transparent; border-right: $euiPopoverArrowSize solid transparent; border-top: $euiPopoverArrowSize solid $euiBorderColor; + bottom: -$euiPopoverArrowSize; + border-top-color: $euiShadowColor; + clip-path: polygon(#{-$arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}); } &:after { - bottom: -$euiPopoverArrowSize + 3; + bottom: -$euiPopoverArrowSize + 1; border-left: $euiPopoverArrowSize solid transparent; border-right: $euiPopoverArrowSize solid transparent; border-top: $euiPopoverArrowSize solid $euiColorEmptyShade; @@ -97,6 +119,8 @@ border-top: $euiPopoverArrowSize solid transparent; border-bottom: $euiPopoverArrowSize solid transparent; border-right: $euiPopoverArrowSize solid $euiBorderColor; + border-right-color: $euiShadowColor; + clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}); } &:after { @@ -114,6 +138,8 @@ border-left: $euiPopoverArrowSize solid transparent; border-right: $euiPopoverArrowSize solid transparent; border-bottom: $euiPopoverArrowSize solid $euiBorderColor; + border-bottom-color: $euiShadowColor; + clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize, #{-$arrowShadowCompensation} $euiPopoverArrowSize); } &:after { @@ -126,15 +152,18 @@ &.euiPopover__panelArrow--left { &:before { - right: -$euiPopoverArrowSize + 1; top: 50%; border-top: $euiPopoverArrowSize solid transparent; border-bottom: $euiPopoverArrowSize solid transparent; border-left: $euiPopoverArrowSize solid $euiBorderColor; + right: -$euiPopoverArrowSize; + border-left-color: $euiShadowColor; + clip-path: polygon(0 #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, 0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}); + } &:after { - right: -$euiPopoverArrowSize + 2; + right: -$euiPopoverArrowSize + 1; top: 50%; border-top: $euiPopoverArrowSize solid transparent; border-bottom: $euiPopoverArrowSize solid transparent; diff --git a/src/components/popover/_popover_footer.scss b/src/components/popover/_popover_footer.scss index b1cc74913d0..1430c289139 100644 --- a/src/components/popover/_popover_footer.scss +++ b/src/components/popover/_popover_footer.scss @@ -21,7 +21,13 @@ margin: $amount ($amount * -1) ($amount * -1); &:not([class*='euiPopoverFooter--padding']) { - padding: $euiSizeM $amount; + padding: $amount; } } } + +// Mainly for specificity, but don't add padding to the footer if +// neither the the panel nor the footer has a padding modifier (aka NONE) +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { + padding: 0; +} diff --git a/src/components/popover/_popover_title.scss b/src/components/popover/_popover_title.scss index 9958ae7d890..3bebb59427c 100644 --- a/src/components/popover/_popover_title.scss +++ b/src/components/popover/_popover_title.scss @@ -21,7 +21,13 @@ margin: ($amount * -1) ($amount * -1) $amount; &:not([class*='euiPopoverTitle--padding']) { - padding: $euiSizeM $amount; + padding: $amount; } } } + +// Mainly for specificity, but don't add padding to the title if +// neither the the panel nor the title has a padding modifier (aka NONE) +.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { + padding: 0; +} diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index 830da42b470..1d28b4217cb 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -25,7 +25,6 @@ @import 'modal'; @import 'notification_badge'; @import 'overlay_mask'; -@import 'popover'; @import 'progress'; @import 'range'; @import 'range_draggable'; diff --git a/src/themes/amsterdam/overrides/_popover.scss b/src/themes/amsterdam/overrides/_popover.scss deleted file mode 100644 index 38e0c43e2f7..00000000000 --- a/src/themes/amsterdam/overrides/_popover.scss +++ /dev/null @@ -1,104 +0,0 @@ -.euiPopover__panel { - &:focus { - outline-offset: 0; - } - - &.euiPopover__panel-isAttached { - @include euiBottomShadowMedium; - - // Reset border radius to panel's - // Specificity also helps override default theme - @each $modifier, $amount in $euiPanelBorderRadiusModifiers { - &.euiPanel--#{$modifier} { - border-radius: $amount; - } - } - } - - .euiPopover__panelArrow { - &:before { - filter: blur($euiSizeXS - 1px); - opacity: .2; - } - - $arrowShadowCompensation: $euiSizeXS; - - &.euiPopover__panelArrow--top { - &:before { - bottom: -$euiPopoverArrowSize; - border-top-color: $euiShadowColor; - clip-path: polygon(#{-$arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} 0, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize + $arrowShadowCompensation}); - } - - &:after { - bottom: -$euiPopoverArrowSize + 1; - } - } - - &.euiPopover__panelArrow--right { - &:before { - border-right-color: $euiShadowColor; - clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{-$arrowShadowCompensation}, $euiPopoverArrowSize #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, #{-$arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}); - } - - &:after { - left: -$euiPopoverArrowSize + 1; - } - } - - &.euiPopover__panelArrow--bottom { - &:before { - border-bottom-color: $euiShadowColor; - clip-path: polygon(#{-$arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation} $euiPopoverArrowSize, #{-$arrowShadowCompensation} $euiPopoverArrowSize); - } - - &:after { - top: -$euiPopoverArrowSize + 1; - } - } - - &.euiPopover__panelArrow--left { - &:before { - right: -$euiPopoverArrowSize; - border-left-color: $euiShadowColor; - clip-path: polygon(0 #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{-$arrowShadowCompensation}, #{$euiPopoverArrowSize + $arrowShadowCompensation} #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}, 0 #{$euiPopoverArrowSize * 2 + $arrowShadowCompensation}); - } - - &:after { - right: -$euiPopoverArrowSize + 1; - } - } - } -} - - -// Mainly for specificity, but don't add padding to the title if -// neither the the panel nor the title has a padding modifier (aka NONE) -.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { - padding: 0; -} - -// Allow the panel padding to actually modify the all side of the title -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { - padding: $amount; - } -} - -/** - * Footer specific overrides - */ - -// Mainly for specificity, but don't add padding to the footer if -// neither the the panel nor the footer has a padding modifier (aka NONE) -.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { - padding: 0; -} - -// Allow the panel padding to actually modify the all side of the footer -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { - padding: $amount; - } -} - diff --git a/wiki/writing-styles-with-emotion.md b/wiki/writing-styles-with-emotion.md index 1933144e8a5..e7d51b250b9 100644 --- a/wiki/writing-styles-with-emotion.md +++ b/wiki/writing-styles-with-emotion.md @@ -62,22 +62,22 @@ export const EuiAvatar: FunctionComponent = ({...}) => { const styles = euiAvatarStyles(euiTheme); ... - + // build the styles array const cssStyles = [ styles.euiAvatar, // base styles styles[size], // styles associated with the `size` prop's value styles[type], // styles associated with the `type` prop's value - + // optional styles isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled, ]; - + ... - // pass the styles array to the `css` prop of the target element + // pass the styles array to the `css` prop of the target element return (
) @@ -110,7 +110,6 @@ const cssStyles = [ When building styles based on an array of possible prop values, you'll want to establish the array of values first in the component file then use that array to create your prop values and your styles map. - ```tsx export const SIZES = ['s', 'm', 'l', 'xl', 'xxl'] as const; export type EuiComponentNameSize = typeof SIZES[number]; @@ -118,13 +117,13 @@ export type EuiComponentNameSize = typeof SIZES[number]; export type EuiComponentNameProps = CommonProps & { size?: EuiComponentNameSize; }; - + export const EuiComponentName: FunctionComponent = ({...}) => { const euiTheme = useEuiTheme(); - + const styles = euiComponentNameStyles(euiTheme); const cssStyles = [styles.euiComponentName, styles[size]]; - + return (
) @@ -158,7 +157,6 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({ }); ``` - ## Style helpers EUI components often have style variants that use a similar patterns. In these cases, consider creating a helper function to create repetitive styles. @@ -239,11 +237,11 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({ ```tsx export const EuiComponentName: FunctionComponent = ({...}) => { const euiTheme = useEuiTheme(); - + const styles = euiComponentNameStyles(euiTheme); const cssStyles = [styles.euiComponentName]; const cssChildStyles = [styles.euiComponentName__child]; - + return (
@@ -273,7 +271,7 @@ export const euiComponentNameFooterStyles = ({ euiTheme }: UseEuiTheme) => ({ ```tsx export const EuiComponentName: FunctionComponent = ({...}) => { const euiTheme = useEuiTheme(); - + const styles = euiComponentNameStyles(euiTheme); const cssStyles = [styles.euiComponentName]; @@ -281,7 +279,7 @@ export const EuiComponentName: FunctionComponent = ({...} const cssHeaderStyles = [headerStyles.euiComponentName__header]; const cssHeaderIconStyles = [headerStyles.euiComponentName__headerIcon]; const cssHeaderButtonStyles = [headerStyles.euiComponentName__headerButton]; - + const footerStyles = euiComponentNameFooterStyles(euiTheme); const cssFooterStyles = [footerStyles.euiComponentName__footer]; @@ -320,13 +318,13 @@ export const euiComponentNameChildStyles = ({ euiTheme }: UseEuiTheme) => ({ ```tsx export const EuiComponentName: FunctionComponent = ({...}) => { const euiTheme = useEuiTheme(); - + const styles = euiComponentNameStyles(euiTheme); const cssStyles = [styles.euiComponentName, styles[size]]; const childStyles = euiComponentNameChildStyles(euiTheme); const cssChildStyles = [childStyles.euiComponentName__child, childStyles[size]]; - + return (
@@ -337,7 +335,6 @@ export const EuiComponentName: FunctionComponent = ({...} If for other reasons, it is absolutely necessary to target a child from within another selector, you should use the [class attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) to match a part of the class string you expect to find. - ```ts export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({ euiComponentName: css` @@ -345,9 +342,10 @@ export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({ `, }); ``` + ## Creating `colorMode` specific components -When creating components that rely on a specific `colorMode` from ``, use this pattern to create a wrapper that will pass the entire component `` details. +When creating components that rely on a specific `colorMode` from ``, use this pattern to create a wrapper that will pass the entire component `` details. - `_EuiComponentName` is an internal component that contains the desired functionality and styles. - `EuiComponentName` is the exportable component that wraps `_EuiComponentName` inside of ``. @@ -404,6 +402,7 @@ const euiMixin = ( ``` If the mixin does not accept required or optional properties, the argument can be removed. + ## Writing unit tests for output styles If using complex utilities or calculations that leaves you unsure as to the output of your styles, it may be worth writing Jest snapshot tests to capture the final output. See [EuiText's style](https://github.com/elastic/eui/blob/main/src/components/text/text.styles.test.ts) [snapshots](https://github.com/elastic/eui/blob/main/src/components/text/__snapshots__/text.styles.test.ts.snap) or [EuiTitle](https://github.com/elastic/eui/blob/main/src/components/title/title.styles.test.ts) for an example of this. From 8affcf096d1953d54b393085958c740ade66392d Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 14 Jun 2022 09:30:13 -0400 Subject: [PATCH 02/24] =?UTF-8?q?[EuiPopoverFooter]=20Converted=20except?= =?UTF-8?q?=20for=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inherited panel padding/margin --- .../data_grid_cell.test.tsx.snap | 2 +- .../column_selector.test.tsx.snap | 2 +- .../column_sorting.test.tsx.snap | 2 +- .../popover_footer.test.tsx.snap | 22 ++++++++++--- src/components/popover/_popover_footer.scss | 20 ------------ .../popover/popover_footer.styles.ts | 23 +++++++++++++ .../popover/popover_footer.test.tsx | 6 +++- src/components/popover/popover_footer.tsx | 32 +++++++++---------- .../__snapshots__/tour_step.test.tsx.snap | 10 +++--- src/global_styling/mixins/_popover.scss | 6 ---- 10 files changed, 69 insertions(+), 56 deletions(-) create mode 100644 src/components/popover/popover_footer.styles.ts diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index 4e194c24334..a87a5f51e54 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -19,7 +19,7 @@ Array [
,
`; exports[`EuiPopoverFooter props paddingSize l is rendered 1`] = `
`; exports[`EuiPopoverFooter props paddingSize m is rendered 1`] = `
`; exports[`EuiPopoverFooter props paddingSize none is rendered 1`] = `
`; exports[`EuiPopoverFooter props paddingSize s is rendered 1`] = `
+`; + +exports[`EuiPopoverFooter props paddingSize xl is rendered 1`] = ` +
+`; + +exports[`EuiPopoverFooter props paddingSize xs is rendered 1`] = ` +
`; diff --git a/src/components/popover/_popover_footer.scss b/src/components/popover/_popover_footer.scss index 1430c289139..031547b5ed8 100644 --- a/src/components/popover/_popover_footer.scss +++ b/src/components/popover/_popover_footer.scss @@ -1,17 +1,3 @@ -.euiPopoverFooter { - @include euiPopoverFooter; -} - -.euiPopoverFooter--paddingNone { - padding: 0; -} - -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopoverFooter--#{$modifier} { - padding: $amount; - } -} - // If the popover's containing panel has padding applied, // ensure the title expands to cover that padding and // take on the same amount of padding horizontally @@ -25,9 +11,3 @@ } } } - -// Mainly for specificity, but don't add padding to the footer if -// neither the the panel nor the footer has a padding modifier (aka NONE) -.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverFooter:not([class*='euiPopoverFooter--padding']) { - padding: 0; -} diff --git a/src/components/popover/popover_footer.styles.ts b/src/components/popover/popover_footer.styles.ts new file mode 100644 index 00000000000..99f26cfa754 --- /dev/null +++ b/src/components/popover/popover_footer.styles.ts @@ -0,0 +1,23 @@ +/* + * 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 { euiFontSize } from '../../global_styling'; +import { UseEuiTheme } from '../../services'; + +export const euiPopoverFooterStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + // Base + euiPopoverFooter: css` + ${euiFontSize(euiThemeContext, 's')}; + border-top: ${euiTheme.border.thin}; + `, + }; +}; diff --git a/src/components/popover/popover_footer.test.tsx b/src/components/popover/popover_footer.test.tsx index f4df60d6396..0356da0d86b 100644 --- a/src/components/popover/popover_footer.test.tsx +++ b/src/components/popover/popover_footer.test.tsx @@ -9,8 +9,10 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; +import { shouldRenderCustomStyles } from '../../test/internal'; -import { EuiPopoverFooter, PADDING_SIZES } from './popover_footer'; +import { EuiPopoverFooter } from './popover_footer'; +import { PADDING_SIZES } from '../../global_styling'; describe('EuiPopoverFooter', () => { test('is rendered', () => { @@ -19,6 +21,8 @@ describe('EuiPopoverFooter', () => { expect(component).toMatchSnapshot(); }); + shouldRenderCustomStyles(); + describe('props', () => { describe('paddingSize', () => { PADDING_SIZES.forEach((size) => { diff --git a/src/components/popover/popover_footer.tsx b/src/components/popover/popover_footer.tsx index ebad971b38f..3bb9f6cc33f 100644 --- a/src/components/popover/popover_footer.tsx +++ b/src/components/popover/popover_footer.tsx @@ -8,8 +8,10 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../common'; -import { PanelPaddingSize } from '../panel'; +import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling'; +import { useEuiTheme } from '../../services'; +import { CommonProps } from '../common'; +import { euiPopoverFooterStyles } from './popover_footer.styles'; export type EuiPopoverFooterProps = FunctionComponent< HTMLAttributes & @@ -18,35 +20,33 @@ export type EuiPopoverFooterProps = FunctionComponent< * Customize the all around padding of the popover footer. * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover */ - paddingSize?: PanelPaddingSize; + paddingSize?: EuiPaddingSize; } >; -const paddingSizeToClassNameMap = { - none: 'euiPopoverFooter--paddingNone', - s: 'euiPopoverFooter--paddingSmall', - m: 'euiPopoverFooter--paddingMedium', - l: 'euiPopoverFooter--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - export const EuiPopoverFooter: EuiPopoverFooterProps = ({ children, className, paddingSize, ...rest }) => { + const euiTheme = useEuiTheme(); + const styles = euiPopoverFooterStyles(euiTheme); + const paddingStyles = useEuiPaddingCSS(); + const cssStyles = [ + styles.euiPopoverFooter, + paddingSize && paddingStyles[paddingSize], + ]; + const classes = classNames( 'euiPopoverFooter', - // @ts-expect-error EuiPanel increased its available sizes. - // When we convert this component to Emotion, we should also increase sizes to match EuiPanel and remove this comment. - paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, + // The following class is necessary to makeup for the panel padding + paddingSize ? `euiPopoverFooter--padding-${paddingSize}` : null, className ); return ( -
+
{children}
); diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index 26b1a020f37..69870bc6cd2 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -81,7 +81,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = ` You are here
Date: Tue, 14 Jun 2022 09:56:32 -0400 Subject: [PATCH 03/24] =?UTF-8?q?[EuiPopoverTitle]=20Converted=20except=20?= =?UTF-8?q?for=E2=80=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Inherited panel padding/margin --- .../context_menu/_context_menu_panel.scss | 1 - .../column_selector.test.tsx.snap | 2 +- .../__snapshots__/popover_title.test.tsx.snap | 22 ++++++++++--- src/components/popover/_popover_title.scss | 20 ------------ .../popover/popover_title.styles.ts | 23 +++++++++++++ src/components/popover/popover_title.test.tsx | 6 +++- src/components/popover/popover_title.tsx | 32 +++++++++---------- .../__snapshots__/tour_step.test.tsx.snap | 10 +++--- src/global_styling/mixins/_popover.scss | 2 -- .../global_styling/mixins/_index.scss | 1 - .../global_styling/mixins/_popover.scss | 5 --- 11 files changed, 67 insertions(+), 57 deletions(-) create mode 100644 src/components/popover/popover_title.styles.ts delete mode 100644 src/themes/amsterdam/global_styling/mixins/_popover.scss diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss index 3dd1310d3b2..49c00b8359a 100644 --- a/src/components/context_menu/_context_menu_panel.scss +++ b/src/components/context_menu/_context_menu_panel.scss @@ -51,7 +51,6 @@ } &--small { - @include euiPopoverTitle('s'); padding: ($euiSizeS * .75) $euiSizeS; } } diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 8cab34f929b..5b558a1d6be 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -57,7 +57,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
`; exports[`EuiPopoverTitle props paddingSize l is rendered 1`] = `
`; exports[`EuiPopoverTitle props paddingSize m is rendered 1`] = `
`; exports[`EuiPopoverTitle props paddingSize none is rendered 1`] = `
`; exports[`EuiPopoverTitle props paddingSize s is rendered 1`] = `
+`; + +exports[`EuiPopoverTitle props paddingSize xl is rendered 1`] = ` +
+`; + +exports[`EuiPopoverTitle props paddingSize xs is rendered 1`] = ` +
`; diff --git a/src/components/popover/_popover_title.scss b/src/components/popover/_popover_title.scss index 3bebb59427c..54e6fc693ab 100644 --- a/src/components/popover/_popover_title.scss +++ b/src/components/popover/_popover_title.scss @@ -1,17 +1,3 @@ -.euiPopoverTitle { - @include euiPopoverTitle; -} - -.euiPopoverTitle--paddingNone { - padding: 0; -} - -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiPopoverTitle--#{$modifier} { - padding: $amount; - } -} - // If the popover's containing panel has padding applied, // ensure the title expands to cover that padding and // take on the same amount of padding horizontally @@ -25,9 +11,3 @@ } } } - -// Mainly for specificity, but don't add padding to the title if -// neither the the panel nor the title has a padding modifier (aka NONE) -.euiPopover__panel:not([class*='euiPanel--padding']) .euiPopoverTitle:not([class*='euiPopoverTitle--padding']) { - padding: 0; -} diff --git a/src/components/popover/popover_title.styles.ts b/src/components/popover/popover_title.styles.ts new file mode 100644 index 00000000000..fafcccfb85f --- /dev/null +++ b/src/components/popover/popover_title.styles.ts @@ -0,0 +1,23 @@ +/* + * 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 { UseEuiTheme } from '../../services'; +import { euiTitle } from '../title/title.styles'; + +export const euiPopoverTitleStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + // Base + euiPopoverTitle: css` + ${euiTitle(euiThemeContext, 'xxs')}; + border-bottom: ${euiTheme.border.thin}; + `, + }; +}; diff --git a/src/components/popover/popover_title.test.tsx b/src/components/popover/popover_title.test.tsx index 9db3e2d6ba9..cd957a72041 100644 --- a/src/components/popover/popover_title.test.tsx +++ b/src/components/popover/popover_title.test.tsx @@ -9,8 +9,10 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; +import { shouldRenderCustomStyles } from '../../test/internal'; +import { PADDING_SIZES } from '../../global_styling'; -import { EuiPopoverTitle, PADDING_SIZES } from './popover_title'; +import { EuiPopoverTitle } from './popover_title'; describe('EuiPopoverTitle', () => { test('is rendered', () => { @@ -19,6 +21,8 @@ describe('EuiPopoverTitle', () => { expect(component).toMatchSnapshot(); }); + shouldRenderCustomStyles(); + describe('props', () => { describe('paddingSize', () => { PADDING_SIZES.forEach((size) => { diff --git a/src/components/popover/popover_title.tsx b/src/components/popover/popover_title.tsx index 3dfaa6e3c45..14ac4c48ab2 100644 --- a/src/components/popover/popover_title.tsx +++ b/src/components/popover/popover_title.tsx @@ -8,8 +8,10 @@ import React, { HTMLAttributes, FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../common'; -import { PanelPaddingSize } from '../panel'; +import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling'; +import { useEuiTheme } from '../../services'; +import { CommonProps } from '../common'; +import { euiPopoverTitleStyles } from './popover_title.styles'; export type EuiPopoverTitleProps = FunctionComponent< HTMLAttributes & @@ -18,35 +20,33 @@ export type EuiPopoverTitleProps = FunctionComponent< * Customize the all around padding of the popover title. * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover */ - paddingSize?: PanelPaddingSize; + paddingSize?: EuiPaddingSize; } >; -const paddingSizeToClassNameMap = { - none: 'euiPopoverTitle--paddingNone', - s: 'euiPopoverTitle--paddingSmall', - m: 'euiPopoverTitle--paddingMedium', - l: 'euiPopoverTitle--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - export const EuiPopoverTitle: EuiPopoverTitleProps = ({ children, className, paddingSize, ...rest }) => { + const euiTheme = useEuiTheme(); + const styles = euiPopoverTitleStyles(euiTheme); + const paddingStyles = useEuiPaddingCSS(); + const cssStyles = [ + styles.euiPopoverTitle, + paddingSize && paddingStyles[paddingSize], + ]; + const classes = classNames( 'euiPopoverTitle', - // @ts-expect-error EuiPanel increased its available sizes - // When we convert this component to Emotion, we should also increase sizes to match EuiPanel and remove this comment. - paddingSize ? paddingSizeToClassNameMap[paddingSize] : null, + // The following class is necessary to makeup for the panel padding + paddingSize ? `euiPopoverTitle--padding-${paddingSize}` : null, className ); return ( -
+
{children}
); diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap index 69870bc6cd2..f48159d2659 100644 --- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap +++ b/src/components/tour/__snapshots__/tour_step.test.tsx.snap @@ -66,7 +66,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = ` style="min-width: 240px; max-width: 420px;" >

Date: Tue, 14 Jun 2022 13:30:17 -0400 Subject: [PATCH 04/24] Removed Sass mixin `euiPopoverTitle` --- src/components/context_menu/_context_menu_panel.scss | 3 ++- src/global_styling/mixins/_index.scss | 1 - src/global_styling/mixins/_popover.scss | 11 ----------- .../amsterdam/global_styling/mixins/_index.scss | 1 - 4 files changed, 2 insertions(+), 14 deletions(-) delete mode 100644 src/global_styling/mixins/_popover.scss diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss index 49c00b8359a..cefb1938b48 100644 --- a/src/components/context_menu/_context_menu_panel.scss +++ b/src/components/context_menu/_context_menu_panel.scss @@ -39,11 +39,12 @@ } .euiContextMenuPanelTitle { - @include euiPopoverTitle; + @include euiTitle('xxs'); padding: $euiSizeM; width: 100%; text-align: left; outline-offset: -$euiFocusRingSize; + border-bottom: $euiBorderThin; &:enabled:hover, &:enabled:focus { diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss index 9589c3d60d5..ba0f683bb84 100644 --- a/src/global_styling/mixins/_index.scss +++ b/src/global_styling/mixins/_index.scss @@ -13,6 +13,5 @@ @import 'loading'; @import 'link'; @import 'panel'; -@import 'popover'; @import 'range'; @import 'tool_tip'; diff --git a/src/global_styling/mixins/_popover.scss b/src/global_styling/mixins/_popover.scss deleted file mode 100644 index 397c860485d..00000000000 --- a/src/global_styling/mixins/_popover.scss +++ /dev/null @@ -1,11 +0,0 @@ -@mixin euiPopoverTitle($size: 'm') { - @if ($size == 's') { - @include euiTitle('xxxs'); - } @else if ($size == 'm') { - @include euiTitle('xxs'); - } @else { - @warn 'euiPopoverTitle only accepts "s" or "m" sizes'; - } - - border-bottom: $euiBorderThin; -} diff --git a/src/themes/amsterdam/global_styling/mixins/_index.scss b/src/themes/amsterdam/global_styling/mixins/_index.scss index 5e0212f8602..ffc04e1b428 100644 --- a/src/themes/amsterdam/global_styling/mixins/_index.scss +++ b/src/themes/amsterdam/global_styling/mixins/_index.scss @@ -17,6 +17,5 @@ @import '../../../../global_styling/mixins/loading'; @import 'link'; @import '../../../../global_styling/mixins/panel'; -@import '../../../../global_styling/mixins/popover'; @import 'range'; @import '../../../../global_styling/mixins/tool_tip'; From e1ff0047d41635a37f9f67dd78d13d2af0c54535 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 14 Jun 2022 14:44:57 -0400 Subject: [PATCH 05/24] Added [EuiPopoverArrow] and simplified styles --- .../column_selector.test.tsx.snap | 2 +- .../column_sorting.test.tsx.snap | 2 +- .../__snapshots__/super_select.test.tsx.snap | 20 +-- .../__snapshots__/popover.test.tsx.snap | 27 ++-- src/components/popover/_popover.scss | 117 ++---------------- src/components/popover/popover.tsx | 22 ++-- .../__snapshots__/popover_arrow.test.tsx.snap | 33 +++++ src/components/popover/popover_arrow/index.ts | 13 ++ .../popover_arrow/popover_arrow.styles.ts | 76 ++++++++++++ .../popover_arrow/popover_arrow.test.tsx | 30 +++++ .../popover/popover_arrow/popover_arrow.tsx | 36 ++++++ .../__snapshots__/tour_step.test.tsx.snap | 10 +- 12 files changed, 233 insertions(+), 155 deletions(-) create mode 100644 src/components/popover/popover_arrow/__snapshots__/popover_arrow.test.tsx.snap create mode 100644 src/components/popover/popover_arrow/index.ts create mode 100644 src/components/popover/popover_arrow/popover_arrow.styles.ts create mode 100644 src/components/popover/popover_arrow/popover_arrow.test.tsx create mode 100644 src/components/popover/popover_arrow/popover_arrow.tsx diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index 5b558a1d6be..7adcea535ff 100644 --- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -45,7 +45,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov tabindex="0" >