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

* Updates to Custom Fields V2 View
This commit is contained in:
Jason Ng 2024-07-18 18:56:02 -04:00 committed by GitHub
parent c27657eb82
commit 150b9ef29c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 16 deletions

View File

@ -4,25 +4,25 @@
</bit-section-header> </bit-section-header>
<bit-card> <bit-card>
<div <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" *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"> <ng-container *ngIf="field.type === fieldType.Text">
<label class="tw-text-xs tw-text-muted tw-select-none"> <label class="tw-text-xs tw-text-muted tw-select-none">
{{ field.name }} {{ field.name }}
</label> </label>
<div class="tw-flex tw-justify-between"> <bit-form-field>
<input readonly bitInput type="text" [value]="field.value" aria-readonly="true" /> <input readonly bitInput type="text" [value]="field.value" aria-readonly="true" />
<button <button
bitIconButton="bwi-clone" bitIconButton="bwi-clone"
size="small" bitSuffix
type="button" type="button"
[appCopyClick]="field.value" [appCopyClick]="field.value"
showToast showToast
[appA11yTitle]="'copyValue' | i18n" [appA11yTitle]="'copyValue' | i18n"
></button> ></button>
</div> </bit-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="field.type === fieldType.Hidden"> <ng-container *ngIf="field.type === fieldType.Hidden">
<label class="tw-text-xs tw-text-muted tw-select-none"> <label class="tw-text-xs tw-text-muted tw-select-none">
@ -30,10 +30,10 @@
</label> </label>
<bit-form-field> <bit-form-field>
<input readonly bitInput type="password" [value]="field.value" aria-readonly="true" /> <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 <button
bitIconButton="bwi-clone" bitIconButton="bwi-clone"
size="small" bitSuffix
type="button" type="button"
[appCopyClick]="field.value" [appCopyClick]="field.value"
showToast showToast
@ -42,18 +42,22 @@
</bit-form-field> </bit-form-field>
</ng-container> </ng-container>
<ng-container *ngIf="field.type === fieldType.Boolean"> <ng-container *ngIf="field.type === fieldType.Boolean">
<div class="tw-flex tw-my-2"> <bit-form-control>
<input type="checkbox" [value]="field.value" readonly aria-readonly="true" /> <input
<h5 class="tw-ml-3"> bitCheckbox
{{ field.name }} type="checkbox"
</h5> [checked]="field.value"
</div> aria-readonly="true"
disabled
/>
<bit-label> {{ field.name }} </bit-label>
</bit-form-control>
</ng-container> </ng-container>
<ng-container *ngIf="field.type === fieldType.Linked"> <ng-container *ngIf="field.type === fieldType.Linked">
<label class="tw-text-xs tw-text-muted tw-select-none"> <label class="tw-text-xs tw-text-muted tw-select-none">
{{ "linked" | i18n }}: {{ field.name }} {{ "linked" | i18n }}: {{ field.name }}
</label> </label>
<div class="tw-flex tw-justify-between"> <bit-form-field>
<input <input
readonly readonly
bitInput bitInput
@ -63,13 +67,13 @@
/> />
<button <button
bitIconButton="bwi-clone" bitIconButton="bwi-clone"
size="small" bitSuffix
type="button" type="button"
[appCopyClick]="field.name" [appCopyClick]="field.name"
showToast showToast
[appA11yTitle]="'copyValue' | i18n" [appA11yTitle]="'copyValue' | i18n"
></button> ></button>
</div> </bit-form-field>
</ng-container> </ng-container>
</div> </div>
</bit-card> </bit-card>

View File

@ -13,6 +13,7 @@ import {
SectionComponent, SectionComponent,
SectionHeaderComponent, SectionHeaderComponent,
TypographyModule, TypographyModule,
CheckboxModule,
} from "@bitwarden/components"; } from "@bitwarden/components";
@Component({ @Component({
@ -29,6 +30,7 @@ import {
SectionComponent, SectionComponent,
SectionHeaderComponent, SectionHeaderComponent,
TypographyModule, TypographyModule,
CheckboxModule,
], ],
}) })
export class CustomFieldV2Component { export class CustomFieldV2Component {