From fafc39c15d003dbdfcf03b7ead90c79d515d30bb Mon Sep 17 00:00:00 2001 From: garrettbear Date: Mon, 17 Jul 2023 14:33:36 -0700 Subject: [PATCH] button base box updates --- .../button-base/button-base.js | 203 ------------------ .../button-base/button-base.stories.tsx | 7 +- .../button-base/button-base.tsx | 28 +-- .../button-base/button-base.types.ts | 50 ++--- 4 files changed, 43 insertions(+), 245 deletions(-) delete mode 100644 ui/components/component-library/button-base/button-base.js diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js deleted file mode 100644 index 435b0b62e9f2..000000000000 --- a/ui/components/component-library/button-base/button-base.js +++ /dev/null @@ -1,203 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; - -import Box from '../../ui/box'; -import { IconName, Icon, IconSize } from '../icon'; -import { Text } from '../text/deprecated'; - -import { - AlignItems, - Display, - JustifyContent, - TextColor, - TextVariant, - BorderRadius, - BackgroundColor, - IconColor, -} from '../../../helpers/constants/design-system'; -import { BUTTON_BASE_SIZES } from './button-base.constants'; - -export const ButtonBase = ({ - as = 'button', - block, - children, - className, - href, - ellipsis = false, - externalLink, - size = BUTTON_BASE_SIZES.MD, - startIconName, - startIconProps, - endIconName, - endIconProps, - loading, - disabled, - iconLoadingProps, - textProps, - color = TextColor.textDefault, - ...props -}) => { - const Tag = href ? 'a' : as; - if (Tag === 'a' && externalLink) { - props.target = '_blank'; - props.rel = 'noopener noreferrer'; - } - return ( - - {startIconName && ( - - )} - {/* - * If children is a string and doesn't need truncation or loading - * prevent html bloat by rendering just the string - * otherwise render with wrapper to allow truncation or loading - */} - {typeof children === 'string' && !ellipsis && !loading ? ( - children - ) : ( - - {children} - - )} - {endIconName && ( - - )} - {loading && ( - - )} - - ); -}; - -ButtonBase.propTypes = { - /** - * The polymorphic `as` prop allows you to change the root HTML element of the Button component between `button` and `a` tag - */ - as: PropTypes.string, - /** - * Boolean prop to quickly activate box prop display block - */ - block: PropTypes.bool, - /** - * Additional props to pass to the Text component that wraps the button children - */ - buttonTextProps: PropTypes.shape(Text.propTypes), - /** - * The children to be rendered inside the ButtonBase - */ - children: PropTypes.node, - /** - * An additional className to apply to the ButtonBase. - */ - className: PropTypes.string, - /** - * Boolean to disable button - */ - disabled: PropTypes.bool, - /** - * When an `href` prop is passed, ButtonBase will automatically change the root element to be an `a` (anchor) tag - */ - href: PropTypes.string, - /** - * Used for long strings that can be cut off... - */ - ellipsis: PropTypes.bool, - /** - * Boolean indicating if the link targets external content, it will cause the link to open in a new tab - */ - externalLink: PropTypes.bool, - /** - * Add icon to start (left side) of button text passing icon name - * The name of the icon to display. Should be one of IconName - */ - startIconName: PropTypes.oneOf(Object.values(IconName)), - /** - * iconProps accepts all the props from Icon - */ - startIconProps: PropTypes.object, - /** - * Add icon to end (right side) of button text passing icon name - * The name of the icon to display. Should be one of IconName - */ - endIconName: PropTypes.oneOf(Object.values(IconName)), - /** - * iconProps accepts all the props from Icon - */ - endIconProps: PropTypes.object, - /** - * iconLoadingProps accepts all the props from Icon - */ - iconLoadingProps: PropTypes.object, - /** - * Boolean to show loading spinner in button - */ - loading: PropTypes.bool, - /** - * The size of the ButtonBase. - * Possible values could be 'Size.SM'(32px), 'Size.MD'(40px), 'Size.LG'(48px), - */ - size: PropTypes.oneOfType([ - PropTypes.shape(BUTTON_BASE_SIZES), - PropTypes.string, - ]), - /** - * textProps accepts all the props from Icon - */ - textProps: PropTypes.shape(Text.propTypes), - /** - * ButtonBase accepts all the props from Box - */ - ...Box.propTypes, -}; diff --git a/ui/components/component-library/button-base/button-base.stories.tsx b/ui/components/component-library/button-base/button-base.stories.tsx index 095551cd2bed..8beed57f7b99 100644 --- a/ui/components/component-library/button-base/button-base.stories.tsx +++ b/ui/components/component-library/button-base/button-base.stories.tsx @@ -5,6 +5,7 @@ import { BackgroundColor, Display, FlexDirection, + TextColor, } from '../../../helpers/constants/design-system'; import Box from '../../ui/box/box'; import { TextDirection, IconName, ValidTag } from '..'; @@ -215,7 +216,11 @@ export const Rtl: StoryFn = (args) => ( export const Ellipsis: StoryFn = (args) => ( Example without ellipsis - + Example with ellipsis diff --git a/ui/components/component-library/button-base/button-base.tsx b/ui/components/component-library/button-base/button-base.tsx index c6e88665685a..8c1282a69111 100644 --- a/ui/components/component-library/button-base/button-base.tsx +++ b/ui/components/component-library/button-base/button-base.tsx @@ -1,7 +1,6 @@ -import React, { Ref, forwardRef } from 'react'; +import React from 'react'; import classnames from 'classnames'; -import { IconName, Icon, IconSize } from '../icon'; -import { Text, ValidTag } from '../text'; +import { IconName, Icon, IconSize, Text } from '..'; import { AlignItems, Display, @@ -12,12 +11,17 @@ import { BackgroundColor, IconColor, } from '../../../helpers/constants/design-system'; -import { ButtonBaseProps, ButtonBaseSize } from './button-base.types'; +import type { PolymorphicRef } from '../box'; +import { + ButtonBaseProps, + ButtonBaseSize, + ButtonBaseComponent, +} from './button-base.types'; -export const ButtonBase = forwardRef( - ( +export const ButtonBase: ButtonBaseComponent = React.forwardRef( + ( { - as = ValidTag.Button, + as = 'button', block, children, className = '', @@ -36,11 +40,11 @@ export const ButtonBase = forwardRef( color = TextColor.textDefault, iconColor = IconColor.iconDefault, ...props - }: ButtonBaseProps, - ref: Ref, + }: ButtonBaseProps, + ref?: PolymorphicRef, ) => { - const Tag = href ? ValidTag.A : as; - if (Tag === ValidTag.A && externalLink) { + const Tag = href ? 'a' : as; + if (Tag === 'a' && externalLink) { props.target = '_blank'; props.rel = 'noopener noreferrer'; } @@ -93,7 +97,7 @@ export const ButtonBase = forwardRef( children ) : ( , 'name'> & { - 'data-testid'?: string; - }; + startIconProps?: IconProps; /** * Add icon to end (right side) of button text passing icon name * The name of the icon to display. Should be one of IconName @@ -68,13 +59,11 @@ export interface ButtonBaseProps extends BoxProps { /** * iconProps accepts all the props from Icon */ - endIconProps?: Omit, 'name'> & { - 'data-testid'?: string; - }; + endIconProps?: IconProps; /** * iconLoadingProps accepts all the props from Icon */ - iconLoadingProps?: Omit, 'name'>; + iconLoadingProps?: IconProps; /** * Boolean to show loading spinner in button */ @@ -85,9 +74,9 @@ export interface ButtonBaseProps extends BoxProps { */ size?: ButtonBaseSize; /** - * textProps accepts all the props from Icon + * textProps are additional props to pass to the Text component that wraps the button children */ - textProps?: TextProps; + textProps?: TextProps<'span'>; /** * Specifies where to display the linked URL. */ @@ -97,10 +86,6 @@ export interface ButtonBaseProps extends BoxProps { * the linked URL. */ rel?: string; - /** - * Sets the text color of the button text. - */ - color?: TextColor | Color; /** * Sets the color of the button icon. */ @@ -110,3 +95,10 @@ export interface ButtonBaseProps extends BoxProps { */ textDirection?: TextDirection; } + +export type ButtonBaseProps = + PolymorphicComponentPropWithRef; + +export type ButtonBaseComponent = ( + props: ButtonBaseProps, +) => React.ReactElement | null;