@patternfly/pfe-button - npm Package Compare versions

Comparing version 2.0.0-next.1 to 2.0.0-next.2

package.json

 {
   "name": "@patternfly/pfe-button",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.2",
   "license": "MIT",
@@ -12,10 +12,4 @@ "description": "Button element for PatternFly Elements",
   "exports": {
-    ".": {
-      "esbuild": "./pfe-button.ts",
-      "default": "./pfe-button.js"
-    },
-    "./*": {
-      "esbuild": "./*.ts",
-      "default": "./*.js"
-    }
+    ".": "./pfe-button.js",
+    "./*": "./*.js"
   },
@@ -78,5 +72,5 @@ "publishConfig": {
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.0",
+    "@patternfly/pfe-core": "^2.0.0-next.3",
     "lit": "^2.1.2"
   }
 }

pfe-button.js

@@ -1,117 +0,2 @@
-var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(i,r,d,n)=>{for(var e=n>1?void 0:n?h(r,d):r,s=i.length-1,l;s>=0;s--)(l=i[s])&&(e=(n?l(r,d,e):l(e))||e);return n&&e&&b(r,d,e),e};import{LitElement as m,html as g}from"lit";import{customElement as y,property as a}from"lit/decorators.js";import{bound as u,observed as c,pfelement as C}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as k}from"@patternfly/pfe-core/controllers/logger.js";import{css as f}from"lit";var v=f`:host {
-  display: inline-block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-#container ::slotted(button) {
-  all: unset !important;
-  background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-accent, #06c)) !important;
-  color: var(--pfe-button--Color, var(--pfe-theme--color--ui-base--text, #fff)) !important;
-  font-size: var(--pfe-button--FontSize, var(--pf-global--FontSize--md, 1rem)) !important;
-  font-family: var(--pfe-theme--font-family, inherit) !important;
-  font-weight: var(--pfe-button--FontWeight) !important;
-  padding: var(--pfe-button--Padding, calc(var(--pfe-theme--container-padding, 1rem) / 2) var(--pfe-theme--container-padding, 1rem)) !important;
-  cursor: pointer !important;
-  border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px)) !important;
-  border: var(--pfe-button--Border, 0) !important;
-  position: relative !important;
-  line-height: var(--pfe-button--LineHeight, var(--pfe-theme--line-height, 1.5)) !important;
-}
-#container ::slotted(button)::after {
-  position: absolute !important;
-  inset: 0 0 0 0 !important;
-  content: "" !important;
-  border: var(--pfe-button__after--Border, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)) !important;
-  border-radius: var(--pfe-button--BorderRadius, var(--pfe-theme--surface--border-radius, 3px)) !important;
-}
-#container ::slotted(button:hover),
-#container ::slotted(button:focus) {
-  --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));
-  --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent));
-}
-
-:host([variant=danger]) #container ::slotted(button) {
-  background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--feedback--critical--lighter, #c9190b)) !important;
-}
-:host([variant=danger]) #container ::slotted(button:hover),
-:host([variant=danger]) #container ::slotted(button:focus) {
-  --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000));
-}
-
-:host([variant=secondary]) #container ::slotted(button),
-:host([variant=tertiary]) #container ::slotted(button),
-:host([variant=control]) #container ::slotted(button) {
-  background-color: var(--pfe-button--BackgroundColor, transparent) !important;
-}
-:host([variant=secondary]) #container ::slotted(button:hover),
-:host([variant=secondary]) #container ::slotted(button:focus),
-:host([variant=tertiary]) #container ::slotted(button:hover),
-:host([variant=tertiary]) #container ::slotted(button:focus),
-:host([variant=control]) #container ::slotted(button:hover),
-:host([variant=control]) #container ::slotted(button:focus) {
-  --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, transparent);
-  --pfe-button__after--Border: var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent));
-}
-
-:host([variant=secondary]) #container ::slotted(button) {
-  color: var(--pfe-button--Color, var(--pfe-theme--color--ui-accent, #06c)) !important;
-}
-:host([variant=secondary]) #container ::slotted(button)::after {
-  border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui-accent, #06c)) !important;
-}
-
-:host([variant=tertiary]) #container ::slotted(button) {
-  color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515)) !important;
-}
-:host([variant=tertiary]) #container ::slotted(button)::after {
-  border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--text, #151515)) !important;
-}
-
-:host([variant=control]) #container ::slotted(button) {
-  color: var(--pfe-button--Color, var(--pfe-theme--color--text, #151515)) !important;
-  border-radius: var(--pfe-button--BorderRadius, 0) !important;
-}
-:host([variant=control]) #container ::slotted(button)::after {
-  border-color: var(--pfe-button__after--BorderColor, var(--pfe-theme--color--ui--border--lightest, #f0f0f0)) !important;
-  border-bottom-color: var(--pfe-theme--color--ui--border, #8a8d90) !important;
-}
-:host([variant=control]) #container ::slotted(button:hover),
-:host([variant=control]) #container ::slotted(button:focus) {
-  --pfe-button__after--BorderColor: var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0));
-}
-:host([variant=control]) #container ::slotted(button:hover)::after,
-:host([variant=control]) #container ::slotted(button:focus)::after {
-  border-bottom-width: var(--pfe-theme--ui--border-width--md, 2px) !important;
-  border-bottom-color: var(--pfe-theme--color--ui-accent, #06c) !important;
-}
-
-:host([variant=control][disabled]) #container ::slotted(button) {
-  background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--surface--lighter, #f0f0f0)) !important;
-}
-
-:host([size=large]) #container ::slotted(button) {
-  --pfe-button--FontWeight: var(--pfe-button--FontWeight--large, var(--pfe-theme--font-weight--semi-bold, 600));
-  --pfe-button--Padding: var(--pfe-button--Padding--large, 12px 24px);
-}
-
-:host([disabled]) #container ::slotted(button) {
-  background-color: var(--pfe-button--BackgroundColor, var(--pfe-theme--color--ui-disabled, #d2d2d2)) !important;
-  color: var(--pfe-button--Color, var(--pfe-theme--color--ui-disabled--text, #6a6e73)) !important;
-  pointer-events: none !important;
-}
-:host([disabled]) #container ::slotted(button)::after {
-  border: var(--pfe-button__after--Border, 0) !important;
-}
-:host([disabled]) #container ::slotted(button:hover),
-:host([disabled]) #container ::slotted(button:focus) {
-  --pfe-button--BackgroundColor: var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));
-  --pfe-button__after--Border: var(--pfe-button__after--Border--hover, 0);
-}`,p=v;var t=class extends m{constructor(){super(...arguments);this.disabled=!1;this.variant="primary";this.size="medium";this.logger=new k(this);this.mo=new MutationObserver(this.onMutation)}get button(){return this.querySelector("button")}connectedCallback(){this.onSlotChange(),this.onMutation(),super.connectedCallback(),this.addEventListener("click",this.onClick)}render(){return g`
-      <span id="container" part="container" @slotchange="${this.onSlotChange}">
-        <slot></slot>
-      </span>
-    `}_typeChanged(){this.button&&this.button.type!==this.type&&(this.type?this.button.type=this.type:this.button.removeAttribute("type"))}_disabledChanged(){this.button&&this.button.disabled!==this.disabled&&(this.button.disabled=this.disabled)}onSlotChange(){this.mo.disconnect(),this.button&&this.mo.observe(this.button,{attributes:!0,attributeFilter:["type","disabled"]})}onClick(r){r.target===this.button&&this.dispatchEvent(_("pfe-button:click"))}onMutation(){this.querySelector(":not(button)")?this.logger.warn("The only child in the light DOM must be a button tag"):this.button?(this.disabled=this.button.hasAttribute("disabled"),this.type=this.button.getAttribute("type")??void 0):this.logger.warn("You must have a button in the light DOM")}};t.version="2.0.0-next.1",t.styles=p,o([c,a({reflect:!0,type:Boolean})],t.prototype,"disabled",2),o([a({reflect:!0})],t.prototype,"variant",2),o([a({reflect:!0})],t.prototype,"size",2),o([c,a()],t.prototype,"type",2),o([u],t.prototype,"onClick",1),o([u],t.prototype,"onMutation",1),t=o([y("pfe-button"),C()],t);export{t as PfeButton};
+var b=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(i,r,d,n)=>{for(var e=n>1?void 0:n?h(r,d):r,s=i.length-1,l;s>=0;s--)(l=i[s])&&(e=(n?l(r,d,e):l(e))||e);return n&&e&&b(r,d,e),e};import{LitElement as m,html as g}from"lit";import{customElement as y,property as a}from"lit/decorators.js";import{bound as u,observed as c,pfelement as C}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as _}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as k}from"@patternfly/pfe-core/controllers/logger.js";import{css as f}from"lit";var v=f`:host{display:inline-block}:host([hidden]){display:none}#container ::slotted(button){all:unset!important;background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-accent,#06c))!important;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-base--text,#fff))!important;font-size:var(--pfe-button--FontSize, var(--pf-global--FontSize--md, 1rem))!important;font-family:var(--pfe-theme--font-family, inherit)!important;font-weight:var(--pfe-button--FontWeight)!important;padding:var(--pfe-button--Padding,calc(var(--pfe-theme--container-padding,1rem)/ 2) var(--pfe-theme--container-padding,1rem))!important;cursor:pointer!important;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))!important;border:var(--pfe-button--Border,0)!important;position:relative!important;line-height:var(--pfe-button--LineHeight, var(--pfe-theme--line-height, 1.5))!important}#container ::slotted(button)::after{position:absolute!important;inset:0 0 0 0!important;content:""!important;border:var(--pfe-button__after--Border,var(--pfe-theme--ui--border-width,1px) var(--pfe-theme--ui--border-style,solid) var(--pfe-button__after--BorderColor,transparent))!important;border-radius:var(--pfe-button--BorderRadius,var(--pfe-theme--surface--border-radius,3px))!important}#container ::slotted(button:focus),#container ::slotted(button:hover){--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-accent--hover, #004080));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent))}:host([variant=danger]) #container ::slotted(button){background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--feedback--critical--lighter,#c9190b))!important}:host([variant=danger]) #container ::slotted(button:focus),:host([variant=danger]) #container ::slotted(button:hover){--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--feedback--critical, #a30000))}:host([variant=control]) #container ::slotted(button),:host([variant=secondary]) #container ::slotted(button),:host([variant=tertiary]) #container ::slotted(button){background-color:var(--pfe-button--BackgroundColor,transparent)!important}:host([variant=control]) #container ::slotted(button:focus),:host([variant=control]) #container ::slotted(button:hover),:host([variant=secondary]) #container ::slotted(button:focus),:host([variant=secondary]) #container ::slotted(button:hover),:host([variant=tertiary]) #container ::slotted(button:focus),:host([variant=tertiary]) #container ::slotted(button:hover){--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, transparent);--pfe-button__after--Border:var(--pfe-button__after--Border--hover, var(--pfe-theme--ui--border-width--md, 2px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent))}:host([variant=secondary]) #container ::slotted(button){color:var(--pfe-button--Color,var(--pfe-theme--color--ui-accent,#06c))!important}:host([variant=secondary]) #container ::slotted(button)::after{border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui-accent,#06c))!important}:host([variant=tertiary]) #container ::slotted(button){color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))!important}:host([variant=tertiary]) #container ::slotted(button)::after{border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--text,#151515))!important}:host([variant=control]) #container ::slotted(button){color:var(--pfe-button--Color,var(--pfe-theme--color--text,#151515))!important;border-radius:var(--pfe-button--BorderRadius,0)!important}:host([variant=control]) #container ::slotted(button)::after{border-color:var(--pfe-button__after--BorderColor,var(--pfe-theme--color--ui--border--lightest,#f0f0f0))!important;border-bottom-color:var(--pfe-theme--color--ui--border,#8a8d90)!important}:host([variant=control]) #container ::slotted(button:focus),:host([variant=control]) #container ::slotted(button:hover){--pfe-button__after--BorderColor:var(--pfe-button--BorderColor--hover, var(--pfe-theme--color--ui--border--lightest, #f0f0f0))}:host([variant=control]) #container ::slotted(button:focus)::after,:host([variant=control]) #container ::slotted(button:hover)::after{border-bottom-width:var(--pfe-theme--ui--border-width--md,2px)!important;border-bottom-color:var(--pfe-theme--color--ui-accent,#06c)!important}:host([variant=control][disabled]) #container ::slotted(button){background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--surface--lighter,#f0f0f0))!important}:host([size=large]) #container ::slotted(button){--pfe-button--FontWeight:var(--pfe-button--FontWeight--large, var(--pfe-theme--font-weight--semi-bold, 600));--pfe-button--Padding:var(--pfe-button--Padding--large, 12px 24px)}:host([disabled]) #container ::slotted(button){background-color:var(--pfe-button--BackgroundColor,var(--pfe-theme--color--ui-disabled,#d2d2d2))!important;color:var(--pfe-button--Color,var(--pfe-theme--color--ui-disabled--text,#6a6e73))!important;pointer-events:none!important}:host([disabled]) #container ::slotted(button)::after{border:var(--pfe-button__after--Border,0)!important}:host([disabled]) #container ::slotted(button:focus),:host([disabled]) #container ::slotted(button:hover){--pfe-button--BackgroundColor:var(--pfe-button--BackgroundColor--hover, var(--pfe-theme--color--ui-disabled, #d2d2d2));--pfe-button__after--Border:var(--pfe-button__after--Border--hover, 0)}`,p=v;var t=class extends m{constructor(){super(...arguments);this.disabled=!1;this.variant="primary";this.size="medium";this.logger=new k(this);this.mo=new MutationObserver(this.onMutation)}get button(){return this.querySelector("button")}connectedCallback(){this.onSlotChange(),this.onMutation(),super.connectedCallback(),this.addEventListener("click",this.onClick)}render(){return g`<span id="container" part="container" @slotchange="${this.onSlotChange}"><slot></slot></span>`}_typeChanged(){this.button&&this.button.type!==this.type&&(this.type?this.button.type=this.type:this.button.removeAttribute("type"))}_disabledChanged(){this.button&&this.button.disabled!==this.disabled&&(this.button.disabled=this.disabled)}onSlotChange(){this.mo.disconnect(),this.button&&this.mo.observe(this.button,{attributes:!0,attributeFilter:["type","disabled"]})}onClick(r){r.target===this.button&&this.dispatchEvent(_("pfe-button:click"))}onMutation(){this.querySelector(":not(button)")?this.logger.warn("The only child in the light DOM must be a button tag"):this.button?(this.disabled=this.button.hasAttribute("disabled"),this.type=this.button.getAttribute("type")??void 0):this.logger.warn("You must have a button in the light DOM")}};t.version="{{version}}",t.styles=p,o([c,a({reflect:!0,type:Boolean})],t.prototype,"disabled",2),o([a({reflect:!0})],t.prototype,"variant",2),o([a({reflect:!0})],t.prototype,"size",2),o([c,a()],t.prototype,"type",2),o([u],t.prototype,"onClick",1),o([u],t.prototype,"onMutation",1),t=o([y("pfe-button"),C()],t);export{t as PfeButton};
 //# sourceMappingURL=pfe-button.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

32105

decreased by-17.01%

Lines of code

378

decreased by-18%

Dependency changes

• Updated@patternfly/pfe-core@^2.0.0-next.3