@ni/nimble-components 11.1.1 → 11.2.0

package/dist/esm/number-field/index.d.ts

@@ -1,4 +1,5 @@
 import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+import { NumberFieldAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-number-field': NumberField;
@@ -8,4 +9,6 @@ declare global {
  * A nimble-styled HTML number input
  */
 export declare class NumberField extends FoundationNumberField {
+    appearance: NumberFieldAppearance;
+    connectedCallback(): void;
 }

package/dist/esm/number-field/index.js

@@ -1,11 +1,25 @@
+import { __decorate } from "tslib";
+import { attr, html } from '@microsoft/fast-element';
 import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
-import { arrowExpanderDown16X16, arrowExpanderUp16X16 } from '@ni/nimble-tokens/dist/icons/js';
 import { styles } from './styles';
+import { NumberFieldAppearance } from './types';
 /**
  * A nimble-styled HTML number input
  */
 export class NumberField extends FoundationNumberField {
+    constructor() {
+        super(...arguments);
+        this.appearance = NumberFieldAppearance.underline;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148
+        this.control.setAttribute('role', 'spinbutton');
+    }
 }
+__decorate([
+    attr
+], NumberField.prototype, "appearance", void 0);
 /**
  * A function that returns a number-field registration for configuring the component with a DesignSystem.
  *
@@ -22,8 +36,28 @@ const nimbleNumberField = NumberField.compose({
     shadowOptions: {
         delegatesFocus: true
     },
-    stepDownGlyph: arrowExpanderDown16X16.data,
-    stepUpGlyph: arrowExpanderUp16X16.data
+    stepDownGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Decrement"
+            <nimble-icon-minus-wide slot="start"></nimble-icon-minus-wide>
+        </nimble-button>
+    `,
+    stepUpGlyph: html `
+        <nimble-button
+            class="step-up-down-button"
+            appearance="ghost"
+            content-hidden
+            tabindex="-1"
+        >
+            "Increment"
+            <nimble-icon-add slot="start"></nimble-icon-add>
+        </nimble-button>
+    `
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 //# sourceMappingURL=index.js.map

package/dist/esm/number-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACH,sBAAsB,EACtB,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;CAAG;AAEzD;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,sBAAsB,CAAC,IAAI;IAC1C,WAAW,EAAE,oBAAoB,CAAC,IAAI;CACzC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEpC,mBAAmB,IAAI,QAAQ,EAClC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQhD;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,qBAAqB;IAAtD;;QAEW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAQ/E,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AARG;IADC,IAAI;+CACsE;AAU/E;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAA;;;;;;;;;;KAUlB;IACD,WAAW,EAAE,IAAI,CAAA;;;;;;;;;;KAUhB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

package/dist/esm/number-field/styles.js

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColor, borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, iconSize, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding } from '../theme-provider/design-tokens';
+import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, fillSelectedRgbPartialColor, controlLabelFont, controlLabelFontColor, labelHeight, smallDelay, bodyFont, failColor, standardPadding, controlLabelDisabledFontColor } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { NumberFieldAppearance } from './types';
 export const styles = css `
     ${display('inline-block')}
 
@@ -24,6 +26,10 @@ export const styles = css `
         font: ${controlLabelFont};
     }
 
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
@@ -31,7 +37,7 @@ export const styles = css `
         flex-direction: row;
         justify-content: center;
         border-radius: 0px;
-        border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         gap: calc(${standardPadding} / 2);
     }
 
@@ -39,9 +45,8 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    :host([disabled]) .root {
+        border-color: rgba(${borderRgbPartialColor}, 0.1);
     }
 
     .root::before {
@@ -90,7 +95,7 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        height: calc(${controlHeight} - ${borderWidth});
+        height: ${controlHeight};
         width: 100%;
         border: none;
         padding: 0px;
@@ -122,24 +127,47 @@ export const styles = css `
 
     .controls {
         display: flex;
-        flex-direction: column;
-    }
-
-    .step-up,
-    .step-down {
-        display: inline-flex;
-        height: 15px;
-        width: 15px;
-        cursor: pointer;
+        flex-direction: row-reverse;
         justify-content: center;
         align-items: center;
     }
 
-    .step-up svg,
-    .step-down svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        fill: ${borderColor};
-    }
-`;
+    .step-up-down-button {
+        ${controlHeight.cssCustomProperty}: 24px;
+    }
+`.withBehaviors(appearanceBehavior(NumberFieldAppearance.underline, css `
+            .root {
+                border-bottom-width: ${borderWidth};
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `), appearanceBehavior(NumberFieldAppearance.block, css `
+            .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.1);
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root {
+                border-bottom-width: ${borderWidth};
+            }
+
+            :host([disabled]) .root {
+                background-color: rgba(${borderRgbPartialColor}, 0.07);
+            }
+        `), appearanceBehavior(NumberFieldAppearance.outline, css `
+            .root {
+                border-width: ${borderWidth};
+            }
+
+            .control {
+                height: calc(${controlHeight} - 2 * ${borderWidth});
+            }
+        `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/number-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,QAAQ,EACR,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;;;;;;;yBAUP,WAAW,eAAe,qBAAqB;oBACpD,eAAe;;;;+BAIJ,gBAAgB;;;;;yBAKtB,WAAW,UAAU,qBAAqB;;;;UAIzD,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;uBAoBjB,aAAa,MAAM,WAAW;;;;;;;;;;;;;;iBAcpC,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;;;;;kBAoBpB,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,2BAA2B,EAC3B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,SAAS,EACT,eAAe,EACf,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;iBAGP,aAAa;uBACP,WAAW,MAAM,aAAa;mDACF,WAAW;;;;iBAI7C,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;oBAClC,eAAe;;;;+BAIJ,gBAAgB;;;;6BAIlB,qBAAqB;;;;UAIxC,CAAA,yCAA0C,EAAE;;;;;;;;;;4BAU1B,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;kBAoBtB,aAAa;;;;;;;;;;;;;;iBAcd,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;UAW5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAEwB,WAAW;+BACnB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;+BAIb,aAAa,UAAU,WAAW;;SAExD,CACA,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE0B,qBAAqB;gCAC9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;yCAIT,qBAAqB;;SAErD,CACA,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEiB,WAAW;;;;+BAIZ,aAAa,UAAU,WAAW;;SAExD,CACA,CACJ,CAAC"}

package/dist/esm/number-field/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Values for the 'appearance' property of the number field
+ */
+export declare const NumberFieldAppearance: {
+    readonly underline: "underline";
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export declare type NumberFieldAppearance = typeof NumberFieldAppearance[keyof typeof NumberFieldAppearance];

package/dist/esm/number-field/types.js

@@ -0,0 +1,9 @@
+/**
+ * Values for the 'appearance' property of the number field
+ */
+export const NumberFieldAppearance = {
+    underline: 'underline',
+    outline: 'outline',
+    block: 'block'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/number-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/number-field/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.1.1",
+  "version": "11.2.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",