fix: fixed toggleField() description position

- fixed issue where toggleField()'s description/hint was lower than other field's descriptions - fixed default transform configuration for stateField()
dereekb · Nov 22, 2022 · a0ac203 · a0ac203
1 parent 25c9810
commit a0ac203
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts b/apps/demo/src/app/modules/doc/modules/form/container/wrapper.component.ts
@@ -1,6 +1,6 @@
 import { MatDialog } from '@angular/material/dialog';
 import { Component } from '@angular/core';
-import { expandWrapper, flexLayoutWrapper, infoWrapper, nameField, sectionWrapper, subsectionWrapper, toggleWrapper, cityField, stateField, zipCodeField, countryField, styleWrapper } from '@dereekb/dbx-form';
+import { expandWrapper, flexLayoutWrapper, infoWrapper, nameField, sectionWrapper, subsectionWrapper, toggleWrapper, cityField, stateField, zipCodeField, countryField, styleWrapper, toggleField } from '@dereekb/dbx-form';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
 @Component({
@@ -52,7 +52,15 @@ export class DocFormWrapperComponent {
     })
   ];
 
-  readonly flexField: FormlyFieldConfig[] = [flexLayoutWrapper([cityField(), stateField()])];
+  readonly flexField: FormlyFieldConfig[] = [
+    flexLayoutWrapper([
+      cityField(),
+      stateField({
+        description: 'State Description'
+      }),
+      toggleField({ key: 'toggle', label: 'Toggle', description: 'Toggle Description' })
+    ])
+  ];
 
   readonly flexThreeField: FormlyFieldConfig[] = [
     flexLayoutWrapper(

diff --git a/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss b/packages/dbx-form/src/lib/formly/field/value/boolean/_boolean.scss
@@ -4,6 +4,12 @@
 
 // MARK: Mixin
 @mixin core() {
+  .mat-form-field.mat-form-field-type-toggle {
+    .mat-form-field-wrapper .mat-form-field-subscript-wrapper {
+      // margin on the checkbox field is unnecessary. By removing it, it becomes more in-line with the other fields.
+      margin-top: 0px;
+    }
+  }
 }
 
 @mixin color($theme-config) {

diff --git a/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts b/packages/dbx-form/src/lib/formly/field/value/text/text.additional.field.ts
@@ -69,7 +69,7 @@ export interface StateFieldConfig extends Partial<TextFieldConfig> {
 }
 
 export function stateField(config: StateFieldConfig = {}): FormlyFieldConfig {
-  const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, required = false } = config;
+  const { asCode = false, pattern = asCode ? US_STATE_CODE_STRING_REGEX : undefined, key = 'state', placeholder = '', label = 'State', autocomplete = 'state', maxLength = asCode ? ADDRESS_STATE_CODE_MAX_LENGTH : ADDRESS_STATE_MAX_LENGTH, transform, required = false } = config;
   return textField({
     ...config,
     key,
@@ -80,7 +80,8 @@ export function stateField(config: StateFieldConfig = {}): FormlyFieldConfig {
     required,
     maxLength,
     transform: {
-      toUppercase: true
+      ...transform,
+      toUppercase: asCode || transform?.toUppercase
     }
   });
 }