bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

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

Browse Source
This commit is contained in:
Victoria League
2024-07-24 12:08:33 -04:00
committed by GitHub
parent c52709e6f0
commit 5a2db79235
7 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
libs/components/src/section/section.component.ts
View File

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

15
libs/components/src/section/section.mdx
View File

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

6
libs/components/src/section/section.stories.ts
View File

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