From a6c4670f2a48fecbba469a5499b91450ab4d0171 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Jan 2019 11:46:53 -0500 Subject: [PATCH 1/5] Added `iconProps` to `EuiIconTip` and adjusted TS defs --- src-docs/src/views/tool_tip/icon_tip.js | 21 +++++++++++++++++++++ src/components/tool_tip/icon_tip.js | 9 +++++++-- src/components/tool_tip/index.d.ts | 13 ++++++++----- 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/tool_tip/icon_tip.js b/src-docs/src/views/tool_tip/icon_tip.js index 31ed696ebd3..0756f93e719 100644 --- a/src-docs/src/views/tool_tip/icon_tip.js +++ b/src-docs/src/views/tool_tip/icon_tip.js @@ -6,6 +6,8 @@ import { EuiFlexItem, EuiIconTip, EuiSpacer, + EuiText, + EuiCode, } from '../../../../src/components'; export default () => ( @@ -36,5 +38,24 @@ export default () => ( color="warning" content="I do not think it means what you think it means" /> + + + + +

+ Pass a position utility class via iconProps to shift for + better alignment. + This was passed .eui-alignTop + } + iconProps={{ + className: 'eui-alignTop', + }} + /> +

+ ); diff --git a/src/components/tool_tip/icon_tip.js b/src/components/tool_tip/icon_tip.js index cb912548854..93a3800f1c6 100644 --- a/src/components/tool_tip/icon_tip.js +++ b/src/components/tool_tip/icon_tip.js @@ -4,9 +4,9 @@ import PropTypes from 'prop-types'; import { EuiIcon } from '../icon'; import { EuiToolTip } from './tool_tip'; -export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, size, ...rest }) => ( +export const EuiIconTip = ({ type, 'aria-label': ariaLabel, color, size, iconProps, ...rest }) => ( - + ); @@ -30,6 +30,11 @@ EuiIconTip.propTypes = { * Explain what this icon means for screen readers. */ 'aria-label': PropTypes.string, + + /** + * Pass certain props down to `EuiIcon` + */ + iconProps: PropTypes.object, }; EuiIconTip.defaultProps = { diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts index 1cd2d1606ec..d4b76c0a272 100644 --- a/src/components/tool_tip/index.d.ts +++ b/src/components/tool_tip/index.d.ts @@ -11,8 +11,7 @@ declare module '@elastic/eui' { | 'regular' | 'long'; - export interface EuiToolTipProps { - children: ReactElement; + export interface ToolTipProps { className?: string; content: ReactNode; delay?: ToolTipDelay; @@ -20,14 +19,18 @@ declare module '@elastic/eui' { id?: string; position?: ToolTipPositions; } - export const EuiToolTip: SFC; + + export interface EuiToolTipProps { + children: ReactElement; + } + export const EuiToolTip: SFC; export interface EuiIconTipProps { color?: string; type?: string; size?: string; 'aria-label'?: string; - content: ReactNode; + iconProps?: object; } - export const EuiIconTip: SFC; + export const EuiIconTip: SFC; } From 22936c316cd2a8b947c75185cba24c80c0c0cb33 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 9 Jan 2019 12:49:48 -0500 Subject: [PATCH 2/5] cl --- CHANGELOG.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 42301c7382e..8d4c47ff4c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,13 +4,17 @@ - Added `initialFocus` prop typedefs to `EuiModal` and `EuiPopover` ([#1410](https://github.com/elastic/eui/pull/1410)) - Updated `gisApp` icon ([#1413](https://github.com/elastic/eui/pull/1413)) - Added `isAutoRefreshOnly` prop to `EuiSuperDatePicker` ([#1412](https://github.com/elastic/eui/pull/1412)) +- Added `iconProps` prop to `EuiIconTip` ([#1420](https://github.com/elastic/eui/pull/1420)) + +**Bug fixes** + +- Updated `EuiIconTip` TS definitions to inherit those from `EuiToolTip` as well ([#1420](https://github.com/elastic/eui/pull/1420)) ## [`6.2.0`](https://github.com/elastic/eui/tree/v6.2.0) - Added `logoCodesandbox` and updated `apmApp` icons ([#1407](https://github.com/elastic/eui/pull/1407)) - Changed `EuiListGroup` PropType for `extraAction` to remove console warning ([#1405](hhttps://github.com/elastic/eui/pull/1405)) - **Bug fixes** - Account for `min` attribute when determining `EuiRange` input width ([#1406](https://github.com/elastic/eui/pull/1406)) From 5d0ec77b89a780f4edeed1f45c2cc129aa76267d Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 9 Jan 2019 12:54:16 -0700 Subject: [PATCH 3/5] Add PropsOf type, change EuiIconTipProps to use it --- src/components/common.ts | 8 ++++++++ src/components/tool_tip/index.d.ts | 16 ++++++++-------- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/components/common.ts b/src/components/common.ts index 8789e5c5aeb..2cb42f0d33d 100644 --- a/src/components/common.ts +++ b/src/components/common.ts @@ -1,3 +1,5 @@ +import { Component, FunctionComponent, SFC } from 'react'; + export interface CommonProps { className?: string; 'aria-label'?: string; @@ -18,6 +20,12 @@ export function keysOf(obj: T): K[] { return Object.keys(obj) as K[]; } +export type PropsOf = + C extends SFC ? SFCProps : + C extends FunctionComponent ? FunctionalProps : + C extends Component ? ComponentProps + : never; + /* TypeScript's discriminated unions are overly permissive: as long as one type of the union is satisfied the other types are not validated against. For example: diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts index d4b76c0a272..d4a269d922e 100644 --- a/src/components/tool_tip/index.d.ts +++ b/src/components/tool_tip/index.d.ts @@ -1,4 +1,6 @@ import { ReactElement, ReactNode, SFC } from 'react'; +import { EuiIcon } from '../icon'; +import { PropsOf } from '../common'; declare module '@elastic/eui' { export type ToolTipPositions = @@ -11,7 +13,8 @@ declare module '@elastic/eui' { | 'regular' | 'long'; - export interface ToolTipProps { + export interface EuiToolTipProps { + children: ReactElement; className?: string; content: ReactNode; delay?: ToolTipDelay; @@ -19,18 +22,15 @@ declare module '@elastic/eui' { id?: string; position?: ToolTipPositions; } - - export interface EuiToolTipProps { - children: ReactElement; - } - export const EuiToolTip: SFC; + export const EuiToolTip: SFC; export interface EuiIconTipProps { color?: string; type?: string; size?: string; 'aria-label'?: string; - iconProps?: object; + content: ReactNode; + iconProps?: PropsOf; } - export const EuiIconTip: SFC; + export const EuiIconTip: SFC; } From 68919b587b7f6f2108673c3b007b3c7c5d488717 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 9 Jan 2019 14:43:05 -0700 Subject: [PATCH 4/5] Refactor EuiToolTip and EuiIconTip type defs --- src/components/tool_tip/index.d.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts index d4a269d922e..8e01a396213 100644 --- a/src/components/tool_tip/index.d.ts +++ b/src/components/tool_tip/index.d.ts @@ -1,6 +1,7 @@ import { ReactElement, ReactNode, SFC } from 'react'; +import { EuiIconTipProps, ToolTipDelay, ToolTipPositions } from '@elastic/eui'; import { EuiIcon } from '../icon'; -import { PropsOf } from '../common'; +import { Omit, PropsOf } from '../common'; declare module '@elastic/eui' { export type ToolTipPositions = @@ -16,7 +17,7 @@ declare module '@elastic/eui' { export interface EuiToolTipProps { children: ReactElement; className?: string; - content: ReactNode; + content?: ReactNode; delay?: ToolTipDelay; title?: ReactNode; id?: string; @@ -29,8 +30,7 @@ declare module '@elastic/eui' { type?: string; size?: string; 'aria-label'?: string; - content: ReactNode; iconProps?: PropsOf; } - export const EuiIconTip: SFC; + export const EuiIconTip: SFC & EuiIconTipProps>; } From 2e874827447b9017e511fc6886d7164b7c88af63 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 9 Jan 2019 15:06:23 -0700 Subject: [PATCH 5/5] Clean up imports --- src/components/tool_tip/index.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/tool_tip/index.d.ts b/src/components/tool_tip/index.d.ts index 8e01a396213..bd02a8b9e7a 100644 --- a/src/components/tool_tip/index.d.ts +++ b/src/components/tool_tip/index.d.ts @@ -1,5 +1,4 @@ import { ReactElement, ReactNode, SFC } from 'react'; -import { EuiIconTipProps, ToolTipDelay, ToolTipPositions } from '@elastic/eui'; import { EuiIcon } from '../icon'; import { Omit, PropsOf } from '../common';