fix(form): improve invalid style

baloise · Jan 29, 2022 · cf9902f · cf9902f
1 parent a22a072
commit cf9902f
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 8 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -330,6 +330,10 @@ export namespace Components {
           * Returns the native `<input>` element used under the hood.
          */
         "getInputElement": () => Promise<HTMLInputElement>;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * Set this to `true` when the component is placed on a dark background.
          */
@@ -424,7 +428,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * If `true` the component gets a invalid style. Only use this if there is no live validation.
+          * If `true` the component gets a invalid style.
          */
         "invalid": boolean;
         /**
@@ -445,6 +449,10 @@ export namespace Components {
           * Baloise icon for the right side of the input
          */
         "iconRight": string;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * If `true` the field can be used on blue background.
          */
@@ -461,6 +469,10 @@ export namespace Components {
         "subject": string;
     }
     interface BalFieldLabel {
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * If `true` a asterix (*) is added to the label text
          */
@@ -471,6 +483,10 @@ export namespace Components {
           * Defines the color of the message.
          */
         "color": '' | ColorTypesExtended;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
     }
     interface BalFileUpload {
         /**
@@ -664,6 +680,10 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * If `true` this component can be placed on dark background
          */
@@ -1035,6 +1055,10 @@ export namespace Components {
           * Enables the slide in animation for the option items.
          */
         "hasMovement": boolean;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * Set this to `true` when the component is placed on a dark background.
          */
@@ -1354,6 +1378,10 @@ export namespace Components {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid": boolean;
         /**
           * If `true` this component can be placed on dark background
          */
@@ -2271,6 +2299,10 @@ declare namespace LocalJSX {
           * If `true` the component is diabled.
          */
         "disabled"?: boolean;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * Set this to `true` when the component is placed on a dark background.
          */
@@ -2369,7 +2401,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * If `true` the component gets a invalid style. Only use this if there is no live validation.
+          * If `true` the component gets a invalid style.
          */
         "invalid"?: boolean;
         /**
@@ -2390,6 +2422,10 @@ declare namespace LocalJSX {
           * Baloise icon for the right side of the input
          */
         "iconRight"?: string;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * If `true` the field can be used on blue background.
          */
@@ -2406,6 +2442,10 @@ declare namespace LocalJSX {
         "subject"?: string;
     }
     interface BalFieldLabel {
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * If `true` a asterix (*) is added to the label text
          */
@@ -2416,6 +2456,10 @@ declare namespace LocalJSX {
           * Defines the color of the message.
          */
         "color"?: '' | ColorTypesExtended;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
     }
     interface BalFileUpload {
         /**
@@ -2597,6 +2641,10 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * If `true` this component can be placed on dark background
          */
@@ -2973,6 +3021,10 @@ declare namespace LocalJSX {
           * Enables the slide in animation for the option items.
          */
         "hasMovement"?: boolean;
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * Set this to `true` when the component is placed on a dark background.
          */
@@ -3324,6 +3376,10 @@ declare namespace LocalJSX {
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * If `true` the component gets a invalid style.
+         */
+        "invalid"?: boolean;
         /**
           * If `true` this component can be placed on dark background
          */

diff --git a/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx b/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
@@ -64,6 +64,11 @@ export class Datepicker implements ComponentInterface, BalConfigObserver {
    */
   @Prop() name: string = this.inputId
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   /**
    * @deprecated Define the locale of month and day names.
    */
@@ -566,6 +571,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver {
             'clickable': !this.disabled && !this.triggerIcon,
             'is-inverted': this.inverted,
             'is-disabled': this.disabled,
+            'is-danger': this.invalid,
           }}
           ref={el => (this.inputElement = el as HTMLInputElement)}
           id={this.inputId}
@@ -590,7 +596,7 @@ export class Datepicker implements ComponentInterface, BalConfigObserver {
         <bal-icon
           class="datepicker-trigger-icon clickable"
           is-right
-          color="info"
+          color={this.invalid ? 'danger' : 'info'}
           inverted={this.inverted}
           name="date"
           onClick={this.onIconClick}

diff --git a/packages/components/src/components/form/bal-field/bal-field-control/bal-field-control.tsx b/packages/components/src/components/form/bal-field/bal-field-control/bal-field-control.tsx
@@ -21,6 +21,11 @@ export class FieldControl {
    */
   @Prop() loading = false
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   /**
    * If `true` the field can be used on blue background.
    */

diff --git a/packages/components/src/components/form/bal-field/bal-field-control/readme.md b/packages/components/src/components/form/bal-field/bal-field-control/readme.md
@@ -6,6 +6,7 @@
 | ----------- | ------------ | -------------------------------------------------------------- | --------- | ------- |
 | `iconLeft`  | `icon-left`  | Baloise icon for the left side of the input                    | `string`  | `''`    |
 | `iconRight` | `icon-right` | Baloise icon for the right side of the input                   | `string`  | `''`    |
+| `invalid`   | `invalid`    | If `true` the component gets a invalid style.                  | `boolean` | `false` |
 | `inverted`  | `inverted`   | If `true` the field can be used on blue background.            | `boolean` | `false` |
 | `loading`   | `loading`    | If `true` a loading spinner is visible at the end of the input | `boolean` | `false` |
 

diff --git a/packages/components/src/components/form/bal-field/bal-field-label/bal-field-label.tsx b/packages/components/src/components/form/bal-field/bal-field-label/bal-field-label.tsx
@@ -14,6 +14,11 @@ export class FieldLabel {
    */
   @Prop() required = false
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   componentDidLoad() {
     if (this.element) {
       this.parrentBalFieldElement = this.element.closest('bal-field')

diff --git a/packages/components/src/components/form/bal-field/bal-field-label/readme.md b/packages/components/src/components/form/bal-field/bal-field-label/readme.md
@@ -4,6 +4,7 @@
 
 | Property   | Attribute  | Description                                        | Type      | Default |
 | ---------- | ---------- | -------------------------------------------------- | --------- | ------- |
+| `invalid`  | `invalid`  | If `true` the component gets a invalid style.      | `boolean` | `false` |
 | `required` | `required` | If `true` a asterix (*) is added to the label text | `boolean` | `false` |
 
 

diff --git a/packages/components/src/components/form/bal-field/bal-field-message/bal-field-message.tsx b/packages/components/src/components/form/bal-field/bal-field-message/bal-field-message.tsx
@@ -10,11 +10,16 @@ export class FieldMessage {
    */
   @Prop() color: '' | ColorTypesExtended = ''
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   render() {
     return (
       <Host
         class={{
-          [`help is-${this.color}`]: true,
+          [`help is-${this.invalid ? 'danger' : this.color}`]: true,
         }}
       >
         <slot></slot>

diff --git a/packages/components/src/components/form/bal-field/bal-field-message/readme.md b/packages/components/src/components/form/bal-field/bal-field-message/readme.md
@@ -2,9 +2,10 @@
 
 #### Properties
 
-| Property | Attribute | Description                       | Type                                             | Default |
-| -------- | --------- | --------------------------------- | ------------------------------------------------ | ------- |
-| `color`  | `color`   | Defines the color of the message. | `"" `, ` "danger" `, ` "success" `, ` "warning"` | `''`    |
+| Property  | Attribute | Description                                   | Type                                             | Default |
+| --------- | --------- | --------------------------------------------- | ------------------------------------------------ | ------- |
+| `color`   | `color`   | Defines the color of the message.             | `"" `, ` "danger" `, ` "success" `, ` "warning"` | `''`    |
+| `invalid` | `invalid` | If `true` the component gets a invalid style. | `boolean`                                        | `false` |
 
 
 
diff --git a/packages/components/src/components/form/bal-field/bal-field.tsx b/packages/components/src/components/form/bal-field/bal-field.tsx
@@ -7,7 +7,7 @@ export class Field {
   @Element() element!: HTMLElement
 
   /**
-   * If `true` the component gets a invalid style. Only use this if there is no live validation.
+   * If `true` the component gets a invalid style.
    */
   @Prop() invalid = false
 
@@ -28,12 +28,14 @@ export class Field {
 
   @Watch('inverted')
   @Watch('disabled')
+  @Watch('invalid')
   watchInputHandler() {
     this.updateChildInput()
   }
 
   @Watch('loading')
   @Watch('inverted')
+  @Watch('invalid')
   watchFieldHandler() {
     this.updateChildFieldControl()
   }
@@ -50,6 +52,7 @@ export class Field {
     inputs.forEach(input => {
       input.disabled = this.disabled
       input.inverted = this.inverted
+      input.invalid = this.invalid
     })
   }
 
@@ -58,10 +61,12 @@ export class Field {
     controls.forEach(control => {
       control.loading = this.loading
       control.inverted = this.inverted
+      control.invalid = this.invalid
 
       const selects = this.element.querySelectorAll<HTMLBalSelectElement>('bal-select')
       selects.forEach(select => {
         select.loading = this.loading
+        select.invalid = this.invalid
       })
     })
   }

diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -40,6 +40,11 @@ export class Input implements ComponentInterface, BalConfigObserver {
    */
   @Prop() name: string = this.inputId
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   /**
    * Defines the type of the input (text, number, email ...).
    */
@@ -374,6 +379,7 @@ export class Input implements ComponentInterface, BalConfigObserver {
           class={{
             'input': true,
             'is-disabled': this.disabled,
+            'is-danger': this.invalid,
             'is-inverted': this.inverted,
             'clickable': this.clickable,
             'has-icon-right': this.hasIconRight,

diff --git a/packages/components/src/components/form/bal-select/bal-select.scss b/packages/components/src/components/form/bal-select/bal-select.scss
@@ -22,6 +22,10 @@ bal-select {
     padding-bottom: 1px;
     margin-top: -1px;
 
+    &.is-danger {
+      border-color: $danger;
+    }
+
     &:focus-within,
     &.is-focused {
       border-width: 2px;

diff --git a/packages/components/src/components/form/bal-select/bal-select.tsx b/packages/components/src/components/form/bal-select/bal-select.tsx
@@ -59,6 +59,11 @@ export class Select {
    */
   @Prop() name: string = this.inputId
 
+  /**
+   * If `true` the component gets a invalid style.
+   */
+  @Prop() invalid = false
+
   /**
    * The tabindex of the control.
    */
@@ -706,6 +711,7 @@ export class Select {
             bal-popover-trigger
             class={{
               'bal-select__slot': true,
+              'is-danger': this.invalid,
               'is-focused': this.isPopoverOpen,
               'has-no-border': this.noBorder,
             }}
@@ -721,6 +727,7 @@ export class Select {
                 class={{
                   'input': true,
                   'is-inverted': this.inverted,
+                  'is-danger': this.invalid,
                   'is-clickable': !this.isPopoverOpen,
                   'data-test-select-input': true,
                 }}
@@ -742,6 +749,7 @@ export class Select {
               class={{ 'is-hidden': this.loading }}
               name="caret-down"
               size="xsmall"
+              color={this.invalid ? 'danger' : 'info'}
               inverted={this.inverted}
               turn={this.isPopoverOpen}
               style={{