Merge branch 'master' into feat/drawer-motion

* master: ci(bundlesize): opt out using --since as lightrail doesnt support this behaviour and needs everything build on every PR (microsoft#28545) feat: automatically add v9 package stories to public docsite and correctly create codesandbox demo source code (microsoft#28528) applying package updates Keytips: Align keytipData with visible instance for dupes (microsoft#28522) applying package updates V8 Fluent2 Theme: Spinner sizes (microsoft#28512) feat: add extra-tiny size value to size prop (microsoft#28249) feat(react-infobutton): Remove InfoIcon from react-infobutton (microsoft#28534) Made Breadcrumb package public (microsoft#28549) X bars showing incorrect data when the values are large- bug 8380 (microsoft#28510) feat(tools): implement `prepare-initial-release` generator (microsoft#28505) feat: release react-breadcrumb to preview (microsoft#28402) applying package updates fix: v8 SplitButton and split MenuItem have two touch targets when checkable (microsoft#28523) fix(react-infobutton): Apply aria-owns only when the popover is open and cleanup infobutton stories (microsoft#28463) fix: Pivot overflow role uses tab (microsoft#28409) Migrate react-search to preview (microsoft#28531)
marcosmoura · Jul 18, 2023 · ddae7e1 · ddae7e1
2 parents 31c97b8 + 4ba8f4f
commit ddae7e1
Show file tree

Hide file tree

Showing 135 changed files with 2,182 additions and 640 deletions.
diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -22,7 +22,7 @@
     "@fluentui/react-avatar": "*",
     "@fluentui/react-button": "*",
     "@fluentui/react-field": "*",
-    "@fluentui/react-infobutton": "9.0.0-beta.41",
+    "@fluentui/react-infobutton": "9.0.0-beta.42",
     "@fluentui/react-persona": "*",
     "@fluentui/react-provider": "*",
     "@fluentui/react-spinbutton": "*",

diff --git a/apps/public-docsite-v9/.storybook/main.js b/apps/public-docsite-v9/.storybook/main.js
@@ -12,9 +12,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
     '../src/**/*.stories.mdx',
     '../src/**/*.stories.@(ts|tsx)',
     ...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
-    '../../../packages/react-components/react-migration-v0-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-migration-v8-v9/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
-    '../../../packages/react-components/react-datepicker-compat/stories/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
+    ...getPackageStoriesGlob({ packageName: '@fluentui/public-docsite-v9', callerPath: __dirname }),
   ],
   staticDirs: ['../public'],
   addons: [...rootMain.addons],

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
@@ -23,6 +23,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-breadcrumb-preview": "*",
     "@fluentui/react-datepicker-compat": "*",
     "@fluentui/react-migration-v8-v9": "*",
     "@fluentui/react-migration-v0-v9": "*",
@@ -33,6 +34,7 @@
     "@fluentui/react-storybook-addon": "*",
     "@fluentui/react-storybook-addon-codesandbox": "*",
     "@fluentui/theme-designer": "*",
+    "@fluentui/react-search-preview": "*",
     "@griffel/react": "^1.5.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -34,7 +34,7 @@
     "@fluentui/react-field": "*",
     "@fluentui/react-icons": "^2.0.203",
     "@fluentui/react-image": "*",
-    "@fluentui/react-infobutton": "9.0.0-beta.41",
+    "@fluentui/react-infobutton": "9.0.0-beta.42",
     "@fluentui/react-input": "*",
     "@fluentui/react-label": "*",
     "@fluentui/react-link": "*",

diff --git a/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx b/apps/vr-tests-react-components/src/stories/Spinner.stories.tsx
@@ -13,81 +13,69 @@ const InvertedWrapper: React.FC = ({ children }) => {
 
 storiesOf('Spinner converged', module)
   .addDecorator(TestWrapperDecoratorNoAnimation)
-  .addStory('Primary', () => <Spinner className="test-class" />, {
+  .addStory('Primary', () => <Spinner />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Label', () => <Spinner className="test-class" label="Loading" />, {
+  .addStory('Primary with Label', () => <Spinner label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory(
-    'Primary with Label Before',
-    () => <Spinner className="test-class" labelPosition="before" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Primary with Label After',
-    () => <Spinner className="test-class" labelPosition="after" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-      includeRtl: true,
-    },
-  )
-  .addStory(
-    'Primary with Label Above',
-    () => <Spinner className="test-class" labelPosition="above" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory(
-    'Primary with Label Below',
-    () => <Spinner className="test-class" labelPosition="below" label="Loading" />,
-    {
-      includeHighContrast: true,
-      includeDarkMode: true,
-    },
-  )
-  .addStory('Primary with Size Tiny', () => <Spinner className="test-class" size="tiny" />, {
+  .addStory('Primary with Label Before', () => <Spinner labelPosition="before" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
+    includeRtl: true,
   })
-  .addStory('Primary with Size Extra Small', () => <Spinner className="test-class" size="extra-small" />, {
+  .addStory('Primary with Label After', () => <Spinner labelPosition="after" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
+    includeRtl: true,
   })
-  .addStory('Primary with Size Small', () => <Spinner className="test-class" size="small" />, {
+  .addStory('Primary with Label Above', () => <Spinner labelPosition="above" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Medium', () => <Spinner className="test-class" size="medium" />, {
+  .addStory('Primary with Label Below', () => <Spinner labelPosition="below" label="Loading" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Large', () => <Spinner className="test-class" size="large" />, {
+  .addStory('Primary with Size Extra Tiny', () => <Spinner size="extra-tiny" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Size Extra Large', () => <Spinner className="test-class" size="extra-large" />, {
+  .addStory('Primary with Size Tiny', () => <Spinner size="tiny" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
-  .addStory('Primary with Huge', () => <Spinner className="test-class" size="huge" />, {
+  .addStory('Primary with Size Extra Small', () => <Spinner size="extra-small" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Small', () => <Spinner size="small" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Medium', () => <Spinner size="medium" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Large', () => <Spinner size="large" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Size Extra Large', () => <Spinner size="extra-large" />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  })
+  .addStory('Primary with Huge', () => <Spinner size="huge" />, {
     includeHighContrast: true,
     includeDarkMode: true,
   })
   .addStory(
     'Inverted',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" />
+        <Spinner appearance="inverted" />
       </InvertedWrapper>
     ),
     {
@@ -99,7 +87,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" label="Loading" />
+        <Spinner appearance="inverted" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -111,7 +99,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Before',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="before" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="before" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -123,7 +111,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label After',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="after" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="after" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -135,7 +123,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Above',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="above" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="above" label="Loading" />
       </InvertedWrapper>
     ),
     {
@@ -147,7 +135,19 @@ storiesOf('Spinner converged', module)
     'Inverted with Label Below',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" labelPosition="below" label="Loading" />
+        <Spinner appearance="inverted" labelPosition="below" label="Loading" />
+      </InvertedWrapper>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Inverted with Size Extra Tiny',
+    () => (
+      <InvertedWrapper>
+        <Spinner appearance="inverted" size="extra-tiny" />
       </InvertedWrapper>
     ),
     {
@@ -156,10 +156,10 @@ storiesOf('Spinner converged', module)
     },
   )
   .addStory(
-    'Primary with Size Tiny',
+    'Inverted with Size Tiny',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="tiny" />
+        <Spinner appearance="inverted" size="tiny" />
       </InvertedWrapper>
     ),
     {
@@ -171,7 +171,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Extra Small',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="extra-small" />
+        <Spinner appearance="inverted" size="extra-small" />
       </InvertedWrapper>
     ),
     {
@@ -183,7 +183,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Small',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="small" />
+        <Spinner appearance="inverted" size="small" />
       </InvertedWrapper>
     ),
     {
@@ -195,7 +195,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Medium',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="medium" />
+        <Spinner appearance="inverted" size="medium" />
       </InvertedWrapper>
     ),
     {
@@ -207,7 +207,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Large',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="large" />
+        <Spinner appearance="inverted" size="large" />
       </InvertedWrapper>
     ),
     {
@@ -219,7 +219,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Size Extra Large',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="extra-large" />
+        <Spinner appearance="inverted" size="extra-large" />
       </InvertedWrapper>
     ),
     {
@@ -231,7 +231,7 @@ storiesOf('Spinner converged', module)
     'Inverted with Huge',
     () => (
       <InvertedWrapper>
-        <Spinner className="test-class" appearance="inverted" size="huge" />
+        <Spinner appearance="inverted" size="huge" />
       </InvertedWrapper>
     ),
     {

diff --git a/azure-pipelines.bundlesize.yml b/azure-pipelines.bundlesize.yml
@@ -65,8 +65,8 @@ jobs:
         inputs:
           filePath: yarn-ci.sh
         displayName: yarn
-
-      - script: yarn lage bundle-size-auditor --verbose $(sinceArg)
+        # we cannot use `--since` because the ligtrail service would calculate packages not build as a removal 🚨 - thus giving lot of noise and incorrect metrics on every PR
+      - script: yarn lage bundle-size-auditor
         displayName: build packages & create reports
 
       - script: yarn bundle-size-auditor --create-report --report-path dist/bundle-size-auditor

diff --git a/change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json b/change/@fluentui-react-card-d34069cc-ff5d-43bc-b4c5-8e199f94b5ed.json
diff --git a/change/@fluentui-react-virtualizer-31fd546c-91d0-46c0-854a-9eb30822acb2.json b/change/@fluentui-react-virtualizer-31fd546c-91d0-46c0-854a-9eb30822acb2.json
diff --git a/package.json b/package.json
@@ -109,6 +109,7 @@
     "@nrwl/node": "15.9.4",
     "@nrwl/workspace": "15.9.4",
     "@octokit/rest": "18.12.0",
+    "@phenomnomnominal/tsquery": "6.1.2",
     "@storybook/addon-a11y": "6.5.15",
     "@storybook/addon-actions": "6.5.15",
     "@storybook/addon-docs": "6.5.15",

diff --git a/packages/azure-themes/CHANGELOG.json b/packages/azure-themes/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@fluentui/azure-themes",
   "entries": [
+    {
+      "date": "Tue, 18 Jul 2023 07:35:18 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.24",
+      "version": "8.6.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.110.10",
+            "commit": "bbba7284a99cf7a63cbd7676a5a85e8770163357"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Jul 2023 07:39:32 GMT",
+      "tag": "@fluentui/azure-themes_v8.6.23",
+      "version": "8.6.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/azure-themes",
+            "comment": "Bump @fluentui/react to v8.110.9",
+            "commit": "b8b3ad77ad254d80e300e540e1fa77e6ef6a4f3c"
+          }
+        ]
+      }
+    },
     {
       "date": "Mon, 10 Jul 2023 07:35:07 GMT",
       "tag": "@fluentui/azure-themes_v8.6.22",

diff --git a/packages/azure-themes/CHANGELOG.md b/packages/azure-themes/CHANGELOG.md
@@ -1,9 +1,27 @@
 # Change Log - @fluentui/azure-themes
 
-This log was last generated on Mon, 10 Jul 2023 07:35:07 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Jul 2023 07:35:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [8.6.24](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.24)
+
+Tue, 18 Jul 2023 07:35:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.23..@fluentui/azure-themes_v8.6.24)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.10 ([PR #28522](https://github.com/microsoft/fluentui/pull/28522) by beachball)
+
+## [8.6.23](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.23)
+
+Mon, 17 Jul 2023 07:39:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/azure-themes_v8.6.22..@fluentui/azure-themes_v8.6.23)
+
+### Patches
+
+- Bump @fluentui/react to v8.110.9 ([PR #28523](https://github.com/microsoft/fluentui/pull/28523) by beachball)
+
 ## [8.6.22](https://github.com/microsoft/fluentui/tree/@fluentui/azure-themes_v8.6.22)
 
 Mon, 10 Jul 2023 07:35:07 GMT