diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html index 458e1ab8c5c..271d923079e 100644 --- a/libs/components/src/dialog/dialog/dialog.component.html +++ b/libs/components/src/dialog/dialog/dialog.component.html @@ -19,7 +19,7 @@ > -
+
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts index 3727b08b5b7..a457ed23650 100644 --- a/libs/components/src/dialog/dialog/dialog.component.ts +++ b/libs/components/src/dialog/dialog/dialog.component.ts @@ -1,3 +1,4 @@ +import { coerceBooleanProperty } from "@angular/cdk/coercion"; import { Component, Input } from "@angular/core"; @Component({ @@ -7,6 +8,14 @@ import { Component, Input } from "@angular/core"; export class DialogComponent { @Input() dialogSize: "small" | "default" | "large" = "default"; + private _disablePadding: boolean; + @Input() set disablePadding(value: boolean) { + this._disablePadding = coerceBooleanProperty(value); + } + get disablePadding() { + return this._disablePadding; + } + get width() { switch (this.dialogSize) { case "small": { diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts index 8e2826111fe..a97b054f358 100644 --- a/libs/components/src/dialog/dialog/dialog.stories.ts +++ b/libs/components/src/dialog/dialog/dialog.stories.ts @@ -5,6 +5,7 @@ import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { ButtonModule } from "../../button"; import { IconButtonModule } from "../../icon-button"; import { SharedModule } from "../../shared"; +import { TabsModule } from "../../tabs"; import { I18nMockService } from "../../utils/i18n-mock.service"; import { DialogCloseDirective } from "../directives/dialog-close.directive"; import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive"; @@ -16,7 +17,7 @@ export default { component: DialogComponent, decorators: [ moduleMetadata({ - imports: [ButtonModule, SharedModule, IconButtonModule], + imports: [ButtonModule, SharedModule, IconButtonModule, TabsModule], declarations: [DialogTitleContainerDirective, DialogCloseDirective], providers: [ { @@ -33,6 +34,13 @@ export default { args: { dialogSize: "small", }, + argTypes: { + _disablePadding: { + table: { + disable: true, + }, + }, + }, parameters: { design: { type: "figma", @@ -44,7 +52,7 @@ export default { const Template: Story = (args: DialogComponent) => ({ props: args, template: ` - + {{title}} Dialog body text goes here.
@@ -83,7 +91,7 @@ Large.args = { const TemplateScrolling: Story = (args: DialogComponent) => ({ props: args, template: ` - + Scrolling Example Dialog body text goes here.
@@ -104,3 +112,37 @@ export const ScrollingContent = TemplateScrolling.bind({}); ScrollingContent.args = { dialogSize: "small", }; + +const TemplateTabbed: Story = (args: DialogComponent) => ({ + props: args, + template: ` + + Tab Content Example + + + First Tab Content + Second Tab Content + Third Tab Content + + +
+ + +
+
+ `, +}); + +export const TabContent = TemplateTabbed.bind({}); +TabContent.args = { + dialogSize: "large", + disablePadding: true, +}; +TabContent.story = { + parameters: { + docs: { + storyDescription: `An example of using the \`bitTabGroup\` component within the Dialog. The content padding should be + disabled (via \`disablePadding\`) so that the tabs are flush against the dialog title.`, + }, + }, +};