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;