From b23953f5fdc59eff32a19700fcd48693a6ba5b63 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Tue, 30 Apr 2019 16:15:25 -0400 Subject: [PATCH 01/16] initial props, style and test additions --- src-docs/src/views/tabs/tabs.js | 61 +++++++++------- .../tabs/__snapshots__/tabs.test.js.snap | 7 ++ src/components/tabs/_tabs.scss | 71 ++++++++++--------- .../__snapshots__/tabbed_content.test.js.snap | 51 +++++++++++++ .../tabbed_content/tabbed_content.test.js | 51 ++++++++----- src/components/tabs/tabs.js | 25 ++++--- src/components/tabs/tabs.test.js | 15 ++-- 7 files changed, 190 insertions(+), 91 deletions(-) diff --git a/src-docs/src/views/tabs/tabs.js b/src-docs/src/views/tabs/tabs.js index eb65c8c2380..dbae1a24764 100644 --- a/src-docs/src/views/tabs/tabs.js +++ b/src-docs/src/views/tabs/tabs.js @@ -1,32 +1,33 @@ import React, { Component } from 'react'; -import { - EuiTabs, - EuiTab, - EuiSpacer, -} from '../../../../src/components'; +import { EuiTabs, EuiTab, EuiSpacer } from '../../../../src/components'; class EuiTabsExample extends Component { constructor(props) { super(props); - this.tabs = [{ - id: 'cobalt', - name: 'Cobalt', - disabled: false, - }, { - id: 'dextrose', - name: 'Dextrose', - disabled: false, - }, { - id: 'hydrogen', - name: 'Hydrogen', - disabled: true, - }, { - id: 'monosodium_glutammate', - name: 'Monosodium Glutamate', - disabled: false, - }]; + this.tabs = [ + { + id: 'cobalt', + name: 'Cobalt', + disabled: false, + }, + { + id: 'dextrose', + name: 'Dextrose', + disabled: false, + }, + { + id: 'hydrogen', + name: 'Hydrogen', + disabled: true, + }, + { + id: 'monosodium_glutammate', + name: 'Monosodium Glutamate', + disabled: false, + }, + ]; this.state = { selectedTabId: 'cobalt', @@ -37,7 +38,7 @@ class EuiTabsExample extends Component { this.setState({ selectedTabId: id, }); - } + }; renderTabs() { return this.tabs.map((tab, index) => ( @@ -55,13 +56,19 @@ class EuiTabsExample extends Component { render() { return (
- - {this.renderTabs()} - + {this.renderTabs()} + + + + {this.renderTabs()} + + + + {this.renderTabs()} - + {this.renderTabs()}
diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap index 38b12929ef1..9e580c01081 100644 --- a/src/components/tabs/__snapshots__/tabs.test.js.snap +++ b/src/components/tabs/__snapshots__/tabs.test.js.snap @@ -1,5 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiTabs props display is rendered 1`] = ` +
+`; + exports[`EuiTabs props expand is rendered 1`] = `
@@ -198,6 +199,56 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
`; +exports[`EuiTabbedContent props display is rendered 1`] = ` +
+
+ + +
+
+

+ Elasticsearch content +

+
+
+`; + exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] = `
({ - htmlIdGenerator: () => { return () => 42; }, + htmlIdGenerator: () => { + return () => 42; + }, })); const elasticsearchTab = { @@ -23,14 +25,13 @@ const kibanaTab = { content:

Kibana content

, }; -const tabs = [ - elasticsearchTab, - kibanaTab, -]; +const tabs = [elasticsearchTab, kibanaTab]; describe('EuiTabbedContent', () => { test('is rendered with required props and tabs', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); @@ -38,7 +39,9 @@ describe('EuiTabbedContent', () => { describe('onTabClick', () => { test('is called when a tab is clicked', () => { const onTabClickHandler = sinon.stub(); - const component = mount(); + const component = mount( + + ); findTestSubject(component, 'kibanaTab').simulate('click'); sinon.assert.calledOnce(onTabClickHandler); sinon.assert.calledWith(onTabClickHandler, kibanaTab); @@ -47,14 +50,18 @@ describe('EuiTabbedContent', () => { describe('selectedTab', () => { test('renders a selected tab', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); }); describe('initialSelectedTab', () => { test('renders a selected tab', () => { - const component = render(); + const component = render( + + ); expect(component).toMatchSnapshot(); }); }); @@ -65,6 +72,15 @@ describe('EuiTabbedContent', () => { expect(component).toMatchSnapshot(); }); }); + + describe('display', () => { + test('is rendered', () => { + const component = render( + + ); + expect(component).toMatchSnapshot(); + }); + }); }); describe('behavior', () => { @@ -77,21 +93,24 @@ describe('EuiTabbedContent', () => { const tabs = [ elasticsearchTab, { - ...kibanaTab - } + ...kibanaTab, + }, ]; - const component = mount(); + const component = mount(); - component.find('EuiTab[id="kibana"] button').first().simulate('click'); + component + .find('EuiTab[id="kibana"] button') + .first() + .simulate('click'); component.setProps({ tabs: [ elasticsearchTab, { ...kibanaTab, - content:

updated Kibana content

- } - ] + content:

updated Kibana content

, + }, + ], }); expect(component).toMatchSnapshot(); diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js index c014f5fa066..109602bd48f 100644 --- a/src/components/tabs/tabs.js +++ b/src/components/tabs/tabs.js @@ -2,6 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +const displayToClassNameMap = { + condensed: 'euiTabs--condensed', + default: null, +}; + +export const DISPLAYS = Object.keys(displayToClassNameMap); + const sizeToClassNameMap = { s: 'euiTabs--small', m: null, @@ -10,14 +17,16 @@ const sizeToClassNameMap = { export const SIZES = Object.keys(sizeToClassNameMap); export const EuiTabs = ({ - size, - expand, children, className, + display, + expand, + size, ...rest }) => { const classes = classNames( 'euiTabs', + displayToClassNameMap[display], sizeToClassNameMap[size], { 'euiTabs--expand': expand, @@ -26,11 +35,7 @@ export const EuiTabs = ({ ); return ( -
+
{children}
); @@ -39,15 +44,17 @@ export const EuiTabs = ({ EuiTabs.propTypes = { children: PropTypes.node, className: PropTypes.string, - size: PropTypes.oneOf(SIZES), + display: PropTypes.oneOf(DISPLAYS), /** * Evenly stretches each tab to fill the * horizontal space */ expand: PropTypes.bool, + size: PropTypes.oneOf(SIZES), }; EuiTabs.defaultProps = { - size: 'm', + display: 'default', expand: false, + size: 'm', }; diff --git a/src/components/tabs/tabs.test.js b/src/components/tabs/tabs.test.js index a71e0eb40f6..7a195e773d4 100644 --- a/src/components/tabs/tabs.test.js +++ b/src/components/tabs/tabs.test.js @@ -2,15 +2,11 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { - EuiTabs, -} from './tabs'; +import { EuiTabs } from './tabs'; describe('EuiTabs', () => { test('renders', () => { - const component = ( - - ); + const component = ; expect(render(component)).toMatchSnapshot(); }); @@ -23,6 +19,13 @@ describe('EuiTabs', () => { }); }); + describe('display', () => { + test('is rendered', () => { + const component = render(); + expect(component).toMatchSnapshot(); + }); + }); + describe('expand', () => { test('is rendered', () => { const component = render(); From bb46141751d6072192d7ba7e264409ef1f4081f4 Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Tue, 30 Apr 2019 16:28:26 -0400 Subject: [PATCH 02/16] css alpha rules ocd --- src/components/tabs/_tabs.scss | 44 +++++++++++++++++----------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index ebbc0877301..8f98d679aa1 100644 --- a/src/components/tabs/_tabs.scss +++ b/src/components/tabs/_tabs.scss @@ -1,10 +1,10 @@ .euiTabs { @include euiScrollBar; display: flex; - position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; // don't scroll vertically when scrolling horizontally + position: relative; // Changing height of scrollbar so it sits flush with border // sass-lint:disable no-vendor-prefixes @@ -13,23 +13,23 @@ } &:not(.euiTabs--condensed)::before { - position: absolute; + background-color: $euiColorLightShade; bottom: 0; + content: ''; + height: 1px; left: 0; + position: absolute; right: 0; - height: 1px; - background-color: $euiColorLightShade; - content: ''; } } .euiTab { @include fontSize($euiTabFontSize); - line-height: $euiLineHeight; - position: relative; + background-color: transparent; cursor: pointer; + line-height: $euiLineHeight; padding: $euiSizeM $euiSize; - background-color: transparent; + position: relative; transition: color $euiAnimSpeedNormal $euiAnimSlightResistance, background-color $euiAnimSpeedNormal $euiAnimSlightResistance; &:hover:not(.euiTab-isSelected) { @@ -44,13 +44,13 @@ background-color: $euiFocusBackgroundColor; &::before { - position: absolute; + background-color: $euiColorLightShade; bottom: 0; + content: ''; + height: 1px; left: 0; + position: absolute; right: 0; - height: 1px; - background-color: $euiColorLightShade; - content: ''; } } } @@ -59,25 +59,25 @@ color: $euiColorMediumShade; &:hover { + color: $euiColorMediumShade; cursor: not-allowed; text-decoration: none; - color: $euiColorMediumShade; } } &.euiTab-isSelected { - cursor: default; color: $euiColorPrimary; + cursor: default; &::after { - position: absolute; + animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance; + background-color: $euiColorPrimary; bottom: 0; - left: 0; content: ' '; - width: 100%; height: $euiBorderWidthThick; - background-color: $euiColorPrimary; - animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance; + left: 0; + position: absolute; + width: 100%; } } @@ -96,18 +96,18 @@ } .euiTabs--expand & { - flex-grow: 1; flex-basis: 0%; + flex-grow: 1; } } .euiTab__content { display: block; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - transition: transform $euiAnimSpeedFast $euiAnimSlightBounce; transform: translateY(0); + transition: transform $euiAnimSpeedFast $euiAnimSlightBounce; + white-space: nowrap; } @keyframes euiTab { From 28054b822688d575586e90c2a97ae7ca71738a8a Mon Sep 17 00:00:00 2001 From: Michael Marcialis Date: Tue, 30 Apr 2019 17:21:15 -0400 Subject: [PATCH 03/16] update snapshots --- .../__snapshots__/tabbed_content.test.js.snap | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap index 02b88ae3ba4..4bdb1ec451a 100644 --- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap +++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap @@ -200,11 +200,9 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = ` `; exports[`EuiTabbedContent props display is rendered 1`] = ` -
+