Minor type fix for FitText and enhance examples to use sub-components.

FormidableLabs · Dec 13, 2024 · 412e5b3 · 412e5b3
1 parent 9f64d9b
commit 412e5b3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/examples/js/index.js b/examples/js/index.js
@@ -142,7 +142,7 @@ const Presentation = () => (
     <Slide>
       <Heading>This is a Heading</Heading>
       <FitText>
-        This is a <code>FitText</code> component
+        This is a <CodeSpan>FitText</CodeSpan> component
       </FitText>
       <FitText
         color="secondary"

diff --git a/examples/one-page/index.html b/examples/one-page/index.html
@@ -173,7 +173,7 @@
           </${Slide}>
           <${Slide}>
             <${Heading}>This is a Heading</${Heading}>
-            <${FitText}>This is a <code>FitText</code> component</${FitText}>
+            <${FitText}>This is a <${CodeSpan}>FitText</${CodeSpan}> component</${FitText}>
             <${FitText} color="secondary" style=${{
           textTransform: 'uppercase',
           fontFamily: 'Comic Sans MS'

diff --git a/examples/typescript/index.tsx b/examples/typescript/index.tsx
@@ -141,7 +141,7 @@ const Presentation = () => (
     <Slide>
       <Heading>This is a Heading</Heading>
       <FitText>
-        This is a <code>FitText</code> component
+        This is a <CodeSpan>FitText</CodeSpan> component
       </FitText>
       <FitText
         color="secondary"

diff --git a/packages/spectacle/src/components/typography.tsx b/packages/spectacle/src/components/typography.tsx
@@ -10,7 +10,14 @@ import {
   SpaceProps,
   BorderProps
 } from 'styled-system';
-import { FC, PropsWithChildren, RefAttributes, useRef, useState } from 'react';
+import {
+  FC,
+  PropsWithChildren,
+  RefAttributes,
+  useRef,
+  useState,
+  HTMLAttributes
+} from 'react';
 import useResizeObserver from 'use-resize-observer';
 
 const decoration = system({ textDecoration: true });
@@ -134,7 +141,9 @@ ScalableText.defaultProps = {
   scale: 1
 };
 
-const FitText: FC<PropsWithChildren<CommonTypographyProps>> = (props) => {
+const FitText: FC<
+  PropsWithChildren<CommonTypographyProps & HTMLAttributes<HTMLDivElement>>
+> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const textRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);