Fix Heading > xs size

element-hq · Nov 8, 2023 · c3c8ff0 · c3c8ff0
1 parent 5a703b4
commit c3c8ff0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/components/Typography/Heading.stories.tsx b/src/components/Typography/Heading.stories.tsx
@@ -25,7 +25,7 @@ export default {
   component: HeadingComponent,
   argTypes: {
     size: {
-      options: ["xs", "sm", "md", "lg"],
+      options: ["sm", "md", "lg", "xl"],
       control: { type: "inline-radio" },
     },
     weight: {

diff --git a/src/components/Typography/Heading.tsx b/src/components/Typography/Heading.tsx
@@ -18,11 +18,16 @@ import React from "react";
 import { Typography } from "./Typography";
 import { Text } from "./Text";
 
+type TypographyProps = React.ComponentProps<typeof Typography>;
+
 /**
  * A heading component.
  */
 export const Heading: React.FC<
-  Omit<React.ComponentProps<typeof Typography>, "type">
+  Omit<TypographyProps, "type"> & {
+    // xs is not a valid heading size
+    size?: Exclude<TypographyProps["size"], "xs">;
+  }
 > = ({ as = "h1", children, ...props }) => {
   return (
     <Typography as={as} type="heading" {...props}>

diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx
@@ -36,7 +36,7 @@ type TypographyProps<C extends React.ElementType> = {
   /**
    * The t-shirt size of the content.
    */
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   /**
    * The CSS class name.
    */