feat(button): expose button part (#2470)

* feat: expose new CSS var on the block variant

* refactor: expose part on button instead

* docs: add changeset

* docs: add jsdoc for new part

* docs: reword description

---------

Co-authored-by: Benny Powers <[email protected]>

Author: eyevana

.changeset/plenty-clouds-exist.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": minor
+---
+
+`<pf-button>`: expose `button` part for styling the internal button element

elements/pf-button/BaseButton.ts

@@ -9,7 +9,7 @@ import styles from './BaseButton.css';
 
 /**
  * Base button class
- *
+ * @csspart button - Internal button element
  * @csspart icon - Container for the icon slot
  * @slot icon
  *       Contains the button's icon or state indicator, e.g. a spinner.
@@ -57,10 +57,11 @@ export abstract class BaseButton extends LitElement {
   override render() {
     const { hasIcon } = this;
     return html`
-      <button type="${ifDefined(this.type)}"
+      <button aria-label="${ifDefined(this.label)}"
               class="${classMap({ hasIcon })}"
+              part="button"
+              type="${ifDefined(this.type)}"
               value="${ifDefined(this.value)}"
-              aria-label="${ifDefined(this.label)}"
               @click="${this.#onClick}"
               ?disabled="${this.disabled || this.#internals.formDisabled}">
         <slot id="icon" part="icon" aria-hidden="true" name="icon">${this.renderDefaultIcon()}</slot>