From ddd6c01d3b6844f11deb4d933ffc3eb737c3b670 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 13 Jul 2020 13:22:04 -0700 Subject: [PATCH 1/4] ts gymnastics --- src/components/button/button.tsx | 38 ++++++++++++++++++++++++++------ 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 3f744ff4787f..e4150e8d4f7c 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -170,11 +170,35 @@ const EuiButtonDisplay = React.forwardRef< ); - return ( - - {innerNode} - - ); + if (Element === 'label') { + return ( + } + {...rest as HTMLAttributes}> + {innerNode} + + ); + } else if (Element === 'a') { + return ( + } + {...rest as HTMLAttributes}> + {innerNode} + + ); + } else { + return ( + } + {...rest as HTMLAttributes}> + {innerNode} + + ); + } } ); @@ -235,8 +259,8 @@ export const EuiButton: FunctionComponent = ({ element={element} isDisabled={buttonIsDisabled} {...relObj} - ref={buttonRef as Ref} - {...rest as HTMLAttributes} + ref={buttonRef} + {...rest} /> ); }; From 2e56626204dcde07642ef9754f8641dc6d94a866 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 13 Jul 2020 13:29:12 -0700 Subject: [PATCH 2/4] clean up --- src/components/button/button.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index e4150e8d4f7c..3e5b156cd255 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -175,7 +175,7 @@ const EuiButtonDisplay = React.forwardRef< } - {...rest as HTMLAttributes}> + {...rest}> {innerNode} ); @@ -184,7 +184,7 @@ const EuiButtonDisplay = React.forwardRef< } - {...rest as HTMLAttributes}> + {...rest}> {innerNode} ); @@ -194,7 +194,7 @@ const EuiButtonDisplay = React.forwardRef< className={classes} disabled={isDisabled} ref={ref as Ref} - {...rest as HTMLAttributes}> + {...rest}> {innerNode} ); From f3f8730c9897b934053d9c0bda5376e0640a27bf Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Mon, 13 Jul 2020 15:33:59 -0700 Subject: [PATCH 3/4] generic display comopnent --- src/components/button/button.tsx | 50 ++++++++++---------------------- 1 file changed, 15 insertions(+), 35 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index 3e5b156cd255..dd265f5fe861 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -102,7 +102,7 @@ export interface EuiButtonProps extends CommonProps { } export interface EuiButtonDisplayProps extends EuiButtonProps { - element: 'a' | 'button' | 'label'; + element: keyof JSX.IntrinsicElements; } /** @@ -132,9 +132,6 @@ const EuiButtonDisplay = React.forwardRef< }, ref ) => { - // If in the loading state, force disabled to true - isDisabled = isLoading ? true : isDisabled; - const classes = classNames( 'euiButton', color ? colorToClassNameMap[color] : null, @@ -170,35 +167,12 @@ const EuiButtonDisplay = React.forwardRef< ); - if (Element === 'label') { - return ( - } - {...rest}> - {innerNode} - - ); - } else if (Element === 'a') { - return ( - } - {...rest}> - {innerNode} - - ); - } else { - return ( - } - {...rest}> - {innerNode} - - ); - } + return ( + // @ts-ignore difficult to verify `rest` applied to `Element` + + {innerNode} + + ); } ); @@ -234,11 +208,17 @@ export const EuiButton: FunctionComponent = ({ buttonRef, ...rest }) => { - const buttonIsDisabled = isDisabled || disabled; + const buttonIsDisabled = rest.isLoading || isDisabled || disabled; // elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend // this is a button and piggyback off its disabled styles. const element = href && !isDisabled ? 'a' : 'button'; + let elementProps = {}; + elementProps = { ...elementProps, isDisabled: buttonIsDisabled }; + if (element === 'button') { + elementProps = { ...elementProps, disabled: buttonIsDisabled }; + } + const relObj: { rel?: string; href?: string; @@ -257,7 +237,7 @@ export const EuiButton: FunctionComponent = ({ return ( Date: Tue, 14 Jul 2020 08:49:19 -0700 Subject: [PATCH 4/4] createElement; comments --- src/components/button/button.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index dd265f5fe861..0652e58da6a5 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -108,11 +108,10 @@ export interface EuiButtonDisplayProps extends EuiButtonProps { /** * * *INTERNAL ONLY* Component for displaying any element as a button + * EuiButton is largely responsible for providing relevant props + * and the logic for element-specific attributes */ -const EuiButtonDisplay = React.forwardRef< - HTMLAnchorElement | HTMLButtonElement | HTMLLabelElement, - EuiButtonDisplayProps ->( +const EuiButtonDisplay = React.forwardRef( ( { children, @@ -127,7 +126,7 @@ const EuiButtonDisplay = React.forwardRef< contentProps, textProps, fullWidth, - element: Element = 'button', + element = 'button', ...rest }, ref @@ -167,11 +166,14 @@ const EuiButtonDisplay = React.forwardRef< ); - return ( - // @ts-ignore difficult to verify `rest` applied to `Element` - - {innerNode} - + return React.createElement( + element, + { + className: classes, + ref, + ...rest, + }, + innerNode ); } ); @@ -209,12 +211,12 @@ export const EuiButton: FunctionComponent = ({ ...rest }) => { const buttonIsDisabled = rest.isLoading || isDisabled || disabled; - // elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend - // this is a button and piggyback off its disabled styles. const element = href && !isDisabled ? 'a' : 'button'; let elementProps = {}; + // Props for all elements elementProps = { ...elementProps, isDisabled: buttonIsDisabled }; + // Element-specific attributes if (element === 'button') { elementProps = { ...elementProps, disabled: buttonIsDisabled }; }