Props use types over interfaces

change/@fluentui-react-accordion-34d85cd9-e0e7-4a22-97d7-8355f5e2c280.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-avatar-91c7beba-35ca-4433-b8fc-51b16174e2a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-badge-556bf236-e527-4e1e-a6bb-6788c34fe314.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-button-811e2c67-6c7d-4d69-abaa-0465c7da3bab.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-conformance-13b729b3-9df4-4a35-8a7a-575e01dcad07.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated getCallbackArguments for complex types",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-divider-4c98e0a7-18d5-4361-97c7-43afde59ae01.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-image-dd68887f-99e7-4dea-98ba-147b811b9f4c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-image",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-label-8023615b-ead0-4833-8554-7386feee39fe.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-label",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-link-dc9bd6a4-7ee6-4d93-9340-b50d9bdc840b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-link",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-673bcfa8-153c-4bad-b3c7-e7ae1d94c529.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-900b28a7-1200-47a8-8086-47e892b3f722.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-portal-e8f15d2b-3472-4c4e-9f15-cf58c31f7fc4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-portal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-slider-95fcb550-a7b7-4ddf-b914-ddeff53da1ad.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-31dad7b8-2c19-4bf7-83a7-ea9eaabf273e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Updating to types over interfaces",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-accordion/Spec.md

@@ -34,104 +34,107 @@ Sample usages will be given in the following section of this document [Sample co
 The root level component serves context and common API between all children.
 
 ```ts
-export interface AccordionProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Indicates if keyboard navigation is available
-   */
-  navigable?: boolean;
-  /**
-   * Indicates if Accordion support multiple Panels opened at the same time
-   */
-  multiple?: boolean;
-  /**
-   * Indicates if Accordion support multiple Panels closed at the same time
-   */
-  collapsible?: boolean;
-  /**
-   * value indicating the items that are opened
-   * If used, the component will be in controlled mode
-   */
-  openItems?: AccordionItemValue | AccordionItemValue[];
-  /**
-   * Index indicating the panels that are opened
-   */
-  defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
-  /**
-   * Size of spacing in the heading
-   */
-  size?: 'small' | 'medium' | 'large' | 'extra-large';
-  /**
-   * The component to be used as button in the heading
-   */
-  button?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-  /**
-   * Expand icon slot rendered before (or after) children content in heading
-   */
-  expandIcon?: ShorthandProps<AccordionHeaderExpandIconProps>;
-  /**
-   * The position of the expand  icon slot in heading
-   */
-  expandIconPosition?: 'start' | 'end';
-  /**
-   * Extra icon slot rendered before children content in heading
-   */
-  icon?: ShorthandProps<AccordionHeaderIconProps>;
-  /**
-   * Indicates if the AccordionHeader should be inline-block
-   */
-  inline?: boolean;
-  onToggle?(event: AccordionToggleEvent, data: AccordionToggleData): void;
-}
+export type AccordionProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Indicates if keyboard navigation is available
+     */
+    navigable?: boolean;
+    /**
+     * Indicates if Accordion support multiple Panels opened at the same time
+     */
+    multiple?: boolean;
+    /**
+     * Indicates if Accordion support multiple Panels closed at the same time
+     */
+    collapsible?: boolean;
+    /**
+     * value indicating the items that are opened
+     * If used, the component will be in controlled mode
+     */
+    openItems?: AccordionItemValue | AccordionItemValue[];
+    /**
+     * Index indicating the panels that are opened
+     */
+    defaultOpenItems?: AccordionItemValue | AccordionItemValue[];
+    /**
+     * Size of spacing in the heading
+     */
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    /**
+     * The component to be used as button in the heading
+     */
+    button?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Expand icon slot rendered before (or after) children content in heading
+     */
+    expandIcon?: ShorthandProps<AccordionHeaderExpandIconProps>;
+    /**
+     * The position of the expand  icon slot in heading
+     */
+    expandIconPosition?: 'start' | 'end';
+    /**
+     * Extra icon slot rendered before children content in heading
+     */
+    icon?: ShorthandProps<AccordionHeaderIconProps>;
+    /**
+     * Indicates if the AccordionHeader should be inline-block
+     */
+    inline?: boolean;
+    onToggle?(event: AccordionToggleEvent, data: AccordionToggleData): void;
+  };
 ```
 
 ### AccordionItem
 
 Each Combination of `AccordionHeader` and `AccordionPanel` should be inside an `AccordionItem`, and The `Accordion` component should contain one or more `AccordionItem`.
 
 ```ts
-export interface AccordionItemProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Disables opening/closing of panel inside the item
-   */
-  disabled?: boolean;
-  /**
-   * required value that identifies this item inside an Accordion component
-   */
-  value: AccordionItemValue;
-}
+export type AccordionItemProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Disables opening/closing of panel inside the item
+     */
+    disabled?: boolean;
+    /**
+     * required value that identifies this item inside an Accordion component
+     */
+    value: AccordionItemValue;
+  };
 ```
 
 ### AccordionHeader
 
 Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content
 
 ```ts
-export interface AccordionHeaderProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Size of spacing in the heading
-   */
-  size?: 'small' | 'medium' | 'large' | 'extra-large';
-  /**
-   * The component to be used as button in heading
-   */
-  button?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
-  /**
-   * Expand icon slot rendered before (or after) children content in heading
-   */
-  expandIcon?: ShorthandProps<AccordionHeaderExpandIconProps>;
-  /**
-   * The position of the expand  icon slot in heading
-   */
-  expandIconPosition?: 'start' | 'end';
-  /**
-   * Extra icon slot rendered before children content in heading
-   */
-  icon?: ShorthandProps<AccordionHeaderIconProps>;
-  /**
-   * Indicates if the AccordionHeader should be inline-block
-   */
-  inline?: boolean;
-}
+export type AccordionHeaderProps = ComponentProps &
+  React.HTMLAttributes<HTMLElement> & {
+    /**
+     * Size of spacing in the heading
+     */
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    /**
+     * The component to be used as button in heading
+     */
+    button?: ShorthandProps<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Expand icon slot rendered before (or after) children content in heading
+     */
+    expandIcon?: ShorthandProps<AccordionHeaderExpandIconProps>;
+    /**
+     * The position of the expand  icon slot in heading
+     */
+    expandIconPosition?: 'start' | 'end';
+    /**
+     * Extra icon slot rendered before children content in heading
+     */
+    icon?: ShorthandProps<AccordionHeaderIconProps>;
+    /**
+     * Indicates if the AccordionHeader should be inline-block
+     */
+    inline?: boolean;
+  };
 ```
 
 ### AccordionPanel