feat: update title hierarchy in ShowcaseView for improved accessibility and consistency

This commit is contained in:
Firman Ramdhani
2026-03-18 08:18:58 +07:00
parent 69e26e96e3
commit 128de2d4ef
+6 -6
View File
@@ -44,7 +44,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
CONTROL PANEL CONTROL PANEL
========================================= */} ========================================= */}
<Card withBorder shadow="sm" radius="md" p="md"> <Card withBorder shadow="sm" radius="md" p="md">
<Title order={3} mb="md"> <Title order={4} mb="md">
Theme Controls Theme Controls
</Title> </Title>
<Group grow align="flex-end"> <Group grow align="flex-end">
@@ -73,7 +73,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
TAILWIND V4 BRIDGE TEST TAILWIND V4 BRIDGE TEST
========================================= */} ========================================= */}
<Card withBorder shadow="sm" radius="md" p="md"> <Card withBorder shadow="sm" radius="md" p="md">
<Title order={3} mb="md"> <Title order={4} mb="md">
Tailwind v4 Synchronization Tailwind v4 Synchronization
</Title> </Title>
{/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */} {/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
@@ -89,7 +89,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
<Card withBorder shadow="sm" radius="md" p="md"> <Card withBorder shadow="sm" radius="md" p="md">
<Stack gap="lg"> <Stack gap="lg">
<div> <div>
<Title order={3} mb="xs"> <Title order={4} mb="xs">
Typography & Badges Typography & Badges
</Title> </Title>
<Text size="sm" c="dimmed"> <Text size="sm" c="dimmed">
@@ -113,7 +113,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
<Divider /> <Divider />
<div> <div>
<Title order={3} mb="md"> <Title order={4} mb="md">
Buttons Buttons
</Title> </Title>
<Group> <Group>
@@ -138,7 +138,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
COMPLEX FORMS (ERP STYLE) COMPLEX FORMS (ERP STYLE)
========================================= */} ========================================= */}
<Card withBorder shadow="sm" radius="md" p="md"> <Card withBorder shadow="sm" radius="md" p="md">
<Title order={3} mb="md"> <Title order={4} mb="md">
Form Elements Form Elements
</Title> </Title>
<Stack gap="md"> <Stack gap="md">
@@ -173,7 +173,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
DATA GRID / TABLE DATA GRID / TABLE
========================================= */} ========================================= */}
<Card withBorder shadow="sm" radius="md" p="md"> <Card withBorder shadow="sm" radius="md" p="md">
<Title order={3} mb="md"> <Title order={4} mb="md">
Data Grid Data Grid
</Title> </Title>
<Table striped highlightOnHover withTableBorder withColumnBorders> <Table striped highlightOnHover withTableBorder withColumnBorders>