Skip to content

Conversation

@Hotell
Copy link
Collaborator

@Hotell Hotell commented Jan 22, 2026

Before:

TextColor<size><variant> exports have been incorrectly groupped with Text under text.tsx module

source: https://app.unpkg.com/@fluentui/[email protected]/files/lib/atoms/svg/text.js
issue showcase

After:

  • TextColor<size><variants> exports groupped under text-color.tsx
  • Text<size><variant> exports groupped within text.tsx module
    • to mitigate any breaking changes we add the TextColor* export back with @deprecation annotation
    • image

This fix enables build transforms via swc or babel without additional workarounds as initially documented https://github.com/microsoft/fluentui-system-icons/blob/main/packages/react-icons/README.md#using-api-via-build-transform


@Hotell Hotell force-pushed the react-icons/fix-text-atom branch from 2b79dbf to ca7c5c7 Compare January 23, 2026 12:06
* @returns {string} The normalized base name of the icon.
* @throws {Error} If the filename does not end with a valid style suffix.
*/
function normalizeBaseName(fileName, styleVariants = ICON_STYLE_VARIANTS) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

implementation was simplified with proper guards to adhere to valid file patterns from /assets provided by design

const items = [
{ exportName: 'Dup20Filled', exportCode: 'export const Dup20Filled = 1;', fileName: 'dup-20-filled.tsx' },
{ exportName: 'Dup20Filled', exportCode: 'export const Dup20Filled = 2;', fileName: 'dup-20-filled-2.tsx' },
{ exportName: 'Dup20Filled', exportCode: 'export const Dup20Filled = 2;', fileName: 'dup-22-filled.tsx' },
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we had "made up" patterns within test which doesn't exist, aligned now with real contents of /assets

* @returns {Promise<void>}
* @throws Will throw an error if potential grouping issues are detected.
*/
async function assertCompoundStyleVariantIssues(destPath) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added build last line of defense to double check generated outputs from /assets, will fail build if there are issues


const deprecatedMsg = `/** @deprecated use from @fluentui/${type}/color import. This was generated for backward compatibility and will be removed in next major release */`;
const generatedFiles = []
const deprecatedMsg = getDeprecatedMsg(type, 'color');
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DRY applied

writeSvg('ic_fluent_dup_20.svg', '<svg width="20" d="M0"></svg>');
// this variant without underscore will camelCase to the same export name (Dup20)
writeSvg('ic_fluent_dup20.svg', '<svg width="20" d="M1"></svg>');
writeSvg('ic_fluent_dup_20_regular.svg', '<svg width="20" d="M0"></svg>');
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updates test to reflect reality of /assets

@Hotell Hotell force-pushed the react-icons/fix-text-atom branch from 5221bdb to c27b3a8 Compare January 30, 2026 12:34
@Hotell Hotell marked this pull request as ready for review January 30, 2026 12:50
@Hotell Hotell requested review from a team as code owners January 30, 2026 12:50
mainframev
mainframev previously approved these changes Feb 2, 2026
@Hotell Hotell merged commit b20432b into microsoft:main Feb 3, 2026
7 checks passed
@Hotell Hotell deleted the react-icons/fix-text-atom branch February 3, 2026 12:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants