feat: add typings for <Button> (#3080)

* feat: add typings for <Button> * chore: bump @types/react and @types/react-dom * feat: re-export bootstrap helpers as ComponentWithAsProp, BsPropsWithAs
openedx · Aug 5, 2024 · 3f69e2e · 3f69e2e
1 parent 14c3b79
commit 3f69e2e
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 95 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Button/ButtonGroup.test.jsx b/src/Button/ButtonGroup.test.jsx
diff --git a/src/Button/ButtonToolbar.test.jsx b/src/Button/ButtonToolbar.test.jsx
diff --git a/src/Button/__snapshots__/Button.test.tsx.snap b/src/Button/__snapshots__/Button.test.tsx.snap
@@ -84,13 +84,13 @@ exports[`<Button /> correct rendering renders with props iconAfter and size 1`]
 
 exports[`<Button /> correct rendering renders with props iconAfter and size 1`] = `
 <button
-  className="btn btn-primary btn-md"
+  className="btn btn-primary btn-sm"
   disabled={false}
   type="button"
 >
   Button
   <span
-    className="pgn__icon pgn__icon__md btn-icon-after"
+    className="pgn__icon pgn__icon__sm btn-icon-after"
   >
     <svg
       aria-hidden={true}

diff --git a/src/Button/__snapshots__/ButtonGroup.test.jsx.snap b/src/Button/__snapshots__/ButtonGroup.test.jsx.snap
diff --git a/src/Button/__snapshots__/ButtonToolbar.test.jsx.snap b/src/Button/__snapshots__/ButtonToolbar.test.jsx.snap
diff --git a/src/Icon/index.d.ts b/src/Icon/index.d.ts
@@ -1,13 +1,15 @@
 import React from 'react';
 
 export interface IconProps extends React.ComponentPropsWithoutRef<'span'> {
-  src?: React.ReactElement | Function;
+  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like "div",
+  // but we only want to allow components like 'Add' (a specific icon component function/class)
+  src?: React.ComponentType;
   svgAttrs?: {
     'aria-label'?: string;
     'aria-labelledby'?: string;
   };
   id?: string | null;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'inline';
   className?: string | string[];
   hidden?: boolean;
   screenReaderText?: React.ReactNode;