diff --git a/CHANGELOG.md b/CHANGELOG.md index 80c878ec2f6..7873f18ccfd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `24.0.0`. +- Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471)) ## [`24.0.0`](https://github.com/elastic/eui/tree/v24.0.0) @@ -11,6 +11,7 @@ No public interface changes since `24.0.0`. - Updated `EuiImage`'s `caption` prop type from `string` to `ReactNode` ([#3387](https://github.com/elastic/eui/pull/3387)) - Improved contrast for `EuiCollapsibleNav` close button ([#3465](https://github.com/elastic/eui/pull/3465)) - Fixed `EuiCodeEditor` console error when using the editor without import the default theme ([#3454](https://github.com/elastic/eui/pull/3454)) +- Added exports for `EuiSteps` and related components types ([#3471](https://github.com/elastic/eui/pull/3471)) **Bug Fixes** diff --git a/src/components/steps/index.ts b/src/components/steps/index.ts index 4340ff23e87..ced5b7c87a3 100644 --- a/src/components/steps/index.ts +++ b/src/components/steps/index.ts @@ -17,12 +17,19 @@ * under the License. */ -export { EuiStep } from './step'; +export { EuiStep, EuiStepProps } from './step'; -export { EuiSteps } from './steps'; +export { EuiSteps, EuiStepsProps } from './steps'; -export { EuiSubSteps } from './sub_steps'; +export { EuiSubSteps, EuiSubStepsProps } from './sub_steps'; -export { EuiStepsHorizontal } from './steps_horizontal'; +export { + EuiStepsHorizontal, + EuiStepsHorizontalProps, +} from './steps_horizontal'; -export { EuiStepStatus } from './step_number'; +export { + EuiStepStatus, + EuiStepNumber, + EuiStepNumberProps, +} from './step_number'; diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx index a4d962c4dd3..362166f0c91 100644 --- a/src/components/steps/step.tsx +++ b/src/components/steps/step.tsx @@ -28,7 +28,7 @@ import { EuiStepStatus, EuiStepNumber } from './step_number'; import { EuiI18n } from '../i18n'; -export interface EuiStepProps { +export interface EuiStepInterface { children: ReactNode; /** * The HTML tag used for the title @@ -49,11 +49,11 @@ export interface EuiStepProps { titleSize?: Exclude; } -export type StandaloneEuiStepProps = CommonProps & +export type EuiStepProps = CommonProps & HTMLAttributes & - EuiStepProps; + EuiStepInterface; -export const EuiStep: FunctionComponent = ({ +export const EuiStep: FunctionComponent = ({ className, children, headingElement = 'p', diff --git a/src/components/steps/step_horizontal.tsx b/src/components/steps/step_horizontal.tsx index f9ee979c842..668d4f48b0f 100644 --- a/src/components/steps/step_horizontal.tsx +++ b/src/components/steps/step_horizontal.tsx @@ -30,7 +30,9 @@ import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility'; import { EuiStepStatus, EuiStepNumber } from './step_number'; -export interface EuiStepHorizontalProps { +export interface EuiStepHorizontalProps + extends CommonProps, + HTMLAttributes { /** * Is the current step */ @@ -53,9 +55,7 @@ export interface EuiStepHorizontalProps { status?: EuiStepStatus; } -export const EuiStepHorizontal: FunctionComponent< - CommonProps & HTMLAttributes & EuiStepHorizontalProps -> = ({ +export const EuiStepHorizontal: FunctionComponent = ({ className, step = 1, title, diff --git a/src/components/steps/step_number.tsx b/src/components/steps/step_number.tsx index 0d019832abe..2df7a717a1f 100644 --- a/src/components/steps/step_number.tsx +++ b/src/components/steps/step_number.tsx @@ -22,7 +22,7 @@ import classNames from 'classnames'; import { EuiIcon } from '../icon'; -import { StandaloneEuiStepProps } from './step'; +import { EuiStepProps } from './step'; import { EuiI18n } from '../i18n'; import { CommonProps, keysOf } from '../common'; @@ -44,7 +44,9 @@ export type EuiStepStatus = | 'danger' | 'disabled'; -export interface EuiStepNumberProps { +export interface EuiStepNumberProps + extends CommonProps, + HTMLAttributes { /** * May replace the number provided in props.number with alternate styling */ @@ -57,14 +59,17 @@ export interface EuiStepNumberProps { /** * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s` */ - titleSize?: StandaloneEuiStepProps['titleSize']; + titleSize?: EuiStepProps['titleSize']; } -export const EuiStepNumber: FunctionComponent< - CommonProps & HTMLAttributes & EuiStepNumberProps - // Note - tslint:disable refers to the `number` as it conflicts with the build in number type - // tslint:disable-next-line:variable-name -> = ({ className, status, number, isHollow, titleSize, ...rest }) => { +export const EuiStepNumber: FunctionComponent = ({ + className, + status, + number, + isHollow, + titleSize, + ...rest +}) => { const classes = classNames( 'euiStepNumber', status ? statusToClassNameMap[status] : undefined, diff --git a/src/components/steps/steps.tsx b/src/components/steps/steps.tsx index ee355c04d41..10103e159f7 100644 --- a/src/components/steps/steps.tsx +++ b/src/components/steps/steps.tsx @@ -21,11 +21,13 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import { CommonProps } from '../common'; import classNames from 'classnames'; -import { StandaloneEuiStepProps, EuiStep } from './step'; +import { EuiStepProps, EuiStep } from './step'; -export type EuiContainedStepProps = Omit; +export type EuiContainedStepProps = Omit; -export interface EuiStepsProps { +export interface EuiStepsProps + extends CommonProps, + HTMLAttributes { /** * An array of `EuiStep` objects excluding the `step` prop */ @@ -41,14 +43,14 @@ export interface EuiStepsProps { /** * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s` */ - titleSize?: StandaloneEuiStepProps['titleSize']; + titleSize?: EuiStepProps['titleSize']; } function renderSteps( steps: EuiContainedStepProps[], firstStepNumber: number, headingElement: string, - titleSize?: StandaloneEuiStepProps['titleSize'] + titleSize?: EuiStepProps['titleSize'] ) { return steps.map((step, index) => { const { className, children, title, status, ...rest } = step; @@ -69,9 +71,7 @@ function renderSteps( }); } -export const EuiSteps: FunctionComponent< - CommonProps & HTMLAttributes & EuiStepsProps -> = ({ +export const EuiSteps: FunctionComponent = ({ className, firstStepNumber = 1, headingElement = 'p', diff --git a/src/components/steps/steps_horizontal.tsx b/src/components/steps/steps_horizontal.tsx index c9bb8bf29c9..9dc3c782288 100644 --- a/src/components/steps/steps_horizontal.tsx +++ b/src/components/steps/steps_horizontal.tsx @@ -25,7 +25,9 @@ import { EuiStepHorizontalProps, EuiStepHorizontal } from './step_horizontal'; type ContainedEuiStepHorizontalProps = Omit; -export interface EuiStepsHorizontalProps { +export interface EuiStepsHorizontalProps + extends CommonProps, + HTMLAttributes { /** * An array of `EuiStepHorizontal` objects excluding the `step` prop */ @@ -38,9 +40,11 @@ function renderHorizontalSteps(steps: ContainedEuiStepHorizontalProps[]) { }); } -export const EuiStepsHorizontal: FunctionComponent< - CommonProps & HTMLAttributes & EuiStepsHorizontalProps -> = ({ className, steps, ...rest }) => { +export const EuiStepsHorizontal: FunctionComponent = ({ + className, + steps, + ...rest +}) => { const classes = classNames('euiStepsHorizontal', className); return (