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

[CL-601] Replace default reset button to enable it in more browsers (#14974)

Browse Source 
* bb/pm-19497/replace default reset button to enable it in more browsers

* address feedback: add ngClass; improve accessibility

* add signals for form hover and input focus; compute showResetButton

* fix(style): [CL-601] Improve CSS per reviewer comments

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] add ngForm; remove standalone attributes

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] add translation strings

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Use message key in aria label

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Remove unnecessary aria-hidden attribute

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Remove unecessary ngForm attributes

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Add storybook description

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

* fix: [CL-601] Match main for recent signal input changs

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>

---------

Signed-off-by: Ben Brooks <bbrooks@bitwarden.com>
This commit is contained in:
Ben Brooks
2025-07-23 09:17:47 -07:00
committed by GitHub
parent d0082981a3
commit a74e95fbfe
7 changed files with 62 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
libs/components/src/search/search.component.css
View File

@@ -1,19 +1,17 @@
/**
* Tailwind doesn't have a good way to style search-cancel-button.
* Hide the default reset button that only appears in some browsers.
*/
bit-search input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 21px;
width: 21px;
margin: 0;
cursor: pointer;
background-repeat: no-repeat;
mask-image: url("./close-button.svg");
-webkit-mask-image: url("./close-button.svg");
background-color: rgba(var(--color-text-muted));
}
bit-search input[type="search"]::-webkit-search-cancel-button:hover {
background-color: rgba(var(--color-text-main));
/**
* Style our custom reset button that works in all common browsers.
* Tailwind CSS does not natively support mask-image or -webkit-mask-image utilities (but can be extended if needed).
*/
.bw-reset-btn {
mask-image: url("./close-button.svg");
-webkit-mask-image: url("./close-button.svg");
}