diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index 4cf2c02e55..089900fb77 100644 --- a/packages/app/src/App.tsx +++ b/packages/app/src/App.tsx @@ -70,7 +70,10 @@ import { techdocsPlugin, } from '@backstage/plugin-techdocs'; import { TechDocsAddons } from '@backstage/plugin-techdocs-react'; -import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib'; +import { + ReportIssue, + TextSize, +} from '@backstage/plugin-techdocs-module-addons-contrib'; import { UserSettingsPage, UserSettingsTab, @@ -183,6 +186,7 @@ const routes = ( {techDocsPage} + ({ }))(Slider); const settings = { - key: 'techdocs.addons.settings', + key: 'techdocs.addons.settings.textsize', defaultValue: 100, }; @@ -183,8 +182,8 @@ export const TextSizeAddon = () => { if (!body) return; const htmlFontSize = ( - theme.typography as Theme['typography'] & { - htmlFontSize: number; + theme.typography as BackstageTheme['typography'] & { + htmlFontSize?: number; } )?.htmlFontSize ?? 16; body.style.setProperty( diff --git a/plugins/techdocs-module-addons-contrib/src/plugin.ts b/plugins/techdocs-module-addons-contrib/src/plugin.ts index 0d7f3b8575..0d7743da9e 100644 --- a/plugins/techdocs-module-addons-contrib/src/plugin.ts +++ b/plugins/techdocs-module-addons-contrib/src/plugin.ts @@ -50,8 +50,7 @@ export const ReportIssue = techdocsModuleAddonsContribPlugin.provide( * This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons. * * @remarks - * The default value for font size is 100% of the HTML font size and, if the theme does not have an htmlFontSize value in its typography object, - * the Addon will assume 16px as 100% and this setting is kept in the browser's local storage. + * The default value for the font size is 100% of the HTML font size, if the theme does not have a `htmlFontSize` in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage. * * @example * Here's a simple example: