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

Author: ryan-roemer

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"

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'

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"

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);