diff --git a/src/elements/forms/text-field.jsx b/src/elements/forms/text-field.jsx index e8cfc965..8e83d4bd 100644 --- a/src/elements/forms/text-field.jsx +++ b/src/elements/forms/text-field.jsx @@ -9,7 +9,7 @@ import Control from './control' import Addon from './addon' import styles from './text-field.css' -import { classNames, generateId } from 'utils' +import { classNames } from 'utils' /** * Unique ID generator @@ -44,7 +44,7 @@ const TextField = React.forwardRef( ( { children, - id = generateId(), + id, className, label, helper, @@ -117,10 +117,8 @@ TextField.propTypes = { /** * An ID that will be used to link input and label. It's necessary for * accessibility. - * - * If not passed, it will be generated automatically using a random string. */ - id: PropTypes.string, + id: PropTypes.string.isRequired, /** * Helper message to show bellow the input */ diff --git a/src/modules/select/select.jsx b/src/modules/select/select.jsx index 7e38cb8e..f2bf8321 100644 --- a/src/modules/select/select.jsx +++ b/src/modules/select/select.jsx @@ -5,10 +5,11 @@ import { useInput, useOptions } from './hooks' import styles from './select.css' import { Form, Icon, Button } from 'elements' -import { classNames, generateId } from 'utils' +import { classNames } from 'utils' const Select = React.memo( ({ + id, value, onInput, onChange, @@ -21,7 +22,6 @@ const Select = React.memo( clearButton = true, clearOnFocus = false, tag: Tag = 'div', - id = generateId(), ...restInputProps }) => { // custom select hooks @@ -150,6 +150,11 @@ const Select = React.memo( ) Select.propTypes = { + /** + * An ID that will be used to link input and label. It's necessary for + * accessibility. + */ + id: PropTypes.string.isRequired, /* Label to show in input */ label: PropTypes.string.isRequired, /* The current value shown in input field */ diff --git a/src/modules/select/select.md b/src/modules/select/select.md index 6fe6da83..7c486719 100644 --- a/src/modules/select/select.md +++ b/src/modules/select/select.md @@ -16,7 +16,7 @@ const SelectExample = () => { const [suggestions, setSuggestions] = React.useState(options) - const [value, setValue] = React.useState('Default option') + const [value, setValue] = React.useState('') const handleOnChange = (data) => { // trigger search here @@ -36,7 +36,6 @@ id="select-1" value={value} label="Search" - variant="pure" onChange={handleOnChange} onInput={handleOnInput} placeholder="e.g. article title or author name" diff --git a/src/utils/index.js b/src/utils/index.js index 122dc416..0e099608 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,2 +1 @@ export * as classNames from './class-names' -export generateId from './unique-id' diff --git a/src/utils/unique-id.js b/src/utils/unique-id.js deleted file mode 100644 index 7c62635b..00000000 --- a/src/utils/unique-id.js +++ /dev/null @@ -1,3 +0,0 @@ -const generateId = () => Math.random().toString(36).substr(2, 9) - -export default generateId