From 5a2db79235aaaf76b96c67cd779b761f437e2c29 Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Wed, 24 Jul 2024 12:08:33 -0400
Subject: [PATCH] [CL-305] Allow margin to be disabled for elements at the
 bottom of a page (#10132)

---
 .../popup/layout/popup-layout.stories.ts      | 49 +++++++++++--------
 .../vault-list-items-container.component.html |  2 +-
 .../vault-list-items-container.component.ts   |  7 +++
 .../components/vault/vault-v2.component.html  |  1 +
 .../src/section/section.component.ts          | 13 +++--
 libs/components/src/section/section.mdx       | 15 +++++-
 .../components/src/section/section.stories.ts |  6 +++
 7 files changed, 67 insertions(+), 26 deletions(-)

diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 9857eeccc3..408988dca3 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/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());
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
index 4da4393a49..b440a29ff7 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html
+++ b/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 }}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts b/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
index 80ef26a322..8e3f2bca26 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.ts
+++ b/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
diff --git a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html b/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
index 6422bc3c84..c36d480e9c 100644
--- a/apps/browser/src/vault/popup/components/vault/vault-v2.component.html
+++ b/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>
diff --git a/libs/components/src/section/section.component.ts b/libs/components/src/section/section.component.ts
index a60e232eec..953da04044 100644
--- a/libs/components/src/section/section.component.ts
+++ b/libs/components/src/section/section.component.ts
@@ -1,14 +1,21 @@
+import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CommonModule } from "@angular/common";
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 @Component({
   selector: "bit-section",
   standalone: true,
   imports: [CommonModule],
   template: `
-    <section class="tw-mb-6 md:tw-mb-12">
+    <section
+      [ngClass]="{
+        'tw-mb-6 md:tw-mb-12': !disableMargin
+      }"
+    >
       <ng-content></ng-content>
     </section>
   `,
 })
-export class SectionComponent {}
+export class SectionComponent {
+  @Input({ transform: coerceBooleanProperty }) disableMargin = false;
+}
diff --git a/libs/components/src/section/section.mdx b/libs/components/src/section/section.mdx
index 33e640e4f0..52672ad59f 100644
--- a/libs/components/src/section/section.mdx
+++ b/libs/components/src/section/section.mdx
@@ -13,6 +13,19 @@ import { SectionComponent, SectionHeaderComponent } from "@bitwarden/components"
 Sections are simple containers that apply a responsive bottom margin and utilize the semantic
 `section` HTML element.
 
+```html
+<bit-section>
+  <div>Lots of amazing content!</div>
+</bit-section>
+```
+
+To remove the bottom margin (for example, if the section is the last item on the page), you can pass
+the `disableMargin` input.
+
+```html
+<bit-section disableMargin></bit-section>
+```
+
 <Canvas>
   <Story of={stories.Default} />
 </Canvas>
@@ -24,7 +37,7 @@ Sections often contain a heading. Use `bit-section-header` inside of the `bit-se
 ```html
 <bit-section>
   <bit-section-header>
-    <h1 bitTypography="h1">I'm a section header</h2>
+    <h1 bitTypography="h1">I'm a section header</h1>
   </bit-section-header>
   <div>Section content here!</div>
 </bit-section>
diff --git a/libs/components/src/section/section.stories.ts b/libs/components/src/section/section.stories.ts
index 0f720d1dba..0d36d6e5a1 100644
--- a/libs/components/src/section/section.stories.ts
+++ b/libs/components/src/section/section.stories.ts
@@ -41,6 +41,12 @@ export const Default: Story = {
           </bit-section-header>
           <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
         </bit-section>
+        <bit-section disableMargin>
+          <bit-section-header>
+            <h2 bitTypography="h2">Baz</h2>
+          </bit-section-header>
+          <p bitTypography="body1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+        </bit-section>
     `,
   }),
 };