fix(checkbox,textInput): consistent name, id attributes (#564)

RedHatInsights · Feb 16, 2021 · db5491a · db5491a
1 parent 389f786
commit db5491a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/src/components/form/__tests__/__snapshots__/textInput.test.js.snap b/src/components/form/__tests__/__snapshots__/textInput.test.js.snap
@@ -5,6 +5,7 @@ exports[`TextInput Component should handle readOnly, disabled: active 1`] = `
   aria-invalid="false"
   class="pf-c-form-control curiosity-text-input "
   id="generatedid-"
+  name="generatedid-"
   type="text"
   value=""
 />
@@ -16,6 +17,7 @@ exports[`TextInput Component should handle readOnly, disabled: disabled 1`] = `
   class="pf-c-form-control curiosity-text-input "
   disabled=""
   id="generatedid-"
+  name="generatedid-"
   type="text"
   value=""
 />
@@ -26,6 +28,7 @@ exports[`TextInput Component should handle readOnly, disabled: readOnly 1`] = `
   aria-invalid="false"
   class="pf-c-form-control curiosity-text-input "
   id="generatedid-"
+  name="generatedid-"
   readonly=""
   type="text"
   value=""
@@ -37,6 +40,7 @@ exports[`TextInput Component should render a basic component: basic component 1`
   aria-invalid="false"
   class="pf-c-form-control curiosity-text-input "
   id="generatedid-"
+  name="generatedid-"
   type="text"
   value=""
 />

diff --git a/src/components/form/checkbox.js b/src/components/form/checkbox.js
@@ -11,6 +11,7 @@ import { helpers } from '../../common';
  * @param {object} props
  * @param {string} props.ariaLabel
  * @param {Node} props.children
+ * @param {string} props.id
  * @param {*} props.isChecked
  * @param {boolean} props.isDisabled
  * @param {boolean} props.isReadOnly
@@ -23,6 +24,7 @@ import { helpers } from '../../common';
 const Checkbox = ({
   ariaLabel,
   children,
+  id,
   isChecked,
   isDisabled,
   isReadOnly,
@@ -34,7 +36,8 @@ const Checkbox = ({
 }) => {
   const [check, setCheck] = React.useState();
   const updatedChecked = check ?? isChecked ?? false;
-  const nameId = name || helpers.generateId();
+  const updatedName = name || helpers.generateId();
+  const updatedId = id || updatedName;
 
   /**
    * onChange event, provide restructured event.
@@ -46,8 +49,8 @@ const Checkbox = ({
   const onCheckboxChange = (checked, event) => {
     const mockEvent = {
       ...createMockEvent(event),
-      id: nameId,
-      name: nameId,
+      id: updatedId,
+      name: updatedName,
       value,
       checked
     };
@@ -60,11 +63,11 @@ const Checkbox = ({
     <PfCheckbox
       aria-label={ariaLabel || children || label}
       checked={updatedChecked}
-      id={nameId}
+      id={updatedId}
       isChecked={updatedChecked}
       isDisabled={isDisabled || false}
       label={children || label}
-      name={nameId}
+      name={updatedName}
       onChange={onCheckboxChange}
       value={value}
       readOnly={isReadOnly || false}
@@ -76,12 +79,13 @@ const Checkbox = ({
 /**
  * Prop types.
  *
- * @type {{onChange: Function, children: Node, name: string, isChecked: *, isDisabled: boolean,
- *     isReadOnly: boolean, label: string, value: *, ariaLabel: string}}
+ * @type {{isReadOnly: boolean, onChange: Function, children: Node, name: string, id: string,
+ *     isDisabled: boolean, label: string, isChecked: boolean, value: *, ariaLabel: string}}
  */
 Checkbox.propTypes = {
   ariaLabel: PropTypes.string,
   children: PropTypes.node,
+  id: PropTypes.string,
   isChecked: PropTypes.any,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -94,12 +98,13 @@ Checkbox.propTypes = {
 /**
  * Default props.
  *
- * @type {{onChange: Function, children: Node, name: string, isChecked: *, isDisabled: boolean,
- *     isReadOnly: boolean, label: string, value: *, ariaLabel: string}}
+ * @type {{isReadOnly: boolean, onChange: Function, children: Node, name: string, id: string,
+ *     isDisabled: boolean, label: string, isChecked: boolean, value: *, ariaLabel: string}}
  */
 Checkbox.defaultProps = {
   ariaLabel: null,
   children: null,
+  id: null,
   isChecked: false,
   isDisabled: false,
   isReadOnly: false,

diff --git a/src/components/form/textInput.js b/src/components/form/textInput.js
@@ -80,10 +80,12 @@ class TextInput extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { name, updatedValue } = this.state;
+    const { updatedValue } = this.state;
     const {
       className,
+      id,
       isDisabled,
+      name,
       onChange,
       onClear,
       onKeyUp,
@@ -93,12 +95,13 @@ class TextInput extends React.Component {
       value,
       ...props
     } = this.props;
-    const nameId = name || helpers.generateId();
+    const updatedName = name || helpers.generateId();
+    const updatedId = id || updatedName;
 
     return (
       <PfTextInput
-        id={nameId}
-        name={nameId}
+        id={updatedId}
+        name={updatedName}
         className={`curiosity-text-input ${className}`}
         isDisabled={isDisabled || false}
         onChange={this.onChange}
@@ -117,11 +120,12 @@ class TextInput extends React.Component {
  * Prop types.
  *
  * @type {{onKeyUp: Function, isReadOnly: boolean, onChange: Function, onClear: Function,
- *     name: string, className: string, isDisabled: boolean, onMouseUp: Function, type: string,
- *     value: string}}
+ *     name: string, className: string, id: string, isDisabled: boolean, onMouseUp: Function,
+ *     type: string, value: string}}
  */
 TextInput.propTypes = {
   className: PropTypes.string,
+  id: PropTypes.string,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
   name: PropTypes.string,
@@ -137,11 +141,12 @@ TextInput.propTypes = {
  * Default props.
  *
  * @type {{onKeyUp: Function, isReadOnly: boolean, onChange: Function, onClear: Function,
- *     name: string, className: string, isDisabled: boolean, onMouseUp: Function, type: string,
- *     value: string}}
+ *     name: string, className: string, id: string, isDisabled: boolean, onMouseUp: Function,
+ *     type: string, value: string}}
  */
 TextInput.defaultProps = {
   className: '',
+  id: null,
   isDisabled: false,
   isReadOnly: false,
   name: null,

diff --git a/src/components/toolbar/__tests__/__snapshots__/toolbarFieldDisplayName.test.js.snap b/src/components/toolbar/__tests__/__snapshots__/toolbarFieldDisplayName.test.js.snap
@@ -56,6 +56,7 @@ exports[`ToolbarFieldDisplayName Component should render a non-connected compone
   <TextInput
     aria-label="t(curiosity-toolbar.placeholder, {\\"context\\":\\"displayName\\"})"
     className=""
+    id={null}
     isDisabled={false}
     isReadOnly={false}
     name={null}