Merge branch 'main' into revert-5560-revert-5504-hectahertz/paginatio…

…n-algorithm-enhancements
primer · Jan 30, 2025 · 2429949 · 2429949
2 parents 9955465 + 124f88a
commit 2429949
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 32 deletions.
diff --git a/.changeset/cyan-shirts-drive.md 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
@@ -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
@@ -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
@@ -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
@@ -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<HTMLDivElement, FormControlProps>(
             </StyledLabelContainer>
           </StyledHorizontalLayout>
         ) : (
-          <StyledVerticalLayout
+          <Box
             ref={ref}
             data-has-label={!isLabelHidden ? '' : undefined}
-            sx={sx}
+            display="flex"
+            flexDirection="column"
+            alignItems="flex-start"
+            sx={
+              enabled
+                ? sx
+                : {...(isLabelHidden ? {'> *:not(label) + *': {marginTop: 1}} : {'> * + *': {marginTop: 1}}), ...sx}
+            }
             className={clsx(className, {
               [classes.ControlVerticalLayout]: enabled,
             })}
@@ -214,7 +222,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
               <ValidationAnimationContainer show>{slots.validation}</ValidationAnimationContainer>
             ) : null}
             {slots.caption}
-          </StyledVerticalLayout>
+          </Box>
         )}
       </FormControlContextProvider>
     )
@@ -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
@@ -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<T extends HTMLElement>(
   target?: RefObject<T>,
   depsArray: unknown[] = [],
 ) {
+  const [targetClientRect, setTargetClientRect] = useState<DOMRect | null>(null)
   const savedCallback = useRef(callback)
 
   useLayoutEffect(() => {
@@ -26,15 +27,37 @@ export function useResizeObserver<T extends HTMLElement>(
       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])
 }