fix: minor type issues in docs/examples/IconButton/utils (#3313)

* docs: fix many small type issues in the docs

* fix: missing 'value' prop for <IconButton>

* fix: small type error in propTypes utils requiredWhen()

src/DataTable/README.md

@@ -253,7 +253,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {
@@ -845,7 +845,7 @@ a responsive grid of cards.
     </Component>
   );
 
-  const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+  const ClearAction = ({ as: Component, tableInstance }) => (
     <Component
       variant="danger"
       onClick={() => {

src/Dropdown/README.md

@@ -145,7 +145,7 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
 ```jsx live
 <Dropdown.Deprecated>
   <Dropdown.Deprecated.Button>
-    <Icon className="fa fa-user pr-3" alt="" />
+    <Icon className="fa fa-user pr-3" />
     Search Engines
   </Dropdown.Deprecated.Button>
   <Dropdown.Deprecated.Menu>

src/Dropzone/README.md

@@ -240,7 +240,7 @@ This example validates that only `400x479` images can be uploaded.
   async function imageDimensionValidator(file) {
     const image = new window.Image();
     try {
-      url = URL.createObjectURL(file);
+      const url = URL.createObjectURL(file);
       image.src = url;
       await image.decode();
       if (image.width !== 400 || image.height !== 479) {

src/Form/form-control.mdx

@@ -49,7 +49,9 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 () => {
   {/* start example state */}
   const [type, setType] = useState('default');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputs = {
     default: (
@@ -144,8 +146,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
       </Form.Group>
     </>),
   };
-  const [value, setValue] = useState('');
-  const handleChange = (e) => setValue(e.target.value);
   return (
     <>
       {/* start example form block */}
@@ -172,7 +172,9 @@ See [react-imask](https://imask.js.org) for documentation on available props.
 () => {
   {/* start example state */}
   const [maskType, setMaskType] = useState('phone');
+  const [value, setValue] = useState('');
   {/* end example state */}
+  const handleChange = (e) => setValue(e.target.value);
 
   const inputsWithMask = {
     phone: (
@@ -255,10 +257,6 @@ See [react-imask](https://imask.js.org) for documentation on available props.
     ),
   };
 
-  const [value, setValue] = useState('');
-
-  const handleChange = (e) => setValue(e.target.value);
-
   return (
     <>
       {/* start example form block */}

src/IconButton/index.tsx

@@ -36,6 +36,8 @@ interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
   /** size of button to render */
   size?: 'sm' | 'md' | 'inline';
+  /** Used with `IconButtonToggle` */
+  value?: string;
   /** no children */
   children?: never;
 }
@@ -104,6 +106,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  value: undefined,
   children: undefined,
 };
 
@@ -140,6 +143,8 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'inline']),
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive: PropTypes.bool,
+  /** Used with <IconButtonToggle> */
+  value: PropTypes.string,
 };
 
 interface PropsWithTooltip extends Props {

src/InputSelect/README.md

@@ -90,14 +90,13 @@ notes: |
   label="Favorite Color"
   options={['', 'red', 'orange', 'yellow', 'green', 'blue', 'purple']}
   validator={value => {
-    let feedback = { isValid: true };
     if (!value) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Please make a selection.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

src/InputText/README.md

@@ -33,14 +33,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```
@@ -53,15 +52,14 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
         dangerIconDescription: 'Error',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
   themes={['danger']}
 />

src/ListBox/README.md

@@ -105,7 +105,7 @@ class ListBoxWrapperForOnSelect extends React.Component {
             <span className="sr-only">none</span>
           ) : (
             <span
-              arialabelledby={`list-box-option-${
+              aria-labelledby={`list-box-option-${
                 this.state.selectedOptionIndex
               }`}
             >

src/Modal/standard-modal.mdx

@@ -31,7 +31,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
         footerNode={(
           <ActionRow>
             <p className="small">
-              <Hyperlink href="#">Get help</Hyperlink>
+              <Hyperlink destination="#">Get help</Hyperlink>
             </p>
             <ActionRow.Spacer />
             <Button variant="tertiary" onClick={close}>Cancel</Button>

src/TextArea/README.md

@@ -40,14 +40,13 @@ notes: |
   label="Username"
   description="The unique name that identifies you throughout the site."
   validator={value => {
-    let feedback = { isValid: true };
     if (value.length < 3) {
-      feedback = {
+      return {
         isValid: false,
         validationMessage: 'Username must be at least 3 characters in length.',
       };
     }
-    return feedback;
+    return { isValid: true };
   }}
 />
 ```

src/utils/propTypes/utils.js

@@ -36,7 +36,7 @@ export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
  * @param {func} propType - target PropType
- * @param {string} otherPropName - string name for prop that, if true, marks the
+ * @param {string | string[]} otherPropName - string name for prop that, if true, marks the
  *   associated prop as required
  * @return {func} - PropType based on propType that is required if otherPropName is
  *   set to true.

www/src/components/exampleComponents/HipsterIpsum.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 /**
  * Randomly shuffle an array
@@ -48,18 +47,17 @@ const shortParagraphs = [
   'Pinterest tote bag synth, tattooed echo park cronut flannel kombucha kickstarter viral.',
 ];
 
-export type HipsterIpsumType = {
-  numParagraphs: number,
-  numShortParagraphs: number,
-};
+export type HipsterIpsumType = { numParagraphs?: number; numShortParagraphs?: number; };
 
-const getHipsterIpsumContent = (allParagraphs: Array<string>, numParagraphs: number) => allParagraphs
-  .slice(0, numParagraphs)
-  .map(text => <p key={text}>{text}</p>);
+const getHipsterIpsumContent = (allParagraphs: Array<string>, numParagraphs: number) => (
+  <>
+    {allParagraphs.slice(0, numParagraphs).map(text => <p key={text}>{text}</p>)}
+  </>
+);
 
 export type HipsterIpsumContentType = {
   shortParagraphsInContent: string[],
-  numShortParagraphs: number,
+  numShortParagraphs?: number,
   paragraphsInContent: string[],
   numParagraphs: number,
 };
@@ -79,26 +77,17 @@ const useHipsterIpsumContent = ({
   return getHipsterIpsumContent(shuffledParagraphs, numParagraphs);
 };
 
-function HipsterIpsum({
-  numParagraphs,
+const HipsterIpsum: React.FC<HipsterIpsumType> = ({
+  numParagraphs = 2,
   numShortParagraphs,
-}: HipsterIpsumType) {
+}) => {
   const content = useHipsterIpsumContent({
     shortParagraphsInContent: shortParagraphs,
     numShortParagraphs,
     paragraphsInContent: paragraphs,
     numParagraphs,
   });
   return content;
-}
-
-HipsterIpsum.propTypes = {
-  numParagraphs: PropTypes.number,
-  numShortParagraphs: PropTypes.number,
-};
-HipsterIpsum.defaultProps = {
-  numParagraphs: 2,
-  numShortParagraphs: undefined,
 };
 
 export default HipsterIpsum;