diff --git a/.changeset/cyan-shirts-drive.md b/.changeset/cyan-shirts-drive.md new file mode 100644 index 00000000000..adae611e48f --- /dev/null +++ b/.changeset/cyan-shirts-drive.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(useResizeObserver): undefined variable alternative diff --git a/.changeset/itchy-numbers-fetch.md b/.changeset/itchy-numbers-fetch.md new file mode 100644 index 00000000000..450b9ad75c2 --- /dev/null +++ b/.changeset/itchy-numbers-fetch.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(Button): do not render main spinner if there is a count when loading diff --git a/.changeset/sour-snakes-clap.md b/.changeset/sour-snakes-clap.md new file mode 100644 index 00000000000..13522cc780a --- /dev/null +++ b/.changeset/sour-snakes-clap.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +fix(FormControl): fix spacing in vertical layouts" diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index 3ef7ae902b1..6303ffc5e5c 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/packages/react/src/Button/ButtonBase.tsx @@ -141,6 +141,7 @@ const ButtonBase = forwardRef( !LeadingVisual && !TrailingVisual && !TrailingAction && + count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false) } { @@ -258,6 +259,7 @@ const ButtonBase = forwardRef( !LeadingVisual && !TrailingVisual && !TrailingAction && + count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false) } { diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx index 8315f7be97a..e66af31eb61 100644 --- a/packages/react/src/FormControl/FormControl.tsx +++ b/packages/react/src/FormControl/FormControl.tsx @@ -8,6 +8,7 @@ import {SelectPanel} from '../SelectPanel' import TextInput from '../TextInput' import TextInputWithTokens from '../TextInputWithTokens' import Textarea from '../Textarea' +import Box from '../Box' import {CheckboxOrRadioGroupContext} from '../internal/components/CheckboxOrRadioGroup' import ValidationAnimationContainer from '../internal/components/ValidationAnimationContainer' import {useSlots} from '../hooks/useSlots' @@ -182,10 +183,17 @@ const FormControl = React.forwardRef( ) : ( - *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx} + } className={clsx(className, { [classes.ControlVerticalLayout]: enabled, })} @@ -214,7 +222,7 @@ const FormControl = React.forwardRef( {slots.validation} ) : null} {slots.caption} - + )} ) @@ -260,26 +268,6 @@ const StyledLabelContainer = toggleStyledComponent( `, ) -const StyledVerticalLayout = toggleStyledComponent( - cssModulesFlag, - 'div', - styled.div` - display: flex; - flex-direction: column; - align-items: flex-start; - - & > *:not(label) + * { - margin-top: var(--base-size-4); - } - - &:where([data-has-label]) > * + * { - margin-top: var(--base-size-4); - } - - ${sx} - `, -) - const StyledLeadingVisual = toggleStyledComponent( cssModulesFlag, 'div', diff --git a/packages/react/src/hooks/useResizeObserver.ts b/packages/react/src/hooks/useResizeObserver.ts index 32a0d496e00..fca25666d98 100644 --- a/packages/react/src/hooks/useResizeObserver.ts +++ b/packages/react/src/hooks/useResizeObserver.ts @@ -1,5 +1,5 @@ import type {RefObject} from 'react' -import {useRef} from 'react' +import {useRef, useState} from 'react' import useLayoutEffect from '../utils/useIsomorphicLayoutEffect' // https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3 @@ -14,6 +14,7 @@ export function useResizeObserver( target?: RefObject, depsArray: unknown[] = [], ) { + const [targetClientRect, setTargetClientRect] = useState(null) const savedCallback = useRef(callback) useLayoutEffect(() => { @@ -26,15 +27,37 @@ export function useResizeObserver( return } - const observer = new ResizeObserver(entries => { - savedCallback.current(entries) - }) - - observer.observe(targetEl) - - return () => { - observer.disconnect() + if (typeof ResizeObserver === 'function') { + const observer = new ResizeObserver(entries => { + savedCallback.current(entries) + }) + + observer.observe(targetEl) + + return () => { + observer.disconnect() + } + } else { + const saveTargetDimensions = () => { + const currTargetRect = targetEl.getBoundingClientRect() + + if (currTargetRect.width !== targetClientRect?.width || currTargetRect.height !== targetClientRect.height) { + savedCallback.current([ + { + contentRect: currTargetRect, + }, + ]) + } + setTargetClientRect(currTargetRect) + } + // eslint-disable-next-line github/prefer-observers + window.addEventListener('resize', saveTargetDimensions) + + return () => { + window.removeEventListener('resize', saveTargetDimensions) + } } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [target, ...depsArray]) }