paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 36 Packages Projects Releases Wiki Activity

fix(ui): use Text as="p" in Tabs stories for proper line breaks

Browse Source 
Story description text was rendering inline without line breaks
between elements. Add as="p" to Text components so each renders
as a block-level paragraph.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-02-27 10:58:24 +01:00
parent d4fa5b4ee0
commit a0e4d38f4b
1 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/Tabs/Tabs.stories.tsx
+39 -35
View File
@@ -125,10 +125,10 @@ export const WithMockedURLTab3 = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL is mocked to be: <strong>/tab3</strong>
</Text>
<Text>
<Text as="p">
Notice how the "Tab 3 With long title" tab is selected (highlighted)
because it matches the current path.
</Text>
@@ -157,14 +157,14 @@ export const WithMockedURLNoMatch = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL is mocked to be: <strong>/some-other-page</strong>
</Text>
<Text>
<Text as="p">
No tab is selected because the current path doesn't match any tab's
href.
</Text>
<Text>
<Text as="p">
Tabs without href (like "Tab 1", "Tab 2", "Tab 3 With long title")
fall back to React Aria's internal state.
</Text>
@@ -195,14 +195,14 @@ export const ExactMatchingDefault = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/mentorship/events</strong>
</Text>
<Text>
<Text as="p">
Using default exact matching, only the "Events" tab is active because
it exactly matches the URL.
</Text>
<Text>
<Text as="p">
The "Mentorship" tab is NOT active even though the URL contains
"/mentorship".
</Text>
@@ -231,18 +231,18 @@ export const PrefixMatchingForNestedRoutes = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/mentorship/events</strong>
</Text>
<Text>
<Text as="p">
The "Mentorship" tab uses prefix matching and IS active because
"/mentorship/events" starts with "/mentorship".
</Text>
<Text>
<Text as="p">
The "Events" tab uses exact matching and is also active because it
exactly matches.
</Text>
<Text>
<Text as="p">
The "Catalog" tab uses prefix matching but is NOT active because the
URL doesn't start with "/catalog".
</Text>
@@ -313,22 +313,22 @@ export const MixedMatchingStrategies = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/dashboard/analytics/reports</strong>
</Text>
<Text>
<Text as="p">
• "Overview" tab: exact matching, NOT active (doesn't exactly match
"/dashboard")
</Text>
<Text>
<Text as="p">
• "Analytics" tab: prefix matching, IS active (URL starts with
"/dashboard/analytics")
</Text>
<Text>
<Text as="p">
• "Settings" tab: prefix matching, NOT active (URL doesn't start with
"/dashboard/settings")
</Text>
<Text>
<Text as="p">
• "Help" tab: exact matching, NOT active (doesn't exactly match
"/help")
</Text>
@@ -357,20 +357,20 @@ export const PrefixMatchingEdgeCases = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/foobar</strong>
</Text>
<Text>
<Text as="p">
• "Foo" tab (prefix): NOT active - prevents "/foo" from matching
"/foobar"
</Text>
<Text>
<Text as="p">
• "Foobar" tab (exact): IS active - exactly matches "/foobar"
</Text>
<Text>
<Text as="p">
• "Foo (exact)" tab: NOT active - doesn't exactly match "/foobar"
</Text>
<Text>
<Text as="p">
This shows that prefix matching properly requires a "/" separator to
prevent false matches.
</Text>
@@ -399,20 +399,20 @@ export const PrefixMatchingWithSlash = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/foo/bar</strong>
</Text>
<Text>
<Text as="p">
• "Foo" tab (prefix): IS active - "/foo/bar" starts with "/foo/"
</Text>
<Text>
<Text as="p">
• "Foobar" tab (exact): NOT active - doesn't exactly match "/foobar"
</Text>
<Text>
<Text as="p">
• "Bar" tab (prefix): NOT active - "/foo/bar" doesn't start with
"/bar"
</Text>
<Text>
<Text as="p">
This demonstrates proper prefix matching with the "/" separator.
</Text>
</Box>
@@ -440,12 +440,14 @@ export const RootPathMatching = meta.story({
</TabList>
</Tabs>
<Box mt="6" pl="2">
<Text>
<Text as="p">
Current URL: <strong>/</strong>
</Text>
<Text>• "Home" tab (exact): IS active - exactly matches "/"</Text>
<Text>• "Home (prefix)" tab: IS active - "/" matches "/"</Text>
<Text>
<Text as="p">
• "Home" tab (exact): IS active - exactly matches "/"
</Text>
<Text as="p">• "Home (prefix)" tab: IS active - "/" matches "/"</Text>
<Text as="p">
• "Catalog" tab (prefix): NOT active - "/" doesn't start with
"/catalog"
</Text>
@@ -533,10 +535,12 @@ export const AutoSelectionOfTabs = meta.story({
</Tabs>
{/* With hrefs */}
<Text>
{' '}
<strong>Case 2: With hrefs</strong> By default no selection is shown
because the URL doesn't match any tab's href.{' '}
<Text as="p">
<strong>Case 2: With hrefs</strong>
</Text>
<Text as="p">
By default no selection is shown because the URL doesn't match any
tab's href.
</Text>
<Tabs>
<TabList>