[PM-9629] Custom Fields V2 View Section Defects (#10103)

* Updates to Custom Fields V2 View
bitwarden · Jul 18, 2024 · 150b9ef · 150b9ef
1 parent c27657e
commit 150b9ef
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@@ -4,36 +4,36 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
   </bit-section-header>
   <bit-card>
     <div
-      class="tw-mb-4 tw-border-secondary-300 tw-bg-background"
+      class="tw-border-secondary-300"
       *ngFor="let field of fields; let last = last"
-      [ngClass]="{ 'tw-border-0 tw-border-b tw-border-solid tw-pb-2 tw-mb-4': !last }"
+      [ngClass]="{ 'tw-mb-4': !last }"
     >
       <ng-container *ngIf="field.type === fieldType.Text">
         <label class="tw-text-xs tw-text-muted tw-select-none">
           {{ field.name }}
         </label>
-        <div class="tw-flex tw-justify-between">
+        <bit-form-field>
           <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.value"
             showToast
             [appA11yTitle]="'copyValue' | i18n"
           ></button>
-        </div>
+        </bit-form-field>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Hidden">
         <label class="tw-text-xs tw-text-muted tw-select-none">
           {{ field.name }}
         </label>
         <bit-form-field>
           <input readonly bitInput type="password" [value]="field.value" aria-readonly="true" />
-          <button type="button" bitIconButton bitPasswordInputToggle></button>
+          <button bitSuffix type="button" bitIconButton bitPasswordInputToggle></button>
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.value"
             showToast
@@ -42,18 +42,22 @@ <h2 bitTypography="h6">{{ "customFields" | i18n }}</h2>
         </bit-form-field>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Boolean">
-        <div class="tw-flex tw-my-2">
-          <input type="checkbox" [value]="field.value" readonly aria-readonly="true" />
-          <h5 class="tw-ml-3">
-            {{ field.name }}
-          </h5>
-        </div>
+        <bit-form-control>
+          <input
+            bitCheckbox
+            type="checkbox"
+            [checked]="field.value"
+            aria-readonly="true"
+            disabled
+          />
+          <bit-label> {{ field.name }} </bit-label>
+        </bit-form-control>
       </ng-container>
       <ng-container *ngIf="field.type === fieldType.Linked">
         <label class="tw-text-xs tw-text-muted tw-select-none">
           {{ "linked" | i18n }}: {{ field.name }}
         </label>
-        <div class="tw-flex tw-justify-between">
+        <bit-form-field>
           <input
             readonly
             bitInput
@@ -63,13 +67,13 @@ <h5 class="tw-ml-3">
           />
           <button
             bitIconButton="bwi-clone"
-            size="small"
+            bitSuffix
             type="button"
             [appCopyClick]="field.name"
             showToast
             [appA11yTitle]="'copyValue' | i18n"
           ></button>
-        </div>
+        </bit-form-field>
       </ng-container>
     </div>
   </bit-card>

diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.ts
@@ -13,6 +13,7 @@ import {
   SectionComponent,
   SectionHeaderComponent,
   TypographyModule,
+  CheckboxModule,
 } from "@bitwarden/components";
 
 @Component({
@@ -29,6 +30,7 @@ import {
     SectionComponent,
     SectionHeaderComponent,
     TypographyModule,
+    CheckboxModule,
   ],
 })
 export class CustomFieldV2Component {