From 9359c267e2455f5e3ef2952df4382dccf9d95516 Mon Sep 17 00:00:00 2001 From: Kyle Shike Date: Fri, 24 May 2024 17:05:41 -0400 Subject: [PATCH 1/5] WIP --- src/Dropdown/DropdownToggle.tsx | 4 ++-- src/FormGroup/FormGroup.tsx | 6 ++++-- src/InputLegend/InputLegend.tsx | 1 - src/LoadingOverlay/LoadingOverlay.tsx | 2 +- src/Modal/Modal.tsx | 2 +- src/MoneyInput/MoneyInput.tsx | 3 ++- 6 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx index d9ff1dc0..f5cd3e6c 100644 --- a/src/Dropdown/DropdownToggle.tsx +++ b/src/Dropdown/DropdownToggle.tsx @@ -50,8 +50,8 @@ type DropdownToggleProps = { const DropdownToggle = ({ as, - ariaLabel, - bsPrefix, + ariaLabel = 'dropdown-toggle', + bsPrefix = 'dropdown-toggle', childBsPrefix, children, className, diff --git a/src/FormGroup/FormGroup.tsx b/src/FormGroup/FormGroup.tsx index 067a5204..d27d45ce 100644 --- a/src/FormGroup/FormGroup.tsx +++ b/src/FormGroup/FormGroup.tsx @@ -64,7 +64,7 @@ export default function FormGroup({ bordered, children, className, - displayErrorText, + displayErrorText = true, elementType = 'div', errors = {}, helperText, @@ -80,6 +80,9 @@ export default function FormGroup({ }: FormGroupProps) { const errorMessage = buildErrorMessage(errors[inputKey || ''], label); const hasErrors = errorMessage && errorMessage.length > 0; + if (hasErrors) { + console.log(renderErrors(errorMessage)); + } const isElementTypeFieldset = elementType === 'fieldset'; const isElementTypeDiv = elementType === 'div'; @@ -90,7 +93,6 @@ export default function FormGroup({ { // Only set style if this is not visible to let CSS handle how to display this const classes = classNames( diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 3e5c20bd..7d482214 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -16,7 +16,7 @@ const Modal = ({ className, ...props }: ModalProps) => { - let componentClassName = ''; + let componentClassName = className; if (size === MODAL_SIZES.MEDIUM) { componentClassName = classNames(className, 'ReactModal--medium'); diff --git a/src/MoneyInput/MoneyInput.tsx b/src/MoneyInput/MoneyInput.tsx index 1172ee79..61837832 100644 --- a/src/MoneyInput/MoneyInput.tsx +++ b/src/MoneyInput/MoneyInput.tsx @@ -47,9 +47,10 @@ export type MoneyInputProps = CurrencyInputProps & { const MoneyInput = ({ className, + intlConfig = { locale: 'en-US', currency: 'USD' }, ...props }: MoneyInputProps) => ( - + ); export default MoneyInput; From 2a1a84593b315fa1dee1794c0cc4e656c9bbc8d0 Mon Sep 17 00:00:00 2001 From: Kyle Shike Date: Fri, 24 May 2024 17:25:45 -0400 Subject: [PATCH 2/5] puts default props back --- src/Avatar/Avatar.tsx | 31 ++++++++++++------- src/Container/Col.tsx | 2 +- src/Container/Container.tsx | 2 +- src/Container/Row.tsx | 2 +- .../CopyToClipboardButton.tsx | 2 +- src/Drawer/Drawer.tsx | 2 +- src/Drawer/DrawerHeader.tsx | 2 +- src/Dropdown/Dropdown.tsx | 8 ++--- src/Dropdown/DropdownDivider.tsx | 4 +-- src/Dropdown/DropdownMenu.tsx | 2 +- src/FormGroup/FormGroup.tsx | 8 ++--- src/Input/Input.tsx | 2 +- src/InputLabel/InputLabel.tsx | 6 ++-- src/InputLegend/InputLegend.tsx | 4 +-- src/Main/Main.tsx | 2 +- src/Modal/ModalFooter.tsx | 6 ++++ src/MoneyInput/MoneyInput.tsx | 8 ++++- src/RadioButton/RadioButton.tsx | 2 +- 18 files changed, 58 insertions(+), 37 deletions(-) diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx index 562dad34..5e6c7863 100644 --- a/src/Avatar/Avatar.tsx +++ b/src/Avatar/Avatar.tsx @@ -16,7 +16,16 @@ type AvatarProps = { url?: string; }; -function Avatar(props: AvatarProps) { +function Avatar({ + ariaHidden, + colorId, + image, + initials, + large, + name = '', + showAlert, + url, +}: AvatarProps) { const [imageLoadFailed, setImageLoadFailed] = useState(false); function onImageLoadError() { @@ -24,10 +33,10 @@ function Avatar(props: AvatarProps) { } function wrapIfUrlPresent(content) { - if (props.url) { + if (url) { return ( @@ -38,36 +47,36 @@ function Avatar(props: AvatarProps) { return content; } - const displayImage = props.image && !imageLoadFailed; + const displayImage = image && !imageLoadFailed; const content = displayImage ? ( {props.name} ) : ( - {props.initials} + {initials} ); return (
{wrapIfUrlPresent(content)}
- {props.showAlert && ( + {showAlert && (
)}
diff --git a/src/Container/Col.tsx b/src/Container/Col.tsx index 0d381587..2c5af803 100644 --- a/src/Container/Col.tsx +++ b/src/Container/Col.tsx @@ -63,7 +63,7 @@ export const Col = ({ xl, xs, xxl, - bsPrefix, + bsPrefix = 'col', ...props }: ColProps) => ( ( ( { diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx index d529bb24..5a381299 100644 --- a/src/Dropdown/Dropdown.tsx +++ b/src/Dropdown/Dropdown.tsx @@ -65,19 +65,19 @@ type DropdownProps = { } & RBDropdownProps; const Dropdown = ({ - align, + align = 'start', as, - autoClose, + autoClose = true, + bsPrefix = 'dropdown', children, className, drop, flip, focusFirstItemOnShow, - navbar, + navbar = false, onSelect, onToggle, show, - bsPrefix, ...props }: DropdownProps) => ( ( ((props, ref) => { trailingIconOnClick, trailingIconOnClickSubmit, trailingText, - type, + type = 'text', value, onChange, ...rest diff --git a/src/InputLabel/InputLabel.tsx b/src/InputLabel/InputLabel.tsx index 4557f858..2e7cd2e1 100644 --- a/src/InputLabel/InputLabel.tsx +++ b/src/InputLabel/InputLabel.tsx @@ -17,11 +17,11 @@ export type InputLabelProps = { } & LabelProps; const InputLabel = ({ - className, - labelHtmlFor, + className = '', + labelHtmlFor = '', text, required, - labelHelperText, + labelHelperText = '', tooltipText, ...props }: InputLabelProps) => { diff --git a/src/InputLegend/InputLegend.tsx b/src/InputLegend/InputLegend.tsx index f27a413f..30830643 100644 --- a/src/InputLegend/InputLegend.tsx +++ b/src/InputLegend/InputLegend.tsx @@ -19,10 +19,10 @@ export type InputLegendProps = { } & LegendProps; const InputLegend = ({ - className, + className = '', text, required, - labelHelperText, + labelHelperText = '', tooltipText, ...props }: InputLegendProps) => { diff --git a/src/Main/Main.tsx b/src/Main/Main.tsx index 494d79f0..5bc65515 100644 --- a/src/Main/Main.tsx +++ b/src/Main/Main.tsx @@ -24,7 +24,7 @@ const Main = ({ as = 'main', className, children, - fluid, + fluid = true, id, ...props }: MainProps) => ( diff --git a/src/Modal/ModalFooter.tsx b/src/Modal/ModalFooter.tsx index eaa3c7c1..2b48bc03 100644 --- a/src/Modal/ModalFooter.tsx +++ b/src/Modal/ModalFooter.tsx @@ -10,6 +10,12 @@ type ModalFooterProps = { }; export default class ModalFooter extends Component { + static defaultProps: { + children: undefined; + closingIsDisabled: boolean; + dismissButtonText: string; + onRequestClose: undefined; + }; // Don’t pass event to props callback; the callback is not always called from // event listeners: diff --git a/src/MoneyInput/MoneyInput.tsx b/src/MoneyInput/MoneyInput.tsx index 61837832..206a0cb9 100644 --- a/src/MoneyInput/MoneyInput.tsx +++ b/src/MoneyInput/MoneyInput.tsx @@ -48,9 +48,15 @@ export type MoneyInputProps = CurrencyInputProps & { const MoneyInput = ({ className, intlConfig = { locale: 'en-US', currency: 'USD' }, + prefix = '$ ', ...props }: MoneyInputProps) => ( - + ); export default MoneyInput; diff --git a/src/RadioButton/RadioButton.tsx b/src/RadioButton/RadioButton.tsx index 683510b9..be2e0b38 100644 --- a/src/RadioButton/RadioButton.tsx +++ b/src/RadioButton/RadioButton.tsx @@ -19,7 +19,7 @@ const RadioButton = React.forwardRef(({ className, disabled, id, - name, + name = '', value, onChange, ...rest From 7b41be22d9029cf8d317b680a865f77c02a5da4a Mon Sep 17 00:00:00 2001 From: Kyle Shike Date: Fri, 24 May 2024 17:51:15 -0400 Subject: [PATCH 3/5] more --- src/MoneyInput/MoneyInput.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/MoneyInput/MoneyInput.tsx b/src/MoneyInput/MoneyInput.tsx index 206a0cb9..bc06047f 100644 --- a/src/MoneyInput/MoneyInput.tsx +++ b/src/MoneyInput/MoneyInput.tsx @@ -46,13 +46,19 @@ export type MoneyInputProps = CurrencyInputProps & { }; const MoneyInput = ({ + allowDecimals = true, + allowNegativeValue = true, + disabled = false, className, intlConfig = { locale: 'en-US', currency: 'USD' }, - prefix = '$ ', + prefix ='$ ', ...props }: MoneyInputProps) => ( Date: Fri, 24 May 2024 17:54:24 -0400 Subject: [PATCH 4/5] lint --- src/FormGroup/FormGroup.tsx | 3 --- src/Modal/ModalFooter.tsx | 10 ++++++---- src/MoneyInput/MoneyInput.tsx | 4 ++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/FormGroup/FormGroup.tsx b/src/FormGroup/FormGroup.tsx index 0ebf6a21..850936a5 100644 --- a/src/FormGroup/FormGroup.tsx +++ b/src/FormGroup/FormGroup.tsx @@ -80,9 +80,6 @@ export default function FormGroup({ }: FormGroupProps) { const errorMessage = buildErrorMessage(errors[inputKey || ''], label); const hasErrors = errorMessage && errorMessage.length > 0; - if (hasErrors) { - console.log(renderErrors(errorMessage)); - } const isElementTypeFieldset = elementType === 'fieldset'; const isElementTypeDiv = elementType === 'div'; diff --git a/src/Modal/ModalFooter.tsx b/src/Modal/ModalFooter.tsx index 2b48bc03..487bcc63 100644 --- a/src/Modal/ModalFooter.tsx +++ b/src/Modal/ModalFooter.tsx @@ -10,16 +10,18 @@ type ModalFooterProps = { }; export default class ModalFooter extends Component { + // Don’t pass event to props callback; the callback is not always called from + // event listeners: + + handleCloseClick = () => this.props.onRequestClose && this.props.onRequestClose(); + + // eslint-disable-next-line react/static-property-placement static defaultProps: { children: undefined; closingIsDisabled: boolean; dismissButtonText: string; onRequestClose: undefined; }; - // Don’t pass event to props callback; the callback is not always called from - // event listeners: - - handleCloseClick = () => this.props.onRequestClose && this.props.onRequestClose(); render() { return ( diff --git a/src/MoneyInput/MoneyInput.tsx b/src/MoneyInput/MoneyInput.tsx index bc06047f..a7a32e96 100644 --- a/src/MoneyInput/MoneyInput.tsx +++ b/src/MoneyInput/MoneyInput.tsx @@ -51,13 +51,13 @@ const MoneyInput = ({ disabled = false, className, intlConfig = { locale: 'en-US', currency: 'USD' }, - prefix ='$ ', + prefix = '$ ', ...props }: MoneyInputProps) => ( Date: Fri, 24 May 2024 18:09:28 -0400 Subject: [PATCH 5/5] adds a few missing ones --- src/Input/Input.tsx | 4 ++-- src/LoadingOverlay/LoadingOverlay.tsx | 4 ++-- src/RadioButton/RadioButton.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx index 84194e3d..a81a379a 100644 --- a/src/Input/Input.tsx +++ b/src/Input/Input.tsx @@ -34,9 +34,9 @@ const Input = React.forwardRef((props, ref) => { id, leadingIcon, name, - placeholder, + placeholder = '', trailingIcon, - trailingIconLabel, + trailingIconLabel = '', trailingIconOnClick, trailingIconOnClickSubmit, trailingText, diff --git a/src/LoadingOverlay/LoadingOverlay.tsx b/src/LoadingOverlay/LoadingOverlay.tsx index 6c565a95..f92f3736 100644 --- a/src/LoadingOverlay/LoadingOverlay.tsx +++ b/src/LoadingOverlay/LoadingOverlay.tsx @@ -17,8 +17,8 @@ type LoadingOverlayProps = { }; const LoadingOverlay = ({ - contentCenterOverflow, - contentTop, + contentCenterOverflow = false, + contentTop = false, dataTestid = 'LoadingOverlay', header, text, diff --git a/src/RadioButton/RadioButton.tsx b/src/RadioButton/RadioButton.tsx index be2e0b38..83c7f211 100644 --- a/src/RadioButton/RadioButton.tsx +++ b/src/RadioButton/RadioButton.tsx @@ -17,7 +17,7 @@ type RadioButtonProps = { const RadioButton = React.forwardRef(({ checked, className, - disabled, + disabled = false, id, name = '', value,