feat: Allow for link styles in Breadcrumb group dropdown items

src/breadcrumb-group/implementation.tsx

@@ -78,6 +78,7 @@ const EllipsisDropdown = ({
         onItemClick={onDropdownItemClick}
         onItemFollow={onDropdownItemFollow}
         customTriggerBuilder={getDropdownTrigger}
+        linkStyle={true}
         analyticsMetadataTransformer={metadata => {
           if (metadata.detail?.id) {
             delete metadata.detail.id;

src/button-dropdown/interfaces.ts

@@ -234,6 +234,7 @@ export interface ItemListProps extends HighlightProps {
   variant?: InternalButtonDropdownProps['variant'];
   position?: string;
   analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];
+  linkStyle?: boolean;
 }
 
 export interface LinkItem extends ButtonDropdownProps.Item {
@@ -252,6 +253,7 @@ export interface ItemProps {
   variant?: ItemListProps['variant'];
   position?: string;
   analyticsMetadataTransformer?: InternalButtonDropdownProps['analyticsMetadataTransformer'];
+  linkStyle?: boolean;
 }
 
 export interface InternalItem extends ButtonDropdownProps.Item {
@@ -288,6 +290,13 @@ export interface InternalButtonDropdownProps
    * instead of dropping left or right.
    */
   preferCenter?: boolean;
+
+  /**
+   * Determines whether simple items should be displayed with the link styles.
+   * Used in Breadcrumb group component for collapsed breadcrumbs
+   */
+  linkStyle?: boolean;
+
   analyticsMetadataTransformer?: (input: GeneratedAnalyticsMetadataFragment) => GeneratedAnalyticsMetadataFragment;
 }
 

src/button-dropdown/internal.tsx

@@ -50,6 +50,7 @@ const InternalButtonDropdown = React.forwardRef(
       mainAction,
       __internalRootRef,
       analyticsMetadataTransformer,
+      linkStyle,
       ...props
     }: InternalButtonDropdownProps,
     ref: React.Ref<ButtonDropdownProps.Ref>
@@ -356,6 +357,7 @@ const InternalButtonDropdown = React.forwardRef(
               expandToViewport={expandToViewport}
               variant={variant}
               analyticsMetadataTransformer={analyticsMetadataTransformer}
+              linkStyle={linkStyle}
             />
           </OptionsList>
         </Dropdown>

src/button-dropdown/item-element/index.tsx

@@ -34,6 +34,7 @@ const ItemElement = ({
   isKeyboardHighlighted = false,
   analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,
   variant = 'normal',
+  linkStyle,
 }: ItemProps) => {
   const isLink = isLinkItem(item);
   const isCheckbox = isCheckboxItem(item);
@@ -83,7 +84,7 @@ const ItemElement = ({
             }) as GeneratedAnalyticsMetadataButtonDropdownClick)
       )}
     >
-      <MenuItem item={item} disabled={disabled} highlighted={highlighted} />
+      <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />
     </li>
   );
 };
@@ -100,9 +101,10 @@ interface MenuItemProps {
   item: InternalItemProps | InternalCheckboxItemProps;
   disabled: boolean;
   highlighted: boolean;
+  linkStyle?: boolean;
 }
 
-function MenuItem({ item, disabled, highlighted }: MenuItemProps) {
+function MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {
   const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);
   const isCheckbox = isCheckboxItem(item);
 
@@ -116,7 +118,7 @@ function MenuItem({ item, disabled, highlighted }: MenuItemProps) {
   const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);
   const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {
     'aria-label': item.ariaLabel,
-    className: clsx(styles['menu-item'], analyticsLabels['menu-item']),
+    className: clsx(styles['menu-item'], analyticsLabels['menu-item'], linkStyle && styles['link-style']),
     lang: item.lang,
     ref: menuItemRef,
     // We are using the roving tabindex technique to manage the focus state of the dropdown.

src/button-dropdown/item-element/styles.scss

@@ -61,6 +61,10 @@
   color: inherit;
   text-decoration: none;
 
+  &.link-style {
+    @include styles.link-inline('body-m');
+  }
+
   &:focus {
     outline: none;
   }

src/button-dropdown/items-list.tsx

@@ -27,6 +27,7 @@ export default function ItemsList({
   variant = 'normal',
   analyticsMetadataTransformer,
   position,
+  linkStyle,
 }: ItemListProps) {
   const isMobile = useMobile();
 
@@ -48,6 +49,7 @@ export default function ItemsList({
           variant={variant}
           position={`${position ? `${position},` : ''}${index + 1}`}
           analyticsMetadataTransformer={analyticsMetadataTransformer}
+          linkStyle={linkStyle}
         />
       );
     }