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