My Account 2.0 QA round 4

__test__/pages/bib/bibPage.test.tsx

@@ -314,7 +314,9 @@ describe("Bib Page Item Table", () => {
     )
     await userEvent.click(screen.getByText("View all 26 items").closest("a"))
     expect(
-      screen.getByText("Loading all 26 items. This may take a few moments...")
+      screen.queryAllByText(
+        "Loading all 26 items. This may take a few moments..."
+      )[0]
     ).toBeInTheDocument()
   })
 

package.json

@@ -16,7 +16,7 @@
     "coverage": "jest --coverage"
   },
   "dependencies": {
-    "@nypl/design-system-react-components": "3.4.0",
+    "@nypl/design-system-react-components": "3.5.1",
     "@nypl/nypl-data-api-client": "1.0.5",
     "@nypl/pickup-time-estimator": "^1.5.2",
     "@nypl/sierra-wrapper": "1.1.0",

src/components/MyAccount/Settings/PasswordForm.tsx

@@ -56,6 +56,7 @@ const PasswordFormField = forwardRef<TextInputRefType, PasswordFormFieldProps>(
           onChange={handler}
           invalidText="Pin/passwords do not match."
           isInvalid={isInvalid}
+          isClearable
         />
       </Flex>
     )

src/components/MyAccount/Settings/SettingsInputForm.tsx

@@ -90,9 +90,9 @@ const SettingsInputForm = ({
     updatedInputs[index] = value
     setTempInputs(updatedInputs)
 
-    const firstInputEmpty = index === 0
+    const firstInput = index === 0
 
-    if (firstInputEmpty && (!value || !validateInput(value, updatedInputs))) {
+    if (firstInput && (!value || !validateInput(value, updatedInputs))) {
       setError(true)
     } else {
       const hasInvalidInput = updatedInputs.some(
@@ -127,6 +127,13 @@ const SettingsInputForm = ({
     setError(hasInvalidInput)
   }
 
+  const handleClearableCallback = (index) => {
+    const updatedInputs = [...tempInputs]
+    updatedInputs[index] = ""
+    setTempInputs(updatedInputs)
+    setError(true)
+  }
+
   const cancelEditing = () => {
     setTempInputs([...inputs])
     setIsEditing(false)
@@ -224,6 +231,8 @@ const SettingsInputForm = ({
                     invalidText={formUtils.errorMessage}
                     onChange={(e) => handleInputChange(e, index)}
                     isRequired
+                    isClearable
+                    isClearableCallback={() => handleClearableCallback(index)}
                   />
                   {index == 0 && <div style={{ width: "57px" }}> </div>}
                   {index !== 0 && (

src/components/MyAccount/Settings/SettingsSelectForm.tsx

@@ -232,6 +232,7 @@ const SettingsSelectForm = ({
                   sx={{
                     width: { base: "80%", sm: "320px" },
                     marginLeft: { base: "m", lg: "unset" },
+                    marginTop: "-xxs",
                   }}
                   content="Please set a phone number or email address to choose a notification preference."
                 />

src/components/MyAccount/Settings/UsernameForm.tsx

@@ -129,6 +129,8 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
           isInvalid={error && !validateUsername(tempUsername)}
           showHelperInvalidText={true}
           onChange={handleInputChange}
+          isClearable
+          isClearableCallback={() => setError(true)}
         />
         <Button
           aria-label="Delete username from your account"