From bf4b7474a69483718dba72e5a0cf98f453fc7194 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 11:40:47 -0700 Subject: [PATCH 01/11] Remove mounted snapshot --- .../tabbed_content.test.tsx.snap | 1700 +---------------- .../tabbed_content/tabbed_content.test.tsx | 2 +- 2 files changed, 50 insertions(+), 1652 deletions(-) diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap index 6abf6017711..7a97e2299c1 100644 --- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap +++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap @@ -57,1661 +57,59 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t `; exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should update if it receives new content 1`] = ` - - Elasticsearch content -

, - "id": "es", - "name": "Elasticsearch", - }, - Object { - "append": "append", - "className": "kibanaTab", - "content":

- updated Kibana content -

, - "data-test-subj": "kibanaTab", - "id": "kibana", - "name": - Kibana - , - "prepend": "prepend", - }, - ] - } -> -
- +
+ - - - - - - -
-
- -
+ +
+ + prepend + + + + Kibana + + + + append + + + +
+

+ updated Kibana content +

- + `; exports[`EuiTabbedContent is rendered with required props and tabs 1`] = ` diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/src/components/tabs/tabbed_content/tabbed_content.test.tsx index 4eaa114462e..6855062a33d 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.test.tsx +++ b/src/components/tabs/tabbed_content/tabbed_content.test.tsx @@ -116,7 +116,7 @@ describe('EuiTabbedContent', () => { ], }); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); }); }); From 0559db6c3397ef4cd939a52902f8c47553a731f1 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:07:28 -0700 Subject: [PATCH 02/11] Emotion cleanup - remove unnecessary `calc`s --- src/components/tabs/tab.styles.ts | 17 +++++++++++------ src/components/tabs/tabs.styles.ts | 10 ++-------- 2 files changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index 4225c075004..aa3c7b3d699 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -7,6 +7,7 @@ */ import { css } from '@emotion/react'; +import { mathWithUnits } from '../../global_styling'; import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; @@ -45,16 +46,14 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { justify-content: center; `, selected: css` - box-shadow: inset 0 calc(${euiTheme.border.width.thick} * -1) 0 - ${euiTheme.colors.primary}; + box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.primary}; `, disabled: css` cursor: not-allowed; color: ${euiTheme.colors.disabledText}; .euiTab.euiTab__isSelected { - box-shadow: inset 0 calc(${euiTheme.border.width.thick} * -1) 0 - ${euiTheme.colors.disabledText}; + box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.disabledText}; } `, }; @@ -82,11 +81,17 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => { `, l: css` ${euiTitle(euiThemeContext, 'xs')}; - line-height: calc(${euiTheme.size.xl} + ${euiTheme.size.s}); + line-height: ${mathWithUnits( + [euiTheme.size.xl, euiTheme.size.s], + (x, y) => x + y + )}; `, xl: css` ${euiTitle(euiThemeContext, 's')}; - line-height: calc(${euiTheme.size.xxxl} + ${euiTheme.size.s}); + line-height: ${mathWithUnits( + [euiTheme.size.xxxl, euiTheme.size.s], + (x, y) => x + y + )}; `, // variations selected: css` diff --git a/src/components/tabs/tabs.styles.ts b/src/components/tabs/tabs.styles.ts index f17759246e8..f94e9185901 100644 --- a/src/components/tabs/tabs.styles.ts +++ b/src/components/tabs/tabs.styles.ts @@ -7,11 +7,7 @@ */ import { css } from '@emotion/react'; -import { - logicalCSS, - logicalCSSWithFallback, - mathWithUnits, -} from '../../global_styling'; +import { logicalCSS, logicalCSSWithFallback } from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiTabsStyles = (euiThemeContext: UseEuiTheme) => { @@ -27,9 +23,7 @@ export const euiTabsStyles = (euiThemeContext: UseEuiTheme) => { flex-shrink: 0; `, bottomBorder: css` - box-shadow: inset 0 - ${mathWithUnits(euiTheme.border.width.thin, (x) => x * -1)} 0 - ${euiTheme.border.color}; + box-shadow: inset 0 -${euiTheme.border.width.thin} 0 ${euiTheme.border.color}; `, // sizes s: css` From 72e9fedac58602297bfe7071a9c2f5b17bb4aea8 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:08:29 -0700 Subject: [PATCH 03/11] CSS cleanup - remove incorrect text color and unnecessary extra hover styles - text color is set by `euiTitle` and should not be disabled by default - disabled already inherits hover disabling from the default --- src/components/tabs/tab.styles.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index aa3c7b3d699..d7f12e9b8d1 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -64,8 +64,6 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => { return { euiTab__content: css` - color: ${euiTheme.colors.disabledText}; - &:hover { text-decoration: none; } @@ -99,10 +97,6 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => { `, disabled: css` color: ${euiTheme.colors.disabledText}; - - &:hover { - text-decoration: none; - } `, }; }; From b50a816d240a22ac44fc83b5e76f7632109b676b Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:09:20 -0700 Subject: [PATCH 04/11] CSS - misc logical property conversion - default shorthands sadly do not account for logical/direction changes --- src/components/tabs/tab.styles.ts | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index d7f12e9b8d1..9ad076c81f3 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -7,7 +7,7 @@ */ import { css } from '@emotion/react'; -import { mathWithUnits } from '../../global_styling'; +import { logicalCSS, mathWithUnits } from '../../global_styling'; import { UseEuiTheme } from '../../services'; import { euiTitle } from '../title/title.styles'; @@ -28,16 +28,20 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { `, // sizes s: css` - padding: 0 ${euiTheme.size.xs}; + ${logicalCSS('padding-vertical', 0)} + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} `, m: css` - padding: 0 ${euiTheme.size.xs}; + ${logicalCSS('padding-vertical', 0)} + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} `, l: css` - padding: 0 ${euiTheme.size.xs}; + ${logicalCSS('padding-vertical', 0)} + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} `, xl: css` - padding: ${euiTheme.size.s} ${euiTheme.size.xs}; + ${logicalCSS('padding-vertical', euiTheme.size.s)} + ${logicalCSS('padding-horizontal', euiTheme.size.xs)} `, // variations expanded: css` From 2033da59bcc381942cc13930e7fd4215967b73ff Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:34:06 -0700 Subject: [PATCH 05/11] Flatten/fix disabled selected selector --- .../tabs/__snapshots__/tab.test.tsx.snap | 16 ++++++++++++++++ src/components/tabs/tab.styles.ts | 15 ++++++++------- src/components/tabs/tab.test.tsx | 10 ++++++++++ src/components/tabs/tab.tsx | 4 ++-- 4 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/components/tabs/__snapshots__/tab.test.tsx.snap b/src/components/tabs/__snapshots__/tab.test.tsx.snap index c63e8109746..d5e1d1d4e0e 100644 --- a/src/components/tabs/__snapshots__/tab.test.tsx.snap +++ b/src/components/tabs/__snapshots__/tab.test.tsx.snap @@ -18,6 +18,22 @@ exports[`EuiTab props append is rendered 1`] = ` `; +exports[`EuiTab props disabled and selected 1`] = ` + +`; + exports[`EuiTab props disabled is rendered 1`] = ` @@ -85,7 +89,9 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up role="tab" type="button" > - + prepend - + append @@ -145,7 +153,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = ` role="tab" type="button" > - + prepend - + append @@ -201,7 +213,9 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = ` role="tab" type="button" > - + prepend - + append @@ -257,7 +273,9 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = ` role="tab" type="button" > - + prepend - + append @@ -313,7 +333,9 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] = role="tab" type="button" > - + prepend - + append @@ -369,7 +393,9 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = ` role="tab" type="button" > - + prepend - + append @@ -425,7 +453,9 @@ exports[`EuiTabbedContent props size can be small 1`] = ` role="tab" type="button" > - + prepend - + append From d7f612edb9d5ff93a836d9f398d2f21ed9c641dc Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:42:42 -0700 Subject: [PATCH 07/11] DRY out tab sizes types/consts + fix type name to match type name pre-Emotion conversion --- src/components/tabs/tab.tsx | 4 ++-- src/components/tabs/tabbed_content/tabbed_content.tsx | 4 ++-- src/components/tabs/tabs.test.tsx | 4 +--- src/components/tabs/tabs.tsx | 4 ++-- 4 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx index b8cee410dfc..9f7a764e182 100644 --- a/src/components/tabs/tab.tsx +++ b/src/components/tabs/tab.tsx @@ -19,7 +19,7 @@ import { getSecureRelForTarget, useEuiTheme } from '../../services'; import { validateHref } from '../../services/security/href_validator'; import { euiTabStyles, euiTabContentStyles } from './tab.styles'; -import { EuiTabsProps, EuiTabSizes } from './tabs'; +import { EuiTabsProps, EuiTabsSizes } from './tabs'; export interface EuiTabProps extends CommonProps { isSelected?: boolean; @@ -43,7 +43,7 @@ export interface EuiTabProps extends CommonProps { * Sizes affect both font size and overall size. * Only use the `xl` size when displayed as page titles. */ - size?: EuiTabSizes; + size?: EuiTabsSizes; } type EuiTabPropsForAnchor = EuiTabProps & diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx index eaead4fe06c..1a5361019c4 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.tsx +++ b/src/components/tabs/tabbed_content/tabbed_content.tsx @@ -16,7 +16,7 @@ import React, { import { htmlIdGenerator } from '../../../services'; -import { EuiTabs } from '../tabs'; +import { EuiTabs, EuiTabsSizes } from '../tabs'; import { EuiTab, EuiTabProps } from '../tab'; import { CommonProps } from '../../common'; @@ -58,7 +58,7 @@ export type EuiTabbedContentProps = CommonProps & * Use this prop if you want to control selection state within the owner component */ selectedTab?: EuiTabbedContentTab; - size?: 's' | 'm' | 'l' | 'xl'; + size?: EuiTabsSizes; /** * Each tab needs id and content properties, so we can associate it with its panel for accessibility. * The name property (a node) is also required to display to the user. diff --git a/src/components/tabs/tabs.test.tsx b/src/components/tabs/tabs.test.tsx index e12574e6954..0bd2ac808d2 100644 --- a/src/components/tabs/tabs.test.tsx +++ b/src/components/tabs/tabs.test.tsx @@ -11,9 +11,7 @@ import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; import { shouldRenderCustomStyles } from '../../test/internal'; -import { EuiTabs } from './tabs'; - -const SIZES = ['s', 'm', 'l', 'xl'] as const; +import { EuiTabs, SIZES } from './tabs'; describe('EuiTabs', () => { shouldRenderCustomStyles(children); diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx index 6e11e1fe2cf..43da417ab33 100644 --- a/src/components/tabs/tabs.tsx +++ b/src/components/tabs/tabs.tsx @@ -20,7 +20,7 @@ import { cloneElementWithCss } from '../../services/theme/clone_element'; import { euiTabsStyles } from './tabs.styles'; export const SIZES = ['s', 'm', 'l', 'xl'] as const; -export type EuiTabSizes = typeof SIZES[number]; +export type EuiTabsSizes = typeof SIZES[number]; export type EuiTabsProps = CommonProps & HTMLAttributes & { @@ -41,7 +41,7 @@ export type EuiTabsProps = CommonProps & * Sizes affect both font size and overall size. * Only use the `xl` size when displayed as page titles. */ - size?: EuiTabSizes; + size?: EuiTabsSizes; }; export type EuiTabRef = HTMLDivElement; From 56da139ad8ab30944c0327fba00894f7b67aa81a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:49:21 -0700 Subject: [PATCH 08/11] Add missing `shouldRenderCustomStyles` tests to sub components --- src/components/tabs/tab.test.tsx | 3 +++ src/components/tabs/tabbed_content/tabbed_content.test.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/components/tabs/tab.test.tsx b/src/components/tabs/tab.test.tsx index d2b997ce51b..57f83b7fb7e 100644 --- a/src/components/tabs/tab.test.tsx +++ b/src/components/tabs/tab.test.tsx @@ -8,11 +8,14 @@ import React from 'react'; import { render, shallow } from 'enzyme'; +import { shouldRenderCustomStyles } from '../../test/internal'; import { requiredProps } from '../../test/required_props'; import { EuiTab } from './tab'; describe('EuiTab', () => { + shouldRenderCustomStyles( {}}>children); + describe('props', () => { describe('onClick', () => { test('renders button', () => { diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/src/components/tabs/tabbed_content/tabbed_content.test.tsx index 6855062a33d..8bbe33031f7 100644 --- a/src/components/tabs/tabbed_content/tabbed_content.test.tsx +++ b/src/components/tabs/tabbed_content/tabbed_content.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { render, mount } from 'enzyme'; import { requiredProps, findTestSubject } from '../../../test'; +import { shouldRenderCustomStyles } from '../../../test/internal'; import { EuiTabbedContent, AUTOFOCUS } from './tabbed_content'; @@ -31,6 +32,8 @@ const kibanaTab = { const tabs = [elasticsearchTab, kibanaTab]; describe('EuiTabbedContent', () => { + shouldRenderCustomStyles(); + test('is rendered with required props and tabs', () => { const component = render( From bb66f3f29cf8a123882d70f4b4fd0c13375b4c58 Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 12:50:31 -0700 Subject: [PATCH 09/11] [misc] rename Emotion vars to match other components/conversions --- src/components/tabs/tabs.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx index 43da417ab33..08fbe8348b7 100644 --- a/src/components/tabs/tabs.tsx +++ b/src/components/tabs/tabs.tsx @@ -62,11 +62,11 @@ export const EuiTabs = forwardRef>( const classes = classNames('euiTabs', className); - const tabsStyles = euiTabsStyles(euiTheme); - const computedStyles = [ - tabsStyles.euiTabs, - tabsStyles[size], - bottomBorder && tabsStyles.bottomBorder, + const styles = euiTabsStyles(euiTheme); + const cssStyles = [ + styles.euiTabs, + styles[size], + bottomBorder && styles.bottomBorder, ]; const tabItems = React.Children.map(children, (child) => { @@ -83,7 +83,7 @@ export const EuiTabs = forwardRef>(
From 39712c9e11b50156b8b8b7ecb32f48722e02c9ac Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Tue, 1 Nov 2022 13:12:00 -0700 Subject: [PATCH 10/11] Remove unnecessary padding sizes on `euiTab` Per old Amsterdam overrides, *all* padding for all sizes should be the same (0 xs) --- .../__snapshots__/page_header.test.tsx.snap | 4 +-- .../page_header_content.test.tsx.snap | 12 +++---- src/components/tabs/tab.styles.ts | 19 ++--------- src/components/tabs/tab.tsx | 1 - .../tabbed_content.test.tsx.snap | 32 +++++++++---------- 5 files changed, 26 insertions(+), 42 deletions(-) diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 1d845e1e86b..e22e9bb5642 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -330,7 +330,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] >