fix(button)!: remove BaseButton

Closes #2616
patternfly · Oct 19, 2023 · 003666f · 003666f
1 parent 24d43bd
commit 003666f
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 198 deletions.
diff --git a/.changeset/remove-basebutton.md b/.changeset/remove-basebutton.md
@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": major
+---
+`<pf-button>`: Removed `BaseButton` class. Reimplement (recommended) or extend `PfButton`.
diff --git a/elements/package.json b/elements/package.json
@@ -21,7 +21,6 @@
     "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js",
     "./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js",
     "./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js",
-    "./pf-button/BaseButton.js": "./pf-button/BaseButton.js",
     "./pf-button/pf-button.js": "./pf-button/pf-button.js",
     "./pf-card/BaseCard.js": "./pf-card/BaseCard.js",
     "./pf-card/pf-card.js": "./pf-card/pf-card.js",

diff --git a/elements/pf-button/BaseButton.css b/elements/pf-button/BaseButton.css
diff --git a/elements/pf-button/BaseButton.ts b/elements/pf-button/BaseButton.ts
diff --git a/elements/pf-button/pf-button.css b/elements/pf-button/pf-button.css
@@ -1,5 +1,19 @@
-/* hi */
+:host {
+  display: inline-block;
+  height: max-content;
+}
+
+:host([hidden]),
+[hidden] {
+  display: none !important;
+}
+
 button {
+  cursor: pointer;
+  position: relative;
+  font-family: inherit;
+  border-width: 0;
+  border-style: solid;
   color: var(--pf-c-button--m-primary--Color,
     var(--pf-global--Color--light-100, #fff));
   background-color: var(--pf-c-button--m-primary--BackgroundColor,
@@ -21,6 +35,56 @@ button {
       var(--pf-global--spacer--md, 1rem));
 }
 
+button::after {
+  position: absolute;
+  inset: 0 0 0 0;
+  content: "";
+  border-style: solid;
+}
+
+:host(:is(:disabled, [aria-disabled=true])),
+:host(:is(:disabled, [aria-disabled=true])) #container,
+:host(:is(:disabled, [aria-disabled=true])) button,
+:host(:is(:disabled, [aria-disabled=true])[danger]) button,
+:host(:is(:disabled, [aria-disabled=true])[variant=link]) button {
+  pointer-events: none;
+  cursor: default;
+}
+
+[part=icon] {
+  display: none;
+  pointer-events: none;
+}
+
+.hasIcon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.hasIcon [part=icon] {
+  display: inline-flex;
+  align-items: center;
+  position: absolute;
+  width: 16px;
+}
+
+:host(:not([disabled])) .hasIcon [part=icon] {
+  cursor: pointer;
+}
+
+[part=icon] ::slotted(*) {
+  width: 16px;
+  max-width: 16px;
+  height: 16px;
+  max-height: 16px;
+}
+
+.hasIcon button {
+  position: absolute;
+  inset: 0;
+}
+
 :host, button {
   border-radius: var(--pf-c-button--BorderRadius,
     var(--pf-global--BorderRadius--sm, 3px));