diff --git a/.eslintignore b/.eslintignore index 6585ff5ebeea..61a5a1ef9086 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,6 +7,6 @@ types eui.d.ts **/*.snap.js **/assets/**/*.js +package.json src-docs/src/views/icon/icon_example.js -src-framer/code/canvas.tsx packages/react-datepicker/examples diff --git a/.npmignore b/.npmignore index 1538d294d5d7..d5cb84fcb18b 100644 --- a/.npmignore +++ b/.npmignore @@ -6,7 +6,6 @@ wiki/ generator-eui/ test/ src-docs/ -src-framer/ packages/react-datepicker packages/eslint-plugin .nvmrc diff --git a/CHANGELOG.md b/CHANGELOG.md index 0321a7067291..2d4624c7bccc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `initialSelected` to `EuiTableSelectionType` properties to set initial selected checkboxes for `EuiBasicTable` ([#3418](https://github.com/elastic/eui/pull/3418)) - Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471)) - Added `displayName` to components using `React.forwardRef` ([#3451](https://github.com/elastic/eui/pull/3451)) - Added event target checker for `EuiOverlayMask`'s `onClick` prop ([#3462](https://github.com/elastic/eui/pull/3462)) @@ -7,6 +8,17 @@ **Bug Fixes** - Fixed issue where multiple `EuiToolTip` components could be visible when element was focused ([#3335](https://github.com/elastic/eui/pull/3335)) +- Fixed `EuiSuperSelect` not rendering full width when `isOpen` is `true` ([#3495](https://github.com/elastic/eui/pull/3495)) +- Fixed `EuiBasicTable` shows no items if all items of last page is deleted ([#3422](https://github.com/elastic/eui/pull/3422)) +- Fixed TypeScript module name in generated `eui_charts_theme.d.ts` file ([#3492](https://github.com/elastic/eui/pull/3492)) + +**Deprecations** + +- Added a deprecation notice for `EuiNavDrawer` family of components. Advise usage of `EuiCollapsibleNav` instead ([#3487](https://github.com/elastic/eui/pull/3487)) + +**Notes** + +- Removed `src-framer` files from the repository ([#3487](https://github.com/elastic/eui/pull/3487)) ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0) diff --git a/package.json b/package.json index 6bcd0994f8d8..c731c751b447 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings", "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-sass", "lint-fix": "yarn lint-es-fix", - "lint-es": "eslint --cache '{src,src-docs,src-framer}/**/*.{ts,tsx,js}' --max-warnings 0", + "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0", "lint-es-fix": "yarn lint-es --fix", "lint-sass": "sass-lint -v --max-warnings 0", "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml", diff --git a/scripts/compile-eui.js b/scripts/compile-eui.js index ebda61cb8416..c48fddefbc2d 100755 --- a/scripts/compile-eui.js +++ b/scripts/compile-eui.js @@ -1,3 +1,23 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + + const { execSync } = require('child_process'); const chalk = require('chalk'); const shell = require('shelljs'); @@ -118,7 +138,13 @@ function compileBundle() { files: ['themes.ts'], resolveModuleId() { return '@elastic/eui/dist/eui_charts_theme'; - } + }, + resolveModuleImport(params) { + if (params.importedModuleId === '../../components/common') { + return '@elastic/eui/src/components/common'; + } + return null; + } }); console.log(chalk.green('✔ Finished chart theme module')); } diff --git a/scripts/dtsgenerator.js b/scripts/dtsgenerator.js index fe03bf5cd985..cbf0771f9a61 100644 --- a/scripts/dtsgenerator.js +++ b/scripts/dtsgenerator.js @@ -31,12 +31,11 @@ const generator = dtsGenerator({ exclude: [ 'node_modules/**/*.d.ts', '*/custom_typings/**/*.d.ts', - 'src-framer/**/*', '**/*.test.ts', '**/*.test.tsx', '**/*.testenv.ts', '**/*.testenv.tsx', - 'src/themes/charts/*' // A separate d.ts file is generated for the charts theme file + 'src/themes/charts/*', // A separate d.ts file is generated for the charts theme file ], resolveModuleId(params) { if ( diff --git a/src-docs/.eslintrc.js b/src-docs/.eslintrc.js index b46174a01cd8..0242d922ac54 100644 --- a/src-docs/.eslintrc.js +++ b/src-docs/.eslintrc.js @@ -3,5 +3,5 @@ module.exports = { rules: { '@typescript-eslint/no-var-requires': 'off', 'local/require-license-header': 'off', - } -} + }, +}; diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js index d0f2e2c7a51d..2d18cf4bc848 100644 --- a/src-docs/src/views/form_controls/display_toggles.js +++ b/src-docs/src/views/form_controls/display_toggles.js @@ -13,6 +13,8 @@ import { EuiSpacer, } from '../../../../src/components'; +import { SIZES } from '../../../../src/components/spacer/spacer'; + export class DisplayToggles extends Component { constructor(props) { super(props); @@ -50,6 +52,7 @@ export class DisplayToggles extends Component { canInvalid, children, extras, + spacerSize, } = this.props; const canProps = {}; @@ -66,7 +69,7 @@ export class DisplayToggles extends Component { return ( {cloneElement(children, canProps)} - + + + Set for deprecation. See details. + + +

+ Please use{' '} + + EuiCollapsableNav + {' '} + instead of EuiNavDrawer for your global navigation + needs. Feature enhancements are no longer being made to this + component. +

EuiNavDrawer provides a side navigation feature that is complete with interactions and a mobile-friendly design. It diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js index c84f86f21c41..6a149cb65f57 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection.js +++ b/src-docs/src/views/tables/in_memory/in_memory_selection.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, Fragment, useRef } from 'react'; import { formatDate } from '../../../../../src/services/format'; import { createDataStore } from '../data_store'; import { @@ -7,6 +7,9 @@ import { EuiButton, EuiInMemoryTable, EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, } from '../../../../../src/components'; import { Random } from '../../../../../src/services/random'; @@ -61,6 +64,7 @@ export const Table = () => { const [selection, setSelection] = useState([]); const [error, setError] = useState(); + const tableRef = useRef(); const loadUsers = () => { setMessage('Loading users...'); @@ -208,16 +212,33 @@ export const Table = () => { pageSizeOptions: [3, 5, 8], }; + const onlineUsers = store.users.filter(user => user.online); + const selectionValue = { selectable: user => user.online, selectableMessage: selectable => !selectable ? 'User is currently offline' : undefined, onSelectionChange: selection => setSelection(selection), + initialSelected: onlineUsers, + }; + + const onSelection = () => { + tableRef.current.setSelection(onlineUsers); }; return ( -

+ + + + Select online users + + + + + + { selection={selectionValue} isSelectable={true} /> -
+ ); }; diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_section.js b/src-docs/src/views/tables/in_memory/in_memory_selection_section.js index 09cb42f5dc57..c2b6ca2bf18b 100644 --- a/src-docs/src/views/tables/in_memory/in_memory_selection_section.js +++ b/src-docs/src/views/tables/in_memory/in_memory_selection_section.js @@ -1,4 +1,5 @@ import React from 'react'; +import { EuiCode } from '../../../../../src/components'; import { GuideSectionTypes } from '../../../components'; import { renderToHtml } from '../../../services'; @@ -22,7 +23,13 @@ export const selectionSection = {

The following example shows how to use EuiInMemoryTable{' '} along with item selection. It also shows how you can display messages, - errors and show loading indication. + errors and show loading indication. You can set items to be selected + initially by passing an array of items as the{' '} + initialSelected value inside{' '} + selection property. You can also use the{' '} + setSelection method to take complete control over table + selection. This can be useful if you want to handle selection in table + based on user interaction with another part of the UI.

), demo: , diff --git a/src-docs/src/views/tables/selection/selection.js b/src-docs/src/views/tables/selection/selection.js index c8c918f6aba6..592553093de3 100644 --- a/src-docs/src/views/tables/selection/selection.js +++ b/src-docs/src/views/tables/selection/selection.js @@ -1,4 +1,4 @@ -import React, { useState, Fragment } from 'react'; +import React, { useState, Fragment, useRef } from 'react'; import { formatDate } from '../../../../../src/services/format'; import { createDataStore } from '../data_store'; @@ -9,6 +9,7 @@ import { EuiButton, EuiFlexGroup, EuiFlexItem, + EuiSpacer, } from '../../../../../src/components'; /* @@ -41,6 +42,7 @@ export const Table = () => { const [sortField, setSortField] = useState('firstName'); const [sortDirection, setSortDirection] = useState('asc'); const [selectedItems, setSelectedItems] = useState([]); + const tableRef = useRef(); const onTableChange = ({ page = {}, sort = {} }) => { const { index: pageIndex, size: pageSize } = page; @@ -176,17 +178,34 @@ export const Table = () => { }, }; + const onlineUsers = store.users.filter(user => user.online); + const selection = { selectable: user => user.online, selectableMessage: selectable => !selectable ? 'User is currently offline' : undefined, onSelectionChange: onSelectionChange, + initialSelected: onlineUsers, + }; + + const onSelection = () => { + tableRef.current.setSelection(onlineUsers); }; return ( - {deleteButton} + + + Select online users + + + {deleteButton} + + + + The following example shows how to configure selection via the{' '} selection - property. + property. You can set items to be selected initially by passing an array + of items as the initialSelected value inside{' '} + selection property. You can also use the{' '} + setSelection method to take complete control over table + selection. This can be useful if you want to handle selection in table + based on user interaction with another part of the UI.

), components: { EuiBasicTable }, diff --git a/src-framer/.eslintrc.js b/src-framer/.eslintrc.js deleted file mode 100644 index 51629db733c4..000000000000 --- a/src-framer/.eslintrc.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - extends: '../.eslintrc.js', - rules: { - 'import/no-unresolved': ['error', { ignore: [ - '^framer$', - '^@elastic/eui/lib/', - '^!!raw-loader!', - ]}], - '@typescript-eslint/no-var-requires': 'off', - 'local/require-license-header': 'off', - } -} diff --git a/src-framer/README.md b/src-framer/README.md deleted file mode 100644 index dd8c2f7761e5..000000000000 --- a/src-framer/README.md +++ /dev/null @@ -1,37 +0,0 @@ -## Using EUI components in Framer X - -Install the [Elastic UI framework](https://store.framer.com/package/snide/elastic-ui-temp) package from the Framer store. - -Once installed, simply drag over the `_framer_helpers/theme` component onto your artboard to load the appropriate CSS. You'll need to do this before loading any other components on the page. - -![](https://d3vv6lp55qjaqc.cloudfront.net/items/1J012y3Z0t2K251U1R0u/Screen%20Recording%202018-10-30%20at%2003.22%20PM.gif?X-CloudApp-Visitor-Id=59773) - -### How to contribute new components to our store package - -The following are instructions for how to develop or edit the components we publish to the store. This step is not required if you merely wish to use the components. - -Make sure the latest EUI is cloned somewhere on your machine. - -1. Create a new brand new Framer project. -2. Open your terminal to the unpacked Framer folder within `~Library/Autosave Information/Framer-${HASH}/container/` -3. In the same `container` directory run `yarn add @elastic/eui raw-loader`. These files are required to work on the files. -4. In the same `container` directory remove the empty `code` directory using `rm -rf code`. We'll be replacing it with the development files contained in this repo. -5. Rsync the source files with `rsync -r ~/path-to-eui-repo/framer-src/code ./`. This will place the `eui/src-framer/code` directory inside of your `framer/container/` directory. -6. Reload Framer. Your framer project will now point to the files contained in EUI. -7. Commit your changes to EUI. - -Remember that the Framer container folder is just a node repo of it's own. If for some reason you need to edit the ACTUAL EUI components (possibly you see a bug in EUI that is effecting Framer) you can `yarn link` the repo over similarly as you would fixing an EUI issue in Kibana. - -### Framer component best practices - -* Try to keep the Framer property mappings as close to EUI properties as possible. -* When adding additional props for Framer that don't exist in EUI, utilize emojis (🧙 for magic!, ↳ for related children) and other visual signifiers to classify the distinction. -* In most cases it makes sense to replace the `children` prop from EUI components with something a Framer specific prop. Name those new props `childText` or something similar to remind people they are actually adding the child prop. You can see an example of this in the Button component. - -### Theming - -Like EUI, the Framer components support theming. The `_framer_helpers/theme.tsx` will define which CSS file is loaded onto the Framer page. - -### How to publish to the Framer store - -Currently, the Framer store is tied to individual user accounts. Contact one of the EUI admins and they'll point you in the right direction. diff --git a/src-framer/code/App.tsx b/src-framer/code/App.tsx deleted file mode 100644 index e239e313257d..000000000000 --- a/src-framer/code/App.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { Data, animate, Override, Animatable } from 'framer'; - -// eslint-disable-next-line new-cap -const data = Data({ scale: Animatable(1) }); - -export const Scale: Override = () => { - return { - scale: data.scale, - onTap() { - data.scale.set(0.6); - animate.spring(data.scale, 1); - }, - }; -}; diff --git a/src-framer/code/Examples.tsx b/src-framer/code/Examples.tsx deleted file mode 100644 index 30bcac9dd7a4..000000000000 --- a/src-framer/code/Examples.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Data, animate, Override, Animatable } from 'framer'; - -/* eslint-disable new-cap */ - -const data = Data({ - toggle: true, - scale: Animatable(1), - opacity: Animatable(1), - rotation: Animatable(0), - rotationY: Animatable(0), -}); - -export const Scale: Override = () => { - return { - scale: data.scale, - onTap() { - data.scale.set(0.6); - animate.spring(data.scale, 1); - }, - }; -}; - -export const Rotate: Override = (props: any) => { - data.rotation.set(props.rotation); - - return { - rotation: data.rotation, - onTap() { - animate.spring(data.rotation, data.rotation.get() + 90, { - tension: 250, - friction: 20, - }); - }, - }; -}; - -export const Fade: Override = (props: any) => { - data.opacity.set(props.opacity); - - return { - opacity: data.opacity, - onTap() { - animate.linear(data.opacity, 0, 0.2); - }, - }; -}; - -export const FlipOutput: Override = () => { - return { - rotationY: data.rotationY, - }; -}; - -export const FlipInput: Override = () => { - return { - onTap() { - const toggle = data.toggle; - animate.spring( - { rotationY: data.rotationY }, - { - rotationY: toggle ? 360 : 0, - }, - { tension: 200, friction: 20 } - ); - data.toggle = !toggle; - }, - }; -}; diff --git a/src-framer/code/_framer_helpers/frame_size.tsx b/src-framer/code/_framer_helpers/frame_size.tsx deleted file mode 100644 index 266f8def763e..000000000000 --- a/src-framer/code/_framer_helpers/frame_size.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { ControlType, PropertyControls } from 'framer'; -import * as React from 'react'; - -// Define type of property -interface Props { - frame?: boolean; -} - -export class FrameSize extends React.Component { - // Set default properties - static defaultProps = { - frame: true, - }; - - // Items shown in property panel - static propertyControls: PropertyControls = { - frame: { - type: ControlType.Boolean, - title: '🖍 Fit to frame', - }, - }; - - render() { - let optionallyFramedComponent; - if (this.props.frame) { - optionallyFramedComponent = ( -
- {this.props.children} -
- ); - } else { - optionallyFramedComponent = this.props.children; - } - return {optionallyFramedComponent}; - } -} diff --git a/src-framer/code/_framer_helpers/theme.tsx b/src-framer/code/_framer_helpers/theme.tsx deleted file mode 100644 index 4efc1d0e371c..000000000000 --- a/src-framer/code/_framer_helpers/theme.tsx +++ /dev/null @@ -1,46 +0,0 @@ -// @ts-ignore -import DarkCSS from '!!raw-loader!@elastic/eui/dist/eui_theme_dark.css'; -// @ts-ignore -import LightCSS from '!!raw-loader!@elastic/eui/dist/eui_theme_light.css'; -import { ControlType, PropertyControls } from 'framer'; -import * as React from 'react'; -import { FrameSize } from './frame_size'; - -// Define type of property -interface Props { - theme: string; -} - -export class Theme extends React.Component { - // Set default properties - static defaultProps = { - theme: 'light', - }; - - // Items shown in property panel - static propertyControls: PropertyControls = { - theme: { - type: ControlType.SegmentedEnum, - options: ['light', 'dark'], - title: 'Theme', - }, - }; - - render() { - const lightBgColor = '#FFF'; - const darkBgColor = '#222'; - const bgColor = this.props.theme === 'light' ? lightBgColor : darkBgColor; - return ( - -
-