Add min-width: 0; to the Flex components

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

.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.

packages/canon/css/components.css

@@ -186,6 +186,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 

packages/canon/css/flex.css

@@ -1,3 +1,4 @@
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }

packages/canon/css/styles.css

@@ -9410,6 +9410,7 @@
 }
 
 .canon-Flex {
+  min-width: 0;
   display: flex;
 }
 

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>
+  ),
+};

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;
 }