Skip to content

Commit

Permalink
EuiHeader fixes (#1009)
Browse files Browse the repository at this point in the history
  • Loading branch information
cchaos authored Jul 13, 2018
1 parent 21cea65 commit b84b85f
Show file tree
Hide file tree
Showing 41 changed files with 389 additions and 223 deletions.
14 changes: 11 additions & 3 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- Fixed `EuiHeader` responsive styles ([#1009](https://github.com/elastic/eui/pull/1009))

**Breaking changes**

- Moved `EuiHeaderNotification` to a generic `EuiNotificationBadge` component ([#1009](https://github.com/elastic/eui/pull/1009))

**Bug fixes**

- `EuiInMemoryTable` no longer resets to the first page on prop update when `items` remains the same ([#1008](https://github.com/elastic/eui/pull/1008))
- Fixed css selector for hiding responsive `EuiBreadcrumb`'s ([#1009](https://github.com/elastic/eui/pull/1009))
- Fixed responsive utility classes for IE ([#1009](https://github.com/elastic/eui/pull/1009))

## [`2.0.0`](https://github.com/elastic/eui/tree/v2.0.0)

- Add more typings to `EuiContextMenuItemProps` ([#1006](https://github.com/elastic/eui/pull/1006))
- Make some proprties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
- Add typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
- Added more typings to `EuiContextMenuItemProps` ([#1006](https://github.com/elastic/eui/pull/1006))
- Made some properties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
- Added typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
- Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000))
- Updated `react-vis` version to `1.10.2`. ([#999](https://github.com/elastic/eui/pull/999))

Expand Down
23 changes: 23 additions & 0 deletions src-docs/src/views/badge/badge_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
EuiCode,
EuiBetaBadge,
EuiLink,
EuiNotificationBadge,
} from '../../../../src/components';

import Badge from './badge';
Expand All @@ -29,6 +30,10 @@ import BetaBadge from './beta_badge';
const betaBadgeSource = require('!!raw-loader!./beta_badge');
const betaBadgeHtml = renderToHtml(BetaBadge);

import NotificationBadge from './notification_badge';
const notificationBadgeSource = require('!!raw-loader!./notification_badge');
const notificationBadgeHtml = renderToHtml(NotificationBadge);

export const BadgeExample = {
title: 'Badge',
sections: [{
Expand Down Expand Up @@ -113,5 +118,23 @@ export const BadgeExample = {
),
props: { EuiBetaBadge },
demo: <BetaBadge />,
}, {
title: 'Notification badge type',
source: [{
type: GuideSectionTypes.JS,
code: notificationBadgeSource,
}, {
type: GuideSectionTypes.HTML,
code: notificationBadgeHtml,
}],
text: (
<p>
Used to showcase the number of notifications, alerts or hidden selections.
Typically used in <EuiLink href="/#/layout/header">EuiHeader</EuiLink> or
(eventually) <EuiLink href="/#/forms/filter-group">EuiFilterButtons</EuiLink>.
</p>
),
props: { EuiNotificationBadge },
demo: <NotificationBadge />,
}],
};
11 changes: 11 additions & 0 deletions src-docs/src/views/badge/notification_badge.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import React from 'react';

import {
EuiNotificationBadge,
} from '../../../../src/components';

export default () => (
<EuiNotificationBadge>
3
</EuiNotificationBadge>
);
16 changes: 14 additions & 2 deletions src-docs/src/views/breadcrumbs/responsive.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import React, { Fragment } from 'react';

import {
EuiBreadcrumbs,
EuiShowFor,
EuiText,
} from '../../../../src/components';

export default () => {
Expand Down Expand Up @@ -30,5 +32,15 @@ export default () => {
text: 'Nebulosa subspecies',
}];

return <EuiBreadcrumbs breadcrumbs={breadcrumbs} max={null} />;
return (
<Fragment>
<EuiBreadcrumbs breadcrumbs={breadcrumbs} max={null} />

<EuiShowFor sizes={['xs', 's']}>
<EuiText size="s" color="subdued">
<p><em>Responsive breadcrumbs do not show at all on small (mobile) screens.</em></p>
</EuiText>
</EuiShowFor>
</Fragment>
);
};
2 changes: 1 addition & 1 deletion src-docs/src/views/breadcrumbs/truncate.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ export default () => {
text: 'Nebulosa subspecies',
}];

return <EuiBreadcrumbs breadcrumbs={breadcrumbs} />;
return <EuiBreadcrumbs responsive={false} breadcrumbs={breadcrumbs} />;
};
22 changes: 5 additions & 17 deletions src-docs/src/views/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,16 @@ 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() {
return (
<EuiHeaderLogo href="#" aria-label="Go to home page" />
<EuiHeaderLogo iconType="logoKibana" href="#" aria-label="Go to home page" />
);
}

Expand Down Expand Up @@ -88,6 +73,9 @@ export default class extends Component {
<EuiHeaderSectionItem border="right">
{this.renderLogo()}
</EuiHeaderSectionItem>
<EuiHeaderSectionItem border="right">
<HeaderSpacesMenu />
</EuiHeaderSectionItem>

{this.renderBreadcrumbs()}
</EuiHeaderSection>
Expand Down
3 changes: 1 addition & 2 deletions src-docs/src/views/header/header_app_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,8 @@ export default class extends Component {
isOpen={this.state.isOpen}
anchorPosition="downRight"
closePopover={this.closeMenu}
panelClassName="euiHeaderPopover"
>
<EuiKeyPadMenu id="keyPadMenu">
<EuiKeyPadMenu id="keyPadMenu" style={{ width: 288 }}>
<EuiKeyPadMenuItem
label="Discover"
href="#"
Expand Down
98 changes: 98 additions & 0 deletions src-docs/src/views/header/header_spaces_menu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import React, {
Component,
} from 'react';

import {
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 = (
<EuiHeaderSectionItemButton
aria-controls="headerSpacesMenuList"
aria-expanded={this.state.isOpen}
aria-haspopup="true"
aria-label="Apps menu"
onClick={this.onMenuButtonClick}
>
<EuiAvatar type="space" size="s" name="Sales Team" />
</EuiHeaderSectionItemButton>
);

const items = [
(
<EuiContextMenuItem
key="Sales Team"
icon={(<EuiAvatar type="space" name="Sales Team" size="s" />)}
onClick={() => { this.closeMenu(); }}
>
Sales Team
</EuiContextMenuItem>
), (
<EuiContextMenuItem
key="Engineering"
icon={(<EuiAvatar type="space" name="Engineering" size="s" />)}
onClick={() => { this.closeMenu(); }}
>
Engineering
</EuiContextMenuItem>
), (
<EuiContextMenuItem
key="Security"
icon={(<EuiAvatar type="space" name="Security" size="s" initialsLength={2} />)}
onClick={() => { this.closeMenu(); }}
>
Security
</EuiContextMenuItem>
), (
<div className="euiContextMenuItem">
<EuiButton size="s" style={{ width: `100%` }}>Manage spaces</EuiButton>
</div>
)
];

return (
<EuiPopover
id="headerSpacesMenu"
ownFocus
button={button}
isOpen={this.state.isOpen}
anchorPosition="downLeft"
closePopover={this.closeMenu}
panelPaddingSize="none"
>
<EuiContextMenuPanel
id="headerSpacesMenuList"
title="Change current space"
items={items}
/>
</EuiPopover>
);
}
}
94 changes: 46 additions & 48 deletions src-docs/src/views/header/header_user_menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import {
EuiFlexItem,
EuiHeaderAlert,
EuiHeaderSectionItemButton,
EuiHeaderNotification,
EuiIcon,
EuiNotificationBadge,
EuiLink,
EuiText,
EuiSpacer,
Expand Down Expand Up @@ -46,12 +45,9 @@ export default class extends Component {
aria-label="Account menu"
onClick={this.onMenuButtonClick}
>
<EuiIcon
type="user"
size="m"
/>
<EuiAvatar name="John Username" size="s" />

<EuiHeaderNotification>3</EuiHeaderNotification>
<EuiNotificationBadge className="euiHeaderNotification">3</EuiNotificationBadge>
</EuiHeaderSectionItemButton>
);

Expand All @@ -63,55 +59,57 @@ export default class extends Component {
isOpen={this.state.isOpen}
anchorPosition="downRight"
closePopover={this.closeMenu}
panelClassName="euiHeaderPopover"
panelPaddingSize="none"
>
<EuiFlexGroup gutterSize="m" className="euiHeaderProfile eui--flexRow eui--flexAlignItemsCenter">
<EuiFlexItem grow={false}>
<EuiAvatar name="John Username" size="xl" />
</EuiFlexItem>
<div style={{ width: 320 }}>
<EuiFlexGroup gutterSize="m" className="euiHeaderProfile" responsive={false}>
<EuiFlexItem grow={false}>
<EuiAvatar name="John Username" size="xl" />
</EuiFlexItem>

<EuiFlexItem>
<EuiText>
<p>John Username</p>
</EuiText>
<EuiFlexItem>
<EuiText>
<p>John Username</p>
</EuiText>

<EuiSpacer size="m" />
<EuiSpacer size="m" />

<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiLink href="">Edit profile</EuiLink>
</EuiFlexItem>
<EuiFlexGroup>
<EuiFlexItem>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiLink href="">Edit profile</EuiLink>
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiLink href="">Log out</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiLink href="">Log out</EuiLink>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>

<EuiHeaderAlert
title="Here&rsquo;s a notification title"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
date="Nov. 14, 02:14PM."
/>
<EuiHeaderAlert
title="Here&rsquo;s a notification title"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
date="Nov. 14, 02:14PM."
/>

<EuiHeaderAlert
title="Here&rsquo;s a notification title that is extremely long and will wrap"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
action={<EuiLink href="#">Download your thing here</EuiLink>}
date="Nov. 14, 02:14PM."
/>
<EuiHeaderAlert
title="Here&rsquo;s a notification title that is extremely long and will wrap"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
action={<EuiLink href="#">Download your thing here</EuiLink>}
date="Nov. 14, 02:14PM."
/>

<EuiHeaderAlert
title="Here&rsquo;s a notification title"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
action={<EuiLink href="#">Download your thing here</EuiLink>}
date="Nov. 14, 02:14PM."
/>
<EuiHeaderAlert
title="Here&rsquo;s a notification title"
text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
action={<EuiLink href="#">Download your thing here</EuiLink>}
date="Nov. 14, 02:14PM."
/>
</div>
</EuiPopover>
);
}
Expand Down
Loading

0 comments on commit b84b85f

Please sign in to comment.