- {header}
{this.props.title}
@@ -396,7 +362,6 @@ GuideSection.propTypes = {
id: PropTypes.string,
source: PropTypes.array,
children: PropTypes.any,
- isSandbox: PropTypes.bool,
toggleTheme: PropTypes.func.isRequired,
theme: PropTypes.string.isRequired,
routes: PropTypes.object.isRequired,
diff --git a/src-docs/src/components/guide_section/guide_section_container.js b/src-docs/src/components/guide_section/guide_section_container.js
index 94dfd3a04de..75d322fd63d 100644
--- a/src-docs/src/components/guide_section/guide_section_container.js
+++ b/src-docs/src/components/guide_section/guide_section_container.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import { GuideSection } from './guide_section';
import {
- getIsSandbox,
getTheme,
getRoutes,
} from '../../store';
@@ -14,7 +13,6 @@ import {
function mapStateToProps(state) {
return {
- isSandbox: getIsSandbox(state),
theme: getTheme(state),
routes: getRoutes(state),
};
diff --git a/src-docs/src/components/index.js b/src-docs/src/components/index.js
index 1157bb59568..460237c5c56 100644
--- a/src-docs/src/components/index.js
+++ b/src-docs/src/components/index.js
@@ -10,10 +10,6 @@ export {
GuidePageChrome,
} from './guide_page';
-export {
- GuideSandboxChrome,
-} from './guide_sandbox';
-
export {
GuideSection,
GuideSectionTypes,
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 464aed5812b..c37a4170d96 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -14,13 +14,14 @@ import {
EuiErrorBoundary,
} from '../../src/components';
-import { Slugify } from './services';
-
// Guidelines
import WritingGuidelines
from './views/guidelines/writing';
+import TextScales
+ from './views/text_scaling/text_scaling_sandbox';
+
// Services
import { IsColorDarkExample }
@@ -169,27 +170,22 @@ import { ToastExample }
import { TooltipExample }
from './views/tooltip/tooltip_example';
-// Patterns
-
-// Sandboxes
-
-import AdvancedSettingsSandbox
- from './views/kibana/advanced_settings_sandbox';
-
-import WatchesSandbox
- from './views/kibana/watches_sandbox';
-
-import TextScalingSandbox
- from './views/text_scaling/text_scaling_sandbox';
-
-const guidelines = [{
- name: 'Writing',
- component: WritingGuidelines,
-}];
+/**
+ * Lowercases input and replaces spaces with hyphens:
+ * e.g. 'GridView Example' -> 'gridview-example'
+ */
+const slugify = str => {
+ const parts = str
+ .toLowerCase()
+ .replace(/[-]+/g, ' ')
+ .replace(/[^\w^\s]+/g, '')
+ .replace(/ +/g, ' ').split(' ');
+ return parts.join('-');
+};
const createExample = ({ title, intro, sections }) => {
sections.forEach(section => {
- section.id = Slugify.one(section.title);
+ section.id = slugify(section.title);
});
const renderedSections = sections.map(section => createElement(GuideSection, {
@@ -213,93 +209,102 @@ const createExample = ({ title, intro, sections }) => {
};
};
-// Component route names should match the component name exactly.
-const services = [
- IsColorDarkExample,
-].map(example => createExample(example));
-
-// Component route names should match the component name exactly.
-const components = [
- AccessibilityExample,
- AccordionExample,
- AvatarExample,
- BadgeExample,
- BottomBarExample,
- ButtonExample,
- CardExample,
- CallOutExample,
- CodeEditorExample,
- CodeExample,
- ColorPickerExample,
- ContextMenuExample,
- DelayHideExample,
- DescriptionListExample,
- ErrorBoundaryExample,
- ExpressionExample,
- FilterGroupExample,
- FilePickerExample,
- FlexExample,
- FlyoutExample,
- FormExample,
- HeaderExample,
- HealthExample,
- HorizontalRuleExample,
- IconExample,
- ImageExample,
- KeyPadMenuExample,
- LinkExample,
- LoadingExample,
- ModalExample,
- OutsideClickDetectorExample,
- PageExample,
- PaginationExample,
- PanelExample,
- PopoverExample,
- ProgressExample,
- SearchBarExample,
- SideNavExample,
- SpacerExample,
- StepsExample,
- TableExample,
- TableOfRecordsExample,
- TabsExample,
- TextExample,
- TitleExample,
- ToastExample,
- TooltipExample,
-].map(example => createExample(example));
-
-const patterns = [
-].map(example => createExample(example));
-
-const sandboxes = [{
- name: 'Advanced Settings',
- component: AdvancedSettingsSandbox,
+const navigation = [{
+ name: 'Guidelines',
+ items: [{
+ name: 'Writing',
+ component: WritingGuidelines,
+ }, {
+ name: 'Text scales',
+ component: TextScales,
+ }],
}, {
- name: 'Watches',
- component: WatchesSandbox,
+ name: 'Layout',
+ items: [
+ AccordionExample,
+ BottomBarExample,
+ FlexExample,
+ FlyoutExample,
+ HeaderExample,
+ HorizontalRuleExample,
+ ModalExample,
+ PageExample,
+ PanelExample,
+ PopoverExample,
+ SpacerExample,
+ ].map(example => createExample(example)),
}, {
- name: 'Text scales',
- component: TextScalingSandbox,
-}];
-
-sandboxes.forEach(sandbox => { sandbox.isSandbox = true; });
-
-const allRoutes = [
- ...guidelines,
- ...services,
- ...components,
- ...sandboxes,
- ...patterns,
-];
+ name: 'Navigation',
+ items: [
+ ButtonExample,
+ ContextMenuExample,
+ KeyPadMenuExample,
+ LinkExample,
+ PaginationExample,
+ SideNavExample,
+ StepsExample,
+ TabsExample,
+ ].map(example => createExample(example)),
+}, {
+ name: 'Display',
+ items: [
+ AvatarExample,
+ BadgeExample,
+ CallOutExample,
+ CardExample,
+ CodeExample,
+ DescriptionListExample,
+ HealthExample,
+ IconExample,
+ ImageExample,
+ LoadingExample,
+ ProgressExample,
+ TableExample,
+ TableOfRecordsExample,
+ TextExample,
+ TitleExample,
+ ToastExample,
+ TooltipExample,
+ ].map(example => createExample(example)),
+}, {
+ name: 'Forms',
+ items: [
+ CodeEditorExample,
+ ColorPickerExample,
+ ExpressionExample,
+ FilePickerExample,
+ FilterGroupExample,
+ FormExample,
+ SearchBarExample,
+ ].map(example => createExample(example)),
+}, {
+ name: 'Utilities',
+ items: [
+ AccessibilityExample,
+ DelayHideExample,
+ ErrorBoundaryExample,
+ IsColorDarkExample,
+ OutsideClickDetectorExample,
+ ].map(example => createExample(example)),
+}].map(({ name, items, ...rest }) => ({
+ name,
+ type: slugify(name),
+ items: items.map(({ name: itemName, ...rest }) => ({
+ name: itemName,
+ path: `${slugify(name)}/${slugify(itemName)}`,
+ ...rest,
+ })),
+ ...rest
+}));
+
+const allRoutes = navigation.reduce((accummulatedRoutes, section) => {
+ accummulatedRoutes.push(...section.items);
+ return accummulatedRoutes;
+}, []);
export default {
history: useRouterHistory(createHashHistory)(),
- guidelines: Slugify.each(guidelines, 'name', 'path'),
- services: Slugify.each(services, 'name', 'path'),
- components: Slugify.each(components, 'name', 'path'),
- patterns: Slugify.each(patterns, 'name', 'path'),
- sandboxes: Slugify.each(sandboxes, 'name', 'path'),
+ navigation,
getRouteForPath: path => {
// React-router kinda sucks. Sometimes the path contains a leading slash, sometimes it doesn't.
diff --git a/src-docs/src/services/index.js b/src-docs/src/services/index.js
index 5b06f5123a9..c7a3a967ba4 100644
--- a/src-docs/src/services/index.js
+++ b/src-docs/src/services/index.js
@@ -4,5 +4,3 @@ export {
registerTheme,
applyTheme,
} from './theme/theme';
-
-export { default as Slugify } from './string/slugify';
diff --git a/src-docs/src/services/string/slugify.js b/src-docs/src/services/string/slugify.js
deleted file mode 100644
index 5447929d4bb..00000000000
--- a/src-docs/src/services/string/slugify.js
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-/**
- * Lowercases input and replaces spaces with hyphens:
- * e.g. 'GridView Example' -> 'gridview-example'
- */
-function one(str) {
- const parts = str
- .toLowerCase()
- .replace(/[-]+/g, ' ')
- .replace(/[^\w^\s]+/g, '')
- .replace(/ +/g, ' ').split(' ');
- return parts.join('-');
-}
-
-function each(items, src, dest) {
- return items.map(item => {
- const _item = item;
- _item[dest] = one(_item[src]);
- return _item;
- });
-}
-
-export default {
- one,
- each,
-};
diff --git a/src-docs/src/store/index.js b/src-docs/src/store/index.js
index f617797047b..a9df2b1f466 100644
--- a/src-docs/src/store/index.js
+++ b/src-docs/src/store/index.js
@@ -1,7 +1,3 @@
-export function getIsSandbox(state) {
- return state.sandbox.isSandbox;
-}
-
export function getTheme(state) {
return state.theme.theme;
}
diff --git a/src-docs/src/views/app_container.js b/src-docs/src/views/app_container.js
index ca826e9988b..5276db0615c 100644
--- a/src-docs/src/views/app_container.js
+++ b/src-docs/src/views/app_container.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux';
import { AppView } from './app_view';
import {
- getIsSandbox,
getTheme,
getRoutes,
} from '../store';
@@ -16,7 +15,6 @@ function mapStateToProps(state, ownProps) {
return {
routes: ownProps.routes,
currentRoute: ownProps.routes[1],
- isSandbox: getIsSandbox(state),
theme: getTheme(state),
routes: getRoutes(state),
};
diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js
index edca0251b1a..1d4d9bf4c17 100644
--- a/src-docs/src/views/app_view.js
+++ b/src-docs/src/views/app_view.js
@@ -77,13 +77,7 @@ export class AppView extends Component {
);
} else {
- const {
- guidelines,
- services,
- components,
- patterns,
- sandboxes,
- } = routes;
+ const { navigation } = routes;
return (
@@ -94,11 +88,7 @@ export class AppView extends Component {
currentRouteName={currentRoute.name}
onToggleTheme={toggleTheme}
selectedTheme={theme}
- guidelines={guidelines}
- services={services}
- components={components}
- patterns={patterns}
- sandboxes={sandboxes}
+ navigation={navigation}
/>
diff --git a/src-docs/src/views/bottom_bar/bottom_bar_example.js b/src-docs/src/views/bottom_bar/bottom_bar_example.js
index 1fce3aaf84f..fe282484b88 100644
--- a/src-docs/src/views/bottom_bar/bottom_bar_example.js
+++ b/src-docs/src/views/bottom_bar/bottom_bar_example.js
@@ -16,7 +16,7 @@ const bottomBarSource = require('!!raw-loader!./bottom_bar');
const bottomBarHtml = renderToHtml(BottomBar);
export const BottomBarExample = {
- title: 'BottomBar',
+ title: 'Bottom Bar',
sections: [{
title: 'BottomBar',
source: [{
diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js
index f2fee249f89..a53b66fb935 100644
--- a/src-docs/src/views/call_out/call_out_example.js
+++ b/src-docs/src/views/call_out/call_out_example.js
@@ -28,7 +28,7 @@ const dangerSource = require('!!raw-loader!./danger');
const dangerHtml = renderToHtml(Danger);
export const CallOutExample = {
- title: 'CallOut',
+ title: 'Call Out',
sections: [{
title: 'Info',
source: [{
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
index cb9f4ee7084..9908dc75c6c 100644
--- a/src-docs/src/views/context_menu/context_menu_example.js
+++ b/src-docs/src/views/context_menu/context_menu_example.js
@@ -20,7 +20,7 @@ const singlePanelSource = require('!!raw-loader!./single_panel');
const singlePanelHtml = renderToHtml(SinglePanel);
export const ContextMenuExample = {
- title: 'ContextMenu',
+ title: 'Context Menu',
sections: [{
title: 'ContextMenu',
source: [{
diff --git a/src-docs/src/views/delay_hide/delay_hide_example.js b/src-docs/src/views/delay_hide/delay_hide_example.js
index 32ffe87c8e4..a7b3cd03736 100644
--- a/src-docs/src/views/delay_hide/delay_hide_example.js
+++ b/src-docs/src/views/delay_hide/delay_hide_example.js
@@ -8,7 +8,7 @@ const delayHideSource = require('!!raw-loader!./delay_hide');
const delayHideHtml = renderToHtml(DelayHide);
export const DelayHideExample = {
- title: 'DelayHide',
+ title: 'Delay Hide',
sections: [
{
title: 'DelayHide',
diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
index 0e12975d853..aa423f54a80 100644
--- a/src-docs/src/views/description_list/description_list_example.js
+++ b/src-docs/src/views/description_list/description_list_example.js
@@ -28,7 +28,7 @@ const descriptionListInlineSource = require('!!raw-loader!./description_list_inl
const descriptionListInlineHtml = renderToHtml(DescriptionListInline);
export const DescriptionListExample = {
- title: 'DescriptionList',
+ title: 'Description List',
sections: [{
title: 'DescriptionList',
source: [{
diff --git a/src-docs/src/views/error_boundary/error_boundary.js b/src-docs/src/views/error_boundary/error_boundary.js
index b501a5889ed..8e43a9012ff 100644
--- a/src-docs/src/views/error_boundary/error_boundary.js
+++ b/src-docs/src/views/error_boundary/error_boundary.js
@@ -5,7 +5,7 @@ import {
} from '../../../../src/components';
const BadComponent = () => {
- throw new Error('I\'m here to kick butt and chew bubblegum.\n\n\And I\'m all out of gum.');
+ throw new Error('I\'m here to kick butt and chew bubblegum. And I\'m all out of gum.');
};
export default () => (
diff --git a/src-docs/src/views/error_boundary/error_boundary_example.js b/src-docs/src/views/error_boundary/error_boundary_example.js
index 5c1a617d13b..0873f1d4a04 100644
--- a/src-docs/src/views/error_boundary/error_boundary_example.js
+++ b/src-docs/src/views/error_boundary/error_boundary_example.js
@@ -16,7 +16,7 @@ const errorBoundarySource = require('!!raw-loader!./error_boundary');
const errorBoundaryHtml = renderToHtml(ErrorBoundary);
export const ErrorBoundaryExample = {
- title: 'ErrorBoundary',
+ title: 'Error Boundary',
sections: [{
title: 'ErrorBoundary',
source: [{
diff --git a/src-docs/src/views/file_picker/file_picker_example.js b/src-docs/src/views/file_picker/file_picker_example.js
index 4d1b153f0e8..ef2da198557 100644
--- a/src-docs/src/views/file_picker/file_picker_example.js
+++ b/src-docs/src/views/file_picker/file_picker_example.js
@@ -17,7 +17,7 @@ const filePickerSource = require('!!raw-loader!./file_picker');
const filePickerHtml = renderToHtml(FilePicker);
export const FilePickerExample = {
- title: 'FilePicker',
+ title: 'File Picker',
sections: [{
title: 'FilePicker',
source: [{
diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js
index 0afe0b244e7..ee9f759d8ca 100644
--- a/src-docs/src/views/filter_group/filter_group_example.js
+++ b/src-docs/src/views/filter_group/filter_group_example.js
@@ -20,7 +20,7 @@ const filterGroupSource = require('!!raw-loader!./filter_group');
const filterGroupHtml = renderToHtml(FilterGroup);
export const FilterGroupExample = {
- title: 'FilterGroup',
+ title: 'Filter Group',
intro: (
-
- Options for the lucene query string parser.
-
- Reset
-
-
- }
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- renderPage() {
- return (
-
-
-
-
- Management
-
-
-
-
-
-
-
-
-
-
-
-
-
- Advanced settings » General
-
-
-
-
-
-
-
- Tweaks you make here can break Kibana if you do not know what you are doing.
-
-
-
-
-
- {this.renderForm()}
-
-
-
-
- );
- }
-
-
- render() {
- let bottomBar;
- if (this.state.showBar) {
- bottomBar = (
-
-
-
-
-
-
- You have unsaved changes in your form.
-
-
-
-
-
-
-
-
- Save
-
-
-
- Discard
-
-
-
-
-
- );
- }
-
- return (
-
- {this.renderPage()}
- {bottomBar}
-
- );
- }
-}
diff --git a/src-docs/src/views/kibana/advanced_settings_sandbox.js b/src-docs/src/views/kibana/advanced_settings_sandbox.js
deleted file mode 100644
index 110025bdfbb..00000000000
--- a/src-docs/src/views/kibana/advanced_settings_sandbox.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { renderToHtml } from '../../services';
-
-import {
- GuidePage,
- GuideSection,
- GuideSectionTypes,
-} from '../../components';
-
-import AdvancedSettings from './advanced_settings';
-const advancedSettingsSource = require('!!raw-loader!./advanced_settings');
-const advancedSettingsHtml = renderToHtml(AdvancedSettings);
-
-export default props => (
-
-
- This is a pretty dirty example of how to handle a menu system with
- nesting within it. Right now it includes a lot of the same code
- from the Kibana demo, but we should abstract this stuff into more
- portable wrappers.
-
- }
- demo={}
- />
-
-);
diff --git a/src-docs/src/views/kibana/kibana_chrome.js b/src-docs/src/views/kibana/kibana_chrome.js
deleted file mode 100644
index cd61496829f..00000000000
--- a/src-docs/src/views/kibana/kibana_chrome.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import KibanaHeader from '../header/header';
-
-export default ({
- children,
- ...rest
-}) => (
-
-
- {children}
-
-);
diff --git a/src-docs/src/views/kibana/watches.js b/src-docs/src/views/kibana/watches.js
deleted file mode 100644
index 70d39df2b96..00000000000
--- a/src-docs/src/views/kibana/watches.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, {
- Component,
-} from 'react';
-
-import {
- EuiButton,
- EuiContextMenuItem,
- EuiContextMenuPanel,
- EuiFlexGroup,
- EuiFlexItem,
- EuiPage,
- EuiPageBody,
- EuiPageContent,
- EuiPageHeader,
- EuiPageHeaderSection,
- EuiPageContentBody,
- EuiPageContentHeader,
- EuiPageContentHeaderSection,
- EuiPageSideBar,
- EuiPopover,
- EuiSpacer,
- EuiText,
- EuiTitle,
-} from '../../../../src/components';
-
-import {
- KibanaChrome,
- ManagementSideNav,
- Table,
-} from '../partials';
-
-export default class extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- isPopoverOpen: false,
- };
- }
-
- onButtonClick = () => {
- this.setState(prevState => ({
- isPopoverOpen: !prevState.isPopoverOpen,
- }));
- };
-
- closePopover = () => {
- this.setState({
- isPopoverOpen: false,
- });
- };
-
- renderAddWatchPopover() {
- const button = (
-
- Create Watch
-
- );
-
- const items = [
- (
-
-
- Threshold alert
-
-
- Send out an alert on a specific condition.
-
-
- ), (
-
-
- Change-based alert
-
-
- Send out an alert on a specific change.
-
-
- ), (
-
-
- Advanced watch
-
-
- Set up a custom watch in raw JSON.
-
-
- ),
- ];
-
- return (
-
-
-
- );
- }
-
- renderPage() {
- return (
-
-
-
-
- Management
-
-
-
-
-
-
-
-
-
-
-
-
- Watches
-
- Far out in the uncharted backwaters of the unfashionable end of
- the western spiral arm of the Galaxy lies a small unregarded
- yellow sun.
-
-
-
-
-
-
-
- {this.renderAddWatchPopover()}
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
- render() {
- return (
-
- {this.renderPage()}
-
- );
- }
-}
diff --git a/src-docs/src/views/kibana/watches_sandbox.js b/src-docs/src/views/kibana/watches_sandbox.js
deleted file mode 100644
index 0c4917d9f99..00000000000
--- a/src-docs/src/views/kibana/watches_sandbox.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-
-import { renderToHtml } from '../../services';
-
-import {
- GuidePage,
- GuideSection,
- GuideSectionTypes,
-} from '../../components';
-
-import Watches from './watches';
-const watchesSource = require('!!raw-loader!./watches');
-const watchesHtml = renderToHtml(Watches);
-
-export default props => (
-
-
- }
- />
-
-);
diff --git a/src-docs/src/views/outside_click_detector/outside_click_detector_example.js b/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
index 701719d27ed..9a24a71bf44 100644
--- a/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
+++ b/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
@@ -16,7 +16,7 @@ const outsideClickDetectorSource = require('!!raw-loader!./outside_click_detecto
const outsideClickDetectorHtml = renderToHtml(OutsideClickDetector);
export const OutsideClickDetectorExample = {
- title: 'OutsideClickDetector',
+ title: 'Outside Click Detector',
sections: [{
title: 'OutsideClickDetector',
source: [{
diff --git a/src-docs/src/views/partials.js b/src-docs/src/views/partials.js
deleted file mode 100644
index f1b713f40a0..00000000000
--- a/src-docs/src/views/partials.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export { default as KibanaChrome } from './kibana/kibana_chrome';
-export { default as KibanaHeader } from './header/header';
-export { default as ManagementSideNav } from './side_nav/side_nav_complex';
-export { default as Table } from './tables/custom/custom';
-export {
- default as ToastList,
- addToast,
- removeAllToasts,
-} from './toast/toast_list';
diff --git a/src-docs/src/views/search_bar/search_bar_example.js b/src-docs/src/views/search_bar/search_bar_example.js
index cc529711bdd..93d2d2a0ef9 100644
--- a/src-docs/src/views/search_bar/search_bar_example.js
+++ b/src-docs/src/views/search_bar/search_bar_example.js
@@ -17,7 +17,7 @@ const searchBarSource = require('!!raw-loader!./search_bar');
const searchBarHtml = renderToHtml(SearchBar);
export const SearchBarExample = {
- title: 'SearchBar',
+ title: 'Search Bar',
sections: [
{
title: 'SearchBar',
diff --git a/src-docs/src/views/side_nav/side_nav_example.js b/src-docs/src/views/side_nav/side_nav_example.js
index c51dd4a7df4..6065768197d 100644
--- a/src-docs/src/views/side_nav/side_nav_example.js
+++ b/src-docs/src/views/side_nav/side_nav_example.js
@@ -20,7 +20,7 @@ const sideNavComplexSource = require('!!raw-loader!./side_nav_complex');
const sideNavComplexHtml = renderToHtml(SideNavComplex);
export const SideNavExample = {
- title: 'SideNav',
+ title: 'Side Nav',
sections: [{
title: 'SideNav',
source: [{
diff --git a/src-docs/src/views/table_of_records/table_of_records_example.js b/src-docs/src/views/table_of_records/table_of_records_example.js
index 40d9d6efefe..0bda5b83cf0 100644
--- a/src-docs/src/views/table_of_records/table_of_records_example.js
+++ b/src-docs/src/views/table_of_records/table_of_records_example.js
@@ -25,7 +25,7 @@ const columnRenderersSource = require('!!raw-loader!./column_data_types');
const columnRenderersHtml = renderToHtml(ColumnDataTypes);
export const TableOfRecordsExample = {
- title: 'TableOfRecords',
+ title: 'Table Of Records',
intro: (
diff --git a/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap b/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
index 5124b9ba82a..1989fb10443 100644
--- a/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
+++ b/src/components/error_boundary/__snapshots__/error_boundary.test.js.snap
@@ -1,32 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`EuiErrorBoundary is rendered with an error 1`] = `
-
-`;
-
exports[`EuiErrorBoundary is rendered without an error 1`] = `
No error
diff --git a/src/components/error_boundary/_error_boundary.scss b/src/components/error_boundary/_error_boundary.scss
index 17fb958d5d3..f0bc10fcd7b 100644
--- a/src/components/error_boundary/_error_boundary.scss
+++ b/src/components/error_boundary/_error_boundary.scss
@@ -17,3 +17,7 @@
background-color: $euiColorEmptyShade;
padding: $euiSizeS;
}
+
+ .euiErrorBoundary__stack {
+ white-space: pre-wrap;
+ }
diff --git a/src/components/error_boundary/error_boundary.js b/src/components/error_boundary/error_boundary.js
index 5040100834a..f47844c3cfd 100644
--- a/src/components/error_boundary/error_boundary.js
+++ b/src/components/error_boundary/error_boundary.js
@@ -42,9 +42,9 @@ export class EuiErrorBoundary extends Component {
Error
-
+
- {this.state.error && this.state.error.toString()}
+ {this.state.error && this.state.error.stack}
diff --git a/src/components/error_boundary/error_boundary.test.js b/src/components/error_boundary/error_boundary.test.js
index 8ece71c12e7..b269d7194e2 100644
--- a/src/components/error_boundary/error_boundary.test.js
+++ b/src/components/error_boundary/error_boundary.test.js
@@ -11,33 +11,35 @@ const GoodComponent = () => (
No error
);
+const errorMessage = 'I\'m here to kick butt and chew bubblegum.\n\n\And I\'m all out of gum.';
+
const BadComponent = () => {
- throw new Error('I\'m here to kick butt and chew bubblegum.\n\n\And I\'m all out of gum.');
+ throw new Error(errorMessage);
};
describe('EuiErrorBoundary', () => {
test('is rendered without an error', () => {
- const component = mount(
+ const component = takeMountedSnapshot(mount(
- );
+ ));
- expect(takeMountedSnapshot(component))
- .toMatchSnapshot();
+ expect(component).toMatchSnapshot();
});
test('is rendered with an error', () => {
// Prevent the React boundary error from appearing in the terminal.
spyOn(console, 'error'); // eslint-disable-line no-undef
- const component = mount(
+ // Because the error contains the stack trace, it's non-deterministic. So we'll just check that
+ // it contains our error message.
+ const errorText = mount(
- );
+ ).text();
- expect(takeMountedSnapshot(component))
- .toMatchSnapshot();
+ expect(errorText).toContain(errorMessage);
});
});