@ni/nimble-components 1.1.2 → 1.2.0

package/dist/esm/nimble-components/src/text-field/index.d.ts

@@ -1,4 +1,5 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+import { TextFieldAppearance } from './types';
 export type { TextField };
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,4 +10,13 @@ declare global {
  * A nimble-styed HTML text input
  */
 declare class TextField extends FoundationTextField {
+    /**
+     * The appearance the text field should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextFieldAppearance;
+    connectedCallback(): void;
 }

package/dist/esm/nimble-components/src/text-field/types.d.ts

@@ -1,3 +1,21 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
-export { TextFieldType };
+/**
+ * Values for the 'type' attribute of the text field.
+ */
 export declare type TextFieldTypeAttribute = `${TextFieldType}`;
+/**
+ * Values for the 'type' property of the text field.
+ */
+export { TextFieldType };
+/**
+ * Values for the 'appearance' attribute of the text field.
+ */
+export declare type TextFieldAppearanceAttribute = `${TextFieldAppearance}`;
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export declare enum TextFieldAppearance {
+    Underline = "underline",
+    Outline = "outline",
+    Block = "block"
+}

package/dist/esm/nimble-components/src/utilities/style/appearance.d.ts

@@ -1,5 +1,4 @@
 import type { Behavior, ElementStyles } from '@microsoft/fast-element';
-import type { ButtonAppearance } from '../../patterns/button/types';
 /**
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
@@ -9,4 +8,4 @@ import type { ButtonAppearance } from '../../patterns/button/types';
  *
  * @public
  */
-export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;

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

@@ -1,4 +1,5 @@
 import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+import { TextFieldAppearance } from './types';
 export type { TextField };
 declare global {
     interface HTMLElementTagNameMap {
@@ -9,4 +10,13 @@ declare global {
  * A nimble-styed HTML text input
  */
 declare class TextField extends FoundationTextField {
+    /**
+     * The appearance the text field should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextFieldAppearance;
+    connectedCallback(): void;
 }

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

@@ -1,11 +1,23 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
 import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { styles } from './styles';
+import { TextFieldAppearance } from './types';
 /**
  * A nimble-styed HTML text input
  */
 class TextField extends FoundationTextField {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = TextFieldAppearance.Underline;
+        }
+    }
 }
+__decorate([
+    attr
+], TextField.prototype, "appearance", void 0);
 const nimbleTextField = TextField.compose({
     baseName: 'text-field',
     baseClass: FoundationTextField,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;CAAG;AAE9C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAU9C;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;IAWhC,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,mBAAmB,CAAC,SAAS,CAAC;SACnD;IACL,CAAC;CACJ;AARG;IADC,IAAI;6CACmC;AAU5C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}

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

@@ -1,6 +1,8 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
+import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgbPartial, fontFamily, iconSize, labelFontColor, labelFontColorDisabled, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { TextFieldAppearance } from './types';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
 export const styles = css `
@@ -26,41 +28,49 @@ export const styles = css `
         flex-direction: row;
         border-radius: 0px;
         font-family: ${fontFamily};
-        border-bottom: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.3);
-        padding-bottom: 1px;
         transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
         align-items: flex-end;
+        --ni-private-hover-bottom-border-width: 2px;
+        border: 0px solid rgba(${borderColorRgbPartial}, 0.3);
+        border-bottom-width: var(--ni-private-bottom-border-width);
+        padding-bottom: calc(
+            var(--ni-private-hover-bottom-border-width) -
+                var(--ni-private-bottom-border-width)
+        );
     }
 
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
+    :host .root:hover {
+        --ni-private-bottom-border-width: var(
+            --ni-private-hover-bottom-border-width
+        );
+    }
+
+    :host([disabled]) .root:hover {
+        --ni-private-bottom-border-width: 1px;
     }
 
+    .root:focus-within,
     .root:hover {
-        border-bottom: 2px solid ${borderColorHover};
-        padding-bottom: 0px;
+        border-bottom-color: ${borderColorHover};
     }
 
     :host(.invalid) .root {
-        border-bottom: ${borderWidth} solid ${failColor};
+        border-bottom-color: ${failColor};
     }
 
-    :host(.invalid) .root:hover {
-        border-bottom: 2px solid ${failColor};
-        padding-bottom: 0px;
+    :host([disabled]) .root {
+        border-color: rgba(${borderColorRgbPartial}, 0.1);
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
-        padding-bottom: 1px;
+    :host([readonly]) .root {
+        border: none;
+        padding: ${borderWidth};
     }
 
-    :host([readonly]) .root,
-    :host([readonly]) .root:hover {
-        border: none;
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
     }
 
     .control {
@@ -68,10 +78,17 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        padding-top: 0px;
+        padding-bottom: 0px;
+        height: calc(
+            ${controlHeight} - ${borderWidth} -
+                var(--ni-private-hover-bottom-border-width)
+        );
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
+        padding-left: calc(${standardPadding} / 2);
+        padding-right: calc(${standardPadding} / 2);
         border: none;
     }
 
@@ -113,6 +130,10 @@ export const styles = css `
         text-transform: ${labelTextTransform};
     }
 
+    :host([disabled]) .label {
+        color: ${labelFontColorDisabled};
+    }
+
     :host [part='end'] {
         display: none;
     }
@@ -136,7 +157,39 @@ export const styles = css `
     :host([disabled]) [part='end'] path {
         fill: ${contentFontColorDisabled};
     }
-`.withBehaviors(themeBehavior(css `
+`.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `
+            .root {
+                --ni-private-bottom-border-width: 1px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+        `), appearanceBehavior(TextFieldAppearance.Block, css `
+            .root {
+                background-color: rgba(${borderColorRgbPartial}, 0.05);
+                --ni-private-bottom-border-width: 0px;
+                padding-top: ${borderWidth};
+                padding-left: ${borderWidth};
+                padding-right: ${borderWidth};
+            }
+
+            .root:focus-within,
+            :host(.invalid) .root,
+            :host([disabled]) .root {
+                --ni-private-bottom-border-width: 1px;
+            }
+
+            :host([disabled]) .root,
+            :host([readonly]) .root {
+                background-color: transparent;
+            }
+        `), appearanceBehavior(TextFieldAppearance.Outline, css `
+            .root {
+                --ni-private-bottom-border-width: 1px;
+                border-width: ${borderWidth};
+                border-bottom-width: var(--ni-private-bottom-border-width);
+            }
+        `), themeBehavior(css `
             ${'' /* Light theme */}
             .control::-ms-reveal {
                 filter: invert(0%);

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;yBACR,WAAW,eAAe,qBAAqB;;oCAEpC,UAAU,oBAAoB,UAAU;;;;;;;;;;;mCAWzC,gBAAgB;;;;;yBAK1B,WAAW,UAAU,SAAS;;;;mCAIpB,SAAS;;;;;;yBAMnB,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6BrD,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;kBAe1B,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;;;;;;+BAoBvB,gBAAgB;;;;+BAIhB,SAAS;;;;6BAIX,qBAAqB;;;;;mBAK/B,WAAW;;;;;;;;;;;;;;;;;cAiBhB,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;;;;kBAerB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;SAanC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI;AACV,mBAAmB;AACnB,KAAK,CAAC,KAAK,CACd,CACJ,CAAC"}

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

@@ -1,3 +1,21 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
-export { TextFieldType };
+/**
+ * Values for the 'type' attribute of the text field.
+ */
 export declare type TextFieldTypeAttribute = `${TextFieldType}`;
+/**
+ * Values for the 'type' property of the text field.
+ */
+export { TextFieldType };
+/**
+ * Values for the 'appearance' attribute of the text field.
+ */
+export declare type TextFieldAppearanceAttribute = `${TextFieldAppearance}`;
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export declare enum TextFieldAppearance {
+    Underline = "underline",
+    Outline = "outline",
+    Block = "block"
+}

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

@@ -1,3 +1,15 @@
 import { TextFieldType } from '@microsoft/fast-foundation';
+/**
+ * Values for the 'type' property of the text field.
+ */
 export { TextFieldType };
+/**
+ * Values for the 'appearance' property of the text field
+ */
+export var TextFieldAppearance;
+(function (TextFieldAppearance) {
+    TextFieldAppearance["Underline"] = "underline";
+    TextFieldAppearance["Outline"] = "outline";
+    TextFieldAppearance["Block"] = "block";
+})(TextFieldAppearance || (TextFieldAppearance = {}));
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAO3D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,CAAC;AAOzB;;GAEG;AACH,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC3B,8CAAuB,CAAA;IACvB,0CAAmB,CAAA;IACnB,sCAAe,CAAA;AACnB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B"}

package/dist/esm/utilities/style/appearance.d.ts

@@ -1,5 +1,4 @@
 import type { Behavior, ElementStyles } from '@microsoft/fast-element';
-import type { ButtonAppearance } from '../../patterns/button/types';
 /**
  * Behavior that will conditionally apply a stylesheet based on the element's
  * appearance property
@@ -9,4 +8,4 @@ import type { ButtonAppearance } from '../../patterns/button/types';
  *
  * @public
  */
-export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;
+export declare function appearanceBehavior<AppearanceType>(value: AppearanceType, styles: ElementStyles): Behavior;

package/dist/esm/utilities/style/appearance.js.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAIxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAuB,EACvB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../../../../src/utilities/style/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAGxE;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAC9B,KAAqB,EACrB,MAAqB;IAErB,OAAO,IAAI,0BAA0B,CAAC,YAAY,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AACvE,CAAC"}

package/package.json

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