From 2db6c9206cc44991eb27ce4abcd6d7c33772c134 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 29 Jan 2025 00:34:36 -0500 Subject: [PATCH 1/4] fix(useResizeObserver): undefined variable alternative (#5595) * fix(useResizeObserver): undefined variable alternative * Create cyan-shirts-drive.md * fix(useResizeObserver): lint issues --- .changeset/cyan-shirts-drive.md | 5 +++ packages/react/src/hooks/useResizeObserver.ts | 41 +++++++++++++++---- 2 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 .changeset/cyan-shirts-drive.md 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/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]) } From d14c48cc3be737d85fb79485b70fd08acd47a7b3 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 29 Jan 2025 00:37:34 -0500 Subject: [PATCH 2/4] fix(Button): do not render main spinner if there is a count when loading (#5605) * fix(Button): do not render main spinner if there is a count when loading * Create itchy-numbers-fetch.md --------- Co-authored-by: Jon Rohan --- .changeset/itchy-numbers-fetch.md | 5 +++++ packages/react/src/Button/ButtonBase.tsx | 2 ++ 2 files changed, 7 insertions(+) create mode 100644 .changeset/itchy-numbers-fetch.md 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/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) } { From d8a9e58e7e1ea6cb7b948bef8698bf3c0e2938b0 Mon Sep 17 00:00:00 2001 From: Hussam Ghazzi Date: Wed, 29 Jan 2025 12:17:33 -0500 Subject: [PATCH 3/4] fix(FormControl): fix spacing in vertical layouts (#5618) * fix(FormControl): fix spacing in vertical layouts * revert to using Box --- .changeset/sour-snakes-clap.md | 5 +++ .../react/src/FormControl/FormControl.tsx | 34 ++++++------------- 2 files changed, 16 insertions(+), 23 deletions(-) create mode 100644 .changeset/sour-snakes-clap.md diff --git a/.changeset/sour-snakes-clap.md b/.changeset/sour-snakes-clap.md new file mode 100644 index 00000000000..128e35dc510 --- /dev/null +++ b/.changeset/sour-snakes-clap.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +fix(FormControl): fix spacing in vertical layouts" 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', From 124f88a4d6562439de1c293556f1209fdb02308a Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Wed, 29 Jan 2025 12:53:59 -0500 Subject: [PATCH 4/4] Update sour-snakes-clap.md (#5619) --- .changeset/sour-snakes-clap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/sour-snakes-clap.md b/.changeset/sour-snakes-clap.md index 128e35dc510..13522cc780a 100644 --- a/.changeset/sour-snakes-clap.md +++ b/.changeset/sour-snakes-clap.md @@ -1,5 +1,5 @@ --- -"@primer/react": minor +"@primer/react": patch --- fix(FormControl): fix spacing in vertical layouts"