[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>

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;
+}

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>

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>
     `,
   }),
 };