[CL-305] Allow margin to be disabled for elements at the bottom of a page (#10132)

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -13,6 +13,7 @@ import {
   ItemModule,
   NoItemsModule,
   SearchModule,
+  SectionComponent,
 } from "@bitwarden/components";
 
 import { PopupFooterComponent } from "./popup-footer.component";
@@ -34,30 +35,36 @@ class ExtensionContainerComponent {}
 @Component({
   selector: "vault-placeholder",
   template: `
-    <bit-item-group aria-label="Mock Vault Items">
-      <bit-item *ngFor="let item of data; index as i">
-        <button bit-item-content>
-          <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
-          {{ i }} of {{ data.length - 1 }}
-          <span slot="secondary">Bar</span>
-        </button>
+    <bit-section disableMargin>
+      <bit-item-group aria-label="Mock Vault Items">
+        <bit-item *ngFor="let item of data; index as i">
+          <button bit-item-content>
+            <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+            {{ i }} of {{ data.length - 1 }}
+            <span slot="secondary">Bar</span>
+          </button>
 
-        <ng-container slot="end">
-          <bit-item-action>
-            <button type="button" bitBadge variant="primary">Auto-fill</button>
-          </bit-item-action>
-          <bit-item-action>
-            <button type="button" bitIconButton="bwi-clone" aria-label="Copy item"></button>
-          </bit-item-action>
-          <bit-item-action>
-            <button type="button" bitIconButton="bwi-ellipsis-v" aria-label="More options"></button>
-          </bit-item-action>
-        </ng-container>
-      </bit-item>
-    </bit-item-group>
+          <ng-container slot="end">
+            <bit-item-action>
+              <button type="button" bitBadge variant="primary">Auto-fill</button>
+            </bit-item-action>
+            <bit-item-action>
+              <button type="button" bitIconButton="bwi-clone" aria-label="Copy item"></button>
+            </bit-item-action>
+            <bit-item-action>
+              <button
+                type="button"
+                bitIconButton="bwi-ellipsis-v"
+                aria-label="More options"
+              ></button>
+            </bit-item-action>
+          </ng-container>
+        </bit-item>
+      </bit-item-group>
+    </bit-section>
   `,
   standalone: true,
-  imports: [CommonModule, ItemModule, BadgeModule, IconButtonModule],
+  imports: [CommonModule, ItemModule, BadgeModule, IconButtonModule, SectionComponent],
 })
 class VaultComponent {
   protected data = Array.from(Array(20).keys());

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html

@@ -1,4 +1,4 @@
-<bit-section *ngIf="ciphers?.length > 0 || description">
+<bit-section *ngIf="ciphers?.length > 0 || description" [disableMargin]="disableSectionMargin">
   <bit-section-header>
     <h2 bitTypography="h6">
       {{ title }}

apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts

@@ -78,6 +78,13 @@ export class VaultListItemsContainerComponent {
   @Input({ transform: booleanAttribute })
   showAutofillButton: boolean;
 
+  /**
+   * Remove the bottom margin from the bit-section in this component
+   * (used for containers at the end of the page where bottom margin is not needed)
+   */
+  @Input({ transform: booleanAttribute })
+  disableSectionMargin: boolean = false;
+
   /**
    * The tooltip text for the organization icon for ciphers that belong to an organization.
    * @param cipher

apps/browser/src/vault/popup/components/vault/vault-v2.component.html

@@ -65,6 +65,7 @@
         [title]="'allItems' | i18n"
         [ciphers]="remainingCiphers$ | async"
         id="allItems"
+        disableSectionMargin
       ></app-vault-list-items-container>
     </ng-container>
   </ng-container>