Remove Box usage from components

.changeset/yummy-years-greet.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes usage of Box component from other components.

packages/react/src/Button/ButtonBase.tsx

@@ -1,6 +1,8 @@
 import React, {forwardRef} from 'react'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import Box from '../Box'
+import styled from 'styled-components'
+import sx from '../sx'
+import type {SxProp} from '../sx'
 import type {ButtonProps} from './types'
 import {getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
@@ -15,6 +17,12 @@ import {clsx} from 'clsx'
 import classes from './ButtonBase.module.css'
 import {isElement} from 'react-is'
 
+// TODO: remove this when we remove the `sx` prop from buttons
+// Styled span component for button content that can handle sx prop
+const BoxTemporaryWorkaround = styled.span<SxProp>`
+  ${sx};
+`
+
 const renderModuleVisual = (
   Visual: React.ElementType | React.ReactElement,
   loading: boolean,
@@ -92,7 +100,7 @@ const ButtonBase = forwardRef(
           className={block ? classes.ConditionalWrapper : undefined}
           data-loading-wrapper
         >
-          <Box
+          <BoxTemporaryWorkaround
             as={Component}
             sx={sxProp}
             aria-disabled={loading ? true : undefined}
@@ -129,8 +137,7 @@ const ButtonBase = forwardRef(
               )
             ) : (
               <>
-                <Box
-                  as="span"
+                <BoxTemporaryWorkaround
                   data-component="buttonContent"
                   sx={getAlignContentSize(alignContent)}
                   className={classes.ButtonContent}
@@ -182,7 +189,7 @@ const ButtonBase = forwardRef(
                           )
                         : null
                   }
-                </Box>
+                </BoxTemporaryWorkaround>
                 {
                   /* If there is a trailing action, render it unless the button is in a loading state
                    and there is no leading or trailing visual to replace with a loading spinner. */
@@ -196,7 +203,7 @@ const ButtonBase = forwardRef(
                 }
               </>
             )}
-          </Box>
+          </BoxTemporaryWorkaround>
           {loading && (
             <VisuallyHidden>
               <AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>

packages/react/src/Label/Label.tsx

@@ -1,3 +1,5 @@
+// TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage
+
 import {clsx} from 'clsx'
 import Box from '../Box'
 import classes from './Label.module.css'

packages/react/src/LabelGroup/LabelGroup.module.css

@@ -0,0 +1,14 @@
+.OverlayContainer {
+  align-items: flex-start;
+  display: flex;
+}
+
+.OverlayInner {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--base-size-4);
+}
+
+.CloseButton {
+  flex-shrink: 0;
+}

packages/react/src/LabelGroup/LabelGroup.tsx

@@ -7,6 +7,7 @@ import VisuallyHidden from '../_VisuallyHidden'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button, IconButton} from '../Button'
 import {useTheme} from '../ThemeProvider'
+import classes from './LabelGroup.module.css'
 
 export type LabelGroupProps = {
   /** Customize the element type of the rendered container */
@@ -132,14 +133,14 @@ const OverlayToggle: React.FC<
       )}
       focusZoneSettings={{disabled: true}}
     >
-      <div style={{alignItems: 'flex-start', display: 'flex', width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
-        <div style={{display: 'flex', flexWrap: 'wrap', gap: '4px'}}>{children}</div>
+      <div className={classes.OverlayContainer} style={{width: overlayWidth, padding: `${overlayPaddingPx}px`}}>
+        <div className={classes.OverlayInner}>{children}</div>
         <IconButton
           onClick={closeOverflowOverlay}
           icon={XIcon}
           aria-label="Close"
           variant="invisible"
-          style={{flexShrink: 0}}
+          className={classes.CloseButton}
         />
       </div>
     </AnchoredOverlay>

packages/react/src/NavList/NavList.module.css

@@ -0,0 +1,8 @@
+.GroupHeading > a {
+  color: var(--fgColor-default);
+  text-decoration: inherit;
+}
+
+.GroupHeading > a:hover {
+  text-decoration: underline;
+}

packages/react/src/Pagination/Pagination.module.css

@@ -120,6 +120,10 @@
   text-align: center;
 }
 
+.TablePaginationSteps {
+  display: inline-block;
+}
+
 @media screen and (--viewportRange-narrow) {
   .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
     display: none;

packages/react/src/Pagination/Pagination.stories.tsx

@@ -78,10 +78,4 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  theme: {
-    control: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/Pagination/Pagination.tsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import Box from '../Box'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {viewportRanges} from '../hooks/useResponsiveValue'
 import {clsx} from 'clsx'
 import classes from './Pagination.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
   if (showPages && typeof showPages !== 'boolean') {
@@ -33,7 +31,6 @@ export type PageProps = {
 } & Omit<PageDataProps['props'], 'as' | 'role'>
 
 type UsePaginationPagesParameters = {
-  theme?: Record<string, unknown> // set to theme type once /src/theme.js is converted
   pageCount: number
   currentPage: number
   onPageChange: (e: React.MouseEvent, n: number) => void
@@ -45,7 +42,6 @@ type UsePaginationPagesParameters = {
 }
 
 function usePaginationPages({
-  theme,
   pageCount,
   currentPage,
   onPageChange,
@@ -67,22 +63,22 @@ function usePaginationPages({
       if (renderPage && props.as !== 'span') {
         return renderPage({key, children: content, number: page.num, className: classes.Page, ...props})
       }
+      const Component = props.as || 'a'
 
       return (
         // @ts-ignore giving me grief about children and "as" props
-        <BoxWithFallback as="a" key={key} theme={theme} className={clsx(classes.Page)} {...props}>
+        <Component key={key} className={clsx(classes.Page)} {...props}>
           {content}
-        </BoxWithFallback>
+        </Component>
       )
     })
-  }, [model, hrefBuilder, pageChange, renderPage, theme])
+  }, [model, hrefBuilder, pageChange, renderPage])
 
   return children
 }
 
 export type PaginationProps = {
   className?: string
-  theme?: Record<string, unknown>
   pageCount: number
   currentPage: number
   onPageChange?: (e: React.MouseEvent, n: number) => void
@@ -95,7 +91,6 @@ export type PaginationProps = {
 
 function Pagination({
   className,
-  theme: _theme,
   pageCount,
   currentPage,
   onPageChange = noop,
@@ -107,7 +102,6 @@ function Pagination({
   ...rest
 }: PaginationProps) {
   const pageElements = usePaginationPages({
-    theme: _theme,
     pageCount,
     currentPage,
     onPageChange,
@@ -119,20 +113,14 @@ function Pagination({
   })
 
   return (
-    <BoxWithFallback
-      as="nav"
-      className={clsx(classes.PaginationContainer, className)}
-      aria-label="Pagination"
-      {...rest}
-    >
-      <Box
-        display="inline-block"
+    <nav className={clsx(classes.PaginationContainer, className)} aria-label="Pagination" {...rest}>
+      <div
         className={classes.TablePaginationSteps}
         data-hidden-viewport-ranges={getViewportRangesToHidePages(showPages).join(' ')}
       >
         {pageElements}
-      </Box>
-    </BoxWithFallback>
+      </div>
+    </nav>
   )
 }
 

packages/react/src/Placeholder.module.css

@@ -0,0 +1,13 @@
+.Placeholder {
+  /* these are set in the component */
+  --placeholder-width: ;
+  --placeholder-height: ;
+
+  width: var(--placeholder-width, 100%);
+  height: var(--placeholder-height);
+  display: grid;
+  place-items: center;
+  background-color: var(--bgColor-inset);
+  border-radius: var(--borderRadius-medium);
+  border: var(--borderWidth-thin) solid var(--borderColor-muted);
+}

packages/react/src/Placeholder.tsx

@@ -1,5 +1,5 @@
-import {Box} from '.'
 import type React from 'react'
+import classes from './Placeholder.module.css'
 
 /** Private component used to render placeholders in storybook and documentation examples  */
 export const Placeholder: React.FC<
@@ -11,20 +11,17 @@ export const Placeholder: React.FC<
   }>
 > = ({width, height, id, label}) => {
   return (
-    <Box
+    <div
       id={id}
-      sx={{
-        width: width ?? '100%',
-        height,
-        display: 'grid',
-        placeItems: 'center',
-        bg: 'canvas.inset',
-        borderRadius: 2,
-        border: '1px solid',
-        borderColor: 'border.subtle',
-      }}
+      className={classes.Placeholder}
+      style={
+        {
+          '--placeholder-width': typeof width === 'number' ? `${width}px` : width,
+          '--placeholder-height': typeof height === 'number' ? `${height}px` : height,
+        } as React.CSSProperties
+      }
     >
       {label}
-    </Box>
+    </div>
   )
 }

packages/react/src/ScrollableRegion/ScrollableRegion.module.css

@@ -0,0 +1,8 @@
+.ScrollableRegion {
+  /* When setting overflow, we also set `position: relative` to avoid
+  *  `position: absolute` items breaking out of the container and causing
+  *  scrollbars on the page. This can occur with common classes like `sr-only`
+  *  and can cause difficult to track down layout issues */
+  position: relative;
+  overflow: auto;
+}

packages/react/src/ScrollableRegion/ScrollableRegion.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import Box from '../Box'
+import {clsx} from 'clsx'
 import {useOverflow} from '../hooks/useOverflow'
+import classes from './ScrollableRegion.module.css'
 
 type Labelled =
   | {
@@ -14,19 +15,11 @@ type Labelled =
 
 type ScrollableRegionProps = React.ComponentPropsWithoutRef<'div'> & Labelled
 
-const defaultStyles = {
-  // When setting overflow, we also set `position: relative` to avoid
-  // `position: absolute` items breaking out of the container and causing
-  // scrollbars on the page. This can occur with common classes like `sr-only`
-  // and can cause difficult to track down layout issues
-  position: 'relative',
-  overflow: 'auto',
-}
-
 function ScrollableRegion({
   'aria-label': label,
   'aria-labelledby': labelledby,
   children,
+  className,
   ...rest
 }: ScrollableRegionProps) {
   const ref = React.useRef(null)
@@ -41,9 +34,9 @@ function ScrollableRegion({
     : {}
 
   return (
-    <Box {...rest} {...regionProps} ref={ref} sx={defaultStyles}>
+    <div {...rest} {...regionProps} ref={ref} className={clsx(classes.ScrollableRegion, className)}>
       {children}
-    </Box>
+    </div>
   )
 }
 

packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap

@@ -294,7 +294,7 @@ exports[`TextInput > renders trailingAction icon button 1`] = `
       <button
         aria-describedby=":r23:-loading-announcement"
         aria-labelledby=":r22:"
-        class="sc-aXZVg prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
+        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n prc-Button-IconButton-GE6m6"
         data-component="IconButton"
         data-loading="false"
         data-no-visuals="true"
@@ -352,15 +352,15 @@ exports[`TextInput > renders trailingAction text button 1`] = `
     >
       <button
         aria-describedby=":r1p:-loading-announcement"
-        class="sc-aXZVg prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
         data-variant="invisible"
         type="button"
       >
         <span
-          class="sc-aXZVg jjaNhq prc-Button-ButtonContent-KZ5Bz"
+          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
           data-component="buttonContent"
         >
           <span
@@ -395,15 +395,15 @@ exports[`TextInput > renders trailingAction text button with a tooltip 1`] = `
     >
       <button
         aria-describedby=":r1u:-loading-announcement :r1t:"
-        class="sc-aXZVg prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
+        class="sc-gEvEer dEeFcy prc-Button-ButtonBase-Eb8-K prc-components-Invisible-6q42n"
         data-loading="false"
         data-no-visuals="true"
         data-size="medium"
         data-variant="invisible"
         type="button"
       >
         <span
-          class="sc-aXZVg jjaNhq prc-Button-ButtonContent-KZ5Bz"
+          class="sc-gEvEer bLWYQi prc-Button-ButtonContent-KZ5Bz"
           data-component="buttonContent"
         >
           <span