Merge branch 'master' into scaffold_eslint-plugin-react-components

.github/actions/run-publish-vr-screenshot/action.yml

@@ -80,6 +80,7 @@ runs:
       uses: actions/upload-artifact@v4
       with:
         name: vrscreenshot${{ inputs.fluentVersion }}
+        retention-days: 1
         path: screenshots
 
     # ==========================================================

.github/labeler.yml

@@ -1 +1,29 @@
-'Type: RFC': 'rfcs/**/*.md'
+'Type: RFC':
+  - changed-files:
+      - any-glob-to-any-file: 'docs/react-v9/contributing/rfcs/**'
+
+'CI':
+  - changed-files:
+      - any-glob-to-any-file:
+          - '.github/**'
+          - '.devops/**'
+          - 'azure-pipelines*.yml'
+
+'NX: core':
+  - changed-files:
+      - any-glob-to-any-file:
+          - 'tools/workspace-plugin/**'
+          - 'nx.json'
+          - '**/project.json'
+
+'NX: workspace generators':
+  - changed-files:
+      - any-glob-to-any-file: 'tools/workspace-plugin/src/generators/*'
+
+'NX: workspace executors':
+  - changed-files:
+      - any-glob-to-any-file: 'tools/workspace-plugin/src/executors/*'
+
+'NX: workspace eslint-rules':
+  - changed-files:
+      - any-glob-to-any-file: 'tools/eslint-rules/*'

.github/workflows/bundle-size-base.yml

@@ -10,29 +10,21 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NX_PARALLEL: 6 # ubuntu-latest = 4-core CPU / 16 GB of RAM | macos-14-xlarge (arm) = 6-core CPU / 14 GB of RAM
+  NX_PARALLEL: 4 # ubuntu-latest = 4-core CPU / 16 GB of RAM | macos-14-xlarge (arm) = 6-core CPU / 14 GB of RAM
   NX_PREFER_TS_NODE: true
   NX_VERBOSE_LOGGING: true
 
   BROWSERSLIST_IGNORE_OLD_DATA: true
 
 jobs:
   bundle-size-base:
-    runs-on: macos-14-xlarge
+    # TODO: use macos-14-xlarge (arm) for faster builds once https://github.com/Azure/cli/issues/172 will be fixed
+    runs-on: ubuntu-latest
     permissions:
-      contents: 'read'
-      actions: 'read'
       id-token: 'write'
 
     steps:
       - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v4
-        with:
-          main-branch-name: 'master'
 
       - uses: actions/setup-node@v4
         with:

.github/workflows/bundle-size.yml

@@ -52,6 +52,7 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: monosize-report
+          retention-days: 1
           if-no-files-found: error
           path: |
             monosize-report.md

.github/workflows/check-packages.yml

@@ -6,11 +6,11 @@ jobs:
   dependency-deduplication:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20.x
           cache: 'yarn'
@@ -38,15 +38,15 @@ jobs:
   dependency-mismatches:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20.x
 
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         with:
           script: |
             const syncpackVersion = require('./package.json').devDependencies.syncpack;
@@ -64,15 +64,15 @@ jobs:
   change-files:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20.x
 
-      - uses: actions/github-script@v6
+      - uses: actions/github-script@v7
         with:
           script: |
             const beachballVersion = require('./package.json').devDependencies.beachball;

.github/workflows/docsite-publish-ghpages.yml

@@ -16,7 +16,7 @@ jobs:
       status: ${{ steps.verify-react-components-changed.outputs.any_changed == 'true' || github.event_name == 'workflow_dispatch' }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         name: Checkout [master]
 
       - name: Verify react-compoenents has changed
@@ -31,11 +31,11 @@ jobs:
     if: needs.check.outputs.status == 'true'
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 20.x
           cache: 'yarn'

.github/workflows/issues.yml

@@ -12,8 +12,8 @@ jobs:
       issues: write
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/github-script@v6
+      - uses: actions/checkout@v4
+      - uses: actions/github-script@v7
         with:
           script: |
             const config = require('./.github/triage-bot.config.json');

.github/workflows/pr-housekeeping.yml

@@ -11,9 +11,12 @@ jobs:
   label:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v3
+      - uses: actions/labeler@v5
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          sync-labels: true
+          configuration-path: .github/labeler.yml
+
   assign-to-current-milestone:
     runs-on: ubuntu-latest
     steps:

.github/workflows/pr-website-deploy-comment.yml

@@ -77,6 +77,7 @@ jobs:
     if: ${{ github.event.workflow_run.event == 'pull_request' && github.event.workflow_run.conclusion == 'success' }}
     permissions:
       pull-requests: write
+      statuses: write
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/pr-website-deploy.yml

@@ -14,21 +14,6 @@ env:
 
   BROWSERSLIST_IGNORE_OLD_DATA: true
 
-  # Deploy host and URL
-  # DEPLOY_BASE_PATH: ''
-  DEPLOY_HOST: fluentuipr.z22.web.core.windows.net
-  DEPLOY_URL: https://fluentuipr.z22.web.core.windows.net/${{ github.event.pull_request.number || github.ref_name }}
-  # DEPLOY_BASE_PATH: pull/${{github.event.pull_request.number}}
-  DEPLOY_BASE_PATH: ${{ github.event.pull_request.number != '' && format('pull/{0}', github.event.pull_request.number) || format('heads/{0}', github.ref_name) }}
-
-  IS_PR: ${{ github.event_name == 'pull_request' }}
-  TARGET_BRANCH: ${{ github.event.pull_request.base.ref || '' }}
-
-  # GitHub Secrets for Azure access
-  # This service principal ("subscription" is a misleading name) only has access to the fluentuipr storage account
-  AZURE_SUBSCRIPTION: Azure PR deploy - NEW
-  AZURE_STORAGE: fluentuipr
-
 jobs:
   bundle:
     runs-on: macos-14-xlarge
@@ -66,6 +51,7 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: pr-website-artifacts
+          retention-days: 1
           if-no-files-found: error
           path: |
             apps/pr-deploy-site/dist/
@@ -75,6 +61,7 @@ jobs:
       - uses: actions/upload-artifact@v4
         with:
           name: pr-number
+          retention-days: 1
           if-no-files-found: error
           path: |
             pr.txt

.github/workflows/pr.yml

@@ -19,7 +19,6 @@ env:
 
   DEPLOY_HOST: fluentuipr.z22.web.core.windows.net
   DEPLOY_URL: https://fluentuipr.z22.web.core.windows.net/${{ github.event.pull_request.number || github.ref_name }}
-  # DEPLOY_BASE_PATH: pull/${{github.event.pull_request.number}}
   DEPLOY_BASE_PATH: ${{ github.event.pull_request.number != '' && format('pull/{0}', github.event.pull_request.number) || format('heads/{0}', github.ref_name) }}
 
 jobs:
@@ -116,9 +115,4 @@ jobs:
         run: yarn cypress verify
 
       - name: Cypress/Playwright E2E tests
-        if: github.event_name == 'pull_request'
         run: yarn nx affected -t e2e --nxBail --parallel 1
-
-      - name: Cypress/Playwright E2E tests (non-PR)
-        if: github.event_name != 'pull_request'
-        run: yarn nx run-many -t e2e --nxBail --parallel 1

change/@fluentui-react-motion-components-preview-ce97692b-d797-47e0-ad42-4d0561a9f7da.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Rename motion component variants ...Exaggerated to ...Relaxed",
+  "packageName": "@fluentui/react-motion-components-preview",
+  "email": "olkatruk@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-9ecadf3f-3fd0-44c1-9abd-20a3456d8738.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: resolve TS errors within web-components build",
+  "packageName": "@fluentui/web-components",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-components/react-motion-components-preview/library/etc/react-motion-components-preview.api.md

@@ -16,7 +16,7 @@ export const Collapse: PresenceComponent<CollapseRuntimeParams>;
 export const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
 
 // @public (undocumented)
-export const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
+export const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
 
 // @public (undocumented)
 export type CollapseRuntimeParams = {
@@ -40,7 +40,7 @@ export const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
 export const Fade: PresenceComponent<    {}>;
 
 // @public (undocumented)
-export const FadeExaggerated: PresenceComponent<    {}>;
+export const FadeRelaxed: PresenceComponent<    {}>;
 
 // @public (undocumented)
 export const FadeSnappy: PresenceComponent<    {}>;
@@ -51,7 +51,7 @@ animateOpacity?: boolean | undefined;
 }>;
 
 // @public (undocumented)
-export const ScaleExaggerated: PresenceComponent<    {
+export const ScaleRelaxed: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 

packages/react-components/react-motion-components-preview/library/src/components/Collapse/Collapse.ts

@@ -114,7 +114,7 @@ export const CollapseSnappy = createPresenceComponent(
   createCollapsePresence({ enterDuration: motionTokens.durationFast }),
 );
 
-export const CollapseExaggerated = createPresenceComponent(
+export const CollapseRelaxed = createPresenceComponent(
   createCollapsePresence({ enterDuration: motionTokens.durationSlower }),
 );
 

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Fade, FadeExaggerated, FadeSnappy } from './Fade';
+import { Fade, FadeRelaxed, FadeSnappy } from './Fade';
 import { render } from '@testing-library/react';
 import { motionTokens } from '@fluentui/react-motion';
 import { mockAnimation } from '../../testing/testUtils';
@@ -56,10 +56,10 @@ describe('Fade motion component', () => {
     );
   });
 
-  it('should render Exaggerated variant of Fade component with correct opacity keyframes, duration and easing', () => {
-    const { rerender } = render(<FadeExaggerated visible={false}>{testElement}</FadeExaggerated>);
+  it('should render Relaxed variant of Fade component with correct opacity keyframes, duration and easing', () => {
+    const { rerender } = render(<FadeRelaxed visible={false}>{testElement}</FadeRelaxed>);
 
-    rerender(<FadeExaggerated visible={true}>{testElement}</FadeExaggerated>);
+    rerender(<FadeRelaxed visible={true}>{testElement}</FadeRelaxed>);
 
     expect(animateSpy).toHaveBeenCalledWith(
       [{ opacity: 0 }, { opacity: 1 }],

packages/react-components/react-motion-components-preview/library/src/components/Fade/Fade.ts

@@ -31,6 +31,4 @@ export const Fade = createPresenceComponent(createFadePresence());
 
 export const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));
 
-export const FadeExaggerated = createPresenceComponent(
-  createFadePresence({ enterDuration: motionTokens.durationGentle }),
-);
+export const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));

packages/react-components/react-motion-components-preview/library/src/components/Scale/Scale.ts

@@ -40,7 +40,7 @@ export const ScaleSnappy = createPresenceComponentVariant(Scale, {
   exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },
 });
 
-export const ScaleExaggerated = createPresenceComponentVariant(Scale, {
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
   enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },
   exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },
 });

packages/react-components/react-motion-components-preview/library/src/index.ts

@@ -1,11 +1,11 @@
 export {
   Collapse,
   CollapseSnappy,
-  CollapseExaggerated,
+  CollapseRelaxed,
   CollapseDelayed,
   createCollapsePresence,
   createCollapseDelayedPresence,
 } from './components/Collapse';
 export type { CollapseRuntimeParams } from './components/Collapse';
-export { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';
-export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';
+export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
+export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';

packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.md

@@ -0,0 +1 @@
+The relaxed variant of `Collapse` is available as `CollapseRelaxed` component.

packages/react-components/react-motion-components-preview/stories/src/Fade/FadeExaggerated.stories.tsx → packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseRelaxed.stories.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { Field, makeStyles, tokens, Switch } from '@fluentui/react-components';
-import { FadeExaggerated } from '@fluentui/react-motion-components-preview';
+import { CollapseRelaxed } from '@fluentui/react-motion-components-preview';
+import * as React from 'react';
 
-import description from './FadeExaggerated.stories.md';
+import description from './CollapseRelaxed.stories.md';
 
 const useClasses = makeStyles({
   container: {
@@ -37,7 +37,7 @@ const LoremIpsum = () => (
   </>
 );
 
-export const Exaggerated = () => {
+export const Relaxed = () => {
   const classes = useClasses();
   const [visible, setVisible] = React.useState<boolean>(false);
 
@@ -49,16 +49,16 @@ export const Exaggerated = () => {
         </Field>
       </div>
 
-      <FadeExaggerated visible={visible}>
+      <CollapseRelaxed visible={visible}>
         <div className={classes.card}>
           <LoremIpsum />
         </div>
-      </FadeExaggerated>
+      </CollapseRelaxed>
     </div>
   );
 };
 
-Exaggerated.parameters = {
+Relaxed.parameters = {
   docs: {
     description: {
       story: description,