Merge pull request #30636 from backstage/bui-fixes

BUI - Small fixes

.changeset/fifty-ads-dance.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.

packages/ui/report.api.md

@@ -322,7 +322,7 @@ export const componentDefinitions: {
     };
     readonly dataAttributes: {
       readonly size: readonly ['small', 'medium', 'large'];
-      readonly variant: readonly ['primary', 'secondary', 'ghost'];
+      readonly variant: readonly ['primary', 'secondary', 'tertiary'];
     };
   };
   readonly ButtonIcon: {

packages/ui/src/components/Header/HeaderToolbar.tsx

@@ -124,13 +124,15 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => {
       <div className={classNames.toolbar} data-has-tabs={hasTabs}>
         <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>
           <div className={classNames.toolbarContent} ref={toolbarContentRef}>
-            {titleLink ? (
-              <Link className={classNames.toolbarName} href={titleLink}>
-                {titleContent}
-              </Link>
-            ) : (
-              <div className={classNames.toolbarName}>{titleContent}</div>
-            )}
+            <Text as="h1" variant="body-medium">
+              {titleLink ? (
+                <Link className={classNames.toolbarName} href={titleLink}>
+                  {titleContent}
+                </Link>
+              ) : (
+                <div className={classNames.toolbarName}>{titleContent}</div>
+              )}
+            </Text>
             {breadcrumbs && (
               <div
                 ref={breadcrumbsRef}

packages/ui/src/components/HeaderPage/HeaderPage.tsx

@@ -34,7 +34,7 @@ export const HeaderPage = (props: HeaderPageProps) => {
   return (
     <div className={classNames.root}>
       <div className={classNames.content}>
-        <Text variant="title-small" weight="bold">
+        <Text variant="title-small" weight="bold" as="h2">
           {title}
         </Text>
         <div className={classNames.controls}>

packages/ui/src/components/Select/Select.tsx

@@ -58,7 +58,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
-        'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',
+        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',
       );
     }
   }, [label, ariaLabel, ariaLabelledBy]);

packages/ui/src/utils/componentDefinitions.ts

@@ -42,7 +42,7 @@ export const componentDefinitions = {
     },
     dataAttributes: {
       size: ['small', 'medium', 'large'] as const,
-      variant: ['primary', 'secondary', 'ghost'] as const,
+      variant: ['primary', 'secondary', 'tertiary'] as const,
     },
   },
   ButtonIcon: {