diff --git a/.eslintignore b/.eslintignore index 6585ff5ebee..61a5a1ef908 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 1538d294d5d..d5cb84fcb18 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 3a674688ffd..9f475e59955 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ - 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)) +**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) - Added `null` as acceptable `icon` prop for `EuiCard` ([#3470](https://github.com/elastic/eui/pull/3470)) diff --git a/package.json b/package.json index e57ac88b939..c731c751b44 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/dtsgenerator.js b/scripts/dtsgenerator.js index fe03bf5cd98..cbf0771f9a6 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/src/views/nav_drawer/nav_drawer_example.js b/src-docs/src/views/nav_drawer/nav_drawer_example.js index 69d3698e190..d760a9b6927 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer_example.js +++ b/src-docs/src/views/nav_drawer/nav_drawer_example.js @@ -5,7 +5,13 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiNavDrawer, EuiCode, EuiCallOut } from '../../../../src/components'; +import { + EuiNavDrawer, + EuiCode, + EuiCallOut, + EuiBadge, + EuiSpacer, +} from '../../../../src/components'; import NavDrawer from './nav_drawer'; const navDrawerSource = require('!!raw-loader!./nav_drawer'); @@ -30,6 +36,24 @@ export const NavDrawerExample = { ], text: (
+ + 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-framer/.eslintrc.js b/src-framer/.eslintrc.js deleted file mode 100644 index e5906d649c7..00000000000 --- a/src-framer/.eslintrc.js +++ /dev/null @@ -1,13 +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 dd8c2f7761e..00000000000 --- 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 e239e313257..00000000000 --- 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 30bcac9dd7a..00000000000 --- 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 266f8def763..00000000000 --- 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 4efc1d0e371..00000000000 --- 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 ( - -
-