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

Fix heading variants

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-06-06 13:27:49 +02:00
parent 5247c13d74
commit ee6ffe6c59
8 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/forty-seas-worry.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Fix styling for the title4 prop on the Heading component in Canon.
canon-docs/src/app/(docs)/components/heading/page.mdx
+12
View File
@@ -59,6 +59,7 @@ appearance of the heading.
<Heading variant="title2">Title 2</Heading>
<Heading variant="title3">Title 3</Heading>
<Heading variant="title4">Title 4</Heading>
<Heading variant="title5">Title 5</Heading>
</Flex>`}
/>
@@ -78,6 +79,17 @@ heading.
</Heading>`}
/>
### Custom render
You can also use the `render` prop to render the heading as a different element.
<Snippet
py={2}
open
preview={<HeadingSnippet story="CustomRender" />}
code={`<Heading render={<h4 />}>Custom render</Heading>`}
/>
### Responsive
You can also use the `variant` prop to change the appearance of the text based
canon-docs/src/app/(docs)/components/text/page.mdx
+10
View File
@@ -117,6 +117,16 @@ text.
</Text>`}
/>
### Custom render
You can also use the `render` prop to render the text as a different element.
<Snippet
open
preview={<TextSnippet story="CustomRender" />}
code={`<Text render={<span />}>Custom render</Text>`}
/>
### Responsive
You can also use the `variant` prop to change the appearance of the text based
packages/canon/css/components.css
+1 -1
View File
@@ -515,7 +515,7 @@
}
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-size: var(--canon-font-size-6);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/css/heading.css
+1 -1
View File
@@ -27,7 +27,7 @@
}
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-size: var(--canon-font-size-6);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/css/styles.css
+1 -1
View File
@@ -9739,7 +9739,7 @@
}
.canon-Heading[data-variant="title4"] {
font-size: var(--canon-font-size-title4);
font-size: var(--canon-font-size-6);
font-weight: var(--canon-font-weight-bold);
}
packages/canon/src/components/Heading/Heading.stories.tsx
+1
View File
@@ -46,6 +46,7 @@ export const AllVariants: Story = {
<Heading variant="title2">Title 2</Heading>
<Heading variant="title3">Title 3</Heading>
<Heading variant="title4">Title 4</Heading>
<Heading variant="title5">Title 5</Heading>
</Flex>
),
};
packages/canon/src/components/Heading/styles.css
+1 -1
View File
@@ -43,7 +43,7 @@
}
.canon-Heading[data-variant='title4'] {
font-size: var(--canon-font-size-title4);
font-size: var(--canon-font-size-6);
font-weight: var(--canon-font-weight-bold);
}