diff --git a/.changeset/afraid-rats-invent.md b/.changeset/afraid-rats-invent.md new file mode 100644 index 0000000000..0caa57d81c --- /dev/null +++ b/.changeset/afraid-rats-invent.md @@ -0,0 +1,14 @@ +--- +'@backstage/ui': patch +--- + +Added a new `FullPage` component that fills the remaining viewport height below the `Header`. + +```tsx +
+ + {/* content fills remaining height */} + +``` + +**Affected components:** FullPage diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index 4d09023b69..b25b3c9b27 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -979,6 +979,21 @@ export interface FlexProps extends SpaceProps { // @public (undocumented) export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse'; +// @public +export const FullPage: ForwardRefExoticComponent< + FullPageProps & RefAttributes +>; + +// @public +export const FullPageDefinition: { + readonly classNames: { + readonly root: 'bui-FullPage'; + }; +}; + +// @public +export interface FullPageProps extends React.ComponentPropsWithoutRef<'main'> {} + // @public (undocumented) export const Grid: { Root: ForwardRefExoticComponent>; @@ -1082,6 +1097,7 @@ export const Header: (props: HeaderProps) => JSX_2.Element; // @public export const HeaderDefinition: { readonly classNames: { + readonly root: 'bui-Header'; readonly toolbar: 'bui-HeaderToolbar'; readonly toolbarWrapper: 'bui-HeaderToolbarWrapper'; readonly toolbarContent: 'bui-HeaderToolbarContent'; diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css index ba014cfd48..4cd94d30ea 100644 --- a/packages/ui/src/components/Header/Header.module.css +++ b/packages/ui/src/components/Header/Header.module.css @@ -88,7 +88,6 @@ } .bui-HeaderTabsWrapper { - margin-bottom: var(--bui-space-4); padding-inline: var(--bui-space-3); border-bottom: 1px solid var(--bui-border); background-color: var(--bui-bg-neutral-1);