diff --git a/src/DataTable/README.md b/src/DataTable/README.md
index bfa6e99018..e3f3cd991a 100644
--- a/src/DataTable/README.md
+++ b/src/DataTable/README.md
@@ -253,7 +253,7 @@ To enable proper selection behavior with backend pagination (i.e., when ``isSele
);
- const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+ const ClearAction = ({ as: Component, tableInstance }) => (
{
@@ -845,7 +845,7 @@ a responsive grid of cards.
);
- const ClearAction = ({ as: Component, tableInstance, ...rest }) => (
+ const ClearAction = ({ as: Component, tableInstance }) => (
{
diff --git a/src/Dropdown/README.md b/src/Dropdown/README.md
index 2968939888..f332c7a283 100644
--- a/src/Dropdown/README.md
+++ b/src/Dropdown/README.md
@@ -145,7 +145,7 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
```jsx live
-
+
Search Engines
diff --git a/src/Dropzone/README.md b/src/Dropzone/README.md
index 04f4d3bb06..c0b1acb542 100644
--- a/src/Dropzone/README.md
+++ b/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) {
diff --git a/src/Form/form-control.mdx b/src/Form/form-control.mdx
index 47c4d8b7a2..feddd43cbb 100644
--- a/src/Form/form-control.mdx
+++ b/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
>),
};
- 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 */}
diff --git a/src/IconButton/index.tsx b/src/IconButton/index.tsx
index 5cc805c8a2..8868c3f044 100644
--- a/src/IconButton/index.tsx
+++ b/src/IconButton/index.tsx
@@ -36,6 +36,8 @@ interface Props extends React.HTMLAttributes {
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 */
+ value: PropTypes.string,
};
interface PropsWithTooltip extends Props {
diff --git a/src/InputSelect/README.md b/src/InputSelect/README.md
index 1e2f60706f..fa3fd33d77 100644
--- a/src/InputSelect/README.md
+++ b/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 };
}}
/>
```
diff --git a/src/InputText/README.md b/src/InputText/README.md
index 1d917cb980..fce8bfeeb3 100644
--- a/src/InputText/README.md
+++ b/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']}
/>
diff --git a/src/ListBox/README.md b/src/ListBox/README.md
index b65b121db6..0b81df5ac7 100644
--- a/src/ListBox/README.md
+++ b/src/ListBox/README.md
@@ -105,7 +105,7 @@ class ListBoxWrapperForOnSelect extends React.Component {
none
) : (
diff --git a/src/Modal/standard-modal.mdx b/src/Modal/standard-modal.mdx
index 3f9ef69360..03572bd5b9 100644
--- a/src/Modal/standard-modal.mdx
+++ b/src/Modal/standard-modal.mdx
@@ -31,7 +31,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
footerNode={(
- Get help
+ Get help
diff --git a/src/TextArea/README.md b/src/TextArea/README.md
index e8fcb671ee..2307cddcfc 100644
--- a/src/TextArea/README.md
+++ b/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 };
}}
/>
```
diff --git a/src/utils/propTypes/utils.js b/src/utils/propTypes/utils.js
index f6a9f262ad..bcd7a5a294 100644
--- a/src/utils/propTypes/utils.js
+++ b/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.
diff --git a/www/src/components/exampleComponents/HipsterIpsum.tsx b/www/src/components/exampleComponents/HipsterIpsum.tsx
index 184df88ca7..6847c8788a 100644
--- a/www/src/components/exampleComponents/HipsterIpsum.tsx
+++ b/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, numParagraphs: number) => allParagraphs
- .slice(0, numParagraphs)
- .map(text => {text}
);
+const getHipsterIpsumContent = (allParagraphs: Array, numParagraphs: number) => (
+ <>
+ {allParagraphs.slice(0, numParagraphs).map(text => {text}
)}
+ >
+);
export type HipsterIpsumContentType = {
shortParagraphsInContent: string[],
- numShortParagraphs: number,
+ numShortParagraphs?: number,
paragraphsInContent: string[],
numParagraphs: number,
};
@@ -79,10 +77,10 @@ const useHipsterIpsumContent = ({
return getHipsterIpsumContent(shuffledParagraphs, numParagraphs);
};
-function HipsterIpsum({
- numParagraphs,
+const HipsterIpsum: React.FC = ({
+ numParagraphs = 2,
numShortParagraphs,
-}: HipsterIpsumType) {
+}) => {
const content = useHipsterIpsumContent({
shortParagraphsInContent: shortParagraphs,
numShortParagraphs,
@@ -90,15 +88,6 @@ function HipsterIpsum({
numParagraphs,
});
return content;
-}
-
-HipsterIpsum.propTypes = {
- numParagraphs: PropTypes.number,
- numShortParagraphs: PropTypes.number,
-};
-HipsterIpsum.defaultProps = {
- numParagraphs: 2,
- numShortParagraphs: undefined,
};
export default HipsterIpsum;