feat(button): add href for Link Variant

.changeset/popular-poets-march.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": minor
+---
+
+`<pf-button>`: Added `href` attribute to `<pf-button variant="link">`

elements/pf-button/demo/variants.html

@@ -23,6 +23,8 @@ <h2>Link variant</h2>
   <pf-button variant="link" icon="link" icon-position="right">Link</pf-button>
   <pf-button variant="link" inline>Inline Link</pf-button>
   <pf-button variant="link" danger>Danger Link</pf-button>
+  <pf-button variant="link" href="#link">Link</pf-button>
+  <pf-button variant="link" href="https://patternflyelements.org/" target="_blank" icon="location-arrow">Go to PatternFly</pf-button>
 
   <h3>Disabled</h3>
   <pf-button disabled

elements/pf-button/docs/pf-button.md

@@ -45,6 +45,8 @@ pf-button + pf-button {
   <pf-button variant="link" icon-set="patternfly" icon="arrow" icon-position="right">Link</pf-button>
   <pf-button variant="link" inline>Inline Link</pf-button>
   <pf-button variant="link" danger>Danger Link</pf-button>
+  <pf-button variant="link" href="#link">Link</pf-button>
+  <pf-button variant="link" href="https://patternflyelements.org/" target="_blank" icon="location-arrow">Go to PatternFly</pf-button>
   {% endhtmlexample %}
 
   ### Plain button

elements/pf-button/pf-button.css

@@ -74,6 +74,11 @@ pf-icon,
   }
 }
 
+#button .anchor {
+  color: inherit;
+  text-decoration: none;
+}
+
 #text {
   display: inline;
   position: relative;

elements/pf-button/pf-button.ts

@@ -204,7 +204,13 @@ export class PfButton extends LitElement {
   /** Icon set for the `icon` property */
   @property({ attribute: 'icon-set' }) iconSet?: string;
 
-  #internals = InternalsController.of(this, { role: 'button' });
+  /** Store the URL Link */
+  @property({ reflect: true }) href?: string;
+
+  /**  Redirecting the URL Link to new Tab */
+  @property({ reflect: true }) target?: string;
+
+  #internals = InternalsController.of(this, { role: this.variant === 'link' ? 'none' : 'button' });
 
   #slots = new SlotController(this, 'icon', null);
 
@@ -216,12 +222,19 @@ export class PfButton extends LitElement {
     super.connectedCallback();
     this.addEventListener('click', this.#onClick);
     this.addEventListener('keydown', this.#onKeydown);
-    this.tabIndex = 0;
   }
 
   protected override willUpdate(): void {
     this.#internals.ariaLabel = this.label || null;
     this.#internals.ariaDisabled = String(!!this.disabled);
+    const isLink = this.variant === 'link' && this.href;
+    if (isLink) {
+      this.tabIndex = -1;
+      this.#internals.role = 'none';
+    } else {
+      this.tabIndex = 0;
+      this.#internals.role = 'button';
+    }
   }
 
   async formDisabledCallback(): Promise<void> {
@@ -231,8 +244,26 @@ export class PfButton extends LitElement {
 
   override render(): TemplateResult<1> {
     const hasIcon = !!this.icon || !!this.loading || this.#slots.hasSlotted('icon');
-    const { warning, variant, danger, loading, plain, inline, block, size } = this;
+    const { warning, variant, danger, loading, plain, inline, block, size, href, target } = this;
+
     const disabled = this.#disabled;
+
+    const content = html`
+      <slot id="icon"
+            part="icon"
+            name="icon"
+            ?hidden="${!hasIcon}">
+        <pf-icon role="presentation"
+                 icon="${ifDefined(this.icon)}"
+                 set="${ifDefined(this.iconSet)}"
+                 ?hidden="${!this.icon || this.loading}"></pf-icon>
+        <pf-spinner size="md"
+                    ?hidden="${!this.loading}"
+                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
+      </slot>
+      <slot id="text"></slot>
+    `;
+
     return html`
       <div id="button"
            class="${classMap({
@@ -246,20 +277,8 @@ export class PfButton extends LitElement {
              loading,
              plain,
              warning,
-           })}">
-        <slot id="icon"
-              part="icon"
-              name="icon"
-              ?hidden="${!hasIcon}">
-          <pf-icon role="presentation"
-                   icon="${ifDefined(this.icon)}"
-                   set="${ifDefined(this.iconSet)}"
-                   ?hidden="${!this.icon || this.loading}"></pf-icon>
-          <pf-spinner size="md"
-                      ?hidden="${!this.loading}"
-                      aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-spinner>
-        </slot>
-        <slot id="text"></slot>
+           })}">${!(variant === 'link' && href) ? content : html`
+        <a href="${href}" class="anchor" target="${ifDefined(target)}">${content}</a>`}
       </div>
     `;
   }