From 41c571247164a89442641d969ee2677e9047f0a6 Mon Sep 17 00:00:00 2001 From: Florent Mathieu Date: Tue, 15 Oct 2024 07:37:25 -1000 Subject: [PATCH] refactor(forms): use transient props where appropriate --- packages/forms/src/elements/Checkbox.tsx | 6 +- packages/forms/src/elements/FileUpload.tsx | 11 +- packages/forms/src/elements/Input.tsx | 39 +++-- packages/forms/src/elements/MediaInput.tsx | 2 +- packages/forms/src/elements/Radio.tsx | 6 +- packages/forms/src/elements/Range.tsx | 18 +-- packages/forms/src/elements/Select.tsx | 18 +-- packages/forms/src/elements/Textarea.tsx | 44 ++++-- packages/forms/src/elements/Toggle.tsx | 6 +- .../forms/src/elements/common/Fieldset.tsx | 23 ++- packages/forms/src/elements/common/Label.tsx | 148 +++++++++--------- packages/forms/src/elements/common/Legend.tsx | 5 +- .../forms/src/elements/common/Message.tsx | 4 +- .../src/elements/faux-input/FauxInput.tsx | 30 +++- .../elements/file-list/components/File.tsx | 6 +- .../elements/input-group/InputGroup.spec.tsx | 10 +- .../src/elements/input-group/InputGroup.tsx | 4 +- .../elements/tiles/components/Description.tsx | 2 +- .../src/elements/tiles/components/Icon.tsx | 2 +- .../src/elements/tiles/components/Label.tsx | 2 +- .../forms/src/styled/common/StyledFieldset.ts | 4 +- .../src/styled/common/StyledLabel.spec.tsx | 2 +- .../forms/src/styled/common/StyledLabel.ts | 16 +- .../forms/src/styled/common/StyledLegend.ts | 6 +- .../src/styled/common/StyledMessage.spec.tsx | 6 +- .../forms/src/styled/common/StyledMessage.ts | 14 +- .../src/styled/common/StyledMessageIcon.ts | 6 +- .../src/styled/file-list/StyledFile.spec.tsx | 6 +- .../forms/src/styled/file-list/StyledFile.ts | 22 +-- .../styled/file-upload/StyledFileUpload.ts | 20 +-- .../styled/input-group/StyledInputGroup.ts | 4 +- .../styled/radio/StyledRadioInput.spec.tsx | 2 +- .../src/styled/radio/StyledRadioInput.ts | 6 +- .../src/styled/radio/StyledRadioLabel.ts | 2 +- .../styled/range/StyledRangeInput.spec.tsx | 2 +- .../src/styled/range/StyledRangeInput.ts | 20 +-- .../src/styled/select/StyledSelect.spec.tsx | 2 +- .../forms/src/styled/select/StyledSelect.ts | 8 +- .../src/styled/select/StyledSelectWrapper.ts | 7 +- .../src/styled/text/StyledTextArea.spec.tsx | 2 +- .../styled/text/StyledTextFauxInput.spec.tsx | 16 +- .../src/styled/text/StyledTextFauxInput.ts | 42 ++--- .../src/styled/text/StyledTextInput.spec.tsx | 10 +- .../forms/src/styled/text/StyledTextInput.tsx | 58 +++---- .../src/styled/text/StyledTextMediaInput.ts | 2 +- .../forms/src/styled/text/StyledTextarea.ts | 8 +- .../src/styled/tiles/StyledTileDescription.ts | 8 +- .../forms/src/styled/tiles/StyledTileIcon.ts | 6 +- .../forms/src/styled/tiles/StyledTileLabel.ts | 10 +- 49 files changed, 369 insertions(+), 334 deletions(-) diff --git a/packages/forms/src/elements/Checkbox.tsx b/packages/forms/src/elements/Checkbox.tsx index 7f5693170a0..5aaf90fac2b 100644 --- a/packages/forms/src/elements/Checkbox.tsx +++ b/packages/forms/src/elements/Checkbox.tsx @@ -17,7 +17,7 @@ import useFieldsetContext from '../utils/useFieldsetContext'; * @extends InputHTMLAttributes */ export const Checkbox = React.forwardRef( - ({ indeterminate, children, ...props }, ref) => { + ({ indeterminate, children, isCompact, ...other }, ref) => { const fieldsetContext = useFieldsetContext(); const fieldContext = useFieldContext(); @@ -38,9 +38,9 @@ export const Checkbox = React.forwardRef( }; let combinedProps = { + $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact, ref: combinedRef, - ...props, - ...fieldsetContext + ...other } as any; if (fieldContext) { diff --git a/packages/forms/src/elements/FileUpload.tsx b/packages/forms/src/elements/FileUpload.tsx index 5e9e16d95fc..eb87f782d16 100644 --- a/packages/forms/src/elements/FileUpload.tsx +++ b/packages/forms/src/elements/FileUpload.tsx @@ -18,11 +18,18 @@ import { StyledFileUpload } from '../styled'; * @extends HTMLAttributes */ export const FileUpload = React.forwardRef( - ({ disabled, ...props }, ref) => { + ({ disabled, isCompact, isDragging, ...other }, ref) => { return ( /* [1] */ // eslint-disable-next-line jsx-a11y/prefer-tag-over-role - + ); } ); diff --git a/packages/forms/src/elements/Input.tsx b/packages/forms/src/elements/Input.tsx index 7a576776f44..d9c6079bc77 100644 --- a/packages/forms/src/elements/Input.tsx +++ b/packages/forms/src/elements/Input.tsx @@ -17,35 +17,32 @@ import { StyledTextInput } from '../styled'; * @extends InputHTMLAttributes */ export const Input = React.forwardRef( - ({ onSelect, ...props }, ref) => { + ({ onSelect, isBare, isCompact, focusInset, validation, ...other }, ref) => { const fieldContext = useFieldContext(); const inputGroupContext = useInputGroupContext(); + let combinedProps = other; - const onSelectHandler = props.readOnly + if (fieldContext) { + combinedProps = fieldContext.getInputProps(combinedProps); + } + + const onSelectHandler = other.readOnly ? composeEventHandlers(onSelect, (event: React.SyntheticEvent) => { event.currentTarget.select(); }) : onSelect; - let combinedProps = { - ref, - onSelect: onSelectHandler, - ...props - } as any; - - if (inputGroupContext) { - combinedProps = { - ...combinedProps, - isCompact: inputGroupContext.isCompact || combinedProps.isCompact, - focusInset: props.focusInset === undefined ? true : props.focusInset - }; - } - - if (fieldContext) { - combinedProps = fieldContext.getInputProps(combinedProps); - } - - return ; + return ( + + ); } ); diff --git a/packages/forms/src/elements/MediaInput.tsx b/packages/forms/src/elements/MediaInput.tsx index f56b345aab6..05ffdf2ab34 100644 --- a/packages/forms/src/elements/MediaInput.tsx +++ b/packages/forms/src/elements/MediaInput.tsx @@ -100,7 +100,7 @@ export const MediaInput = React.forwardRef( focusInset={focusInset} readOnly={readOnly} validation={validation} - mediaLayout + $mediaLayout // pass-through prop to StyledTextFauxInput for media layout {...otherWrapperProps} ref={wrapperRef} > diff --git a/packages/forms/src/elements/Radio.tsx b/packages/forms/src/elements/Radio.tsx index c7c284d9672..d96cf091c59 100644 --- a/packages/forms/src/elements/Radio.tsx +++ b/packages/forms/src/elements/Radio.tsx @@ -17,14 +17,14 @@ import useFieldsetContext from '../utils/useFieldsetContext'; * @extends InputHTMLAttributes */ export const Radio = React.forwardRef( - ({ children, ...props }, ref) => { + ({ children, isCompact, ...other }, ref) => { const fieldsetContext = useFieldsetContext(); const fieldContext = useFieldContext(); let combinedProps = { + $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact, ref, - ...props, - ...fieldsetContext + ...other } as any; if (fieldContext) { diff --git a/packages/forms/src/elements/Range.tsx b/packages/forms/src/elements/Range.tsx index 53d73b3ca69..bc71f6211d2 100644 --- a/packages/forms/src/elements/Range.tsx +++ b/packages/forms/src/elements/Range.tsx @@ -16,7 +16,7 @@ import { StyledRangeInput } from '../styled'; * @extends InputHTMLAttributes */ export const Range = React.forwardRef( - ({ hasLowerTrack, min, max, step, ...props }, ref) => { + ({ hasLowerTrack, min, max, step, ...other }, ref) => { const [backgroundSize, setBackgroundSize] = useState('0'); const rangeRef = useRef(); const fieldContext = useFieldContext(); @@ -42,22 +42,22 @@ export const Range = React.forwardRef( useEffect(() => { updateBackgroundWidthFromInput(rangeRef.current!); - }, [rangeRef, updateBackgroundWidthFromInput, props.value]); + }, [rangeRef, updateBackgroundWidthFromInput, other.value]); const onChange = hasLowerTrack - ? composeEventHandlers(props.onChange, (event: ChangeEvent) => { + ? composeEventHandlers(other.onChange, (event: ChangeEvent) => { updateBackgroundWidthFromInput(event.target); }) - : props.onChange; + : other.onChange; let combinedProps = { - ref: mergeRefs([rangeRef, ref]), - hasLowerTrack, - min, + $backgroundSize: backgroundSize, + $hasLowerTrack: hasLowerTrack, max, + min, + ref: mergeRefs([rangeRef, ref]), step, - backgroundSize, - ...props, + ...other, onChange } as any; diff --git a/packages/forms/src/elements/Select.tsx b/packages/forms/src/elements/Select.tsx index 86da5cdb5db..43319beb3fc 100644 --- a/packages/forms/src/elements/Select.tsx +++ b/packages/forms/src/elements/Select.tsx @@ -21,11 +21,11 @@ export const Select = React.forwardRef( const fieldContext = useFieldContext(); let combinedProps = { + $focusInset: focusInset, + $isBare: isBare, + $isCompact: isCompact, + $validation: validation, disabled, - isBare, - isCompact, - validation, - focusInset, ref, ...props } as any; @@ -36,11 +36,11 @@ export const Select = React.forwardRef( return ( {!isBare && ( diff --git a/packages/forms/src/elements/Textarea.tsx b/packages/forms/src/elements/Textarea.tsx index 40df1e533d4..09a0c97c2ac 100644 --- a/packages/forms/src/elements/Textarea.tsx +++ b/packages/forms/src/elements/Textarea.tsx @@ -21,7 +21,22 @@ const parseStyleValue = (value: string) => { * @extends TextareaHTMLAttributes */ export const Textarea = React.forwardRef( - ({ minRows, maxRows, style, onChange, onSelect, ...props }, ref) => { + ( + { + isCompact, + isBare, + focusInset, + isResizable, + minRows, + maxRows, + style, + validation, + onChange, + onSelect, + ...other + }, + ref + ) => { const fieldContext = useFieldContext(); const textAreaRef = useRef(); const shadowTextAreaRef = useRef(null); @@ -30,8 +45,8 @@ export const Textarea = React.forwardRef( height: 0 }); - const isControlled = props.value !== null && props.value !== undefined; - const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !props.isResizable; + const isControlled = other.value !== null && other.value !== undefined; + const isAutoResizable = (minRows !== undefined || maxRows !== undefined) && !isResizable; const calculateHeight = useCallback(() => { if (!isAutoResizable) { @@ -111,22 +126,27 @@ export const Textarea = React.forwardRef( computedStyle.overflow = state.overflow ? 'hidden' : undefined; } - const onSelectHandler = props.readOnly + const onSelectHandler = other.readOnly ? composeEventHandlers(onSelect, (event: React.SyntheticEvent) => { event.currentTarget.select(); }) : onSelect; let combinedProps = { - ref: mergeRefs([textAreaRef, ref]), - rows: minRows, + $focusInset: focusInset, + $isBare: isBare, + $isCompact: isCompact, + $isResizable: isResizable, + $validation: validation, onChange: onChangeHandler, onSelect: onSelectHandler, + ref: mergeRefs([textAreaRef, ref]), + rows: minRows, style: { ...computedStyle, ...style }, - ...props + ...other } as any; if (fieldContext) { @@ -138,15 +158,15 @@ export const Textarea = React.forwardRef( {!!isAutoResizable && ( )} diff --git a/packages/forms/src/elements/Toggle.tsx b/packages/forms/src/elements/Toggle.tsx index eb2cc9d4cc6..3a9f2644992 100644 --- a/packages/forms/src/elements/Toggle.tsx +++ b/packages/forms/src/elements/Toggle.tsx @@ -17,14 +17,14 @@ import useFieldsetContext from '../utils/useFieldsetContext'; * @extends InputHTMLAttributes */ export const Toggle = React.forwardRef( - ({ children, ...props }, ref) => { + ({ children, isCompact, ...other }, ref) => { const fieldsetContext = useFieldsetContext(); const fieldContext = useFieldContext(); let combinedProps = { + $isCompact: fieldsetContext ? fieldsetContext.isCompact : isCompact, ref, - ...props, - ...fieldsetContext + ...other } as any; if (fieldContext) { diff --git a/packages/forms/src/elements/common/Fieldset.tsx b/packages/forms/src/elements/common/Fieldset.tsx index 98db6aece19..7aa2381fe81 100644 --- a/packages/forms/src/elements/common/Fieldset.tsx +++ b/packages/forms/src/elements/common/Fieldset.tsx @@ -12,20 +12,17 @@ import { IFieldsetProps } from '../../types'; import { StyledFieldset } from '../../styled'; import { FieldsetContext } from '../../utils/useFieldsetContext'; -const FieldsetComponent = forwardRef((props, ref) => { - const fieldsetContext = useMemo( - () => ({ - isCompact: props.isCompact - }), - [props.isCompact] - ); +const FieldsetComponent = forwardRef( + ({ isCompact, ...other }, ref) => { + const fieldsetContext = useMemo(() => ({ isCompact }), [isCompact]); - return ( - - - - ); -}); + return ( + + + + ); + } +); FieldsetComponent.displayName = 'Fieldset'; diff --git a/packages/forms/src/elements/common/Label.tsx b/packages/forms/src/elements/common/Label.tsx index bb40203ede7..475ea52e33b 100644 --- a/packages/forms/src/elements/common/Label.tsx +++ b/packages/forms/src/elements/common/Label.tsx @@ -28,100 +28,94 @@ import { ILabelProps } from '../../types'; * * @extends LabelHTMLAttributes */ -export const Label = React.forwardRef((props, ref) => { - const fieldContext = useFieldContext(); - const fieldsetContext = useFieldsetContext(); - const type = useInputContext(); +export const Label = React.forwardRef( + ({ children, isRegular, ...other }, ref) => { + const fieldContext = useFieldContext(); + const fieldsetContext = useFieldsetContext(); + const type = useInputContext(); - let combinedProps = props; + const $isRegular = fieldsetContext && isRegular === undefined ? true : isRegular; + let combinedProps = other; - if (fieldContext) { - combinedProps = fieldContext.getLabelProps(combinedProps); + if (fieldContext) { + combinedProps = fieldContext.getLabelProps(combinedProps); - if (type === undefined) { - const { setIsLabelActive, setIsLabelHovered } = fieldContext; + if (type === undefined) { + const { setIsLabelActive, setIsLabelHovered } = fieldContext; - combinedProps = { - ...combinedProps, - onMouseUp: composeEventHandlers(props.onMouseUp, () => { + combinedProps.onMouseUp = composeEventHandlers(other.onMouseUp, () => { setIsLabelActive(false); - }), - onMouseDown: composeEventHandlers(props.onMouseDown, () => { + }); + combinedProps.onMouseDown = composeEventHandlers(other.onMouseDown, () => { setIsLabelActive(true); - }), - onMouseEnter: composeEventHandlers(props.onMouseEnter, () => { + }); + combinedProps.onMouseEnter = composeEventHandlers(other.onMouseEnter, () => { setIsLabelHovered(true); - }), - onMouseLeave: composeEventHandlers(props.onMouseLeave, () => { + }); + combinedProps.onMouseLeave = composeEventHandlers(other.onMouseLeave, () => { setIsLabelHovered(false); - }) - }; + }); + } } - } - if (fieldsetContext) { - combinedProps = { - ...combinedProps, - isRegular: combinedProps.isRegular === undefined ? true : combinedProps.isRegular - }; - } - - if (type === 'radio') { - return ( - - - {props.children} - - ); - } else if (type === 'checkbox') { - /** - * `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox - * See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506 - */ - const onLabelSelect = (e: React.KeyboardEvent) => { - // eslint-disable-next-line n/no-unsupported-features/node-builtins - const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1; - - if (fieldContext && isFirefox && e.target instanceof Element) { - const inputId = e.target.getAttribute('for'); - - if (!inputId) return; - - const input = document.getElementById(inputId) as HTMLInputElement | null; - - if (input && input.type === 'checkbox') { - if (e.shiftKey) { - input.click(); - input.checked = true; + if (type === 'radio') { + return ( + + + {children} + + ); + } else if (type === 'checkbox') { + /** + * `onLabelSelect` is a workaround for checkbox label `shift + click` bug in Firefox + * See: https://bugzilla.mozilla.org/show_bug.cgi?id=559506 + */ + const onLabelSelect = (e: React.KeyboardEvent) => { + // eslint-disable-next-line n/no-unsupported-features/node-builtins + const isFirefox = navigator?.userAgent.toLowerCase().indexOf('firefox') > -1; + + if (fieldContext && isFirefox && e.target instanceof Element) { + const inputId = e.target.getAttribute('for'); + + if (!inputId) return; + + const input = document.getElementById(inputId) as HTMLInputElement | null; + + if (input && input.type === 'checkbox') { + if (e.shiftKey) { + input.click(); + input.checked = true; + } + input.focus(); } - input.focus(); } - } - }; + }; - combinedProps = { - ...combinedProps, - onClick: composeEventHandlers(combinedProps.onClick, onLabelSelect) - }; + combinedProps.onClick = composeEventHandlers(combinedProps.onClick, onLabelSelect); + + return ( + + + + {children} + + ); + } else if (type === 'toggle') { + return ( + + + {children} + + ); + } return ( - - - - {props.children} - - ); - } else if (type === 'toggle') { - return ( - - - {props.children} - + + {children} + ); } - - return ; -}); +); Label.displayName = 'Field.Label'; diff --git a/packages/forms/src/elements/common/Legend.tsx b/packages/forms/src/elements/common/Legend.tsx index ead832c518f..10ff8682f7f 100644 --- a/packages/forms/src/elements/common/Legend.tsx +++ b/packages/forms/src/elements/common/Legend.tsx @@ -7,13 +7,10 @@ import React, { forwardRef, HTMLAttributes } from 'react'; import { StyledLegend } from '../../styled'; -import useFieldsetContext from '../../utils/useFieldsetContext'; const LegendComponent = forwardRef>( (props, ref) => { - const fieldsetContext = useFieldsetContext(); - - return ; + return ; } ); diff --git a/packages/forms/src/elements/common/Message.tsx b/packages/forms/src/elements/common/Message.tsx index 3475d903dc8..9355fd7700b 100644 --- a/packages/forms/src/elements/common/Message.tsx +++ b/packages/forms/src/elements/common/Message.tsx @@ -26,7 +26,7 @@ import { * @extends HTMLAttributes */ export const Message = React.forwardRef( - ({ validation, validationLabel, children, ...props }, ref) => { + ({ validation, validationLabel, children, ...other }, ref) => { const { hasMessage, setHasMessage, getMessageProps } = useFieldContext() || {}; const type = useInputContext(); @@ -54,7 +54,7 @@ export const Message = React.forwardRef( MessageComponent = StyledMessage; } - let combinedProps = { validation, validationLabel, ...props }; + let combinedProps = { $validation: validation, validationLabel, ...other }; if (getMessageProps) { combinedProps = getMessageProps(combinedProps); diff --git a/packages/forms/src/elements/faux-input/FauxInput.tsx b/packages/forms/src/elements/faux-input/FauxInput.tsx index 11b2202f788..3311a856904 100644 --- a/packages/forms/src/elements/faux-input/FauxInput.tsx +++ b/packages/forms/src/elements/faux-input/FauxInput.tsx @@ -14,7 +14,22 @@ import { StartIcon } from './components/StartIcon'; import { EndIcon } from './components/EndIcon'; const FauxInputComponent = forwardRef( - ({ onFocus, onBlur, disabled, readOnly, isFocused: controlledIsFocused, ...props }, ref) => { + ( + { + disabled, + focusInset, + isBare, + isCompact, + isFocused: controlledIsFocused, + isHovered, + onBlur, + onFocus, + readOnly, + validation, + ...other + }, + ref + ) => { const [isFocused, setIsFocused] = useState(false); const onFocusHandler = composeEventHandlers(onFocus, () => { @@ -29,12 +44,17 @@ const FauxInputComponent = forwardRef( ); diff --git a/packages/forms/src/elements/file-list/components/File.tsx b/packages/forms/src/elements/file-list/components/File.tsx index a82643ce0a4..bc23f8b3805 100644 --- a/packages/forms/src/elements/file-list/components/File.tsx +++ b/packages/forms/src/elements/file-list/components/File.tsx @@ -23,9 +23,9 @@ const FileComponent = forwardRef( {!!validationType && ( diff --git a/packages/forms/src/elements/input-group/InputGroup.spec.tsx b/packages/forms/src/elements/input-group/InputGroup.spec.tsx index 84684e8a32a..9ed8f02461d 100644 --- a/packages/forms/src/elements/input-group/InputGroup.spec.tsx +++ b/packages/forms/src/elements/input-group/InputGroup.spec.tsx @@ -7,14 +7,14 @@ import React from 'react'; import { render, fireEvent, renderRtl } from 'garden-test-utils'; -import { Field, Label, Input, InputGroup } from '../..'; +import { Field, Input, InputGroup } from '../..'; describe('InputGroup', () => { it('passes ref to underlying DOM element', () => { const ref = React.createRef(); const { getByTestId } = render( - + Input @@ -27,7 +27,7 @@ describe('InputGroup', () => { it('applies focusInset styling to Input through context', () => { const { getByLabelText } = render( - + Input @@ -47,7 +47,7 @@ describe('InputGroup', () => { it('applies correct styling to prepend elements', () => { const { getByText } = render( - + Input @@ -80,7 +80,7 @@ describe('InputGroup', () => { it('applies correct styling to prepend elements in RTL mode', () => { const { getByText } = renderRtl( - + Input diff --git a/packages/forms/src/elements/input-group/InputGroup.tsx b/packages/forms/src/elements/input-group/InputGroup.tsx index 3826239cd77..0f922634e0d 100644 --- a/packages/forms/src/elements/input-group/InputGroup.tsx +++ b/packages/forms/src/elements/input-group/InputGroup.tsx @@ -15,12 +15,12 @@ import { StyledInputGroup } from '../../styled'; * @extends HTMLAttributes */ export const InputGroup = React.forwardRef( - ({ isCompact, ...props }, ref) => { + ({ isCompact, ...other }, ref) => { const contextValue = useMemo(() => ({ isCompact }), [isCompact]); return ( - + ); } diff --git a/packages/forms/src/elements/tiles/components/Description.tsx b/packages/forms/src/elements/tiles/components/Description.tsx index 07ad2a42f1d..55ded9ecb26 100644 --- a/packages/forms/src/elements/tiles/components/Description.tsx +++ b/packages/forms/src/elements/tiles/components/Description.tsx @@ -13,7 +13,7 @@ const DescriptionComponent = forwardRef { const tilesContext = useTilesContext(); - return ; + return ; } ); diff --git a/packages/forms/src/elements/tiles/components/Icon.tsx b/packages/forms/src/elements/tiles/components/Icon.tsx index 18f9bfc23c9..70e21eb25ed 100644 --- a/packages/forms/src/elements/tiles/components/Icon.tsx +++ b/packages/forms/src/elements/tiles/components/Icon.tsx @@ -12,7 +12,7 @@ import { StyledTileIcon } from '../../../styled'; const IconComponent = forwardRef>((props, ref) => { const tileContext = useTilesContext(); - return ; + return ; }); IconComponent.displayName = 'Tiles.Icon'; diff --git a/packages/forms/src/elements/tiles/components/Label.tsx b/packages/forms/src/elements/tiles/components/Label.tsx index 53ae575b47a..a7b06a36512 100644 --- a/packages/forms/src/elements/tiles/components/Label.tsx +++ b/packages/forms/src/elements/tiles/components/Label.tsx @@ -26,7 +26,7 @@ const LabelComponent = forwardRef ); diff --git a/packages/forms/src/styled/common/StyledFieldset.ts b/packages/forms/src/styled/common/StyledFieldset.ts index 90b1dd1839c..6407b5b2d22 100644 --- a/packages/forms/src/styled/common/StyledFieldset.ts +++ b/packages/forms/src/styled/common/StyledFieldset.ts @@ -12,7 +12,7 @@ import { StyledField } from './StyledField'; const COMPONENT_ID = 'forms.fieldset'; interface IStyledFieldsetProps { - isCompact?: boolean; + $isCompact?: boolean; } export const StyledFieldset = styled(StyledField as 'fieldset').attrs({ @@ -21,7 +21,7 @@ export const StyledFieldset = styled(StyledField as 'fieldset').attrs({ 'data-garden-version': PACKAGE_VERSION })` ${StyledField} { - margin-top: ${props => props.theme.space.base * (props.isCompact ? 1 : 2)}px; + margin-top: ${props => props.theme.space.base * (props.$isCompact ? 1 : 2)}px; } ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/forms/src/styled/common/StyledLabel.spec.tsx b/packages/forms/src/styled/common/StyledLabel.spec.tsx index 3a84d8db955..d73d4b8c3db 100644 --- a/packages/forms/src/styled/common/StyledLabel.spec.tsx +++ b/packages/forms/src/styled/common/StyledLabel.spec.tsx @@ -18,7 +18,7 @@ describe('StyledLabel', () => { }); it('renders regular font weight styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule( 'font-weight', diff --git a/packages/forms/src/styled/common/StyledLabel.ts b/packages/forms/src/styled/common/StyledLabel.ts index 9f7d536544e..12906e01d9a 100644 --- a/packages/forms/src/styled/common/StyledLabel.ts +++ b/packages/forms/src/styled/common/StyledLabel.ts @@ -12,8 +12,8 @@ import { retrieveComponentStyles, getLineHeight, getColor } from '@zendeskgarden const COMPONENT_ID = 'forms.input_label'; export interface IStyledLabelProps { - isRegular?: boolean; - isRadio?: boolean; + $isRegular?: boolean; + $isRadio?: boolean; } /** @@ -29,15 +29,15 @@ export const StyledLabel = styled.label.attrs(props => ({ color: ${props => getColor({ theme: props.theme, variable: 'foreground.default' })}; font-size: ${props => props.theme.fontSizes.md}; font-weight: ${props => - props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold}; + props.$isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold}; &[hidden] { - display: ${props => (props.isRadio ? 'inline-block' : 'inline')}; /* [1] */ - vertical-align: ${props => props.isRadio && 'top'}; - text-indent: ${props => props.isRadio && '-100%'}; - font-size: ${props => props.isRadio && '0'}; + display: ${props => (props.$isRadio ? 'inline-block' : 'inline')}; /* [1] */ + vertical-align: ${props => props.$isRadio && 'top'}; + text-indent: ${props => props.$isRadio && '-100%'}; + font-size: ${props => props.$isRadio && '0'}; - ${props => !props.isRadio && hideVisually()}; + ${props => !props.$isRadio && hideVisually()}; } ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/forms/src/styled/common/StyledLegend.ts b/packages/forms/src/styled/common/StyledLegend.ts index 354e410d4b4..2485f0bfa22 100644 --- a/packages/forms/src/styled/common/StyledLegend.ts +++ b/packages/forms/src/styled/common/StyledLegend.ts @@ -11,10 +11,6 @@ import { StyledLabel } from './StyledLabel'; const COMPONENT_ID = 'forms.fieldset_legend'; -interface IStyledLegend { - isCompact?: boolean; -} - /** * 1. Reset for . */ @@ -22,7 +18,7 @@ export const StyledLegend = styled(StyledLabel as 'legend').attrs({ as: 'legend', 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION -})` +})` padding: 0; /* [1] */ ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/forms/src/styled/common/StyledMessage.spec.tsx b/packages/forms/src/styled/common/StyledMessage.spec.tsx index 68bdc03fc8b..85f355c039d 100644 --- a/packages/forms/src/styled/common/StyledMessage.spec.tsx +++ b/packages/forms/src/styled/common/StyledMessage.spec.tsx @@ -26,19 +26,19 @@ describe('StyledMessage', () => { describe('Validation', () => { it('renders "success" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.green[700]); }); it('renders "warning" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.yellow[700]); }); it('renders "error" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('color', PALETTE.red[700]); }); diff --git a/packages/forms/src/styled/common/StyledMessage.ts b/packages/forms/src/styled/common/StyledMessage.ts index 0587f46a437..b39068fbb83 100644 --- a/packages/forms/src/styled/common/StyledMessage.ts +++ b/packages/forms/src/styled/common/StyledMessage.ts @@ -13,19 +13,19 @@ import { StyledMessageIcon } from './StyledMessageIcon'; import { StyledLabel } from './StyledLabel'; export interface IStyledMessageProps { - validation?: Validation; + $validation?: Validation; } const COMPONENT_ID = 'forms.input_message'; -const colorStyles = ({ theme, validation }: IStyledMessageProps & ThemeProps) => { +const colorStyles = ({ theme, $validation }: IStyledMessageProps & ThemeProps) => { let variable; - if (validation === 'error') { + if ($validation === 'error') { variable = 'foreground.danger'; - } else if (validation === 'success') { + } else if ($validation === 'success') { variable = 'foreground.success'; - } else if (validation === 'warning') { + } else if ($validation === 'warning') { variable = 'foreground.warning'; } else { variable = 'foreground.subtle'; @@ -38,11 +38,11 @@ const colorStyles = ({ theme, validation }: IStyledMessageProps & ThemeProps) => { +const sizeStyles = ({ theme, $validation }: IStyledMessageProps & ThemeProps) => { const fontSize = theme.fontSizes.sm; const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm); const marginTop = `${theme.space.base}px`; - const paddingHorizontal = validation + const paddingHorizontal = $validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined; diff --git a/packages/forms/src/styled/common/StyledMessageIcon.ts b/packages/forms/src/styled/common/StyledMessageIcon.ts index 1c1b6826033..09ebce9a243 100644 --- a/packages/forms/src/styled/common/StyledMessageIcon.ts +++ b/packages/forms/src/styled/common/StyledMessageIcon.ts @@ -35,8 +35,12 @@ const MessageIcon: React.FC> = ({ const COMPONENT_ID = 'forms.input_message_icon'; +/** + * 1. Cannnot use transient prop `$validation`. + * MessageIcon is not a styled component and will not receive the prop. + */ interface IStyledMessageIconProps { - validation?: Validation; + validation?: Validation /* [1] */; } export const StyledMessageIcon = styled(MessageIcon).attrs({ diff --git a/packages/forms/src/styled/file-list/StyledFile.spec.tsx b/packages/forms/src/styled/file-list/StyledFile.spec.tsx index 0414d9995a6..c454eebc5ae 100644 --- a/packages/forms/src/styled/file-list/StyledFile.spec.tsx +++ b/packages/forms/src/styled/file-list/StyledFile.spec.tsx @@ -19,20 +19,20 @@ describe('StyledFile', () => { }); it('renders expected compact styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('height', '28px'); }); describe('validation', () => { it('renders expected success styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.green[700]); }); it('renders expected error styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.red[700]); }); diff --git a/packages/forms/src/styled/file-list/StyledFile.ts b/packages/forms/src/styled/file-list/StyledFile.ts index 0479a02997d..ada3181809f 100644 --- a/packages/forms/src/styled/file-list/StyledFile.ts +++ b/packages/forms/src/styled/file-list/StyledFile.ts @@ -18,25 +18,25 @@ import { StyledFileClose } from './StyledFileClose'; const COMPONENT_ID = 'forms.file'; interface IStyledFileProps { - isCompact?: boolean; - focusInset?: boolean; - validation?: FileValidation; + $isCompact?: boolean; + $focusInset?: boolean; + $validation?: FileValidation; } const colorStyles = ({ theme, - focusInset, - validation + $focusInset, + $validation }: IStyledFileProps & ThemeProps) => { let borderVariable; let focusBorderVariable; let foregroundVariable; - if (validation === 'success') { + if ($validation === 'success') { borderVariable = 'border.successEmphasis'; focusBorderVariable = borderVariable; foregroundVariable = 'foreground.success'; - } else if (validation === 'error') { + } else if ($validation === 'error') { borderVariable = 'border.dangerEmphasis'; focusBorderVariable = borderVariable; foregroundVariable = 'foreground.danger'; @@ -56,16 +56,16 @@ const colorStyles = ({ ${focusStyles({ theme, - inset: focusInset, + inset: $focusInset, color: { variable: focusBorderVariable }, styles: { borderColor: focusBorderColor } })} `; }; -const sizeStyles = ({ theme, isCompact }: IStyledFileProps & ThemeProps) => { - const size = `${theme.space.base * (isCompact ? 7 : 10)}px`; - const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`; +const sizeStyles = ({ theme, $isCompact }: IStyledFileProps & ThemeProps) => { + const size = `${theme.space.base * ($isCompact ? 7 : 10)}px`; + const spacing = `${theme.space.base * ($isCompact ? 2 : 3)}px`; const fontSize = theme.fontSizes.md; const lineHeight = getLineHeight(theme.space.base * 5, fontSize); diff --git a/packages/forms/src/styled/file-upload/StyledFileUpload.ts b/packages/forms/src/styled/file-upload/StyledFileUpload.ts index adca85108de..ce889493ef9 100644 --- a/packages/forms/src/styled/file-upload/StyledFileUpload.ts +++ b/packages/forms/src/styled/file-upload/StyledFileUpload.ts @@ -20,11 +20,11 @@ import { StyledMessage } from '../common/StyledMessage'; const COMPONENT_ID = 'forms.file_upload'; interface IStyledFileUploadProps { - isDragging?: boolean; - isCompact?: boolean; + $isDragging?: boolean; + $isCompact?: boolean; } -const colorStyles = ({ theme, isDragging }: ThemeProps & IStyledFileUploadProps) => { +const colorStyles = ({ theme, $isDragging }: ThemeProps & IStyledFileUploadProps) => { const borderOptions = { theme, variable: 'border.primaryEmphasis' }; const backgroundOptions = { theme, variable: 'background.primaryEmphasis' }; const foregroundOptions = { theme, variable: 'foreground.primary' }; @@ -46,9 +46,9 @@ const colorStyles = ({ theme, isDragging }: ThemeProps & IStyledFi const disabledForegroundColor = getColor({ theme, variable: 'foreground.disabled' }); return css` - border-color: ${isDragging ? activeBorderColor : borderColor}; - background-color: ${isDragging ? activeBackgroundColor : undefined}; - color: ${isDragging ? activeForegroundColor : foregroundColor}; + border-color: ${$isDragging ? activeBorderColor : borderColor}; + background-color: ${$isDragging ? activeBackgroundColor : undefined}; + color: ${$isDragging ? activeForegroundColor : foregroundColor}; &:hover { border-color: ${hoverBorderColor}; @@ -72,11 +72,11 @@ const colorStyles = ({ theme, isDragging }: ThemeProps & IStyledFi `; }; -const sizeStyles = ({ theme, isCompact }: ThemeProps & IStyledFileUploadProps) => { - const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`; - const paddingHorizontal = `${isCompact ? 2 : 4}em`; +const sizeStyles = ({ theme, $isCompact }: ThemeProps & IStyledFileUploadProps) => { + const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`; + const paddingHorizontal = `${$isCompact ? 2 : 4}em`; const paddingVertical = math( - `${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}` + `${theme.space.base * ($isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}` ); const fontSize = theme.fontSizes.md; const lineHeight = getLineHeight(theme.space.base * 5, fontSize); diff --git a/packages/forms/src/styled/input-group/StyledInputGroup.ts b/packages/forms/src/styled/input-group/StyledInputGroup.ts index e0367caa81f..5785353b582 100644 --- a/packages/forms/src/styled/input-group/StyledInputGroup.ts +++ b/packages/forms/src/styled/input-group/StyledInputGroup.ts @@ -15,14 +15,14 @@ import { StyledMessage } from '../common/StyledMessage'; const COMPONENT_ID = 'forms.input_group'; interface IStyledInputGroupProps { - isCompact?: boolean; + $isCompact?: boolean; } /** * [1] - Override the default `width: 100%` style */ const positionStyles = (props: ThemeProps & IStyledInputGroupProps) => { - const topMargin = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`; + const topMargin = `${props.theme.space.base * (props.$isCompact ? 1 : 2)}px`; return css` ${StyledLabel}:not([hidden]) + &&, diff --git a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx index 3bec59a8374..32cb7fe24a8 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx +++ b/packages/forms/src/styled/radio/StyledRadioInput.spec.tsx @@ -39,7 +39,7 @@ describe('StyledRadioInput', () => { }); it('renders compact styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('margin-top', '4px', { modifier: `&& ~ ${StyledRadioLabel} ~ ${StyledMessage}` diff --git a/packages/forms/src/styled/radio/StyledRadioInput.ts b/packages/forms/src/styled/radio/StyledRadioInput.ts index f301c99189c..643dfea257d 100644 --- a/packages/forms/src/styled/radio/StyledRadioInput.ts +++ b/packages/forms/src/styled/radio/StyledRadioInput.ts @@ -93,14 +93,14 @@ const colorStyles = ({ theme }: ThemeProps) => { `; }; -const sizeStyles = ({ theme, isCompact }: IStyledRadioInputProps & ThemeProps) => { +const sizeStyles = ({ theme, $isCompact }: IStyledRadioInputProps & ThemeProps) => { const lineHeight = `${theme.space.base * 5}px`; /* from StyledLabel */ const size = `${theme.space.base * 4}px`; const top = math(`(${lineHeight} - ${size}) / 2`); const iconSize = theme.iconSizes.sm; const iconPosition = math(`(${size} - ${iconSize}) / 2`); const iconTop = math(`${iconPosition} + ${top}`); - const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`; + const marginTop = `${theme.space.base * ($isCompact ? 1 : 2)}px`; return css` top: ${top}; @@ -130,7 +130,7 @@ const sizeStyles = ({ theme, isCompact }: IStyledRadioInputProps & ThemeProps) => { export const StyledRadioLabel = styled(StyledLabel).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - isRadio: true + $isRadio: true })` display: inline-block; /* [1] */ position: relative; diff --git a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx index c31b340e089..5f37a27cb73 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.spec.tsx +++ b/packages/forms/src/styled/range/StyledRangeInput.spec.tsx @@ -22,7 +22,7 @@ describe('StyledRangeInput', () => { }); it('renders expected background-size styling', () => { - const { container } = render(); + const { container } = render(); expect((container.firstChild as any).style.backgroundSize).toBe('50%'); }); diff --git a/packages/forms/src/styled/range/StyledRangeInput.ts b/packages/forms/src/styled/range/StyledRangeInput.ts index ae105581b67..bf7e8f8e4bb 100644 --- a/packages/forms/src/styled/range/StyledRangeInput.ts +++ b/packages/forms/src/styled/range/StyledRangeInput.ts @@ -68,7 +68,7 @@ const trackLowerStyles = (styles: string, modifier = '') => { */ const colorStyles = ({ theme, - hasLowerTrack + $hasLowerTrack }: ThemeProps & IStyledRangeInputProps) => { const options = { theme, variable: 'background.primaryEmphasis' }; const thumbBackgroundColor = getColor(options); @@ -99,8 +99,8 @@ const colorStyles = ({ dark: { offset: 100 }, light: { offset: -200 } }); - const trackLowerBackgroundColor = hasLowerTrack ? thumbBackgroundColor : ''; - const trackBackgroundImage = hasLowerTrack + const trackLowerBackgroundColor = $hasLowerTrack ? thumbBackgroundColor : ''; + const trackBackgroundImage = $hasLowerTrack ? `linear-gradient(${trackLowerBackgroundColor}, ${trackLowerBackgroundColor})` : ''; const trackDisabledBackgroundColor = getColor({ @@ -108,10 +108,10 @@ const colorStyles = ({ variable: 'background.disabled', transparency: theme.opacity[200] }); - const trackDisabledLowerBackgroundColor = hasLowerTrack + const trackDisabledLowerBackgroundColor = $hasLowerTrack ? getColor({ theme, variable: 'border.emphasis' }) : ''; - const trackDisabledBackgroundImage = hasLowerTrack + const trackDisabledBackgroundImage = $hasLowerTrack ? `linear-gradient(${trackDisabledLowerBackgroundColor}, ${trackDisabledLowerBackgroundColor})` : ''; @@ -223,8 +223,8 @@ const sizeStyles = ({ theme }: ThemeProps) => { }; interface IStyledRangeInputProps { - backgroundSize?: number | string; - hasLowerTrack?: boolean; + $backgroundSize?: number | string; + $hasLowerTrack?: boolean; } export const StyledRangeInput = styled.input.attrs(props => ({ @@ -232,7 +232,7 @@ export const StyledRangeInput = styled.input.attrs(props 'data-garden-version': PACKAGE_VERSION, type: 'range', style: { - backgroundSize: props.hasLowerTrack && props.backgroundSize + backgroundSize: props.$hasLowerTrack && props.$backgroundSize } }))` appearance: none; @@ -294,7 +294,7 @@ export const StyledRangeInput = styled.input.attrs(props `; StyledRangeInput.defaultProps = { - backgroundSize: '0%', - hasLowerTrack: true, + $backgroundSize: '0%', + $hasLowerTrack: true, theme: DEFAULT_THEME }; diff --git a/packages/forms/src/styled/select/StyledSelect.spec.tsx b/packages/forms/src/styled/select/StyledSelect.spec.tsx index 95f2209bf00..f4b184d7a2c 100644 --- a/packages/forms/src/styled/select/StyledSelect.spec.tsx +++ b/packages/forms/src/styled/select/StyledSelect.spec.tsx @@ -17,7 +17,7 @@ describe('StyledSelect', () => { }); it('renders bare styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).not.toHaveStyleRule('padding-right'); }); diff --git a/packages/forms/src/styled/select/StyledSelect.ts b/packages/forms/src/styled/select/StyledSelect.ts index aba02625161..e14d067e437 100644 --- a/packages/forms/src/styled/select/StyledSelect.ts +++ b/packages/forms/src/styled/select/StyledSelect.ts @@ -38,11 +38,11 @@ const colorStyles = ({ theme }: IStyledTextInputProps & ThemeProps const sizeStyles = ({ theme, - isBare, - isCompact + $isBare, + $isCompact }: IStyledTextInputProps & ThemeProps) => { - const padding = isBare ? undefined : math(`${theme.iconSizes.md} + ${theme.space.base * 5}`); - const iconVerticalPosition = `${theme.space.base * (isCompact ? 1.5 : 2.5) + 1}px`; + const padding = $isBare ? undefined : math(`${theme.iconSizes.md} + ${theme.space.base * 5}`); + const iconVerticalPosition = `${theme.space.base * ($isCompact ? 1.5 : 2.5) + 1}px`; const iconHorizontalPosition = `${theme.space.base * 3}px`; return css` diff --git a/packages/forms/src/styled/select/StyledSelectWrapper.ts b/packages/forms/src/styled/select/StyledSelectWrapper.ts index 4a71a124c7e..b161c3531d3 100644 --- a/packages/forms/src/styled/select/StyledSelectWrapper.ts +++ b/packages/forms/src/styled/select/StyledSelectWrapper.ts @@ -15,8 +15,11 @@ const COMPONENT_ID = 'forms.select_wrapper'; /* * 1. Prevent a 2px height bump between `Select` and `Input` due to the faux wrapper border */ -const sizeStyles = ({ theme, isCompact }: IStyledTextFauxInputProps & ThemeProps) => { - const height = `${theme.space.base * (isCompact ? 8 : 10)}px`; +const sizeStyles = ({ + theme, + $isCompact +}: IStyledTextFauxInputProps & ThemeProps) => { + const height = `${theme.space.base * ($isCompact ? 8 : 10)}px`; return css` max-height: ${height}; /* [1] */ diff --git a/packages/forms/src/styled/text/StyledTextArea.spec.tsx b/packages/forms/src/styled/text/StyledTextArea.spec.tsx index 17d1fb4dcf6..b5418d011a5 100644 --- a/packages/forms/src/styled/text/StyledTextArea.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextArea.spec.tsx @@ -17,7 +17,7 @@ describe('StyledTextarea', () => { }); it('renders resizable styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('resize', 'vertical'); }); diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx b/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx index 3147bb75c54..5ce8f32dcfb 100644 --- a/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextFauxInput.spec.tsx @@ -19,50 +19,50 @@ describe('StyledTextInput', () => { }); it('renders media layout styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('display', 'inline-flex'); }); it('renders compact styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('min-height', '32px'); }); it('renders bare styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border', 'none'); }); it('renders expected readonly styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveAttribute('aria-readonly'); }); it('renders expected disabled styling', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveAttribute('aria-disabled'); }); describe('Validation', () => { it('renders "success" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.green[700]); }); it('renders "warning" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[700]); }); it('renders "error" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.red[700]); }); diff --git a/packages/forms/src/styled/text/StyledTextFauxInput.ts b/packages/forms/src/styled/text/StyledTextFauxInput.ts index f2ebb8ecd4a..c8d201309e8 100644 --- a/packages/forms/src/styled/text/StyledTextFauxInput.ts +++ b/packages/forms/src/styled/text/StyledTextFauxInput.ts @@ -18,27 +18,27 @@ import { StyledTextMediaFigure } from './StyledTextMediaFigure'; const COMPONENT_ID = 'forms.faux_input'; export interface IStyledTextFauxInputProps extends IStyledTextInputProps { - mediaLayout?: boolean; - isDisabled?: boolean; - isReadOnly?: boolean; + $mediaLayout?: boolean; + $isDisabled?: boolean; + $isReadOnly?: boolean; } const colorStyles = ({ theme, - validation, - focusInset, - isBare, - isFocused + $validation, + $focusInset, + $isBare, + $isFocused }: IStyledTextFauxInputProps & ThemeProps) => { let borderVariable: string | undefined; let focusBorderColor: string | undefined; - if (validation) { - if (validation === 'success') { + if ($validation) { + if ($validation === 'success') { borderVariable = 'border.successEmphasis'; - } else if (validation === 'warning') { + } else if ($validation === 'warning') { borderVariable = 'border.warningEmphasis'; - } else if (validation === 'error') { + } else if ($validation === 'error') { borderVariable = 'border.dangerEmphasis'; } @@ -51,11 +51,11 @@ const colorStyles = ({ return css` ${focusStyles({ theme, - inset: focusInset, + inset: $focusInset, color: { variable: borderVariable }, - selector: isFocused ? '&' : '&:focus-within', + selector: $isFocused ? '&' : '&:focus-within', styles: { borderColor: focusBorderColor }, - condition: !isBare + condition: !$isBare })} `; }; @@ -67,20 +67,20 @@ export const StyledTextFauxInput = styled( StyledTextInput as 'div' ).attrs(props => ({ as: 'div', - 'aria-readonly': props.isReadOnly, - 'aria-disabled': props.isDisabled, + 'aria-readonly': props.$isReadOnly, + 'aria-disabled': props.$isDisabled, 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION }))` - display: ${props => (props.mediaLayout ? 'inline-flex' : 'inline-block')}; - align-items: ${props => props.mediaLayout && 'baseline'}; - cursor: ${props => (props.mediaLayout && !props.isDisabled ? 'text' : 'default')}; + display: ${props => (props.$mediaLayout ? 'inline-flex' : 'inline-block')}; + align-items: ${props => props.$mediaLayout && 'baseline'}; + cursor: ${props => (props.$mediaLayout && !props.$isDisabled ? 'text' : 'default')}; overflow: hidden; ${colorStyles} & > ${StyledTextInput} { - vertical-align: ${props => !props.mediaLayout && 'baseline'}; + vertical-align: ${props => !props.$mediaLayout && 'baseline'}; ${SELECTOR_FOCUS_VISIBLE} { box-shadow: unset; /* [1] */ @@ -88,7 +88,7 @@ export const StyledTextFauxInput = styled( } & > ${StyledTextMediaFigure} { - flex-shrink: ${props => props.mediaLayout && '0'}; + flex-shrink: ${props => props.$mediaLayout && '0'}; } ${props => retrieveComponentStyles(COMPONENT_ID, props)}; diff --git a/packages/forms/src/styled/text/StyledTextInput.spec.tsx b/packages/forms/src/styled/text/StyledTextInput.spec.tsx index a106048a5a1..ad001e7905d 100644 --- a/packages/forms/src/styled/text/StyledTextInput.spec.tsx +++ b/packages/forms/src/styled/text/StyledTextInput.spec.tsx @@ -19,13 +19,13 @@ describe('StyledTextInput', () => { }); it('renders compact styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('min-height', '32px'); }); it('renders bare styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border', 'none'); }); @@ -56,19 +56,19 @@ describe('StyledTextInput', () => { describe('Validation', () => { it('renders "success" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.green[700]); }); it('renders "warning" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.yellow[700]); }); it('renders "error" styling if provided', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toHaveStyleRule('border-color', PALETTE.red[700]); }); diff --git a/packages/forms/src/styled/text/StyledTextInput.tsx b/packages/forms/src/styled/text/StyledTextInput.tsx index 63d8b35bf64..92d1555dd52 100644 --- a/packages/forms/src/styled/text/StyledTextInput.tsx +++ b/packages/forms/src/styled/text/StyledTextInput.tsx @@ -29,13 +29,13 @@ const isInvalid = (validation?: Validation) => { const colorStyles = ({ theme, - isBare, - isHovered, - focusInset, - validation + $isBare, + $isHovered, + $focusInset, + $validation }: IStyledTextInputProps & ThemeProps) => { const foregroundColor = getColor({ theme, variable: 'foreground.default' }); - const backgroundColor = isBare + const backgroundColor = $isBare ? 'transparent' : getColor({ theme, variable: 'background.default' }); let borderColor: string | undefined; @@ -43,12 +43,12 @@ const colorStyles = ({ let borderVariable: string | undefined; let focusBorderColor: string | undefined; - if (validation) { - if (validation === 'success') { + if ($validation) { + if ($validation === 'success') { borderVariable = 'border.successEmphasis'; - } else if (validation === 'warning') { + } else if ($validation === 'warning') { borderVariable = 'border.warningEmphasis'; - } else if (validation === 'error') { + } else if ($validation === 'error') { borderVariable = 'border.dangerEmphasis'; } @@ -67,7 +67,7 @@ const colorStyles = ({ focusBorderColor = hoverBorderColor; } - const disabledBackgroundColor = isBare + const disabledBackgroundColor = $isBare ? undefined : getColor({ theme, variable: 'background.disabled' }); const disabledBorderColor = getColor({ theme, variable: 'border.disabled' }); @@ -79,7 +79,7 @@ const colorStyles = ({ const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`; return css` - border-color: ${isHovered ? hoverBorderColor : borderColor}; + border-color: ${$isHovered ? hoverBorderColor : borderColor}; background-color: ${backgroundColor}; color: ${foregroundColor}; @@ -107,10 +107,10 @@ const colorStyles = ({ ${focusStyles({ theme, - inset: focusInset, + inset: $focusInset, color: { variable: borderVariable }, styles: { borderColor: focusBorderColor }, - condition: !isBare + condition: !$isBare })} &::-webkit-calendar-picker-indicator:focus-visible { @@ -128,8 +128,8 @@ const colorStyles = ({ const sizeStyles = ({ theme, - isBare, - isCompact + $isBare, + $isCompact }: IStyledTextInputProps & ThemeProps) => { const fontSize = theme.fontSizes.md; const paddingHorizontal = `${theme.space.base * 3}px`; @@ -138,7 +138,7 @@ const sizeStyles = ({ let browseFontSize; let swatchHeight; - if (isCompact) { + if ($isCompact) { height = `${theme.space.base * 8}px`; paddingVertical = `${theme.space.base * 1.5}px`; browseFontSize = math(`${theme.fontSizes.sm} - 1`); @@ -151,7 +151,7 @@ const sizeStyles = ({ } const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`); - const padding = isBare + const padding = $isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`; const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`); @@ -163,7 +163,7 @@ const sizeStyles = ({ return css` padding: ${padding}; - min-height: ${isBare ? '1em' : height}; + min-height: ${$isBare ? '1em' : height}; line-height: ${getLineHeight(lineHeight, fontSize)}; font-size: ${fontSize}; @@ -186,7 +186,7 @@ const sizeStyles = ({ @supports (-ms-ime-align: auto) { &[type='color'] { - padding: ${isCompact ? '0 2px' : '1px 3px'}; /* correct color swatch size for Edge */ + padding: ${$isCompact ? '0 2px' : '1px 3px'}; /* correct color swatch size for Edge */ } } @@ -214,24 +214,24 @@ const sizeStyles = ({ ${StyledMessage} + &&, && + ${StyledHint}, && ~ ${StyledMessage} { - margin-top: ${theme.space.base * (isCompact ? 1 : 2)}px; + margin-top: ${theme.space.base * ($isCompact ? 1 : 2)}px; } `; }; export interface IStyledTextInputProps { - isCompact?: boolean; - isBare?: boolean; - isHovered?: boolean; - isFocused?: boolean; - focusInset?: boolean; - validation?: Validation; + $isCompact?: boolean; + $isBare?: boolean; + $isHovered?: boolean; + $isFocused?: boolean; + $focusInset?: boolean; + $validation?: Validation; } export const StyledTextInput = styled.input.attrs(props => ({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - 'aria-invalid': isInvalid(props.validation) + 'aria-invalid': isInvalid(props.$validation) }))` appearance: none; /* prettier-ignore */ @@ -242,8 +242,8 @@ export const StyledTextInput = styled.input.attrs(props = color 0.25s ease-in-out, z-index 0.25s ease-in-out; direction: ${props => props.theme.rtl && 'rtl'}; - border: ${props => (props.isBare ? 'none' : props.theme.borders.sm)}; - border-radius: ${props => (props.isBare ? '0' : props.theme.borderRadii.md)}; + border: ${props => (props.$isBare ? 'none' : props.theme.borders.sm)}; + border-radius: ${props => (props.$isBare ? '0' : props.theme.borderRadii.md)}; width: 100%; /* vs. display: block to limit mouse interaction area */ box-sizing: border-box; vertical-align: middle; /* support inline label */ diff --git a/packages/forms/src/styled/text/StyledTextMediaInput.ts b/packages/forms/src/styled/text/StyledTextMediaInput.ts index f66fb1079c4..84b40deb911 100644 --- a/packages/forms/src/styled/text/StyledTextMediaInput.ts +++ b/packages/forms/src/styled/text/StyledTextMediaInput.ts @@ -14,7 +14,7 @@ const COMPONENT_ID = 'forms.media_input'; export const StyledTextMediaInput = styled(StyledTextInput).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION, - isBare: true + $isBare: true })` flex-grow: 1; diff --git a/packages/forms/src/styled/text/StyledTextarea.ts b/packages/forms/src/styled/text/StyledTextarea.ts index e9817a858af..12932bbe984 100644 --- a/packages/forms/src/styled/text/StyledTextarea.ts +++ b/packages/forms/src/styled/text/StyledTextarea.ts @@ -12,8 +12,8 @@ import { StyledTextInput } from './StyledTextInput'; const COMPONENT_ID = 'forms.textarea'; interface IStyledTextareaProps { - isResizable?: boolean; - isHidden?: boolean; + $isResizable?: boolean; + $isHidden?: boolean; } const hiddenStyles = ` @@ -31,9 +31,9 @@ export const StyledTextarea = styled(StyledTextInput).attrs({ 'data-garden-id': COMPONENT_ID, 'data-garden-version': PACKAGE_VERSION })` - resize: ${props => (props.isResizable ? 'vertical' : 'none')}; + resize: ${props => (props.$isResizable ? 'vertical' : 'none')}; overflow: auto; - ${props => props.isHidden && hiddenStyles}; + ${props => props.$isHidden && hiddenStyles}; ${props => retrieveComponentStyles(COMPONENT_ID, props)}; `; diff --git a/packages/forms/src/styled/tiles/StyledTileDescription.ts b/packages/forms/src/styled/tiles/StyledTileDescription.ts index 8ac41a46b4d..b1f88930a22 100644 --- a/packages/forms/src/styled/tiles/StyledTileDescription.ts +++ b/packages/forms/src/styled/tiles/StyledTileDescription.ts @@ -12,15 +12,15 @@ import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-the const COMPONENT_ID = 'forms.tile_description'; interface IStyledTileDescriptionProps { - isCentered?: boolean; + $isCentered?: boolean; } const sizeStyles = ({ theme, - isCentered + $isCentered }: IStyledTileDescriptionProps & ThemeProps) => { const marginTop = `${theme.space.base}px`; - const marginHorizontal = isCentered + const marginHorizontal = $isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`); const fontSize = theme.fontSizes.sm; @@ -39,7 +39,7 @@ export const StyledTileDescription = styled.span.attrs({ 'data-garden-version': PACKAGE_VERSION })` display: block; - text-align: ${props => props.isCentered && 'center'}; + text-align: ${props => props.$isCentered && 'center'}; ${sizeStyles}; diff --git a/packages/forms/src/styled/tiles/StyledTileIcon.ts b/packages/forms/src/styled/tiles/StyledTileIcon.ts index 5696a9c9180..54224e44794 100644 --- a/packages/forms/src/styled/tiles/StyledTileIcon.ts +++ b/packages/forms/src/styled/tiles/StyledTileIcon.ts @@ -13,7 +13,7 @@ import { StyledTile } from './StyledTile'; const COMPONENT_ID = 'forms.tile_icon'; interface IStyledTileIconProps { - isCentered?: boolean; + $isCentered?: boolean; } const colorStyles = ({ theme }: ThemeProps) => { @@ -45,13 +45,13 @@ const colorStyles = ({ theme }: ThemeProps) => { `; }; -const sizeStyles = ({ theme, isCentered }: IStyledTileIconProps & ThemeProps) => { +const sizeStyles = ({ theme, $isCentered }: IStyledTileIconProps & ThemeProps) => { const iconSize = math(`${theme.iconSizes.md} * 2`); let position; let top; let horizontal; - if (!isCentered) { + if (!$isCentered) { position = 'absolute'; top = `${theme.space.base * 6}px`; horizontal = `${theme.space.base * 5}px`; diff --git a/packages/forms/src/styled/tiles/StyledTileLabel.ts b/packages/forms/src/styled/tiles/StyledTileLabel.ts index f49068d3d8f..a4a8aee95b5 100644 --- a/packages/forms/src/styled/tiles/StyledTileLabel.ts +++ b/packages/forms/src/styled/tiles/StyledTileLabel.ts @@ -12,12 +12,12 @@ import { retrieveComponentStyles, getLineHeight } from '@zendeskgarden/react-the const COMPONENT_ID = 'forms.tile_label'; interface IStyledTileLabelProps { - isCentered?: boolean; + $isCentered?: boolean; } -const sizeStyles = ({ theme, isCentered }: IStyledTileLabelProps & ThemeProps) => { - const marginTop = isCentered ? `${theme.space.base * 2}px` : 0; - const marginHorizontal = isCentered +const sizeStyles = ({ theme, $isCentered }: IStyledTileLabelProps & ThemeProps) => { + const marginTop = $isCentered ? `${theme.space.base * 2}px` : 0; + const marginHorizontal = $isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`); const fontSize = theme.fontSizes.md; @@ -36,7 +36,7 @@ export const StyledTileLabel = styled.span.attrs({ 'data-garden-version': PACKAGE_VERSION })` display: block; - text-align: ${props => props.isCentered && 'center'}; + text-align: ${props => props.$isCentered && 'center'}; font-weight: ${props => props.theme.fontWeights.semibold}; ${sizeStyles};