Merge branch 'main' into action-list-2

.changeset/brown-squids-unite.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+Add a utility to provide useIsoMorphicEffect function and use that instead of useLayoutEffect everywhere

.changeset/hip-ravens-sell.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Fixes a styling bug in TextInput components while using its `icon` and `block` props together

docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -9,9 +9,7 @@ export default function Hero() {
     <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
       <Box bg="canvas.default" py={6}>
         <Container>
-          <Heading color="accent.fg" fontSize={7} lineHeight="condensed" pb={3} m={0}>
-            Primer React
-          </Heading>
+          <Heading sx={{color: 'accent.fg', fontSize: 7, lineHeight: 'condensed', pb: 3, m: 0}}>Primer React</Heading>
           <Text as="p" fontFamily="mono" mt={0} mb={2} color="fg.default" fontSize={2}>
             v{version}
           </Text>

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -8,7 +8,7 @@ function ThemeSwitcher() {
   return (
     <DropdownMenu
       renderAnchor={({children, ...anchorProps}) => (
-        <DropdownButton variant="small" {...anchorProps}>
+        <DropdownButton {...anchorProps} sx={{variant: 'small'}}>
           {children}
         </DropdownButton>
       )}

migrating.md

@@ -110,7 +110,7 @@ There are two ways to change the theme of @primer/components components:
 
    export default () => (
      <ThemeProvider theme={theme}>
-       <Block color="bodytext" p={4}>
+       <Block sx={{color: 'bodytext', p: 4}}>
          <Text fontSize={4}>Hello, world!</Text>
        </Block>
      </ThemeProvider>

package.json

@@ -15,7 +15,7 @@
     "start": "concurrently npm:start:*",
     "start:docs": "cd docs && npm run develop",
     "start:storybook": "start-storybook -p 6006",
-    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}'",
+    "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0",
     "lint:fix": "npm run lint -- --fix",
     "test": "jest",
     "test:update": "npm run test -- --updateSnapshot",

src/Overlay.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components'
-import React, {ReactElement, useEffect, useLayoutEffect, useRef} from 'react'
+import React, {ReactElement, useEffect, useRef} from 'react'
 import {get, COMMON, SystemPositionProps, SystemCommonProps} from './constants'
 import {ComponentProps} from './utils/types'
+import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {useOverlay, TouchOrMouseEvent} from './hooks'
 import Portal from './Portal'
 import sx, {SxProp} from './sx'

src/Portal/Portal.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import {createPortal} from 'react-dom'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__'
 const DEFAULT_PORTAL_CONTAINER_NAME = '__default__'
@@ -69,7 +70,7 @@ export const Portal: React.FC<PortalProps> = ({children, onMount, containerName:
   hostElement.style.zIndex = '1'
   const elementRef = React.useRef(hostElement)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     let containerName = _containerName
     if (containerName === undefined) {
       containerName = DEFAULT_PORTAL_CONTAINER_NAME

src/_TextInputWrapper.tsx

@@ -91,6 +91,13 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
       display: block;
       width: 100%;
     `}
+
+    ${props =>
+    props.block &&
+    props.hasIcon &&
+    css`
+      display: flex;
+    `}
   
     // Ensures inputs don't zoom on mobile but are body-font size on desktop
     @media (min-width: ${get('breakpoints.1')}) {

src/__tests__/AnchoredOverlay.test.tsx

@@ -144,7 +144,7 @@ describe('AnchoredOverlay', () => {
   })
 
   it('should render consistently when open', () => {
-    const anchoredOverlay = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
-    expect(anchoredOverlay).toMatchSnapshot()
+    const {container} = HTMLRender(<AnchoredOverlayTestComponent initiallyOpen={true} />)
+    expect(container).toMatchSnapshot()
   })
 })

src/__tests__/TextInputWithTokens.test.tsx

@@ -29,16 +29,6 @@ const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onToke
   </>
 )
 
-// describe('axe test', () => {
-//   it('should have no axe violations', async () => {
-//     const onRemoveMock = jest.fn()
-//     const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-//     const results = await axe(container)
-//     expect(results).toHaveNoViolations()
-//     cleanup()
-//   })
-// })
-
 jest.useFakeTimers()
 
 describe('TextInputWithTokens', () => {

src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -94,9 +94,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 `;
 
 exports[`AnchoredOverlay should render consistently when open 1`] = `
-Object {
-  "asFragment": [Function],
-  "baseElement": .c0 {
+.c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
   color: #24292f;
@@ -187,146 +185,48 @@ Object {
   outline: none;
 }
 
-<body>
-    <div>
-      <div
-        class="c0"
-        color="fg.default"
-        data-portal-root="true"
-        font-family="normal"
-      >
-        <button
-          aria-haspopup="true"
-          aria-labelledby="react-aria-1"
-          class="c1"
-          id="react-aria-1"
-          tabindex="0"
-        >
-          Anchor Button
-        </button>
-        <div
-          id="__primerPortalRoot__"
-          style="position: absolute; top: 0px; left: 0px;"
-        >
-          <div
-            style="position: relative; z-index: 1;"
-          >
-            <div
-              class="c2"
-              data-focus-trap="active"
-              height="auto"
-              role="none"
-              style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-              width="auto"
-            >
-              <button
-                class="focus-visible"
-                data-focus-visible-added=""
-                tabindex="0"
-                type="button"
-              >
-                Focusable Child
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
+<div>
+  <div
+    class="c0"
+    color="fg.default"
+    data-portal-root="true"
+    font-family="normal"
+  >
+    <button
+      aria-haspopup="true"
+      aria-labelledby="react-aria-1"
+      class="c1"
+      id="react-aria-1"
+      tabindex="0"
+    >
+      Anchor Button
+    </button>
     <div
-      class="BaseStyles__Base-qvuaww-0 ihFkAM"
-      color="fg.default"
-      data-portal-root="true"
-      font-family="normal"
+      id="__primerPortalRoot__"
+      style="position: absolute; top: 0px; left: 0px;"
     >
-      <button
-        aria-haspopup="true"
-        aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 iRqJHc"
-        id="react-aria-1"
-        tabindex="0"
-      >
-        Anchor Button
-      </button>
       <div
-        id="__primerPortalRoot__"
-        style="position: absolute; top: 0px; left: 0px;"
+        style="position: relative; z-index: 1;"
       >
         <div
-          style="position: relative; z-index: 1;"
+          class="c2"
+          data-focus-trap="active"
+          height="auto"
+          role="none"
+          style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
+          width="auto"
         >
-          <div
-            class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
-            data-focus-trap="active"
-            height="auto"
-            role="none"
-            style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-            width="auto"
+          <button
+            class="focus-visible"
+            data-focus-visible-added=""
+            tabindex="0"
+            type="button"
           >
-            <button
-              class="focus-visible"
-              data-focus-visible-added=""
-              tabindex="0"
-              type="button"
-            >
-              Focusable Child
-            </button>
-          </div>
+            Focusable Child
+          </button>
         </div>
       </div>
     </div>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
+  </div>
+</div>
 `;

src/hooks/useAnchoredPosition.ts

@@ -2,6 +2,7 @@ import React from 'react'
 import {PositionSettings, getAnchoredPosition, AnchorPosition} from '../behaviors/anchoredPosition'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 import {useResizeObserver} from './useResizeObserver'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
   floatingElementRef?: React.RefObject<Element>
@@ -41,7 +42,7 @@ export function useAnchoredPosition(
     [floatingElementRef, anchorElementRef, ...dependencies]
   )
 
-  React.useLayoutEffect(updatePosition, [updatePosition])
+  useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition)
 

src/hooks/useCombinedRefs.ts

@@ -1,4 +1,5 @@
-import React, {ForwardedRef, useRef} from 'react'
+import {ForwardedRef, useRef} from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 /**
  * Creates a ref by combining multiple constituent refs. The ref returned by this hook
@@ -11,7 +12,7 @@ import React, {ForwardedRef, useRef} from 'react'
 export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)[]) {
   const combinedRef = useRef<T | null>(null)
 
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     function setRefs(current: T | null = null) {
       for (const ref of refs) {
         if (!ref) {
@@ -32,7 +33,6 @@ export function useCombinedRefs<T>(...refs: (ForwardedRef<T> | null | undefined)
       // eslint-disable-next-line react-hooks/exhaustive-deps
       setRefs(combinedRef.current)
     }
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...refs, combinedRef.current])
 

src/hooks/useResizeObserver.ts

@@ -1,7 +1,7 @@
-import React from 'react'
+import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export function useResizeObserver(callback: () => void) {
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     const observer = new window.ResizeObserver(() => callback())
     observer.observe(document.documentElement)
     return () => {