From 804f8f4b59d8b3244d09ee476f215b6efad8026a Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 7 Aug 2025 22:23:22 +0300 Subject: [PATCH 01/17] docs: move demo index files --- elements/.config/cem.yaml | 4 ++-- elements/pf-accordion/demo/{pf-accordion.html => index.html} | 0 elements/pf-accordion/pf-accordion.ts | 1 + elements/pf-avatar/demo/{pf-avatar.html => index.html} | 0 elements/pf-avatar/pf-avatar.ts | 1 + .../pf-back-to-top/demo/{pf-back-to-top.html => index.html} | 0 elements/pf-back-to-top/pf-back-to-top.ts | 1 + .../demo/{pf-background-image.html => index.html} | 0 elements/pf-background-image/pf-background-image.ts | 1 + elements/pf-badge/demo/{pf-badge.html => index.html} | 0 elements/pf-badge/pf-badge.ts | 1 + elements/pf-banner/demo/{pf-banner.html => index.html} | 0 elements/pf-banner/pf-banner.ts | 1 + elements/pf-button/demo/{pf-button.html => index.html} | 0 elements/pf-button/pf-button.ts | 1 + elements/pf-card/demo/{pf-card.html => index.html} | 0 elements/pf-card/pf-card.ts | 1 + elements/pf-chip/demo/{pf-chip.html => index.html} | 0 elements/pf-chip/pf-chip.ts | 1 + .../demo/{pf-clipboard-copy.html => index.html} | 0 elements/pf-clipboard-copy/pf-clipboard-copy.ts | 1 + .../pf-code-block/demo/{pf-code-block.html => index.html} | 0 elements/pf-code-block/pf-code-block.ts | 1 + elements/pf-dropdown/demo/{pf-dropdown.html => index.html} | 0 elements/pf-dropdown/pf-dropdown.ts | 1 + elements/pf-icon/demo/{pf-icon.html => index.html} | 0 elements/pf-icon/pf-icon.ts | 1 + .../pf-jump-links/demo/{pf-jump-links.html => index.html} | 0 elements/pf-jump-links/pf-jump-links.ts | 1 + elements/pf-label/demo/{pf-label.html => index.html} | 0 elements/pf-label/pf-label.ts | 1 + elements/pf-modal/demo/{pf-modal.html => index.html} | 0 elements/pf-modal/pf-modal.ts | 1 + elements/pf-panel/demo/{pf-panel.html => index.html} | 0 elements/pf-panel/pf-panel.ts | 1 + elements/pf-popover/demo/{pf-popover.html => index.html} | 0 elements/pf-popover/pf-popover.ts | 1 + .../demo/{pf-progress-stepper.html => index.html} | 0 elements/pf-progress-stepper/pf-progress-stepper.ts | 1 + elements/pf-progress/demo/{pf-progress.html => index.html} | 0 elements/pf-progress/pf-progress.ts | 1 + .../pf-search-input/demo/{pf-search-input.html => index.html} | 0 elements/pf-search-input/pf-search-input.ts | 1 + elements/pf-select/demo/{pf-select.html => index.html} | 0 elements/pf-select/pf-select.ts | 1 + elements/pf-spinner/demo/{pf-spinner.html => index.html} | 0 elements/pf-spinner/pf-spinner.ts | 1 + elements/pf-switch/demo/{pf-switch.html => index.html} | 0 elements/pf-switch/pf-switch.ts | 1 + elements/pf-table/demo/{pf-table.html => index.html} | 0 elements/pf-table/pf-table.ts | 1 + elements/pf-tabs/demo/{pf-tabs.html => index.html} | 0 elements/pf-tabs/pf-tabs.ts | 1 + elements/pf-text-area/demo/{pf-text-area.html => index.html} | 0 elements/pf-text-area/pf-text-area.ts | 1 + .../pf-text-input/demo/{pf-text-input.html => index.html} | 0 elements/pf-text-input/pf-text-input.ts | 1 + elements/pf-tile/demo/{pf-tile.html => index.html} | 0 elements/pf-tile/pf-tile.ts | 1 + elements/pf-timestamp/demo/{pf-timestamp.html => index.html} | 0 elements/pf-timestamp/pf-timestamp.ts | 1 + elements/pf-tooltip/demo/{pf-tooltip.html => index.html} | 0 elements/pf-tooltip/pf-tooltip.ts | 1 + 63 files changed, 33 insertions(+), 2 deletions(-) rename elements/pf-accordion/demo/{pf-accordion.html => index.html} (100%) rename elements/pf-avatar/demo/{pf-avatar.html => index.html} (100%) rename elements/pf-back-to-top/demo/{pf-back-to-top.html => index.html} (100%) rename elements/pf-background-image/demo/{pf-background-image.html => index.html} (100%) rename elements/pf-badge/demo/{pf-badge.html => index.html} (100%) rename elements/pf-banner/demo/{pf-banner.html => index.html} (100%) rename elements/pf-button/demo/{pf-button.html => index.html} (100%) rename elements/pf-card/demo/{pf-card.html => index.html} (100%) rename elements/pf-chip/demo/{pf-chip.html => index.html} (100%) rename elements/pf-clipboard-copy/demo/{pf-clipboard-copy.html => index.html} (100%) rename elements/pf-code-block/demo/{pf-code-block.html => index.html} (100%) rename elements/pf-dropdown/demo/{pf-dropdown.html => index.html} (100%) rename elements/pf-icon/demo/{pf-icon.html => index.html} (100%) rename elements/pf-jump-links/demo/{pf-jump-links.html => index.html} (100%) rename elements/pf-label/demo/{pf-label.html => index.html} (100%) rename elements/pf-modal/demo/{pf-modal.html => index.html} (100%) rename elements/pf-panel/demo/{pf-panel.html => index.html} (100%) rename elements/pf-popover/demo/{pf-popover.html => index.html} (100%) rename elements/pf-progress-stepper/demo/{pf-progress-stepper.html => index.html} (100%) rename elements/pf-progress/demo/{pf-progress.html => index.html} (100%) rename elements/pf-search-input/demo/{pf-search-input.html => index.html} (100%) rename elements/pf-select/demo/{pf-select.html => index.html} (100%) rename elements/pf-spinner/demo/{pf-spinner.html => index.html} (100%) rename elements/pf-switch/demo/{pf-switch.html => index.html} (100%) rename elements/pf-table/demo/{pf-table.html => index.html} (100%) rename elements/pf-tabs/demo/{pf-tabs.html => index.html} (100%) rename elements/pf-text-area/demo/{pf-text-area.html => index.html} (100%) rename elements/pf-text-input/demo/{pf-text-input.html => index.html} (100%) rename elements/pf-tile/demo/{pf-tile.html => index.html} (100%) rename elements/pf-timestamp/demo/{pf-timestamp.html => index.html} (100%) rename elements/pf-tooltip/demo/{pf-tooltip.html => index.html} (100%) diff --git a/elements/.config/cem.yaml b/elements/.config/cem.yaml index 9362bca3c4..39c88ae3d6 100644 --- a/elements/.config/cem.yaml +++ b/elements/.config/cem.yaml @@ -10,5 +10,5 @@ generate: noDefaultExcludes: false demoDiscovery: fileGlob: '*/demo/*.html' - urlPattern: pf-(?P[\w-]+)/demo/(?P[\w-]+).html - urlTemplate: https://patternflyelements.org/components/{tag}/demo/{demo}/ + urlPattern: :tag/demo/:demo.html + urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/ diff --git a/elements/pf-accordion/demo/pf-accordion.html b/elements/pf-accordion/demo/index.html similarity index 100% rename from elements/pf-accordion/demo/pf-accordion.html rename to elements/pf-accordion/demo/index.html diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts index 4daaefed8c..48d2ee4672 100644 --- a/elements/pf-accordion/pf-accordion.ts +++ b/elements/pf-accordion/pf-accordion.ts @@ -37,6 +37,7 @@ export class PfAccordionCollapseEvent extends Event { /** * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed. * @summary Toggle the visibility of sections of content + * @alias Accordion * @fires {AccordionExpandEvent} expand - when a panel expands * @fires {AccordionCollapseEvent} collapse - when a panel collapses * @slot diff --git a/elements/pf-avatar/demo/pf-avatar.html b/elements/pf-avatar/demo/index.html similarity index 100% rename from elements/pf-avatar/demo/pf-avatar.html rename to elements/pf-avatar/demo/index.html diff --git a/elements/pf-avatar/pf-avatar.ts b/elements/pf-avatar/pf-avatar.ts index d4aa243830..05d24379e0 100644 --- a/elements/pf-avatar/pf-avatar.ts +++ b/elements/pf-avatar/pf-avatar.ts @@ -13,6 +13,7 @@ export class PfAvatarLoadEvent extends Event { /** * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic. * @summary For displaying a user's avatar image + * @alias Avatar * @fires {PfAvatarLoadEvent} load - when the avatar loads * @cssprop [--pf-c-avatar--Width=24px] * @cssprop [--pf-c-avatar--Height=24px] diff --git a/elements/pf-back-to-top/demo/pf-back-to-top.html b/elements/pf-back-to-top/demo/index.html similarity index 100% rename from elements/pf-back-to-top/demo/pf-back-to-top.html rename to elements/pf-back-to-top/demo/index.html diff --git a/elements/pf-back-to-top/pf-back-to-top.ts b/elements/pf-back-to-top/pf-back-to-top.ts index 3d3da33ec9..3a8a58349d 100644 --- a/elements/pf-back-to-top/pf-back-to-top.ts +++ b/elements/pf-back-to-top/pf-back-to-top.ts @@ -13,6 +13,7 @@ import styles from './pf-back-to-top.css'; /** * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page. * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page. + * @alias Back to Top * @csspart trigger - The `` or `` element * @slot icon * Contains the prefix icon to display before the link or button. diff --git a/elements/pf-background-image/demo/pf-background-image.html b/elements/pf-background-image/demo/index.html similarity index 100% rename from elements/pf-background-image/demo/pf-background-image.html rename to elements/pf-background-image/demo/index.html diff --git a/elements/pf-background-image/pf-background-image.ts b/elements/pf-background-image/pf-background-image.ts index 86ba30b9f9..cb28cf1be4 100644 --- a/elements/pf-background-image/pf-background-image.ts +++ b/elements/pf-background-image/pf-background-image.ts @@ -11,6 +11,7 @@ import styles from './pf-background-image.css'; /** * A **background image** allows you to place an image in the background of your page or area of a page. * @summary Allows users to place an image in the background of your page or area of a page. + * @alias Background Image * @slot filter - Overrides the default svg filter for the background image. * @cssprop {} [--pf-c-background-image--BackgroundColor=#151515] * @cssprop [--pf-c-background-image--Filter=url("#image_overlay")] diff --git a/elements/pf-badge/demo/pf-badge.html b/elements/pf-badge/demo/index.html similarity index 100% rename from elements/pf-badge/demo/pf-badge.html rename to elements/pf-badge/demo/index.html diff --git a/elements/pf-badge/pf-badge.ts b/elements/pf-badge/pf-badge.ts index 48ca61df7a..204061b1e8 100644 --- a/elements/pf-badge/pf-badge.ts +++ b/elements/pf-badge/pf-badge.ts @@ -6,6 +6,7 @@ import styles from './pf-badge.css'; /** * A **badge** is used to annotate other information like a label or an object name. + * @alias Badge * @cssprop {} [--pf-c-badge--BorderRadius=180em] * @cssprop {} [--pf-c-badge--MinWidth=2rem] * @cssprop {} [--pf-c-badge--PaddingLeft=0.5rem] diff --git a/elements/pf-banner/demo/pf-banner.html b/elements/pf-banner/demo/index.html similarity index 100% rename from elements/pf-banner/demo/pf-banner.html rename to elements/pf-banner/demo/index.html diff --git a/elements/pf-banner/pf-banner.ts b/elements/pf-banner/pf-banner.ts index b6dd731dcf..a070d66217 100644 --- a/elements/pf-banner/pf-banner.ts +++ b/elements/pf-banner/pf-banner.ts @@ -20,6 +20,7 @@ export type BannerVariant = ( * A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. * Banners are un-intrusive and non-dismissible. * @summary Allows users to display a stylized banner. + * @alias Banner * @cssprop {} [--pf-c-banner--PaddingTop=0.25rem] * @cssprop {} [--pf-c-banner--PaddingRight=1rem] * @cssprop {} [--pf-c-banner--PaddingBottom=0.25rem] diff --git a/elements/pf-button/demo/pf-button.html b/elements/pf-button/demo/index.html similarity index 100% rename from elements/pf-button/demo/pf-button.html rename to elements/pf-button/demo/index.html diff --git a/elements/pf-button/pf-button.ts b/elements/pf-button/pf-button.ts index 067de822c7..caaac25240 100644 --- a/elements/pf-button/pf-button.ts +++ b/elements/pf-button/pf-button.ts @@ -31,6 +31,7 @@ export type ButtonVariant = ( * new location, like another page inside of a web application, or an external site * such as help or documentation.. * @summary Allows users to perform an action when triggered + * @alias Button * @cssprop {} [--pf-c-button--FontSize=1rem] * @cssprop [--pf-c-button--FontWeight=400] * @cssprop {} [--pf-c-button--LineHeight=1.5] diff --git a/elements/pf-card/demo/pf-card.html b/elements/pf-card/demo/index.html similarity index 100% rename from elements/pf-card/demo/pf-card.html rename to elements/pf-card/demo/index.html diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts index 72a29419a6..8ca6d4aba8 100644 --- a/elements/pf-card/pf-card.ts +++ b/elements/pf-card/pf-card.ts @@ -14,6 +14,7 @@ import style from './pf-card.css'; * function as a preview of a detailed page. Cards may also be used in data displays * like card views, or for positioning content on a page. * @summary Gives a preview of information in a small layout + * @alias Card * @slot header * When included, defines the contents of a card. Card headers can contain images as well as * the title of a card and an actions menu represented by the right-aligned kebab. diff --git a/elements/pf-chip/demo/pf-chip.html b/elements/pf-chip/demo/index.html similarity index 100% rename from elements/pf-chip/demo/pf-chip.html rename to elements/pf-chip/demo/index.html diff --git a/elements/pf-chip/pf-chip.ts b/elements/pf-chip/pf-chip.ts index 393ce0f0c9..cfc1fbef8d 100644 --- a/elements/pf-chip/pf-chip.ts +++ b/elements/pf-chip/pf-chip.ts @@ -15,6 +15,7 @@ export class PfChipRemoveEvent extends Event { /** * A **chip** is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects. + * @alias Chip * @fires {ChipRemoveEvent} remove - Fires when chip is removed * @fires {Event} click - when close button is clicked * @slot diff --git a/elements/pf-clipboard-copy/demo/pf-clipboard-copy.html b/elements/pf-clipboard-copy/demo/index.html similarity index 100% rename from elements/pf-clipboard-copy/demo/pf-clipboard-copy.html rename to elements/pf-clipboard-copy/demo/index.html diff --git a/elements/pf-clipboard-copy/pf-clipboard-copy.ts b/elements/pf-clipboard-copy/pf-clipboard-copy.ts index 1dfbf823a7..ef878aaac5 100644 --- a/elements/pf-clipboard-copy/pf-clipboard-copy.ts +++ b/elements/pf-clipboard-copy/pf-clipboard-copy.ts @@ -21,6 +21,7 @@ export class PfClipboardCopyCopiedEvent extends Event { /** * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard. + * @alias Clipboard Copy * @slot - Place content to copy here, or use the `value` attribute * @slot actions - Place additional action buttons here * @fires {PfClipboardCopyCopiedEvent} copy - when the text snippet is successfully copied. diff --git a/elements/pf-code-block/demo/pf-code-block.html b/elements/pf-code-block/demo/index.html similarity index 100% rename from elements/pf-code-block/demo/pf-code-block.html rename to elements/pf-code-block/demo/index.html diff --git a/elements/pf-code-block/pf-code-block.ts b/elements/pf-code-block/pf-code-block.ts index 398328b576..8d10550943 100644 --- a/elements/pf-code-block/pf-code-block.ts +++ b/elements/pf-code-block/pf-code-block.ts @@ -6,6 +6,7 @@ import styles from './pf-code-block.css'; /** * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard. + * @alias Code Block * @slot code * The slot to put the code in * @slot expandable-code diff --git a/elements/pf-dropdown/demo/pf-dropdown.html b/elements/pf-dropdown/demo/index.html similarity index 100% rename from elements/pf-dropdown/demo/pf-dropdown.html rename to elements/pf-dropdown/demo/index.html diff --git a/elements/pf-dropdown/pf-dropdown.ts b/elements/pf-dropdown/pf-dropdown.ts index debd667963..11193d2fdf 100644 --- a/elements/pf-dropdown/pf-dropdown.ts +++ b/elements/pf-dropdown/pf-dropdown.ts @@ -31,6 +31,7 @@ export class PfDropdownSelectEvent extends Event { /** * A **dropdown** presents a menu of actions or links in a constrained space that * will trigger a process or navigate to a new location. + * @alias Dropdown * @slot - Must contain one or more `` or `` * @slot toggle - Custom toggle button * @slot menu - when using a custom toggle, you must slot a `` in alongside it diff --git a/elements/pf-icon/demo/pf-icon.html b/elements/pf-icon/demo/index.html similarity index 100% rename from elements/pf-icon/demo/pf-icon.html rename to elements/pf-icon/demo/index.html diff --git a/elements/pf-icon/pf-icon.ts b/elements/pf-icon/pf-icon.ts index 5e59651acc..a767057341 100644 --- a/elements/pf-icon/pf-icon.ts +++ b/elements/pf-icon/pf-icon.ts @@ -36,6 +36,7 @@ export class IconResolveError extends ErrorEvent { /** * An **icon** component is a container that allows for icons of varying dimensions to * seamlessly replace each other without shifting surrounding content. + * @alias Icon * @slot - Slotted content is used as a fallback in case the icon doesn't load * @fires load - Fired when an icon is loaded and rendered * @fires error - Fired when an icon fails to load diff --git a/elements/pf-jump-links/demo/pf-jump-links.html b/elements/pf-jump-links/demo/index.html similarity index 100% rename from elements/pf-jump-links/demo/pf-jump-links.html rename to elements/pf-jump-links/demo/index.html diff --git a/elements/pf-jump-links/pf-jump-links.ts b/elements/pf-jump-links/pf-jump-links.ts index 9f9ba022a7..2a280783cd 100644 --- a/elements/pf-jump-links/pf-jump-links.ts +++ b/elements/pf-jump-links/pf-jump-links.ts @@ -13,6 +13,7 @@ import style from './pf-jump-links.css'; /** * **Jump links** allow users to navigate to sections within a page. + * @alias Jump Links * @fires toggle - when the `expanded` disclosure widget is toggled * @slot - Place pf-jump-links-items here * @cssprop --pf-c-jump-links__list--Display diff --git a/elements/pf-label/demo/pf-label.html b/elements/pf-label/demo/index.html similarity index 100% rename from elements/pf-label/demo/pf-label.html rename to elements/pf-label/demo/index.html diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts index 244bb4b4fc..b97a190d79 100644 --- a/elements/pf-label/pf-label.ts +++ b/elements/pf-label/pf-label.ts @@ -19,6 +19,7 @@ export class LabelCloseEvent extends Event { * The **label** component allows users to add specific element captions for user * clarity and convenience. * @summary Allows users to display meta data in a stylized form. + * @alias Label * @fires {LabelCloseEvent} close - when a removable label's close button is clicked * @cssprop {} [--pf-c-label--FontSize=0.875em] * @cssprop {} [--pf-c-label--PaddingTop=0.25rem] diff --git a/elements/pf-modal/demo/pf-modal.html b/elements/pf-modal/demo/index.html similarity index 100% rename from elements/pf-modal/demo/pf-modal.html rename to elements/pf-modal/demo/index.html diff --git a/elements/pf-modal/pf-modal.ts b/elements/pf-modal/pf-modal.ts index 74f2156422..3c89e31a1b 100644 --- a/elements/pf-modal/pf-modal.ts +++ b/elements/pf-modal/pf-modal.ts @@ -38,6 +38,7 @@ export class ModalOpenEvent extends ComposedEvent { * A **modal** displays important information to a user without requiring them to navigate * to a new page. * @summary Displays information or helps a user focus on a task + * @alias Modal * @slot - The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header. * @slot header - The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6). * @slot footer - Optional footer content. Good place to put action buttons. diff --git a/elements/pf-panel/demo/pf-panel.html b/elements/pf-panel/demo/index.html similarity index 100% rename from elements/pf-panel/demo/pf-panel.html rename to elements/pf-panel/demo/index.html diff --git a/elements/pf-panel/pf-panel.ts b/elements/pf-panel/pf-panel.ts index 4d5024c0f2..54561fb0b4 100644 --- a/elements/pf-panel/pf-panel.ts +++ b/elements/pf-panel/pf-panel.ts @@ -11,6 +11,7 @@ import styles from './pf-panel.css'; * be used to house other components such as fields, forms, videos, buttons, and more. * The panel should not be confused with the [drawer](https://www.patternfly.org/v4/components/drawer/design-guidelines/) * component, which allows you to surface information via a collapsable container. + * @alias Panel * @slot header - Place header content here * @slot - Place main content here * @slot footer - Place footer content here diff --git a/elements/pf-popover/demo/pf-popover.html b/elements/pf-popover/demo/index.html similarity index 100% rename from elements/pf-popover/demo/pf-popover.html rename to elements/pf-popover/demo/index.html diff --git a/elements/pf-popover/pf-popover.ts b/elements/pf-popover/pf-popover.ts index d2c7fbf05e..aab3fa963f 100644 --- a/elements/pf-popover/pf-popover.ts +++ b/elements/pf-popover/pf-popover.ts @@ -48,6 +48,7 @@ export class PopoverShownEvent extends ComposedEvent { /** * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links. * @summary Toggle the visibility of helpful or contextual information. + * @alias Popover * @slot - * The default slot holds invoking element. * Typically this would be an icon, button, or other small sized element. diff --git a/elements/pf-progress-stepper/demo/pf-progress-stepper.html b/elements/pf-progress-stepper/demo/index.html similarity index 100% rename from elements/pf-progress-stepper/demo/pf-progress-stepper.html rename to elements/pf-progress-stepper/demo/index.html diff --git a/elements/pf-progress-stepper/pf-progress-stepper.ts b/elements/pf-progress-stepper/pf-progress-stepper.ts index e02c55b3bb..390e86257a 100644 --- a/elements/pf-progress-stepper/pf-progress-stepper.ts +++ b/elements/pf-progress-stepper/pf-progress-stepper.ts @@ -11,6 +11,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js'; /** * A **progress stepper** displays a timeline of tasks in a workflow and tracks the user's current progress through this workflow. + * @alias Progress Stepper * @cssprop [--pf-c-progress-stepper--m-vertical--GridAutoFlow=row] * @cssprop [--pf-c-progress-stepper--m-vertical--GridTemplateColumns=auto 1fr] * @cssprop [--pf-c-progress-stepper--m-vertical__step-connector--before--Top=0] diff --git a/elements/pf-progress/demo/pf-progress.html b/elements/pf-progress/demo/index.html similarity index 100% rename from elements/pf-progress/demo/pf-progress.html rename to elements/pf-progress/demo/index.html diff --git a/elements/pf-progress/pf-progress.ts b/elements/pf-progress/pf-progress.ts index 9746bb0dd1..5a75bbfcca 100644 --- a/elements/pf-progress/pf-progress.ts +++ b/elements/pf-progress/pf-progress.ts @@ -17,6 +17,7 @@ const ICONS = new Map(Object.entries({ /** * A progress bar gives the user a visual representation of their completion status of an ongoing process or task. * @summary Display completion status of ongoing process or task. + * @alias Progress * @cssprop {} [--pf-c-progress--GridGap=1rem] * Gap between the sections of the progress bar. * diff --git a/elements/pf-search-input/demo/pf-search-input.html b/elements/pf-search-input/demo/index.html similarity index 100% rename from elements/pf-search-input/demo/pf-search-input.html rename to elements/pf-search-input/demo/index.html diff --git a/elements/pf-search-input/pf-search-input.ts b/elements/pf-search-input/pf-search-input.ts index 46c6e35178..fe0fb9a192 100644 --- a/elements/pf-search-input/pf-search-input.ts +++ b/elements/pf-search-input/pf-search-input.ts @@ -34,6 +34,7 @@ export class PfSearchChangeEvent extends Event { * remove the current input, allowing users to start a new search quickly. * * @summary Allows users to search through a list for specific search terms + * @alias Search Input * * @fires open - when the menu toggles open * @fires close - when the menu toggles closed diff --git a/elements/pf-select/demo/pf-select.html b/elements/pf-select/demo/index.html similarity index 100% rename from elements/pf-select/demo/pf-select.html rename to elements/pf-select/demo/index.html diff --git a/elements/pf-select/pf-select.ts b/elements/pf-select/pf-select.ts index e32edb14d7..3f0395b43e 100644 --- a/elements/pf-select/pf-select.ts +++ b/elements/pf-select/pf-select.ts @@ -36,6 +36,7 @@ export class PfSelectChangeEvent extends Event { * A select component consists of a toggle control to open and close a menu of actions or links. * Selects differ from dropdowns in that they persist selection, * whereas dropdowns are typically used to present a list of actions or links. + * @alias Select * @slot - insert `pf-option` and/or `pf-option-groups` here * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute. * @fires open - when the menu toggles open diff --git a/elements/pf-spinner/demo/pf-spinner.html b/elements/pf-spinner/demo/index.html similarity index 100% rename from elements/pf-spinner/demo/pf-spinner.html rename to elements/pf-spinner/demo/index.html diff --git a/elements/pf-spinner/pf-spinner.ts b/elements/pf-spinner/pf-spinner.ts index 146e5629bd..8301d29edd 100644 --- a/elements/pf-spinner/pf-spinner.ts +++ b/elements/pf-spinner/pf-spinner.ts @@ -10,6 +10,7 @@ import styles from './pf-spinner.css'; /** * A **spinner** is used to indicate to users that an action is in progress. For actions * that may take a long time, use a progress bar instead. + * @alias Spinner * @cssprop {} [--pf-c-spinner--diameter=3.375rem] * @cssprop {} [--pf-c-spinner--Width=3.375rem] * @cssprop {} [--pf-c-spinner--Height=3.375rem] diff --git a/elements/pf-switch/demo/pf-switch.html b/elements/pf-switch/demo/index.html similarity index 100% rename from elements/pf-switch/demo/pf-switch.html rename to elements/pf-switch/demo/index.html diff --git a/elements/pf-switch/pf-switch.ts b/elements/pf-switch/pf-switch.ts index 1717408d7e..019dc48adf 100644 --- a/elements/pf-switch/pf-switch.ts +++ b/elements/pf-switch/pf-switch.ts @@ -10,6 +10,7 @@ import styles from './pf-switch.css'; * A **switch** toggles the state of a setting (between on and off). Switches and * checkboxes can often be used interchangeably, but the switch provides a more * explicit, visible representation on a setting. + * @alias Switch * @fires {Event} change - Fires when the switch selection changes. * @cssprop [--pf-c-switch--FontSize=1rem] * @cssprop {} [--pf-c-switch--ColumnGap=1rem] diff --git a/elements/pf-table/demo/pf-table.html b/elements/pf-table/demo/index.html similarity index 100% rename from elements/pf-table/demo/pf-table.html rename to elements/pf-table/demo/index.html diff --git a/elements/pf-table/pf-table.ts b/elements/pf-table/pf-table.ts index 94034a1ee1..db71e7c6ec 100644 --- a/elements/pf-table/pf-table.ts +++ b/elements/pf-table/pf-table.ts @@ -28,6 +28,7 @@ const rowQuery = [ /** * A **table** is used to display large data sets that can be easily laid out in a simple grid with column headers. + * @alias Table * @slot * The default slot can hold an optional `pf-caption` element and a combination of `pf-tr`, `pf-thead`, or `pf-tbody` elements. * @cssprop {} [--pf-c-table--BackgroundColor=#fff] diff --git a/elements/pf-tabs/demo/pf-tabs.html b/elements/pf-tabs/demo/index.html similarity index 100% rename from elements/pf-tabs/demo/pf-tabs.html rename to elements/pf-tabs/demo/index.html diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts index fd481f255e..a7281c7cb5 100644 --- a/elements/pf-tabs/pf-tabs.ts +++ b/elements/pf-tabs/pf-tabs.ts @@ -24,6 +24,7 @@ import { observes } from '@patternfly/pfe-core/decorators/observes.js'; /** * **Tabs** allow users to navigate between views within the same page or context. + * @alias Tabs * @csspart container - outer container * @csspart tabs-container - tabs container * @csspart tabs - tablist diff --git a/elements/pf-text-area/demo/pf-text-area.html b/elements/pf-text-area/demo/index.html similarity index 100% rename from elements/pf-text-area/demo/pf-text-area.html rename to elements/pf-text-area/demo/index.html diff --git a/elements/pf-text-area/pf-text-area.ts b/elements/pf-text-area/pf-text-area.ts index 54d058f496..498535fcde 100644 --- a/elements/pf-text-area/pf-text-area.ts +++ b/elements/pf-text-area/pf-text-area.ts @@ -11,6 +11,7 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; /** * A **text area** component is used for entering a paragraph of text that is longer than one line. + * @alias Text Area * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] - * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] - * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] - diff --git a/elements/pf-text-input/demo/pf-text-input.html b/elements/pf-text-input/demo/index.html similarity index 100% rename from elements/pf-text-input/demo/pf-text-input.html rename to elements/pf-text-input/demo/index.html diff --git a/elements/pf-text-input/pf-text-input.ts b/elements/pf-text-input/pf-text-input.ts index 9f2867fb36..14f641e170 100644 --- a/elements/pf-text-input/pf-text-input.ts +++ b/elements/pf-text-input/pf-text-input.ts @@ -10,6 +10,7 @@ import styles from './pf-text-input.css'; /** * A **text input** is used to gather free-form text from a user. + * @alias Text Input * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] - * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] - * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] - diff --git a/elements/pf-tile/demo/pf-tile.html b/elements/pf-tile/demo/index.html similarity index 100% rename from elements/pf-tile/demo/pf-tile.html rename to elements/pf-tile/demo/index.html diff --git a/elements/pf-tile/pf-tile.ts b/elements/pf-tile/pf-tile.ts index e5313357f0..755abe0ce8 100644 --- a/elements/pf-tile/pf-tile.ts +++ b/elements/pf-tile/pf-tile.ts @@ -15,6 +15,7 @@ export type StackedSize = ( * [selectable card](../card/). However, tiles are used specifically when the user is selecting * a static option, whereas a selectable card triggers an action or opens a quickstart * or sidebar to provide additional information. + * @alias Tile * @slot icon - Icon expects a `` or `` * @slot title - the title of the tile should be a heading * @slot - The content should be a paragraph diff --git a/elements/pf-timestamp/demo/pf-timestamp.html b/elements/pf-timestamp/demo/index.html similarity index 100% rename from elements/pf-timestamp/demo/pf-timestamp.html rename to elements/pf-timestamp/demo/index.html diff --git a/elements/pf-timestamp/pf-timestamp.ts b/elements/pf-timestamp/pf-timestamp.ts index 2229106228..f8d86aad4f 100644 --- a/elements/pf-timestamp/pf-timestamp.ts +++ b/elements/pf-timestamp/pf-timestamp.ts @@ -19,6 +19,7 @@ const BooleanStringConverter: ComplexAttributeConverter = { /** * A **timestamp** provides consistent formats for displaying date and time values. + * @alias Timestamp */ @customElement('pf-timestamp') export class PfTimestamp extends LitElement { diff --git a/elements/pf-tooltip/demo/pf-tooltip.html b/elements/pf-tooltip/demo/index.html similarity index 100% rename from elements/pf-tooltip/demo/pf-tooltip.html rename to elements/pf-tooltip/demo/index.html diff --git a/elements/pf-tooltip/pf-tooltip.ts b/elements/pf-tooltip/pf-tooltip.ts index f89beba20d..55be908b2b 100644 --- a/elements/pf-tooltip/pf-tooltip.ts +++ b/elements/pf-tooltip/pf-tooltip.ts @@ -23,6 +23,7 @@ const ExitEvents = ['focusout', 'blur', 'mouseleave']; * A **tooltip** is in-app messaging used to identify elements on a page with short, * clarifying text. * @summary Toggle the visibility of helpful or contextual information. + * @alias Tooltip * @slot * This slot wraps around the element that should be used to invoke the tooltip content to display. * Typically this would be an icon, button, or other small sized element. From 5fde074f345cbb0a796772a36e8281bdd8cc1d5a Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Fri, 8 Aug 2025 07:53:34 +0300 Subject: [PATCH 02/17] docs: move slot jsdoc to inline --- elements/.config/cem.yaml | 2 +- elements/pf-accordion/pf-accordion.ts | 3 +-- elements/pf-back-to-top/pf-back-to-top.ts | 8 ++++---- .../pf-background-image/pf-background-image.ts | 2 +- elements/pf-banner/pf-banner.ts | 6 ++---- elements/pf-card/pf-card.ts | 16 ++++------------ elements/pf-chip/pf-chip.ts | 4 ++-- .../pf-clipboard-copy/pf-clipboard-copy.ts | 3 +-- elements/pf-code-block/pf-code-block.ts | 8 +------- elements/pf-dropdown/pf-dropdown.ts | 6 +++--- elements/pf-icon/pf-icon.ts | 3 +-- elements/pf-jump-links/pf-jump-links.ts | 3 ++- elements/pf-label/pf-label.ts | 6 ++---- elements/pf-modal/pf-modal.ts | 6 +++--- elements/pf-panel/pf-panel.ts | 6 +++--- elements/pf-popover/pf-popover.ts | 18 +++++------------- elements/pf-select/pf-select.ts | 5 ++--- elements/pf-table/pf-table.ts | 3 +-- elements/pf-tabs/pf-tabs.ts | 4 ++-- elements/pf-tile/pf-tile.ts | 6 +++--- elements/pf-tooltip/pf-tooltip.ts | 8 ++------ 21 files changed, 46 insertions(+), 80 deletions(-) diff --git a/elements/.config/cem.yaml b/elements/.config/cem.yaml index 39c88ae3d6..a9ca07ef88 100644 --- a/elements/.config/cem.yaml +++ b/elements/.config/cem.yaml @@ -10,5 +10,5 @@ generate: noDefaultExcludes: false demoDiscovery: fileGlob: '*/demo/*.html' - urlPattern: :tag/demo/:demo.html + urlPattern: ':tag/demo/:demo.html' urlTemplate: https://patternflyelements.org/components/{{.tag | alias | slug}}/demo/{{.demo | slug}}/ diff --git a/elements/pf-accordion/pf-accordion.ts b/elements/pf-accordion/pf-accordion.ts index 48d2ee4672..cd5bc5f51f 100644 --- a/elements/pf-accordion/pf-accordion.ts +++ b/elements/pf-accordion/pf-accordion.ts @@ -40,8 +40,6 @@ export class PfAccordionCollapseEvent extends Event { * @alias Accordion * @fires {AccordionExpandEvent} expand - when a panel expands * @fires {AccordionCollapseEvent} collapse - when a panel collapses - * @slot - * Place the `pf-accordion-header` and `pf-accordion-panel` elements here. * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)] * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)] * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)] @@ -186,6 +184,7 @@ export class PfAccordion extends LitElement { render(): TemplateResult<1> { return html` + `; } diff --git a/elements/pf-back-to-top/pf-back-to-top.ts b/elements/pf-back-to-top/pf-back-to-top.ts index 3a8a58349d..6d34b85087 100644 --- a/elements/pf-back-to-top/pf-back-to-top.ts +++ b/elements/pf-back-to-top/pf-back-to-top.ts @@ -15,10 +15,6 @@ import styles from './pf-back-to-top.css'; * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page. * @alias Back to Top * @csspart trigger - The `` or `` element - * @slot icon - * Contains the prefix icon to display before the link or button. - * @slot - * Text to display inside the link or button. * @cssprop {} [--pf-c-back-to-top--Right=3rem`] * @cssprop {} [--pf-c-back-to-top--Bottom=1.5rem`] * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)] @@ -114,7 +110,9 @@ export class PfBackToTop extends LitElement { if (this.href) { return html` + + @@ -129,8 +127,10 @@ export class PfBackToTop extends LitElement { part="trigger" label="${ifDefined(this.#ariaLabel)}" > + + diff --git a/elements/pf-background-image/pf-background-image.ts b/elements/pf-background-image/pf-background-image.ts index cb28cf1be4..4927342202 100644 --- a/elements/pf-background-image/pf-background-image.ts +++ b/elements/pf-background-image/pf-background-image.ts @@ -12,7 +12,6 @@ import styles from './pf-background-image.css'; * A **background image** allows you to place an image in the background of your page or area of a page. * @summary Allows users to place an image in the background of your page or area of a page. * @alias Background Image - * @slot filter - Overrides the default svg filter for the background image. * @cssprop {} [--pf-c-background-image--BackgroundColor=#151515] * @cssprop [--pf-c-background-image--Filter=url("#image_overlay")] * @cssprop --pf-c-background-image--BackgroundImage @@ -83,6 +82,7 @@ export class PfBackgroundImage extends LitElement { return html`
${!this.filter ? html`` : html` + ${(this.#svg && this.#updated) ? this.#svg : html` diff --git a/elements/pf-banner/pf-banner.ts b/elements/pf-banner/pf-banner.ts index a070d66217..14bc339f1c 100644 --- a/elements/pf-banner/pf-banner.ts +++ b/elements/pf-banner/pf-banner.ts @@ -36,10 +36,6 @@ export type BannerVariant = ( * @cssprop [--pf-c-banner--m-sticky--ZIndex=300] * @cssprop [--pf-c-banner--m-sticky--BoxShadow=0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)] * @csspart container - The container of the banner - * @slot icon - * Contains the labels's icon, e.g. web-icon-alert-success. - * @slot - * Contains the text for the banner */ @customElement('pf-banner') export class PfBanner extends LitElement { @@ -69,9 +65,11 @@ export class PfBanner extends LitElement { return html`
+ ${!this.icon ? '' : html` `} +
`; diff --git a/elements/pf-card/pf-card.ts b/elements/pf-card/pf-card.ts index 8ca6d4aba8..080fa9dad1 100644 --- a/elements/pf-card/pf-card.ts +++ b/elements/pf-card/pf-card.ts @@ -15,18 +15,6 @@ import style from './pf-card.css'; * like card views, or for positioning content on a page. * @summary Gives a preview of information in a small layout * @alias Card - * @slot header - * When included, defines the contents of a card. Card headers can contain images as well as - * the title of a card and an actions menu represented by the right-aligned kebab. - * In most cases, your card should include a header. The only exceptions are when cards being - * used as a layout element to create a white background behind other content. - * @slot title - * Communicates the title of a card if it's not included in the header. - * If a card will be utilized as a selectable and clickable card, the title needs to be made as a linked text to trigger action and indicate interaction. - * @slot - Body. Provides details about the item. A card body can include any combination of static - * text and/or active content. - * @slot footer - * Contains external links, actions, or static text at the bottom of a card. * @csspart header - The container for *header* content * @csspart body - The container for *body* content * @csspart footer - The container for *footer* content @@ -89,17 +77,21 @@ export class PfCard extends LitElement {
+
+
diff --git a/elements/pf-chip/pf-chip.ts b/elements/pf-chip/pf-chip.ts index cfc1fbef8d..068d248308 100644 --- a/elements/pf-chip/pf-chip.ts +++ b/elements/pf-chip/pf-chip.ts @@ -18,8 +18,6 @@ export class PfChipRemoveEvent extends Event { * @alias Chip * @fires {ChipRemoveEvent} remove - Fires when chip is removed * @fires {Event} click - when close button is clicked - * @slot - * chip text * @csspart text - container for chip text * @cssprop [--pf-c-chip--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)] * @cssprop [--pf-c-chip--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)] @@ -67,12 +65,14 @@ export class PfChip extends LitElement { return this.overflowChip ? html` ` : html`
+ ${this.#copied ? this.clickTip : this.hoverTip} +