[@mantine/core] chore: add sizes to Title

mantinedev · Sep 17, 2024 · d3d316a · d3d316a
1 parent 00a94ce
commit d3d316a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/packages/@docs/demos/src/demos/core/Title/Title.demo.size.tsx b/packages/@docs/demos/src/demos/core/Title/Title.demo.size.tsx
@@ -12,6 +12,7 @@ function Demo() {
       </Title>
       <Title size="h4">H1 heading with h4 font-size</Title>
       <Title size="1rem">H1 heading with 1rem size</Title>
+      <Title size="xs">H1 heading with xs size</Title>
     </>
   );
 }
@@ -25,6 +26,7 @@ function Demo() {
       </Title>
       <Title size="h4">H1 heading with h4 font-size</Title>
       <Title size="1rem">H1 heading with 1rem size</Title>
+      <Title size="xs">H1 heading with xs size</Title>
     </>
   );
 }

diff --git a/packages/@mantine/core/src/components/Title/Title.tsx b/packages/@mantine/core/src/components/Title/Title.tsx
@@ -5,6 +5,7 @@ import {
   ElementProps,
   factory,
   Factory,
+  MantineSize,
   StylesApiProps,
   useProps,
   useStyles,
@@ -13,7 +14,7 @@ import { getTitleSize } from './get-title-size';
 import classes from './Title.module.css';
 
 export type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
-export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'];
+export type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineSize;
 
 export type TitleStylesNames = 'root';
 export type TitleCssVariables = {

diff --git a/packages/@mantine/core/src/components/Title/get-title-size.ts b/packages/@mantine/core/src/components/Title/get-title-size.ts
@@ -2,14 +2,15 @@ import { rem } from '../../core';
 import type { TitleOrder, TitleSize } from './Title';
 
 const headings: unknown[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const sizes: unknown[] = ['xs', 'sm', 'md', 'lg', 'xl'];
 
 export interface GetTitleSizeResult {
   fontSize: string;
   fontWeight: string;
   lineHeight: string;
 }
 
-export function getTitleSize(order: TitleOrder, size: TitleSize | undefined): GetTitleSizeResult {
+export function getTitleSize(order: TitleOrder, size?: TitleSize): GetTitleSizeResult {
   const titleSize = size !== undefined ? size : `h${order}`;
 
   if (headings.includes(titleSize)) {
@@ -18,6 +19,12 @@ export function getTitleSize(order: TitleOrder, size: TitleSize | undefined): Ge
       fontWeight: `var(--mantine-${titleSize}-font-weight)`,
       lineHeight: `var(--mantine-${titleSize}-line-height)`,
     };
+  } else if (sizes.includes(titleSize)) {
+    return {
+      fontSize: `var(--mantine-font-size-${titleSize})`,
+      fontWeight: `var(--mantine-h${order}-font-weight)`,
+      lineHeight: `var(--mantine-h${order}-line-height)`,
+    };
   }
 
   return {