Skip to content

Commit 2750c38

Browse files
SuaYooSuaYoo
authored
ui: Update badges (#3046)
- Standardizes and documents badges UI. - Adds Storybook code snippets.
1 parent 36209e5 commit 2750c38

File tree

12 files changed

+256
-40
lines changed

12 files changed

+256
-40
lines changed

‎.vscode/snippets.code-snippets‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"Btrix Component": {
33
"scope": "javascript,typescript",
4-
"prefix": ["component", "@customElement"],
4+
"prefix": [
5+
"component",
6+
"@customElement"
7+
],
58
"isFileTemplate": true,
69
"body": [
710
"import { localized } from \"@lit/localize\";",
@@ -22,7 +25,10 @@
2225
},
2326
"Btrix Component Test": {
2427
"scope": "javascript,typescript",
25-
"prefix": ["test","describe"],
28+
"prefix": [
29+
"test",
30+
"describe"
31+
],
2632
"isFileTemplate": true,
2733
"body": [
2834
"import { expect, fixture } from \"@open-wc/testing\";",
@@ -54,5 +60,60 @@
5460
""
5561
],
5662
"description": "Unit test for custom component that extends `BtrixComponent`"
63+
},
64+
"Btrix Storybook Component Render": {
65+
"scope": "javascript,typescript",
66+
"prefix": [
67+
"renderComponent",
68+
"component"
69+
],
70+
"isFileTemplate": true,
71+
"body": [
72+
"import { html } from \"lit\";",
73+
"import { ifDefined } from \"lit/directives/if-defined.js\";",
74+
"",
75+
"import type { ${1:Component} } from \"@/${2:directory}/${3:component}\";",
76+
"",
77+
"import \"@/${2:directory}/${3:component}\";",
78+
"",
79+
"export type RenderProps = ${1:Component};",
80+
"",
81+
"export const renderComponent = (props: Partial<RenderProps>) => {",
82+
" return html`<btrix-${3:component} ${4:property}=${ifDefined(props.${4:property})}></btrix-${3:component}>`;",
83+
"};"
84+
],
85+
"description": "Component render for Storybook stories"
86+
},
87+
"Btrix Storybook Component Story": {
88+
"scope": "javascript,typescript",
89+
"prefix": [
90+
"story",
91+
"stories",
92+
"doc"
93+
],
94+
"isFileTemplate": true,
95+
"body": [
96+
"import type { Meta, StoryObj } from \"@storybook/web-components\";",
97+
"",
98+
"import { renderComponent, type RenderProps } from \"./${TM_FILENAME_BASE/\\.stories(.*)/$1/}\";",
99+
"",
100+
"const meta = {",
101+
" title: \"Components/${TM_FILENAME_BASE/\\.stories(.*)/$1/}\",",
102+
" component: \"btrix-${2:component}\",",
103+
" tags: [\"autodocs\"],",
104+
" decorators: [],",
105+
" render: renderComponent,",
106+
" argTypes: {},",
107+
" args: {},",
108+
"} satisfies Meta<RenderProps>;",
109+
"",
110+
"export default meta;",
111+
"type Story = StoryObj<RenderProps>;",
112+
"",
113+
"export const Basic: Story = {",
114+
" args: {},",
115+
"};"
116+
],
117+
"description": "Stories for component in Storybook"
57118
}
58-
}
119+
}

‎frontend/src/components/ui/badge.ts‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,15 @@ export type BadgeVariant =
1313
| "primary"
1414
| "cyan"
1515
| "blue"
16+
| "violet"
17+
| "orange"
1618
| "high-contrast"
1719
| "text"
1820
| "text-neutral";
1921

2022
/**
21-
* Show numeric value in a label
22-
*
23-
* Usage example:
24-
* ```ts
25-
* <btrix-badge aria-describedby="text">10</btrix-badge>
26-
* ```
23+
* Badges are compact, non-interactive displays of contextual information.
24+
* They are an unobtrusive way of drawing attention to dynamic data like statuses or counts.
2725
*/
2826
@customElement("btrix-badge")
2927
export class Badge extends TailwindElement {
@@ -42,6 +40,12 @@ export class Badge extends TailwindElement {
4240
@property({ type: String, reflect: true })
4341
role: string | null = "status";
4442

43+
/**
44+
* Style as normal text and not data
45+
*/
46+
@property({ type: Boolean })
47+
asLabel = false;
48+
4549
static styles = css`
4650
:host {
4751
display: inline-flex;
@@ -52,21 +56,28 @@ export class Badge extends TailwindElement {
5256
return html`
5357
<span
5458
class=${clsx(
55-
tw`inline-flex min-h-4 items-center justify-center align-[1px] leading-none`,
56-
this.size === "medium" && tw`text-xs`,
59+
tw`inline-flex min-h-4 items-center justify-center whitespace-nowrap leading-none`,
60+
this.asLabel
61+
? [this.size === "medium" && tw`text-xs`]
62+
: [
63+
tw`font-mono [font-variation-settings:var(--font-monostyle-variation)]`,
64+
this.size === "medium" && tw`text-xs`,
65+
],
5766
this.outline
5867
? [
5968
tw`mx-px ring-1`,
6069
{
6170
success: tw`bg-success-50 text-success-700 ring-success-400`,
62-
warning: tw`bg-warning-600 text-warning-600 ring-warning-600`,
63-
danger: tw`bg-danger-500 text-danger-500 ring-danger-500`,
71+
warning: tw`bg-warning-50 text-warning-600 ring-warning-600`,
72+
danger: tw`bg-danger-50 text-danger-500 ring-danger-500`,
6473
neutral: tw`bg-neutral-100 text-neutral-600 ring-neutral-300`,
65-
"high-contrast": tw`bg-neutral-600 text-neutral-0 ring-neutral-0`,
74+
"high-contrast": tw`bg-neutral-0 text-neutral-700 ring-neutral-600`,
6675
primary: tw`bg-white text-primary ring-primary`,
6776
cyan: tw`bg-cyan-50 text-cyan-600 ring-cyan-600`,
6877
blue: tw`bg-blue-50 text-blue-600 ring-blue-600`,
6978
text: tw`text-blue-500 ring-blue-600`,
79+
violet: tw`bg-violet-50 text-violet-600 ring-violet-600`,
80+
orange: tw`bg-orange-50 text-orange-600 ring-orange-600`,
7081
"text-neutral": tw`text-neutral-500 ring-neutral-600`,
7182
}[this.variant],
7283
]
@@ -79,13 +90,15 @@ export class Badge extends TailwindElement {
7990
primary: tw`bg-primary text-neutral-0`,
8091
cyan: tw`bg-cyan-50 text-cyan-600`,
8192
blue: tw`bg-blue-50 text-blue-600`,
93+
violet: tw`bg-violet-50 text-violet-600`,
94+
orange: tw`bg-orange-50 text-orange-600`,
8295
text: tw`text-blue-500`,
8396
"text-neutral": tw`text-neutral-500`,
8497
}[this.variant],
8598
this.pill
8699
? [
87-
tw`min-w-[1.125rem] rounded-full`,
88-
this.size === "large" ? tw`px-1.5 py-0.5` : tw`px-1`,
100+
tw`min-w-[1.125rem] rounded-full px-2`,
101+
this.size === "large" && tw`py-0.5`,
89102
]
90103
: [tw`rounded`, this.size === "large" ? tw`px-2.5 py-1` : tw`px-2`],
91104
)}

‎frontend/src/features/crawls/crawler-channel-badge.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ export class CrawlerChannelBadge extends TailwindElement {
2121
channelId?: CrawlerChannelImage | AnyString;
2222

2323
render() {
24-
if (!this.channelId || !this.crawlerChannels) return;
24+
if (!this.channelId) return;
2525

26-
const crawlerChannel = this.crawlerChannels.find(
26+
const crawlerChannel = this.crawlerChannels?.find(
2727
({ id }) => id === this.channelId,
2828
);
2929

@@ -36,7 +36,6 @@ export class CrawlerChannelBadge extends TailwindElement {
3636
variant=${this.channelId === CrawlerChannelImage.Default
3737
? "neutral"
3838
: "blue"}
39-
class="font-monostyle whitespace-nowrap"
4039
>
4140
<sl-icon name="boxes" class="mr-1.5"></sl-icon>
4241
<span class="capitalize">${this.channelId}</span>

‎frontend/src/features/crawls/proxy-badge.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,18 @@ export class ProxyBadge extends TailwindElement {
2020
proxyId?: string;
2121

2222
render() {
23-
if (!this.proxyId || !this.orgProxies) return;
23+
if (!this.proxyId) return;
2424

25-
const proxy = this.orgProxies.servers.find(({ id }) => id === this.proxyId);
25+
const proxy = this.orgProxies?.servers.find(
26+
({ id }) => id === this.proxyId,
27+
);
2628

2729
return html`<btrix-popover
2830
content=${ifDefined(proxy?.description || undefined)}
2931
?disabled=${!proxy?.description}
3032
hoist
3133
>
32-
<btrix-badge variant="blue" class="font-monostyle whitespace-nowrap">
34+
<btrix-badge variant="violet" class="font-monostyle">
3335
<sl-icon name="globe2" class="mr-1.5"></sl-icon>
3436
${proxy?.label || this.proxyId}
3537
</btrix-badge>

‎frontend/src/pages/org/archived-item-detail/archived-item-detail.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -732,9 +732,7 @@ export class ArchivedItemDetail extends BtrixElement {
732732
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
733733
${msg("Download Item")}
734734
${this.item?.fileSize
735-
? html` <btrix-badge
736-
slot="suffix"
737-
class="font-monostyle text-xs text-neutral-500"
735+
? html` <btrix-badge slot="suffix"
738736
>${this.localize.bytes(this.item.fileSize)}</btrix-badge
739737
>`
740738
: nothing}

‎frontend/src/pages/org/archived-items.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -792,9 +792,7 @@ export class CrawlsList extends BtrixElement {
792792
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
793793
${msg("Download Item")}
794794
${item.fileSize
795-
? html` <btrix-badge
796-
slot="suffix"
797-
class="font-monostyle text-xs text-neutral-500"
795+
? html` <btrix-badge slot="suffix"
798796
>${this.localize.bytes(item.fileSize)}</btrix-badge
799797
>`
800798
: nothing}

‎frontend/src/pages/org/collection-detail.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -562,9 +562,7 @@ export class CollectionDetail extends BtrixElement {
562562
${when(
563563
this.collection,
564564
(collection) => html`
565-
<btrix-badge
566-
slot="suffix"
567-
class="font-monostyle text-xs text-neutral-500"
565+
<btrix-badge slot="suffix"
568566
>${this.localize.bytes(
569567
collection.totalSize || 0,
570568
)}</btrix-badge

‎frontend/src/pages/org/collections-list.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -689,9 +689,7 @@ export class CollectionsList extends WithSearchOrgContext(BtrixElement) {
689689
>
690690
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
691691
${msg("Download Collection")}
692-
<btrix-badge
693-
slot="suffix"
694-
class="font-monostyle text-xs text-neutral-500"
692+
<btrix-badge slot="suffix"
695693
>${this.localize.bytes(col.totalSize)}</btrix-badge
696694
>
697695
</btrix-menu-item-link>

‎frontend/src/pages/org/crawls.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -658,9 +658,7 @@ export class OrgCrawls extends BtrixElement {
658658
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
659659
${msg("Download Item")}
660660
${crawl.fileSize
661-
? html` <btrix-badge
662-
slot="suffix"
663-
class="font-monostyle text-xs text-neutral-500"
661+
? html` <btrix-badge slot="suffix"
664662
>${this.localize.bytes(crawl.fileSize)}</btrix-badge
665663
>`
666664
: nothing}

‎frontend/src/pages/org/workflow-detail.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -764,9 +764,7 @@ export class WorkflowDetail extends BtrixElement {
764764
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
765765
${msg("Item")}
766766
${latestCrawl.fileSize
767-
? html` <btrix-badge
768-
slot="suffix"
769-
class="font-monostyle text-xs text-neutral-500"
767+
? html` <btrix-badge slot="suffix"
770768
>${this.localize.bytes(
771769
latestCrawl.fileSize,
772770
)}</btrix-badge

0 commit comments

Comments
 (0)