diff --git a/.changeset/flex-html-attributes.md b/.changeset/flex-html-attributes.md deleted file mode 100644 index 882594deba..0000000000 --- a/.changeset/flex-html-attributes.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@backstage/ui': patch ---- - -Added support for native HTML div attributes on the `Flex` component. - -**Affected components:** Flex diff --git a/.changeset/layout-html-attributes.md b/.changeset/layout-html-attributes.md new file mode 100644 index 0000000000..6dff67e7f1 --- /dev/null +++ b/.changeset/layout-html-attributes.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Added support for native HTML div attributes on the `Flex`, `Grid`, and `Grid.Item` components. + +**Affected components:** Flex, Grid, Grid.Item diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index d584031c7a..afda04ea5a 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -20,6 +20,7 @@ import type { DisclosureProps } from 'react-aria-components'; import type { ElementType } from 'react'; import { ForwardRefExoticComponent } from 'react'; import type { HeadingProps } from 'react-aria-components'; +import type { HTMLAttributes } from 'react'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import type { LinkProps as LinkProps_2 } from 'react-aria-components'; import type { ListBoxItemProps } from 'react-aria-components'; @@ -1333,7 +1334,9 @@ export type GridItemOwnProps = { }; // @public (undocumented) -export interface GridItemProps extends GridItemOwnProps { +export interface GridItemProps + extends GridItemOwnProps, + Omit, 'children'> { // (undocumented) colEnd?: Responsive; // (undocumented) @@ -1353,7 +1356,10 @@ export type GridOwnProps = { }; // @public (undocumented) -export interface GridProps extends SpaceProps, GridOwnProps { +export interface GridProps + extends SpaceProps, + GridOwnProps, + Omit, 'children'> { // (undocumented) columns?: Responsive; // (undocumented) diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx index 8d000c0925..f61cd67d6b 100644 --- a/packages/ui/src/components/Grid/Grid.tsx +++ b/packages/ui/src/components/Grid/Grid.tsx @@ -20,7 +20,7 @@ import { useDefinition } from '../../hooks/useDefinition'; import { GridDefinition, GridItemDefinition } from './definition'; const GridRoot = forwardRef((props, ref) => { - const { ownProps, dataAttributes, utilityStyle } = useDefinition( + const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition( GridDefinition, { columns: 'auto', gap: '4', ...props }, ); @@ -32,6 +32,7 @@ const GridRoot = forwardRef((props, ref) => { className={classes.root} style={{ ...utilityStyle, ...ownProps.style }} {...dataAttributes} + {...restProps} > {childrenWithBgProvider} @@ -39,7 +40,7 @@ const GridRoot = forwardRef((props, ref) => { }); const GridItem = forwardRef((props, ref) => { - const { ownProps, dataAttributes, utilityStyle } = useDefinition( + const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition( GridItemDefinition, props, ); @@ -51,6 +52,7 @@ const GridItem = forwardRef((props, ref) => { className={classes.root} style={{ ...utilityStyle, ...ownProps.style }} {...dataAttributes} + {...restProps} > {childrenWithBgProvider} diff --git a/packages/ui/src/components/Grid/types.ts b/packages/ui/src/components/Grid/types.ts index c5fb713d17..6ad5d564c6 100644 --- a/packages/ui/src/components/Grid/types.ts +++ b/packages/ui/src/components/Grid/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import type { ReactNode, CSSProperties } from 'react'; +import type { ReactNode, CSSProperties, HTMLAttributes } from 'react'; import type { Space, SpaceProps, @@ -32,7 +32,10 @@ export type GridOwnProps = { }; /** @public */ -export interface GridProps extends SpaceProps, GridOwnProps { +export interface GridProps + extends SpaceProps, + GridOwnProps, + Omit, 'children'> { columns?: Responsive; gap?: Responsive; } @@ -46,7 +49,9 @@ export type GridItemOwnProps = { }; /** @public */ -export interface GridItemProps extends GridItemOwnProps { +export interface GridItemProps + extends GridItemOwnProps, + Omit, 'children'> { colSpan?: Responsive; colEnd?: Responsive; colStart?: Responsive;