paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

remove the default font size of icons

Browse Source 
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
Fredrik Adelöw
2024-09-19 17:07:38 +02:00
parent 7d274c4a1f
commit bfd4bec795
7 changed files with 168 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/thirty-pets-fry.md
+8
View File
@@ -0,0 +1,8 @@
---
'@backstage/frontend-plugin-api': minor
'@backstage/core-plugin-api': minor
---
**BREAKING PRODUCERS**: The `IconComponent` no longer accepts `fontSize="default"`. This has effectively been removed from Material-UI since its last two major versions, and has not worked properly for them in a long time.
This change should not have an effect on neither users of MUI4 nor MUI5/6, since the updated interface should still let you send the respective `SvgIcon` types into interfaces where relevant (e.g. as app icons).
packages/core-plugin-api/report.api.md
+3 -8
View File
@@ -505,14 +505,9 @@ export const googleAuthApiRef: ApiRef<
>;
// @public
export type IconComponent = ComponentType<
| {
fontSize?: 'large' | 'small' | 'default' | 'inherit';
}
| {
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}
>;
export type IconComponent = ComponentType<{
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}>;
// @public
export type IdentityApi = {
packages/core-plugin-api/src/icons/types.test.ts
+73
View File
@@ -0,0 +1,73 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as React from 'react';
import { type IconComponent } from './types';
// Emulate the MUI4 icon type
type Mui4Icon = (props: {
fontSize?: 'default' | 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}) => JSX.Element;
// Emulate the MUI5 icon type
type Mui5Icon = (props: {
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}) => JSX.Element;
// Emulate the MUI6 icon type
interface OverridableComponent<P> {
<RootComponent extends React.ElementType>(
props: {
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: RootComponent;
} & { stuff: number },
): React.JSX.Element | null;
(props: P): React.JSX.Element | null;
}
type Mui6Icon = OverridableComponent<{
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}>;
type NotAnIcon1 = (props: {
fontSize?: 'foo';
otherProp?: string;
}) => JSX.Element;
type NotAnIcon2 = (props: {
fontSize?: number;
otherProp?: string;
}) => JSX.Element;
describe('IconComponent', () => {
// eslint-disable-next-line jest/expect-expect
it('should be a component type', () => {
// @ts-ignore
let icon: IconComponent;
icon = {} as Mui4Icon;
icon = {} as Mui5Icon;
icon = {} as Mui6Icon;
// @ts-expect-error
icon = {} as NotAnIcon1;
// @ts-expect-error
icon = {} as NotAnIcon2;
});
});
packages/core-plugin-api/src/icons/types.ts
+4 -12
View File
@@ -22,7 +22,7 @@ import { ComponentType } from 'react';
*
* @remarks
*
* The type is based on SvgIcon from Material UI, but both do not what the plugin-api
* The type is based on SvgIcon from Material UI, but we do not want the plugin-api
* package to have a dependency on Material UI, nor do we want the props to be as broad
* as the SvgIconProps interface.
*
@@ -32,14 +32,6 @@ import { ComponentType } from 'react';
*
* @public
*/
export type IconComponent = ComponentType<
/* Material UI v4 */
| {
fontSize?: 'large' | 'small' | 'default' | 'inherit';
}
/* Material UI v5: https://mui.com/material-ui/migration/v5-component-changes/#icon */
| {
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}
>;
export type IconComponent = ComponentType<{
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}>;
packages/frontend-plugin-api/report.api.md
+3 -8
View File
@@ -1285,14 +1285,9 @@ export const IconBundleBlueprint: ExtensionBlueprint<{
}>;
// @public
export type IconComponent = ComponentType<
| {
fontSize?: 'large' | 'small' | 'default' | 'inherit';
}
| {
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}
>;
export type IconComponent = ComponentType<{
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}>;
// @public
export interface IconsApi {
packages/frontend-plugin-api/src/icons/types.test.ts
+73
View File
@@ -0,0 +1,73 @@
/*
* Copyright 2024 The Backstage Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as React from 'react';
import { type IconComponent } from './types';
// Emulate the MUI4 icon type
type Mui4Icon = (props: {
fontSize?: 'default' | 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}) => JSX.Element;
// Emulate the MUI5 icon type
type Mui5Icon = (props: {
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}) => JSX.Element;
// Emulate the MUI6 icon type
interface OverridableComponent<P> {
<RootComponent extends React.ElementType>(
props: {
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: RootComponent;
} & { stuff: number },
): React.JSX.Element | null;
(props: P): React.JSX.Element | null;
}
type Mui6Icon = OverridableComponent<{
fontSize?: 'inherit' | 'large' | 'medium' | 'small';
otherProp?: string;
}>;
type NotAnIcon1 = (props: {
fontSize?: 'foo';
otherProp?: string;
}) => JSX.Element;
type NotAnIcon2 = (props: {
fontSize?: number;
otherProp?: string;
}) => JSX.Element;
describe('IconComponent', () => {
// eslint-disable-next-line jest/expect-expect
it('should be a component type', () => {
// @ts-ignore
let icon: IconComponent;
icon = {} as Mui4Icon;
icon = {} as Mui5Icon;
icon = {} as Mui6Icon;
// @ts-expect-error
icon = {} as NotAnIcon1;
// @ts-expect-error
icon = {} as NotAnIcon2;
});
});
packages/frontend-plugin-api/src/icons/types.ts
+4 -12
View File
@@ -22,7 +22,7 @@ import { ComponentType } from 'react';
*
* @remarks
*
* The type is based on SvgIcon from Material UI, but both do not what the plugin-api
* The type is based on SvgIcon from Material UI, but we do not want the plugin-api
* package to have a dependency on Material UI, nor do we want the props to be as broad
* as the SvgIconProps interface.
*
@@ -32,14 +32,6 @@ import { ComponentType } from 'react';
*
* @public
*/
export type IconComponent = ComponentType<
/* Material UI v4 */
| {
fontSize?: 'large' | 'small' | 'default' | 'inherit';
}
/* Material UI v5: https://mui.com/material-ui/migration/v5-component-changes/#icon */
| {
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}
>;
export type IconComponent = ComponentType<{
fontSize?: 'medium' | 'large' | 'small' | 'inherit';
}>;