Creating react-file-type-icons package for v9

.github/CODEOWNERS

@@ -331,6 +331,8 @@ packages/react-components/component-selector-preview/library @microsoft/teams-pr
 packages/react-components/component-selector-preview/stories @microsoft/teams-prg
 packages/react-components/react-menu-grid-preview/library @microsoft/teams-prg
 packages/react-components/react-menu-grid-preview/stories @microsoft/teams-prg
+packages/react-components/react-file-type-icons/library @microsoft/cxe-red @jahnp @bigbadcapers
+packages/react-components/react-file-type-icons/stories @microsoft/cxe-red @jahnp @bigbadcapers
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 # Deprecated v9 packages - exposed as part of `/unstable` api

README.md

@@ -2,9 +2,7 @@
 
 [![Build Status](https://img.shields.io/azure-devops/build/uifabric/fabricpublic/164/master?style=flat-square)](https://dev.azure.com/uifabric/fabricpublic/_build?definitionId=164) ![GitHub contributors](https://img.shields.io/github/contributors/microsoft/fluentui?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/microsoft/fluentui?style=flat-square) [![Twitter Follow](https://img.shields.io/twitter/follow/fluentui?logo=x&style=flat-square)](https://twitter.com/FluentUI?ref_src=twsrc%5Etfw)
 
-> Fluent UI React is shipping its v9 final stable release. Visit the [Fluent UI React v9 Release page on the wiki](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Release) to learn more about the upcoming release schedule.
-
-Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications.
+Fluent UI is a collection of utilities and React components for building web applications.
 
 This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.
 
@@ -27,6 +25,8 @@ The following table will help you navigate the 3 projects and understand their d
 
 > Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-component-mapping--docs).
 
+For docs on how to contribute to our repo, check out the [contributing docs](https://github.com/microsoft/fluentui/tree/master/docs/react-v9/contributing) folder.
+
 ## FluentUI Insights
 
 [Fluent UI Insights](https://docs.microsoft.com/en-us/shows/fluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system.

apps/pr-deploy-site/chiclet-test.html

@@ -16,7 +16,7 @@
     />
     <meta
       property="og:image"
-      content="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/item-types/48/docx.svg"
+      content="https://res.cdn.office.net/files/fabric-cdn-prod_20251119.001/assets/item-types/48/docx.svg"
     />
 
     <title>Chiclet Test Page</title>

apps/public-docsite/package.json

@@ -39,7 +39,7 @@
     "@fluentui/react-examples": "*",
     "@fluentui/react-experiments": "*",
     "@fluentui/fluent2-theme": "*",
-    "@fluentui/react-file-type-icons": "*",
+    "@fluentui/react-file-type-icons-v8": "*",
     "@fluentui/react-icons-mdl2": "*",
     "@fluentui/react-icons-mdl2-branded": "*",
     "@fluentui/set-version": "*",

apps/public-docsite/src/pages/Styles/FileTypeIconsPage/FileTypeIconsPage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Icon, Link } from '@fluentui/react';
-import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons-v8';
 import { Markdown, MarkdownHeader, IPageSectionProps } from '@fluentui/react-docsite-components/lib/index2';
 import { IStylesPageProps, StylesAreaPage } from '../StylesAreaPage';
 import { FileTypeIconsPageProps } from './FileTypeIconsPage.doc';

apps/public-docsite/src/root.tsx

@@ -1,5 +1,5 @@
 import { registerIcons, on, KeyCodes, setRTL } from '@fluentui/react';
-import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons';
+import { initializeFileTypeIcons } from '@fluentui/react-file-type-icons-v8';
 import { createSite } from './utilities/createSite';
 import * as platformPickerStyles from '@fluentui/react-docsite-components/lib/components/PlatformPicker/PlatformPicker.module.scss';
 import { SiteDefinition } from './SiteDefinition/index';

apps/vr-tests/src/stories/Tile.stories.tsx

@@ -142,7 +142,7 @@ export const DocumentTileWithIcon = () => (
       itemActivity={<SignalField before={<SharedSignal />}>{'Test Activity'}</SignalField>}
       foreground={
         <img
-          src="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/assets/item-types/48/docx.svg"
+          src="https://res.cdn.office.net/files/fabric-cdn-prod_20251119.001/assets/item-types/48/docx.svg"
           style={{
             display: 'block',
             width: '64px',

change/@fluentui-public-docsite-setup-7ad0c9ff-7dd2-4ebe-a63f-a94d93a6b458.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Associating this older public docsite with the v8 version of the file-type-icons package (new workspace name got -v8 suffix added)",
+  "packageName": "@fluentui/public-docsite-setup",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-a2e03411-e541-4b7c-b342-5ebe7b8cd7ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding react-file-type-icons package for FluentUI v9",
+  "packageName": "@fluentui/react-components",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-file-type-icons-0a69cb3d-cf81-4967-8961-6a2ab277c675.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "\u0016\u0016\u0016Chagnging FileIconType-based icon searchign to use the same scalable method used for file extensions",
+  "packageName": "@fluentui/react-file-type-icons",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-file-type-icons-v8-d71e68d3-89bb-4f77-ab67-c4051a45cac2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Adding react-file-type-icons package for FluentUI v9. This package is now suffixed with v8 in the repo, but published to the same @fluentui/react-file-type-icons namespace in NPM with no suffix, just retaining the 8.x.x semver.",
+  "packageName": "@fluentui/react-file-type-icons-v8",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-8bdf4419-527c-4852-accd-686067675ba9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "including package react-file-type-icons v9",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "caperez@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/public-docsite-setup/package.json

@@ -26,6 +26,5 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/scripts-tasks": "*"
-  },
-  "dependencies": {}
+  }
 }

packages/react-components/react-components/package.json

@@ -77,7 +77,8 @@
     "@fluentui/react-motion": "^9.11.4",
     "@fluentui/react-carousel": "^9.8.12",
     "@fluentui/react-color-picker": "^9.2.11",
-    "@fluentui/react-nav": "^9.3.14"
+    "@fluentui/react-nav": "^9.3.14",
+    "@fluentui/react-file-type-icons": "^9.0.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

packages/react-components/react-file-type-icons/library/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../../../.babelrc-v9.json",
+  "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"]
+}

packages/react-components/react-file-type-icons/library/.swcrc

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

packages/react-components/react-file-type-icons/library/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-file-type-icons
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

packages/react-components/react-file-type-icons/library/MIGRATION.md

@@ -0,0 +1,142 @@
+# Migration Guide: react-file-type-icons to react-file-type-icons
+
+This guide helps you migrate from `@fluentui/react-file-type-icons` (v8) to `@fluentui/react-file-type-icons` (v9).
+
+## Overview
+
+The v9 version provides a **modern React component-based API** while maintaining **full backward compatibility** with all v8 utility functions.
+
+**Key Points:**
+
+- ✅ All v8 utilities exported and work identically
+- ✅ No breaking API changes for utility functions
+- 🆕 New component API available (recommended but optional)
+
+## Installation
+
+```bash
+npm install @fluentui/react-file-type-icons
+```
+
+## What's Changed
+
+### Package Name (Breaking Change)
+
+The only breaking change is the package name:
+
+- **Old**: `@fluentui/react-file-type-icons`
+- **New**: `@fluentui/react-file-type-icons`
+
+### New Component API (Recommended)
+
+**v8 (utility-based) - Still works:**
+
+```tsx
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+
+const iconProps = getFileTypeIconProps({ extension: 'docx', size: 48 });
+<img src={iconProps.iconName} alt="Document" />;
+```
+
+**v9 (component-based) - Recommended:**
+
+```tsx
+import { FileTypeIcon } from '@fluentui/react-file-type-icons';
+
+<FileTypeIcon extension="docx" size={48} />;
+```
+
+## Migration Examples
+
+### Document Icons
+
+**Before:**
+
+```tsx
+import { getFileTypeIconProps } from '@fluentui/react-file-type-icons';
+
+function DocumentItem({ filename }) {
+  const extension = filename.split('.').pop();
+  const iconProps = getFileTypeIconProps({ extension, size: 32 });
+
+  return (
+    <div>
+      <img src={iconProps.iconName} alt={filename} style={{ width: 32, height: 32 }} />
+      <span>{filename}</span>
+    </div>
+  );
+}
+```
+
+**After:**
+
+```tsx
+import { FileTypeIcon } from '@fluentui/react-file-type-icons';
+
+function DocumentItem({ filename }) {
+  const extension = filename.split('.').pop();
+
+  return (
+    <div>
+      <FileTypeIcon extension={extension} size={32} />
+      <span>{filename}</span>
+    </div>
+  );
+}
+```
+
+### Folder Icons
+
+**Before:**
+
+```tsx
+import { getFileTypeIconProps, FileIconType } from '@fluentui/react-file-type-icons';
+
+const iconProps = getFileTypeIconProps({ type: FileIconType.folder, size: 48 });
+<img src={iconProps.iconName} alt="Folder" />;
+```
+
+**After:**
+
+```tsx
+import { FileTypeIcon, FileIconType } from '@fluentui/react-file-type-icons';
+
+<FileTypeIcon type={FileIconType.folder} size={48} />;
+```
+
+## Incremental Migration
+
+**You don't have to migrate all code at once!** All v8 utilities work identically in v9:
+
+```tsx
+import {
+  FileTypeIcon, // v9 component (new)
+  getFileTypeIconAsUrl, // v8 utility (still works)
+} from '@fluentui/react-file-type-icons';
+
+function MyComponent() {
+  return (
+    <div>
+      {/* Old code - still works */}
+      <img src={getFileTypeIconAsUrl({ extension: 'docx', size: 32 })} alt="Document" />
+
+      {/* New code - recommended */}
+      <FileTypeIcon extension="docx" size={32} />
+    </div>
+  );
+}
+```
+
+## Benefits of the New Component API
+
+1. **Simpler** - No manual URL handling or img element construction
+2. **Better TypeScript** - Full type safety with v9's type definitions
+3. **Accessible** - Built-in alt text and ARIA support
+4. **Optimized** - Automatic pixel ratio and format handling
+
+## Need Help?
+
+If you encounter issues:
+
+1. Check the [Storybook examples](https://aka.ms/fluentui-storybook)
+2. Open an issue on [GitHub](https://github.com/microsoft/fluentui)