diff --git a/.changeset/nfs-icon-alpha-plugins.md b/.changeset/nfs-icon-alpha-plugins.md new file mode 100644 index 0000000000..067feb2714 --- /dev/null +++ b/.changeset/nfs-icon-alpha-plugins.md @@ -0,0 +1,13 @@ +--- +'@backstage/plugin-api-docs': patch +'@backstage/plugin-app-visualizer': patch +'@backstage/plugin-catalog': patch +'@backstage/plugin-catalog-unprocessed-entities': patch +'@backstage/plugin-devtools': patch +'@backstage/plugin-scaffolder': patch +'@backstage/plugin-search': patch +'@backstage/plugin-techdocs': patch +'@backstage/plugin-user-settings': patch +--- + +Updated alpha plugin icons to follow the new frontend icon sizing rules when rendered in plugin and navigation surfaces. diff --git a/.changeset/nfs-icon-foundations.md b/.changeset/nfs-icon-foundations.md new file mode 100644 index 0000000000..b36ee47573 --- /dev/null +++ b/.changeset/nfs-icon-foundations.md @@ -0,0 +1,7 @@ +--- +'@backstage/core-components': patch +'@backstage/frontend-app-api': patch +'@backstage/frontend-plugin-api': patch +--- + +Clarified the `IconElement` sizing contract for the new frontend system and aligned legacy system icon rendering with the new icon API. diff --git a/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts b/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts index b739eea09a..87f884d2f2 100644 --- a/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts +++ b/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.test.ts @@ -61,8 +61,6 @@ describe('DefaultIconsApi', () => { expect(result.type).toBe(MyIcon); // @ts-expect-error accessing internal React element structure expect(result.props.fontSize).toBe('inherit'); - // @ts-expect-error accessing internal React element structure - expect(result.props.size).toBe('1em'); }); it('should wrap IconElement values in a component for getIcon()', () => { diff --git a/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts b/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts index 1dfdfbdc9e..9d36ee72d3 100644 --- a/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts +++ b/packages/frontend-app-api/src/apis/implementations/IconsApi/DefaultIconsApi.ts @@ -46,7 +46,10 @@ export class DefaultIconsApi implements IconsApi { return [key, value]; } deprecatedKeys.push(key); - return [key, createElement(value as IconComponent)]; + return [ + key, + createElement(value as IconComponent, { fontSize: 'inherit' }), + ]; }), ); diff --git a/packages/frontend-plugin-api/src/icons/types.ts b/packages/frontend-plugin-api/src/icons/types.ts index 68ae60a2f6..180763ad09 100644 --- a/packages/frontend-plugin-api/src/icons/types.ts +++ b/packages/frontend-plugin-api/src/icons/types.ts @@ -38,17 +38,18 @@ export type IconComponent = ComponentType<{ }>; /** - * The type used for icon elements throughout Backstage. It is recommended to - * use icons from `@remixicon/react`. + * The type used for icon elements throughout Backstage. * * @remarks * - * Icons should be exactly 24x24 pixels in size. + * Icon elements should behave like rendering a plain icon directly, for example + * from `@remixicon/react`, and are expected to be sized by the surrounding UI. + * Icons should be exactly 24x24 pixels in size by default. * - * Using icons from `@remixicon/react` is preferred, but using icons from + * Using icons from `@remixicon/react` is preferred. Using icons from * `@material-ui/icons` or `AppIcon` and its variants from - * `@backstage/core-components` is supported but depreceated. When using these - * icons, you must set the `fontSize` to `'inherit'`. + * `@backstage/core-components` is supported while migrating, but deprecated. + * When using those icons, you must set `fontSize="inherit"` on the element. * * @public */ diff --git a/plugins/app/src/extensions/IconsApi.tsx b/plugins/app/src/extensions/IconsApi.tsx index 6293c84ed8..d8a97eb7c7 100644 --- a/plugins/app/src/extensions/IconsApi.tsx +++ b/plugins/app/src/extensions/IconsApi.tsx @@ -45,15 +45,7 @@ export const IconsApi = ApiBlueprint.makeWithOverrides({ return new DefaultIconsApi( inputs.icons .map(i => i.get(IconBundleBlueprint.dataRefs.icons)) - .reduce( - (acc, bundle) => ({ ...acc, ...bundle }), - Object.fromEntries( - Object.entries(defaultIcons).map(([key, Icon]) => [ - key, - , - ]), - ), - ), + .reduce((acc, bundle) => ({ ...acc, ...bundle }), defaultIcons), ); }, }),