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/stateful.html

@@ -35,6 +35,7 @@
     iconBtn.loading = !iconBtn.loading;
   });
 </script>
+
 <style>
   section {
     padding: 1em;

elements/pf-button/demo/variants.html

@@ -19,10 +19,10 @@ <h2>Disabled</h2>
 
 <section>
   <h2>Link variant</h2>
-  <pf-button variant="link" icon="plus-circle">Link</pf-button>
-  <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" icon="plus-circle" href="#link">Link</pf-button>
+  <pf-button variant="link" icon="link" icon-position="right" href="#icon-link">Link</pf-button>
+  <pf-button variant="link" inline href="#inline-link">Inline Link</pf-button>
+  <pf-button variant="link" danger href="#danger-link">Danger Link</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

@@ -10,15 +10,6 @@
     var(--pf-global--FontWeight--normal, 400));
   line-height: var(--pf-c-button--LineHeight,
     var(--pf-global--LineHeight--md, 1.5));
-  padding:
-    var(--pf-c-button--PaddingTop,
-      var(--pf-global--spacer--form-element, 0.375rem))
-    var(--pf-c-button--PaddingRight,
-      var(--pf-global--spacer--md, 1rem))
-    var(--pf-c-button--PaddingBottom,
-      var(--pf-global--spacer--form-element, 0.375rem))
-    var(--pf-c-button--PaddingLeft,
-      var(--pf-global--spacer--md, 1rem));
   display: inline-block;
   height: max-content;
   cursor: pointer;
@@ -51,9 +42,23 @@ pf-icon,
   vertical-align: var(--_button-icon-vertical-align);
 }
 
+#icon {
+  margin-inline-end: var(--pf-c-button__icon--m-start--MarginRight,
+      var(--pf-global--spacer--xs, 0.25rem));
+}
+
 #button {
-  display: contents;
+  display: inline-block;
   color: var(--_button-color);
+  padding:
+    var(--pf-c-button--PaddingTop,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-button--PaddingBottom,
+      var(--pf-global--spacer--form-element, 0.375rem))
+    var(--pf-c-button--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
   &::before,
   &::after {
     position: absolute;
@@ -72,6 +77,12 @@ pf-icon,
     border-color: var(--pf-c-button--after--BorderColor);
     border-radius: var(--pf-c-button--after--BorderRadius);
   }
+  &.anchor {
+    text-decoration: none;
+    &::after {
+      pointer-events: all;
+    }
+  }
 }
 
 #text {
@@ -273,7 +284,7 @@ pf-icon,
  *                            *
  ******************************/
 
-:host([loading]) {
+:host([loading]) #button {
   position: relative;
   display: flex;
   align-items: center;

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.removeAttribute('tabindex');
+      this.#internals.role = 'none';
+    } else {
+      this.tabIndex = 0;
+      this.#internals.role = 'button';
+    }
   }
 
   async formDisabledCallback(): Promise<void> {
@@ -231,9 +244,46 @@ 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;
-    return html`
+
+    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>
+    `;
+
+    if (variant === 'link' && href) {
+      return html`
+        <a id="button"
+           href="${href}"
+           target="${ifDefined(target)}"
+           class="${classMap({
+                        [variant]: true,
+                        [size ?? '']: !!size,
+                        anchor: true,
+                        inline,
+                        block,
+                        danger,
+                        disabled,
+                        hasIcon,
+                        loading,
+                        plain,
+                        warning,
+                      })}">${content}</a>`;
+    } else {
+      return html`
       <div id="button"
            class="${classMap({
              [variant]: true,
@@ -246,22 +296,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>
-      </div>
-    `;
+           })}">${content}</div>`;
+    }
   }
 
   #onClick() {