From 3f25b9bbfc7cdd9f6cbdd682909534ff2dc3f19f Mon Sep 17 00:00:00 2001 From: Victoria League Date: Thu, 5 Sep 2024 16:38:20 -0400 Subject: [PATCH] [CL-357] Remove border radius when displayed in web app (#10884) --- libs/components/src/card/card.component.ts | 2 +- libs/components/src/card/card.stories.ts | 33 ++++++++++++- libs/components/src/item/item.component.html | 2 +- libs/components/src/item/item.mdx | 36 +++++++------- libs/components/src/item/item.stories.ts | 49 ++++++++++++++++++++ 5 files changed, 100 insertions(+), 22 deletions(-) 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*/ ` + + + + + + + + + + + + + + + + + + `, + }), +};