feat: (breadcrumb) Removed appearance prop

apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx

@@ -12,10 +12,7 @@ export default {
 export const Appearance = () => (
   <>
     <h1>BreadcrumbButton</h1>
-    <h2>Transparent</h2>
-    <SampleBreadcrumbButtons appearance="transparent" />
-    <h2>Subtle</h2>
-    <SampleBreadcrumbButtons appearance="subtle" />
+    <SampleBreadcrumbButtons />
   </>
 );
 
@@ -31,11 +28,8 @@ export const Size = () => (
     <SampleBreadcrumbButtons size="small" />
     <SampleBreadcrumbButtons size="medium" />
     <SampleBreadcrumbButtons size="large" />
-
     <h1>BreadcrumbItem</h1>
     <SampleBreadcrumbItems size="small" />
-    <SampleBreadcrumbItems size="medium" />
-    <SampleBreadcrumbItems size="large" />
   </>
 );
 

apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx

@@ -40,8 +40,8 @@ export const SampleBreadcrumbItems = (props: BreadcrumbProps) => (
   <Breadcrumb {...props} className="breadcrumb-sample">
     <BreadcrumbItem>Item 1</BreadcrumbItem>
     <BreadcrumbDivider />
-    <BreadcrumbItem icon={<CalendarMonth />}>Item 2</BreadcrumbItem>
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
     <BreadcrumbDivider />
-    <BreadcrumbItem current>Item 3</BreadcrumbItem>
+    <BreadcrumbItem>Item 3</BreadcrumbItem>
   </Breadcrumb>
 );

change/@fluentui-react-breadcrumb-preview-8e37ea24-6643-4dca-a824-7919c7e0581c.json

@@ -0,0 +1,7 @@
+{
+  "type": "major",
+  "comment": "BREAKING CHANGE: remove `appearance` prop and set  `current` prop  for BreadcrumbButton last item",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-breadcrumb-preview/docs/MIGRATION.md

@@ -7,7 +7,6 @@ Here's how the API of v8's `Breadcrumb` compares to the one from v9's `Breadcrum
 
 #### New props
 
-- `appearance`
 - `size`
 
 #### Props no longer supported with an equivalent functionality in Breadcrumb V9:
@@ -54,7 +53,6 @@ BreadcrumbItem component contains similar props in V9.
 | v8 `Breadcrumb`     | v9 `Breadcrumb` |
 | ------------------- | --------------- |
 | `ariaLabel`         |                 |
-|                     | `appearance`    |
 | `className`         |                 |
 | `componentRef`      |                 |
 | `dividerAs`         | `dividerType`   |
@@ -83,7 +81,6 @@ BreadcrumbDivider has default `span`. BreadcrumbLink has `a` and Breadcrumb has
 | Northstar `Breadcrumb` | v9 `Breadcrumb` |
 | ---------------------- | --------------- |
 | `accessibility`        |                 |
-|                        | `appearance`    |
 | `as`                   |                 |
 | `className`            |                 |
 | `content`              |                 |

packages/react-components/react-breadcrumb-preview/docs/Spec.md

@@ -102,13 +102,6 @@ const BreadcrumbV9Example = props => (
 
 ## Variants
 
-### Appearance
-
-Breadcrumb can be:
-
-- transparent (default)
-- subtle
-
 ### BreadcrumbItem variants
 
 - Non-clickable element which is BreadcrumbItem component.
@@ -169,12 +162,11 @@ Dropdown contains collapsed items.
 
 #### API
 
-| Property    | Values                     | Default       | Purpose                        |
-| ----------- | -------------------------- | ------------- | ------------------------------ |
-| appearance  | `transparent`, `subtle`    | `transparent` | Sets appearance                |
-| dividerType | `chevron`, `slash`         | `chevron`     | Sets type of divider           |
-| focusMode   | `tab`, `arrow`             | `tab`         | Sets focus mode                |
-| size        | `small`, `medium`, `large` | `medium`      | Defines size of the Breadcrumb |
+| Property    | Values                     | Default   | Purpose                        |
+| ----------- | -------------------------- | --------- | ------------------------------ |
+| dividerType | `chevron`, `slash`         | `chevron` | Sets type of divider           |
+| focusMode   | `tab`, `arrow`             | `tab`     | Sets focus mode                |
+| size        | `small`, `medium`, `large` | `medium`  | Defines size of the Breadcrumb |
 
 ### BreadcrumbItem
 

packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md

@@ -26,7 +26,7 @@ export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
 // @public
-export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'appearance' | 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
+export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     current?: boolean;
 };
 
@@ -40,7 +40,7 @@ export type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> & Omit
 export const breadcrumbClassNames: SlotClassNames<BreadcrumbSlots>;
 
 // @public
-export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'appearance' | 'dividerType' | 'size'>> & {
+export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'dividerType' | 'size'>> & {
     items: Set<BreadcrumbItem_2>;
     registerItem: (item: BreadcrumbItem_2) => void;
     removeItem: (item: BreadcrumbItem_2) => void;
@@ -71,25 +71,21 @@ export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps>;
 export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots>;
 
 // @public
-export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'> & {
-    current?: boolean;
-};
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;
 
 // @public (undocumented)
 export type BreadcrumbItemSlots = {
     root: Slot<'li'>;
-    icon?: Slot<'span'>;
 };
 
 // @public
-export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size' | 'current'>> & {
+export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>> & {
     isInteractive?: boolean;
     hasInteractiveItems?: boolean;
 };
 
 // @public
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {
-    appearance?: 'transparent' | 'subtle';
     focusMode?: 'arrow' | 'tab';
     dividerType?: 'chevron' | 'slash';
     size?: 'small' | 'medium' | 'large';
@@ -105,7 +101,7 @@ export type BreadcrumbSlots = {
 };
 
 // @public
-export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'appearance' | 'size' | 'dividerType'>>;
+export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size' | 'dividerType'>>;
 
 // @public (undocumented)
 export const isTruncatableBreadcrumbContent: (content: string, maxLength: number) => boolean;

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/Breadcrumb.cy.tsx

@@ -50,9 +50,7 @@ const NonInteractiveBreadcrumbSample = (props: BreadcrumbProps) => (
     <Breadcrumb {...props} id="breadcrumb">
       <BreadcrumbItem id="breadcrumb-item-1">Item 1</BreadcrumbItem>
       <BreadcrumbItem id="breadcrumb-item-2">Item 2</BreadcrumbItem>
-      <BreadcrumbItem id="breadcrumb-item-3" current>
-        Item 3
-      </BreadcrumbItem>
+      <BreadcrumbItem id="breadcrumb-item-3">Item 3</BreadcrumbItem>
     </Breadcrumb>
 
     <p tabIndex={0} id="after">

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<Pick<BreadcrumbProps, 'appearance' | 'dividerType' | 'size'>> & {
+export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'dividerType' | 'size'>> & {
   items: Set<BreadcrumbItem>;
   registerItem: (item: BreadcrumbItem) => void;
   removeItem: (item: BreadcrumbItem) => void;
@@ -30,13 +30,6 @@ export type BreadcrumbSlots = {
  * Breadcrumb Props
  */
 export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {
-  /**
-   * Breadcrumb appearance.
-   *
-   * @default 'transparent'
-   */
-  appearance?: 'transparent' | 'subtle';
-
   /**
    * Sets the focus behavior for the Breadcrumb.
    *
@@ -69,5 +62,4 @@ export type BreadcrumbProps = ComponentProps<BreadcrumbSlots> & {
 /**
  * State used in rendering Breadcrumb
  */
-export type BreadcrumbState = ComponentState<BreadcrumbSlots> &
-  Required<Pick<BreadcrumbProps, 'appearance' | 'size' | 'dividerType'>>;
+export type BreadcrumbState = ComponentState<BreadcrumbSlots> & Required<Pick<BreadcrumbProps, 'size' | 'dividerType'>>;

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/BreadcrumbContext.ts

@@ -7,7 +7,6 @@ const BreadcrumbContext = React.createContext<BreadcrumbContextValues | undefine
  * @internal
  */
 export const breadcrumbDefaultValue: BreadcrumbContextValues = {
-  appearance: 'transparent',
   size: 'medium',
   dividerType: 'chevron',
   items: new Set(),

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts

@@ -13,14 +13,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
  * @param ref - reference to root HTMLElement of Breadcrumb
  */
 export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HTMLElement>): 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<HT
       { elementType: 'nav' },
     ),
     list: slot.optional(list, { renderByDefault: true, defaultProps: { role: 'list' }, elementType: 'ol' }),
-    appearance,
     dividerType,
     size,
   };

packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumbContextValue.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { BreadcrumbContextValues, BreadcrumbItem, BreadcrumbState } from './Breadcrumb.types';
 
 export function useBreadcrumbContextValues_unstable(state: BreadcrumbState): BreadcrumbContextValues {
-  const { appearance, dividerType, size } = state;
+  const { dividerType, size } = state;
   const [items, setItems] = React.useState<BreadcrumbContextValues['items']>(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 };
 }

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<BreadcrumbButtonSlots> &
-  Pick<BreadcrumbProps, 'appearance' | 'size'> &
+  Pick<BreadcrumbProps, 'size'> &
   Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     /**
      * Defines current sate of BreadcrumbButton.

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/useBreadcrumbButton.ts

@@ -18,7 +18,7 @@ export const useBreadcrumbButton_unstable = (
   props: BreadcrumbButtonProps,
   ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
 ): 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,
     ),

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<BreadcrumbItemSlots> &
-  Pick<BreadcrumbProps, 'size'> & {
-    /**
-     * Defines current sate of the BreadcrumbItem.
-     *
-     * @default false
-     */
-    current?: boolean;
-  };
+export type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;
 
 /**
  * State used in rendering BreadcrumbItem
  */
 export type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> &
-  Required<Pick<BreadcrumbItemProps, 'size' | 'current'>> & {
+  Required<Pick<BreadcrumbItemProps, 'size'>> & {
     /**
      * Defines whether item is interactive or not.
      */

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<BreadcrumbItemSlots>(state);
 
-  return (
-    <state.root>
-      {state.icon && <state.icon />}
-      {state.root.children}
-    </state.root>
-  );
+  return <state.root>{state.root.children}</state.root>;
 };

packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts

@@ -17,13 +17,11 @@ export const useBreadcrumbItem_unstable = (
   ref: React.Ref<HTMLLIElement>,
 ): 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,
   };