github-starred/bitwarden-clients
2
0
Fork 0
mirror of https://github.com/bitwarden/clients.git synced 2025-12-05 19:17:06 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix issue with icon button

Browse Source
This commit is contained in:
Vicki League
2025-12-05 16:13:00 -05:00
parent 541010507d
commit df7b6c3417
3 changed files with 14 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/icon-button/icon-button.component.html
View File

@@ -1,6 +1,6 @@
<span class="tw-relative tw-inline-block tw-leading-[0px]">
<span class="tw-inline-block tw-leading-[0px]" [ngClass]="{ 'tw-invisible': showLoadingStyle() }">
<i class="bwi" [ngClass]="iconClass" aria-hidden="true"></i>
<i class="bwi" [ngClass]="iconClass()" aria-hidden="true"></i>
</span>
<span
class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center"

15
libs/components/src/icon-button/icon-button.component.ts
View File

@@ -20,7 +20,16 @@ import { SpinnerComponent } from "../spinner";
import { TooltipDirective } from "../tooltip";
import { ariaDisableElement } from "../utils";
export type IconButtonType = "primary" | "danger" | "contrast" | "main" | "muted" | "nav-contrast";
export const IconButtonTypes = [
"primary",
"danger",
"contrast",
"main",
"muted",
"nav-contrast",
] as const;
export type IconButtonType = (typeof IconButtonTypes)[number];
const focusRing = [
// Workaround for box-shadow with transparent offset issue:
@@ -148,9 +157,7 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
);
}
get iconClass() {
return [this.icon(), "!tw-m-0"];
}
readonly iconClass = computed(() => [this.icon(), "!tw-m-0"]);
protected readonly disabledAttr = computed(() => {
const disabled = this.disabled() != null && this.disabled() !== false;

4
libs/components/src/icon-button/icon-button.stories.ts
View File

@@ -5,7 +5,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils";
import { BitIconButtonComponent } from "./icon-button.component";
import { BitIconButtonComponent, IconButtonTypes } from "./icon-button.component";
export default {
title: "Component Library/Icon Button",
@@ -30,7 +30,7 @@ export default {
},
argTypes: {
buttonType: {
options: ["primary", "secondary", "danger", "unstyled", "contrast", "main", "muted", "light"],
options: IconButtonTypes,
},
},
parameters: {