From 4f9ca91ebf508f2ac9de7f26f6815a68c01cb051 Mon Sep 17 00:00:00 2001
From: Deepthi Ajith <deepthi.ajith@infosys.com>
Date: Thu, 5 Jun 2025 12:19:06 +0530
Subject: [PATCH 1/9] Added caution design changes to building app -
 converting-3rd party plugin

Signed-off-by: Deepthi Ajith <deepthi.ajith@infosys.com>
---
 docs/frontend-system/building-apps/06-plugin-conversion.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/frontend-system/building-apps/06-plugin-conversion.md b/docs/frontend-system/building-apps/06-plugin-conversion.md
index 2fab6cf828..88c4b69d45 100644
--- a/docs/frontend-system/building-apps/06-plugin-conversion.md
+++ b/docs/frontend-system/building-apps/06-plugin-conversion.md
@@ -8,8 +8,9 @@ description: Documentation for how to convert 3rd-party plugins to support the n
 
 If you are using or want to use a 3rd-party plugin that does not yet support the new frontend system in your app, you can often use conversion utilities from `@backstage/core-compat-api` in order wrap the plugin to make it possible to install in your app.
 
-> [!CAUTION]
-> The purpose of these utilities is to wrap 3rd-party plugins. Do not use them for your own plugins where you can add support for the new frontend system directly.
+:::caution
+The purpose of these utilities is to wrap 3rd-party plugins. Do not use them for your own plugins where you can add support for the new frontend system directly.
+:::
 
 ## Converting a legacy plugin
 

From e36e8559977e8ec0fd2ae8ade89b0220c1c4bd61 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 5 Jun 2025 12:10:32 +0200
Subject: [PATCH 2/9] cli: add backstage.pluginId templating

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/stupid-goats-teach.md                             | 5 +++++
 .../cli/templates/backend-plugin-module/package.json.hbs     | 3 ++-
 packages/cli/templates/backend-plugin/package.json.hbs       | 3 ++-
 packages/cli/templates/frontend-plugin/package.json.hbs      | 3 ++-
 .../cli/templates/plugin-common-library/package.json.hbs     | 3 ++-
 packages/cli/templates/plugin-node-library/package.json.hbs  | 3 ++-
 packages/cli/templates/plugin-web-library/package.json.hbs   | 3 ++-
 .../cli/templates/scaffolder-backend-module/package.json.hbs | 3 ++-
 8 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/stupid-goats-teach.md

diff --git a/.changeset/stupid-goats-teach.md b/.changeset/stupid-goats-teach.md
new file mode 100644
index 0000000000..f90d9373e7
--- /dev/null
+++ b/.changeset/stupid-goats-teach.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Added `backstage.pluginId` field in `package.json` to all default plugin package templates for the `new` command.
diff --git a/packages/cli/templates/backend-plugin-module/package.json.hbs b/packages/cli/templates/backend-plugin-module/package.json.hbs
index 20d78380ca..c34f7e0646 100644
--- a/packages/cli/templates/backend-plugin-module/package.json.hbs
+++ b/packages/cli/templates/backend-plugin-module/package.json.hbs
@@ -9,7 +9,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "backend-plugin-module"
+    "role": "backend-plugin-module",
+    "pluginId": "{{pluginId}}"
   },
   "scripts": {
     "start": "backstage-cli package start",
diff --git a/packages/cli/templates/backend-plugin/package.json.hbs b/packages/cli/templates/backend-plugin/package.json.hbs
index ad3810dff3..d8fcb9a9d6 100644
--- a/packages/cli/templates/backend-plugin/package.json.hbs
+++ b/packages/cli/templates/backend-plugin/package.json.hbs
@@ -8,7 +8,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "backend-plugin"
+    "role": "backend-plugin",
+    "pluginId": "{{pluginId}}"
   },
   "scripts": {
     "start": "backstage-cli package start",
diff --git a/packages/cli/templates/frontend-plugin/package.json.hbs b/packages/cli/templates/frontend-plugin/package.json.hbs
index 64888c2d37..1ee8231228 100644
--- a/packages/cli/templates/frontend-plugin/package.json.hbs
+++ b/packages/cli/templates/frontend-plugin/package.json.hbs
@@ -8,7 +8,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "frontend-plugin"
+    "role": "frontend-plugin",
+    "pluginId": "{{pluginId}}"
   },
   "sideEffects": false,
   "scripts": {
diff --git a/packages/cli/templates/plugin-common-library/package.json.hbs b/packages/cli/templates/plugin-common-library/package.json.hbs
index 085ccb40dd..117679abc1 100644
--- a/packages/cli/templates/plugin-common-library/package.json.hbs
+++ b/packages/cli/templates/plugin-common-library/package.json.hbs
@@ -10,7 +10,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "common-library"
+    "role": "common-library",
+    "pluginId": "{{pluginId}}"
   },
   "sideEffects": false,
   "scripts": {
diff --git a/packages/cli/templates/plugin-node-library/package.json.hbs b/packages/cli/templates/plugin-node-library/package.json.hbs
index 182ef1c93f..876d6414ac 100644
--- a/packages/cli/templates/plugin-node-library/package.json.hbs
+++ b/packages/cli/templates/plugin-node-library/package.json.hbs
@@ -9,7 +9,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "node-library"
+    "role": "node-library",
+    "pluginId": "{{pluginId}}"
   },
   "scripts": {
     "build": "backstage-cli package build",
diff --git a/packages/cli/templates/plugin-web-library/package.json.hbs b/packages/cli/templates/plugin-web-library/package.json.hbs
index d104a29305..6924600989 100644
--- a/packages/cli/templates/plugin-web-library/package.json.hbs
+++ b/packages/cli/templates/plugin-web-library/package.json.hbs
@@ -9,7 +9,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "web-library"
+    "role": "web-library",
+    "pluginId": "{{pluginId}}"
   },
   "sideEffects": false,
   "scripts": {
diff --git a/packages/cli/templates/scaffolder-backend-module/package.json.hbs b/packages/cli/templates/scaffolder-backend-module/package.json.hbs
index 3866a83672..36c99c7687 100644
--- a/packages/cli/templates/scaffolder-backend-module/package.json.hbs
+++ b/packages/cli/templates/scaffolder-backend-module/package.json.hbs
@@ -9,7 +9,8 @@
     "types": "dist/index.d.ts"
   },
   "backstage": {
-    "role": "backend-plugin-module"
+    "role": "backend-plugin-module",
+    "pluginId": "scaffolder"
   },
   "scripts": {
     "start": "backstage-cli package start",

From f2f814a6168309d4cdc7f6d971239bfc96f35af7 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 09:18:57 +0200
Subject: [PATCH 3/9] Add render prop to Button

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/kind-houses-feel.md                |  5 ++
 packages/canon/report.api.md                  |  6 +-
 .../src/components/Button/Button.stories.tsx  | 12 ++++
 .../canon/src/components/Button/Button.tsx    | 72 ++++++++++---------
 packages/canon/src/components/Button/types.ts |  9 +--
 5 files changed, 60 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/kind-houses-feel.md

diff --git a/.changeset/kind-houses-feel.md b/.changeset/kind-houses-feel.md
new file mode 100644
index 0000000000..a4b3ac0d14
--- /dev/null
+++ b/.changeset/kind-houses-feel.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Added a render prop to the Button component in Canon to use it as a link.
diff --git a/packages/canon/report.api.md b/packages/canon/report.api.md
index bc0ad71e90..b6ce130ecc 100644
--- a/packages/canon/report.api.md
+++ b/packages/canon/report.api.md
@@ -149,7 +149,7 @@ export const breakpoints: Breakpoint[];
 
 // @public (undocumented)
 export const Button: ForwardRefExoticComponent<
-  ButtonProps & RefAttributes<HTMLButtonElement>
+  Omit<ButtonProps, 'ref'> & RefAttributes<HTMLButtonElement>
 >;
 
 // @public (undocumented)
@@ -174,9 +174,7 @@ export const buttonPropDefs: {
 };
 
 // @public
-export interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-  children: React.ReactNode;
+export interface ButtonProps extends useRender.ComponentProps<'button'> {
   iconEnd?: ReactElement;
   iconStart?: ReactElement;
   size?: ButtonOwnProps['size'];
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index c0519cb279..2034f8a3d4 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -131,6 +131,18 @@ export const Disabled: Story = {
   ),
 };
 
+export const AsLink: Story = {
+  args: {
+    children: 'Button',
+  },
+  render: args => (
+    <Button
+      {...args}
+      render={<a href="https://canon.backstage.io">Button</a>}
+    />
+  ),
+};
+
 export const Responsive: Story = {
   args: {
     children: 'Button',
diff --git a/packages/canon/src/components/Button/Button.tsx b/packages/canon/src/components/Button/Button.tsx
index e9774ad083..9775f3f629 100644
--- a/packages/canon/src/components/Button/Button.tsx
+++ b/packages/canon/src/components/Button/Button.tsx
@@ -14,9 +14,10 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import clsx from 'clsx';
 import { useResponsiveValue } from '../../hooks/useResponsiveValue';
+import { useRender } from '@base-ui-components/react/use-render';
 
 import type { ButtonProps } from './types';
 
@@ -26,10 +27,10 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     const {
       size = 'small',
       variant = 'primary',
-      disabled,
       iconStart,
       iconEnd,
       children,
+      render = <button />,
       className,
       style,
       ...rest
@@ -38,38 +39,43 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     // Get the responsive value for the variant
     const responsiveSize = useResponsiveValue(size);
     const responsiveVariant = useResponsiveValue(variant);
+    const internalRef = useRef<HTMLElement | null>(null);
 
-    return (
-      <button
-        ref={ref}
-        disabled={disabled}
-        className={clsx('canon-Button', className)}
-        data-size={responsiveSize}
-        data-variant={responsiveVariant}
-        style={style}
-        {...rest}
-      >
-        {iconStart && (
-          <span
-            className="canon-ButtonIcon"
-            aria-hidden="true"
-            data-size={responsiveSize}
-          >
-            {iconStart}
-          </span>
-        )}
-        {children}
-        {iconEnd && (
-          <span
-            className="canon-ButtonIcon"
-            aria-hidden="true"
-            data-size={responsiveSize}
-          >
-            {iconEnd}
-          </span>
-        )}
-      </button>
-    );
+    const { renderElement } = useRender({
+      render,
+      props: {
+        className: clsx('canon-Button', className),
+        ['data-variant']: responsiveVariant,
+        ['data-size']: responsiveSize,
+        ...rest,
+        children: (
+          <>
+            {iconStart && (
+              <span
+                className="canon-ButtonIcon"
+                aria-hidden="true"
+                data-size={responsiveSize}
+              >
+                {iconStart}
+              </span>
+            )}
+            {children}
+            {iconEnd && (
+              <span
+                className="canon-ButtonIcon"
+                aria-hidden="true"
+                data-size={responsiveSize}
+              >
+                {iconEnd}
+              </span>
+            )}
+          </>
+        ),
+      },
+      refs: [ref, internalRef],
+    });
+
+    return renderElement();
   },
 );
 
diff --git a/packages/canon/src/components/Button/types.ts b/packages/canon/src/components/Button/types.ts
index 4ab62d5683..e91538299e 100644
--- a/packages/canon/src/components/Button/types.ts
+++ b/packages/canon/src/components/Button/types.ts
@@ -16,14 +16,14 @@
 
 import type { ButtonOwnProps } from './Button.props';
 import { ReactElement } from 'react';
+import type { useRender } from '@base-ui-components/react/use-render';
 
 /**
  * Properties for {@link Button}
  *
  * @public
  */
-export interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+export interface ButtonProps extends useRender.ComponentProps<'button'> {
   /**
    * The size of the button
    * @defaultValue 'medium'
@@ -36,11 +36,6 @@ export interface ButtonProps
    */
   variant?: ButtonOwnProps['variant'];
 
-  /**
-   * The content of the button
-   */
-  children: React.ReactNode;
-
   /**
    * Optional icon to display at the start of the button
    */

From a61671f5ae84b7b3d3723f12ca671a99ab0ef4d1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 09:39:04 +0200
Subject: [PATCH 4/9] Improve docs

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .../src/app/(docs)/components/button/page.mdx      | 14 ++++++++++++++
 .../src/app/(docs)/components/button/props.ts      |  6 ++++++
 .../canon/src/components/Button/Button.stories.tsx |  4 ++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/canon-docs/src/app/(docs)/components/button/page.mdx b/canon-docs/src/app/(docs)/components/button/page.mdx
index e1ecee8920..3554ee39f9 100644
--- a/canon-docs/src/app/(docs)/components/button/page.mdx
+++ b/canon-docs/src/app/(docs)/components/button/page.mdx
@@ -125,6 +125,20 @@ Here's a view when buttons are disabled.
   code={`<Button disabled>Button</Button>`}
 />
 
+### As Link
+
+Here's a view when buttons are rendered as a link.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<ButtonSnippet story="AsLink" />}
+  code={`<Button render={<a href="https://canon.backstage.io" target="_blank" />}>
+    I am a link
+  </Button>`}
+/>
+
 ### Responsive
 
 Here's a view when buttons are responsive.
diff --git a/canon-docs/src/app/(docs)/components/button/props.ts b/canon-docs/src/app/(docs)/components/button/props.ts
index 813dcaa6f0..36b0f73066 100644
--- a/canon-docs/src/app/(docs)/components/button/props.ts
+++ b/canon-docs/src/app/(docs)/components/button/props.ts
@@ -14,6 +14,12 @@ export const buttonPropDefs: Record<string, PropDef> = {
     default: 'medium',
     responsive: true,
   },
+  render: {
+    type: 'enum',
+    values: ['ReactNode'],
+    responsive: false,
+    default: '<button />',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
diff --git a/packages/canon/src/components/Button/Button.stories.tsx b/packages/canon/src/components/Button/Button.stories.tsx
index 2034f8a3d4..2d79da7e29 100644
--- a/packages/canon/src/components/Button/Button.stories.tsx
+++ b/packages/canon/src/components/Button/Button.stories.tsx
@@ -133,12 +133,12 @@ export const Disabled: Story = {
 
 export const AsLink: Story = {
   args: {
-    children: 'Button',
+    children: 'I am a link',
   },
   render: args => (
     <Button
       {...args}
-      render={<a href="https://canon.backstage.io">Button</a>}
+      render={<a href="https://canon.backstage.io" target="_blank" />}
     />
   ),
 };

From ee6ffe6c59286a68218f269d331866a3bfa1cf02 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 13:27:49 +0200
Subject: [PATCH 5/9] Fix heading variants

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/forty-seas-worry.md                       |  5 +++++
 .../src/app/(docs)/components/heading/page.mdx       | 12 ++++++++++++
 canon-docs/src/app/(docs)/components/text/page.mdx   | 10 ++++++++++
 packages/canon/css/components.css                    |  2 +-
 packages/canon/css/heading.css                       |  2 +-
 packages/canon/css/styles.css                        |  2 +-
 .../canon/src/components/Heading/Heading.stories.tsx |  1 +
 packages/canon/src/components/Heading/styles.css     |  2 +-
 8 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/forty-seas-worry.md

diff --git a/.changeset/forty-seas-worry.md b/.changeset/forty-seas-worry.md
new file mode 100644
index 0000000000..a88c15df53
--- /dev/null
+++ b/.changeset/forty-seas-worry.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fix styling for the title4 prop on the Heading component in Canon.
diff --git a/canon-docs/src/app/(docs)/components/heading/page.mdx b/canon-docs/src/app/(docs)/components/heading/page.mdx
index e09bae9945..a5eb488411 100644
--- a/canon-docs/src/app/(docs)/components/heading/page.mdx
+++ b/canon-docs/src/app/(docs)/components/heading/page.mdx
@@ -59,6 +59,7 @@ appearance of the heading.
     <Heading variant="title2">Title 2</Heading>
     <Heading variant="title3">Title 3</Heading>
     <Heading variant="title4">Title 4</Heading>
+    <Heading variant="title5">Title 5</Heading>
 </Flex>`}
 />
 
@@ -78,6 +79,17 @@ heading.
   </Heading>`}
 />
 
+### Custom render
+
+You can also use the `render` prop to render the heading as a different element.
+
+<Snippet
+  py={2}
+  open
+  preview={<HeadingSnippet story="CustomRender" />}
+  code={`<Heading render={<h4 />}>Custom render</Heading>`}
+/>
+
 ### Responsive
 
 You can also use the `variant` prop to change the appearance of the text based
diff --git a/canon-docs/src/app/(docs)/components/text/page.mdx b/canon-docs/src/app/(docs)/components/text/page.mdx
index 85a783f4f3..b1af7fa0d7 100644
--- a/canon-docs/src/app/(docs)/components/text/page.mdx
+++ b/canon-docs/src/app/(docs)/components/text/page.mdx
@@ -117,6 +117,16 @@ text.
   </Text>`}
 />
 
+### Custom render
+
+You can also use the `render` prop to render the text as a different element.
+
+<Snippet
+  open
+  preview={<TextSnippet story="CustomRender" />}
+  code={`<Text render={<span />}>Custom render</Text>`}
+/>
+
 ### Responsive
 
 You can also use the `variant` prop to change the appearance of the text based
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index bce8e71a6c..0cfbae85c3 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -515,7 +515,7 @@
 }
 
 .canon-Heading[data-variant="title4"] {
-  font-size: var(--canon-font-size-title4);
+  font-size: var(--canon-font-size-6);
   font-weight: var(--canon-font-weight-bold);
 }
 
diff --git a/packages/canon/css/heading.css b/packages/canon/css/heading.css
index 96d6f13fac..e5645e14a9 100644
--- a/packages/canon/css/heading.css
+++ b/packages/canon/css/heading.css
@@ -27,7 +27,7 @@
 }
 
 .canon-Heading[data-variant="title4"] {
-  font-size: var(--canon-font-size-title4);
+  font-size: var(--canon-font-size-6);
   font-weight: var(--canon-font-weight-bold);
 }
 
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 3107c83908..3309933497 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9739,7 +9739,7 @@
 }
 
 .canon-Heading[data-variant="title4"] {
-  font-size: var(--canon-font-size-title4);
+  font-size: var(--canon-font-size-6);
   font-weight: var(--canon-font-weight-bold);
 }
 
diff --git a/packages/canon/src/components/Heading/Heading.stories.tsx b/packages/canon/src/components/Heading/Heading.stories.tsx
index bb241b5aae..956118ddeb 100644
--- a/packages/canon/src/components/Heading/Heading.stories.tsx
+++ b/packages/canon/src/components/Heading/Heading.stories.tsx
@@ -46,6 +46,7 @@ export const AllVariants: Story = {
       <Heading variant="title2">Title 2</Heading>
       <Heading variant="title3">Title 3</Heading>
       <Heading variant="title4">Title 4</Heading>
+      <Heading variant="title5">Title 5</Heading>
     </Flex>
   ),
 };
diff --git a/packages/canon/src/components/Heading/styles.css b/packages/canon/src/components/Heading/styles.css
index 1644da09df..ce3da94f7f 100644
--- a/packages/canon/src/components/Heading/styles.css
+++ b/packages/canon/src/components/Heading/styles.css
@@ -43,7 +43,7 @@
 }
 
 .canon-Heading[data-variant='title4'] {
-  font-size: var(--canon-font-size-title4);
+  font-size: var(--canon-font-size-6);
   font-weight: var(--canon-font-weight-bold);
 }
 

From 44df8791dba7b68afc866d5746a620f9fac2c823 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 6 Jun 2025 14:54:08 +0200
Subject: [PATCH 6/9] Add min-width: 0; to the Flex components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/deep-moments-love.md               |  5 +++++
 packages/canon/css/components.css             |  1 +
 packages/canon/css/flex.css                   |  1 +
 packages/canon/css/styles.css                 |  1 +
 .../src/components/Flex/Flex.stories.tsx      | 22 +++++++++++++++++++
 packages/canon/src/components/Flex/styles.css |  3 +++
 6 files changed, 33 insertions(+)
 create mode 100644 .changeset/deep-moments-love.md

diff --git a/.changeset/deep-moments-love.md b/.changeset/deep-moments-love.md
new file mode 100644
index 0000000000..89b3174275
--- /dev/null
+++ b/.changeset/deep-moments-love.md
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Add min-width: 0; by default on every Flex components in Canon to help support truncated texts inside flex elements.
diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css
index bce8e71a6c..c458a9d044 100644
--- a/packages/canon/css/components.css
+++ b/packages/canon/css/components.css
@@ -186,6 +186,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 
diff --git a/packages/canon/css/flex.css b/packages/canon/css/flex.css
index 44381d64b3..5c6108eee7 100644
--- a/packages/canon/css/flex.css
+++ b/packages/canon/css/flex.css
@@ -1,3 +1,4 @@
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css
index 3107c83908..d604f366bf 100644
--- a/packages/canon/css/styles.css
+++ b/packages/canon/css/styles.css
@@ -9410,6 +9410,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 
diff --git a/packages/canon/src/components/Flex/Flex.stories.tsx b/packages/canon/src/components/Flex/Flex.stories.tsx
index 91b8dc8fb6..30c527a117 100644
--- a/packages/canon/src/components/Flex/Flex.stories.tsx
+++ b/packages/canon/src/components/Flex/Flex.stories.tsx
@@ -16,6 +16,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Flex } from './Flex';
+import { Text } from '../Text';
 
 const meta = {
   title: 'Layout/Flex',
@@ -143,3 +144,24 @@ export const LargeGap: Story = {
     </Flex>
   ),
 };
+
+export const WithTextTruncate: Story = {
+  render: () => (
+    <Flex direction="row" gap="8">
+      <Flex>
+        <Text truncate>
+          A man looks at a painting in a museum and says, “Brothers and sisters
+          I have none, but that man&apos;s father is my father&apos;s son.” Who
+          is in the painting?
+        </Text>
+      </Flex>
+      <Flex>
+        <Text truncate>
+          A man looks at a painting in a museum and says, “Brothers and sisters
+          I have none, but that man&apos;s father is my father&apos;s son.” Who
+          is in the painting?
+        </Text>
+      </Flex>
+    </Flex>
+  ),
+};
diff --git a/packages/canon/src/components/Flex/styles.css b/packages/canon/src/components/Flex/styles.css
index 094edffca7..61fb53d257 100644
--- a/packages/canon/src/components/Flex/styles.css
+++ b/packages/canon/src/components/Flex/styles.css
@@ -16,4 +16,7 @@
 
 .canon-Flex {
   display: flex;
+
+  /* This helps when using `truncate` on text inside a flex container */
+  min-width: 0;
 }

From 0ebad54d7a2e21e4c62b9996012bfca209776299 Mon Sep 17 00:00:00 2001
From: Andre Wanlin <awanlin@spotify.com>
Date: Fri, 6 Jun 2025 13:10:20 -0500
Subject: [PATCH 7/9] home - Fixed the `WelcomeTitle` to properly default to
 the previous value of `inherit`

Signed-off-by: Andre Wanlin <awanlin@spotify.com>
---
 .changeset/spicy-rivers-notice.md                            | 5 +++++
 .../src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/spicy-rivers-notice.md

diff --git a/.changeset/spicy-rivers-notice.md b/.changeset/spicy-rivers-notice.md
new file mode 100644
index 0000000000..941f2d257d
--- /dev/null
+++ b/.changeset/spicy-rivers-notice.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-home': patch
+---
+
+Fixed the `WelcomeTitle` to properly default to the previous value of `inherit`
diff --git a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
index fddd621b92..ee2e8704bd 100644
--- a/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
+++ b/plugins/home/src/homePageComponents/WelcomeTitle/WelcomeTitle.tsx
@@ -33,7 +33,7 @@ export type WelcomeTitleLanguageProps = {
 
 export const WelcomeTitle = ({
   language,
-  variant,
+  variant = 'inherit',
 }: WelcomeTitleLanguageProps) => {
   const identityApi = useApi(identityApiRef);
   const alertApi = useApi(alertApiRef);

From 95a1d722f9cfb3c778e57a4ce019eb2ca83dc79c Mon Sep 17 00:00:00 2001
From: Matt Benson <gudnabrsam@gmail.com>
Date: Fri, 6 Jun 2025 14:06:42 -0500
Subject: [PATCH 8/9] display appropriate message when global templating
 function metadata is absent

Signed-off-by: Matt Benson <gudnabrsam@gmail.com>
---
 .changeset/purple-times-deny.md               |   5 +
 plugins/scaffolder/report-alpha.api.md        |   1 +
 .../TemplateGlobals.tsx                       |   7 +-
 .../TemplatingExtensionsPage.test.tsx         | 154 +++++++++++-------
 plugins/scaffolder/src/translation.ts         |   1 +
 5 files changed, 107 insertions(+), 61 deletions(-)
 create mode 100644 .changeset/purple-times-deny.md

diff --git a/.changeset/purple-times-deny.md b/.changeset/purple-times-deny.md
new file mode 100644
index 0000000000..7cf4d2c3c3
--- /dev/null
+++ b/.changeset/purple-times-deny.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-scaffolder': patch
+---
+
+Added appropriate message when global templating function metadata is absent.
diff --git a/plugins/scaffolder/report-alpha.api.md b/plugins/scaffolder/report-alpha.api.md
index 54acadd561..509cfa8497 100644
--- a/plugins/scaffolder/report-alpha.api.md
+++ b/plugins/scaffolder/report-alpha.api.md
@@ -430,6 +430,7 @@ export const scaffolderTranslationRef: TranslationRef<
     readonly 'templatingExtensions.content.functions.schema.arguments': 'Arguments';
     readonly 'templatingExtensions.content.functions.examples': 'Examples';
     readonly 'templatingExtensions.content.functions.notAvailable': 'There are no global template functions defined.';
+    readonly 'templatingExtensions.content.functions.metadataAbsent': 'Function metadata unavailable';
     readonly 'templatingExtensions.title': 'Templating Extensions';
     readonly 'templatingExtensions.subtitle': 'This is the collection of available templating extensions';
     readonly 'templatingExtensions.pageTitle': 'Templating Extensions';
diff --git a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
index 329f7b9742..868a869be3 100644
--- a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
+++ b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
@@ -48,8 +48,11 @@ const FunctionDetailContent = ({
   const expanded = useState<Expanded>({});
   if (!Object.keys(fn).length) {
     return (
-      <Typography style={{ fontStyle: 'italic' }}>
-        {t('templatingExtensions.content.functions.notAvailable')}
+      <Typography
+        style={{ fontStyle: 'italic' }}
+        data-testid={`${name}.metadataAbsent`}
+      >
+        {t('templatingExtensions.content.functions.metadataAbsent')}
       </Typography>
     );
   }
diff --git a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplatingExtensionsPage.test.tsx b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplatingExtensionsPage.test.tsx
index d3d0eb7370..2c0680b5f8 100644
--- a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplatingExtensionsPage.test.tsx
+++ b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplatingExtensionsPage.test.tsx
@@ -315,76 +315,112 @@ describe('TemplatingExtensionsPage', () => {
     });
   });
   describe('renders global', () => {
-    it('renders global functions', async () => {
-      listTemplatingExtensions.mockResolvedValue({
-        ...emptyExtensions,
-        globals: {
-          ...emptyExtensions.globals,
-          functions: {
-            truthy: {
-              description: 'evaluate truthiness',
-              schema: {
-                arguments: [
-                  {
-                    title: 'input',
-                  },
-                ],
-                output: {
-                  type: 'boolean',
-                },
-              },
-              examples: [
-                {
-                  description: 'basic usage',
-                  example: "truthy('foo')",
-                  notes: 'yields `true`',
-                },
-              ],
+    describe('renders global functions', () => {
+      it('without metadata', async () => {
+        listTemplatingExtensions.mockResolvedValue({
+          ...emptyExtensions,
+          globals: {
+            ...emptyExtensions.globals,
+            functions: {
+              anything: {},
             },
           },
-        },
+        });
+        const { findByTestId, getByRole } = await r();
+
+        fireEvent.click(within(getByRole('tablist')).getByText('Functions'));
+
+        const functions = await findByTestId('functions');
+
+        const anything = within(functions).getByTestId('anything');
+        const title = within(anything).getByText('anything');
+        expect(title).toBeInTheDocument();
+        expect(title.id).toBe('function_anything');
+
+        const link = within(anything).getByRole('link');
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute(
+          'href',
+          expect.stringMatching(new RegExp(`#${title.id}$`)),
+        );
+        expect(
+          within(anything).getByTestId('anything.metadataAbsent'),
+        ).toBeInTheDocument();
       });
-      const { findByTestId, getByRole } = await r();
+      it('with metadata', async () => {
+        listTemplatingExtensions.mockResolvedValue({
+          ...emptyExtensions,
+          globals: {
+            ...emptyExtensions.globals,
+            functions: {
+              truthy: {
+                description: 'evaluate truthiness',
+                schema: {
+                  arguments: [
+                    {
+                      title: 'input',
+                    },
+                  ],
+                  output: {
+                    type: 'boolean',
+                  },
+                },
+                examples: [
+                  {
+                    description: 'basic usage',
+                    example: "truthy('foo')",
+                    notes: 'yields `true`',
+                  },
+                ],
+              },
+            },
+          },
+        });
+        const { findByTestId, getByRole } = await r();
 
-      fireEvent.click(within(getByRole('tablist')).getByText('Functions'));
+        fireEvent.click(within(getByRole('tablist')).getByText('Functions'));
 
-      const functions = await findByTestId('functions');
+        const functions = await findByTestId('functions');
 
-      const truthy = within(functions).getByTestId('truthy');
-      const title = within(truthy).getByText('truthy');
-      expect(title).toBeInTheDocument();
-      expect(title.id).toBe('function_truthy');
+        const truthy = within(functions).getByTestId('truthy');
+        const title = within(truthy).getByText('truthy');
+        expect(title).toBeInTheDocument();
+        expect(title.id).toBe('function_truthy');
 
-      const link = within(truthy).getByRole('link');
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute(
-        'href',
-        expect.stringMatching(new RegExp(`#${title.id}$`)),
-      );
+        const link = within(truthy).getByRole('link');
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute(
+          'href',
+          expect.stringMatching(new RegExp(`#${title.id}$`)),
+        );
+        expect(
+          within(truthy).queryByTestId('truthy.metadataAbsent'),
+        ).not.toBeInTheDocument();
 
-      expect(
-        within(truthy).getByText('evaluate truthiness'),
-      ).toBeInTheDocument();
+        expect(
+          within(truthy).getByText('evaluate truthiness'),
+        ).toBeInTheDocument();
 
-      expect(within(truthy).getByText('[0]')).toBeInTheDocument();
-      expect(
-        within(truthy).getByTestId('root_truthy.arg0'),
-      ).toBeInTheDocument();
-      expect(
-        within(truthy).queryByTestId('root_truthy.arg1'),
-      ).not.toBeInTheDocument();
-      expect(
-        within(truthy).getByTestId('root_truthy.output'),
-      ).toBeInTheDocument();
+        expect(within(truthy).getByText('[0]')).toBeInTheDocument();
+        expect(
+          within(truthy).getByTestId('root_truthy.arg0'),
+        ).toBeInTheDocument();
+        expect(
+          within(truthy).queryByTestId('root_truthy.arg1'),
+        ).not.toBeInTheDocument();
+        expect(
+          within(truthy).getByTestId('root_truthy.output'),
+        ).toBeInTheDocument();
 
-      const x = within(truthy).getByTestId('examples');
-      expect(x).toBeInTheDocument();
-      const xd0 = within(x).getByTestId('example_desc0');
-      expect(xd0).toBeInTheDocument();
-      expect(xd0).toHaveTextContent(/basic usage\s*yields\s*true/);
+        const x = within(truthy).getByTestId('examples');
+        expect(x).toBeInTheDocument();
+        const xd0 = within(x).getByTestId('example_desc0');
+        expect(xd0).toBeInTheDocument();
+        expect(xd0).toHaveTextContent(/basic usage\s*yields\s*true/);
 
-      const xc0 = within(x).getByTestId('example_code0');
-      expect(within(xc0).getByText("truthy('foo')")).toBeInTheDocument();
+        const xc0 = within(x).getByTestId('example_code0');
+        expect(within(xc0).getByText("truthy('foo')")).toBeInTheDocument();
+      });
     });
     it('renders global values', async () => {
       const msvValue = ['foo', 'bar', 'baz'];
diff --git a/plugins/scaffolder/src/translation.ts b/plugins/scaffolder/src/translation.ts
index fc0f0a6889..78ca15e2ff 100644
--- a/plugins/scaffolder/src/translation.ts
+++ b/plugins/scaffolder/src/translation.ts
@@ -226,6 +226,7 @@ export const scaffolderTranslationRef = createTranslationRef({
         functions: {
           title: 'Functions',
           notAvailable: 'There are no global template functions defined.',
+          metadataAbsent: 'Function metadata unavailable',
           schema: {
             arguments: 'Arguments',
             output: 'Output',

From b00c160f426734c171525ec63053837eb52eb6c1 Mon Sep 17 00:00:00 2001
From: mario ma <mario.ma.node@gmail.com>
Date: Mon, 9 Jun 2025 15:02:12 +0800
Subject: [PATCH 9/9] fix: Remove React import form notification and scaffolder
 plugin

Signed-off-by: mario ma <mario.ma.node@gmail.com>
---
 .changeset/itchy-mirrors-juggle.md                 |  6 ++++++
 .../UserNotificationSettingsCard/OriginRow.tsx     |  1 -
 .../UserNotificationSettingsCard/TopicRow.tsx      |  1 -
 .../TemplatingExtensionsPage/TemplateFilters.tsx   | 12 ++++++------
 .../TemplatingExtensionsPage/TemplateGlobals.tsx   | 14 +++++++-------
 5 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/itchy-mirrors-juggle.md

diff --git a/.changeset/itchy-mirrors-juggle.md b/.changeset/itchy-mirrors-juggle.md
new file mode 100644
index 0000000000..6fd7c7543a
--- /dev/null
+++ b/.changeset/itchy-mirrors-juggle.md
@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-notifications': patch
+'@backstage/plugin-scaffolder': patch
+---
+
+Remove React import form notification and scaffolder plugin
diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx
index d8d347c202..f4f6c61493 100644
--- a/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx
+++ b/plugins/notifications/src/components/UserNotificationSettingsCard/OriginRow.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   ChannelSetting,
   isNotificationsEnabledFor,
diff --git a/plugins/notifications/src/components/UserNotificationSettingsCard/TopicRow.tsx b/plugins/notifications/src/components/UserNotificationSettingsCard/TopicRow.tsx
index 5c9c3cbacc..ed2ca8fd05 100644
--- a/plugins/notifications/src/components/UserNotificationSettingsCard/TopicRow.tsx
+++ b/plugins/notifications/src/components/UserNotificationSettingsCard/TopicRow.tsx
@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   isNotificationsEnabledFor,
   NotificationSettings,
diff --git a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateFilters.tsx b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateFilters.tsx
index e0c80c27cf..05f3043dd1 100644
--- a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateFilters.tsx
+++ b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateFilters.tsx
@@ -26,7 +26,7 @@ import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import classNames from 'classnames';
-import React, { ReactElement, useState } from 'react';
+import { cloneElement, Fragment, ReactElement, useState } from 'react';
 import { scaffolderTranslationRef } from '../../translation';
 import { Expanded, RenderSchema, SchemaRenderContext } from '../RenderSchema';
 import { ScaffolderUsageExamplesTable } from '../ScaffolderUsageExamplesTable';
@@ -60,7 +60,7 @@ const FilterDetailContent = ({
     headings: [<Typography variant="h6" component="h4" />],
   };
   return (
-    <React.Fragment key={`${name}.detail`}>
+    <Fragment key={`${name}.detail`}>
       {filter.description && <MarkdownContent content={filter.description} />}
       <Box pb={2}>
         <Typography variant="h5" component="h3">
@@ -84,7 +84,7 @@ const FilterDetailContent = ({
             const [argSchema, required] = inspectFunctionArgSchema(arg);
 
             return (
-              <React.Fragment key={i}>
+              <Fragment key={i}>
                 <div
                   className={classNames({ [classes.argRequired]: required })}
                 >
@@ -101,7 +101,7 @@ const FilterDetailContent = ({
                   }}
                   schema={argSchema}
                 />
-              </React.Fragment>
+              </Fragment>
             );
           })}
         </Box>
@@ -133,7 +133,7 @@ const FilterDetailContent = ({
           </AccordionDetails>
         </Accordion>
       )}
-    </React.Fragment>
+    </Fragment>
   );
 };
 
@@ -178,7 +178,7 @@ export const TemplateFilters = ({
             >
               {name}
             </Typography>
-            {React.cloneElement(baseLink, {
+            {cloneElement(baseLink, {
               to: `${baseLink.props.to}#${fragment}`,
             })}
             <FilterDetailContent {...{ t, classes, name, filter }} />
diff --git a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
index 329f7b9742..3ee367e009 100644
--- a/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
+++ b/plugins/scaffolder/src/components/TemplatingExtensionsPage/TemplateGlobals.tsx
@@ -26,7 +26,7 @@ import { ClassNameMap } from '@material-ui/core/styles/withStyles';
 import Typography from '@material-ui/core/Typography';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import classNames from 'classnames';
-import React, { ReactElement, useState } from 'react';
+import { cloneElement, Fragment, ReactElement, useState } from 'react';
 import { scaffolderTranslationRef } from '../../translation';
 import { Expanded, RenderSchema, SchemaRenderContext } from '../RenderSchema';
 import { ScaffolderUsageExamplesTable } from '../ScaffolderUsageExamplesTable';
@@ -60,7 +60,7 @@ const FunctionDetailContent = ({
     headings: [<Typography variant="h6" component="h4" />],
   };
   return (
-    <React.Fragment key={`${name}.detail`}>
+    <Fragment key={`${name}.detail`}>
       {fn.description && <MarkdownContent content={fn.description} />}
       {schema?.arguments?.length && (
         <Box key={`${name}.args`} pb={2}>
@@ -71,7 +71,7 @@ const FunctionDetailContent = ({
             const [argSchema, required] = inspectFunctionArgSchema(arg);
 
             return (
-              <React.Fragment key={i}>
+              <Fragment key={i}>
                 <div
                   className={classNames({ [classes.argRequired]: required })}
                 >
@@ -89,7 +89,7 @@ const FunctionDetailContent = ({
                   }}
                   schema={argSchema}
                 />
-              </React.Fragment>
+              </Fragment>
             );
           })}
         </Box>
@@ -121,7 +121,7 @@ const FunctionDetailContent = ({
           </AccordionDetails>
         </Accordion>
       )}
-    </React.Fragment>
+    </Fragment>
   );
 };
 
@@ -166,7 +166,7 @@ export const TemplateGlobalFunctions = ({
             >
               {name}
             </Typography>
-            {React.cloneElement(baseLink, {
+            {cloneElement(baseLink, {
               to: `${baseLink.props.to}#${fragment}`,
             })}
             <FunctionDetailContent {...{ classes, name, fn, t }} />
@@ -218,7 +218,7 @@ export const TemplateGlobalValues = ({
             >
               {name}
             </Typography>
-            {React.cloneElement(baseLink, {
+            {cloneElement(baseLink, {
               to: `${baseLink.props.to}#${fragment}`,
             })}
             {gv.description && <MarkdownContent content={gv.description} />}