Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EuiNavDrawer focus management, flyout auto-close #2749

Merged
merged 14 commits into from
Jan 10, 2020
Merged

EuiNavDrawer focus management, flyout auto-close #2749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
883b75f
nav drawer focus; nav drawer flyout autoclose
thompsongl Jan 9, 2020
e01620c
Merge branch 'master' into nav-drawer-focus
thompsongl Jan 9, 2020
1698ffa
clean up
thompsongl Jan 9, 2020
c8c1cc2
update example
thompsongl Jan 9, 2020
c52893a
aria improvements
thompsongl Jan 9, 2020
22b2000
more a11y
thompsongl Jan 10, 2020
d7781f6
CL
thompsongl Jan 10, 2020
b6deabf
tabbables trial
thompsongl Jan 10, 2020
7bf5bd7
formalize tab-through
thompsongl Jan 10, 2020
8b8b6f2
fix grouping
snide Jan 10, 2020
98d75e9
fix fav text
snide Jan 10, 2020
dd581e1
update delay for focus management
thompsongl Jan 10, 2020
dc9e73a
Merge pull request #10 from snide/nav/focus
thompsongl Jan 10, 2020
d6d6035
fix firefox expansion
thompsongl Jan 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
- Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
- Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714))
- Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739))
- Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749))
- Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749))

**Bug fixes**

Expand Down
326 changes: 227 additions & 99 deletions src-docs/src/views/nav_drawer/nav_drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,137 +121,264 @@ export default class extends Component {
},
];

this.exploreLinks = [
this.adminLinks = [
{
label: 'Canvas',
href: '#/layout/nav-drawer',
iconType: 'canvasApp',
isActive: true,
extraAction: {
...pinExtraActionFn('Canvas'),
alwaysShow: true,
label: 'Admin',
iconType: 'managementApp',
flyoutMenu: {
title: 'Tools and settings',
listItems: [
{
label: 'Dev tools',
href: '#/layout/nav-drawer',
iconType: 'devToolsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to Tools and Settings to favorites',
},
},
{
label: 'Stack Monitoring',
href: '#/layout/nav-drawer',
iconType: 'monitoringApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Stack Monitoring to favorites',
},
},
{
label: 'Stack Management',
href: '#/layout/nav-drawer',
iconType: 'managementApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Stack Management to favorites',
},
},
{
label: 'Nature Plugin (image as icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Nature Plugin') },
icon: (
<EuiImage
size="s"
alt="Random nature image"
url="https://source.unsplash.com/300x300/?Nature"
/>
),
},
],
},
},
{
label: 'Discover',
href: '#/layout/nav-drawer',
iconType: 'discoverApp',
extraAction: { ...pinExtraActionFn('Discover') },
},
{
label: 'Visualize',
href: '#/layout/nav-drawer',
iconType: 'visualizeApp',
extraAction: { ...pinExtraActionFn('Visualize') },
},
{
label: 'Dashboard',
href: '#/layout/nav-drawer',
iconType: 'dashboardApp',
extraAction: { ...pinExtraActionFn('Dashboard') },
},
{
label: 'Machine learning',
href: '#/layout/nav-drawer',
iconType: 'machineLearningApp',
extraAction: { ...pinExtraActionFn('Machine learning') },
},
{
label: 'Custom Plugin (no icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Custom Plugin') },
},
{
label: 'Nature Plugin (image as icon)',
href: '#/layout/nav-drawer',
extraAction: { ...pinExtraActionFn('Nature Plugin') },
icon: (
<EuiImage
size="s"
alt="Random nature image"
url="https://source.unsplash.com/300x300/?Nature"
/>
),
},
];

this.solutionsLinks = [
{
label: 'APM',
href: '#/layout/nav-drawer',
iconType: 'apmApp',
extraAction: { ...pinExtraActionFn('APM') },
},
{
label: 'Metrics',
href: '#/layout/nav-drawer',
iconType: 'metricsApp',
extraAction: { ...pinExtraActionFn('Infrastructure') },
},
this.analyzeLinks = [
{
label: 'Logs',
href: '#/layout/nav-drawer',
iconType: 'logsApp',
extraAction: { ...pinExtraActionFn('Log viewer') },
},
{
label: 'Uptime',
href: '#/layout/nav-drawer',
iconType: 'upgradeAssistantApp',
extraAction: { ...pinExtraActionFn('Uptime') },
label: 'Analyze',
iconType: 'logoBusinessAnalytics',
flyoutMenu: {
title: 'Analyze your data',
listItems: [
{
label: 'Discover',
href: '#/layout/nav-drawer',
iconType: 'discoverApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Discover to favorites',
},
},
{
label: 'Visualize',
href: '#/layout/nav-drawer',
iconType: 'visualizeApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Visualize to favorites',
},
},
{
label: 'Canvas',
href: '#/layout/nav-drawer',
iconType: 'canvasApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Canvas to favorites',
},
},
{
label: 'Maps',
href: '#/layout/nav-drawer',
iconType: 'gisApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Maps to favorites',
},
},
{
label: 'Machine Learning',
href: '#/layout/nav-drawer',
iconType: 'machineLearningApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Machine Learning to favorites',
},
},
{
label: 'Graph',
href: '#/layout/nav-drawer',
iconType: 'graphApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Graph to favorites',
},
},
],
},
},
];

this.securityLinks = [
{
label: 'Maps',
href: '#/layout/nav-drawer',
iconType: 'gisApp',
extraAction: { ...pinExtraActionFn('Maps') },
label: 'Security',
iconType: 'logoSecurity',
flyoutMenu: {
title: 'Security',
listItems: [
{
label: 'SIEM',
href: '#/layout/nav-drawer',
iconType: 'securityApp',
extraAction: { ...pinExtraActionFn('SIEM') },
},
{
label: 'Endpoints',
href: '#/layout/nav-drawer',
iconType: 'securityAnalyticsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add SIEM to favorites',
},
},
],
},
},
];

this.searchLinks = [
{
label: 'SIEM',
href: '#/layout/nav-drawer',
iconType: 'securityAnalyticsApp',
extraAction: { ...pinExtraActionFn('SIEM') },
label: 'Enterprise Search',
iconType: 'logoAppSearch',
flyoutMenu: {
title: 'Enterprise search',
listItems: [
{
label: 'Site search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Enterprise search to favorites',
},
},
{
label: 'App search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add App Search to favorites',
},
},
{
label: 'Workplace search',
href: '#/layout/nav-drawer',
iconType: 'searchProfilerApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Workplace Search to favorites',
},
},
],
},
},
];

this.adminLinks = [
this.observabilityLinks = [
{
label: 'Admin',
iconType: 'managementApp',
label: 'Observability',
iconType: 'logoMetrics',
flyoutMenu: {
title: 'Tools and settings',
title: 'Observe your operations',
listItems: [
{
label: 'Dev tools',
label: 'Logs',
href: '#/layout/nav-drawer',
iconType: 'devToolsApp',
iconType: 'logsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add Logs to favorites',
},
},
{
label: 'Stack Monitoring',
label: 'Metrics',
href: '#/layout/nav-drawer',
iconType: 'monitoringApp',
iconType: 'metricsApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add Metrics to favorites',
},
},
{
label: 'Stack Management',
label: 'APM',
href: '#/layout/nav-drawer',
iconType: 'managementApp',
iconType: 'apmApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add to favorites',
'aria-label': 'Add APM to favorites',
},
},
{
label: 'Uptime',
href: '#/layout/nav-drawer',
iconType: 'uptimeApp',
extraAction: {
color: 'subdued',
iconType: 'starEmpty',
iconSize: 's',
'aria-label': 'Add Uptime to favorites',
},
},
],
Expand All @@ -262,9 +389,9 @@ export default class extends Component {

onKeyDown = event => {
if (event.keyCode === keyCodes.ESCAPE) {
event.preventDefault();
event.stopPropagation();
this.closeFullScreen();
// event.preventDefault();
// event.stopPropagation();
// this.closeFullScreen();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will revert this or make this not collide with new ESC behavior

}
};

Expand Down Expand Up @@ -387,9 +514,10 @@ export default class extends Component {
<EuiNavDrawer ref={this.setNavDrawerRef}>
<EuiNavDrawerGroup listItems={this.topLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.exploreLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.solutionsLinks} />
<EuiNavDrawerGroup listItems={this.analyzeLinks} />
<EuiNavDrawerGroup listItems={this.securityLinks} />
<EuiNavDrawerGroup listItems={this.searchLinks} />
<EuiNavDrawerGroup listItems={this.observabilityLinks} />
<EuiHorizontalRule margin="none" />
<EuiNavDrawerGroup listItems={this.adminLinks} />
</EuiNavDrawer>
Expand Down
Loading