Merge remote-tracking branch 'origin/main' into ac/strong-typed-guids

libs/components/src/radio-button/radio-input.component.ts

@@ -32,6 +32,7 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "tw-border-secondary-600",
     "tw-w-[1.12rem]",
     "tw-h-[1.12rem]",
+    "!tw-p-[.125rem]",
     "tw-flex-none", // Flexbox fix for bit-form-control
 
     "hover:tw-border-2",
@@ -45,9 +46,8 @@ export class RadioInputComponent implements BitFormControlAbstraction {
     "before:tw-content-['']",
     "before:tw-transition",
     "before:tw-block",
-    "before:tw-absolute",
     "before:tw-rounded-full",
-    "before:tw-inset-[2px]",
+    "before:tw-size-full",
 
     "disabled:tw-cursor-auto",
     "disabled:tw-bg-secondary-100",

libs/components/src/search/search.component.css

@@ -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");
 }

libs/components/src/search/search.component.html

@@ -1,9 +1,14 @@
-<label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
-<div class="tw-relative tw-flex tw-items-center">
+<form
+  role="search"
+  (mouseenter)="isFormHovered.set(true)"
+  (mouseleave)="isFormHovered.set(false)"
+  class="tw-relative tw-flex tw-items-center tw-w-full"
+>
+  <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
   <label
     [for]="id"
     aria-hidden="true"
-    class="tw-absolute tw-left-2 tw-z-20 !tw-mb-0 tw-cursor-text"
+    class="tw-absolute tw-start-2 tw-z-20 !tw-mb-0 tw-cursor-text"
   >
     <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
   </label>
@@ -14,10 +19,23 @@
     [id]="id"
     [placeholder]="placeholder() ?? ('search' | i18n)"
     class="tw-ps-9"
+    name="searchText"
     [ngModel]="searchText"
     (ngModelChange)="onChange($event)"
-    (blur)="onTouch()"
+    (focus)="isInputFocused.set(true)"
+    (blur)="isInputFocused.set(false); onTouch()"
     [disabled]="disabled()"
     [attr.autocomplete]="autocomplete()"
   />
-</div>
+  <button
+    *ngIf="searchText && showResetButton()"
+    [ngClass]="{
+      'tw-opacity-0': !showResetButton(),
+      'tw-bg-text-muted': showResetButton(),
+    }"
+    class="bw-reset-btn tw-size-6 tw-absolute hover:tw-bg-text-main tw-end-2 tw-z-20 !tw-mb-0 tw-cursor-pointer"
+    type="reset"
+    [attr.aria-label]="'resetSearch' | i18n"
+    (click)="clearSearch()"
+  ></button>
+</form>

libs/components/src/search/search.component.ts

@@ -1,6 +1,7 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import { Component, ElementRef, ViewChild, input, model } from "@angular/core";
+import { NgIf, NgClass } from "@angular/common";
+import { Component, ElementRef, ViewChild, input, model, signal, computed } from "@angular/core";
 import {
   ControlValueAccessor,
   NG_VALUE_ACCESSOR,
@@ -16,6 +17,9 @@ import { FocusableElement } from "../shared/focusable-element";
 
 let nextId = 0;
 
+/**
+ * Do not nest Search components inside another `<form>`, as they already contain their own standalone `<form>` element for searching.
+ */
 @Component({
   selector: "bit-search",
   templateUrl: "./search.component.html",
@@ -30,7 +34,7 @@ let nextId = 0;
       useExisting: SearchComponent,
     },
   ],
-  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe],
+  imports: [InputModule, ReactiveFormsModule, FormsModule, I18nPipe, NgIf, NgClass],
 })
 export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;
@@ -43,6 +47,11 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
   // Use `type="text"` for Safari to improve rendering performance
   protected inputType = isBrowserSafariApi() ? ("text" as const) : ("search" as const);
 
+  protected isInputFocused = signal(false);
+  protected isFormHovered = signal(false);
+
+  protected showResetButton = computed(() => this.isInputFocused() || this.isFormHovered());
+
   readonly disabled = model<boolean>();
   readonly placeholder = input<string>();
   readonly autocomplete = input<string>();
@@ -52,11 +61,20 @@ export class SearchComponent implements ControlValueAccessor, FocusableElement {
   }
 
   onChange(searchText: string) {
+    this.searchText = searchText; // update the model when the input changes (so we can use it with *ngIf in the template)
     if (this.notifyOnChange != undefined) {
       this.notifyOnChange(searchText);
     }
   }
 
+  // Handle the reset button click
+  clearSearch() {
+    this.searchText = "";
+    if (this.notifyOnChange) {
+      this.notifyOnChange("");
+    }
+  }
+
   onTouch() {
     if (this.notifyOnTouch != undefined) {
       this.notifyOnTouch();

libs/components/src/search/search.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls, Title } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./search.stories";
 
@@ -9,6 +9,7 @@ import { SearchModule } from "@bitwarden/components";
 ```
 
 <Title>Search field</Title>
+<Description />
 
 <Primary />
 <Controls />

libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts

@@ -161,6 +161,11 @@ export const PopoverOpen: Story = {
 
     await userEvent.click(passwordLabelIcon);
   },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
 };
 
 export const SimpleDialogOpen: Story = {

libs/components/src/variables.scss

@@ -18,7 +18,7 @@ $theme-colors: (
 );
 
 $body-bg: $white;
-$body-color: #333333;
+$body-color: #1b2029;
 
 $font-family-sans-serif:
   Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
@@ -216,7 +216,7 @@ $themes: (
     textColor: $body-color,
     textDangerColor: $white,
     textInfoColor: $white,
-    textHeadingColor: #333333,
+    textHeadingColor: $body-color,
     textMuted: #6c757d,
     textSuccessColor: $white,
     textWarningColor: $white,

libs/components/tailwind.config.base.js

@@ -74,7 +74,6 @@ module.exports = {
         contrast: rgba("--color-text-contrast"),
         alt2: rgba("--color-text-alt2"),
         code: rgba("--color-text-code"),
-        headers: rgba("--color-text-headers"),
       },
       background: {
         DEFAULT: rgba("--color-background"),
@@ -101,7 +100,6 @@ module.exports = {
       main: rgba("--color-text-main"),
       muted: rgba("--color-text-muted"),
       contrast: rgba("--color-text-contrast"),
-      headers: rgba("--color-text-headers"),
       alt2: rgba("--color-text-alt2"),
       code: rgba("--color-text-code"),
       black: colors.black,
@@ -155,6 +153,7 @@ module.exports = {
         "90vw": "90vw",
       }),
       fontSize: {
+        xs: [".8125rem", "1rem"],
         "3xl": ["1.75rem", "2rem"],
       },
     },