mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 08:13:42 +00:00
[CL-58] Make icon button compatible with bit suffix directive (#4057)
* [CL-58] feat: add support for modyfing button types from directives * [CL-58] feat: set button type secondary when used as prefix/suffix * [CL-58] chore: add example using suffix to async actions story * [CL-58] feat: update story with examples * [CL-58] feat: allow buttons to have their style unset * [CL-58] feat: move all styling into prefix/suffix * [CL-58] fix: static content prefix/suffix * [CL-58] fix: add missing bitFormButton to bitAction * [CL-58] fix: disabled opacity not overriding correctly * [CL-58] feat: change hover color to muted * [CL-58] feat: replace undefined with unstyled * [CL-58] fix: focus borders on input and prefix/suffix * [CL-58] feat: update production code to use icon button correctly * [CL-58] refactor: move out button type to common place * [CL-58] fix: buttons not migrated correctly * [CL-58] feat: use icon button in password toggle * [CL-58] fix: remove button icon stories * [SM-358] Migrate password toggles (#4129) * [CL-58] fix: missing i18n service in story * [CL-58] fix: missing bitIconButton directive in export comp Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
This commit is contained in:
@@ -1,12 +1,26 @@
|
||||
import { Directive, HostBinding, Input } from "@angular/core";
|
||||
import { Directive, HostBinding, Input, Optional } from "@angular/core";
|
||||
|
||||
import { PrefixClasses } from "./prefix.directive";
|
||||
import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
|
||||
|
||||
import { PrefixButtonClasses, PrefixClasses, PrefixStaticContentClasses } from "./prefix.directive";
|
||||
|
||||
@Directive({
|
||||
selector: "[bitSuffix]",
|
||||
})
|
||||
export class BitSuffixDirective {
|
||||
constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
|
||||
|
||||
@HostBinding("class") @Input() get classList() {
|
||||
return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
|
||||
return PrefixClasses.concat([
|
||||
"tw-border-l-0",
|
||||
"last:tw-rounded-r",
|
||||
|
||||
"focus-visible:tw-border-l",
|
||||
"focus-visible:tw-ml-[-1px]",
|
||||
]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.buttonComponent?.setButtonType("unstyled");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user