Fix Select styles

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
2025-04-10 17:02:17 +02:00
parent 6b15e7c018
commit 74d463c222
8 changed files with 105 additions and 4 deletions
@@ -0,0 +1,5 @@
+---
+'@backstage/canon': patch
+---
+
+Fix Select styles on small sizes + with long option names in Canon.
@@ -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;
+}
@@ -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;
+}
@@ -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;
+}
@@ -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',
+  },
+};
@@ -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%;
+}
@@ -66,7 +66,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
          })}
          data-invalid={error}
        >
-          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Value
+            className="canon-Select--value"
+            placeholder={placeholder}
+          />
          <SelectPrimitive.Icon className="canon-Select--icon">
            <Icon name="chevron-down" />
          </SelectPrimitive.Icon>
@@ -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',