chore(react-components): add default "id" generation for TextField an…

…d TextareaField

packages/react-components/src/TextField/__snapshots__/text_field.test.tsx.snap

@@ -74,6 +74,7 @@ exports[`<TextField /> TextField render sizes size "large" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -155,6 +156,7 @@ exports[`<TextField /> TextField render sizes size "medium" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -236,6 +238,7 @@ exports[`<TextField /> TextField render sizes size "small" 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -318,6 +321,7 @@ exports[`<TextField /> TextField render variants should be disabled 1`] = `
     <input
       class="emotion-0"
       disabled=""
+      id="test-id"
       type="text"
       value=""
     />
@@ -401,6 +405,7 @@ exports[`<TextField /> TextField render variants should have className 1`] = `
   >
     <input
       class="input-cls emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -482,6 +487,7 @@ exports[`<TextField /> TextField render variants should have defaultValue 1`] =
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value="test-value"
     />
@@ -574,6 +580,7 @@ exports[`<TextField /> TextField render variants should have error alert 1`] = `
     <input
       aria-invalid="true"
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />
@@ -586,88 +593,6 @@ exports[`<TextField /> TextField render variants should have error alert 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<TextField /> TextField render variants should have id 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  padding: 0 var(--pv-size-base-2);
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  height: var(--pv-size-base-7);
-  color: var(--pv-color-black);
-  border-color: var(--pv-color-gray-8);
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0:disabled {
-  cursor: not-allowed;
-  background-color: var(--pv-color-gray-1);
-  border-color: var(--pv-color-gray-5);
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-0:not(:disabled)[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:not(:disabled):focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-<div>
-    <input
-      class="emotion-0"
-      id="test-id"
-      type="text"
-      value=""
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<TextField /> TextField render variants should have label 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -756,6 +681,8 @@ exports[`<TextField /> TextField render variants should have label 1`] = `
 <div>
     <label
       class="emotion-0"
+      for="test-id"
+      id="test-id-label"
     >
       <span
         class="emotion-1"
@@ -765,6 +692,7 @@ exports[`<TextField /> TextField render variants should have label 1`] = `
     </label>
     <input
       class="emotion-2"
+      id="test-id"
       type="text"
       value=""
     />
@@ -846,6 +774,7 @@ exports[`<TextField /> TextField render variants should have name attr 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       name="test-name"
       type="text"
       value=""
@@ -928,6 +857,7 @@ exports[`<TextField /> TextField render variants should have placeholder 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       placeholder="test-placeholder"
       type="text"
       value=""
@@ -1010,6 +940,7 @@ exports[`<TextField /> TextField render variants should have required 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       required=""
       type="text"
       value=""
@@ -1018,89 +949,6 @@ exports[`<TextField /> TextField render variants should have required 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<TextField /> TextField render variants should have test id 1`] = `
-<DocumentFragment>
-  .emotion-0 {
-  margin: 0;
-  color: var(--pv-color-black);
-  font-weight: var(--pv-text-b3-weight);
-  font-size: var(--pv-text-b3-size);
-  line-height: var(--pv-text-b3-height);
-  letter-spacing: var(--pv-text-b3-spacing);
-  font-family: inherit;
-  outline: none;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: 4px;
-  padding: 0 var(--pv-size-base-2);
-  background-color: var(--pv-color-gray-1);
-  border-style: solid;
-  border-width: 1px;
-  -webkit-transition: background-color 200ms,color 200ms,border-color 200ms;
-  transition: background-color 200ms,color 200ms,border-color 200ms;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  height: var(--pv-size-base-7);
-  color: var(--pv-color-black);
-  border-color: var(--pv-color-gray-8);
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::-moz-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0::placeholder {
-  color: var(--pv-color-gray-9);
-}
-
-.emotion-0:hover {
-  background-color: var(--pv-color-gray-3);
-  border-color: var(--pv-color-gray-7);
-}
-
-.emotion-0:disabled {
-  cursor: not-allowed;
-  background-color: var(--pv-color-gray-1);
-  border-color: var(--pv-color-gray-5);
-  color: var(--pv-color-gray-7);
-}
-
-.emotion-0:not(:disabled)[aria-invalid] {
-  background-color: var(--pv-color-wrong-tint-5);
-  border-color: var(--pv-color-wrong-tint-3);
-}
-
-.emotion-0:not(:disabled):focus-visible {
-  background-color: var(--pv-color-secondary-tint-5);
-  border-color: var(--pv-color-secondary-tint-3);
-}
-
-<div
-    data-testid="test-id"
-  >
-    <input
-      class="emotion-0"
-      type="text"
-      value=""
-    />
-  </div>
-</DocumentFragment>
-`;
-
 exports[`<TextField /> TextField render variants should have value 1`] = `
 <DocumentFragment>
   .emotion-0 {
@@ -1175,6 +1023,7 @@ exports[`<TextField /> TextField render variants should have value 1`] = `
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value="test-value"
     />
@@ -1256,6 +1105,7 @@ exports[`<TextField /> TextField render variants should render as default 1`] =
 <div>
     <input
       class="emotion-0"
+      id="test-id"
       type="text"
       value=""
     />

packages/react-components/src/TextField/text_field.stories.tsx

@@ -27,30 +27,25 @@ export const FormExample = () => (
       defaultValue="Hello World"
       required
       label="Required"
-      id="TextField-required"
     />
     <TextField
       defaultValue="Hello World"
       type="password"
       label="Password"
-      id="TextField-password"
     />
     <TextField
       type="number"
       label="Number"
-      id="TextField-number"
     />
     <TextField
       defaultValue="Hello World"
       readOnly
       label="Read Only"
-      id="TextField-readOnly"
     />
     <TextField
       defaultValue="Hello World"
       disabled
       label="Disabled"
-      id="TextField-disabled"
     />
   </>
 );