Merge branch 'master' into fix/status-ref

microsoft · Dec 2, 2021 · 26d951d · 26d951d
2 parents 67d593a + a230bcd
commit 26d951d
Show file tree

Hide file tree

Showing 25 changed files with 277 additions and 108 deletions.
diff --git a/.storybook/preview-head-template.html b/.storybook/preview-head-template.html
@@ -68,6 +68,13 @@
     color: #000000;
   }
 
+  #docs-root .sbdocs-h3:before {
+    content: '';
+    display: block;
+    height: 60px;
+    margin: -60px 0 0;
+  }
+
   #docs-root .sbdocs-li {
     font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
       sans-serif;
@@ -150,6 +157,14 @@
     border-bottom: 1px solid #edebe9;
   }
 
+  #docs-root .docblock-argstable-body > tr > td:nth-child(4) {
+    display: none;
+  }
+
+  #docs-root .docblock-argstable-head > tr > th:nth-child(4) {
+    display: none;
+  }
+
   #docs-root .docblock-argstable tbody tr {
     border: none;
   }

diff --git a/apps/ts-minbar-test-react-components/CHANGELOG.json b/apps/ts-minbar-test-react-components/CHANGELOG.json
@@ -1,6 +1,21 @@
 {
   "name": "ts-minbar-test-react-components",
   "entries": [
+    {
+      "date": "Thu, 02 Dec 2021 07:36:30 GMT",
+      "tag": "ts-minbar-test-react-components_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "undefined": [
+          {
+            "author": "beachball",
+            "package": "ts-minbar-test-react-components",
+            "comment": "Bump @fluentui/react-components to v9.0.0-beta.5",
+            "commit": "dea36b70172522ea1d9da527ae961226ab2c847c"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 01 Dec 2021 07:41:09 GMT",
       "tag": "ts-minbar-test-react-components_v1.0.0",

diff --git a/change/@fluentui-bundle-size-293b0581-a682-418b-b6af-f1d8db0bf548.json b/change/@fluentui-bundle-size-293b0581-a682-418b-b6af-f1d8db0bf548.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Adds missing dependencies to bundle-size",
+  "packageName": "@fluentui/bundle-size",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-make-styles-e6ce655b-209a-44e5-be74-f6b79e841121.json b/change/@fluentui-make-styles-e6ce655b-209a-44e5-be74-f6b79e841121.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add `unstable_filterCSSRule` option to default `createDOMRenderer`",
+  "packageName": "@fluentui/make-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-components-49ec8f54-7c30-4c2d-a8a4-7a29909b42fd.json b/change/@fluentui-react-components-49ec8f54-7c30-4c2d-a8a4-7a29909b42fd.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs(storybook): hide editors in ArgsTable",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-components-d46cb04b-719b-408f-bf6d-186acf140108.json b/change/@fluentui-react-components-d46cb04b-719b-408f-bf6d-186acf140108.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs(storybook): fix anchor links with colons",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-positioning-9f126186-944d-4afa-8fdf-b11ba731e674.json b/change/@fluentui-react-positioning-9f126186-944d-4afa-8fdf-b11ba731e674.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Adds @noflip annotation to data-popper-placement styles",
+  "packageName": "@fluentui/react-positioning",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json b/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json
diff --git a/package.json b/package.json
@@ -397,7 +397,9 @@
         "dependencies": [
           "@azure/data-tables",
           "prettier",
-          "workspace-tools"
+          "workspace-tools",
+          "ci-info",
+          "node-fetch"
         ]
       }
     ]

diff --git a/packages/bundle-size/package.json b/packages/bundle-size/package.json
@@ -24,6 +24,8 @@
     "terser": "^5.5.1",
     "webpack": "^5.21.2",
     "workspace-tools": "^0.16.2",
+    "ci-info": "^3.2.0",
+    "node-fetch": "^2.6.1",
     "yargs": "^13.3.2"
   }
 }
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -69,6 +69,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Pill` components to properly pass ref to root slots @chpalac ([#20838](https://github.com/microsoft/fluentui/pull/20838))
 - Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20837](https://github.com/microsoft/fluentui/pull/20837))
 - Fix `Status` component to properly pass ref to root slots @chpalac ([#20872](https://github.com/microsoft/fluentui/pull/20872))
+- Fix `SplitButton` components to properly pass ref to root slots @chpalac ([#20871](https://github.com/microsoft/fluentui/pull/20871))
 - Fix `Segment` component to properly pass ref to root slots @chpalac ([#20869](https://github.com/microsoft/fluentui/pull/20869))
 - Fix `MenuButton` component to properly pass ref to root slots @chpalac ([#20870](https://github.com/microsoft/fluentui/pull/20870))
 - Fix `Reaction` components to properly pass ref to root slots @chpalac ([#20868](https://github.com/microsoft/fluentui/pull/20868))

diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
@@ -26,14 +26,14 @@ import { Ref } from '@fluentui/react-component-ref';
 import { PositioningProps, AutoSize } from '../../utils/positioner/types';
 
 import {
-  ComponentWithAs,
   useTelemetry,
   useAutoControlled,
   useAccessibility,
   getElementType,
   useFluentContext,
   useUnhandledProps,
   useStyles,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 export interface SplitButtonProps
@@ -110,10 +110,7 @@ export type SplitButtonStylesProps = Required<Pick<SplitButtonProps, 'size'>> &
 /**
  * A SplitButton enables users to take one of several related actions, one being dominant and rest being displayed in a menu.
  */
-export const SplitButton: ComponentWithAs<'div', SplitButtonProps> &
-  FluentComponentStaticProps<SplitButtonProps> & {
-    Toggle: typeof SplitButtonToggle;
-  } = props => {
+export const SplitButton = (React.forwardRef<HTMLDivElement, SplitButtonProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(SplitButton.displayName, context.telemetry);
   setStart();
@@ -210,6 +207,7 @@ export const SplitButton: ComponentWithAs<'div', SplitButtonProps> &
       <ElementType
         {...getA11yProps('root', {
           className: classes.root,
+          ref,
           ...unhandledProps,
         })}
       >
@@ -283,7 +281,10 @@ export const SplitButton: ComponentWithAs<'div', SplitButtonProps> &
 
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, SplitButtonProps> &
+  FluentComponentStaticProps<SplitButtonProps> & {
+    Toggle: typeof SplitButtonToggle;
+  };
 
 SplitButton.displayName = 'SplitButton';
 

diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
@@ -8,7 +8,7 @@ import {
   useFluentContext,
   useUnhandledProps,
   useStyles,
-  ComponentWithAs,
+  ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
 import {
@@ -42,8 +42,7 @@ export const SplitButtonDividerClassName = 'ui-splitButtonDivider';
 /**
  * A SplitButtonDivider visually segments content.
  */
-export const SplitButtonDivider: ComponentWithAs<'div', SplitButtonDividerProps> &
-  FluentComponentStaticProps<SplitButtonDividerProps> = props => {
+export const SplitButtonDivider = (React.forwardRef<HTMLDivElement, SplitButtonDividerProps>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(SplitButtonDivider.displayName, context.telemetry);
   setStart();
@@ -73,13 +72,15 @@ export const SplitButtonDivider: ComponentWithAs<'div', SplitButtonDividerProps>
     <ElementType
       {...getA11yProps('root', {
         className: classes.root,
+        ref,
         ...unhandledProps,
       })}
     />
   );
   setEnd();
   return element;
-};
+}) as unknown) as ForwardRefWithAs<'div', HTMLDivElement, SplitButtonDividerProps> &
+  FluentComponentStaticProps<SplitButtonDividerProps>;
 
 SplitButtonDivider.displayName = 'SplitButtonDivider';
 

diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
@@ -17,7 +17,7 @@ import {
 
 import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
 import {
-  ComponentWithAs,
+  ForwardRefWithAs,
   getElementType,
   useAccessibility,
   useFluentContext,
@@ -63,90 +63,93 @@ export const splitButtonToggleClassName = 'ui-splitbutton__toggle';
  * Implements [ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/#button) design pattern.
  */
 
-export const SplitButtonToggle: ComponentWithAs<'button', SplitButtonToggleProps> &
-  FluentComponentStaticProps<SplitButtonToggleProps> = props => {
-  const context = useFluentContext();
-  const { setStart, setEnd } = useTelemetry(SplitButtonToggle.displayName, context.telemetry);
-  setStart();
-
-  const {
-    accessibility,
-    as,
-    children,
-    content,
-    disabled,
-    primary,
-    className,
-    size,
-    flat,
-    styles,
-    variables,
-    design,
-  } = props;
-
-  const hasChildren = childrenExist(children);
-
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: SplitButtonToggle.displayName,
-    mapPropsToBehavior: () => ({
-      as: String(as),
+export const SplitButtonToggle = (React.forwardRef<HTMLButtonElement, SplitButtonToggleProps & { as: React.ReactNode }>(
+  (props, ref) => {
+    const context = useFluentContext();
+    const { setStart, setEnd } = useTelemetry(SplitButtonToggle.displayName, context.telemetry);
+    setStart();
+
+    const {
+      accessibility,
+      as,
+      children,
+      content,
       disabled,
-    }),
-    actionHandlers: {
-      performClick: event => {
-        event.preventDefault();
-        handleClick(event);
-      },
-    },
-    rtl: context.rtl,
-  });
-  const { classes } = useStyles<SplitButtonToggleStylesProps>(SplitButtonToggle.displayName, {
-    className: splitButtonToggleClassName,
-    mapPropsToStyles: () => ({
       primary,
-      disabled,
+      className,
       size,
       flat,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
       styles,
       variables,
-    }),
-    rtl: context.rtl,
-  });
-
-  const unhandledProps = useUnhandledProps(SplitButtonToggle.handledProps, props);
-  const ElementType = getElementType(props);
-
-  const handleClick = (e: React.SyntheticEvent) => {
-    if (disabled) {
-      e.preventDefault();
-      return;
-    }
-
-    _.invoke(props, 'onClick', e, props);
-  };
-
-  const result = (
-    <ElementType
-      {...rtlTextContainer.getAttributes({ forElements: [children] })}
-      {...getA11Props('root', {
-        onClick: handleClick,
-        disabled,
-        className: classes.root,
-        ...unhandledProps,
-      })}
-    >
-      {hasChildren ? children : content}
-    </ElementType>
-  );
+      design,
+    } = props;
 
-  setEnd();
+    const hasChildren = childrenExist(children);
 
-  return result;
-};
+    const getA11Props = useAccessibility(accessibility, {
+      debugName: SplitButtonToggle.displayName,
+      mapPropsToBehavior: () => ({
+        as: String(as),
+        disabled,
+      }),
+      actionHandlers: {
+        performClick: event => {
+          event.preventDefault();
+          handleClick(event);
+        },
+      },
+      rtl: context.rtl,
+    });
+    const { classes } = useStyles<SplitButtonToggleStylesProps>(SplitButtonToggle.displayName, {
+      className: splitButtonToggleClassName,
+      mapPropsToStyles: () => ({
+        primary,
+        disabled,
+        size,
+        flat,
+      }),
+      mapPropsToInlineStyles: () => ({
+        className,
+        design,
+        styles,
+        variables,
+      }),
+      rtl: context.rtl,
+    });
+
+    const unhandledProps = useUnhandledProps(SplitButtonToggle.handledProps, props);
+    const ElementType = getElementType(props);
+
+    const handleClick = (e: React.SyntheticEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+
+      _.invoke(props, 'onClick', e, props);
+    };
+
+    const result = (
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...getA11Props('root', {
+          onClick: handleClick,
+          disabled,
+          className: classes.root,
+          ref,
+          ...unhandledProps,
+        })}
+      >
+        {hasChildren ? children : content}
+      </ElementType>
+    );
+
+    setEnd();
+
+    return result;
+  },
+) as unknown) as ForwardRefWithAs<'button', HTMLButtonElement, SplitButtonToggleProps> &
+  FluentComponentStaticProps<SplitButtonToggleProps>;
 
 SplitButtonToggle.defaultProps = {
   as: 'button',