Skip to content

Commit def26e8

Browse files
TarunAdobeTarunAdobe
committed
chore(badge): abstract base class logic
1 parent 21ef403 commit def26e8

File tree

3 files changed

+111
-81
lines changed

3 files changed

+111
-81
lines changed

‎packages/badge/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
},
2727
"./package.json": "./package.json",
2828
"./src/Badge.js": {
29-
"development": "./src/Badge.dev.js",
30-
"default": "./src/Badge.js"
29+
"default": "./src/Badge.js",
30+
"development": "./src/Badge.dev.js"
3131
},
3232
"./src/badge-overrides.css.js": "./src/badge-overrides.css.js",
3333
"./src/badge.css.js": "./src/badge.css.js",

‎packages/badge/src/Badge.base.ts

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
import {
13+
PropertyValues,
14+
SizedMixin,
15+
SpectrumElement,
16+
} from '@spectrum-web-components/base';
17+
18+
import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
19+
import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
20+
21+
import { property } from '@spectrum-web-components/base/src/decorators.js';
22+
23+
export const BADGE_VARIANTS = [
24+
'accent',
25+
'neutral',
26+
'informative',
27+
'positive',
28+
'negative',
29+
'notice',
30+
'fuchsia',
31+
'indigo',
32+
'magenta',
33+
'purple',
34+
'seafoam',
35+
'yellow',
36+
'gray',
37+
'red',
38+
'orange',
39+
'chartreuse',
40+
'celery',
41+
'green',
42+
'cyan',
43+
'blue',
44+
] as const;
45+
export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
46+
export const FIXED_VALUES = [
47+
'inline-start',
48+
'inline-end',
49+
'block-start',
50+
'block-end',
51+
] as const;
52+
export type FixedValues = (typeof FIXED_VALUES)[number];
53+
54+
/**
55+
* @element sp-badge-base class
56+
*/
57+
export abstract class BadgeBase extends SizedMixin(
58+
ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
59+
{
60+
noDefaultSize: true,
61+
}
62+
) {
63+
@property({ type: String, reflect: true })
64+
public variant: BadgeVariant = 'informative';
65+
66+
@property({ reflect: true })
67+
public get fixed(): FixedValues | undefined {
68+
return this._fixed;
69+
}
70+
71+
public set fixed(fixed: FixedValues | undefined) {
72+
if (fixed === this.fixed) return;
73+
const oldValue = this.fixed;
74+
this._fixed = fixed;
75+
if (fixed) {
76+
this.setAttribute('fixed', fixed);
77+
} else {
78+
this.removeAttribute('fixed');
79+
}
80+
this.requestUpdate('fixed', oldValue);
81+
}
82+
83+
private _fixed?: FixedValues;
84+
85+
protected get hasIcon(): boolean {
86+
return this.slotContentIsPresent;
87+
}
88+
89+
protected override update(changedProperties: PropertyValues): void {
90+
super.update(changedProperties);
91+
if (window.__swc.DEBUG) {
92+
if (!BADGE_VARIANTS.includes(this.variant)) {
93+
window.__swc.warn(
94+
this,
95+
`<${this.localName}> element expect the "variant" attribute to be one of the following:`,
96+
'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
97+
{
98+
issues: [...BADGE_VARIANTS],
99+
}
100+
);
101+
}
102+
}
103+
}
104+
}

‎packages/badge/src/Badge.ts

Lines changed: 5 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -14,102 +14,28 @@ import {
1414
CSSResultArray,
1515
html,
1616
nothing,
17-
SizedMixin,
18-
SpectrumElement,
1917
TemplateResult,
2018
} from '@spectrum-web-components/base';
21-
import { property } from '@spectrum-web-components/base/src/decorators.js';
2219

23-
import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
24-
import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
20+
import { BadgeBase } from './Badge.base.js';
2521
import styles from './badge.css.js';
2622

27-
export const BADGE_VARIANTS = [
28-
'accent',
29-
'neutral',
30-
'informative',
31-
'positive',
32-
'negative',
33-
'notice',
34-
'fuchsia',
35-
'indigo',
36-
'magenta',
37-
'purple',
38-
'seafoam',
39-
'yellow',
40-
'gray',
41-
'red',
42-
'orange',
43-
'chartreuse',
44-
'celery',
45-
'green',
46-
'cyan',
47-
'blue',
48-
] as const;
49-
export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
50-
export const FIXED_VALUES = [
51-
'inline-start',
52-
'inline-end',
53-
'block-start',
54-
'block-end',
55-
] as const;
56-
export type FixedValues = (typeof FIXED_VALUES)[number];
23+
// Export types and values to avoid breaking changes
24+
export { BADGE_VARIANTS, FIXED_VALUES } from './Badge.base.js';
25+
export type { BadgeVariant, FixedValues } from './Badge.base.js';
5726

5827
/**
5928
* @element sp-badge
6029
*
6130
* @slot - Text label of the badge
6231
* @slot icon - Optional icon that appears to the left of the label
6332
*/
64-
export class Badge extends SizedMixin(
65-
ObserveSlotText(ObserveSlotPresence(SpectrumElement, '[slot="icon"]'), ''),
66-
{
67-
noDefaultSize: true,
68-
}
69-
) {
33+
export class Badge extends BadgeBase {
7034
public static override get styles(): CSSResultArray {
7135
return [styles];
7236
}
7337

74-
@property({ reflect: true })
75-
public get fixed(): FixedValues | undefined {
76-
return this._fixed;
77-
}
78-
79-
public set fixed(fixed: FixedValues | undefined) {
80-
if (fixed === this.fixed) return;
81-
const oldValue = this.fixed;
82-
this._fixed = fixed;
83-
if (fixed) {
84-
this.setAttribute('fixed', fixed);
85-
} else {
86-
this.removeAttribute('fixed');
87-
}
88-
this.requestUpdate('fixed', oldValue);
89-
}
90-
91-
private _fixed?: FixedValues;
92-
93-
@property({ type: String, reflect: true })
94-
public variant: BadgeVariant = 'informative';
95-
96-
protected get hasIcon(): boolean {
97-
return this.slotContentIsPresent;
98-
}
99-
10038
protected override render(): TemplateResult {
101-
if (window.__swc.DEBUG) {
102-
if (!BADGE_VARIANTS.includes(this.variant)) {
103-
window.__swc.warn(
104-
this,
105-
`<${this.localName}> element expect the "variant" attribute to be one of the following:`,
106-
'https://opensource.adobe.com/spectrum-web-components/components/badge/#variants',
107-
{
108-
issues: [...BADGE_VARIANTS],
109-
}
110-
);
111-
}
112-
}
11339
return html`
11440
${this.hasIcon
11541
? html`

0 commit comments

Comments
 (0)