From dcaec829c7ae79a0a308042eb611e855e0a418de Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 11:44:23 -0400 Subject: [PATCH 01/11] Moved `EuiHeaderNotification` to generic `EuiNotificationBadge` --- src-docs/src/views/header/header_user_menu.js | 4 +-- src/components/badge/_index.scss | 1 + src/components/badge/index.js | 4 +++ .../badge_notification.test.js.snap | 9 +++++++ .../_badge_notification.scss | 14 +++++++++++ .../badge/notification_badge/_index.scss | 1 + .../notification_badge/badge_notification.js | 25 +++++++++++++++++++ .../badge_notification.test.js | 16 ++++++++++++ .../badge/notification_badge/index.js | 3 +++ .../header_notification.test.js.snap | 11 -------- src/components/header/_header.scss | 12 --------- .../header/_header_notification.scss | 12 --------- src/components/header/_index.scss | 2 -- src/components/header/header_notification.js | 15 ----------- .../header/header_notification.test.js | 18 ------------- src/components/header/index.js | 4 --- src/components/index.js | 2 +- 17 files changed, 76 insertions(+), 77 deletions(-) create mode 100644 src/components/badge/notification_badge/__snapshots__/badge_notification.test.js.snap create mode 100644 src/components/badge/notification_badge/_badge_notification.scss create mode 100644 src/components/badge/notification_badge/_index.scss create mode 100644 src/components/badge/notification_badge/badge_notification.js create mode 100644 src/components/badge/notification_badge/badge_notification.test.js create mode 100644 src/components/badge/notification_badge/index.js delete mode 100644 src/components/header/__snapshots__/header_notification.test.js.snap delete mode 100644 src/components/header/_header_notification.scss delete mode 100644 src/components/header/header_notification.js delete mode 100644 src/components/header/header_notification.test.js diff --git a/src-docs/src/views/header/header_user_menu.js b/src-docs/src/views/header/header_user_menu.js index 7ca5c62b335..0200b863cde 100644 --- a/src-docs/src/views/header/header_user_menu.js +++ b/src-docs/src/views/header/header_user_menu.js @@ -8,7 +8,7 @@ import { EuiFlexItem, EuiHeaderAlert, EuiHeaderSectionItemButton, - EuiHeaderNotification, + EuiNotificationBadge, EuiIcon, EuiLink, EuiText, @@ -51,7 +51,7 @@ export default class extends Component { size="m" /> - 3 + 3 ); diff --git a/src/components/badge/_index.scss b/src/components/badge/_index.scss index d099a250c31..a567f7a42de 100644 --- a/src/components/badge/_index.scss +++ b/src/components/badge/_index.scss @@ -1,2 +1,3 @@ @import 'badge'; @import 'beta_badge/index'; +@import 'notification_badge/index'; diff --git a/src/components/badge/index.js b/src/components/badge/index.js index 1603fdc3abb..447380f4ef0 100644 --- a/src/components/badge/index.js +++ b/src/components/badge/index.js @@ -5,3 +5,7 @@ export { export { EuiBetaBadge, } from './beta_badge'; + +export { + EuiNotificationBadge, +} from './notification_badge'; diff --git a/src/components/badge/notification_badge/__snapshots__/badge_notification.test.js.snap b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.js.snap new file mode 100644 index 00000000000..45529816764 --- /dev/null +++ b/src/components/badge/notification_badge/__snapshots__/badge_notification.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiNotificationBadge is rendered 1`] = ` + +`; diff --git a/src/components/badge/notification_badge/_badge_notification.scss b/src/components/badge/notification_badge/_badge_notification.scss new file mode 100644 index 00000000000..b7701386b5a --- /dev/null +++ b/src/components/badge/notification_badge/_badge_notification.scss @@ -0,0 +1,14 @@ +.euiNotificationBadge { + display: inline-block; + border-radius: $euiBorderRadius; + background: $euiColorAccent; + color: lightOrDarkTheme($euiColorEmptyShade, $euiColorFullShade); + font-size: $euiFontSizeXS; + line-height: $euiSize; + height: $euiSize; + min-width: $euiSize; + padding-left: $euiSizeXS; + padding-right: $euiSizeXS; + vertical-align: middle; + text-align: center; +} diff --git a/src/components/badge/notification_badge/_index.scss b/src/components/badge/notification_badge/_index.scss new file mode 100644 index 00000000000..e71fd02f0be --- /dev/null +++ b/src/components/badge/notification_badge/_index.scss @@ -0,0 +1 @@ +@import 'badge_notification'; diff --git a/src/components/badge/notification_badge/badge_notification.js b/src/components/badge/notification_badge/badge_notification.js new file mode 100644 index 00000000000..6e1cdf9a322 --- /dev/null +++ b/src/components/badge/notification_badge/badge_notification.js @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiNotificationBadge = ({ + children, + className, + ...rest, +}) => { + const classes = classNames('euiNotificationBadge', className); + + return ( + + {children} + + ); +}; + +EuiNotificationBadge.propTypes = { + children: PropTypes.node, + className: PropTypes.string, +}; diff --git a/src/components/badge/notification_badge/badge_notification.test.js b/src/components/badge/notification_badge/badge_notification.test.js new file mode 100644 index 00000000000..7cc0f5d716f --- /dev/null +++ b/src/components/badge/notification_badge/badge_notification.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test'; + +import { EuiNotificationBadge } from './badge_notification'; + +describe('EuiNotificationBadge', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/badge/notification_badge/index.js b/src/components/badge/notification_badge/index.js new file mode 100644 index 00000000000..810e957dad4 --- /dev/null +++ b/src/components/badge/notification_badge/index.js @@ -0,0 +1,3 @@ +export { + EuiNotificationBadge, +} from './badge_notification'; diff --git a/src/components/header/__snapshots__/header_notification.test.js.snap b/src/components/header/__snapshots__/header_notification.test.js.snap deleted file mode 100644 index 0bbd22842cb..00000000000 --- a/src/components/header/__snapshots__/header_notification.test.js.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`EuiHeaderNotification is rendered 1`] = ` - - Content - -`; diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 375855c12b7..378b8d356ad 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -7,15 +7,3 @@ background: $euiHeaderBackgroundColor; border-bottom: $euiBorderThin; } - - .euiHeader__notification { - display: inline-block; - border-radius: $euiBorderRadius; - background: $euiHeaderNotificationBackgroundColor; - color: $euiColorEmptyShade; - font-size: $euiFontSizeXS; - line-height: $euiSize; - height: $euiSize; - min-width: $euiSize; - vertical-align: middle; - } diff --git a/src/components/header/_header_notification.scss b/src/components/header/_header_notification.scss deleted file mode 100644 index 26ddc2601f0..00000000000 --- a/src/components/header/_header_notification.scss +++ /dev/null @@ -1,12 +0,0 @@ - -.euiHeaderNotification { - display: inline-block; - border-radius: $euiBorderRadius; - background: $euiHeaderNotificationBackgroundColor; - color: $euiColorEmptyShade; - font-size: $euiFontSizeXS; - line-height: $euiSize; - height: $euiSize; - min-width: $euiSize; - vertical-align: middle; -} diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss index 7be6af4f2d1..84e22a5f377 100644 --- a/src/components/header/_index.scss +++ b/src/components/header/_index.scss @@ -1,7 +1,6 @@ // Themable colors $euiHeaderBackgroundColor: $euiColorEmptyShade; $euiHeaderBreadcrumbColor: $euiColorDarkestShade; -$euiHeaderNotificationBackgroundColor: $euiColorAccent; // Layout vars $euiHeaderChildSize: $euiSizeXXL + $euiSizeL; @@ -12,7 +11,6 @@ $euiHeaderChildSize: $euiSizeXXL + $euiSizeL; @import 'header_profile'; @import 'header_links/index'; @import 'header_logo'; -@import 'header_notification'; @import 'header_alert/index'; @import 'header_breadcrumbs/index'; @import 'header_section/index'; diff --git a/src/components/header/header_notification.js b/src/components/header/header_notification.js deleted file mode 100644 index a9fe22e87a7..00000000000 --- a/src/components/header/header_notification.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; - -export const EuiHeaderNotification = ({ children, className, ...rest }) => { - const classes = classNames('euiHeaderNotification', className); - - return ( - - {children} - - ); -}; diff --git a/src/components/header/header_notification.test.js b/src/components/header/header_notification.test.js deleted file mode 100644 index df6377c23c1..00000000000 --- a/src/components/header/header_notification.test.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { render } from 'enzyme'; -import { requiredProps } from '../../test/required_props'; - -import { EuiHeaderNotification } from './header_notification'; - -describe('EuiHeaderNotification', () => { - test('is rendered', () => { - const component = render( - - Content - - ); - - expect(component) - .toMatchSnapshot(); - }); -}); diff --git a/src/components/header/index.js b/src/components/header/index.js index 257665b92b6..db34d7ed74e 100644 --- a/src/components/header/index.js +++ b/src/components/header/index.js @@ -19,10 +19,6 @@ export { EuiHeaderLogo, } from './header_logo'; -export { - EuiHeaderNotification, -} from './header_notification'; - export { EuiHeaderSection, EuiHeaderSectionItem, diff --git a/src/components/index.js b/src/components/index.js index 3f98e19e887..0ded9455abe 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -14,6 +14,7 @@ export { export { EuiBadge, EuiBetaBadge, + EuiNotificationBadge, } from './badge'; export { @@ -141,7 +142,6 @@ export { EuiHeaderLink, EuiHeaderLinks, EuiHeaderLogo, - EuiHeaderNotification, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, From bcc971fcce9793ac3945423a2509068f49cf9b9a Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 12:24:00 -0400 Subject: [PATCH 02/11] Change user avatar icon to avatar --- src-docs/src/views/header/header_user_menu.js | 8 ++------ .../header/__snapshots__/header_logo.test.js.snap | 2 ++ src/components/header/header_logo.js | 5 ++++- .../header/header_section/_header_section_item.scss | 7 +++++++ 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/header/header_user_menu.js b/src-docs/src/views/header/header_user_menu.js index 0200b863cde..0ea8365492d 100644 --- a/src-docs/src/views/header/header_user_menu.js +++ b/src-docs/src/views/header/header_user_menu.js @@ -9,7 +9,6 @@ import { EuiHeaderAlert, EuiHeaderSectionItemButton, EuiNotificationBadge, - EuiIcon, EuiLink, EuiText, EuiSpacer, @@ -46,12 +45,9 @@ export default class extends Component { aria-label="Account menu" onClick={this.onMenuButtonClick} > - + - 3 + 3 ); diff --git a/src/components/header/__snapshots__/header_logo.test.js.snap b/src/components/header/__snapshots__/header_logo.test.js.snap index 09d852890e4..f48de8cc207 100644 --- a/src/components/header/__snapshots__/header_logo.test.js.snap +++ b/src/components/header/__snapshots__/header_logo.test.js.snap @@ -10,6 +10,7 @@ exports[`EuiHeaderLogo is rendered 1`] = ` class="euiIcon euiIcon--xLarge euiHeaderLogo__icon" focusable="false" height="32" + title="Elastic" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" @@ -56,6 +57,7 @@ exports[`EuiHeaderLogo renders href 1`] = ` class="euiIcon euiIcon--xLarge euiHeaderLogo__icon" focusable="false" height="32" + title="Elastic" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" diff --git a/src/components/header/header_logo.js b/src/components/header/header_logo.js index 3b4c6adcac8..e36b324f841 100644 --- a/src/components/header/header_logo.js +++ b/src/components/header/header_logo.js @@ -28,8 +28,11 @@ export const EuiHeaderLogo = ({ iconType, iconTitle, href, children, className, EuiHeaderLogo.propTypes = { href: PropTypes.string, children: PropTypes.node, + iconType: PropTypes.string, + iconTitle: PropTypes.string, }; EuiHeaderLogo.defaultProps = { - iconType: 'logoElastic' + iconType: 'logoElastic', + iconTitle: 'Elastic', }; diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index 394174007db..8fa86b313e2 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -15,6 +15,13 @@ background: $euiBorderColor; left: 0; } + + .euiHeaderNotification { + position: absolute; + top: $euiSizeM; + right: $euiSizeM; + box-shadow: 0 0 0 1px $euiHeaderBackgroundColor; + } } .euiHeaderSectionItem__button { From 555409c6470a2399b54eed3ceff7bc7b4abf5734 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 13:07:28 -0400 Subject: [PATCH 03/11] Fixed user and app menus --- src-docs/src/views/header/header_app_menu.js | 3 +- src-docs/src/views/header/header_user_menu.js | 84 ++++++++++--------- src/components/header/_header_popover.scss | 7 -- src/components/header/_header_profile.scss | 3 +- src/components/header/_index.scss | 1 - .../header/header_alert/_header_alert.scss | 17 +--- .../key_pad_menu/_key_pad_menu.scss | 27 +++--- 7 files changed, 60 insertions(+), 82 deletions(-) delete mode 100644 src/components/header/_header_popover.scss diff --git a/src-docs/src/views/header/header_app_menu.js b/src-docs/src/views/header/header_app_menu.js index 3ce1e2f283c..0e20ae4797b 100644 --- a/src-docs/src/views/header/header_app_menu.js +++ b/src-docs/src/views/header/header_app_menu.js @@ -52,9 +52,8 @@ export default class extends Component { isOpen={this.state.isOpen} anchorPosition="downRight" closePopover={this.closeMenu} - panelClassName="euiHeaderPopover" > - + - - - - +
+ + + + - - -

John Username

-
+ + +

John Username

+
- + - - - - - Edit profile - + + + + + Edit profile + - - Log out - - - - - - + + Log out + +
+ + + + - + - Download your thing here} - date="Nov. 14, 02:14PM." - /> + Download your thing here} + date="Nov. 14, 02:14PM." + /> - Download your thing here} - date="Nov. 14, 02:14PM." - /> + Download your thing here} + date="Nov. 14, 02:14PM." + /> +
); } diff --git a/src/components/header/_header_popover.scss b/src/components/header/_header_popover.scss deleted file mode 100644 index ed49b30add3..00000000000 --- a/src/components/header/_header_popover.scss +++ /dev/null @@ -1,7 +0,0 @@ -/** - * 1. Override KeyPadMenu. - */ -.euiHeaderPopover { - top: 100% !important; /* 1 */ - width: $euiSize * 20; -} diff --git a/src/components/header/_header_profile.scss b/src/components/header/_header_profile.scss index df819959d1a..ee039141f02 100644 --- a/src/components/header/_header_profile.scss +++ b/src/components/header/_header_profile.scss @@ -1,4 +1,3 @@ .euiHeaderProfile { - text-align: left; - padding-bottom: $euiSize; + padding: $euiSize; } diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss index 84e22a5f377..829c55550e8 100644 --- a/src/components/header/_index.scss +++ b/src/components/header/_index.scss @@ -7,7 +7,6 @@ $euiHeaderChildSize: $euiSizeXXL + $euiSizeL; // Components @import 'header'; -@import 'header_popover'; @import 'header_profile'; @import 'header_links/index'; @import 'header_logo'; diff --git a/src/components/header/header_alert/_header_alert.scss b/src/components/header/header_alert/_header_alert.scss index 23b8b7564d4..179b945c47b 100644 --- a/src/components/header/header_alert/_header_alert.scss +++ b/src/components/header/header_alert/_header_alert.scss @@ -1,20 +1,15 @@ .euiHeaderAlert { - text-align: left; min-width: 300px; position: relative; - margin: 0 (-$euiSize); padding: $euiSize; border-top: $euiBorderThin; .euiHeaderAlert__dismiss { opacity: 0; position: absolute; - right: $euiSize; - top: $euiSize; + right: $euiSize - 4px; + top: $euiSize - 4px; transition: opacity $euiAnimSpeedNormal ease-in; - cursor: pointer; - height: auto; - width: auto; } &:hover .euiHeaderAlert__dismiss, @@ -23,8 +18,7 @@ } .euiHeaderAlert__title { - font-weight: $euiFontWeightMedium; - @include euiFontSize; + @include euiTitle("xs"); padding-right: $euiSizeL; // Accounts for the dismiss button. } @@ -35,11 +29,6 @@ .euiHeaderAlert__action { @include euiFontSizeXS; - color: $euiLinkColor; - - &:focus { - outline: solid $euiFontSizeXS / 2 $euiFocusBackgroundColor; - } } .euiHeaderAlert__date { diff --git a/src/components/key_pad_menu/_key_pad_menu.scss b/src/components/key_pad_menu/_key_pad_menu.scss index 3692a9bfafb..5cf9a85bd6c 100644 --- a/src/components/key_pad_menu/_key_pad_menu.scss +++ b/src/components/key_pad_menu/_key_pad_menu.scss @@ -18,7 +18,7 @@ */ .euiKeyPadMenuItem { display: block; - padding: $euiSize; + padding: $euiSizeXS; height: $euiKeyPadMenuSize; width: $euiKeyPadMenuSize; color: $euiColorDarkShade; @@ -26,6 +26,9 @@ border-color: transparent; border-radius: $euiBorderRadius; font-family: $euiFontFamily; /* 1 */ + transition: + border-color $euiAnimSpeedFast ease-in, + box-shadow $euiAnimSpeedFast ease-in; &:hover, &:focus { border-color: $euiBorderColor; @@ -35,14 +38,6 @@ transform: translateY(0); } } - - &:focus { - background: $euiFocusBackgroundColor; - - .euiKeyPadMenuItem__label { - text-decoration: underline; - } - } } .euiKeyPadMenuItem__inner { @@ -58,8 +53,8 @@ .euiKeyPadMenuItem__betaBadgeWrapper { position: absolute; - top: $euiSizeM * -.5; - right: $euiSizeM * -.5; + top: $euiSizeS; + right: $euiSizeS; z-index: 3; .euiKeyPadMenuItem__betaBadge:not(.euiBetaBadge--iconOnly) { @@ -73,12 +68,14 @@ } .euiKeyPadMenuItem__icon { - transition: transform $euiAnimSlightBounce $euiAnimSpeedNormal; - transform: translateY($euiSizeXS); - margin-bottom: $euiSizeS; + transition: transform $euiAnimSpeedNormal $euiAnimSlightBounce; + transform: translateY(2px); + margin-bottom: $euiSizeM; } .euiKeyPadMenuItem__label { - @include euiFontSizeS; + font-size: $euiFontSizeXS; + font-weight: $euiFontWeightMedium; + line-height: $euiSize; text-align: center; } From 63545f7d8e99dea85e5d316e1bdec96f28ec5c14 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 13:43:09 -0400 Subject: [PATCH 04/11] Added spaces menu --- src-docs/src/views/header/header.js | 20 +--- .../src/views/header/header_spaces_menu.js | 99 +++++++++++++++++++ src/components/avatar/_avatar.scss | 1 - 3 files changed, 103 insertions(+), 17 deletions(-) create mode 100644 src-docs/src/views/header/header_spaces_menu.js diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js index d558952f4e8..3555ff18c0d 100644 --- a/src-docs/src/views/header/header.js +++ b/src-docs/src/views/header/header.js @@ -14,26 +14,11 @@ import { import HeaderAppMenu from './header_app_menu'; import HeaderUserMenu from './header_user_menu'; +import HeaderSpacesMenu from './header_spaces_menu'; export default class extends Component { constructor(props) { super(props); - - this.state = { - isAppMenuOpen: false, - }; - } - - onAppMenuButtonClick() { - this.setState({ - isAppMenuOpen: !this.state.isAppMenuOpen, - }); - } - - closeAppMenu() { - this.setState({ - isAppMenuOpen: false, - }); } renderLogo() { @@ -88,6 +73,9 @@ export default class extends Component { {this.renderLogo()} + + + {this.renderBreadcrumbs()} diff --git a/src-docs/src/views/header/header_spaces_menu.js b/src-docs/src/views/header/header_spaces_menu.js new file mode 100644 index 00000000000..007691c1229 --- /dev/null +++ b/src-docs/src/views/header/header_spaces_menu.js @@ -0,0 +1,99 @@ +import React, { + Component, +} from 'react'; + +import { + EuiIcon, + EuiHeaderSectionItemButton, + EuiContextMenuPanel, + EuiContextMenuItem, + EuiPopover, + EuiButton, + EuiAvatar, +} from '../../../../src/components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isOpen: false, + }; + } + + onMenuButtonClick = () => { + this.setState({ + isOpen: !this.state.isOpen, + }); + }; + + closeMenu = () => { + this.setState({ + isOpen: false, + }); + }; + + render() { + const button = ( + + + + ); + + const items = [ + ( + )} + onClick={() => { this.closeMenu(); }} + > + Sales Team + + ),( + )} + onClick={() => { this.closeMenu(); }} + > + Engineering + + ),( + )} + onClick={() => { this.closeMenu(); }} + > + Security + + ),( +
+ Manage spaces +
+ ) + ] + + return ( + + + + ); + } +} diff --git a/src/components/avatar/_avatar.scss b/src/components/avatar/_avatar.scss index cf6052d3696..7590180480a 100644 --- a/src/components/avatar/_avatar.scss +++ b/src/components/avatar/_avatar.scss @@ -4,7 +4,6 @@ text-align: center; vertical-align: middle; overflow-x: hidden; - cursor: default; // Make sure we don't get the text cursor font-weight: $euiFontWeightRegular; // Explicitly state so it doesn't get overridden by inheritence } From 7e7a19f596f6d8bf6d8389947c766da1ba7b40c9 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 14:23:40 -0400 Subject: [PATCH 05/11] Fix to responsive breadcrumbs --- src-docs/src/views/breadcrumbs/responsive.js | 16 ++++++++++++++-- src-docs/src/views/breadcrumbs/truncate.js | 2 +- src/components/breadcrumbs/_breadcrumbs.scss | 10 ++++++++-- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/breadcrumbs/responsive.js b/src-docs/src/views/breadcrumbs/responsive.js index 76f3b44edca..c93dd817bdf 100644 --- a/src-docs/src/views/breadcrumbs/responsive.js +++ b/src-docs/src/views/breadcrumbs/responsive.js @@ -1,7 +1,9 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import { EuiBreadcrumbs, + EuiShowFor, + EuiText, } from '../../../../src/components'; export default () => { @@ -30,5 +32,15 @@ export default () => { text: 'Nebulosa subspecies', }]; - return ; + return ( + + + + + +

Responsive breadcrumbs do not show at all on small (mobile) screens.

+
+
+
+ ); }; diff --git a/src-docs/src/views/breadcrumbs/truncate.js b/src-docs/src/views/breadcrumbs/truncate.js index 353f6956dc7..c8929e7b8e6 100644 --- a/src-docs/src/views/breadcrumbs/truncate.js +++ b/src-docs/src/views/breadcrumbs/truncate.js @@ -15,5 +15,5 @@ export default () => { text: 'Nebulosa subspecies', }]; - return ; + return ; }; diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss index 7fba6ac2206..daddc30199b 100644 --- a/src/components/breadcrumbs/_breadcrumbs.scss +++ b/src/components/breadcrumbs/_breadcrumbs.scss @@ -28,6 +28,12 @@ background: $euiColorLightShade; } +/** + * 1. Can't target separator vs breadcrumb with -of-type because it takes + * the dom element into consideration too and there could be divs, or spans, or a's + * as breadcrumbs. + */ + .euiBreadcrumbs--responsive { // Laptop @include euiBreakpoint('l') { @@ -36,7 +42,7 @@ display: none; // Only show last 4 breadcrumbs - &:nth-last-of-type(-n+3) { + &:nth-last-child(-n+7) { /* 1 */ display: inline-block; } } @@ -49,7 +55,7 @@ display: none; // Only show last 2 breadcrumbs - &:nth-last-of-type(-n+1) { + &:nth-last-child(-n+3) { /* 1 */ display: inline-block; } } From 839737858747c3ae66cba3af6baaa67c5f8bdcb7 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 12 Jul 2018 17:49:16 -0400 Subject: [PATCH 06/11] Finalized responsive styles for header --- src-docs/src/views/header/header.js | 2 +- .../src/views/header/header_spaces_menu.js | 11 ++-- src-docs/src/views/header/header_user_menu.js | 4 +- src/components/header/_header.scss | 2 + src/components/header/_header_logo.scss | 39 +++++++++----- .../_header_breadcrumbs.scss | 2 +- .../__snapshots__/header_links.test.js.snap | 1 - .../header/header_links/_header_link.scss | 8 +-- .../header/header_links/header_links.js | 4 +- .../header_section/_header_section_item.scss | 53 ++++++++++++++----- src/global_styling/variables/_z_index.scss | 1 + 11 files changed, 81 insertions(+), 46 deletions(-) diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js index 3555ff18c0d..5eb311aad2e 100644 --- a/src-docs/src/views/header/header.js +++ b/src-docs/src/views/header/header.js @@ -23,7 +23,7 @@ export default class extends Component { renderLogo() { return ( - + ); } diff --git a/src-docs/src/views/header/header_spaces_menu.js b/src-docs/src/views/header/header_spaces_menu.js index 007691c1229..63ceb023ad9 100644 --- a/src-docs/src/views/header/header_spaces_menu.js +++ b/src-docs/src/views/header/header_spaces_menu.js @@ -3,7 +3,6 @@ import React, { } from 'react'; import { - EuiIcon, EuiHeaderSectionItemButton, EuiContextMenuPanel, EuiContextMenuItem, @@ -42,7 +41,7 @@ export default class extends Component { aria-label="Apps menu" onClick={this.onMenuButtonClick} > - + ); @@ -55,7 +54,7 @@ export default class extends Component { > Sales Team - ),( + ), ( )} @@ -63,7 +62,7 @@ export default class extends Component { > Engineering - ),( + ), ( )} @@ -71,12 +70,12 @@ export default class extends Component { > Security - ),( + ), (
Manage spaces
) - ] + ]; return ( - + 3 @@ -62,7 +62,7 @@ export default class extends Component { panelPaddingSize="none" >
- + diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss index 378b8d356ad..0b142a3fd0d 100644 --- a/src/components/header/_header.scss +++ b/src/components/header/_header.scss @@ -1,6 +1,8 @@ // Header. Includes breadcrumbs of nav buttons. .euiHeader { + position: relative; + z-index: $euiZHeader; // ensure the shadow shows above content @include euiBottomShadowSmall; display: flex; diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss index 0e787f8d3f0..f44fd607882 100644 --- a/src/components/header/_header_logo.scss +++ b/src/components/header/_header_logo.scss @@ -5,8 +5,8 @@ position: relative; height: $euiHeaderChildSize; - line-height: $euiSizeXL; - padding: $euiSize $euiSizeL; + line-height: $euiHeaderChildSize; + padding: 0 $euiSize; display: inline-block; vertical-align: middle; white-space: nowrap; @@ -17,19 +17,32 @@ } } - .euiHeaderLogo__icon { - height: $euiSizeXL; +.euiHeaderLogo__icon { + opacity: 1; + position: relative; + top: -2px; +} + +.euiHeaderLogo__text { + @include euiTitle("s"); + padding-left: $euiSize; + font-weight: $euiFontWeightLight; +} + +@include euiBreakpoint('xs') { + .euiHeaderLogo { + height: $euiHeaderChildSize*.75; + line-height: $euiHeaderChildSize*.75; + padding: 0 $euiSizeM; + } + + .euiHeaderLogo__icon.euiIcon--xLarge { width: $euiSizeL; - opacity: 1; + height: $euiSizeL; } .euiHeaderLogo__text { - @include euiTitle("s"); - padding-left: $euiSize; - font-weight: $euiFontWeightLight; - - @include euiBreakpoint('xs','s') { - @include euiTitle("xxs"); - font-weight: $euiFontWeightLight; - } + @include euiTitle("xs"); + font-weight: $euiFontWeightRegular; } +} diff --git a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss index befef1dab84..c58967ee42b 100644 --- a/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss +++ b/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss @@ -3,7 +3,7 @@ @import '../../link/mixins'; .euiHeaderBreadcrumbs { - margin-left: $euiSizeL; + margin-left: $euiSize; display: flex; align-items: center; } diff --git a/src/components/header/header_links/__snapshots__/header_links.test.js.snap b/src/components/header/header_links/__snapshots__/header_links.test.js.snap index b121ad4654d..2a6ec8c52a2 100644 --- a/src/components/header/header_links/__snapshots__/header_links.test.js.snap +++ b/src/components/header/header_links/__snapshots__/header_links.test.js.snap @@ -12,7 +12,6 @@ exports[`EuiHeaderLinks is rendered 1`] = ` />