[PS-960] Fix form input group suffix not working (#2947)
* Fix form suffix not working without prefix * Use tailwind first/last to avoid hacky components
This commit is contained in:
parent
fcdf36a01c
commit
6e9b6f25a1
|
@ -7,7 +7,7 @@
|
||||||
<ng-content select="[bitPrefix]"></ng-content>
|
<ng-content select="[bitPrefix]"></ng-content>
|
||||||
</div>
|
</div>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
<div *ngIf="prefixChildren.length" class="tw-flex">
|
<div *ngIf="suffixChildren.length" class="tw-flex">
|
||||||
<ng-content select="[bitSuffix]"></ng-content>
|
<ng-content select="[bitSuffix]"></ng-content>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -31,17 +31,6 @@ export class BitFormFieldComponent implements AfterContentChecked {
|
||||||
@ContentChildren(BitSuffixDirective) suffixChildren: QueryList<BitSuffixDirective>;
|
@ContentChildren(BitSuffixDirective) suffixChildren: QueryList<BitSuffixDirective>;
|
||||||
|
|
||||||
ngAfterContentChecked(): void {
|
ngAfterContentChecked(): void {
|
||||||
this.input.hasPrefix = this.prefixChildren.length > 0;
|
|
||||||
this.input.hasSuffix = this.suffixChildren.length > 0;
|
|
||||||
|
|
||||||
this.prefixChildren.forEach((prefix) => {
|
|
||||||
prefix.first = prefix == this.prefixChildren.first;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.suffixChildren.forEach((suffix) => {
|
|
||||||
suffix.last = suffix == this.suffixChildren.last;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.error) {
|
if (this.error) {
|
||||||
this.input.ariaDescribedBy = this.error.id;
|
this.input.ariaDescribedBy = this.error.id;
|
||||||
} else if (this.hint) {
|
} else if (this.hint) {
|
||||||
|
|
|
@ -167,8 +167,6 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
|
||||||
<bit-form-field>
|
<bit-form-field>
|
||||||
<bit-label>Label</bit-label>
|
<bit-label>Label</bit-label>
|
||||||
<input bitInput placeholder="Placeholder" />
|
<input bitInput placeholder="Placeholder" />
|
||||||
<button bitPrefix bitButton>Button</button>
|
|
||||||
<button bitPrefix bitButton>Button</button>
|
|
||||||
<button bitSuffix bitButton>
|
<button bitSuffix bitButton>
|
||||||
<i aria-hidden="true" class="bwi bwi-lg bwi-eye"></i>
|
<i aria-hidden="true" class="bwi bwi-lg bwi-eye"></i>
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -9,7 +9,7 @@ export const PrefixClasses = [
|
||||||
"tw-border-solid",
|
"tw-border-solid",
|
||||||
"tw-border-secondary-500",
|
"tw-border-secondary-500",
|
||||||
"tw-text-muted",
|
"tw-text-muted",
|
||||||
"tw-rounded",
|
"tw-rounded-none",
|
||||||
];
|
];
|
||||||
|
|
||||||
@Directive({
|
@Directive({
|
||||||
|
@ -17,12 +17,6 @@ export const PrefixClasses = [
|
||||||
})
|
})
|
||||||
export class BitPrefixDirective {
|
export class BitPrefixDirective {
|
||||||
@HostBinding("class") @Input() get classList() {
|
@HostBinding("class") @Input() get classList() {
|
||||||
return PrefixClasses.concat([
|
return PrefixClasses.concat(["tw-border-r-0", "first:tw-rounded-l"]);
|
||||||
"tw-border-r-0",
|
|
||||||
"tw-rounded-r-none",
|
|
||||||
!this.first ? "tw-rounded-l-none" : "",
|
|
||||||
]).filter((c) => c != "");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Input() first = false;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,12 +7,6 @@ import { PrefixClasses } from "./prefix.directive";
|
||||||
})
|
})
|
||||||
export class BitSuffixDirective {
|
export class BitSuffixDirective {
|
||||||
@HostBinding("class") @Input() get classList() {
|
@HostBinding("class") @Input() get classList() {
|
||||||
return PrefixClasses.concat([
|
return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
|
||||||
"tw-rounded-l-none",
|
|
||||||
"tw-border-l-0",
|
|
||||||
!this.last ? "tw-rounded-r-none" : "",
|
|
||||||
]).filter((c) => c != "");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Input() last = false;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,18 +17,20 @@ export class BitInputDirective {
|
||||||
"tw-bg-background-alt",
|
"tw-bg-background-alt",
|
||||||
"tw-border",
|
"tw-border",
|
||||||
"tw-border-solid",
|
"tw-border-solid",
|
||||||
"tw-rounded",
|
this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
|
||||||
"tw-text-main",
|
"tw-text-main",
|
||||||
"tw-placeholder-text-muted",
|
"tw-placeholder-text-muted",
|
||||||
|
// Rounded
|
||||||
|
"tw-rounded-none",
|
||||||
|
"first:tw-rounded-l",
|
||||||
|
"last:tw-rounded-r",
|
||||||
|
// Focus
|
||||||
"focus:tw-outline-none",
|
"focus:tw-outline-none",
|
||||||
"focus:tw-border-primary-700",
|
"focus:tw-border-primary-700",
|
||||||
"focus:tw-ring-1",
|
"focus:tw-ring-1",
|
||||||
"focus:tw-ring-primary-700",
|
"focus:tw-ring-primary-700",
|
||||||
"focus:tw-z-10",
|
"focus:tw-z-10",
|
||||||
"disabled:tw-bg-secondary-100",
|
"disabled:tw-bg-secondary-100",
|
||||||
this.hasPrefix ? "tw-rounded-l-none" : "",
|
|
||||||
this.hasSuffix ? "tw-rounded-r-none" : "",
|
|
||||||
this.hasError ? "tw-border-danger-500" : "tw-border-secondary-500",
|
|
||||||
].filter((s) => s != "");
|
].filter((s) => s != "");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue