Skip to content

Commit c836abf

Browse files
zeroedinzeroedin
committed
fix(badge): correct jsdoc to cem format documentation
1 parent c9a849a commit c836abf

2 files changed

Lines changed: 72 additions & 54 deletions

File tree

‎elements/pf-v6-badge/pf-v6-badge.css‎

Lines changed: 71 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,95 @@
11
:host {
22
position: relative;
33
display: inline-block;
4-
min-width: var(--pf-v6-c-badge--MinWidth,
5-
var(--pf-t--global--spacer--xl, 2rem));
6-
padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart,
7-
var(--pf-t--global--spacer--sm, 0.5rem));
8-
padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd,
9-
var(--pf-t--global--spacer--sm, 0.5rem));
10-
font-size: var(--pf-v6-c-badge--FontSize,
11-
var(--pf-t--global--font--size--body--sm, 0.75rem));
12-
font-weight: var(--pf-v6-c-badge--FontWeight,
13-
var(--pf-t--global--font--weight--body--bold, 700));
14-
color: var(--pf-v6-c-badge--Color,
15-
var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
4+
min-width:
5+
/** Minimum width of the badge */
6+
var(--pf-v6-c-badge--MinWidth,
7+
var(--pf-t--global--spacer--xl, 2rem));
8+
padding-inline-start:
9+
/** Inline start padding */
10+
var(--pf-v6-c-badge--PaddingInlineStart,
11+
var(--pf-t--global--spacer--sm, 0.5rem));
12+
padding-inline-end:
13+
/** Inline end padding */
14+
var(--pf-v6-c-badge--PaddingInlineEnd,
15+
var(--pf-t--global--spacer--sm, 0.5rem));
16+
font-size:
17+
/** Font size of the badge text */
18+
var(--pf-v6-c-badge--FontSize,
19+
var(--pf-t--global--font--size--body--sm, 0.75rem));
20+
font-weight:
21+
/** Font weight of the badge text */
22+
var(--pf-v6-c-badge--FontWeight,
23+
var(--pf-t--global--font--weight--body--bold, 700));
24+
color:
25+
/** Text color of the badge */
26+
var(--pf-v6-c-badge--Color,
27+
var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
1628
text-align: center;
1729
white-space: nowrap;
18-
background-color: var(--pf-v6-c-badge--BackgroundColor,
19-
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
20-
border-radius: var(--pf-v6-c-badge--BorderRadius,
21-
var(--pf-t--global--border--radius--pill, 180em));
30+
background-color:
31+
/** Background color of the badge */
32+
var(--pf-v6-c-badge--BackgroundColor,
33+
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
34+
border-radius:
35+
/** Border radius of the badge */
36+
var(--pf-v6-c-badge--BorderRadius,
37+
var(--pf-t--global--border--radius--pill, 180em));
2238
}
2339

2440
:host::after {
2541
position: absolute;
2642
inset: 0;
2743
pointer-events: none;
2844
content: "";
29-
border: var(--pf-v6-c-badge--BorderWidth,
30-
var(--pf-t--global--border--width--regular, 1px)) solid var(--pf-v6-c-badge--BorderColor, transparent);
45+
border:
46+
/** Border width of the badge */
47+
var(--pf-v6-c-badge--BorderWidth,
48+
var(--pf-t--global--border--width--regular, 1px))
49+
solid
50+
/** Border color of the badge */
51+
var(--pf-v6-c-badge--BorderColor, transparent);
3152
border-radius: inherit;
3253
}
3354

3455
:host([state="read"]) {
35-
--pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color,
36-
var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
37-
--pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor,
38-
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
39-
--pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor,
40-
var(--pf-t--global--border--color--high-contrast, #151515));
56+
--pf-v6-c-badge--Color:
57+
/** Text color in read state */
58+
var(--pf-v6-c-badge--m-read--Color,
59+
var(--pf-t--global--text--color--nonstatus--on-gray--default, #151515));
60+
--pf-v6-c-badge--BackgroundColor:
61+
/** Background color in read state */
62+
var(--pf-v6-c-badge--m-read--BackgroundColor,
63+
var(--pf-t--global--color--nonstatus--gray--default, #f0f0f0));
64+
--pf-v6-c-badge--BorderColor:
65+
/** Border color in read state */
66+
var(--pf-v6-c-badge--m-read--BorderColor,
67+
var(--pf-t--global--border--color--high-contrast, #151515));
4168
}
4269

4370
:host([state="unread"]) {
44-
--pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color,
45-
var(--pf-t--global--text--color--on-brand--default, #fff));
46-
--pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor,
47-
var(--pf-t--global--color--brand--default, #06c));
71+
--pf-v6-c-badge--Color:
72+
/** Text color in unread state */
73+
var(--pf-v6-c-badge--m-unread--Color,
74+
var(--pf-t--global--text--color--on-brand--default, #fff));
75+
--pf-v6-c-badge--BackgroundColor:
76+
/** Background color in unread state */
77+
var(--pf-v6-c-badge--m-unread--BackgroundColor,
78+
var(--pf-t--global--color--brand--default, #06c));
4879
}
4980

5081
:host([disabled]) {
51-
--pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color,
52-
var(--pf-t--global--text--color--on-disabled, #6a6e73));
53-
--pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor,
54-
var(--pf-t--global--background--color--disabled--default, #d2d2d2));
55-
--pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-disabled--BorderColor,
56-
var(--pf-t--global--border--color--disabled, #d2d2d2));
82+
--pf-v6-c-badge--Color:
83+
/** Text color when disabled */
84+
var(--pf-v6-c-badge--m-disabled--Color,
85+
var(--pf-t--global--text--color--on-disabled, #6a6e73));
86+
--pf-v6-c-badge--BackgroundColor:
87+
/** Background color when disabled */
88+
var(--pf-v6-c-badge--m-disabled--BackgroundColor,
89+
var(--pf-t--global--background--color--disabled--default, #d2d2d2));
90+
--pf-v6-c-badge--BorderColor:
91+
/** Border color when disabled */
92+
var(--pf-v6-c-badge--m-disabled--BorderColor,
93+
var(--pf-t--global--border--color--disabled, #d2d2d2));
5794
pointer-events: none;
5895
}

‎elements/pf-v6-badge/pf-v6-badge.ts‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,6 @@ export type BadgeState = 'unread' | 'read';
99
/**
1010
* A **badge** is used to annotate other information like a label or an object name.
1111
* @summary Displays a numeric value as an annotation
12-
* @slot - Badge content, typically a number or short text
13-
* @cssprop {<color>} --pf-v6-c-badge--Color - Text color of the badge
14-
* @cssprop {<color>} --pf-v6-c-badge--BackgroundColor - Background color of the badge
15-
* @cssprop {<color>} --pf-v6-c-badge--BorderColor - Border color of the badge
16-
* @cssprop {<length>} --pf-v6-c-badge--BorderWidth - Border width of the badge
17-
* @cssprop {<length>} --pf-v6-c-badge--BorderRadius - Border radius of the badge
18-
* @cssprop {<length>} --pf-v6-c-badge--MinWidth - Minimum width of the badge
19-
* @cssprop {<length>} --pf-v6-c-badge--PaddingInlineStart - Inline start padding
20-
* @cssprop {<length>} --pf-v6-c-badge--PaddingInlineEnd - Inline end padding
21-
* @cssprop {<length>} --pf-v6-c-badge--FontSize - Font size of the badge text
22-
* @cssprop {<integer>} --pf-v6-c-badge--FontWeight - Font weight of the badge text
23-
* @cssprop {<color>} --pf-v6-c-badge--m-read--Color - Text color in read state
24-
* @cssprop {<color>} --pf-v6-c-badge--m-read--BackgroundColor - Background color in read state
25-
* @cssprop {<color>} --pf-v6-c-badge--m-read--BorderColor - Border color in read state
26-
* @cssprop {<color>} --pf-v6-c-badge--m-unread--Color - Text color in unread state
27-
* @cssprop {<color>} --pf-v6-c-badge--m-unread--BackgroundColor - Background color in unread state
28-
* @cssprop {<color>} --pf-v6-c-badge--m-disabled--Color - Text color when disabled
29-
* @cssprop {<color>} --pf-v6-c-badge--m-disabled--BackgroundColor - Background color when disabled
30-
* @cssprop {<color>} --pf-v6-c-badge--m-disabled--BorderColor - Border color when disabled
3112
*/
3213
@customElement('pf-v6-badge')
3314
export class PfV6Badge extends LitElement {
@@ -61,7 +42,7 @@ export class PfV6Badge extends LitElement {
6142
(threshold && number && (threshold <= number)) ? `${threshold.toString()}+`
6243
: (number != null) ? number.toString()
6344
: '';
64-
return html`${!displayText ? html`<slot></slot>` : displayText}`;
45+
return html`${!displayText ? html`<!-- Badge content, typically a number or short text --><slot></slot>` : displayText}`;
6546
}
6647
}
6748

0 commit comments

Comments
 (0)