@patternfly/pfe-button - npm Package Compare versions

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

custom-elements.json

@@ -141,2 +141,12 @@ {
               "kind": "field",
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "attribute": "on",
+              "reflects": true
+            },
+            {
+              "kind": "field",
               "name": "logger",
@@ -236,2 +246,10 @@ "privacy": "private",
               "fieldName": "type"
+            },
+            {
+              "name": "on",
+              "type": {
+                "text": "ColorTheme | undefined"
+              },
+              "description": "Sets color theme based on parent context",
+              "fieldName": "on"
             }
@@ -238,0 +256,0 @@ ],

package.json

 {
   "name": "@patternfly/pfe-button",
-  "version": "2.0.0-next.2",
+  "version": "2.0.0-next.3",
   "license": "MIT",
@@ -71,5 +71,5 @@ "description": "Button element for PatternFly Elements",
   "dependencies": {
-    "@patternfly/pfe-core": "^2.0.0-next.3",
+    "@patternfly/pfe-core": "^2.0.0-next.4",
     "lit": "^2.1.2"
   }
 }

pfe-button.d.ts

 import { LitElement } from 'lit';
+import { ColorTheme } from '@patternfly/pfe-core';
 /**
@@ -66,2 +67,6 @@ * Buttons allow users to perform an action when triggered. They feature a text label, a background or a border, and icons.
     type?: 'button' | 'submit' | 'reset';
+    /**
+     * Sets color theme based on parent context
+     */
+    on?: ColorTheme;
     private logger;
@@ -72,2 +77,3 @@ private mo;
     render(): import("lit-html").TemplateResult<1>;
+    protected firstUpdated(): void;
     protected _typeChanged(): void;
@@ -74,0 +80,0 @@ protected _disabledChanged(): void;

pfe-button.js

@@ -1,2 +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: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};
+var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var o=(d,r,a,i)=>{for(var e=i>1?void 0:i?f(r,a):r,s=d.length-1,l;s>=0;s--)(l=d[s])&&(e=(i?l(r,a,e):l(e))||e);return i&&e&&b(r,a,e),e};import{LitElement as m,html as g}from"lit";import{customElement as y,property as n}from"lit/decorators.js";import{bound as u,colorContextConsumer as C,observed as c,pfelement as _}from"@patternfly/pfe-core/decorators.js";import{deprecatedCustomEvent as k}from"@patternfly/pfe-core/functions/deprecatedCustomEvent.js";import{Logger as B}from"@patternfly/pfe-core/controllers/logger.js";import{css as h}from"lit";var v=h`: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([on=saturated]),:host([on^=dark]){--pfe-theme--color--text:#ffffff}:host([on^=dark][variant=tertiary]){--pfe-theme--color--ui-accent:#ffffff}:host([on=saturated][variant=control]){--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border, #8a8d90)}:host([on^=dark][variant=control]){--pfe-button__after--BorderColor:var(--pfe-theme--color--ui--border--darker, #151515)}: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;import"@patternfly/pfe-core";var t=class extends m{constructor(){super(...arguments);this.disabled=!1;this.variant="primary";this.size="medium";this.logger=new B(this);this.mo=new MutationObserver(this.onMutation)}get button(){return this.querySelector("button")}connectedCallback(){this.onSlotChange(),super.connectedCallback(),this.addEventListener("click",this.onClick)}render(){return g`<span id="container" part="container" @slotchange="${this.onSlotChange}"><slot></slot></span>`}firstUpdated(){this._disabledChanged(),this.onMutation()}_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(a){a.target===this.button&&this.dispatchEvent(k("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,n({reflect:!0,type:Boolean})],t.prototype,"disabled",2),o([n({reflect:!0})],t.prototype,"variant",2),o([n({reflect:!0})],t.prototype,"size",2),o([c,n()],t.prototype,"type",2),o([C(),n({reflect:!0})],t.prototype,"on",2),o([u],t.prototype,"onClick",1),o([u],t.prototype,"onMutation",1),t=o([y("pfe-button"),_()],t);export{t as PfeButton};
 //# sourceMappingURL=pfe-button.js.map

No alert changes

Improved metrics

Total package byte prevSize

33872

increased by5.5%

Lines of code

404

increased by6.88%

Dependency changes

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