[CL-357] Remove border radius when displayed in web app (#10884)

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 {}

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) => `<div class="tw-bg-background-alt tw-p-10 tw-text-main">${story}</div>`,
@@ -60,3 +78,16 @@ export const WithinSections: Story = {
       `,
   }),
 };
+
+export const WithoutBorderRadius: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <bit-layout>
+      <bit-card>
+        <p bitTypography="body1" class="!tw-mb-0">Cards used in <code>bit-layout</code> will not have a border radius</p>
+      </bit-card>
+    </bit-layout>
+    `,
+  }),
+};

libs/components/src/item/item.component.html

@@ -1,6 +1,6 @@
 <!-- TODO: Colors will be finalized in the extension refresh feature branch -->
 <div
-  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-300/20 tw-text-main tw-border-solid tw-border-b tw-border-0 tw-rounded-lg tw-mb-1.5"
+  class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-300/20 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg tw-mb-1.5"
   [ngClass]="
     focusVisibleWithin()
       ? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'

libs/components/src/item/item.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls, Canvas } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
 
 import * as stories from "./item.stories";
 
@@ -15,9 +15,17 @@ import { ItemModule } from "@bitwarden/components";
 It is a generic container that can be used for either standalone content, an alternative to tables,
 or to list nav links.
 
-<Canvas>
-  <Story of={stories.Default} />
-</Canvas>
+<Story of={stories.Default} />
+
+<br />
+
+Items used within a parent `bit-layout` component will not have a border radius, since the
+`bit-layout` background is white.
+
+<Story of={stories.WithoutBorderRadius} />
+
+<br />
+<br />
 
 ## Primary Content
 
@@ -41,9 +49,7 @@ The content can be a button, anchor, or static container.
 </bit-item>
 ```
 
-<Canvas>
-  <Story of={stories.ContentTypes} />
-</Canvas>
+<Story of={stories.ContentTypes} />
 
 ### Content Slots
 
@@ -74,9 +80,7 @@ The content can be a button, anchor, or static container.
 </bit-item>
 ```
 
-<Canvas>
-  <Story of={stories.ContentSlots} />
-</Canvas>
+<Story of={stories.ContentSlots} />
 
 ## 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 `<bit-item-group>`.
 
-<Canvas>
-  <Story of={stories.MultipleActionList} />
-</Canvas>
+<Story of={stories.MultipleActionList} />
 
-<Canvas>
-  <Story of={stories.SingleActionList} />
-</Canvas>
+<Story of={stories.SingleActionList} />
 
 ### A11y
 
@@ -136,6 +136,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
 
 ### Virtual Scrolling
 
-<Canvas>
-  <Story of={stories.VirtualScrolling} />
-</Canvas>
+<Story of={stories.VirtualScrolling} />

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) => `<div class="tw-bg-background-alt tw-p-2">${story}</div>`),
@@ -333,3 +353,32 @@ export const VirtualScrolling: Story = {
     `,
   }),
 };
+
+export const WithoutBorderRadius: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-layout>
+      <bit-item>
+        <button bit-item-content>
+          <i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
+          Foo
+          <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"></button>
+          </bit-item-action>
+          <bit-item-action>
+            <button type="button" bitIconButton="bwi-ellipsis-v"></button>
+          </bit-item-action>
+        </ng-container>
+      </bit-item>
+    </bit-layout>
+    `,
+  }),
+};