diff --git a/.changeset/young-shirts-sleep.md b/.changeset/young-shirts-sleep.md new file mode 100644 index 0000000000..394ff07c36 --- /dev/null +++ b/.changeset/young-shirts-sleep.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Added back the default heading element to the Title, Headline and SubHeadline components in production mode. diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx index c2be92c6a1..4d32dd783e 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.tsx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.tsx @@ -69,6 +69,7 @@ export const Checkbox = forwardRef( invalid, indeterminate = false, 'aria-describedby': descriptionId, + children, ...props }, passedRef, @@ -116,7 +117,7 @@ export const Checkbox = forwardRef( )} /> diff --git a/packages/circuit-ui/components/Headline/Headline.tsx b/packages/circuit-ui/components/Headline/Headline.tsx index c002cfcfaa..5600a628d6 100644 --- a/packages/circuit-ui/components/Headline/Headline.tsx +++ b/packages/circuit-ui/components/Headline/Headline.tsx @@ -37,11 +37,13 @@ export interface HeadlineProps extends HTMLAttributes { * A flexible headline component capable of rendering any HTML heading element. */ export const Headline = forwardRef( - ({ className, as: Element, size = 'one', ...props }, ref) => { - if (process.env.NODE_ENV !== 'production' && !Element) { + ({ className, as, size = 'one', ...props }, ref) => { + if (process.env.NODE_ENV !== 'production' && !as) { throw new CircuitError('Headline', 'The `as` prop is required.'); } + const Element = as || 'h2'; + return ( ( className, style, size = 'mega', + children, ...props }, ref, @@ -141,11 +142,11 @@ export const Selector = forwardRef( > {hasDescription ? ( - {label} + {label || children} ) : ( - label + label || children )} {hasDescription && ( diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx index 5ddf72221f..aa35b039b8 100644 --- a/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx +++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.tsx @@ -34,11 +34,13 @@ export interface SubHeadlineProps extends HTMLAttributes { * element, except h1. */ export const SubHeadline = forwardRef( - ({ className, as: Element, ...props }, ref) => { - if (process.env.NODE_ENV !== 'production' && !Element) { + ({ className, as, ...props }, ref) => { + if (process.env.NODE_ENV !== 'production' && !as) { throw new CircuitError('SubHeadline', 'The `as` prop is required.'); } + const Element = as || 'h2'; + return ( ); diff --git a/packages/circuit-ui/components/Title/Title.tsx b/packages/circuit-ui/components/Title/Title.tsx index 5562074ec7..b0fa77d410 100644 --- a/packages/circuit-ui/components/Title/Title.tsx +++ b/packages/circuit-ui/components/Title/Title.tsx @@ -37,11 +37,13 @@ export interface TitleProps extends HTMLAttributes { * A flexible title component capable of rendering any HTML heading element. */ export const Title = forwardRef( - ({ className, as: Element, size = 'one', ...props }, ref) => { - if (process.env.NODE_ENV !== 'production' && !Element) { + ({ className, as, size = 'one', ...props }, ref) => { + if (process.env.NODE_ENV !== 'production' && !as) { throw new CircuitError('Title', 'The `as` prop is required.'); } + const Element = as || 'h1'; + return (