>;
// @public (undocumented)
export const isTruncatableBreadcrumbContent: (content: string, maxLength: number) => boolean;
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx
index ba919031846584..84069a6087d256 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx
@@ -50,9 +50,7 @@ const NonInteractiveBreadcrumbSample = (props: BreadcrumbProps) => (
Item 1
Item 2
-
- Item 3
-
+ Item 3
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts
index 528f1e199496c6..0c185b4db64771 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -8,7 +8,7 @@ export type BreadcrumbItem = {
/**
* Data shared between breadcrumb components
*/
-export type BreadcrumbContextValues = Required> & {
+export type BreadcrumbContextValues = Required> & {
items: Set;
registerItem: (item: BreadcrumbItem) => void;
removeItem: (item: BreadcrumbItem) => void;
@@ -30,13 +30,6 @@ export type BreadcrumbSlots = {
* Breadcrumb Props
*/
export type BreadcrumbProps = ComponentProps & {
- /**
- * Breadcrumb appearance.
- *
- * @default 'transparent'
- */
- appearance?: 'transparent' | 'subtle';
-
/**
* Sets the focus behavior for the Breadcrumb.
*
@@ -69,5 +62,4 @@ export type BreadcrumbProps = ComponentProps & {
/**
* State used in rendering Breadcrumb
*/
-export type BreadcrumbState = ComponentState &
- Required>;
+export type BreadcrumbState = ComponentState & Required>;
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts
index d2c9a23e1e5e52..b46096601022dc 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts
@@ -7,7 +7,6 @@ const BreadcrumbContext = React.createContext): BreadcrumbState => {
- const {
- appearance = 'transparent',
- focusMode = 'tab',
- dividerType = 'chevron',
- size = 'medium',
- list,
- ...rest
- } = props;
+ const { focusMode = 'tab', dividerType = 'chevron', size = 'medium', list, ...rest } = props;
const focusAttributes = useArrowNavigationGroup({
circular: true,
@@ -43,7 +36,6 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref(new Set());
const registerItem = React.useCallback((item: BreadcrumbItem) => {
@@ -27,5 +27,5 @@ export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): Bre
const hasInteractiveItems = React.useMemo(() => [...items].some(item => item.type === 'button'), [items]);
- return { appearance, dividerType, size, items, registerItem, removeItem, hasInteractiveItems };
+ return { dividerType, size, items, registerItem, removeItem, hasInteractiveItems };
}
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
index 302474cdc4224b..edf9dcff71e0b5 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
@@ -8,7 +8,7 @@ export type BreadcrumbButtonSlots = ButtonSlots;
* BreadcrumbButton Props
*/
export type BreadcrumbButtonProps = ComponentProps &
- Pick &
+ Pick &
Pick & {
/**
* Defines current sate of BreadcrumbButton.
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
index 1578467ef67929..11be27204dd2fd 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts
@@ -18,7 +18,7 @@ export const useBreadcrumbButton_unstable = (
props: BreadcrumbButtonProps,
ref: React.Ref,
): BreadcrumbButtonState => {
- const { appearance, size, registerItem, removeItem } = useBreadcrumbContext_unstable();
+ const { size, registerItem, removeItem } = useBreadcrumbContext_unstable();
const { current = false, icon, ...rest } = props;
const id = useId('breadcrumb-button-', props.id);
@@ -33,11 +33,12 @@ export const useBreadcrumbButton_unstable = (
return {
...useButton_unstable(
{
+ appearance: 'subtle',
...rest,
- appearance: props.appearance || appearance,
iconPosition: 'before',
icon,
'aria-current': current ? props['aria-current'] ?? 'page' : undefined,
+ 'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,
},
ref,
),
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
index 7a9409cd39cd1e..d3cd3ba508184f 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/BreadcrumbItem.types.ts
@@ -3,31 +3,18 @@ import type { BreadcrumbProps } from '../Breadcrumb';
export type BreadcrumbItemSlots = {
root: Slot<'li'>;
-
- /**
- * Icon that renders before the `children`.
- */
- icon?: Slot<'span'>;
};
/**
* BreadcrumbItem Props
*/
-export type BreadcrumbItemProps = ComponentProps &
- Pick & {
- /**
- * Defines current sate of the BreadcrumbItem.
- *
- * @default false
- */
- current?: boolean;
- };
+export type BreadcrumbItemProps = ComponentProps & Pick;
/**
* State used in rendering BreadcrumbItem
*/
export type BreadcrumbItemState = ComponentState &
- Required> & {
+ Required> & {
/**
* Defines whether item is interactive or not.
*/
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
index dd6305f9e73831..1ae16ae47040c9 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/renderBreadcrumbItem.tsx
@@ -10,10 +10,5 @@ import type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.
export const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => {
assertSlots(state);
- return (
-
- {state.icon && }
- {state.root.children}
-
- );
+ return {state.root.children};
};
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
index ed2247b2475098..f47d2f608b2027 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -17,13 +17,11 @@ export const useBreadcrumbItem_unstable = (
ref: React.Ref,
): BreadcrumbItemState => {
const { size, hasInteractiveItems } = useBreadcrumbContext_unstable();
- const { current = false, icon } = props;
const isInteractive = typeof props.children === 'object';
- const iconSlot = slot.optional(icon, { elementType: 'span' });
return {
- components: { root: 'li', icon: 'span' },
+ components: { root: 'li' },
root: slot.always(
getIntrinsicElementProps('li', {
ref,
@@ -32,8 +30,6 @@ export const useBreadcrumbItem_unstable = (
{ elementType: 'li' },
),
size,
- current,
- icon: iconSlot,
isInteractive,
hasInteractiveItems,
};
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
index 89b6b314dcd104..649a4a5be7716a 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
@@ -2,11 +2,9 @@ import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/
import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';
import type { SlotClassNames } from '@fluentui/react-utilities';
import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { useIconStyles } from '../../shared/useIconStyles.styles';
export const breadcrumbItemClassNames: SlotClassNames = {
root: 'fui-BreadcrumbItem',
- icon: 'fui-BreadcrumbItem__icon',
};
const useBreadcrumbItemResetStyles = makeResetStyles({
@@ -26,12 +24,6 @@ const useBreadcrumbItemResetStyles = makeResetStyles({
* Styles for the root slot
*/
const useStyles = makeStyles({
- icon: {
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- marginRight: tokens.spacingHorizontalXS,
- },
small: {
height: '24px',
...shorthands.padding(tokens.spacingHorizontalSNudge),
@@ -42,15 +34,6 @@ const useStyles = makeStyles({
...shorthands.padding(tokens.spacingHorizontalS),
...typographyStyles.body2,
},
- currentSmall: {
- ...typographyStyles.caption1Strong,
- },
- currentMedium: {
- ...typographyStyles.body1Strong,
- },
- currentLarge: {
- ...typographyStyles.subtitle2,
- },
noSpacing: {
...shorthands.padding(0),
},
@@ -62,18 +45,12 @@ const useStyles = makeStyles({
export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {
const resetStyles = useBreadcrumbItemResetStyles();
const styles = useStyles();
- const iconStyles = useIconStyles();
const size = state.size || 'medium';
const sizeMap = {
small: styles.small,
medium: '', // Medium is the default. No need to apply any styles
large: styles.large,
} as const;
- const currentSizeMap = {
- small: styles.currentSmall,
- medium: styles.currentMedium,
- large: styles.currentLarge,
- } as const;
const noSpacingStyle =
state.isInteractive || (!state.hasInteractiveItems && state.size === 'small') ? styles.noSpacing : '';
@@ -81,14 +58,9 @@ export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): Br
breadcrumbItemClassNames.root,
resetStyles,
sizeMap[size],
- state.current && currentSizeMap[size],
noSpacingStyle,
state.root.className,
);
- if (state.icon) {
- state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], styles.icon, state.icon.className);
- }
-
return state;
};
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md
index 68b0c7870cfca6..d0462d5e5e4dd2 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbBestPractices.md
@@ -8,7 +8,7 @@
- Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page.
- Provide label to the Breadcrumb component using `aria-label` or `aria-labelledby` prop.
- Set the `current` prop on the last item.
-- Use `slash` dividers only for small and non-interactive breadcrums.
+- Use `slash` dividers only for non-interactive file paths.
- If long items are truncated, add a Tooltip to display the full text.
### Don't
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonAppearanceSubtle.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonAppearanceSubtle.stories.tsx
deleted file mode 100644
index 253468a3b3cb8a..00000000000000
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonAppearanceSubtle.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from '@fluentui/react-breadcrumb-preview';
-import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
-
-const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
-
-export const BreadcrumbButtonAppearanceSubtle = () => {
- return (
-
-
- Item 1
-
-
-
- }>Item 2
-
-
-
- Item 3
-
-
- Item 4
-
- );
-};
-
-BreadcrumbButtonAppearanceSubtle.parameters = {
- docs: {
- description: {
- story:
- 'Prop `appearance` is only for interactive items (BreadcrumbButton).' +
- 'Appearance can be `"transparent"` (default) or `"subtle"`.',
- },
- },
-};
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx
index d2d931f65c6679..462ad5e0c21a69 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbButtonWithHrefAttribute.stories.tsx
@@ -60,24 +60,16 @@ const linkItems: Item[] = [
];
function renderLink(el: Item, isLastItem: boolean = false) {
- if (!isLastItem) {
- return (
-
-
-
- {el.item}
-
-
-
-
- );
- } else {
- return (
-
- {el.item}
+ return (
+
+
+
+ {el.item}
+
- );
- }
+ {!isLastItem && }
+
+ );
}
export const BreadcrumbButtonWithHrefAttribute = () => {
return (
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
index 4b4161ed965a95..39af6d4af9ad81 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbDefault.stories.tsx
@@ -20,7 +20,9 @@ export const Default = () => {
Item 3
- Item 4
+
+ Item 4
+
);
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbFocusMode.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbFocusMode.stories.tsx
index fb074d2bca1e9c..7ff0f965e374ce 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbFocusMode.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbFocusMode.stories.tsx
@@ -18,7 +18,9 @@ export const FocusModeArrow = () => (
}>Item 3
- Item 4
+
+ Item 4
+
);
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
index e0f1cbbe26181e..8e521eae26a7f3 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbSize.stories.tsx
@@ -14,7 +14,7 @@ export const BreadcrumbSize = () => {
Item 3
- Item 4
+ Item 4
Interactive Breadcrumb
@@ -30,7 +30,9 @@ export const BreadcrumbSize = () => {
Item 3
- Item 4
+
+ Item 4
+
@@ -45,7 +47,9 @@ export const BreadcrumbSize = () => {
Item 3
- Item 4
+
+ Item 4
+
@@ -60,7 +64,9 @@ export const BreadcrumbSize = () => {
Item 3
- Item 4
+
+ Item 4
+
);
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
index 7ca2595e100ff1..0e57d364aa526a 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
@@ -170,35 +170,37 @@ const ControlledOverflowMenu = (props: PartitionBreadcrumbItems) =>
}
return (
-
+
+
+
);
};
const BreadcrumbControlledOverflowExample = () => {
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
index d6df87aa7bfb74..b708958630b3b4 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithTooltip.stories.tsx
@@ -10,6 +10,7 @@ import {
MenuPopover,
MenuList,
MenuItem,
+ Button,
} from '@fluentui/react-components';
import { MoreHorizontalRegular, MoreHorizontalFilled, bundleIcon } from '@fluentui/react-icons';
import {
@@ -87,10 +88,6 @@ const itemsWithLongNames: Item[] = [
key: 4,
item: 'Item 5 which is longer than 30 characters',
},
- {
- key: 5,
- item: "Don't think about what you want to be, but what you want to do.",
- },
];
const useTooltipStyles = makeStyles({
@@ -106,8 +103,8 @@ function renderItem(entry: Item, isLastItem: boolean) {
{isTruncatableBreadcrumbContent(entry.item, 30) ? (
-
- {truncateBreadcrumbLongName(entry.item)}
+
+ {truncateBreadcrumbLongName(entry.item)}
) : (
@@ -151,9 +148,9 @@ const MenuWithTooltip = (props: PartitionBreadcrumbItems- ) => {
}}
relationship="label"
>
- }
aria-label={`${overflowCount} more tabs`}
diff --git a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
index d817510fb443f7..79e315224a3be7 100644
--- a/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb-preview/stories/Breadcrumb/index.stories.tsx
@@ -3,7 +3,6 @@ import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from
import descriptionMd from './BreadcrumbDescription.md';
import bestPracticesMd from './BreadcrumbBestPractices.md';
export { Default } from './BreadcrumbDefault.stories';
-export { BreadcrumbButtonAppearanceSubtle } from './BreadcrumbButtonAppearanceSubtle.stories';
export { BreadcrumbButtonWithHrefAttribute } from './BreadcrumbButtonWithHrefAttribute.stories';
export { BreadcrumbSlashDivider } from './BreadcrumbSlashDivider.stories';
export { BreadcrumbSize } from './BreadcrumbSize.stories';