Label breadcrumb collapse menu (#6979)

Label breadcrumb collapse menu

Author: snowystinger

packages/@react-spectrum/s2/intl/en-US.json

@@ -17,5 +17,6 @@
   "tag.showAllButtonLabel": "Show all ({tagCount, number})",
   "tag.hideButtonLabel": "Show less",
   "tag.actions": "Actions",
-  "tag.noTags": "None"
+  "tag.noTags": "None",
+  "breadcrumbs.more": "More items"
 }

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButton} from './ActionButton';
 import {
   Breadcrumb as AriaBreadcrumb,
   BreadcrumbsProps as AriaBreadcrumbsProps,
@@ -29,12 +30,14 @@ import {createContext, forwardRef, Fragment, ReactNode, RefObject, useCallback,
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {Menu, MenuItem, MenuTrigger} from './Menu';
-import {ActionButton as S2ActionButton} from './ActionButton';
 import {size, style} from '../style/spectrum-theme' with { type: 'macro' };
 import {Text} from './Content';
 import {useDOMRef, useResizeObserver} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 const MIN_VISIBLE_ITEMS = 1;
@@ -128,15 +131,16 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<H
 }
 
 let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items, onAction} = props;
   let {direction} = useLocale();
   let {size, isDisabled} = useContext(InternalBreadcrumbsContext);
-  // TODO localize See more
+  let label = stringFormatter.format('breadcrumbs.more');
   return (
     <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>
       <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>
         <MenuTrigger>
-          <S2ActionButton isDisabled={isDisabled} isQuiet aria-label="See more"><FolderIcon /></S2ActionButton>
+          <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>
           <Menu items={items} onAction={onAction}>
             {(item: Node<any>) => (
               <MenuItem
@@ -193,7 +197,7 @@ let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | nu
           </div>
         );
       })}
-      <S2ActionButton data-hidden-button isQuiet><FolderIcon /></S2ActionButton>
+      <ActionButton data-hidden-button isQuiet><FolderIcon /></ActionButton>
     </div>
   );
 };

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaBreadcrumbsProps} from 'react-aria';
+import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
 import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
@@ -31,13 +31,14 @@ export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<an
 function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
+  let {navProps} = useBreadcrumbs(props);
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>
       {collection => (
         <ol
           ref={ref}
-          {...filterDOMProps(props, {labelable: true})}
+          {...navProps}
           slot={props.slot || undefined}
           style={props.style}
           className={props.className ?? 'react-aria-Breadcrumbs'}>

scripts/migrateIntl.mjs

@@ -11,6 +11,7 @@ let mapToNewKeys = {
 };
 
 let stringsToAllow = new Set([
+  'breadcrumbs.more',
   'menu.moreActions',
   'dialog.alert',
   'contextualhelp.info',
@@ -103,6 +104,14 @@ console.log(packs)
 
 for (let [key, value] of packs) {
   let dest = path.join(__dirname, '../packages/@react-spectrum/s2/intl', `${key}.json`);
+  if (fs.existsSync(dest)) {
+    let translations = fs.readJsonSync(dest);
+    for (let [name, message] of Object.entries(translations)) {
+      if (!value[name]) {
+        value[name] = message;
+      }
+    }
+  }
   fs.writeFile(dest, JSON.stringify(value, null, 2));
 }