feat(metadata-view): Add Subheader for Metadata View v2

Author: jfox16

i18n/en-US.properties

@@ -92,6 +92,8 @@ be.breadcrumb.breadcrumbLabel = Breadcrumb
 be.cancel = Cancel
 # Label for choose action.
 be.choose = Choose
+# Aria label for the clear selection button.
+be.clearSelection = Clear selection
 # Label for close action.
 be.close = Close
 # Icon title for a Box item of type folder that has collaborators

src/elements/common/messages.js

@@ -387,6 +387,11 @@ const messages = defineMessages({
         description: 'Aria label for the clear button in the search box.',
         defaultMessage: 'Clear search',
     },
+    clearSelection: {
+        id: 'be.clearSelection',
+        description: 'Aria label for the clear selection button.',
+        defaultMessage: 'Clear selection',
+    },
     searchPlaceholder: {
         id: 'be.searchPlaceholder',
         description: 'Shown as a placeholder in the search box.',

src/elements/common/sub-header/SubHeaderLeftV2.scss

@@ -1,3 +1,3 @@
-.be-sub-header-left-v2-selected {
-    gap: 12px;
+.be-SubHeaderLeftV2--selection {
+    gap: var(--space-3);
 }

src/elements/common/sub-header/SubHeaderLeftV2.tsx

@@ -24,7 +24,7 @@ const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
     const selectedItemText = useMemo(() => {
         const selectedCount = selectedItemIds === 'all' ? currentCollection.items.length : selectedItemIds.size;
 
-        if (typeof selectedCount !== 'number' || selectedCount === 0) {
+        if (selectedCount === 0) {
             return '';
         }
 
@@ -33,9 +33,7 @@ const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
             const selectedKey =
                 selectedItemIds === 'all' ? currentCollection.items[0].id : selectedItemIds.values().next().value;
             const selectedItem = currentCollection.items.find(item => item.id === selectedKey);
-            if (typeof selectedItem?.name === 'string') {
-                return selectedItem.name as string;
-            }
+            return selectedItem?.name ?? '';
         }
         // Case 2: Multiple selected items - show count
         if (selectedCount > 1) {
@@ -47,18 +45,18 @@ const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
     // Case 1 and 2: selected item text with X button
     if (selectedItemText) {
         return (
-            <PageHeader.Root className="be-sub-header-left-v2-selected" variant="default">
+            <PageHeader.Root className="be-SubHeaderLeftV2--selection" variant="default">
                 <PageHeader.Corner>
                     <IconButton
-                        aria-label="Clear selection"
+                        aria-label={formatMessage(messages.clearSelection)}
                         icon={XMark}
                         onClick={onClearSelectedItemIds}
                         variant="small-utility"
                     />
                 </PageHeader.Corner>
 
                 <PageHeader.StartElements>
-                    <Text as="p">{selectedItemText}</Text>
+                    <Text as="span">{selectedItemText}</Text>
                 </PageHeader.StartElements>
             </PageHeader.Root>
         );
@@ -67,7 +65,7 @@ const SubHeaderLeftV2 = (props: SubHeaderLeftV2Props) => {
     // Case 3: No selected items - show title if provided, otherwise show root name
     return (
         <Text as="h1" variant="titleXLarge">
-            {title || rootName}
+            {title ?? rootName}
         </Text>
     );
 };

src/elements/content-explorer/ContentExplorer.tsx

@@ -241,7 +241,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
         },
         contentUploaderProps: {},
         metadataViewProps: {},
-        title: '',
     };
 
     /**