[UIF] Prefer static string properties (#17966)

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

@@ -81,10 +81,10 @@ export const Small: Story = {
     props: args,
     template: /*html*/ `
     <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'dangerPrimary'" [size]="size" [block]="block">Danger Primary small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block">Primary small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block">Secondary small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block">Danger small</button>
+      <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerPrimary" [size]="size" [block]="block">Danger Primary small</button>
     </div>
     `,
   }),

libs/components/src/copy-click/copy-click.stories.ts

@@ -64,7 +64,7 @@ export const Default: Story = {
           type="button"
           bitSuffix
           bitIconButton="bwi-clone"
-          [label]="'Copy'"
+          label="Copy"
           [appCopyClick]="value"
         ></button>
       </bit-form-field>
@@ -86,7 +86,7 @@ export const WithDefaultToast: Story = {
           type="button"
           bitSuffix
           bitIconButton="bwi-clone"
-          [label]="'Copy'"
+          label="Copy"
           [appCopyClick]="value"
           showToast
         ></button>
@@ -109,7 +109,7 @@ export const WithCustomToastVariant: Story = {
           type="button"
           bitSuffix
           bitIconButton="bwi-clone"
-          [label]="'Copy'"
+          label="Copy"
           [appCopyClick]="value"
           showToast="info"
         ></button>
@@ -132,7 +132,7 @@ export const WithCustomValueLabel: Story = {
           type="button"
           bitSuffix
           bitIconButton="bwi-clone"
-          [label]="'Copy'"
+          label="Copy"
           [appCopyClick]="value"
           showToast
           valueLabel="API Key"

libs/components/src/form-field/form-field.stories.ts

@@ -241,7 +241,7 @@ export const Readonly: Story = {
         <bit-label>Input</bit-label>
         <input bitInput type="password" value="Foobar" [readonly]="true" />
         <button type="button" label="Toggle password" bitIconButton bitSuffix bitPasswordInputToggle></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" label="Clone Input"></button>
       </bit-form-field>
 
       <bit-form-field>
@@ -262,7 +262,7 @@ export const Readonly: Story = {
               <bit-label>Input</bit-label>
               <input bitInput type="password" value="Foobar" readonly />
               <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
-              <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Input'"></button>
+              <button type="button" bitSuffix bitIconButton="bwi-clone" label="Clone Input"></button>
             </bit-form-field>
 
             <bit-form-field>
@@ -310,11 +310,11 @@ export const ButtonInputGroup: Story = {
             <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" [label]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" label="Favorite Label"></button>
         <input bitInput placeholder="Placeholder" />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" [label]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" label="Hide Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" label="Clone Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" label="Menu Label"></button>
       </bit-form-field>
     `,
   }),
@@ -327,12 +327,11 @@ export const DisabledButtonInputGroup: Story = {
     template: /*html*/ `
       <bit-form-field>
         <bit-label>Label</bit-label>
-        <button type="button" bitPrefix bitIconButton="bwi-star" disabled [label]="'Favorite Label'"></button>
+        <button type="button" bitPrefix bitIconButton="bwi-star" disabled label="Favorite Label"></button>
         <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled [label]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled [label]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>
-
+        <button type="button" bitSuffix bitIconButton="bwi-eye" disabled label="Hide Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" disabled label="Clone Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled label="Menu Label"></button>
       </bit-form-field>
     `,
   }),
@@ -346,9 +345,9 @@ export const PartiallyDisabledButtonInputGroup: Story = {
       <bit-form-field>
         <bit-label>Label</bit-label>
         <input bitInput placeholder="Placeholder" disabled />
-        <button type="button" bitSuffix bitIconButton="bwi-eye" [label]="'Hide Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-clone" [label]="'Clone Label'"></button>
-        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled [label]="'Menu Label'"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-eye" label="Hide Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-clone" label="Clone Label"></button>
+        <button type="button" bitSuffix bitIconButton="bwi-ellipsis-v" disabled label="Menu Label"></button>
       </bit-form-field>
     `,
   }),

libs/components/src/item/item.stories.ts

@@ -97,7 +97,7 @@ export const ContentSlots: Story = {
         <button bit-item-content type="button">
           <bit-avatar
             slot="start"
-            [text]="'Foo'"
+            text="Foo"
           ></bit-avatar>
           foo&#64;bitwarden.com
           <ng-container slot="secondary">

libs/components/src/navigation/nav-group.component.html

@@ -23,7 +23,7 @@
           'tw-transform tw-rotate-[90deg]': variantValue === 'tree' && !open(),
         }"
         [bitIconButton]="toggleButtonIcon()"
-        [buttonType]="'nav-contrast'"
+        buttonType="nav-contrast"
         (click)="toggle($event)"
         size="small"
         [attr.aria-expanded]="open().toString()"

libs/components/src/navigation/nav-group.stories.ts

@@ -144,8 +144,8 @@ export const Tree: StoryObj<NavGroupComponent> = {
     template: /*html*/ `
       <bit-side-nav>
         <bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
-          <bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" [variant]="'tree'"></bit-nav-item>
-          <bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" [variant]="'tree'" [open]="true">
+          <bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
+          <bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" variant="tree" [open]="true">
             <bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection-shared" variant="tree" [open]="true">
               <bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
               <bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">

libs/components/src/navigation/nav-item.stories.ts

@@ -90,20 +90,20 @@ export const WithChildButtons: Story = {
     template: /*html*/ `
       <bit-nav-item text="Hello World Very Cool World" [route]="['']" icon="bwi-collection-shared">
         <button
-          type="button" 
+          type="button"
           slot="end"
           class="tw-ms-auto"
-          [bitIconButton]="'bwi-pencil-square'"
-          [buttonType]="'nav-contrast'"
+          bitIconButton="bwi-pencil-square"
+          buttonType="nav-contrast"
           size="small"
           label="Edit"
         ></button>
         <button
-          type="button" 
+          type="button"
           slot="end"
           class="tw-ms-auto"
-          [bitIconButton]="'bwi-check'"
-          [buttonType]="'nav-contrast'"
+          bitIconButton="bwi-check"
+          buttonType="nav-contrast"
           size="small"
           label="Confirm"
         ></button>

libs/components/src/navigation/nav-logo.component.html

@@ -17,7 +17,7 @@
     [attr.aria-label]="label()"
     [title]="label()"
     routerLinkActive
-    [ariaCurrentWhenActive]="'page'"
+    ariaCurrentWhenActive="page"
   >
     <bit-icon [icon]="sideNavService.open ? openIcon() : closedIcon()"></bit-icon>
   </a>

libs/components/src/popover/popover.mdx

@@ -81,7 +81,7 @@ You can manually set the initial position of the Popover by binding a `[position
 Popover's trigger element, such as:
 
 ```html
-<button [bitPopoverTriggerFor]="myPopover" [position]="'above-end'">Open Popover</button>
+<button [bitPopoverTriggerFor]="myPopover" position="above-end">Open Popover</button>
 ```
 
 <Canvas of={stories.AboveEnd} />

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

@@ -99,7 +99,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
 
         <bit-color-password
           class="tw-text-base"
-          [password]="'Wq$Jk😀7j  DX#rS5Sdi!z'"
+          password="Wq$Jk😀7j  DX#rS5Sdi!z"
           [showCount]="true"
         ></bit-color-password>
       </div>
@@ -123,7 +123,7 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
       <button bitButton bitFormButton buttonType="primary" type="submit">Submit</button>
       <bit-error-summary [formGroup]="formObj"></bit-error-summary>
 
-      <bit-popover [title]="'Password help'" #myPopover>
+      <bit-popover title="Password help" #myPopover>
         <div>A strong password has the following:</div>
         <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
           <li>Letters</li>

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

@@ -172,7 +172,7 @@ class KitchenSinkDialogComponent {
       </bit-tab>
     </bit-tab-group>
 
-    <bit-popover [title]="'Educational Popover'" #myPopover>
+    <bit-popover title="Educational Popover" #myPopover>
       <div>You can learn more things at:</div>
       <ul class="tw-mt-2 tw-mb-0 tw-ps-4">
         <li>Help center</li>