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: ` - - - + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + `, 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 @@ - +

{{ 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 > 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: ` -
+
`, }) -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 + +
Lots of amazing content!
+
+``` + +To remove the bottom margin (for example, if the section is the last item on the page), you can pass +the `disableMargin` input. + +```html + +``` + @@ -24,7 +37,7 @@ Sections often contain a heading. Use `bit-section-header` inside of the `bit-se ```html -

I'm a section header

+

I'm a section header

Section content here!
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 = {

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.

+ + +

Baz

+
+

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.

+
`, }), };