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

[CL-58] Make icon button compatible with bit suffix directive (#4057)

Browse Source 
* [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:
Andreas Coroiu
2022-12-19 23:14:29 +01:00
committed by GitHub
parent 8c8d4b3e3e
commit 32ec5bdba1
23 changed files with 278 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,26 @@
import { Component, HostBinding, Input } from "@angular/core";
import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
export type IconButtonType = "contrast" | "main" | "muted" | "primary" | "secondary" | "danger";
export type IconButtonType = ButtonType | "contrast" | "main" | "muted";
const focusRing = [
// Workaround for box-shadow with transparent offset issue:
// https://github.com/tailwindlabs/tailwindcss/issues/3595
// Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
// switch to `outline` with `outline-offset` when Safari supports border radius on outline.
// Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
"tw-relative",
"before:tw-content-['']",
"before:tw-block",
"before:tw-absolute",
"before:-tw-inset-[3px]",
"before:tw-rounded-md",
"before:tw-transition",
"before:tw-ring",
"before:tw-ring-transparent",
"focus-visible:tw-z-10",
];
const styles: Record<IconButtonType, string[]> = {
contrast: [
@@ -12,8 +30,10 @@ const styles: Record<IconButtonType, string[]> = {
"hover:tw-bg-transparent-hover",
"hover:tw-border-text-contrast",
"focus-visible:before:tw-ring-text-contrast",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
],
main: [
"tw-bg-transparent",
@@ -22,8 +42,10 @@ const styles: Record<IconButtonType, string[]> = {
"hover:tw-bg-transparent-hover",
"hover:tw-border-text-main",
"focus-visible:before:tw-ring-text-main",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
],
muted: [
"tw-bg-transparent",
@@ -32,8 +54,10 @@ const styles: Record<IconButtonType, string[]> = {
"hover:tw-bg-transparent-hover",
"hover:tw-border-primary-700",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-transparent",
"disabled:hover:tw-bg-transparent",
...focusRing,
],
primary: [
"tw-bg-primary-500",
@@ -42,8 +66,10 @@ const styles: Record<IconButtonType, string[]> = {
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-primary-500",
"disabled:hover:tw-bg-primary-500",
...focusRing,
],
secondary: [
"tw-bg-transparent",
@@ -52,10 +78,12 @@ const styles: Record<IconButtonType, string[]> = {
"hover:!tw-text-contrast",
"hover:tw-bg-text-muted",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-text-muted",
"disabled:hover:tw-bg-transparent",
"disabled:hover:!tw-text-muted",
"disabled:hover:tw-border-text-muted",
...focusRing,
],
danger: [
"tw-bg-transparent",
@@ -64,11 +92,14 @@ const styles: Record<IconButtonType, string[]> = {
"hover:!tw-text-contrast",
"hover:tw-bg-danger-500",
"focus-visible:before:tw-ring-primary-700",
"disabled:tw-opacity-60",
"disabled:hover:tw-border-danger-500",
"disabled:hover:tw-bg-transparent",
"disabled:hover:!tw-text-danger",
"disabled:hover:tw-border-danger-500",
...focusRing,
],
unstyled: [],
};
export type IconButtonSize = "default" | "small";
@@ -86,7 +117,7 @@ const sizes: Record<IconButtonSize, string[]> = {
export class BitIconButtonComponent implements ButtonLikeAbstraction {
@Input("bitIconButton") icon: string;
@Input() buttonType: IconButtonType = "main";
@Input() buttonType: IconButtonType;
@Input() size: IconButtonSize = "default";
@@ -98,27 +129,9 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {
"tw-rounded",
"tw-transition",
"hover:tw-no-underline",
"disabled:tw-opacity-60",
"focus:tw-outline-none",
// Workaround for box-shadow with transparent offset issue:
// https://github.com/tailwindlabs/tailwindcss/issues/3595
// Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
// switch to `outline` with `outline-offset` when Safari supports border radius on outline.
// Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
"tw-relative",
"before:tw-content-['']",
"before:tw-block",
"before:tw-absolute",
"before:-tw-inset-[3px]",
"before:tw-rounded-md",
"before:tw-transition",
"before:tw-ring",
"before:tw-ring-transparent",
"focus-visible:before:tw-ring-text-contrast",
"focus-visible:tw-z-10",
]
.concat(styles[this.buttonType])
.concat(styles[this.buttonType ?? "main"])
.concat(sizes[this.size]);
}
@@ -134,4 +147,8 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {
@Input() loading = false;
@Input() disabled = false;
setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
this.buttonType = value;
}
}