fix: CE-1073 and CE-1074 Proper Focus and Validation for Input Groups…

… with bonus typo fixes (#628)
bcgov · Sep 13, 2024 · 4abcce5 · 4abcce5
1 parent c3eedad
commit 4abcce5
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/app/components/common/comp-input.tsx b/frontend/src/app/components/common/comp-input.tsx
@@ -119,7 +119,7 @@ export const CompInput: FC<Props> = ({
         <div className={prefix && "input-group"}>
           {prefix && (
             <span
-              className={`input-group-text ${prefix.prefixClassName}`}
+              className={`input-group-text ${prefix.prefixClassName} ${error ? "error-border" : ""}`}
               id={id}
             >
               {prefix.value}

diff --git a/.../containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx b/.../containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome-form.tsx
@@ -134,7 +134,7 @@ export const AuthoizationOutcomeForm: FC<props> = ({ id, type, value, leadIdenti
           className="comp-details-form-row"
           id="authroization-authroized-site-id"
         >
-          <label htmlFor="outcome-authroization-authroized-site">Authorized ID</label>
+          <label htmlFor="outcome-authroization-authroized-site">Authorization ID</label>
           <div className="comp-details-input full-width">
             <CompInput
               id="outcome-authroization-authroized-site"
@@ -158,7 +158,7 @@ export const AuthoizationOutcomeForm: FC<props> = ({ id, type, value, leadIdenti
           className="comp-details-form-row"
           id="authroization-unauthroized-site-id"
         >
-          <label htmlFor="outcome-authroization-unauthroized-site">Unuthorized site ID</label>
+          <label htmlFor="outcome-authroization-unauthroized-site">Unauthorized site ID</label>
           <div className="comp-details-input full-width">
             <CompInput
               id="outcome-authroization-unauthroized-site"

diff --git a/...nents/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx b/...nents/containers/complaints/outcomes/ceeb/authorization-outcome/authorization-outcome.tsx
@@ -49,7 +49,7 @@ export const AuthoizationOutcome: FC = () => {
         data: {
           title: "Delete Authorization?",
           description: "Your changes will be lost.",
-          confirmText: "delete authroization",
+          confirmText: "delete authorization",
           deleteConfirmed: () => {
             dispatch(deleteAuthorizationOutcome()).then(async (response) => {
               if (response === "success") {

diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
@@ -902,3 +902,20 @@ td.actions-col {
 .comp-tab-inactive {
   color: $bc-gov-shade-300;
 }
+
+.input-group:focus-within {
+  border: 1px solid #90b6f8 !important;
+  border-radius: 0.375rem;
+  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
+  .input-group-text {
+    border: none !important;
+  }
+  .form-control {
+    border: none !important;
+  }
+}
+
+.input-group .form-control:focus-visible {
+  box-shadow: none !important;
+  border-left: none !important;
+}