Skip to content

Commit f8274df

Browse files
zeroedinzeroedin
committed
fix(banner): correct jsdoc to cem documentation comments
1 parent fb262b4 commit f8274df

2 files changed

Lines changed: 43 additions & 36 deletions

File tree

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

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,47 @@
1010
:host([sticky]) {
1111
position: sticky;
1212
inset-block-start: 0;
13-
z-index: var(--pf-v6-c-banner--m-sticky--ZIndex,
14-
var(--pf-t--global--z-index--md, 300));
15-
box-shadow: var(--pf-v6-c-banner--m-sticky--BoxShadow,
16-
var(--pf-t--global--box-shadow--md));
13+
z-index:
14+
/** Overrides the z-index when sticky */
15+
var(--pf-v6-c-banner--m-sticky--ZIndex,
16+
var(--pf-t--global--z-index--md, 300));
17+
box-shadow:
18+
/** Overrides the box shadow when sticky */
19+
var(--pf-v6-c-banner--m-sticky--BoxShadow,
20+
var(--pf-t--global--box-shadow--md));
1721
}
1822

1923
#container {
20-
--_bg: var(--pf-v6-c-banner--BackgroundColor,
21-
var(--pf-t--global--color--nonstatus--gray--default,
22-
light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d))));
23-
--_color: var(--pf-v6-c-banner--Color,
24-
var(--pf-t--global--text--color--nonstatus--on-gray--default,
25-
light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff))));
26-
--_padding-block: var(--pf-v6-c-banner--PaddingBlockStart,
27-
var(--pf-t--global--spacer--xs, 0.25rem));
28-
--_padding-inline: var(--pf-v6-c-banner--PaddingInlineStart,
29-
var(--pf-t--global--spacer--md, 1rem));
30-
--_font-size: var(--pf-v6-c-banner--FontSize,
31-
var(--pf-t--global--font--size--body--default, 0.875rem));
32-
--_border-color: var(--pf-v6-c-banner--BorderColor,
33-
var(--pf-t--global--border--color--high-contrast, transparent));
34-
--_border-width: var(--pf-v6-c-banner--BorderWidth,
35-
var(--pf-t--global--border--width--high-contrast--regular, 0));
24+
--_bg:
25+
/** Overrides the banner background color */
26+
var(--pf-v6-c-banner--BackgroundColor,
27+
var(--pf-t--global--color--nonstatus--gray--default,
28+
light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d))));
29+
--_color:
30+
/** Overrides the banner text color */
31+
var(--pf-v6-c-banner--Color,
32+
var(--pf-t--global--text--color--nonstatus--on-gray--default,
33+
light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff))));
34+
--_padding-block:
35+
/** Overrides the block padding */
36+
var(--pf-v6-c-banner--PaddingBlockStart,
37+
var(--pf-t--global--spacer--xs, 0.25rem));
38+
--_padding-inline:
39+
/** Overrides the inline padding */
40+
var(--pf-v6-c-banner--PaddingInlineStart,
41+
var(--pf-t--global--spacer--md, 1rem));
42+
--_font-size:
43+
/** Overrides the font size */
44+
var(--pf-v6-c-banner--FontSize,
45+
var(--pf-t--global--font--size--body--default, 0.875rem));
46+
--_border-color:
47+
/** Overrides the block border color, visible in high-contrast mode */
48+
var(--pf-v6-c-banner--BorderColor,
49+
var(--pf-t--global--border--color--high-contrast, transparent));
50+
--_border-width:
51+
/** Overrides the block border width, visible in high-contrast mode */
52+
var(--pf-v6-c-banner--BorderWidth,
53+
var(--pf-t--global--border--width--high-contrast--regular, 0));
3654

3755
flex-shrink: 0;
3856
padding-block: var(--_padding-block);
@@ -44,8 +62,10 @@
4462
border-block: var(--_border-width) solid var(--_border-color);
4563

4664
@media (min-width: 768px) {
47-
--_padding-inline: var(--pf-v6-c-banner--md--PaddingInlineStart,
48-
var(--pf-t--global--spacer--lg, 1.5rem));
65+
--_padding-inline:
66+
/** Overrides the inline padding at the medium breakpoint */
67+
var(--pf-v6-c-banner--md--PaddingInlineStart,
68+
var(--pf-t--global--spacer--lg, 1.5rem));
4969
}
5070

5171
/* Non-status color modifiers (before status so status takes precedence) */

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

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,6 @@ export type BannerStatus =
3636
* remains focusable via Tab.
3737
*
3838
* @summary Provides a full-width banner for brief, non-dismissible messages.
39-
* @slot - Banner content, including text, links, or icons. For accessibility,
40-
* status banners MUST include `screen-reader-text` and SHOULD include
41-
* a status icon so sighted users can identify the status at a glance.
42-
* @cssprop {<color>} [--pf-v6-c-banner--BackgroundColor] - Overrides the banner background color. Defaults to `--pf-t--global--color--nonstatus--gray--default`.
43-
* @cssprop {<color>} [--pf-v6-c-banner--Color] - Overrides the banner text color. Defaults to `--pf-t--global--text--color--nonstatus--on-gray--default`.
44-
* @cssprop {<length>} [--pf-v6-c-banner--PaddingBlockStart] - Overrides the block padding. Defaults to `--pf-t--global--spacer--xs`.
45-
* @cssprop {<length>} [--pf-v6-c-banner--PaddingInlineStart] - Overrides the inline padding. Defaults to `--pf-t--global--spacer--md`.
46-
* @cssprop {<length>} [--pf-v6-c-banner--md--PaddingInlineStart] - Overrides the inline padding at the medium breakpoint. Defaults to `--pf-t--global--spacer--lg`.
47-
* @cssprop {<length>} [--pf-v6-c-banner--FontSize] - Overrides the font size. Defaults to `--pf-t--global--font--size--body--default`.
48-
* @cssprop {<color>} [--pf-v6-c-banner--BorderColor] - Overrides the block border color, visible in high-contrast mode. Defaults to `--pf-t--global--border--color--high-contrast`.
49-
* @cssprop {<length>} [--pf-v6-c-banner--BorderWidth] - Overrides the block border width, visible in high-contrast mode. Defaults to `--pf-t--global--border--width--high-contrast--regular`.
50-
* @cssprop {<integer>} [--pf-v6-c-banner--m-sticky--ZIndex] - Overrides the z-index when sticky. Defaults to `--pf-t--global--z-index--md`.
51-
* @cssprop [--pf-v6-c-banner--m-sticky--BoxShadow] - Overrides the box shadow when sticky. Defaults to `--pf-t--global--box-shadow--md`.
5239
*/
5340
@customElement('pf-v6-banner')
5441
export class PfV6Banner extends LitElement {
@@ -71,7 +58,7 @@ export class PfV6Banner extends LitElement {
7158
return html`
7259
<div id="container" class=${classMap({ [color]: !!color, [status]: !!status })}>
7360
<span ?hidden="${!screenReaderText}" class="sr-only">${screenReaderText}</span>
74-
<slot></slot>
61+
<!-- Banner content, including text, links, or icons. For accessibility, status banners MUST include screen-reader-text and SHOULD include a status icon so sighted users can identify the status at a glance. --><slot></slot>
7562
</div>
7663
`;
7764
}

0 commit comments

Comments
 (0)