mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[Shared UX] Move Solution Toolbar components to package (#134392)
* [Shared UX] Move Solution Toolbar components to package * Addressing feedback * [CI] Auto-commit changed files from 'node scripts/generate packages_build_manifest' * Adding support to jest_config_check * Fixing i18n * Apply suggestions from code review Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
This commit is contained in:
Clint Andrew Hall
GitHub
parent
04e621727b
commit
9ec4d311ed
46 changed files with 2223 additions and 763 deletions
|
|
@ -210,6 +210,7 @@
|
|||
"@kbn/server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository",
|
||||
"@kbn/shared-ux-avatar-solution": "link:bazel-bin/packages/shared-ux/avatar/solution",
|
||||
"@kbn/shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen",
|
||||
"@kbn/shared-ux-button-toolbar": "link:bazel-bin/packages/shared-ux/button_toolbar",
|
||||
"@kbn/shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components",
|
||||
"@kbn/shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app",
|
||||
"@kbn/shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data",
|
||||
|
|
@ -749,6 +750,7 @@
|
|||
"@types/kbn__server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository/npm_module_types",
|
||||
"@types/kbn__shared-ux-avatar-solution": "link:bazel-bin/packages/shared-ux/avatar/solution/npm_module_types",
|
||||
"@types/kbn__shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/npm_module_types",
|
||||
"@types/kbn__shared-ux-button-toolbar": "link:bazel-bin/packages/shared-ux/button_toolbar/npm_module_types",
|
||||
"@types/kbn__shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components/npm_module_types",
|
||||
"@types/kbn__shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/npm_module_types",
|
||||
"@types/kbn__shared-ux-page-analytics-no-data": "link:bazel-bin/packages/shared-ux/page/analytics_no_data/npm_module_types",
|
||||
|
|
|
|||
|
|
@ -144,6 +144,7 @@ filegroup(
|
|||
"//packages/kbn-utility-types:build",
|
||||
"//packages/kbn-utils:build",
|
||||
"//packages/shared-ux/avatar/solution:build",
|
||||
"//packages/shared-ux/button_toolbar:build",
|
||||
"//packages/shared-ux/button/exit_full_screen:build",
|
||||
"//packages/shared-ux/link/redirect_app:build",
|
||||
"//packages/shared-ux/page/analytics_no_data:build",
|
||||
|
|
@ -276,6 +277,7 @@ filegroup(
|
|||
"//packages/kbn-utility-types:build_types",
|
||||
"//packages/kbn-utils:build_types",
|
||||
"//packages/shared-ux/avatar/solution:build_types",
|
||||
"//packages/shared-ux/button_toolbar:build_types",
|
||||
"//packages/shared-ux/button/exit_full_screen:build_types",
|
||||
"//packages/shared-ux/link/redirect_app:build_types",
|
||||
"//packages/shared-ux/page/analytics_no_data:build_types",
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import { REPO_ROOT } from '@kbn/utils';
|
|||
*/
|
||||
export const BAZEL_PACKAGE_DIRS = [
|
||||
'packages',
|
||||
'packages/shared-ux',
|
||||
'packages/shared-ux/*',
|
||||
'packages/analytics',
|
||||
'packages/analytics/shippers',
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { ToolbarButton, IconButtonGroup, AddFromLibraryButton, ToolbarPopover } from './toolbar';
|
||||
export { KibanaPageTemplateSolutionNav } from './page_template/solution_nav';
|
||||
|
||||
// TODO: clintandrewhall - NoDataPageProps is a temporary addition until it is split into its own package
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarButton /> is rendered 1`] = `
|
||||
<AddFromLibraryButton>
|
||||
<ToolbarButton
|
||||
iconType="folderOpen"
|
||||
label="Add from library"
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
isDisabled={false}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<EuiIcon
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
size="m"
|
||||
type="folderOpen"
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
data-euiicon-type="folderOpen"
|
||||
size="m"
|
||||
/>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
Add from library
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</ToolbarButton>
|
||||
</AddFromLibraryButton>
|
||||
`;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
id: sharedUX/Components/AddFromLibraryButton
|
||||
slug: /shared-ux/components/toolbar/buttons/add_from_library
|
||||
title: Add From Library Button
|
||||
summary: An example of the primary button
|
||||
tags: ['shared-ux', 'component']
|
||||
date: 2022-03-18
|
||||
---
|
||||
|
||||
This button is an example of the primary button.
|
||||
|
|
@ -1,326 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<IconButtonGroup /> is rendered 1`] = `
|
||||
<SharedUxServicesProvider
|
||||
application={
|
||||
Object {
|
||||
"currentAppId$": Observable {
|
||||
"_subscribe": [Function],
|
||||
},
|
||||
"navigateToUrl": [Function],
|
||||
}
|
||||
}
|
||||
data={
|
||||
Object {
|
||||
"hasDataView": [Function],
|
||||
"hasESData": [Function],
|
||||
"hasUserDataView": [Function],
|
||||
}
|
||||
}
|
||||
docLinks={
|
||||
Object {
|
||||
"dataViewsDocLink": "dummy link",
|
||||
}
|
||||
}
|
||||
editors={
|
||||
Object {
|
||||
"openDataViewEditor": [MockFunction],
|
||||
}
|
||||
}
|
||||
http={
|
||||
Object {
|
||||
"addBasePath": [MockFunction],
|
||||
}
|
||||
}
|
||||
permissions={
|
||||
Object {
|
||||
"canAccessFleet": true,
|
||||
"canCreateNewDataView": true,
|
||||
}
|
||||
}
|
||||
platform={
|
||||
Object {
|
||||
"setIsFullscreen": [MockFunction],
|
||||
}
|
||||
}
|
||||
>
|
||||
<IconButtonGroup
|
||||
buttons={
|
||||
Array [
|
||||
Object {
|
||||
"iconType": "visText",
|
||||
"label": "Text",
|
||||
"onClick": [MockFunction],
|
||||
},
|
||||
]
|
||||
}
|
||||
legend="Legend"
|
||||
>
|
||||
<EuiButtonGroup
|
||||
buttonSize="m"
|
||||
isIconOnly={true}
|
||||
legend="Legend"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"aria-label": "Text",
|
||||
"css": Array [
|
||||
Object {
|
||||
"&.euiButtonGroupButton": Object {
|
||||
"&:first-of-type": Object {
|
||||
"borderBottomLeftRadius": "6px !important",
|
||||
"borderTopLeftRadius": "6px !important",
|
||||
},
|
||||
"&:last-of-type": Object {
|
||||
"borderBottomRightRadius": "6px !important",
|
||||
"borderTopRightRadius": "6px !important",
|
||||
},
|
||||
"backgroundColor": "#FFF",
|
||||
"border": "1px solid #D3DAE6 !important",
|
||||
},
|
||||
},
|
||||
],
|
||||
"iconType": "visText",
|
||||
"id": "generated-id0",
|
||||
"label": "Text",
|
||||
"onClick": [MockFunction],
|
||||
"title": "Text",
|
||||
},
|
||||
]
|
||||
}
|
||||
type="multi"
|
||||
>
|
||||
<fieldset
|
||||
className="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
|
||||
disabled={false}
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<legend
|
||||
className="euiScreenReaderOnly"
|
||||
>
|
||||
Legend
|
||||
</legend>
|
||||
</EuiScreenReaderOnly>
|
||||
<div
|
||||
className="euiButtonGroup__buttons"
|
||||
>
|
||||
<EuiButtonGroupButton
|
||||
aria-label="Text"
|
||||
color="text"
|
||||
css="unknown styles"
|
||||
element="button"
|
||||
iconType="visText"
|
||||
id="generated-id0"
|
||||
isDisabled={false}
|
||||
isIconOnly={true}
|
||||
key="0"
|
||||
label="Text"
|
||||
name="generated-id"
|
||||
onChange={[Function]}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
title="Text"
|
||||
>
|
||||
<Insertion
|
||||
cache={
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"iuv015-EuiButtonGroup": true,
|
||||
},
|
||||
"key": "css",
|
||||
"nonce": undefined,
|
||||
"registered": Object {
|
||||
"css-iuv015-EuiButtonGroup": "&.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6 !important;&:first-of-type{border-top-left-radius:6px !important;border-bottom-left-radius:6px !important;}&:last-of-type{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important;}};;label:EuiButtonGroup;",
|
||||
},
|
||||
"sheet": StyleSheet {
|
||||
"_alreadyInsertedOrderInsensitiveRule": true,
|
||||
"_insertTag": [Function],
|
||||
"before": null,
|
||||
"container": <head>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup{}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6!important;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:first-of-type{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:last-of-type{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important;}
|
||||
</style>
|
||||
<style
|
||||
data-styled="active"
|
||||
data-styled-version="5.1.0"
|
||||
/>
|
||||
</head>,
|
||||
"ctr": 4,
|
||||
"insertionPoint": undefined,
|
||||
"isSpeedy": false,
|
||||
"key": "css",
|
||||
"nonce": undefined,
|
||||
"prepend": undefined,
|
||||
"tags": Array [
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup{}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6!important;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:first-of-type{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:last-of-type{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important;}
|
||||
</style>,
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
isStringTag={false}
|
||||
serialized={
|
||||
Object {
|
||||
"map": undefined,
|
||||
"name": "iuv015-EuiButtonGroup",
|
||||
"next": undefined,
|
||||
"styles": "&.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6 !important;&:first-of-type{border-top-left-radius:6px !important;border-bottom-left-radius:6px !important;}&:last-of-type{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important;}};;label:EuiButtonGroup;",
|
||||
"toString": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
<EuiButtonGroupButton
|
||||
aria-label="Text"
|
||||
className="css-iuv015-EuiButtonGroup"
|
||||
color="text"
|
||||
element="button"
|
||||
iconType="visText"
|
||||
id="generated-id0"
|
||||
isDisabled={false}
|
||||
isIconOnly={true}
|
||||
label="Text"
|
||||
name="generated-id"
|
||||
onChange={[Function]}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
title="Text"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
aria-label="Text"
|
||||
baseClassName="euiButtonGroupButton"
|
||||
className="euiButtonGroupButton-isIconOnly css-iuv015-EuiButtonGroup"
|
||||
color="text"
|
||||
data-test-subj="generated-id0"
|
||||
element="button"
|
||||
fill={false}
|
||||
iconType="visText"
|
||||
id="generated-id"
|
||||
isDisabled={false}
|
||||
isSelected={false}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiScreenReaderOnly",
|
||||
"data-text": "Text",
|
||||
"ref": [Function],
|
||||
}
|
||||
}
|
||||
title="Text"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Text"
|
||||
aria-pressed={false}
|
||||
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isIconOnly css-iuv015-EuiButtonGroup"
|
||||
data-test-subj="generated-id0"
|
||||
disabled={false}
|
||||
id="generated-id"
|
||||
onClick={[MockFunction]}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
title="Text"
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
iconType="visText"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text euiScreenReaderOnly",
|
||||
"data-text": "Text",
|
||||
"ref": [Function],
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<EuiIcon
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
size="m"
|
||||
type="visText"
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
data-euiicon-type="visText"
|
||||
size="m"
|
||||
/>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiButton__text euiScreenReaderOnly"
|
||||
data-text="Text"
|
||||
>
|
||||
Text
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButtonGroupButton>
|
||||
</EuiButtonGroupButton>
|
||||
</div>
|
||||
</fieldset>
|
||||
</EuiButtonGroup>
|
||||
</IconButtonGroup>
|
||||
</SharedUxServicesProvider>
|
||||
`;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
id: sharedUX/Components/Toolbar/Icon_Button_Group
|
||||
slug: /shared-ux/components/toolbar/icon_button_group
|
||||
title: Toolbar Icon Button Group
|
||||
summary: 'An array of icon-only buttons for use in a toolbar'
|
||||
tags: ['shared-ux', 'component']
|
||||
date: 2022-02-23
|
||||
---
|
||||
|
||||
> This documentation is in-progress.
|
||||
|
||||
This component requires a prop that consists of a series of buttons that can then be displayed based on the number of buttons desired. An example of a button that can be part of an array of icon buttons is included below:
|
||||
|
||||
```
|
||||
{
|
||||
label: 'Text',
|
||||
onClick: clickHandler,
|
||||
iconType: 'visText',
|
||||
}
|
||||
```
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarButton /> is rendered 1`] = `
|
||||
<SharedUxServicesProvider
|
||||
application={
|
||||
Object {
|
||||
"currentAppId$": Observable {
|
||||
"_subscribe": [Function],
|
||||
},
|
||||
"navigateToUrl": [Function],
|
||||
}
|
||||
}
|
||||
data={
|
||||
Object {
|
||||
"hasDataView": [Function],
|
||||
"hasESData": [Function],
|
||||
"hasUserDataView": [Function],
|
||||
}
|
||||
}
|
||||
docLinks={
|
||||
Object {
|
||||
"dataViewsDocLink": "dummy link",
|
||||
}
|
||||
}
|
||||
editors={
|
||||
Object {
|
||||
"openDataViewEditor": [MockFunction],
|
||||
}
|
||||
}
|
||||
http={
|
||||
Object {
|
||||
"addBasePath": [MockFunction],
|
||||
}
|
||||
}
|
||||
permissions={
|
||||
Object {
|
||||
"canAccessFleet": true,
|
||||
"canCreateNewDataView": true,
|
||||
}
|
||||
}
|
||||
platform={
|
||||
Object {
|
||||
"setIsFullscreen": [MockFunction],
|
||||
}
|
||||
}
|
||||
>
|
||||
<ToolbarButton
|
||||
label="test"
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
isDisabled={false}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
test
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</ToolbarButton>
|
||||
</SharedUxServicesProvider>
|
||||
`;
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
id: sharedUX/Components/ToolbarButton
|
||||
slug: /shared-ux/components/toolbar/buttons/primary
|
||||
title: Toolbar Button
|
||||
summary: An opinionated implementation of the toolbar extracted to just the button.
|
||||
tags: ['shared-ux', 'component']
|
||||
date: 2022-03-30
|
||||
---
|
||||
|
||||
> This documentation is in-progress.
|
||||
|
||||
This button is a part of the solution toolbar component. This button has primary styling and requires a label. OnClick handlers, icon side, and icon types are supported as an extension of EuiButtonProps. Icons by default are left of any labels within the button but can also be set to right.
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarPopover /> is rendered 1`] = `
|
||||
<ToolbarPopover
|
||||
label="test"
|
||||
>
|
||||
<EuiPopover
|
||||
anchorPosition="downCenter"
|
||||
button={
|
||||
<ToolbarButton
|
||||
label="test"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
}
|
||||
closePopover={[Function]}
|
||||
display="inlineBlock"
|
||||
hasArrow={true}
|
||||
isOpen={false}
|
||||
ownFocus={true}
|
||||
panelPaddingSize="m"
|
||||
>
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<ToolbarButton
|
||||
label="test"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
onClick={[Function]}
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
isDisabled={false}
|
||||
onClick={[Function]}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
test
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
</div>
|
||||
</EuiPopover>
|
||||
</ToolbarPopover>
|
||||
`;
|
||||
138
packages/shared-ux/button_toolbar/BUILD.bazel
Normal file
138
packages/shared-ux/button_toolbar/BUILD.bazel
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
load("@npm//@bazel/typescript:index.bzl", "ts_config")
|
||||
load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
|
||||
load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
|
||||
|
||||
PKG_DIRNAME = "button_toolbar"
|
||||
PKG_REQUIRE_NAME = "@kbn/shared-ux-button-toolbar"
|
||||
|
||||
SOURCE_FILES = glob(
|
||||
[
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.scss",
|
||||
"src/**/*.mdx",
|
||||
],
|
||||
exclude = [
|
||||
"**/*.test.*",
|
||||
],
|
||||
)
|
||||
|
||||
SRCS = SOURCE_FILES
|
||||
|
||||
filegroup(
|
||||
name = "srcs",
|
||||
srcs = SRCS,
|
||||
)
|
||||
|
||||
NPM_MODULE_EXTRA_FILES = [
|
||||
"package.json",
|
||||
]
|
||||
|
||||
# In this array place runtime dependencies, including other packages and NPM packages
|
||||
# which must be available for this code to run.
|
||||
#
|
||||
# To reference other packages use:
|
||||
# "//repo/relative/path/to/package"
|
||||
# eg. "//packages/kbn-utils"
|
||||
#
|
||||
# To reference a NPM package use:
|
||||
# "@npm//name-of-package"
|
||||
# eg. "@npm//lodash"
|
||||
RUNTIME_DEPS = [
|
||||
"@npm//@elastic/eui",
|
||||
"@npm//react",
|
||||
"//packages/kbn-i18n-react",
|
||||
"//packages/kbn-i18n",
|
||||
]
|
||||
|
||||
# In this array place dependencies necessary to build the types, which will include the
|
||||
# :npm_module_types target of other packages and packages from NPM, including @types/*
|
||||
# packages.
|
||||
#
|
||||
# To reference the types for another package use:
|
||||
# "//repo/relative/path/to/package:npm_module_types"
|
||||
# eg. "//packages/kbn-utils:npm_module_types"
|
||||
#
|
||||
# References to NPM packages work the same as RUNTIME_DEPS
|
||||
TYPES_DEPS = [
|
||||
"@npm//@elastic/eui",
|
||||
"@npm//@storybook/addon-actions",
|
||||
"@npm//@types/jest",
|
||||
"@npm//@types/node",
|
||||
"@npm//@types/react",
|
||||
"//packages/kbn-ambient-ui-types",
|
||||
"//packages/kbn-i18n-react:npm_module_types",
|
||||
"//packages/kbn-i18n:npm_module_types",
|
||||
]
|
||||
|
||||
jsts_transpiler(
|
||||
name = "target_node",
|
||||
srcs = SRCS,
|
||||
build_pkg_name = package_name(),
|
||||
)
|
||||
|
||||
jsts_transpiler(
|
||||
name = "target_web",
|
||||
srcs = SRCS,
|
||||
build_pkg_name = package_name(),
|
||||
web = True,
|
||||
additional_args = [
|
||||
"--copy-files",
|
||||
"--quiet"
|
||||
],
|
||||
)
|
||||
|
||||
ts_config(
|
||||
name = "tsconfig",
|
||||
src = "tsconfig.json",
|
||||
deps = [
|
||||
"//:tsconfig.base.json",
|
||||
"//:tsconfig.bazel.json",
|
||||
],
|
||||
)
|
||||
|
||||
ts_project(
|
||||
name = "tsc_types",
|
||||
args = ['--pretty'],
|
||||
srcs = SRCS,
|
||||
deps = TYPES_DEPS,
|
||||
declaration = True,
|
||||
emit_declaration_only = True,
|
||||
out_dir = "target_types",
|
||||
root_dir = "src",
|
||||
tsconfig = ":tsconfig",
|
||||
)
|
||||
|
||||
js_library(
|
||||
name = PKG_DIRNAME,
|
||||
srcs = NPM_MODULE_EXTRA_FILES,
|
||||
deps = RUNTIME_DEPS + [":target_node", ":target_web"],
|
||||
package_name = PKG_REQUIRE_NAME,
|
||||
visibility = ["//visibility:public"],
|
||||
)
|
||||
|
||||
pkg_npm(
|
||||
name = "npm_module",
|
||||
deps = [":" + PKG_DIRNAME],
|
||||
)
|
||||
|
||||
filegroup(
|
||||
name = "build",
|
||||
srcs = [":npm_module"],
|
||||
visibility = ["//visibility:public"],
|
||||
)
|
||||
|
||||
pkg_npm_types(
|
||||
name = "npm_module_types",
|
||||
srcs = SRCS,
|
||||
deps = [":tsc_types"],
|
||||
package_name = PKG_REQUIRE_NAME,
|
||||
tsconfig = ":tsconfig",
|
||||
visibility = ["//visibility:public"],
|
||||
)
|
||||
|
||||
filegroup(
|
||||
name = "build_types",
|
||||
srcs = [":npm_module_types"],
|
||||
visibility = ["//visibility:public"],
|
||||
)
|
||||
9
packages/shared-ux/button_toolbar/README.mdx
Normal file
9
packages/shared-ux/button_toolbar/README.mdx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
id: sharedUX/ButtonToolbar
|
||||
slug: /shared-ux/button-toolbar
|
||||
title: Button Toolbar
|
||||
summary:
|
||||
tags: ['shared-ux', 'component']
|
||||
date: 2022-06-14
|
||||
---
|
||||
|
||||
13
packages/shared-ux/button_toolbar/jest.config.js
Normal file
13
packages/shared-ux/button_toolbar/jest.config.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
preset: '@kbn/test',
|
||||
rootDir: '../../..',
|
||||
roots: ['<rootDir>/packages/shared-ux/button_toolbar'],
|
||||
};
|
||||
8
packages/shared-ux/button_toolbar/package.json
Normal file
8
packages/shared-ux/button_toolbar/package.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "@kbn/shared-ux-button-toolbar",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"main": "./target_node/index.js",
|
||||
"browser": "./target_web/index.js",
|
||||
"license": "SSPL-1.0 OR Elastic License 2.0"
|
||||
}
|
||||
|
|
@ -0,0 +1,587 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarButton /> is rendered 1`] = `
|
||||
<AddFromLibraryButton
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<PrimaryButton
|
||||
iconType="folderOpen"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
label="Add from library"
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
isDisabled={false}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
iconType="folderOpen"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<EuiIcon
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
size="m"
|
||||
type="folderOpen"
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
data-euiicon-type="folderOpen"
|
||||
size="m"
|
||||
/>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
Add from library
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</PrimaryButton>
|
||||
</AddFromLibraryButton>
|
||||
`;
|
||||
|
|
@ -7,12 +7,12 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { AddFromLibraryButton } from './add_from_library';
|
||||
import mdx from './add_from_library.mdx';
|
||||
import { AddFromLibraryButton as Component } from './add_from_library';
|
||||
import mdx from '../../../README.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Toolbar/Buttons/Add From Library Button',
|
||||
description: 'An implementation of the solution toolbar primary button',
|
||||
title: 'Button Toolbar/Buttons',
|
||||
description: 'An implementation of the toolbar primary button',
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
|
|
@ -20,6 +20,6 @@ export default {
|
|||
},
|
||||
};
|
||||
|
||||
export const Component = () => {
|
||||
return <AddFromLibraryButton />;
|
||||
export const AddFromLibraryButton = () => {
|
||||
return <Component />;
|
||||
};
|
||||
|
|
@ -6,14 +6,14 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { mount as enzymeMount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { mountWithIntl } from '@kbn/test-jest-helpers';
|
||||
|
||||
import { AddFromLibraryButton } from './add_from_library';
|
||||
|
||||
describe('<ToolbarButton />', () => {
|
||||
test('is rendered', () => {
|
||||
const component = enzymeMount(<AddFromLibraryButton />);
|
||||
|
||||
const component = mountWithIntl(<AddFromLibraryButton />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -8,17 +8,20 @@
|
|||
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import React from 'react';
|
||||
import { ToolbarButton, Props as ToolbarButtonProps } from '../primary/primary';
|
||||
import { PrimaryButton, Props as ToolbarButtonProps } from '../primary/primary';
|
||||
|
||||
export type Props = Omit<ToolbarButtonProps, 'iconType' | 'label'>;
|
||||
|
||||
const label = {
|
||||
getLibraryButtonLabel: () =>
|
||||
i18n.translate('sharedUXComponents.toolbar.buttons.addFromLibrary.libraryButtonLabel', {
|
||||
i18n.translate('sharedUXPackages.buttonToolbar.buttons.addFromLibrary.libraryButtonLabel', {
|
||||
defaultMessage: 'Add from library',
|
||||
}),
|
||||
};
|
||||
|
||||
/**
|
||||
* A button that acts to add an item from the library to a solution, typically through a modal.
|
||||
*/
|
||||
export const AddFromLibraryButton = ({ onClick, ...rest }: Props) => (
|
||||
<ToolbarButton {...rest} iconType="folderOpen" label={label.getLibraryButtonLabel()} />
|
||||
<PrimaryButton {...rest} iconType="folderOpen" label={label.getLibraryButtonLabel()} />
|
||||
);
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
export { ToolbarButton } from './buttons/primary/primary';
|
||||
export { IconButtonGroup } from './buttons/icon_button_group/icon_button_group';
|
||||
export { AddFromLibraryButton } from './buttons/add_from_library/add_from_library';
|
||||
export { ToolbarPopover } from './popovers/popover';
|
||||
|
||||
export { AddFromLibraryButton } from './add_from_library';
|
||||
export type { Props as AddFromLibraryButtonProps } from './add_from_library';
|
||||
|
|
@ -0,0 +1,384 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<IconButtonGroup /> is rendered 1`] = `
|
||||
<IconButtonGroup
|
||||
buttons={
|
||||
Array [
|
||||
Object {
|
||||
"iconType": "visText",
|
||||
"label": "Text",
|
||||
"onClick": [MockFunction],
|
||||
},
|
||||
]
|
||||
}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
legend="Legend"
|
||||
>
|
||||
<EuiButtonGroup
|
||||
buttonSize="m"
|
||||
isIconOnly={true}
|
||||
legend="Legend"
|
||||
onChange={[Function]}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"aria-label": "Text",
|
||||
"css": Array [
|
||||
Object {
|
||||
"&.euiButtonGroupButton": Object {
|
||||
"&:first-of-type": Object {
|
||||
"borderBottomLeftRadius": "6px !important",
|
||||
"borderTopLeftRadius": "6px !important",
|
||||
},
|
||||
"&:last-of-type": Object {
|
||||
"borderBottomRightRadius": "6px !important",
|
||||
"borderTopRightRadius": "6px !important",
|
||||
},
|
||||
"backgroundColor": "#FFF",
|
||||
"border": "1px solid #D3DAE6 !important",
|
||||
},
|
||||
},
|
||||
],
|
||||
"iconType": "visText",
|
||||
"id": "generated-id0",
|
||||
"label": "Text",
|
||||
"onClick": [MockFunction],
|
||||
"title": "Text",
|
||||
},
|
||||
]
|
||||
}
|
||||
type="multi"
|
||||
>
|
||||
<fieldset
|
||||
className="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text"
|
||||
disabled={false}
|
||||
>
|
||||
<EuiScreenReaderOnly>
|
||||
<legend
|
||||
className="euiScreenReaderOnly"
|
||||
>
|
||||
Legend
|
||||
</legend>
|
||||
</EuiScreenReaderOnly>
|
||||
<div
|
||||
className="euiButtonGroup__buttons"
|
||||
>
|
||||
<EuiButtonGroupButton
|
||||
aria-label="Text"
|
||||
color="text"
|
||||
css="unknown styles"
|
||||
element="button"
|
||||
iconType="visText"
|
||||
id="generated-id0"
|
||||
isDisabled={false}
|
||||
isIconOnly={true}
|
||||
key="0"
|
||||
label="Text"
|
||||
name="generated-id"
|
||||
onChange={[Function]}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
title="Text"
|
||||
>
|
||||
<Insertion
|
||||
cache={
|
||||
Object {
|
||||
"insert": [Function],
|
||||
"inserted": Object {
|
||||
"iuv015-EuiButtonGroup": true,
|
||||
},
|
||||
"key": "css",
|
||||
"nonce": undefined,
|
||||
"registered": Object {
|
||||
"css-iuv015-EuiButtonGroup": "&.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6 !important;&:first-of-type{border-top-left-radius:6px !important;border-bottom-left-radius:6px !important;}&:last-of-type{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important;}};;label:EuiButtonGroup;",
|
||||
},
|
||||
"sheet": StyleSheet {
|
||||
"_alreadyInsertedOrderInsensitiveRule": true,
|
||||
"_insertTag": [Function],
|
||||
"before": null,
|
||||
"container": <head>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup{}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6!important;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:first-of-type{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important;}
|
||||
</style>
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:last-of-type{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important;}
|
||||
</style>
|
||||
<style
|
||||
data-styled="active"
|
||||
data-styled-version="5.1.0"
|
||||
/>
|
||||
</head>,
|
||||
"ctr": 4,
|
||||
"insertionPoint": undefined,
|
||||
"isSpeedy": false,
|
||||
"key": "css",
|
||||
"nonce": undefined,
|
||||
"prepend": undefined,
|
||||
"tags": Array [
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup{}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6!important;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:first-of-type{border-top-left-radius:6px!important;border-bottom-left-radius:6px!important;}
|
||||
</style>,
|
||||
<style
|
||||
data-emotion="css"
|
||||
data-s=""
|
||||
>
|
||||
|
||||
.css-iuv015-EuiButtonGroup.euiButtonGroupButton:last-of-type{border-top-right-radius:6px!important;border-bottom-right-radius:6px!important;}
|
||||
</style>,
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
isStringTag={false}
|
||||
serialized={
|
||||
Object {
|
||||
"map": undefined,
|
||||
"name": "iuv015-EuiButtonGroup",
|
||||
"next": undefined,
|
||||
"styles": "&.euiButtonGroupButton{background-color:#FFF;border:1px solid #D3DAE6 !important;&:first-of-type{border-top-left-radius:6px !important;border-bottom-left-radius:6px !important;}&:last-of-type{border-top-right-radius:6px !important;border-bottom-right-radius:6px !important;}};;label:EuiButtonGroup;",
|
||||
"toString": [Function],
|
||||
}
|
||||
}
|
||||
/>
|
||||
<EuiButtonGroupButton
|
||||
aria-label="Text"
|
||||
className="css-iuv015-EuiButtonGroup"
|
||||
color="text"
|
||||
element="button"
|
||||
iconType="visText"
|
||||
id="generated-id0"
|
||||
isDisabled={false}
|
||||
isIconOnly={true}
|
||||
label="Text"
|
||||
name="generated-id"
|
||||
onChange={[Function]}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
title="Text"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
aria-label="Text"
|
||||
baseClassName="euiButtonGroupButton"
|
||||
className="euiButtonGroupButton-isIconOnly css-iuv015-EuiButtonGroup"
|
||||
color="text"
|
||||
data-test-subj="generated-id0"
|
||||
element="button"
|
||||
fill={false}
|
||||
iconType="visText"
|
||||
id="generated-id"
|
||||
isDisabled={false}
|
||||
isSelected={false}
|
||||
onClick={[MockFunction]}
|
||||
size="m"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiScreenReaderOnly",
|
||||
"data-text": "Text",
|
||||
"ref": [Function],
|
||||
}
|
||||
}
|
||||
title="Text"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
aria-label="Text"
|
||||
aria-pressed={false}
|
||||
className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton-isIconOnly css-iuv015-EuiButtonGroup"
|
||||
data-test-subj="generated-id0"
|
||||
disabled={false}
|
||||
id="generated-id"
|
||||
onClick={[MockFunction]}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
title="Text"
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
iconType="visText"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text euiScreenReaderOnly",
|
||||
"data-text": "Text",
|
||||
"ref": [Function],
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<EuiIcon
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
size="m"
|
||||
type="visText"
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent__icon"
|
||||
color="inherit"
|
||||
data-euiicon-type="visText"
|
||||
size="m"
|
||||
/>
|
||||
</EuiIcon>
|
||||
<span
|
||||
className="euiButton__text euiScreenReaderOnly"
|
||||
data-text="Text"
|
||||
>
|
||||
Text
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButtonGroupButton>
|
||||
</EuiButtonGroupButton>
|
||||
</div>
|
||||
</fieldset>
|
||||
</EuiButtonGroup>
|
||||
</IconButtonGroup>
|
||||
`;
|
||||
|
|
@ -7,14 +7,13 @@
|
|||
*/
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Story } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { IconButtonGroup } from './icon_button_group';
|
||||
import mdx from './icon_button_group.mdx';
|
||||
import { IconButtonGroup as Component } from './icon_button_group';
|
||||
import mdx from '../../../README.mdx';
|
||||
|
||||
export default {
|
||||
title: 'Toolbar/Buttons/Icon Button Group',
|
||||
description: 'A collection of buttons that is a part of a toolbar.',
|
||||
title: 'Button Toolbar/Buttons',
|
||||
description: 'A collection of icon buttons that is a part of a toolbar.',
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
|
|
@ -51,13 +50,7 @@ const quickButtons = [
|
|||
},
|
||||
];
|
||||
|
||||
export const ConnectedComponent: Story<{ buttonCount: number }> = ({ buttonCount }) => {
|
||||
return (
|
||||
<IconButtonGroup legend="Example icon group" buttons={quickButtons.slice(0, buttonCount)} />
|
||||
);
|
||||
};
|
||||
|
||||
ConnectedComponent.argTypes = {
|
||||
const argTypes = {
|
||||
buttonCount: {
|
||||
defaultValue: 2,
|
||||
control: {
|
||||
|
|
@ -68,3 +61,11 @@ ConnectedComponent.argTypes = {
|
|||
},
|
||||
},
|
||||
};
|
||||
|
||||
type Params = Record<keyof typeof argTypes, any>;
|
||||
|
||||
export const IconButtonGroup = ({ buttonCount }: Params) => {
|
||||
return <Component legend="Example icon group" buttons={quickButtons.slice(0, buttonCount)} />;
|
||||
};
|
||||
|
||||
IconButtonGroup.argTypes = argTypes;
|
||||
|
|
@ -7,27 +7,13 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount as enzymeMount, ReactWrapper } from 'enzyme';
|
||||
import {
|
||||
mockServicesFactory,
|
||||
SharedUxServices,
|
||||
SharedUxServicesProvider,
|
||||
} from '@kbn/shared-ux-services';
|
||||
import { mountWithIntl } from '@kbn/test-jest-helpers';
|
||||
|
||||
import { IconButtonGroup } from './icon_button_group';
|
||||
|
||||
describe('<IconButtonGroup />', () => {
|
||||
let services: SharedUxServices;
|
||||
let mount: (element: JSX.Element) => ReactWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
services = mockServicesFactory();
|
||||
mount = (element: JSX.Element) =>
|
||||
enzymeMount(<SharedUxServicesProvider {...services}>{element}</SharedUxServicesProvider>);
|
||||
});
|
||||
|
||||
test('is rendered', () => {
|
||||
const component = mount(
|
||||
const component = mountWithIntl(
|
||||
<IconButtonGroup
|
||||
legend="Legend"
|
||||
buttons={[
|
||||
|
|
@ -15,36 +15,38 @@ import {
|
|||
IconType,
|
||||
EuiButtonGroupProps,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { IconButtonGroupStyles } from './icon_button_group.styles';
|
||||
|
||||
/**
|
||||
* An interface representing a single icon button in the `IconButtonGroup`.
|
||||
*/
|
||||
export interface IconButton {
|
||||
/**
|
||||
* The accessible button label
|
||||
*/
|
||||
/** The accessible button label. */
|
||||
label: string;
|
||||
/**
|
||||
* EUI `IconType` to display
|
||||
*/
|
||||
/** EUI `IconType` to display. */
|
||||
iconType: IconType;
|
||||
/** Handler for button click. */
|
||||
onClick: () => void;
|
||||
/**
|
||||
* HTML `title` attribute for tooltips if different from `label`
|
||||
*/
|
||||
/** HTML `title` attribute for tooltips if different from `label` */
|
||||
title?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Props for `IconButtonGroup`.
|
||||
*/
|
||||
export interface Props {
|
||||
/**
|
||||
* Required accessible legend for the whole group
|
||||
*/
|
||||
/** Required accessible legend for the whole group */
|
||||
legend: EuiButtonGroupProps['legend'];
|
||||
/**
|
||||
* Array of `QuickButton`s
|
||||
*/
|
||||
/** Array of `IconButton` */
|
||||
buttons: IconButton[];
|
||||
}
|
||||
|
||||
type Option = EuiButtonGroupOptionProps & Omit<IconButton, 'label'>;
|
||||
|
||||
/**
|
||||
* A group of buttons each performing an action, represented by an icon.
|
||||
*/
|
||||
export const IconButtonGroup = ({ buttons, legend }: Props) => {
|
||||
const euiTheme = useEuiTheme();
|
||||
const iconButtonGroupStyles = IconButtonGroupStyles(euiTheme);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { IconButtonGroup } from './icon_button_group';
|
||||
export type { IconButton, Props as IconButtonGroupProps } from './icon_button_group';
|
||||
16
packages/shared-ux/button_toolbar/src/buttons/index.ts
Normal file
16
packages/shared-ux/button_toolbar/src/buttons/index.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { PrimaryButton } from './primary';
|
||||
export type { PrimaryButtonProps } from './primary';
|
||||
|
||||
export { IconButtonGroup } from './icon_button_group';
|
||||
export type { IconButtonGroupProps, IconButton } from './icon_button_group';
|
||||
|
||||
export { AddFromLibraryButton } from './add_from_library';
|
||||
export type { AddFromLibraryButtonProps } from './add_from_library';
|
||||
465
packages/shared-ux/button_toolbar/src/buttons/primary/__snapshots__/primary.test.tsx.snap
generated
Normal file
465
packages/shared-ux/button_toolbar/src/buttons/primary/__snapshots__/primary.test.tsx.snap
generated
Normal file
|
|
@ -0,0 +1,465 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarButton /> is rendered 1`] = `
|
||||
<PrimaryButton
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
label="test"
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
isDisabled={false}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
test
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</PrimaryButton>
|
||||
`;
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { PrimaryButton } from './primary';
|
||||
export type { Props as PrimaryButtonProps } from './primary';
|
||||
|
|
@ -6,36 +6,38 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { Story } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ToolbarButton } from './primary';
|
||||
import mdx from './primary.mdx';
|
||||
|
||||
import { PrimaryButton as Component } from './primary';
|
||||
import mdx from '../../../README.mdx';
|
||||
|
||||
const argTypes = {
|
||||
iconType: {
|
||||
control: {
|
||||
type: 'radio',
|
||||
expanded: true,
|
||||
options: ['apps', 'logoGithub', 'folderCheck', 'documents'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
type Params = Record<keyof typeof argTypes, any>;
|
||||
|
||||
export default {
|
||||
title: 'Toolbar/Buttons/Primary button',
|
||||
title: 'Button Toolbar/Buttons',
|
||||
description: 'A primary button that is a part of a toolbar.',
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
iconType: {
|
||||
control: {
|
||||
type: 'radio',
|
||||
expanded: true,
|
||||
options: ['apps', 'logoGithub', 'folderCheck', 'documents'],
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes,
|
||||
};
|
||||
|
||||
export const Component: Story<{
|
||||
iconType: any;
|
||||
}> = ({ iconType }) => {
|
||||
return <ToolbarButton label={'Primary Action'} iconType={iconType} />;
|
||||
export const PrimaryButton = ({ iconType }: Params) => {
|
||||
return <Component label={'Primary Action'} iconType={iconType} />;
|
||||
};
|
||||
|
||||
Component.args = {
|
||||
PrimaryButton.args = {
|
||||
iconType: 'apps',
|
||||
};
|
||||
|
|
@ -6,35 +6,20 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { mount as enzymeMount, ReactWrapper } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { mountWithIntl } from '@kbn/test-jest-helpers';
|
||||
|
||||
import {
|
||||
SharedUxServicesProvider,
|
||||
SharedUxServices,
|
||||
mockServicesFactory,
|
||||
} from '@kbn/shared-ux-services';
|
||||
|
||||
import { ToolbarButton } from './primary';
|
||||
import { PrimaryButton } from './primary';
|
||||
|
||||
describe('<ToolbarButton />', () => {
|
||||
let services: SharedUxServices;
|
||||
let mount: (element: JSX.Element) => ReactWrapper;
|
||||
|
||||
beforeEach(() => {
|
||||
services = mockServicesFactory();
|
||||
mount = (element: JSX.Element) =>
|
||||
enzymeMount(<SharedUxServicesProvider {...services}>{element}</SharedUxServicesProvider>);
|
||||
});
|
||||
|
||||
test('is rendered', () => {
|
||||
const component = mount(<ToolbarButton label="test" />);
|
||||
|
||||
const component = mountWithIntl(<PrimaryButton label="test" />);
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('it can be passed a functional onClick handler', () => {
|
||||
const mockHandler = jest.fn();
|
||||
const component = mount(<ToolbarButton label="withOnClick" onClick={mockHandler} />);
|
||||
const component = mountWithIntl(<PrimaryButton label="withOnClick" onClick={mockHandler} />);
|
||||
component.simulate('click');
|
||||
expect(mockHandler).toHaveBeenCalled();
|
||||
});
|
||||
|
|
@ -10,11 +10,17 @@ import React from 'react';
|
|||
import { EuiButton } from '@elastic/eui';
|
||||
import { EuiButtonPropsForButton } from '@elastic/eui/src/components/button/button';
|
||||
|
||||
/**
|
||||
* Props for `PrimaryButton`.
|
||||
*/
|
||||
export interface Props extends Pick<EuiButtonPropsForButton, 'onClick' | 'iconType' | 'iconSide'> {
|
||||
label: string;
|
||||
}
|
||||
|
||||
export const ToolbarButton = ({ label, iconSide = 'left', ...rest }: Props) => {
|
||||
/**
|
||||
* A primary action button, usually appearing first in the toolbar.
|
||||
*/
|
||||
export const PrimaryButton = ({ label, iconSide = 'left', ...rest }: Props) => {
|
||||
return (
|
||||
<EuiButton size="m" color="primary" fill={true} {...{ iconSide, ...rest }}>
|
||||
{label}
|
||||
18
packages/shared-ux/button_toolbar/src/index.ts
Normal file
18
packages/shared-ux/button_toolbar/src/index.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { PrimaryButton, IconButtonGroup, AddFromLibraryButton } from './buttons';
|
||||
export type {
|
||||
AddFromLibraryButtonProps,
|
||||
IconButtonGroupProps,
|
||||
IconButton,
|
||||
PrimaryButtonProps,
|
||||
} from './buttons';
|
||||
|
||||
export { ToolbarPopover } from './popover';
|
||||
export type { ToolbarPopoverProps } from './popover';
|
||||
395
packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap
generated
Normal file
395
packages/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap
generated
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ToolbarPopover /> is rendered 1`] = `
|
||||
<ToolbarPopover
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
label="test"
|
||||
>
|
||||
<EuiPopover
|
||||
anchorPosition="downCenter"
|
||||
button={
|
||||
<PrimaryButton
|
||||
label="test"
|
||||
onClick={[Function]}
|
||||
/>
|
||||
}
|
||||
closePopover={[Function]}
|
||||
display="inlineBlock"
|
||||
hasArrow={true}
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
isOpen={false}
|
||||
ownFocus={true}
|
||||
panelPaddingSize="m"
|
||||
>
|
||||
<div
|
||||
className="euiPopover euiPopover--anchorDownCenter"
|
||||
intl={
|
||||
Object {
|
||||
"defaultFormats": Object {},
|
||||
"defaultLocale": "en",
|
||||
"formatDate": [Function],
|
||||
"formatHTMLMessage": [Function],
|
||||
"formatMessage": [Function],
|
||||
"formatNumber": [Function],
|
||||
"formatPlural": [Function],
|
||||
"formatRelative": [Function],
|
||||
"formatTime": [Function],
|
||||
"formats": Object {
|
||||
"date": Object {
|
||||
"full": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"weekday": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"long": Object {
|
||||
"day": "numeric",
|
||||
"month": "long",
|
||||
"year": "numeric",
|
||||
},
|
||||
"medium": Object {
|
||||
"day": "numeric",
|
||||
"month": "short",
|
||||
"year": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"day": "numeric",
|
||||
"month": "numeric",
|
||||
"year": "2-digit",
|
||||
},
|
||||
},
|
||||
"number": Object {
|
||||
"currency": Object {
|
||||
"style": "currency",
|
||||
},
|
||||
"percent": Object {
|
||||
"style": "percent",
|
||||
},
|
||||
},
|
||||
"relative": Object {
|
||||
"days": Object {
|
||||
"units": "day",
|
||||
},
|
||||
"hours": Object {
|
||||
"units": "hour",
|
||||
},
|
||||
"minutes": Object {
|
||||
"units": "minute",
|
||||
},
|
||||
"months": Object {
|
||||
"units": "month",
|
||||
},
|
||||
"seconds": Object {
|
||||
"units": "second",
|
||||
},
|
||||
"years": Object {
|
||||
"units": "year",
|
||||
},
|
||||
},
|
||||
"time": Object {
|
||||
"full": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"long": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
"timeZoneName": "short",
|
||||
},
|
||||
"medium": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
"second": "numeric",
|
||||
},
|
||||
"short": Object {
|
||||
"hour": "numeric",
|
||||
"minute": "numeric",
|
||||
},
|
||||
},
|
||||
},
|
||||
"formatters": Object {
|
||||
"getDateTimeFormat": [Function],
|
||||
"getMessageFormat": [Function],
|
||||
"getNumberFormat": [Function],
|
||||
"getPluralFormat": [Function],
|
||||
"getRelativeFormat": [Function],
|
||||
},
|
||||
"locale": "en",
|
||||
"messages": Object {},
|
||||
"now": [Function],
|
||||
"onError": [Function],
|
||||
"textComponent": Symbol(react.fragment),
|
||||
"timeZone": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiPopover__anchor"
|
||||
>
|
||||
<PrimaryButton
|
||||
label="test"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
onClick={[Function]}
|
||||
size="m"
|
||||
>
|
||||
<EuiButtonDisplay
|
||||
baseClassName="euiButton"
|
||||
color="primary"
|
||||
disabled={false}
|
||||
element="button"
|
||||
fill={true}
|
||||
iconSide="left"
|
||||
isDisabled={false}
|
||||
onClick={[Function]}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<button
|
||||
className="euiButton euiButton--primary euiButton--fill"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"minWidth": undefined,
|
||||
}
|
||||
}
|
||||
type="button"
|
||||
>
|
||||
<EuiButtonContent
|
||||
className="euiButton__content"
|
||||
iconSide="left"
|
||||
textProps={
|
||||
Object {
|
||||
"className": "euiButton__text",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="euiButtonContent euiButton__content"
|
||||
>
|
||||
<span
|
||||
className="euiButton__text"
|
||||
>
|
||||
test
|
||||
</span>
|
||||
</span>
|
||||
</EuiButtonContent>
|
||||
</button>
|
||||
</EuiButtonDisplay>
|
||||
</EuiButton>
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</EuiPopover>
|
||||
</ToolbarPopover>
|
||||
`;
|
||||
10
packages/shared-ux/button_toolbar/src/popover/index.ts
Normal file
10
packages/shared-ux/button_toolbar/src/popover/index.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0 and the Server Side Public License, v 1; you may not use this file except
|
||||
* in compliance with, at your election, the Elastic License 2.0 or the Server
|
||||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
export { ToolbarPopover } from './popover';
|
||||
export type { Props as ToolbarPopoverProps } from './popover';
|
||||
|
|
@ -6,36 +6,43 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { EuiContextMenu } from '@elastic/eui';
|
||||
import { ButtonContentIconSide } from '@elastic/eui/src/components/button/button_content';
|
||||
import { Story } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ToolbarPopover } from './popover';
|
||||
import mdx from './popover.mdx';
|
||||
|
||||
import { EuiContextMenu } from '@elastic/eui';
|
||||
|
||||
import { ToolbarPopover as Component } from './popover';
|
||||
import mdx from '../../README.mdx';
|
||||
|
||||
const argTypes = {
|
||||
iconSide: {
|
||||
control: {
|
||||
type: 'radio',
|
||||
options: ['left', 'right', 'undefined'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
type Params = Record<keyof typeof argTypes, any>;
|
||||
|
||||
export default {
|
||||
title: 'Toolbar/Popover',
|
||||
title: 'Button Toolbar',
|
||||
description: 'A popover that is a part of a toolbar.',
|
||||
parameters: {
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
iconSide: {
|
||||
control: {
|
||||
type: 'radio',
|
||||
options: ['left', 'right', 'undefined'],
|
||||
},
|
||||
},
|
||||
},
|
||||
argTypes,
|
||||
};
|
||||
|
||||
export const Component: Story<{
|
||||
iconSide: ButtonContentIconSide | undefined;
|
||||
}> = ({ iconSide }) => {
|
||||
export const Popover = ({ iconSide }: Params) => {
|
||||
return (
|
||||
<ToolbarPopover label="Add element" iconType="plusInCircle" iconSide={iconSide}>
|
||||
<Component
|
||||
label="Add element"
|
||||
iconType={iconSide === 'right' ? 'arrowDown' : 'plusInCircle'}
|
||||
iconSide={iconSide}
|
||||
panelPaddingSize="none"
|
||||
>
|
||||
{() => (
|
||||
<EuiContextMenu
|
||||
initialPanelId={0}
|
||||
|
|
@ -61,10 +68,10 @@ export const Component: Story<{
|
|||
]}
|
||||
/>
|
||||
)}
|
||||
</ToolbarPopover>
|
||||
</Component>
|
||||
);
|
||||
};
|
||||
|
||||
Component.args = {
|
||||
Popover.args = {
|
||||
iconSide: 'left',
|
||||
};
|
||||
|
|
@ -6,14 +6,15 @@
|
|||
* Side Public License, v 1.
|
||||
*/
|
||||
|
||||
import { mount as enzymeMount } from 'enzyme';
|
||||
import React from 'react';
|
||||
import { mountWithIntl } from '@kbn/test-jest-helpers';
|
||||
|
||||
import { ToolbarPopover } from './popover';
|
||||
|
||||
describe('<ToolbarPopover />', () => {
|
||||
test('is rendered', () => {
|
||||
const isOpen = true;
|
||||
const component = enzymeMount(<ToolbarPopover label="test" children={() => !isOpen} />);
|
||||
const component = mountWithIntl(<ToolbarPopover label="test" children={() => !isOpen} />);
|
||||
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
|
@ -21,9 +22,11 @@ describe('<ToolbarPopover />', () => {
|
|||
test('accepts an onClick handler', () => {
|
||||
const isOpen = true;
|
||||
const mockHandler = jest.fn();
|
||||
const component = enzymeMount(
|
||||
|
||||
const component = mountWithIntl(
|
||||
<ToolbarPopover label="test" children={() => !isOpen} onClick={mockHandler} />
|
||||
);
|
||||
|
||||
component.simulate('click');
|
||||
expect(mockHandler).toHaveBeenCalled();
|
||||
});
|
||||
|
|
@ -10,7 +10,7 @@ import React, { useState } from 'react';
|
|||
import { EuiPopover } from '@elastic/eui';
|
||||
import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
|
||||
|
||||
import { ToolbarButton, Props as ButtonProps } from '../buttons/primary/primary';
|
||||
import { PrimaryButton, Props as ButtonProps } from '../buttons/primary/primary';
|
||||
|
||||
type AllowedButtonProps = Omit<ButtonProps, 'onClick' | 'fill'>;
|
||||
type AllowedPopoverProps = Omit<
|
||||
|
|
@ -18,18 +18,24 @@ type AllowedPopoverProps = Omit<
|
|||
'button' | 'isOpen' | 'closePopover' | 'anchorPosition'
|
||||
>;
|
||||
|
||||
/**
|
||||
* Props for `ToolbarPopover`.
|
||||
*/
|
||||
export type Props = AllowedButtonProps &
|
||||
AllowedPopoverProps & {
|
||||
children: (arg: { closePopover: () => void }) => React.ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* A button which opens a popover of additional actions within the toolbar.
|
||||
*/
|
||||
export const ToolbarPopover = ({ label, iconType, children, iconSide, ...popover }: Props) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const onButtonClick = () => setIsOpen((status) => !status);
|
||||
const closePopover = () => setIsOpen(false);
|
||||
|
||||
const button = <ToolbarButton onClick={onButtonClick} {...{ label, iconSide, iconType }} />;
|
||||
const button = <PrimaryButton onClick={onButtonClick} {...{ label, iconSide, iconType }} />;
|
||||
|
||||
return (
|
||||
// the following ts-ignore is needed until typings/* directory is exposed for consumption to packages
|
||||
19
packages/shared-ux/button_toolbar/tsconfig.json
Normal file
19
packages/shared-ux/button_toolbar/tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": "../../../tsconfig.bazel.json",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"outDir": "target_types",
|
||||
"rootDir": "src",
|
||||
"stripInternal": false,
|
||||
"types": [
|
||||
"jest",
|
||||
"node",
|
||||
"react",
|
||||
"@kbn/ambient-ui-types"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
]
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ export { SolutionToolbarButton } from './button';
|
|||
export { SolutionToolbarPopover } from './popover';
|
||||
export { AddFromLibraryButton } from './add_from_library';
|
||||
export type { QuickButtonProps } from './quick_group';
|
||||
/** @deprecated use `IconButtonGroup` from `@kbn/shared-ux-components */
|
||||
/** @deprecated use `IconButtonGroup` from `@kbn/shared-ux-button-toolbar` */
|
||||
export { QuickButtonGroup } from './quick_group';
|
||||
export { PrimaryActionButton } from './primary_button';
|
||||
export { PrimaryActionPopover } from './primary_popover';
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ export {
|
|||
AddFromLibraryButton,
|
||||
PrimaryActionButton,
|
||||
PrimaryActionPopover,
|
||||
/** @deprecated QuickButtonGroup - use `IconButtonGroup` from `@kbn/shared-ux-components */
|
||||
/** @deprecated QuickButtonGroup - use `IconButtonGroup` from `@kbn/shared-ux-button-toolbar` */
|
||||
QuickButtonGroup,
|
||||
SolutionToolbar,
|
||||
SolutionToolbarButton,
|
||||
|
|
|
|||
|
|
@ -5343,7 +5343,7 @@
|
|||
"sharedUXComponents.noDataPage.elasticAgentCard.noPermission.title": "Contactez votre administrateur",
|
||||
"sharedUXComponents.noDataPage.elasticAgentCard.title": "Ajouter Elastic Agent",
|
||||
"sharedUXComponents.pageTemplate.noDataCard.description": "Continuer sans collecter de données",
|
||||
"sharedUXComponents.toolbar.buttons.addFromLibrary.libraryButtonLabel": "Ajouter depuis la bibliothèque",
|
||||
"sharedUXPackages.buttonToolbar.buttons.addFromLibrary.libraryButtonLabel": "Ajouter depuis la bibliothèque",
|
||||
"sharedUXPackages.noDataViewsPrompt.learnMore": "Envie d'en savoir plus ?",
|
||||
"sharedUXPackages.noDataViewsPrompt.readDocumentation": "Lisez les documents",
|
||||
"telemetry.callout.appliesSettingTitle": "Les modifications apportées à ce paramètre s'appliquent dans {allOfKibanaText} et sont enregistrées automatiquement.",
|
||||
|
|
|
|||
|
|
@ -5445,7 +5445,7 @@
|
|||
"sharedUXComponents.noDataPage.elasticAgentCard.noPermission.title": "管理者にお問い合わせください",
|
||||
"sharedUXComponents.noDataPage.elasticAgentCard.title": "Elasticエージェントの追加",
|
||||
"sharedUXComponents.pageTemplate.noDataCard.description": "データを収集せずに続行",
|
||||
"sharedUXComponents.toolbar.buttons.addFromLibrary.libraryButtonLabel": "ライブラリから追加",
|
||||
"sharedUXPackages.buttonToolbar.buttons.addFromLibrary.libraryButtonLabel": "ライブラリから追加",
|
||||
"sharedUXPackages.noDataViewsPrompt.learnMore": "詳細について",
|
||||
"sharedUXPackages.noDataViewsPrompt.readDocumentation": "<b>ドキュメント</b><b>を読む</b>",
|
||||
"telemetry.callout.appliesSettingTitle": "この設定に加えた変更は {allOfKibanaText} に適用され、自動的に保存されます。",
|
||||
|
|
|
|||
|
|
@ -5456,7 +5456,7 @@
|
|||
"sharedUXComponents.noDataPage.elasticAgentCard.noPermission.title": "请联系您的管理员",
|
||||
"sharedUXComponents.noDataPage.elasticAgentCard.title": "添加 Elastic 代理",
|
||||
"sharedUXComponents.pageTemplate.noDataCard.description": "继续，而不收集数据",
|
||||
"sharedUXComponents.toolbar.buttons.addFromLibrary.libraryButtonLabel": "从库中添加",
|
||||
"sharedUXPackages.buttonToolbar.buttons.addFromLibrary.libraryButtonLabel": "从库中添加",
|
||||
"sharedUXPackages.noDataViewsPrompt.learnMore": "希望了解详情？",
|
||||
"sharedUXPackages.noDataViewsPrompt.readDocumentation": "阅读文档",
|
||||
"telemetry.callout.appliesSettingTitle": "对此设置的更改将应用到{allOfKibanaText} 且会自动保存。",
|
||||
|
|
|
|||
|
|
@ -3375,6 +3375,10 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@kbn/shared-ux-button-toolbar@link:bazel-bin/packages/shared-ux/button_toolbar":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@kbn/shared-ux-storybook@link:bazel-bin/packages/kbn-shared-ux-storybook":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
|
@ -6742,6 +6746,10 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@types/kbn__shared-ux-button-toolbar@link:bazel-bin/packages/shared-ux/button_toolbar/npm_module_types":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@types/kbn__shared-ux-storybook@link:bazel-bin/packages/kbn-shared-ux-storybook/npm_module_types":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue