Merge branch 'uif/CL-622/dialog-as-drawer' of https://github.com/bitwarden/clients into uif/CL-622/dialog-as-drawer

libs/components/src/badge/badge.component.ts

@@ -5,7 +5,14 @@ import { Component, ElementRef, HostBinding, Input } from "@angular/core";
 
 import { FocusableElement } from "../shared/focusable-element";
 
-export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+export type BadgeVariant =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "danger"
+  | "warning"
+  | "info"
+  | "notification";
 
 const styles: Record<BadgeVariant, string[]> = {
   primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
@@ -14,6 +21,11 @@ const styles: Record<BadgeVariant, string[]> = {
   danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
   warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
   info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
+  notification: [
+    "tw-bg-notification-100",
+    "tw-border-notification-600",
+    "!tw-text-notification-600",
+  ],
 };
 
 const hoverStyles: Record<BadgeVariant, string[]> = {
@@ -27,6 +39,11 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
   danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
   warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
   info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
+  notification: [
+    "hover:tw-bg-notification-600",
+    "hover:tw-border-notification-600",
+    "hover:!tw-text-contrast",
+  ],
 };
 
 @Component({

libs/components/src/badge/badge.stories.ts

@@ -36,6 +36,7 @@ export const Variants: Story = {
       <button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Hover</span>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -44,6 +45,7 @@ export const Variants: Story = {
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Focus Visible</span>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -52,6 +54,7 @@ export const Variants: Story = {
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
       <br/><br/>
       <span class="tw-text-main tw-mx-1">Disabled</span>
       <button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -60,6 +63,7 @@ export const Variants: Story = {
       <button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
       <button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
       <button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
+      <button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
     `,
   }),
 };
@@ -112,6 +116,13 @@ export const Info: Story = {
   },
 };
 
+export const Notification: Story = {
+  ...Primary,
+  args: {
+    variant: "notification",
+  },
+};
+
 export const Truncated: Story = {
   ...Primary,
   args: {

libs/components/src/button/button.mdx

@@ -73,6 +73,27 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
 
 <Canvas of={stories.Block} />
 
+## With Icon
+
+To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
+placement).
+
+> NOTE: Use logical css properties to ensure LTR/RTL support.
+
+**If icon is placed before button label**
+
+```html
+<i class="bwi bwi-plus tw-me-2"></i>
+```
+
+**If icon is placed after button label**
+
+```html
+<i class="bwi bwi-plus tw-ms-2"></i>
+```
+
+<Canvas of={stories.WithIcon} />
+
 ## Accessibility
 
 Please follow these guidelines to ensure that buttons are accessible to all users.

libs/components/src/button/button.stories.ts

@@ -120,3 +120,25 @@ export const Block: Story = {
     block: true,
   },
 };
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <span class="tw-flex tw-gap-8">
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            <i class="bwi bwi-plus tw-me-2"></i>
+            Button label
+          </button>
+        </div>
+        <div>
+          <button bitButton [buttonType]="buttonType" [block]="block">
+            Button label
+            <i class="bwi bwi-plus tw-ms-2"></i>
+          </button>
+        </div>
+      </span>
+    `,
+  }),
+};

libs/components/src/form-control/form-control.component.html

@@ -14,7 +14,9 @@
       }
     </span>
     @if (!hasError) {
-      <ng-content select="bit-hint"></ng-content>
+      <span class="[&_bit-hint]:tw-mt-0 tw-leading-none">
+        <ng-content select="bit-hint"></ng-content>
+      </span>
     }
   </span>
 </label>

libs/components/src/menu/menu.component.spec.ts

@@ -66,7 +66,7 @@ describe("Menu", () => {
 @Component({
   selector: "test-app",
   template: `
-    <button type="button" [bitMenuTriggerFor]="testMenu" class="testclass">Open menu</button>
+    <button type="button" [bitMenuTriggerFor]="testMenu">Open menu</button>
 
     <bit-menu #testMenu>
       <a id="item1" bitMenuItem>Item 1</a>

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

@@ -16,7 +16,7 @@ let nextId = 0;
 export class RadioButtonComponent {
   @HostBinding("attr.id") @Input() id = `bit-radio-button-${nextId++}`;
   @HostBinding("class") get classList() {
-    return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1"];
+    return [this.block ? "tw-block" : "tw-inline-block", "tw-mb-1", "[&_bit-hint]:tw-mt-0"];
   }
 
   @Input() value: unknown;