github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UI Framework] Reactify actionItem (#12142)

Browse source 
* issue 12137 Reactify ui_framework/components/action_item
* use KuiMenu and KuiMenuItem in the doc_site view
This commit is contained in:
Árpád Poprádi 2017-06-08 01:41:59 +02:00 • committed by CJ Cenizal
parent e2a5b27d5a
commit a271d7c935
11 changed files with 146 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

11
ui_framework/components/action_item/__snapshots__/action_item.test.js.snap Normal file
View file

@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders KuiActionItem 1`] = `
<div
aria-label="aria-label"
class="kuiActionItem testClass1 testClass2"
data-test-subj="test subject string"
>
children
</div>
`;

13
ui_framework/components/action_item/action_item.js Normal file
View file

@ -0,0 +1,13 @@
import React, {
PropTypes,
} from 'react';
import classNames from 'classnames';
export const KuiActionItem = ({ children, className, ...rest }) => {
const classes = classNames('kuiActionItem', className);
return <div className={classes} {...rest} >{children}</div>;
};
KuiActionItem.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
};

12
ui_framework/components/action_item/action_item.test.js Normal file
View file

@ -0,0 +1,12 @@
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import {
KuiActionItem,
} from './action_item';
test('renders KuiActionItem', () => {
const component = <KuiActionItem { ...requiredProps }>children</KuiActionItem>;
expect(render(component)).toMatchSnapshot();
});

1
ui_framework/components/action_item/index.js Normal file
View file

@ -0,0 +1 @@
export { KuiActionItem } from './action_item';

2
ui_framework/components/index.js
View file

@ -1,3 +1,5 @@
export { KuiActionItem } from './action_item';
export {
KuiKeyboardAccessible,
} from './accessibility';

1
ui_framework/doc_site/src/services/routes/routes.js
View file

@ -116,6 +116,7 @@ const components = [{
}, {
name: 'ActionItem',
component: ActionItemExample,
hasReact: true,
}, {
name: 'Badge',
component: BadgeExample,

14
ui_framework/doc_site/src/views/action_item/action_item.html
View file

@ -1,14 +0,0 @@
<div class="kuiActionItem">
<p class="kuiText">Item</p>
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>

22
ui_framework/doc_site/src/views/action_item/action_item.js Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import {
KuiActionItem
} from '../../../../components';
export default () => (
<KuiActionItem>
<p className="kuiText">Item</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
);

31
ui_framework/doc_site/src/views/action_item/action_item_example.js
View file

@ -1,5 +1,7 @@
import React from 'react';
import { renderToHtml } from '../../services';
import {
GuideDemo,
GuidePage,
@ -8,14 +10,22 @@ import {
GuideText,
} from '../../components';
const actionItemHtml = require('./action_item.html');
const inMenuHtml = require('./action_items_in_menu.html');
import ActionItem from './action_item';
const actionItemSource = require('!!raw!./action_item');
const actionItemHtml = renderToHtml(ActionItem);
import ActionItemInMenu from './action_items_in_menu';
const actionItemInMenuSource = require('!!raw!./action_items_in_menu');
const actionItemInMenuHtml = renderToHtml(ActionItemInMenu);
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="ActionItem"
source={[{
type: GuideSectionTypes.JS,
code: actionItemSource,
}, {
type: GuideSectionTypes.HTML,
code: actionItemHtml,
}]}
@ -24,25 +34,28 @@ export default props => (
Events can represent updates, logs, notifications, and status changes.
</GuideText>
<GuideDemo
html={actionItemHtml}
/>
<GuideDemo>
<ActionItem />
</GuideDemo>
</GuideSection>
<GuideSection
title="ActionItems in Menu"
source={[{
type: GuideSectionTypes.JS,
code: actionItemInMenuSource,
}, {
type: GuideSectionTypes.HTML,
code: inMenuHtml,
code: actionItemInMenuHtml,
}]}
>
<GuideText>
You&rsquo;ll typically want to present them within a Menu.
</GuideText>
<GuideDemo
html={inMenuHtml}
/>
<GuideDemo>
<ActionItemInMenu />
</GuideDemo>
</GuideSection>
</GuidePage>
);

52
ui_framework/doc_site/src/views/action_item/action_items_in_menu.html
View file

@ -1,52 +0,0 @@
<div class="kuiMenu kuiMenu--contained">
<div class="kuiMenuItem">
<div class="kuiActionItem">
<p class="kuiText">Item A</p>
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>
</div>
<div class="kuiMenuItem">
<div class="kuiActionItem">
<p class="kuiText">Item B</p>
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>
</div>
<div class="kuiMenuItem">
<div class="kuiActionItem">
<p class="kuiText">Item C</p>
<div class="kuiMenuButtonGroup">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>
</div>
</div>

62
ui_framework/doc_site/src/views/action_item/action_items_in_menu.js Normal file
View file

@ -0,0 +1,62 @@
import React from 'react';
import {
KuiActionItem,
KuiMenu,
KuiMenuItem
} from '../../../../components';
export default () => (
<KuiMenu contained>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item A</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item B</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
<KuiMenuItem>
<KuiActionItem>
<p className="kuiText">Item C</p>
<div className="kuiMenuButtonGroup">
<button className="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button className="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button className="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</KuiActionItem>
</KuiMenuItem>
</KuiMenu>
);