From 74d463c222101fbf612eafb92a58c5686ff14e8a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 10 Apr 2025 17:02:17 +0200 Subject: [PATCH 1/5] Fix Select styles Signed-off-by: Charles de Dreuille --- .changeset/thick-windows-juggle.md | 5 +++ packages/canon/css/components.css | 14 +++++++ packages/canon/css/select.css | 14 +++++++ packages/canon/css/styles.css | 14 +++++++ .../src/components/Select/Select.stories.tsx | 39 ++++++++++++++++++- .../src/components/Select/Select.styles.css | 14 +++++++ .../canon/src/components/Select/Select.tsx | 5 ++- .../TextField/TextField.stories.tsx | 4 +- 8 files changed, 105 insertions(+), 4 deletions(-) create mode 100644 .changeset/thick-windows-juggle.md diff --git a/.changeset/thick-windows-juggle.md b/.changeset/thick-windows-juggle.md new file mode 100644 index 0000000000..1ee17e314d --- /dev/null +++ b/.changeset/thick-windows-juggle.md @@ -0,0 +1,5 @@ +--- +'@backstage/canon': patch +--- + +Fix Select styles on small sizes + with long option names in Canon. diff --git a/packages/canon/css/components.css b/packages/canon/css/components.css index 3a8787ddca..379e6ca1a4 100644 --- a/packages/canon/css/components.css +++ b/packages/canon/css/components.css @@ -753,6 +753,7 @@ cursor: pointer; justify-content: space-between; align-items: center; + gap: var(--canon-space-2); width: 100%; transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; display: flex; @@ -879,3 +880,16 @@ font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } + +.canon-Select--icon { + justify-content: center; + align-items: center; + display: flex; +} + +.canon-Select--value { + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; +} diff --git a/packages/canon/css/select.css b/packages/canon/css/select.css index 6c64c39245..29494c634a 100644 --- a/packages/canon/css/select.css +++ b/packages/canon/css/select.css @@ -41,6 +41,7 @@ cursor: pointer; justify-content: space-between; align-items: center; + gap: var(--canon-space-2); width: 100%; transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; display: flex; @@ -167,3 +168,16 @@ font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } + +.canon-Select--icon { + justify-content: center; + align-items: center; + display: flex; +} + +.canon-Select--value { + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; +} diff --git a/packages/canon/css/styles.css b/packages/canon/css/styles.css index 1c431ad54c..78904bc4b8 100644 --- a/packages/canon/css/styles.css +++ b/packages/canon/css/styles.css @@ -9977,6 +9977,7 @@ cursor: pointer; justify-content: space-between; align-items: center; + gap: var(--canon-space-2); width: 100%; transition: border-color .2s ease-in-out, outline-color .2s ease-in-out; display: flex; @@ -10103,3 +10104,16 @@ font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } + +.canon-Select--icon { + justify-content: center; + align-items: center; + display: flex; +} + +.canon-Select--value { + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; + overflow: hidden; +} diff --git a/packages/canon/src/components/Select/Select.stories.tsx b/packages/canon/src/components/Select/Select.stories.tsx index a4a06a810b..000ba180dc 100644 --- a/packages/canon/src/components/Select/Select.stories.tsx +++ b/packages/canon/src/components/Select/Select.stories.tsx @@ -246,9 +246,46 @@ export const WithManyOptions: Story = { }, }; -export const withErrorAndDescription: Story = { +export const WithErrorAndDescription: Story = { args: { ...Preview.args, error: 'Invalid font family', }, }; + +export const WithLongOptionNames: Story = { + args: { + label: 'Document Template', + options: [ + { + value: 'annual-report-2024', + label: + 'Annual Financial Report and Strategic Planning Document for Fiscal Year 2024 with Comprehensive Analysis of Market Trends, Competitive Landscape, Financial Performance Metrics, Revenue Projections, Cost Optimization Strategies, Risk Assessment, and Long-term Growth Initiatives Across All Business Units and Geographical Regions', + }, + { + value: 'product-roadmap', + label: + 'Comprehensive Product Development Roadmap and Feature Implementation Timeline Including Detailed Technical Specifications, Resource Allocation Plans, Cross-functional Team Dependencies, Milestone Tracking, Quality Assurance Procedures, User Acceptance Testing Protocols, and Post-launch Support Strategy for All Product Lines and Service Offerings', + }, + { + value: 'user-guide', + label: + 'Detailed User Guide and Technical Documentation for Advanced System Features Covering Installation Procedures, Configuration Settings, Security Protocols, Troubleshooting Guidelines, Best Practices, Common Use Cases, Performance Optimization Tips, Integration Methods, API Documentation, and Frequently Asked Questions with Step-by-Step Solutions', + }, + { + value: 'marketing-plan', + label: + 'Integrated Marketing Strategy and Campaign Planning Document for Q3 2024 Encompassing Target Audience Analysis, Channel Selection Criteria, Budget Allocation Framework, Creative Development Process, Content Calendar, Social Media Strategy, Email Marketing Campaigns, SEO Optimization, Paid Advertising Plans, and ROI Measurement Methodology', + }, + { + value: 'research-paper', + label: + 'Scientific Research Paper on Advanced Machine Learning Techniques and Applications Including Literature Review, Methodology Description, Experimental Setup, Data Collection Procedures, Analysis Techniques, Results Interpretation, Comparative Studies, Limitations Discussion, Future Research Directions, and Practical Implementation Guidelines', + }, + ], + placeholder: 'Select a document template', + name: 'template', + style: { maxWidth: 400 }, + value: 'annual-report-2024', + }, +}; diff --git a/packages/canon/src/components/Select/Select.styles.css b/packages/canon/src/components/Select/Select.styles.css index 19fa327bf5..2fcdbf7a6a 100644 --- a/packages/canon/src/components/Select/Select.styles.css +++ b/packages/canon/src/components/Select/Select.styles.css @@ -60,6 +60,7 @@ align-items: center; transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out; cursor: pointer; + gap: var(--canon-space-2); } .canon-Select--trigger::placeholder { @@ -187,3 +188,16 @@ font-weight: var(--canon-font-weight-regular); margin-left: var(--canon-space-1); } + +.canon-Select--icon { + display: flex; + align-items: center; + justify-content: center; +} + +.canon-Select--value { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; +} diff --git a/packages/canon/src/components/Select/Select.tsx b/packages/canon/src/components/Select/Select.tsx index 9463735829..6e28d3a9a0 100644 --- a/packages/canon/src/components/Select/Select.tsx +++ b/packages/canon/src/components/Select/Select.tsx @@ -66,7 +66,10 @@ export const Select = forwardRef((props, ref) => { })} data-invalid={error} > - + diff --git a/packages/canon/src/components/TextField/TextField.stories.tsx b/packages/canon/src/components/TextField/TextField.stories.tsx index 34f81af4f4..8594a8c650 100644 --- a/packages/canon/src/components/TextField/TextField.stories.tsx +++ b/packages/canon/src/components/TextField/TextField.stories.tsx @@ -95,14 +95,14 @@ export const Responsive: Story = { }, }; -export const withError: Story = { +export const WithError: Story = { args: { ...WithLabel.args, error: 'Invalid URL', }, }; -export const withErrorAndDescription: Story = { +export const WithErrorAndDescription: Story = { args: { ...WithLabel.args, error: 'Invalid URL', From 0cde1b882396af8a32f06d67c9254a8a577d2538 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 31 Mar 2025 00:28:00 +0200 Subject: [PATCH 2/5] catalog: add overview content group Signed-off-by: Patrik Oldsberg --- plugins/catalog-react/report-alpha.api.md | 1 + plugins/catalog-react/src/alpha/blueprints/extensionData.tsx | 1 + plugins/catalog/src/alpha/entityContents.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/plugins/catalog-react/report-alpha.api.md b/plugins/catalog-react/report-alpha.api.md index b9a064043c..d5f85b7836 100644 --- a/plugins/catalog-react/report-alpha.api.md +++ b/plugins/catalog-react/report-alpha.api.md @@ -110,6 +110,7 @@ export function convertLegacyEntityContentExtension( // @alpha export const defaultEntityContentGroups: { + overview: string; documentation: string; development: string; deployment: string; diff --git a/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx b/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx index b5092d99b7..0a52ce2c5c 100644 --- a/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx +++ b/plugins/catalog-react/src/alpha/blueprints/extensionData.tsx @@ -38,6 +38,7 @@ export const entityFilterExpressionDataRef = * Default entity content groups. */ export const defaultEntityContentGroups = { + overview: 'Overview', documentation: 'Documentation', development: 'Development', deployment: 'Deployment', diff --git a/plugins/catalog/src/alpha/entityContents.tsx b/plugins/catalog/src/alpha/entityContents.tsx index 8be3608b82..165ed33e04 100644 --- a/plugins/catalog/src/alpha/entityContents.tsx +++ b/plugins/catalog/src/alpha/entityContents.tsx @@ -49,6 +49,7 @@ export const catalogOverviewEntityContent = return originalFactory({ defaultPath: '/', defaultTitle: 'Overview', + defaultGroup: 'overview', loader: async () => { const LazyDefaultLayoutComponent = reactLazy(() => import('./DefaultEntityContentLayout').then(m => ({ From 3b2a02d82503246ae3fc4197530e66b5595dfb84 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 31 Mar 2025 00:28:28 +0200 Subject: [PATCH 3/5] catalog: add info card types Signed-off-by: Patrik Oldsberg --- plugins/catalog/src/alpha/entityCards.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/catalog/src/alpha/entityCards.tsx b/plugins/catalog/src/alpha/entityCards.tsx index 98921958ad..8662518d30 100644 --- a/plugins/catalog/src/alpha/entityCards.tsx +++ b/plugins/catalog/src/alpha/entityCards.tsx @@ -20,6 +20,7 @@ import { compatWrapper } from '@backstage/core-compat-api'; export const catalogAboutEntityCard = EntityCardBlueprint.make({ name: 'about', params: { + type: 'info', loader: async () => import('../components/AboutCard').then(m => compatWrapper(), @@ -30,6 +31,7 @@ export const catalogAboutEntityCard = EntityCardBlueprint.make({ export const catalogLinksEntityCard = EntityCardBlueprint.make({ name: 'links', params: { + type: 'info', filter: 'has:links', loader: async () => import('../components/EntityLinksCard').then(m => @@ -41,6 +43,7 @@ export const catalogLinksEntityCard = EntityCardBlueprint.make({ export const catalogLabelsEntityCard = EntityCardBlueprint.make({ name: 'labels', params: { + type: 'info', filter: 'has:labels', loader: async () => import('../components/EntityLabelsCard').then(m => From f23f06d8ebfff50edb0f7b02fd940da46cf897eb Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Mon, 31 Mar 2025 12:18:44 +0200 Subject: [PATCH 4/5] catalog: fix summary card layout Signed-off-by: Patrik Oldsberg --- plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx index badfaf6d72..21276f424a 100644 --- a/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx +++ b/plugins/catalog/src/alpha/DefaultEntityContentLayout.tsx @@ -56,6 +56,7 @@ const useStyles = makeStyles< minWidth: 0, }, summaryArea: { + minWidth: 0, margin: theme.spacing(1.5), // To counteract MUI negative grid margin }, summaryCard: { @@ -145,7 +146,7 @@ export function DefaultEntityContentLayout(props: EntityContentLayoutProps) { ) : null} {summaryCards.length > 0 ? (
- + {summaryCards.map(card => (
{card.element}
))} From 3f7e4f1527a69d25daaa453fcb4f368eac9a79b9 Mon Sep 17 00:00:00 2001 From: Patrik Oldsberg Date: Thu, 10 Apr 2025 19:04:42 +0200 Subject: [PATCH 5/5] changesets: added changesets for catalog NFS polish Signed-off-by: Patrik Oldsberg --- .changeset/brown-pans-guess.md | 5 +++++ .changeset/kind-pianos-fold.md | 5 +++++ .changeset/rare-olives-lay.md | 5 +++++ .changeset/wet-towns-laugh.md | 5 +++++ 4 files changed, 20 insertions(+) create mode 100644 .changeset/brown-pans-guess.md create mode 100644 .changeset/kind-pianos-fold.md create mode 100644 .changeset/rare-olives-lay.md create mode 100644 .changeset/wet-towns-laugh.md diff --git a/.changeset/brown-pans-guess.md b/.changeset/brown-pans-guess.md new file mode 100644 index 0000000000..e6ba4ee465 --- /dev/null +++ b/.changeset/brown-pans-guess.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Fixed the layout of summary cards in the new frontend system, ensuring that the horizontal scroll grid doesn't grow too large as well as tweaked its scrolling parameters. diff --git a/.changeset/kind-pianos-fold.md b/.changeset/kind-pianos-fold.md new file mode 100644 index 0000000000..a0c2bf39bc --- /dev/null +++ b/.changeset/kind-pianos-fold.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +The about, links, and labels card now all have the `info` card type by default in the new frontend system. diff --git a/.changeset/rare-olives-lay.md b/.changeset/rare-olives-lay.md new file mode 100644 index 0000000000..0807e244ac --- /dev/null +++ b/.changeset/rare-olives-lay.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-react': patch +--- + +Added a new `overview` entity content group for the new frontend system. diff --git a/.changeset/wet-towns-laugh.md b/.changeset/wet-towns-laugh.md new file mode 100644 index 0000000000..1e16e0b6d8 --- /dev/null +++ b/.changeset/wet-towns-laugh.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +The overview content is now part of the overview group by default in the new frontend system.