diff --git a/libs/components/src/card/card.component.ts b/libs/components/src/card/card.component.ts
index da61d53664..3aaed26d8d 100644
--- a/libs/components/src/card/card.component.ts
+++ b/libs/components/src/card/card.component.ts
@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
class:
- "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 tw-rounded-lg tw-py-4 tw-px-3",
+ "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 [&:not(bit-layout_*)]:tw-rounded-lg tw-py-4 tw-px-3",
},
})
export class CardComponent {}
diff --git a/libs/components/src/card/card.stories.ts b/libs/components/src/card/card.stories.ts
index 702a8aeb63..b33f5f4a19 100644
--- a/libs/components/src/card/card.stories.ts
+++ b/libs/components/src/card/card.stories.ts
@@ -1,7 +1,12 @@
+import { RouterTestingModule } from "@angular/router/testing";
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
+import { LayoutComponent } from "../layout";
import { SectionComponent } from "../section";
import { TypographyModule } from "../typography";
+import { I18nMockService } from "../utils/i18n-mock.service";
import { CardComponent } from "./card.component";
@@ -10,7 +15,20 @@ export default {
component: CardComponent,
decorators: [
moduleMetadata({
- imports: [TypographyModule, SectionComponent],
+ imports: [TypographyModule, SectionComponent, LayoutComponent, RouterTestingModule],
+ providers: [
+ {
+ provide: I18nService,
+ useFactory: () => {
+ return new I18nMockService({
+ toggleSideNavigation: "Toggle side navigation",
+ skipToContent: "Skip to content",
+ submenu: "submenu",
+ toggleCollapse: "toggle collapse",
+ });
+ },
+ },
+ ],
}),
componentWrapperDecorator(
(story) => `
${story}
`,
@@ -60,3 +78,16 @@ export const WithinSections: Story = {
`,
}),
};
+
+export const WithoutBorderRadius: Story = {
+ render: (args) => ({
+ props: args,
+ template: /*html*/ `
+
+
+ Cards used in bit-layout
will not have a border radius
+
+
+ `,
+ }),
+};
diff --git a/libs/components/src/item/item.component.html b/libs/components/src/item/item.component.html
index c02117058f..55e69006c5 100644
--- a/libs/components/src/item/item.component.html
+++ b/libs/components/src/item/item.component.html
@@ -1,6 +1,6 @@
-
-
+
+
+
+
+Items used within a parent `bit-layout` component will not have a border radius, since the
+`bit-layout` background is white.
+
+
+
+
+
## Primary Content
@@ -41,9 +49,7 @@ The content can be a button, anchor, or static container.
```
-
+
### Content Slots
@@ -74,9 +80,7 @@ The content can be a button, anchor, or static container.
```
-
+
## Secondary Actions
@@ -109,13 +113,9 @@ Actions are commonly icon buttons or badge buttons.
Groups of items can be associated by wrapping them in the `
`.
-
+
-
+
### A11y
@@ -136,6 +136,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
### Virtual Scrolling
-
+
diff --git a/libs/components/src/item/item.stories.ts b/libs/components/src/item/item.stories.ts
index e8accfd693..b5212fd871 100644
--- a/libs/components/src/item/item.stories.ts
+++ b/libs/components/src/item/item.stories.ts
@@ -1,12 +1,17 @@
import { ScrollingModule } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
+import { RouterTestingModule } from "@angular/router/testing";
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+
import { A11yGridDirective } from "../a11y/a11y-grid.directive";
import { AvatarModule } from "../avatar";
import { BadgeModule } from "../badge";
import { IconButtonModule } from "../icon-button";
+import { LayoutComponent } from "../layout";
import { TypographyModule } from "../typography";
+import { I18nMockService } from "../utils/i18n-mock.service";
import { ItemActionComponent } from "./item-action.component";
import { ItemContentComponent } from "./item-content.component";
@@ -29,6 +34,21 @@ export default {
ItemContentComponent,
A11yGridDirective,
ScrollingModule,
+ LayoutComponent,
+ RouterTestingModule,
+ ],
+ providers: [
+ {
+ provide: I18nService,
+ useFactory: () => {
+ return new I18nMockService({
+ toggleSideNavigation: "Toggle side navigation",
+ skipToContent: "Skip to content",
+ submenu: "submenu",
+ toggleCollapse: "toggle collapse",
+ });
+ },
+ },
],
}),
componentWrapperDecorator((story) => `${story}
`),
@@ -333,3 +353,32 @@ export const VirtualScrolling: Story = {
`,
}),
};
+
+export const WithoutBorderRadius: Story = {
+ render: (args) => ({
+ props: args,
+ template: /*html*/ `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ }),
+};