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/.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/.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/.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/.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/OWNERS.md b/OWNERS.md index 85ffadae42..44d7c7784f 100644 --- a/OWNERS.md +++ b/OWNERS.md @@ -77,11 +77,11 @@ Team: @backstage/helm-chart-maintainers Scope: The Backstage [Helm Chart(s)](https://github.com/backstage/charts). -| Name | Organization | Team | GitHub | Discord | -| -------------------- | ------------ | ---- | ---------------------------------------- | -------------- | -| Andrew Block | Red Hat | | [sabre1041](http://github.com/sabre1041) | sabre1041#2622 | -| Tom Coufal | Red Hat | | [tumido](http://github.com/tumido) | Tumi#4346 | -| Vincenzo Scamporlino | Spotify | | [vinzscam](http://github.com/vinzscam) | vinzscam#6944 | +| Name | Organization | Team | GitHub | Discord | +| -------------------- | ------------ | ---- | ---------------------------------------- | ---------------- | +| Andrew Block | Red Hat | | [sabre1041](http://github.com/sabre1041) | `sabre1041#2622` | +| Tom Coufal | Red Hat | | [tumido](http://github.com/tumido) | `Tumi#4346` | +| Vincenzo Scamporlino | Spotify | | [vinzscam](http://github.com/vinzscam) | `vinzscam#6944` | ### Home @@ -89,12 +89,14 @@ Team: @backstage/home-maintainers Scope: The Backstage home page and information architecture -| Name | Organization | Team | GitHub | Discord | -| ------------------------ | ------------ | -------------- | ---------------------------------------- | ----------------- | -| Avantika Iyer | Spotify | Infinite Buck$ | [tikabom](http://github.com/tikabom) | - | -| Emma Indal | Spotify | Infinite Buck$ | [emmaindal](http://github.com/emmaindal) | emmaindal#7503 | -| Djamaile Rahamat | Spotify | Infinite Buck$ | [djamaile](http://github.com/djamaile) | dyoqi | -| Raghunandan Balachandran | Spotify | Infinite Buck$ | [soapraj](http://github.com/soapraj) | raghunandanb#1114 | +| Name | Organization | Team | GitHub | Discord | +| ------------------ | ------------ | --------------- | ----------------------------------------- | ------- | +| Ainhoa Larumbe | Spotify | Imaginary Goats | [ainhoaL](http://github.com/ainhoaL) | - | +| Avantika Iyer | Spotify | Imaginary Goats | [tikabom](http://github.com/tikabom) | - | +| Daniel Jelčić | Spotify | Imaginary Goats | [djelcic](http://github.com/danieljelcic) | - | +| Eric Peterson | Spotify | Imaginary Goats | [iamEAP](http://github.com/iamEAP) | - | +| Musaab Elfaqih | Spotify | Imaginary Goats | [TheSabby](http://github.com/TheSabby) | - | +| Landry Zinda-Snead | Spotify | Imaginary Goats | [landryzs](http://github.com/landryzs) | - | ### Kubernetes 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={``} /> +### As Link + +Here's a view when buttons are rendered as a link. + +} + code={``} +/> + ### 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 = { default: 'medium', responsive: true, }, + render: { + type: 'enum', + values: ['ReactNode'], + responsive: false, + default: ' - ); + const { renderElement } = useRender({ + render, + props: { + className: clsx('canon-Button', className), + ['data-variant']: responsiveVariant, + ['data-size']: responsiveSize, + ...rest, + children: ( + <> + {iconStart && ( + + )} + {children} + {iconEnd && ( + + )} + + ), + }, + 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, '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 */ 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 = { ), }; + +export const WithTextTruncate: Story = { + render: () => ( + + + + A man looks at a painting in a museum and says, “Brothers and sisters + I have none, but that man's father is my father's son.” Who + is in the painting? + + + + + A man looks at a painting in a museum and says, “Brothers and sisters + I have none, but that man's father is my father's son.” Who + is in the painting? + + + + ), +}; 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; } 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 = { Title 2 Title 3 Title 4 + Title 5 ), }; 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); } 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", 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);