diff --git a/.changeset/yummy-years-greet.md b/.changeset/yummy-years-greet.md new file mode 100644 index 00000000000..3e2db59c156 --- /dev/null +++ b/.changeset/yummy-years-greet.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes usage of Box component from other components. diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx index e60b9b9460d..d5e3ea3b689 100644 --- a/packages/react/src/Button/ButtonBase.tsx +++ b/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` + ${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 > - - + { /* 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( } )} - + {loading && ( {loadingAnnouncement} diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index 993c5ef85e0..a35224568b5 100644 --- a/packages/react/src/Label/Label.tsx +++ b/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' diff --git a/packages/react/src/LabelGroup/LabelGroup.module.css b/packages/react/src/LabelGroup/LabelGroup.module.css new file mode 100644 index 00000000000..4009aae37e8 --- /dev/null +++ b/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; +} diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx index 54b3d184c42..a5babffb2e4 100644 --- a/packages/react/src/LabelGroup/LabelGroup.tsx +++ b/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}} > -
-
{children}
+
+
{children}
diff --git a/packages/react/src/NavList/NavList.module.css b/packages/react/src/NavList/NavList.module.css new file mode 100644 index 00000000000..9908361e112 --- /dev/null +++ b/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; +} diff --git a/packages/react/src/Pagination/Pagination.module.css b/packages/react/src/Pagination/Pagination.module.css index 8f5857fc50b..1c6e2e46d56 100644 --- a/packages/react/src/Pagination/Pagination.module.css +++ b/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; diff --git a/packages/react/src/Pagination/Pagination.stories.tsx b/packages/react/src/Pagination/Pagination.stories.tsx index ccf24d794fe..64a2047e6d4 100644 --- a/packages/react/src/Pagination/Pagination.stories.tsx +++ b/packages/react/src/Pagination/Pagination.stories.tsx @@ -78,10 +78,4 @@ Playground.argTypes = { disable: true, }, }, - theme: { - control: false, - table: { - disable: true, - }, - }, } diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx index 17f3f352aa5..556864aa2ca 100644 --- a/packages/react/src/Pagination/Pagination.tsx +++ b/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 type UsePaginationPagesParameters = { - theme?: Record // 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 - + {content} - + ) }) - }, [model, hrefBuilder, pageChange, renderPage, theme]) + }, [model, hrefBuilder, pageChange, renderPage]) return children } export type PaginationProps = { className?: string - theme?: Record 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 ( - - +
{pageElements} - - +
+ ) } diff --git a/packages/react/src/Placeholder.module.css b/packages/react/src/Placeholder.module.css new file mode 100644 index 00000000000..6aa4f63fa21 --- /dev/null +++ b/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); +} diff --git a/packages/react/src/Placeholder.tsx b/packages/react/src/Placeholder.tsx index fee4f290e8d..e5ab7b36d29 100644 --- a/packages/react/src/Placeholder.tsx +++ b/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 ( - {label} - +
) } diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.module.css b/packages/react/src/ScrollableRegion/ScrollableRegion.module.css new file mode 100644 index 00000000000..cf38fe50fae --- /dev/null +++ b/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; +} diff --git a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx b/packages/react/src/ScrollableRegion/ScrollableRegion.tsx index e1c2ca12d52..b177d76f399 100644 --- a/packages/react/src/ScrollableRegion/ScrollableRegion.tsx +++ b/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 ( - +
{children} - +
) } diff --git a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap index b7639b324c8..04f3f456271 100644 --- a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap @@ -294,7 +294,7 @@ exports[`TextInput > renders trailingAction icon button 1`] = `