diff --git a/.changeset/cute-parts-smash.md b/.changeset/cute-parts-smash.md new file mode 100644 index 0000000000..166e0fc528 --- /dev/null +++ b/.changeset/cute-parts-smash.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Box component to forward HTML attributes to the underlying div element. + +**Affected components:** Box diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 662b82a762..9a65455ee0 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -282,7 +282,11 @@ export type BoxOwnProps = { }; // @public (undocumented) -export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {} +export interface BoxProps + extends SpaceProps, + BoxOwnProps, + BoxUtilityProps, + React.HTMLAttributes {} // @public (undocumented) export type BoxUtilityProps = { diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx index ed3262ea31..23ed5b9303 100644 --- a/packages/ui/src/components/Box/Box.tsx +++ b/packages/ui/src/components/Box/Box.tsx @@ -21,7 +21,7 @@ import { BoxDefinition } from './definition'; /** @public */ export const Box = forwardRef((props, ref) => { - const { ownProps, dataAttributes, utilityStyle } = useDefinition( + const { ownProps, restProps, dataAttributes, utilityStyle } = useDefinition( BoxDefinition, props, ); @@ -34,6 +34,7 @@ export const Box = forwardRef((props, ref) => { className: classes.root, style: { ...ownProps.style, ...utilityStyle }, ...dataAttributes, + ...restProps, }, surfaceChildren, ); diff --git a/packages/ui/src/components/Box/types.ts b/packages/ui/src/components/Box/types.ts index e3f9e2cd04..09b45429c3 100644 --- a/packages/ui/src/components/Box/types.ts +++ b/packages/ui/src/components/Box/types.ts @@ -41,4 +41,8 @@ export type BoxUtilityProps = { }; /** @public */ -export interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps {} +export interface BoxProps + extends SpaceProps, + BoxOwnProps, + BoxUtilityProps, + React.HTMLAttributes {}