From a9783c32ab24d65b47101d8fcb1bf9ae21533a05 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Mon, 18 Oct 2021 16:12:55 +0200 Subject: [PATCH 1/7] extract field components to pacakge --- .../__snapshots__/field_button.test.tsx.snap | 134 ------------ .../public/field_button/field_button.scss | 76 ------- .../public/field_button/field_button.test.tsx | 58 ------ .../public/field_button/field_button.tsx | 125 ------------ .../kibana_react/public/field_button/index.ts | 9 - .../__snapshots__/field_icon.test.tsx.snap | 190 ------------------ .../public/field_icon/field_icon.test.tsx | 51 ----- .../public/field_icon/field_icon.tsx | 80 -------- .../kibana_react/public/field_icon/index.ts | 9 - 9 files changed, 732 deletions(-) delete mode 100644 src/plugins/kibana_react/public/field_button/__snapshots__/field_button.test.tsx.snap delete mode 100644 src/plugins/kibana_react/public/field_button/field_button.scss delete mode 100644 src/plugins/kibana_react/public/field_button/field_button.test.tsx delete mode 100644 src/plugins/kibana_react/public/field_button/field_button.tsx delete mode 100644 src/plugins/kibana_react/public/field_button/index.ts delete mode 100644 src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap delete mode 100644 src/plugins/kibana_react/public/field_icon/field_icon.test.tsx delete mode 100644 src/plugins/kibana_react/public/field_icon/field_icon.tsx delete mode 100644 src/plugins/kibana_react/public/field_icon/index.ts diff --git a/src/plugins/kibana_react/public/field_button/__snapshots__/field_button.test.tsx.snap b/src/plugins/kibana_react/public/field_button/__snapshots__/field_button.test.tsx.snap deleted file mode 100644 index e65b5fcb8fbbd..0000000000000 --- a/src/plugins/kibana_react/public/field_button/__snapshots__/field_button.test.tsx.snap +++ /dev/null @@ -1,134 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`fieldAction is rendered 1`] = ` -
- -
- - fieldAction - -
-
-`; - -exports[`fieldIcon is rendered 1`] = ` -
- -
-`; - -exports[`isActive defaults to false 1`] = ` -
- -
-`; - -exports[`isActive renders true 1`] = ` -
- -
-`; - -exports[`isDraggable is rendered 1`] = ` -
- -
-`; - -exports[`sizes m is applied 1`] = ` -
- -
-`; - -exports[`sizes s is applied 1`] = ` -
- -
-`; diff --git a/src/plugins/kibana_react/public/field_button/field_button.scss b/src/plugins/kibana_react/public/field_button/field_button.scss deleted file mode 100644 index f71e097ab7138..0000000000000 --- a/src/plugins/kibana_react/public/field_button/field_button.scss +++ /dev/null @@ -1,76 +0,0 @@ -.kbnFieldButton { - @include euiFontSizeS; - border-radius: $euiBorderRadius; - margin-bottom: $euiSizeXS; - display: flex; - align-items: center; - transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance, - background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation - - &:focus-within, - &-isActive { - @include euiFocusRing; - } -} - -.kbnFieldButton--isDraggable { - background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade); - - &:hover, - &:focus, - &:focus-within { - @include euiBottomShadowMedium; - border-radius: $euiBorderRadius; - z-index: 2; - } - - .kbnFieldButton__button { - &:hover, - &:focus { - cursor: grab; - } - } -} - -.kbnFieldButton__button { - flex-grow: 1; - text-align: left; - padding: $euiSizeS; - display: flex; - align-items: flex-start; - line-height: normal; -} - -.kbnFieldButton__fieldIcon { - flex-shrink: 0; - line-height: 0; - margin-right: $euiSizeS; -} - -.kbnFieldButton__name { - flex-grow: 1; - word-break: break-word; -} - -.kbnFieldButton__infoIcon { - flex-shrink: 0; - margin-left: $euiSizeXS; -} - -.kbnFieldButton__fieldAction { - margin-right: $euiSizeS; -} - -// Reduce text size and spacing for the small size -.kbnFieldButton--small { - font-size: $euiFontSizeXS; - - .kbnFieldButton__button { - padding: $euiSizeXS; - } - - .kbnFieldButton__fieldIcon, - .kbnFieldButton__fieldAction { - margin-right: $euiSizeXS; - } -} diff --git a/src/plugins/kibana_react/public/field_button/field_button.test.tsx b/src/plugins/kibana_react/public/field_button/field_button.test.tsx deleted file mode 100644 index e61b41187ba7e..0000000000000 --- a/src/plugins/kibana_react/public/field_button/field_button.test.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* - * 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. - */ - -import React from 'react'; -import { shallow } from 'enzyme'; -import { FieldButton, SIZES } from './field_button'; - -const noop = () => {}; - -describe('sizes', () => { - SIZES.forEach((size) => { - test(`${size} is applied`, () => { - const component = shallow(); - expect(component).toMatchSnapshot(); - }); - }); -}); - -describe('isDraggable', () => { - it('is rendered', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); - }); -}); - -describe('fieldIcon', () => { - it('is rendered', () => { - const component = shallow( - fieldIcon} /> - ); - expect(component).toMatchSnapshot(); - }); -}); - -describe('fieldAction', () => { - it('is rendered', () => { - const component = shallow( - fieldAction} /> - ); - expect(component).toMatchSnapshot(); - }); -}); - -describe('isActive', () => { - it('defaults to false', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); - }); - it('renders true', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/src/plugins/kibana_react/public/field_button/field_button.tsx b/src/plugins/kibana_react/public/field_button/field_button.tsx deleted file mode 100644 index 4871fea049710..0000000000000 --- a/src/plugins/kibana_react/public/field_button/field_button.tsx +++ /dev/null @@ -1,125 +0,0 @@ -/* - * 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. - */ - -import './field_button.scss'; -import classNames from 'classnames'; -import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react'; -import { CommonProps } from '@elastic/eui'; - -export interface FieldButtonProps extends HTMLAttributes { - /** - * Label for the button - */ - fieldName: ReactNode; - /** - * Icon representing the field type. - * Recommend using FieldIcon - */ - fieldIcon?: ReactNode; - /** - * An optional node to place inside and at the end of the - ) : ( -
- {innerContent} -
- )} - - {fieldAction &&
{fieldAction}
} - - ); -} diff --git a/src/plugins/kibana_react/public/field_button/index.ts b/src/plugins/kibana_react/public/field_button/index.ts deleted file mode 100644 index 298160652db49..0000000000000 --- a/src/plugins/kibana_react/public/field_button/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * 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 * from './field_button'; diff --git a/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap b/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap deleted file mode 100644 index f6870a5209c1e..0000000000000 --- a/src/plugins/kibana_react/public/field_icon/__snapshots__/field_icon.test.tsx.snap +++ /dev/null @@ -1,190 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FieldIcon changes fill when scripted is true 1`] = ` - -`; - -exports[`FieldIcon renders an icon for an unknown type 1`] = ` - -`; - -exports[`FieldIcon renders known field types _source is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types boolean is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types conflict is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types date is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types date_range is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types geo_point is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types geo_shape is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types ip is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types ip_range is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types murmur3 is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types nested is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types number is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types number_range is rendered 1`] = ` - -`; - -exports[`FieldIcon renders known field types string is rendered 1`] = ` - -`; - -exports[`FieldIcon renders with className if provided 1`] = ` - -`; - -exports[`FieldIcon supports same props as EuiToken 1`] = ` - -`; diff --git a/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx deleted file mode 100644 index cfc67592cd5ea..0000000000000 --- a/src/plugins/kibana_react/public/field_icon/field_icon.test.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* - * 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. - */ - -import React from 'react'; -import { shallow } from 'enzyme'; -import { FieldIcon, typeToEuiIconMap } from './field_icon'; - -const availableTypes = Object.keys(typeToEuiIconMap); - -describe('FieldIcon renders known field types', () => { - availableTypes.forEach((type) => { - test(`${type} is rendered`, () => { - const component = shallow(); - expect(component).toMatchSnapshot(); - }); - }); -}); - -test('FieldIcon renders an icon for an unknown type', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); -}); - -test('FieldIcon supports same props as EuiToken', () => { - const component = shallow( - - ); - expect(component).toMatchSnapshot(); -}); - -test('FieldIcon changes fill when scripted is true', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); -}); - -test('FieldIcon renders with className if provided', () => { - const component = shallow(); - expect(component).toMatchSnapshot(); -}); diff --git a/src/plugins/kibana_react/public/field_icon/field_icon.tsx b/src/plugins/kibana_react/public/field_icon/field_icon.tsx deleted file mode 100644 index cd3c7ee9e7a99..0000000000000 --- a/src/plugins/kibana_react/public/field_icon/field_icon.tsx +++ /dev/null @@ -1,80 +0,0 @@ -/* - * 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. - */ - -import React from 'react'; -import classNames from 'classnames'; -import { EuiToken, EuiTokenProps } from '@elastic/eui'; - -export interface FieldIconProps extends Omit { - type: - | 'boolean' - | 'conflict' - | 'date' - | 'date_range' - | 'geo_point' - | 'geo_shape' - | 'ip' - | 'ip_range' - | 'murmur3' - | 'number' - | 'number_range' - | '_source' - | 'string' - | string - | 'nested'; - label?: string; - scripted?: boolean; -} - -// defaultIcon => a unknown datatype -const defaultIcon = { iconType: 'questionInCircle', color: 'gray' }; - -export const typeToEuiIconMap: Partial> = { - boolean: { iconType: 'tokenBoolean' }, - // icon for an index pattern mapping conflict in discover - conflict: { iconType: 'alert', color: 'euiColorVis9', shape: 'square' }, - date: { iconType: 'tokenDate' }, - date_range: { iconType: 'tokenDate' }, - geo_point: { iconType: 'tokenGeo' }, - geo_shape: { iconType: 'tokenGeo' }, - ip: { iconType: 'tokenIP' }, - ip_range: { iconType: 'tokenIP' }, - // is a plugin's data type https://www.elastic.co/guide/en/elasticsearch/plugins/current/mapper-murmur3-usage.html - murmur3: { iconType: 'tokenFile' }, - number: { iconType: 'tokenNumber' }, - number_range: { iconType: 'tokenNumber' }, - _source: { iconType: 'editorCodeBlock', color: 'gray' }, - string: { iconType: 'tokenString' }, - nested: { iconType: 'tokenNested' }, -}; - -/** - * Field token icon used across the app - */ -export function FieldIcon({ - type, - label, - size = 's', - scripted, - className, - ...rest -}: FieldIconProps) { - const token = typeToEuiIconMap[type] || defaultIcon; - - return ( - - ); -} diff --git a/src/plugins/kibana_react/public/field_icon/index.ts b/src/plugins/kibana_react/public/field_icon/index.ts deleted file mode 100644 index 1ef8f3d75ed06..0000000000000 --- a/src/plugins/kibana_react/public/field_icon/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * 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 * from './field_icon'; From 45698bbac355b4536a86df6616a716fa74dca177 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Mon, 18 Oct 2021 16:13:51 +0200 Subject: [PATCH 2/7] extract field components to a package --- package.json | 1 + packages/BUILD.bazel | 1 + .../src/worker/webpack.config.ts | 10 +- packages/kbn-react-field/BUILD.bazel | 119 +++++++++++ packages/kbn-react-field/README.md | 1 + packages/kbn-react-field/jest.config.js | 13 ++ packages/kbn-react-field/package.json | 9 + .../__snapshots__/field_button.test.tsx.snap | 134 ++++++++++++ .../src/field_button/field_button.scss | 76 +++++++ .../src/field_button/field_button.test.tsx | 58 ++++++ .../src/field_button/field_button.tsx | 125 ++++++++++++ .../kbn-react-field/src/field_button/index.ts | 9 + .../__snapshots__/field_icon.test.tsx.snap | 190 ++++++++++++++++++ .../src/field_icon/field_icon.test.tsx | 51 +++++ .../src/field_icon/field_icon.tsx | 80 ++++++++ .../kbn-react-field/src/field_icon/index.ts | 9 + packages/kbn-react-field/src/index.ts | 10 + packages/kbn-react-field/tsconfig.json | 23 +++ .../components/sidebar/discover_field.tsx | 2 +- .../components/field_name/field_name.tsx | 2 +- src/plugins/kibana_react/public/index.ts | 2 - .../shareable_runtime/webpack.config.js | 10 +- .../components/field_manager/field_editor.tsx | 2 +- .../components/field_manager/field_picker.tsx | 2 +- .../indexpattern_datasource/field_item.tsx | 2 +- .../lens_field_icon.tsx | 2 +- .../mvt_field_config_editor.tsx | 2 +- .../styles/vector/components/field_select.tsx | 2 +- .../public/components/single_field_select.tsx | 2 +- .../add_tooltip_field_popover.tsx | 2 +- .../public/common/lib/kibana/kibana_react.ts | 2 +- .../event_details/table/field_name_cell.tsx | 2 +- .../util_components/single_field_select.tsx | 2 +- yarn.lock | 4 + 34 files changed, 944 insertions(+), 17 deletions(-) create mode 100644 packages/kbn-react-field/BUILD.bazel create mode 100644 packages/kbn-react-field/README.md create mode 100644 packages/kbn-react-field/jest.config.js create mode 100644 packages/kbn-react-field/package.json create mode 100644 packages/kbn-react-field/src/field_button/__snapshots__/field_button.test.tsx.snap create mode 100644 packages/kbn-react-field/src/field_button/field_button.scss create mode 100644 packages/kbn-react-field/src/field_button/field_button.test.tsx create mode 100644 packages/kbn-react-field/src/field_button/field_button.tsx create mode 100644 packages/kbn-react-field/src/field_button/index.ts create mode 100644 packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap create mode 100644 packages/kbn-react-field/src/field_icon/field_icon.test.tsx create mode 100644 packages/kbn-react-field/src/field_icon/field_icon.tsx create mode 100644 packages/kbn-react-field/src/field_icon/index.ts create mode 100644 packages/kbn-react-field/src/index.ts create mode 100644 packages/kbn-react-field/tsconfig.json diff --git a/package.json b/package.json index 47ed5e110b000..4c2ba4e3d0bb6 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,7 @@ "@kbn/logging": "link:bazel-bin/packages/kbn-logging", "@kbn/mapbox-gl": "link:bazel-bin/packages/kbn-mapbox-gl", "@kbn/monaco": "link:bazel-bin/packages/kbn-monaco", + "@kbn/react-field": "link:bazel-bin/packages/kbn-react-field", "@kbn/rule-data-utils": "link:bazel-bin/packages/kbn-rule-data-utils", "@kbn/securitysolution-autocomplete": "link:bazel-bin/packages/kbn-securitysolution-autocomplete", "@kbn/securitysolution-es-utils": "link:bazel-bin/packages/kbn-securitysolution-es-utils", diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel index ace4f982b8515..b52fb056380ee 100644 --- a/packages/BUILD.bazel +++ b/packages/BUILD.bazel @@ -36,6 +36,7 @@ filegroup( "//packages/kbn-optimizer:build", "//packages/kbn-plugin-generator:build", "//packages/kbn-plugin-helpers:build", + "//packages/kbn-react-field:build", "//packages/kbn-rule-data-utils:build", "//packages/kbn-securitysolution-autocomplete:build", "//packages/kbn-securitysolution-list-constants:build", diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts index 9a0863237fab1..6a76e23b7b3e9 100644 --- a/packages/kbn-optimizer/src/worker/webpack.config.ts +++ b/packages/kbn-optimizer/src/worker/webpack.config.ts @@ -28,6 +28,14 @@ const IS_CODE_COVERAGE = !!process.env.CODE_COVERAGE; const ISTANBUL_PRESET_PATH = require.resolve('@kbn/babel-preset/istanbul_preset'); const BABEL_PRESET_PATH = require.resolve('@kbn/babel-preset/webpack_preset'); +const nodeModulesButNotKbnPackages = (path: string) => { + if (!path.includes('node_modules')) { + return false; + } + + return !path.includes(`node_modules${Path.sep}@kbn${Path.sep}`); +}; + export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: WorkerConfig) { const ENTRY_CREATOR = require.resolve('./entry_point_creator'); @@ -134,7 +142,7 @@ export function getWebpackConfig(bundle: Bundle, bundleRefs: BundleRefs, worker: }, { test: /\.scss$/, - exclude: /node_modules/, + exclude: nodeModulesButNotKbnPackages, oneOf: [ ...worker.themeTags.map((theme) => ({ resourceQuery: `?${theme}`, diff --git a/packages/kbn-react-field/BUILD.bazel b/packages/kbn-react-field/BUILD.bazel new file mode 100644 index 0000000000000..15964ee748f5b --- /dev/null +++ b/packages/kbn-react-field/BUILD.bazel @@ -0,0 +1,119 @@ +load("@npm//@bazel/typescript:index.bzl", "ts_config", "ts_project") +load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_npm") +load("//src/dev/bazel:index.bzl", "jsts_transpiler") + +PKG_BASE_NAME = "kbn-react-field" +PKG_REQUIRE_NAME = "@kbn/react-field" + +SOURCE_FILES = glob( + [ + "src/**/*.ts", + "src/**/*.tsx", + "src/**/*.scss", + "src/**/*.svg", + ], + exclude = [ + "**/*.test.*", + "**/__fixtures__/**", + "**/__snapshots__/**", + ], +) + +SRCS = SOURCE_FILES + +filegroup( + name = "srcs", + srcs = SRCS, +) + +NPM_MODULE_EXTRA_FILES = [ + "package.json", + "README.md" +] + +RUNTIME_DEPS = [ + "@npm//prop-types", + "@npm//react", + "@npm//classnames", + "@npm//@elastic/eui", + "//packages/kbn-i18n", +] + +TYPES_DEPS = [ + "//packages/kbn-babel-preset", + "//packages/kbn-i18n", + "@npm//tslib", + "@npm//@types/jest", + "@npm//@types/prop-types", + "@npm//@types/classnames", + "@npm//@types/react", + "@npm//@elastic/eui", + "@npm//resize-observer-polyfill", +] + +jsts_transpiler( + name = "target_webpack", + srcs = SRCS, + build_pkg_name = package_name(), + web = True, + additional_args = [ + "--copy-files", + "--quiet" + ], +) + +jsts_transpiler( + name = "target_node", + srcs = SRCS, + build_pkg_name = package_name(), + 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, + declaration_map = True, + emit_declaration_only = True, + out_dir = "target_types", + source_map = True, + root_dir = "src", + tsconfig = ":tsconfig", +) + +js_library( + name = PKG_BASE_NAME, + srcs = NPM_MODULE_EXTRA_FILES, + deps = RUNTIME_DEPS + [":target_node", ":target_webpack", ":tsc_types"], + package_name = PKG_REQUIRE_NAME, + visibility = ["//visibility:public"], +) + +pkg_npm( + name = "npm_module", + deps = [ + ":%s" % PKG_BASE_NAME, + ] +) + +filegroup( + name = "build", + srcs = [ + ":npm_module", + ], + visibility = ["//visibility:public"], +) diff --git a/packages/kbn-react-field/README.md b/packages/kbn-react-field/README.md new file mode 100644 index 0000000000000..279c10b3aaecf --- /dev/null +++ b/packages/kbn-react-field/README.md @@ -0,0 +1 @@ +Sharable field type related React components diff --git a/packages/kbn-react-field/jest.config.js b/packages/kbn-react-field/jest.config.js new file mode 100644 index 0000000000000..1549cd0071356 --- /dev/null +++ b/packages/kbn-react-field/jest.config.js @@ -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: ['/packages/kbn-react-field'], +}; diff --git a/packages/kbn-react-field/package.json b/packages/kbn-react-field/package.json new file mode 100644 index 0000000000000..3cbfdfa010ba0 --- /dev/null +++ b/packages/kbn-react-field/package.json @@ -0,0 +1,9 @@ +{ + "name": "@kbn/react-field", + "main": "./target_node/index.js", + "browser": "./target_webpack/index.js", + "types": "./target_types/index.d.ts", + "version": "1.0.0", + "license": "SSPL-1.0 OR Elastic License 2.0", + "private": true +} \ No newline at end of file diff --git a/packages/kbn-react-field/src/field_button/__snapshots__/field_button.test.tsx.snap b/packages/kbn-react-field/src/field_button/__snapshots__/field_button.test.tsx.snap new file mode 100644 index 0000000000000..e65b5fcb8fbbd --- /dev/null +++ b/packages/kbn-react-field/src/field_button/__snapshots__/field_button.test.tsx.snap @@ -0,0 +1,134 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`fieldAction is rendered 1`] = ` +
+ +
+ + fieldAction + +
+
+`; + +exports[`fieldIcon is rendered 1`] = ` +
+ +
+`; + +exports[`isActive defaults to false 1`] = ` +
+ +
+`; + +exports[`isActive renders true 1`] = ` +
+ +
+`; + +exports[`isDraggable is rendered 1`] = ` +
+ +
+`; + +exports[`sizes m is applied 1`] = ` +
+ +
+`; + +exports[`sizes s is applied 1`] = ` +
+ +
+`; diff --git a/packages/kbn-react-field/src/field_button/field_button.scss b/packages/kbn-react-field/src/field_button/field_button.scss new file mode 100644 index 0000000000000..f71e097ab7138 --- /dev/null +++ b/packages/kbn-react-field/src/field_button/field_button.scss @@ -0,0 +1,76 @@ +.kbnFieldButton { + @include euiFontSizeS; + border-radius: $euiBorderRadius; + margin-bottom: $euiSizeXS; + display: flex; + align-items: center; + transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance, + background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation + + &:focus-within, + &-isActive { + @include euiFocusRing; + } +} + +.kbnFieldButton--isDraggable { + background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade); + + &:hover, + &:focus, + &:focus-within { + @include euiBottomShadowMedium; + border-radius: $euiBorderRadius; + z-index: 2; + } + + .kbnFieldButton__button { + &:hover, + &:focus { + cursor: grab; + } + } +} + +.kbnFieldButton__button { + flex-grow: 1; + text-align: left; + padding: $euiSizeS; + display: flex; + align-items: flex-start; + line-height: normal; +} + +.kbnFieldButton__fieldIcon { + flex-shrink: 0; + line-height: 0; + margin-right: $euiSizeS; +} + +.kbnFieldButton__name { + flex-grow: 1; + word-break: break-word; +} + +.kbnFieldButton__infoIcon { + flex-shrink: 0; + margin-left: $euiSizeXS; +} + +.kbnFieldButton__fieldAction { + margin-right: $euiSizeS; +} + +// Reduce text size and spacing for the small size +.kbnFieldButton--small { + font-size: $euiFontSizeXS; + + .kbnFieldButton__button { + padding: $euiSizeXS; + } + + .kbnFieldButton__fieldIcon, + .kbnFieldButton__fieldAction { + margin-right: $euiSizeXS; + } +} diff --git a/packages/kbn-react-field/src/field_button/field_button.test.tsx b/packages/kbn-react-field/src/field_button/field_button.test.tsx new file mode 100644 index 0000000000000..e61b41187ba7e --- /dev/null +++ b/packages/kbn-react-field/src/field_button/field_button.test.tsx @@ -0,0 +1,58 @@ +/* + * 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. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { FieldButton, SIZES } from './field_button'; + +const noop = () => {}; + +describe('sizes', () => { + SIZES.forEach((size) => { + test(`${size} is applied`, () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); + }); +}); + +describe('isDraggable', () => { + it('is rendered', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); +}); + +describe('fieldIcon', () => { + it('is rendered', () => { + const component = shallow( + fieldIcon} /> + ); + expect(component).toMatchSnapshot(); + }); +}); + +describe('fieldAction', () => { + it('is rendered', () => { + const component = shallow( + fieldAction} /> + ); + expect(component).toMatchSnapshot(); + }); +}); + +describe('isActive', () => { + it('defaults to false', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); + it('renders true', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); +}); diff --git a/packages/kbn-react-field/src/field_button/field_button.tsx b/packages/kbn-react-field/src/field_button/field_button.tsx new file mode 100644 index 0000000000000..4871fea049710 --- /dev/null +++ b/packages/kbn-react-field/src/field_button/field_button.tsx @@ -0,0 +1,125 @@ +/* + * 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. + */ + +import './field_button.scss'; +import classNames from 'classnames'; +import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react'; +import { CommonProps } from '@elastic/eui'; + +export interface FieldButtonProps extends HTMLAttributes { + /** + * Label for the button + */ + fieldName: ReactNode; + /** + * Icon representing the field type. + * Recommend using FieldIcon + */ + fieldIcon?: ReactNode; + /** + * An optional node to place inside and at the end of the + ) : ( +
+ {innerContent} +
+ )} + + {fieldAction &&
{fieldAction}
} + + ); +} diff --git a/packages/kbn-react-field/src/field_button/index.ts b/packages/kbn-react-field/src/field_button/index.ts new file mode 100644 index 0000000000000..17c2321c00407 --- /dev/null +++ b/packages/kbn-react-field/src/field_button/index.ts @@ -0,0 +1,9 @@ +/* + * 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 { FieldButton, FieldButtonProps, ButtonSize } from './field_button'; diff --git a/packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap b/packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap new file mode 100644 index 0000000000000..f6870a5209c1e --- /dev/null +++ b/packages/kbn-react-field/src/field_icon/__snapshots__/field_icon.test.tsx.snap @@ -0,0 +1,190 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FieldIcon changes fill when scripted is true 1`] = ` + +`; + +exports[`FieldIcon renders an icon for an unknown type 1`] = ` + +`; + +exports[`FieldIcon renders known field types _source is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types boolean is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types conflict is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types date is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types date_range is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types geo_point is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types geo_shape is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types ip is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types ip_range is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types murmur3 is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types nested is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types number is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types number_range is rendered 1`] = ` + +`; + +exports[`FieldIcon renders known field types string is rendered 1`] = ` + +`; + +exports[`FieldIcon renders with className if provided 1`] = ` + +`; + +exports[`FieldIcon supports same props as EuiToken 1`] = ` + +`; diff --git a/packages/kbn-react-field/src/field_icon/field_icon.test.tsx b/packages/kbn-react-field/src/field_icon/field_icon.test.tsx new file mode 100644 index 0000000000000..cfc67592cd5ea --- /dev/null +++ b/packages/kbn-react-field/src/field_icon/field_icon.test.tsx @@ -0,0 +1,51 @@ +/* + * 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. + */ + +import React from 'react'; +import { shallow } from 'enzyme'; +import { FieldIcon, typeToEuiIconMap } from './field_icon'; + +const availableTypes = Object.keys(typeToEuiIconMap); + +describe('FieldIcon renders known field types', () => { + availableTypes.forEach((type) => { + test(`${type} is rendered`, () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); + }); +}); + +test('FieldIcon renders an icon for an unknown type', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); + +test('FieldIcon supports same props as EuiToken', () => { + const component = shallow( + + ); + expect(component).toMatchSnapshot(); +}); + +test('FieldIcon changes fill when scripted is true', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); + +test('FieldIcon renders with className if provided', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); +}); diff --git a/packages/kbn-react-field/src/field_icon/field_icon.tsx b/packages/kbn-react-field/src/field_icon/field_icon.tsx new file mode 100644 index 0000000000000..cd3c7ee9e7a99 --- /dev/null +++ b/packages/kbn-react-field/src/field_icon/field_icon.tsx @@ -0,0 +1,80 @@ +/* + * 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. + */ + +import React from 'react'; +import classNames from 'classnames'; +import { EuiToken, EuiTokenProps } from '@elastic/eui'; + +export interface FieldIconProps extends Omit { + type: + | 'boolean' + | 'conflict' + | 'date' + | 'date_range' + | 'geo_point' + | 'geo_shape' + | 'ip' + | 'ip_range' + | 'murmur3' + | 'number' + | 'number_range' + | '_source' + | 'string' + | string + | 'nested'; + label?: string; + scripted?: boolean; +} + +// defaultIcon => a unknown datatype +const defaultIcon = { iconType: 'questionInCircle', color: 'gray' }; + +export const typeToEuiIconMap: Partial> = { + boolean: { iconType: 'tokenBoolean' }, + // icon for an index pattern mapping conflict in discover + conflict: { iconType: 'alert', color: 'euiColorVis9', shape: 'square' }, + date: { iconType: 'tokenDate' }, + date_range: { iconType: 'tokenDate' }, + geo_point: { iconType: 'tokenGeo' }, + geo_shape: { iconType: 'tokenGeo' }, + ip: { iconType: 'tokenIP' }, + ip_range: { iconType: 'tokenIP' }, + // is a plugin's data type https://www.elastic.co/guide/en/elasticsearch/plugins/current/mapper-murmur3-usage.html + murmur3: { iconType: 'tokenFile' }, + number: { iconType: 'tokenNumber' }, + number_range: { iconType: 'tokenNumber' }, + _source: { iconType: 'editorCodeBlock', color: 'gray' }, + string: { iconType: 'tokenString' }, + nested: { iconType: 'tokenNested' }, +}; + +/** + * Field token icon used across the app + */ +export function FieldIcon({ + type, + label, + size = 's', + scripted, + className, + ...rest +}: FieldIconProps) { + const token = typeToEuiIconMap[type] || defaultIcon; + + return ( + + ); +} diff --git a/packages/kbn-react-field/src/field_icon/index.ts b/packages/kbn-react-field/src/field_icon/index.ts new file mode 100644 index 0000000000000..431525fc8e428 --- /dev/null +++ b/packages/kbn-react-field/src/field_icon/index.ts @@ -0,0 +1,9 @@ +/* + * 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 { FieldIcon, FieldIconProps } from './field_icon'; diff --git a/packages/kbn-react-field/src/index.ts b/packages/kbn-react-field/src/index.ts new file mode 100644 index 0000000000000..af50b139a2918 --- /dev/null +++ b/packages/kbn-react-field/src/index.ts @@ -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 { FieldIconProps, FieldIcon } from './field_icon'; +export { FieldButtonProps, ButtonSize, FieldButton } from './field_button'; diff --git a/packages/kbn-react-field/tsconfig.json b/packages/kbn-react-field/tsconfig.json new file mode 100644 index 0000000000000..90c8a63c746f1 --- /dev/null +++ b/packages/kbn-react-field/tsconfig.json @@ -0,0 +1,23 @@ +{ + "extends": "../../tsconfig.bazel.json", + "compilerOptions": { + "declaration": true, + "declarationMap": true, + "emitDeclarationOnly": true, + "outDir": "./target_types", + "sourceMap": true, + "sourceRoot": "../../../../../packages/kbn-react-field/src", + "types": [ + "jest", + "node", + "resize-observer-polyfill" + ] + }, + "include": [ + "src/**/*.ts", + "src/**/*.tsx", + ], + "exclude": [ + "**/__fixtures__/**/*" + ] +} diff --git a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx index 707514073e23e..71b74836ad4fc 100644 --- a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx +++ b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx @@ -23,8 +23,8 @@ import { import { i18n } from '@kbn/i18n'; import { UiCounterMetricType } from '@kbn/analytics'; import classNames from 'classnames'; +import { FieldIcon, FieldButton } from '@kbn/react-field'; import { DiscoverFieldDetails } from './discover_field_details'; -import { FieldIcon, FieldButton } from '../../../../../../../kibana_react/public'; import { FieldDetails } from './types'; import { IndexPatternField, IndexPattern } from '../../../../../../../data/public'; import { getFieldTypeName } from './lib/get_field_type_name'; diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 0e8ca31f6379a..47400ebdf0f53 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -11,7 +11,7 @@ import './field_name.scss'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { FieldIcon, FieldIconProps } from '../../../../../kibana_react/public'; +import { FieldIcon, FieldIconProps } from '@kbn/react-field'; import { getFieldTypeName } from './field_type_name'; import { IndexPatternField } from '../../../../../data/public'; import { getFieldSubtypeMulti } from '../../../../../data/common'; diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index 6fccb804c357f..30fffd57f5987 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/src/plugins/kibana_react/public/index.ts @@ -16,8 +16,6 @@ export * from './context'; export * from './overview_page'; export * from './overlays'; export * from './ui_settings'; -export * from './field_icon'; -export * from './field_button'; export * from './table_list_view'; export * from './toolbar_button'; export * from './split_panel'; diff --git a/x-pack/plugins/canvas/shareable_runtime/webpack.config.js b/x-pack/plugins/canvas/shareable_runtime/webpack.config.js index dc516060ea360..7db6bf8948f8b 100644 --- a/x-pack/plugins/canvas/shareable_runtime/webpack.config.js +++ b/x-pack/plugins/canvas/shareable_runtime/webpack.config.js @@ -18,6 +18,14 @@ const { const isProd = process.env.NODE_ENV === 'production'; +const nodeModulesButNotKbnPackages = (_path) => { + if (!_path.includes('node_modules')) { + return false; + } + + return !_path.includes(`node_modules${path.sep}@kbn${path.sep}`); +}; + module.exports = { context: KIBANA_ROOT, entry: { @@ -124,7 +132,7 @@ module.exports = { }, { test: /\.scss$/, - exclude: [/node_modules/, /\.module\.s(a|c)ss$/], + exclude: [nodeModulesButNotKbnPackages, /\.module\.s(a|c)ss$/], use: [ { loader: 'style-loader', diff --git a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx index d4ccfe66dc7d4..aa032060db440 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx +++ b/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx @@ -25,11 +25,11 @@ import { EuiIconTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FieldIcon } from '@kbn/react-field'; import classNames from 'classnames'; import { WorkspaceField } from '../../types'; import { iconChoices } from '../../helpers/style_choices'; import { LegacyIcon } from '../legacy_icon'; -import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public'; import { UpdateableFieldProperties } from './field_manager'; import { isEqual } from '../helpers'; diff --git a/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx index a764c0241938b..bb451211efd52 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx +++ b/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx @@ -9,8 +9,8 @@ import React, { useState, useEffect, ReactNode } from 'react'; import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; +import { FieldIcon } from '@kbn/react-field'; import { WorkspaceField } from '../../types'; -import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public'; export interface FieldPickerProps { fieldMap: Record; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index 9c22ec9d4bb05..db65916ad0754 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -36,6 +36,7 @@ import { TooltipType, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; +import { FieldButton } from '@kbn/react-field'; import type { FieldFormatsStart } from 'src/plugins/field_formats/public'; import { EuiHighlight } from '@elastic/eui'; import { @@ -45,7 +46,6 @@ import { Filter, esQuery, } from '../../../../../src/plugins/data/public'; -import { FieldButton } from '../../../../../src/plugins/kibana_react/public'; import { ChartsPluginSetup } from '../../../../../src/plugins/charts/public'; import { DragDrop, DragDropIdentifier } from '../drag_drop'; import { DatasourceDataPanelProps, DataType } from '../types'; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx index edb6957fcf0b2..5bb52a9ba639f 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { FieldIcon, FieldIconProps } from '../../../../../src/plugins/kibana_react/public'; +import { FieldIcon, FieldIconProps } from '@kbn/react-field'; import { DataType } from '../types'; import { normalizeOperationDataType } from './utils'; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 77ff783f72e95..9100fd8d9b5d3 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -16,9 +16,9 @@ import { EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FieldIcon } from '@kbn/react-field'; import _ from 'lodash'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; -import { FieldIcon } from '../../../../../../../src/plugins/kibana_react/public'; import { MVT_FIELD_TYPE } from '../../../../common/constants'; function makeOption({ diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx index 74269f39bc36c..8f61bfd35be85 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx @@ -16,8 +16,8 @@ import { EuiFlexItem, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; +import { FieldIcon } from '@kbn/react-field'; import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants'; -import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public'; import { StyleField } from '../style_fields_helper'; function renderOption( diff --git a/x-pack/plugins/maps/public/components/single_field_select.tsx b/x-pack/plugins/maps/public/components/single_field_select.tsx index 67594db11eb37..8585ed46d3044 100644 --- a/x-pack/plugins/maps/public/components/single_field_select.tsx +++ b/x-pack/plugins/maps/public/components/single_field_select.tsx @@ -17,8 +17,8 @@ import { EuiFlexItem, EuiToolTip, } from '@elastic/eui'; +import { FieldIcon } from '@kbn/react-field'; import { IndexPatternField } from 'src/plugins/data/public'; -import { FieldIcon } from '../../../../../src/plugins/kibana_react/public'; function fieldsToOptions( fields?: IndexPatternField[], diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx index 3804e3873b47e..28cca4b2f6716 100644 --- a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx +++ b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx @@ -21,7 +21,7 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { FieldIcon } from '../../../../../../src/plugins/kibana_react/public'; +import { FieldIcon } from '@kbn/react-field'; export type FieldProps = { label: string; diff --git a/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts b/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts index a77ddaee9f250..bd72d4eb91353 100644 --- a/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts +++ b/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts @@ -7,6 +7,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; +import { FieldIcon } from '@kbn/react-field'; import { KibanaContextProvider, KibanaReactContextValue, @@ -15,7 +16,6 @@ import { useUiSetting$, withKibana, reactRouterNavigate, - FieldIcon, } from '../../../../../../../src/plugins/kibana_react/public'; import { StartServices } from '../../../types'; diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx index 327d8d963c75e..4a1cbf34990c8 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx @@ -8,8 +8,8 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip } from '@elastic/eui'; import { isEmpty } from 'lodash'; +import { FieldIcon } from '@kbn/react-field'; import * as i18n from '../translations'; -import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public'; import { IndexPatternField } from '../../../../../../../../src/plugins/data/public'; import { getExampleText } from '../helpers'; import { BrowserField } from '../../../containers/source'; diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx index 6fc10da5962ca..715246c801e5c 100644 --- a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx +++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx @@ -14,8 +14,8 @@ import { EuiFlexGroup, EuiFlexItem, } from '@elastic/eui'; +import { FieldIcon } from '@kbn/react-field'; import { IFieldType } from 'src/plugins/data/public'; -import { FieldIcon } from '../../../../../../../../src/plugins/kibana_react/public'; function fieldsToOptions(fields?: IFieldType[]): Array> { if (!fields) { diff --git a/yarn.lock b/yarn.lock index e5e2f59359c9f..8af53b75a4bb2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3828,6 +3828,10 @@ version "0.0.0" uid "" +"@kbn/react-field@link:bazel-bin/packages/kbn-react-field": + version "0.0.0" + uid "" + "@kbn/rule-data-utils@link:bazel-bin/packages/kbn-rule-data-utils": version "0.0.0" uid "" From b4a1520687ad034dc2f2a0603229595b2257b94e Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Tue, 19 Oct 2021 11:22:11 +0200 Subject: [PATCH 3/7] update codeowners & limits --- .github/CODEOWNERS | 1 + packages/kbn-optimizer/limits.yml | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ec03acc752d55..798ff948ad1f2 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -61,6 +61,7 @@ /examples/partial_results_example/ @elastic/kibana-app-services /packages/elastic-datemath/ @elastic/kibana-app-services /packages/kbn-interpreter/ @elastic/kibana-app-services +/packages/kbn-react-field/ @elastic/kibana-app-services /src/plugins/bfetch/ @elastic/kibana-app-services /src/plugins/data/ @elastic/kibana-app-services /src/plugins/data_views/ @elastic/kibana-app-services diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index d1491ba63e6e6..41ccf0a8dda6e 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/packages/kbn-optimizer/limits.yml @@ -104,7 +104,7 @@ pageLoadAssetSize: dataViews: 41532 expressions: 140958 fieldFormats: 65209 - kibanaReact: 84422 + kibanaReact: 74422 share: 71239 uiActions: 35121 dataEnhanced: 24980 From eb5ac447b04b88166845bf0ef92434d95f31ca43 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Tue, 19 Oct 2021 13:52:36 +0200 Subject: [PATCH 4/7] improve code splitting --- packages/kbn-react-field/BUILD.bazel | 4 +++- packages/kbn-react-field/field_button/package.json | 5 +++++ packages/kbn-react-field/field_icon/package.json | 5 +++++ .../apps/main/components/sidebar/discover_field.tsx | 3 ++- .../public/application/components/field_name/field_name.tsx | 2 +- .../graph/public/components/field_manager/field_editor.tsx | 2 +- .../graph/public/components/field_manager/field_picker.tsx | 2 +- .../lens/public/indexpattern_datasource/field_item.tsx | 2 +- .../lens/public/indexpattern_datasource/lens_field_icon.tsx | 2 +- .../mvt_field_config_editor.tsx | 2 +- .../public/classes/styles/vector/components/field_select.tsx | 2 +- .../plugins/maps/public/components/single_field_select.tsx | 2 +- .../tooltip_selector/add_tooltip_field_popover.tsx | 2 +- .../plugins/osquery/public/common/lib/kibana/kibana_react.ts | 2 +- .../components/event_details/table/field_name_cell.tsx | 2 +- .../query_builder/util_components/single_field_select.tsx | 2 +- 16 files changed, 27 insertions(+), 14 deletions(-) create mode 100644 packages/kbn-react-field/field_button/package.json create mode 100644 packages/kbn-react-field/field_icon/package.json diff --git a/packages/kbn-react-field/BUILD.bazel b/packages/kbn-react-field/BUILD.bazel index 15964ee748f5b..9cb2df76bd6c9 100644 --- a/packages/kbn-react-field/BUILD.bazel +++ b/packages/kbn-react-field/BUILD.bazel @@ -28,7 +28,9 @@ filegroup( NPM_MODULE_EXTRA_FILES = [ "package.json", - "README.md" + "README.md", + "field_button/package.json", + "field_icon/package.json", ] RUNTIME_DEPS = [ diff --git a/packages/kbn-react-field/field_button/package.json b/packages/kbn-react-field/field_button/package.json new file mode 100644 index 0000000000000..dd708dd5cd32d --- /dev/null +++ b/packages/kbn-react-field/field_button/package.json @@ -0,0 +1,5 @@ +{ + "main": "../target_node/field_button/index.js", + "browser": "../target_webpack/field_button/index.js", + "types": "../target_types/field_button/index.d.ts" +} \ No newline at end of file diff --git a/packages/kbn-react-field/field_icon/package.json b/packages/kbn-react-field/field_icon/package.json new file mode 100644 index 0000000000000..e7220f60e5d29 --- /dev/null +++ b/packages/kbn-react-field/field_icon/package.json @@ -0,0 +1,5 @@ +{ + "main": "../target_node/field_icon/index.js", + "browser": "../target_webpack/field_icon/index.js", + "types": "../target_types/field_icon/index.d.ts" +} \ No newline at end of file diff --git a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx index 71b74836ad4fc..6e51bcdadfa48 100644 --- a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx +++ b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_field.tsx @@ -23,7 +23,8 @@ import { import { i18n } from '@kbn/i18n'; import { UiCounterMetricType } from '@kbn/analytics'; import classNames from 'classnames'; -import { FieldIcon, FieldButton } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; +import { FieldButton } from '@kbn/react-field/field_button'; import { DiscoverFieldDetails } from './discover_field_details'; import { FieldDetails } from './types'; import { IndexPatternField, IndexPattern } from '../../../../../../../data/public'; diff --git a/src/plugins/discover/public/application/components/field_name/field_name.tsx b/src/plugins/discover/public/application/components/field_name/field_name.tsx index 47400ebdf0f53..a8952b0de1c07 100644 --- a/src/plugins/discover/public/application/components/field_name/field_name.tsx +++ b/src/plugins/discover/public/application/components/field_name/field_name.tsx @@ -11,7 +11,7 @@ import './field_name.scss'; import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { FieldIcon, FieldIconProps } from '@kbn/react-field'; +import { FieldIcon, FieldIconProps } from '@kbn/react-field/field_icon'; import { getFieldTypeName } from './field_type_name'; import { IndexPatternField } from '../../../../../data/public'; import { getFieldSubtypeMulti } from '../../../../../data/common'; diff --git a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx index aa032060db440..138e4fe5060a4 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx +++ b/x-pack/plugins/graph/public/components/field_manager/field_editor.tsx @@ -25,7 +25,7 @@ import { EuiIconTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import classNames from 'classnames'; import { WorkspaceField } from '../../types'; import { iconChoices } from '../../helpers/style_choices'; diff --git a/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx index bb451211efd52..7728c67f89a82 100644 --- a/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx +++ b/x-pack/plugins/graph/public/components/field_manager/field_picker.tsx @@ -9,7 +9,7 @@ import React, { useState, useEffect, ReactNode } from 'react'; import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import classNames from 'classnames'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { WorkspaceField } from '../../types'; export interface FieldPickerProps { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index db65916ad0754..fb67ab7a7991e 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -36,7 +36,7 @@ import { TooltipType, } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { FieldButton } from '@kbn/react-field'; +import { FieldButton } from '@kbn/react-field/field_button'; import type { FieldFormatsStart } from 'src/plugins/field_formats/public'; import { EuiHighlight } from '@elastic/eui'; import { diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx index 5bb52a9ba639f..fa4d3e5e1513d 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/lens_field_icon.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { FieldIcon, FieldIconProps } from '@kbn/react-field'; +import { FieldIcon, FieldIconProps } from '@kbn/react-field/field_icon'; import { DataType } from '../types'; import { normalizeOperationDataType } from './utils'; diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx index 9100fd8d9b5d3..e23d7ca3f255a 100644 --- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx +++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/mvt_field_config_editor.tsx @@ -16,7 +16,7 @@ import { EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import _ from 'lodash'; import { MVTFieldDescriptor } from '../../../../common/descriptor_types'; import { MVT_FIELD_TYPE } from '../../../../common/constants'; diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx index 8f61bfd35be85..e90bf5b2339d0 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx @@ -16,7 +16,7 @@ import { EuiFlexItem, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants'; import { StyleField } from '../style_fields_helper'; diff --git a/x-pack/plugins/maps/public/components/single_field_select.tsx b/x-pack/plugins/maps/public/components/single_field_select.tsx index 8585ed46d3044..9b7f5d12725a5 100644 --- a/x-pack/plugins/maps/public/components/single_field_select.tsx +++ b/x-pack/plugins/maps/public/components/single_field_select.tsx @@ -17,7 +17,7 @@ import { EuiFlexItem, EuiToolTip, } from '@elastic/eui'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { IndexPatternField } from 'src/plugins/data/public'; function fieldsToOptions( diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx index 28cca4b2f6716..3c702b1334272 100644 --- a/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx +++ b/x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx @@ -21,7 +21,7 @@ import { } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; export type FieldProps = { label: string; diff --git a/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts b/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts index bd72d4eb91353..affefda1e61e0 100644 --- a/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts +++ b/x-pack/plugins/osquery/public/common/lib/kibana/kibana_react.ts @@ -7,7 +7,7 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { KibanaContextProvider, KibanaReactContextValue, diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx index 4a1cbf34990c8..72dd537cfb2bc 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx +++ b/x-pack/plugins/security_solution/public/common/components/event_details/table/field_name_cell.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiText, EuiToolTip } from '@elastic/eui'; import { isEmpty } from 'lodash'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import * as i18n from '../translations'; import { IndexPatternField } from '../../../../../../../../src/plugins/data/public'; import { getExampleText } from '../helpers'; diff --git a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx index 715246c801e5c..a3c58664555db 100644 --- a/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx +++ b/x-pack/plugins/stack_alerts/public/alert_types/geo_containment/query_builder/util_components/single_field_select.tsx @@ -14,7 +14,7 @@ import { EuiFlexGroup, EuiFlexItem, } from '@elastic/eui'; -import { FieldIcon } from '@kbn/react-field'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { IFieldType } from 'src/plugins/data/public'; function fieldsToOptions(fields?: IFieldType[]): Array> { From 0c0eec1a585ac02e2e9a37f879c7a545468c8539 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Mon, 25 Oct 2021 11:32:03 +0200 Subject: [PATCH 5/7] fix imports --- .../public/components/field_picker/field_picker.tsx | 3 ++- .../public/components/field_picker/field_search.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index bbdf389ccee14..31e5a4d24e08d 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -10,9 +10,10 @@ import React, { useState } from 'react'; import { sortBy, uniq } from 'lodash'; import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiTitle, EuiText } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n/react'; +import { FieldIcon } from '@kbn/react-field/field_icon'; +import { FieldButton } from '@kbn/react-field/field_button'; import { DataView, DataViewField } from '../../../../data_views/common'; -import { FieldIcon, FieldButton } from '../../../../kibana_react/public'; import { FieldSearch } from './field_search'; diff --git a/src/plugins/presentation_util/public/components/field_picker/field_search.tsx b/src/plugins/presentation_util/public/components/field_picker/field_search.tsx index d3c6c728b3d08..7840cb2d9a168 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_search.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_search.tsx @@ -20,8 +20,8 @@ import { EuiFilterButton, EuiSpacer, } from '@elastic/eui'; +import { FieldIcon } from '@kbn/react-field/field_icon'; import { FormattedMessage } from '@kbn/i18n/react'; -import { FieldIcon } from '../../../../kibana_react/public'; export interface Props { onSearchChange: (value: string) => void; From 261d35bc621b21a2354e9170ca0bee7393a6b525 Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Wed, 27 Oct 2021 11:44:06 +0200 Subject: [PATCH 6/7] Update packages/kbn-react-field/README.md Co-authored-by: Jean-Louis Leysens --- packages/kbn-react-field/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/kbn-react-field/README.md b/packages/kbn-react-field/README.md index 279c10b3aaecf..12e118cadd09d 100644 --- a/packages/kbn-react-field/README.md +++ b/packages/kbn-react-field/README.md @@ -1 +1 @@ -Sharable field type related React components +Shareable field type related React components From 110bb8773adf1b88b89dfefdf7ea8b42b70c2d4a Mon Sep 17 00:00:00 2001 From: Anton Dosov Date: Mon, 8 Nov 2021 15:16:49 +0100 Subject: [PATCH 7/7] fix exports --- packages/kbn-react-field/src/field_button/index.ts | 3 ++- packages/kbn-react-field/src/field_icon/index.ts | 3 ++- packages/kbn-react-field/src/index.ts | 6 ++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/kbn-react-field/src/field_button/index.ts b/packages/kbn-react-field/src/field_button/index.ts index 17c2321c00407..15857540baefc 100644 --- a/packages/kbn-react-field/src/field_button/index.ts +++ b/packages/kbn-react-field/src/field_button/index.ts @@ -6,4 +6,5 @@ * Side Public License, v 1. */ -export { FieldButton, FieldButtonProps, ButtonSize } from './field_button'; +export { FieldButton } from './field_button'; +export type { FieldButtonProps, ButtonSize } from './field_button'; diff --git a/packages/kbn-react-field/src/field_icon/index.ts b/packages/kbn-react-field/src/field_icon/index.ts index 431525fc8e428..fa70a445cdb24 100644 --- a/packages/kbn-react-field/src/field_icon/index.ts +++ b/packages/kbn-react-field/src/field_icon/index.ts @@ -6,4 +6,5 @@ * Side Public License, v 1. */ -export { FieldIcon, FieldIconProps } from './field_icon'; +export { FieldIcon } from './field_icon'; +export type { FieldIconProps } from './field_icon'; diff --git a/packages/kbn-react-field/src/index.ts b/packages/kbn-react-field/src/index.ts index af50b139a2918..fa7a34db3e879 100644 --- a/packages/kbn-react-field/src/index.ts +++ b/packages/kbn-react-field/src/index.ts @@ -6,5 +6,7 @@ * Side Public License, v 1. */ -export { FieldIconProps, FieldIcon } from './field_icon'; -export { FieldButtonProps, ButtonSize, FieldButton } from './field_button'; +export { FieldIcon } from './field_icon'; +export type { FieldIconProps } from './field_icon'; +export { FieldButton } from './field_button'; +export type { FieldButtonProps, ButtonSize } from './field_button';