diff --git a/CHANGELOG.md b/CHANGELOG.md index ebe28b2798cb..04c4d8f416a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added a new `EuiStat` component for displaying prominent stats ([#1146](https://github.com/elastic/eui/pull/1146)) +- Added color and monotone icons for AWS and GCP. ([#1135](https://github.com/elastic/eui/pull/1135)) +- Added TypeScript definition for `EuiComboBox` ([#1115](https://github.com/elastic/eui/pull/1115)) + +**Bug fixes** + +- Fixed `onChange` typedef on `EuiSwitch` ([#1144](https://github.com/elastic/eui/pull/1144) ## [`3.7.0`](https://github.com/elastic/eui/tree/v3.7.0) diff --git a/package.json b/package.json index c590f7b39121..ac0eefc0b866 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,8 @@ "devDependencies": { "@elastic/eslint-config-kibana": "^0.15.0", "@types/enzyme": "^3.1.13", - "@types/react": "^16.4.9", + "@types/react": "^16.0.31", + "@types/react-virtualized": "^9.18.6", "autoprefixer": "^7.1.5", "babel-cli": "^6.26.0", "babel-eslint": "^8.0.1", diff --git a/src-docs/src/views/icon/logos_third.js b/src-docs/src/views/icon/logos_third.js index e8d2d3a3d7d2..d6a2ea7dcceb 100644 --- a/src-docs/src/views/icon/logos_third.js +++ b/src-docs/src/views/icon/logos_third.js @@ -11,11 +11,15 @@ import { const iconTypes = [ 'logoAerospike', 'logoApache', + 'logoAWS', + 'logoAWSMono', 'logoCeph', 'logoCouchbase', 'logoDocker', 'logoDropwizard', 'logoEtcd', + 'logoGCP', + 'logoGCPMono', 'logoGithub', 'logoGmail', 'logoGolang', diff --git a/src/components/combo_box/index.d.ts b/src/components/combo_box/index.d.ts new file mode 100644 index 000000000000..2f0d09357847 --- /dev/null +++ b/src/components/combo_box/index.d.ts @@ -0,0 +1,73 @@ +import { ButtonHTMLAttributes, ReactNode, SFC } from 'react'; +import { ListProps } from 'react-virtualized'; +import { + EuiComboBoxOption, + EuiComboBoxOptionProps, + EuiComboBoxOptionsListPosition, + EuiComboBoxOptionsListProps, +} from '@elastic/eui'; + +declare module '@elastic/eui' { + export type EuiComboBoxOptionProps = ButtonHTMLAttributes & { + label: string, + isGroupLabelOption: boolean, + } + + export type EuiComboBoxOptionsListPosition = 'top' | 'bottom' + + export interface EuiComboBoxOption { + option: EuiComboBoxOptionProps, + children?: ReactNode, + className?: string, + optionRef?: RefCallback, + onClick: (option: EuiComboBoxOptionProps) => any, + onEnterKey: (option: EuiComboBoxOptionProps) => any, + disabled?: boolean, + } + + export interface EuiComboBoxOptionsListProps { + options?: Array, + isLoading?: boolean, + selectedOptions?: Array, + onCreateOption?: any, + searchValue?: string, + matchingOptions?: Array, + optionRef?: EuiComboBoxOption['optionRef'], + onOptionClick?: EuiComboBoxOption['onClick'], + onOptionEnterKey?: EuiComboBoxOption['onEnterKey'], + areAllOptionsSelected?: boolean, + getSelectedOptionForSearchValue?: (searchValue: string, selectedOptions: Array) => EuiComboBoxOptionProps, + updatePosition: (parameter?: UIEvent | EuiPanelProps['panelRef']) => any, + position?: EuiComboBoxOptionsListPosition, + listRef: EuiPanelProps['panelRef'], + renderOption?: (option: EuiComboBoxOptionProps, searchValue: string, OPTION_CONTENT_CLASSNAME: string) => ReactNode, + width?: number, + scrollToIndex?: number, + onScroll?: ListProps['onScroll'], + rowHeight?: number, + fullWidth?: boolean, + } + export const EuiComboBoxOptionsList: SFC; + + export interface EuiComboBoxProps { + id?: string, + isDisabled?: boolean, + className?: string, + placeholder?: string, + isLoading?: boolean, + async?: boolean, + singleSelection?: boolean, + noSuggestions?: boolean, + options?: EuiComboBoxOptionsListProps['options'], + selectedOptions?: EuiComboBoxOptionsListProps['selectedOptions'], + onChange?: (options: Array) => any, + onSearchChange?: (searchValue: string) => any, + onCreateOption?: EuiComboBoxOptionsListProps['onCreateOption'], + renderOption?: EuiComboBoxOptionsListProps['renderOption'], + isInvalid?: boolean, + rowHeight?: number, + isClearable?: boolean, + fullWidth?: boolean, + } + export const EuiComboBox: SFC; +} diff --git a/src/components/form/switch/index.d.ts b/src/components/form/switch/index.d.ts index 2e6aac981848..f3c67f8c25ef 100644 --- a/src/components/form/switch/index.d.ts +++ b/src/components/form/switch/index.d.ts @@ -6,12 +6,9 @@ declare module '@elastic/eui' { /** * @see './switch.js' */ - export type EuiSwitchChangeCallback = (state: boolean) => void; - export type EuiSwitchProps = CommonProps & - Omit, 'onChange'> & { + InputHTMLAttributes & { label?: ReactNode; - onChange?: EuiSwitchChangeCallback; }; export const EuiSwitch: SFC; diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap index 7c41b9fbe61c..8b60efc7fec2 100644 --- a/src/components/icon/__snapshots__/icon.test.js.snap +++ b/src/components/icon/__snapshots__/icon.test.js.snap @@ -2498,6 +2498,64 @@ exports[`EuiIcon props type loggingApp is rendered 1`] = ` `; +exports[`EuiIcon props type logoAWS is rendered 1`] = ` + + + + + + + + + +`; + +exports[`EuiIcon props type logoAWSMono is rendered 1`] = ` + + + + + + + +`; + exports[`EuiIcon props type logoAerospike is rendered 1`] = ` `; +exports[`EuiIcon props type logoGCP is rendered 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`EuiIcon props type logoGCPMono is rendered 1`] = ` + + + + +`; + exports[`EuiIcon props type logoGithub is rendered 1`] = ` + + + + + + + + diff --git a/src/components/icon/assets/logo_aws_mono.svg b/src/components/icon/assets/logo_aws_mono.svg new file mode 100644 index 000000000000..4c420a0f7cb4 --- /dev/null +++ b/src/components/icon/assets/logo_aws_mono.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/icon/assets/logo_gcp.svg b/src/components/icon/assets/logo_gcp.svg new file mode 100644 index 000000000000..75e139f9b2e1 --- /dev/null +++ b/src/components/icon/assets/logo_gcp.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/components/icon/assets/logo_gcp_mono.svg b/src/components/icon/assets/logo_gcp_mono.svg new file mode 100644 index 000000000000..16458c6850f0 --- /dev/null +++ b/src/components/icon/assets/logo_gcp_mono.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js index 9cab580f3d3c..e33de4d5bd0d 100644 --- a/src/components/icon/icon.js +++ b/src/components/icon/icon.js @@ -100,6 +100,8 @@ import lock from './assets/lock.svg'; import loggingApp from './assets/app_logging.svg'; import logoAerospike from './assets/logo_aerospike.svg'; import logoApache from './assets/logo_apache.svg'; +import logoAWS from './assets/logo_aws.svg'; +import logoAWSMono from './assets/logo_aws_mono.svg'; import logoBeats from './assets/logo_beats.svg'; import logoCeph from './assets/logo_ceph.svg'; import logoCloud from './assets/logo_cloud.svg'; @@ -111,6 +113,8 @@ import logoElastic from './assets/logo_elastic.svg'; import logoElasticsearch from './assets/logo_elasticsearch.svg'; import logoElasticStack from './assets/logo_elastic_stack.svg'; import logoEtcd from './assets/logo_etcd.svg'; +import logoGCP from './assets/logo_gcp.svg'; +import logoGCPMono from './assets/logo_gcp_mono.svg'; import logoGithub from './assets/logo_github.svg'; import logoGmail from './assets/logo_gmail.svg'; import logoGolang from './assets/logo_golang.svg'; @@ -311,6 +315,8 @@ const typeToIconMap = { loggingApp, logoAerospike, logoApache, + logoAWS, + logoAWSMono, logoBeats, logoCeph, logoCloud, @@ -322,6 +328,8 @@ const typeToIconMap = { logoElasticsearch, logoElasticStack, logoEtcd, + logoGCP, + logoGCPMono, logoGithub, logoGmail, logoGolang, diff --git a/src/components/icon/index.d.ts b/src/components/icon/index.d.ts index ae614e5739c8..ccb7ad5cbe8b 100644 --- a/src/components/icon/index.d.ts +++ b/src/components/icon/index.d.ts @@ -107,6 +107,8 @@ declare module '@elastic/eui' { | 'loggingApp' | 'logoAerospike' | 'logoApache' + | 'logoAWS' + | 'logoAWSMono' | 'logoBeats' | 'logoCeph' | 'logoCloud' @@ -117,6 +119,8 @@ declare module '@elastic/eui' { | 'logoElasticsearch' | 'logoElasticStack' | 'logoEtcd' + | 'logoGCP' + | 'logoGCPMono' | 'logoGithub' | 'logoGmail' | 'logoGolang' diff --git a/src/components/index.d.ts b/src/components/index.d.ts index e4c05c5035e8..b912518d2fc7 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -1,6 +1,7 @@ /// /// /// +/// /// /// /// @@ -28,3 +29,4 @@ /// /// /// +/// diff --git a/src/global_styling/variables/_z_index.scss b/src/global_styling/variables/_z_index.scss index a3c96ffb7184..bbb6cc48577f 100644 --- a/src/global_styling/variables/_z_index.scss +++ b/src/global_styling/variables/_z_index.scss @@ -1,5 +1,19 @@ // Z-Index +/* +Remember that z-index is relative to parent and based on the stacking context. +z-indexs only compete against other z-indexs when they exist as children of +that shared parent. + +That means a popover with a settings of 2, will still show above a modal +with a setting of 100, if it is within that modal and not besides it. + +Generaly that means it's a good idea to consider things added to this file +as competitive only as siblings. + +https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +*/ + $euiZLevel0: 0; $euiZLevel1: 1000; $euiZLevel2: 2000; @@ -14,8 +28,8 @@ $euiZLevel9: 9000; $euiZContent: $euiZLevel0; $euiZHeader: $euiZLevel1; $euiZContentMenu: $euiZLevel2; +$euiZComboBox: $euiZContentMenu - 1; $euiZNavigation: $euiZLevel4; $euiZMask: $euiZLevel6; $euiZModal: $euiZLevel8; -$euiZComboBox: $euiZModal + 10; $euiZToastList: $euiZLevel9; diff --git a/wiki/react-router.md b/wiki/react-router.md index 0d4b107d469d..d54a8188eeff 100644 --- a/wiki/react-router.md +++ b/wiki/react-router.md @@ -68,7 +68,8 @@ class App extends Component { }).isRequired, } - componentDidMount() { + constructor(...args) { + super(...args); this.registerRouter(); } @@ -170,10 +171,11 @@ class App extends Component { }).isRequired } - componentDidMount() { + constructor(...args) { + super(...args); this.registerRouter(); } - + registerRouter() { // Share the router with the app without requiring React or context. const { router } = this.context; diff --git a/yarn.lock b/yarn.lock index bdbcd6d1e6bf..6a17314bc894 100644 --- a/yarn.lock +++ b/yarn.lock @@ -93,9 +93,23 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.4.9": - version "16.4.9" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.9.tgz#98b4dba5a0419dbd594f5dbbb2479e1e153431bb" +"@types/react-virtualized@^9.18.6": + version "9.18.6" + resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.18.6.tgz#d5c559bd003a6c58ba9e20d6cda0dde0342f59af" + dependencies: + "@types/prop-types" "*" + "@types/react" "*" + +"@types/react@*": + version "16.4.10" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.10.tgz#fb577091034b25a81f829923e7d38258f43e3165" + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + +"@types/react@^16.0.31": + version "16.4.10" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.10.tgz#fb577091034b25a81f829923e7d38258f43e3165" dependencies: "@types/prop-types" "*" csstype "^2.2.0"