Merge pull request #33437 from backstage/techdocs-bui-header-migration

feat(techdocs): migrate alpha plugin pages to BUI header system

packages/ui/report.api.md

@@ -2159,6 +2159,7 @@ export const SearchAutocompleteDefinition: {
   readonly styles: {
     readonly [key: string]: string;
   };
+  readonly bg: 'consumer';
   readonly classNames: {
     readonly root: 'bui-SearchAutocomplete';
     readonly searchField: 'bui-SearchAutocompleteSearchField';

packages/ui/src/components/PluginHeader/PluginHeader.tsx

@@ -125,7 +125,9 @@ export const PluginHeader = (props: PluginHeaderProps) => {
 
   const titleContent = (
     <>
-      <div className={classes.toolbarIcon}>{icon || <RiShapesLine />}</div>
+      <div className={classes.toolbarIcon} aria-hidden="true">
+        {icon || <RiShapesLine />}
+      </div>
       <Text variant="body-medium">{title || 'Your plugin'}</Text>
     </>
   );

packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.module.css

@@ -38,6 +38,18 @@
       --search-autocomplete-item-height: 2.5rem;
       height: 2.5rem;
     }
+
+    &[data-on-bg='neutral-1'] {
+      background-color: var(--bui-bg-neutral-2);
+    }
+
+    &[data-on-bg='neutral-2'] {
+      background-color: var(--bui-bg-neutral-3);
+    }
+
+    &[data-on-bg='neutral-3'] {
+      background-color: var(--bui-bg-neutral-4);
+    }
   }
 
   .bui-SearchAutocompleteSearchField {

packages/ui/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -124,7 +124,7 @@ export function SearchAutocomplete(props: SearchAutocompleteProps) {
           <div
             ref={triggerRef}
             className={classes.root}
-            data-size={dataAttributes['data-size']}
+            {...dataAttributes}
             style={style}
           >
             <div aria-hidden="true">

packages/ui/src/components/SearchAutocomplete/definition.ts

@@ -28,6 +28,7 @@ import styles from './SearchAutocomplete.module.css';
 export const SearchAutocompleteDefinition =
   defineComponent<SearchAutocompleteOwnProps>()({
     styles,
+    bg: 'consumer',
     classNames: {
       root: 'bui-SearchAutocomplete',
       searchField: 'bui-SearchAutocompleteSearchField',