bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-30 15:13:32 +00:00
Code Issues Releases Wiki Activity

add small button variant (#14326)

Browse Source 
* adds small button size variant

* makes small icon button same size as small button

* testing small button for extension header

* remove extension changes

* update popout layout story

* revert change to small icon button padding

* add whitespace to see if error resolves

* default buttonType to primary

* default buttonType to secondary

* add comment around why nonNullButtonSize value exists

* add comment to  property about using the non null version

* Update apps/browser/src/platform/popup/layout/popup-layout.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* updated input syntax when using static values

* remove nonNull value coersion

* allow changing of size input in Story

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
Bryan Cunningham
2025-04-24 15:34:29 -04:00
committed by GitHub
parent 26273ca072
commit 116751d4ca
4 changed files with 50 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
libs/components/src/button/button.component.ts
View File

@@ -1,12 +1,10 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import { NgClass } from "@angular/common";
import { Input, HostBinding, Component, model, computed } from "@angular/core";
import { Input, HostBinding, Component, model, computed, input } from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounce, interval } from "rxjs";
import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
const focusRing = [
"focus-visible:tw-ring-2",
@@ -15,6 +13,11 @@ const focusRing = [
"focus-visible:tw-z-10",
];
const buttonSizeStyles: Record<ButtonSize, string[]> = {
small: ["tw-py-1", "tw-px-3", "tw-text-sm"],
default: ["tw-py-1.5", "tw-px-3"],
};
const buttonStyles: Record<ButtonType, string[]> = {
primary: [
"tw-border-primary-600",
@@ -59,8 +62,6 @@ export class ButtonComponent implements ButtonLikeAbstraction {
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-py-1.5",
"tw-px-3",
"tw-rounded-full",
"tw-transition",
"tw-border-2",
@@ -85,7 +86,8 @@ export class ButtonComponent implements ButtonLikeAbstraction {
"disabled:hover:tw-no-underline",
]
: [],
);
)
.concat(buttonSizeStyles[this.size() || "default"]);
}
protected disabledAttr = computed(() => {
@@ -105,7 +107,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
});
@Input() buttonType: ButtonType;
@Input() buttonType: ButtonType = "secondary";
size = input<ButtonSize>("default");
private _block = false;