Skip to content

feat(button): expose button part #2470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bennypowers merged 9 commits into from
Apr 26, 2023
Merged

feat(button): expose button part #2470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a918a83
feat: expose new CSS var on the block variant
eyevana Apr 4, 2023
aa3a7cc
refactor: expose part on button instead
eyevana Apr 17, 2023
0641923
Merge branch 'main' into feat/pf-button/expose-css-var
eyevana Apr 17, 2023
a3d44ed
docs: add changeset
bennypowers Apr 21, 2023
b5f94ca
docs: add jsdoc for new part
eyevana Apr 21, 2023
b98f3df
docs: reword description
eyevana Apr 21, 2023
d415f80
Merge branch 'main' into feat/pf-button/expose-css-var
bennypowers Apr 22, 2023
c32f458
Merge branch 'main' into feat/pf-button/expose-css-var
bennypowers Apr 25, 2023
b2a1b94
Merge branch 'main' into feat/pf-button/expose-css-var
eyevana Apr 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/plenty-clouds-exist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@patternfly/elements": minor
---

`<pf-button>`: expose `button` part for styling the internal button element
7 changes: 4 additions & 3 deletions elements/pf-button/BaseButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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>
Expand Down