feat: extend props and fix spread operator for typography components

.changeset/olive-bikes-pump.md

@@ -0,0 +1,7 @@
+---
+'@contentful/f36-typography': minor
+---
+
+Enables overwriting of fontColor and marginBottom props on Typography components: Caption, DisplayText, Heading, Paragraph, SectionHeading, Subheading
+Omits 'color' default property from Text component, in favor of 'fontColor' property.
+Improves Types for Caption, DisplayText, Heading, Paragraph, SectionHeading, Subheading to fix Type mismatch with "as" proptery.

packages/components/typography/src/Caption/Caption.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { FontWeightTokens } from '@contentful/f36-tokens';
 import type {
-  CommonProps,
-  MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
   ExpandProps,
 } from '@contentful/f36-core';
-import { Text } from '../Text';
+import { Text, type TextProps } from '../Text';
 import { useDensity } from '@contentful/f36-utils';
 
 const CAPTION_DEFAULT_TAG = 'span';
 
-export interface CaptionInternalProps extends CommonProps, MarginProps {
+export interface CaptionInternalProps extends Omit<TextProps, 'as'> {
   children?: React.ReactNode;
   fontWeight?: Extract<
     FontWeightTokens,
@@ -31,19 +29,21 @@ function _Caption<E extends React.ElementType = typeof CAPTION_DEFAULT_TAG>(
     children,
     fontWeight = 'fontWeightNormal',
     testId = 'cf-ui-caption',
+    as,
+    fontColor = 'gray900',
     ...otherProps
   }: CaptionProps<E>,
   ref: React.Ref<any>,
 ) {
   const density = useDensity();
-
+  const Element: React.ElementType = as || CAPTION_DEFAULT_TAG;
   return (
     <Text
-      as={CAPTION_DEFAULT_TAG}
+      as={Element}
       testId={testId}
       fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
       lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}
-      fontColor="gray900"
+      fontColor={fontColor}
       fontWeight={fontWeight}
       {...otherProps}
       ref={ref}

packages/components/typography/src/DisplayText/DisplayText.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { FontSizeTokens, LineHeightTokens } from '@contentful/f36-tokens';
 import type {
-  CommonProps,
-  MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
   ExpandProps,
 } from '@contentful/f36-core';
-import { Text } from '../Text';
+import { Text, type TextProps } from '../Text';
 import type { HeadingElement } from '../Heading';
 
 const DISPLAY_TEXT_DEFAULT_TAG = 'h2';
 
-export interface DisplayTextInternalProps extends CommonProps, MarginProps {
+export interface DisplayTextInternalProps extends Omit<TextProps, 'as'> {
   children?: React.ReactNode;
   size?: 'default' | 'large';
   as?: HeadingElement;
@@ -31,6 +29,8 @@ function _DisplayText<
     children,
     size = 'default',
     testId = 'cf-ui-display-text',
+    as,
+    fontColor = 'gray900',
     ...otherProps
   }: DisplayTextProps<E>,
   ref: React.Ref<any>,
@@ -42,15 +42,16 @@ function _DisplayText<
     fontSize = 'fontSize3Xl';
     lineHeight = 'lineHeight3Xl';
   }
+  const Element: React.ElementType = as || DISPLAY_TEXT_DEFAULT_TAG;
 
   return (
     <Text
-      as={DISPLAY_TEXT_DEFAULT_TAG}
+      as={Element}
       testId={testId}
       marginBottom={size === 'default' ? 'spacingL' : 'spacingXl'}
       fontSize={fontSize}
       lineHeight={lineHeight}
-      fontColor="gray900"
+      fontColor={fontColor}
       fontWeight="fontWeightDemiBold"
       {...otherProps}
       ref={ref}

packages/components/typography/src/Heading/Heading.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
 import type {
-  CommonProps,
-  MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
   ExpandProps,
 } from '@contentful/f36-core';
-import { Text } from '../Text';
+import { Text, type TextProps } from '../Text';
 import { useDensity } from '@contentful/f36-utils';
 
 const HEADING_DEFAULT_TAG = 'h1';
 
 export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
-export interface HeadingInternalProps extends CommonProps, MarginProps {
+export interface HeadingInternalProps extends Omit<TextProps, 'as'> {
   as?: HeadingElement;
   children?: React.ReactNode;
   isTruncated?: boolean;
@@ -25,18 +23,26 @@ export type HeadingProps<
 > = PolymorphicProps<HeadingInternalProps, E>;
 
 function _Heading<E extends React.ElementType = typeof HEADING_DEFAULT_TAG>(
-  { children, testId = 'cf-ui-heading', ...otherProps }: HeadingProps<E>,
+  {
+    children,
+    testId = 'cf-ui-heading',
+    as,
+    fontColor = 'gray900',
+    marginBottom = 'spacingM',
+    ...otherProps
+  }: HeadingProps<E>,
   ref: React.Ref<any>,
 ) {
   const density = useDensity();
+  const Element: React.ElementType = as || HEADING_DEFAULT_TAG;
 
   return (
     <Text
-      as={HEADING_DEFAULT_TAG}
+      as={Element}
       testId={testId}
-      marginBottom="spacingM"
+      marginBottom={marginBottom}
       fontWeight="fontWeightDemiBold"
-      fontColor="gray900"
+      fontColor={fontColor}
       fontSize={density === 'high' ? 'fontSizeXlHigh' : 'fontSizeXl'}
       lineHeight={density === 'high' ? 'lineHeightXlHigh' : 'lineHeightXl'}
       {...otherProps}

packages/components/typography/src/Paragraph/Paragraph.tsx

@@ -1,41 +1,45 @@
 import React from 'react';
-import type {
-  PropsWithHTMLElement,
-  CommonProps,
-  MarginProps,
-  ExpandProps,
-} from '@contentful/f36-core';
-import { Text } from '../Text';
+import type { PropsWithHTMLElement, ExpandProps } from '@contentful/f36-core';
+import { Text, type TextProps } from '../Text';
 import { useDensity } from '@contentful/f36-utils';
 
-export type ParagraphInternalProps = CommonProps &
-  MarginProps & {
-    children: React.ReactNode;
-    isTruncated?: boolean;
-    isWordBreak?: boolean;
-  };
+export type ParagraphInternalProps = TextProps & {
+  children: React.ReactNode;
+  isTruncated?: boolean;
+  isWordBreak?: boolean;
+};
 
 export type ParagraphProps = PropsWithHTMLElement<ParagraphInternalProps, 'p'>;
 
 export const Paragraph = React.forwardRef<
   HTMLParagraphElement,
   ExpandProps<ParagraphProps>
->(({ children, testId = 'cf-ui-paragraph', ...otherProps }, ref) => {
-  const density = useDensity();
+>(
+  (
+    {
+      children,
+      testId = 'cf-ui-paragraph',
+      marginBottom = 'spacingM',
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const density = useDensity();
 
-  return (
-    <Text
-      as="p"
-      testId={testId}
-      fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
-      lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
-      marginBottom="spacingM"
-      {...otherProps}
-      ref={ref}
-    >
-      {children}
-    </Text>
-  );
-});
+    return (
+      <Text
+        as="p"
+        testId={testId}
+        fontSize={density === 'high' ? 'fontSizeMHigh' : 'fontSizeM'}
+        lineHeight={density === 'high' ? 'lineHeightMHigh' : 'lineHeightM'}
+        marginBottom={marginBottom}
+        {...otherProps}
+        ref={ref}
+      >
+        {children}
+      </Text>
+    );
+  },
+);
 
 Paragraph.displayName = 'Paragraph';

packages/components/typography/src/SectionHeading/SectionHeading.tsx

@@ -2,19 +2,17 @@ import React from 'react';
 import tokens from '@contentful/f36-tokens';
 import { css, cx } from 'emotion';
 import type {
-  CommonProps,
-  MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
   ExpandProps,
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
-import { Text } from '../Text';
+import { Text, type TextProps } from '../Text';
 import { useDensity } from '@contentful/f36-utils';
 
 const SECTION_HEADING_DEFAULT_TAG = 'h2';
 
-export interface SectionHeadingInternalProps extends CommonProps, MarginProps {
+export interface SectionHeadingInternalProps extends Omit<TextProps, 'as'> {
   children?: React.ReactNode;
   as?: HeadingElement;
   isTruncated?: boolean;
@@ -32,19 +30,23 @@ function _SectionHeading<
     children,
     className,
     testId = 'cf-ui-section-heading',
+    as,
+    fontColor = 'gray600',
+    marginBottom = 'spacingL',
     ...otherProps
   }: SectionHeadingProps<E>,
   ref: React.Ref<any>,
 ) {
   const density = useDensity();
+  const Element: React.ElementType = as || SECTION_HEADING_DEFAULT_TAG;
 
   return (
     <Text
-      as={SECTION_HEADING_DEFAULT_TAG}
+      as={Element}
       testId={testId}
-      marginBottom="spacingL"
+      marginBottom={marginBottom}
       fontWeight="fontWeightMedium"
-      fontColor="gray600"
+      fontColor={fontColor}
       fontSize={density === 'high' ? 'fontSizeSHigh' : 'fontSizeS'}
       lineHeight={density === 'high' ? 'lineHeightSHigh' : 'lineHeightS'}
       className={cx(

packages/components/typography/src/Subheading/Subheading.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import type {
-  CommonProps,
-  MarginProps,
   PolymorphicComponent,
   PolymorphicProps,
   ExpandProps,
 } from '@contentful/f36-core';
 import type { HeadingElement } from '../Heading';
-import { Text } from '../Text';
+import { Text, type TextProps } from '../Text';
 import { useDensity } from '@contentful/f36-utils';
 
 const SUBHEADING_DEFAULT_TAG = 'h3';
 
-export interface SubheadingInternalProps extends CommonProps, MarginProps {
+export interface SubheadingInternalProps extends Omit<TextProps, 'as'> {
   children?: React.ReactNode;
   as?: HeadingElement;
   isTruncated?: boolean;
@@ -26,20 +24,26 @@ export type SubheadingProps<
 function _Subheading<
   E extends React.ElementType = typeof SUBHEADING_DEFAULT_TAG,
 >(
-  { children, testId = 'cf-ui-subheading', ...otherProps }: SubheadingProps<E>,
+  {
+    children,
+    testId = 'cf-ui-subheading',
+    as,
+    fontColor = 'gray900',
+    ...otherProps
+  }: SubheadingProps<E>,
   ref: React.Ref<any>,
 ) {
   const density = useDensity();
-
+  const Element: React.ElementType = as || SUBHEADING_DEFAULT_TAG;
   return (
     <Text
-      as={SUBHEADING_DEFAULT_TAG}
+      as={Element}
       testId={testId}
       marginBottom="spacingM"
       fontSize={density === 'high' ? 'fontSizeLHigh' : 'fontSizeL'}
       lineHeight={density === 'high' ? 'lineHeightLHigh' : 'lineHeightL'}
       fontWeight="fontWeightDemiBold"
-      fontColor="gray900"
+      fontColor={fontColor}
       {...otherProps}
       ref={ref}
     >

packages/components/typography/src/Text/Text.tsx

@@ -47,10 +47,13 @@ function wordBreakStyle() {
 }
 
 export type TextProps<E extends React.ElementType = typeof TEXT_DEFAULT_TAG> =
-  PolymorphicProps<TextInternalProps, E>;
+  PolymorphicProps<TextInternalProps, E, 'color'>;
 
 function _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(
-  {
+  props: TextProps<E>,
+  ref: React.Ref<any>,
+) {
+  const {
     fontSize = 'fontSizeM',
     fontStack = 'fontStackPrimary',
     fontWeight = 'fontWeightNormal',
@@ -64,9 +67,7 @@ function _Text<E extends React.ElementType = typeof TEXT_DEFAULT_TAG>(
     className,
     margin = 'none',
     ...otherProps
-  }: TextProps<E>,
-  ref: React.Ref<any>,
-) {
+  } = props;
   const Element: React.ElementType = as || TEXT_DEFAULT_TAG;
 
   return (
@@ -99,5 +100,6 @@ _Text.displayName = 'Text';
 
 export const Text: PolymorphicComponent<
   ExpandProps<TextInternalProps>,
-  typeof TEXT_DEFAULT_TAG
+  typeof TEXT_DEFAULT_TAG,
+  'color'
 > = React.forwardRef(_Text);