mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-23 03:22:50 +02:00
[CL-357] Remove border radius when displayed in web app (#10884)
This commit is contained in:
parent
7dcfaf8271
commit
3f25b9bbfc
@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
|
|||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||||
host: {
|
host: {
|
||||||
class:
|
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 {}
|
export class CardComponent {}
|
||||||
|
@ -1,7 +1,12 @@
|
|||||||
|
import { RouterTestingModule } from "@angular/router/testing";
|
||||||
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
|
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 { SectionComponent } from "../section";
|
||||||
import { TypographyModule } from "../typography";
|
import { TypographyModule } from "../typography";
|
||||||
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||||
|
|
||||||
import { CardComponent } from "./card.component";
|
import { CardComponent } from "./card.component";
|
||||||
|
|
||||||
@ -10,7 +15,20 @@ export default {
|
|||||||
component: CardComponent,
|
component: CardComponent,
|
||||||
decorators: [
|
decorators: [
|
||||||
moduleMetadata({
|
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(
|
componentWrapperDecorator(
|
||||||
(story) => `<div class="tw-bg-background-alt tw-p-10 tw-text-main">${story}</div>`,
|
(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>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<!-- TODO: Colors will be finalized in the extension refresh feature branch -->
|
<!-- TODO: Colors will be finalized in the extension refresh feature branch -->
|
||||||
<div
|
<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]="
|
[ngClass]="
|
||||||
focusVisibleWithin()
|
focusVisibleWithin()
|
||||||
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
|
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
|
||||||
|
@ -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";
|
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,
|
It is a generic container that can be used for either standalone content, an alternative to tables,
|
||||||
or to list nav links.
|
or to list nav links.
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.Default} />
|
||||||
<Story of={stories.Default} />
|
|
||||||
</Canvas>
|
<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
|
## Primary Content
|
||||||
|
|
||||||
@ -41,9 +49,7 @@ The content can be a button, anchor, or static container.
|
|||||||
</bit-item>
|
</bit-item>
|
||||||
```
|
```
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.ContentTypes} />
|
||||||
<Story of={stories.ContentTypes} />
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Content Slots
|
### Content Slots
|
||||||
|
|
||||||
@ -74,9 +80,7 @@ The content can be a button, anchor, or static container.
|
|||||||
</bit-item>
|
</bit-item>
|
||||||
```
|
```
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.ContentSlots} />
|
||||||
<Story of={stories.ContentSlots} />
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Secondary Actions
|
## 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>`.
|
Groups of items can be associated by wrapping them in the `<bit-item-group>`.
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.MultipleActionList} />
|
||||||
<Story of={stories.MultipleActionList} />
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.SingleActionList} />
|
||||||
<Story of={stories.SingleActionList} />
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### A11y
|
### A11y
|
||||||
|
|
||||||
@ -136,6 +136,4 @@ Use `aria-label` or `aria-labelledby` to give groups an accessible name.
|
|||||||
|
|
||||||
### Virtual Scrolling
|
### Virtual Scrolling
|
||||||
|
|
||||||
<Canvas>
|
<Story of={stories.VirtualScrolling} />
|
||||||
<Story of={stories.VirtualScrolling} />
|
|
||||||
</Canvas>
|
|
||||||
|
@ -1,12 +1,17 @@
|
|||||||
import { ScrollingModule } from "@angular/cdk/scrolling";
|
import { ScrollingModule } from "@angular/cdk/scrolling";
|
||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
|
import { RouterTestingModule } from "@angular/router/testing";
|
||||||
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
|
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 { A11yGridDirective } from "../a11y/a11y-grid.directive";
|
||||||
import { AvatarModule } from "../avatar";
|
import { AvatarModule } from "../avatar";
|
||||||
import { BadgeModule } from "../badge";
|
import { BadgeModule } from "../badge";
|
||||||
import { IconButtonModule } from "../icon-button";
|
import { IconButtonModule } from "../icon-button";
|
||||||
|
import { LayoutComponent } from "../layout";
|
||||||
import { TypographyModule } from "../typography";
|
import { TypographyModule } from "../typography";
|
||||||
|
import { I18nMockService } from "../utils/i18n-mock.service";
|
||||||
|
|
||||||
import { ItemActionComponent } from "./item-action.component";
|
import { ItemActionComponent } from "./item-action.component";
|
||||||
import { ItemContentComponent } from "./item-content.component";
|
import { ItemContentComponent } from "./item-content.component";
|
||||||
@ -29,6 +34,21 @@ export default {
|
|||||||
ItemContentComponent,
|
ItemContentComponent,
|
||||||
A11yGridDirective,
|
A11yGridDirective,
|
||||||
ScrollingModule,
|
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>`),
|
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>
|
||||||
|
`,
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user