Remove Box usage from components (#6805)

Author: mperrotti

.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);
+}