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`] > +`; + exports[`EuiTab props disabled is rendered 1`] = ` @@ -57,1661 +61,63 @@ 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`] = ` @@ -1727,7 +133,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = ` @@ -1783,7 +193,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = ` @@ -1839,7 +253,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = ` @@ -1895,7 +313,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] = @@ -1951,7 +373,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = ` @@ -2007,7 +433,7 @@ exports[`EuiTabbedContent props size can be small 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..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( @@ -116,7 +119,7 @@ describe('EuiTabbedContent', () => { ], }); - expect(component).toMatchSnapshot(); + expect(component.render()).toMatchSnapshot(); }); }); }); 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.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` 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..08fbe8348b7 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; @@ -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>(
diff --git a/upcoming_changelogs/6336.md b/upcoming_changelogs/6336.md new file mode 100644 index 00000000000..86eb4588c4e --- /dev/null +++ b/upcoming_changelogs/6336.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed incorrect padding on `xl`-sized `EuiTabs`