fix(ui-library): harmonize property naming (#940)

Co-authored-by: Julius Walther <julius.walther@sinnerschrader.com>

packages/js-example-app/src/index.ejs

@@ -56,11 +56,13 @@
           <p>Input Field Number</p>
           <blr-input-field-number
             value="1000"
-            size="md"
+            size-variant="md"
             stepper-variant="vertical"
             placeholder="Placeholder-text"
+            fraction-digits="10"
             total-digits="10"
-            prepend-unit="true"
+            has-unit="true"
+            unit-position="prefix"
             unit="kg"
             step="1"
             has-label="true"

packages/ui-library/src/components/input-field-number/index.stories.ts

@@ -25,24 +25,26 @@ const defaultParams: BlrInputFieldNumberType = {
   value: undefined,
   decimals: 0,
   leadingZeros: 0,
-  prependUnit: true,
+  hasUnit: false,
   unit: 'kg',
+  unitPosition: 'prefix',
   step: 1,
   hasLabel: true,
   label: 'Label-text',
   labelAppendix: '(Appendix)',
   hasHint: false,
   hintMessage: 'This is a small hint',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   disabled: false,
   readonly: false,
   required: false,
   hasError: false,
   errorMessage: '',
-  errorIcon: undefined,
-  inputFieldNumberId: 'test-id',
+  errorMessageIcon: undefined,
   stepIncreaseAriaLabel: '+',
   stepDecreaseAriaLabel: '\u2212',
+  inputFieldNumberId: 'inputFieldNumberId',
+  name: 'inputFieldNumber',
 };
 
 export default {
@@ -117,11 +119,26 @@ export default {
         type: 'number',
       },
     },
-    prependUnit: {
+    hasUnit: {
+      description: 'Choose if component has a unit.',
+      table: {
+        category: 'Content / Settings',
+      },
+    },
+    unitPosition: {
       description: 'Choose if unit is displayed as a prefix or suffix.',
+      options: ['prefix', 'suffix'],
       table: {
         category: 'Content / Settings',
       },
+      control: {
+        type: 'radio',
+        labels: {
+          prefix: 'prefix',
+          suffix: 'suffix',
+        },
+      },
+      if: { arg: 'hasUnit', eq: true },
     },
     unit: {
       description: 'Select a unit which is displayed next to the input.',
@@ -132,6 +149,7 @@ export default {
       table: {
         category: 'Content / Settings',
       },
+      if: { arg: 'hasUnit', eq: true },
     },
     step: {
       description: 'Enter how much the value should change when the stepper buttons are used.',
@@ -189,8 +207,7 @@ export default {
         category: 'Content / Settings',
       },
     },
-    hintIcon: {
-      name: 'hintMessageIcon',
+    hintMessageIcon: {
       description: 'Select an icon which is displayed in front of the hint message.',
       if: { arg: 'hasHint', eq: true },
       options: [undefined, ...PureIconKeys],
@@ -236,8 +253,7 @@ export default {
       },
       if: { arg: 'hasError', eq: true },
     },
-    errorIcon: {
-      name: 'errorMessageIcon',
+    errorMessageIcon: {
       description: 'Select an icon which is displayed in front of the error message.',
       table: {
         category: 'Validations',
@@ -269,31 +285,27 @@ export default {
       },
     },
     blrSelect: {
-      name: 'blrSelect',
       description: 'Fires when some text is selected.',
       action: 'blrSelect',
       table: {
         category: 'Events',
       },
     },
     blrFocus: {
-      name: 'blrFocus',
       description: 'Fires when the component is focused.',
       action: 'blrFocus',
       table: {
         category: 'Events',
       },
     },
     blrBlur: {
-      name: 'blrBlur',
       description: 'Fires when the component lost focus.',
       action: 'blrBlur',
       table: {
         category: 'Events',
       },
     },
     blrNumberStepperClick: {
-      name: 'blrNumberStepperClick',
       description: 'Fires when one of the stepper buttons is clicked.',
       action: 'blrNumberStepperClick',
       table: {
@@ -489,7 +501,8 @@ export const HasUnit = (params: BlrInputFieldNumberType) => {
       ${BlrInputFieldNumberRenderFunction({
         ...params,
         label: 'Unit prefix',
-        prependUnit: true,
+        hasUnit: true,
+        unitPosition: 'prefix',
         unit: 'kg',
         labelAppendix: undefined,
         inputFieldNumberId: 'test-kg-pre',
@@ -499,7 +512,8 @@ export const HasUnit = (params: BlrInputFieldNumberType) => {
       ${BlrInputFieldNumberRenderFunction({
         ...params,
         label: 'Unit suffix',
-        prependUnit: false,
+        hasUnit: true,
+        unitPosition: 'suffix',
         unit: 'kg',
         labelAppendix: undefined,
         inputFieldNumberId: 'test-kg-suff',
@@ -653,7 +667,7 @@ export const FormCaptionGroup = (params: BlrInputFieldNumberType) => {
         ...params,
         hasHint: true,
         label: 'Hint message',
-        hintIcon: 'blrInfo',
+        hintMessageIcon: 'blrInfo',
         labelAppendix: '',
         inputFieldNumberId: 'test-hint',
       })}
@@ -666,7 +680,7 @@ export const FormCaptionGroup = (params: BlrInputFieldNumberType) => {
         hasError: true,
         errorMessage: "OMG it's an error",
         hasHint: true,
-        errorIcon: 'blrErrorFilled',
+        errorMessageIcon: 'blrErrorFilled',
         inputFieldNumberId: 'test-hint-error',
       })}
     </div>

packages/ui-library/src/components/input-field-number/index.test.ts

@@ -21,8 +21,8 @@ const sampleParams: BlrInputFieldNumberType = {
   inputFieldNumberId: 'egal',
   label: 'Hello',
   hasHint: false,
-  hintIcon: 'blr360',
-  errorIcon: 'blrInfo',
+  hintMessageIcon: 'blr360',
+  errorMessageIcon: 'blrInfo',
   value: 4,
   unit: 'gr',
   decimals: 0,
@@ -78,9 +78,9 @@ describe('blr-input-field-number', () => {
       BlrInputFieldNumberRenderFunction({
         ...sampleParams,
         hasHint: true,
-        hintIcon: 'blrInfo',
+        hintMessageIcon: 'blrInfo',
         hasError: true,
-        errorIcon: 'blrErrorFilled',
+        errorMessageIcon: 'blrErrorFilled',
       })
     );
 

packages/ui-library/src/components/input-field-number/index.ts

@@ -7,7 +7,7 @@ import { BlrDividerRenderFunction } from '../divider/renderFunction';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { actionLight, actionDark } from '../../foundation/semantic-tokens/action.css';
-import { FormSizesType } from '../../globals/types';
+import { FormSizesType, UnitVariantType } from '../../globals/types';
 import { calculateIconName } from '../../utils/calculate-icon-name';
 import { getComponentConfigToken } from '../../utils/get-component-config-token';
 import { BlrFormCaptionGroupRenderFunction } from '../form-caption-group/renderFunction';
@@ -61,18 +61,20 @@ export class BlrInputFieldNumber extends LitElementCustom {
   @property() labelAppendix?: string;
   @property() hasError?: boolean;
   @property() errorMessage?: string;
-  @property() errorIcon?: SizelessIconType;
+  @property() errorMessageIcon?: SizelessIconType;
   @property() hasHint = true;
   @property() hintMessage?: string;
-  @property() hintIcon?: SizelessIconType;
+  @property() hintMessageIcon?: SizelessIconType;
   @property() value?: number;
   @property() step?: number;
   @property() unit?: string;
   @property() leadingZeros?: number;
   @property() decimals?: number;
-  @property() prependUnit?: boolean;
+  @property() hasUnit?: boolean;
+  @property() unitPosition?: UnitVariantType;
   @property() stepIncreaseAriaLabel?: string = '+';
   @property() stepDecreaseAriaLabel?: string = '\u2212'; // minus-sign (not minus-hyphen)
+  @property() name?: string;
 
   @property() theme: ThemeType = 'Light';
 
@@ -150,7 +152,6 @@ export class BlrInputFieldNumber extends LitElementCustom {
     if (!this.sizeVariant) {
       return html``;
     }
-
     const ariaLabel = direction === 'increase' ? this.stepIncreaseAriaLabel! : this.stepDecreaseAriaLabel!;
     const onClick = direction === 'increase' ? this.stepperUp : this.stepperDown;
 
@@ -232,8 +233,6 @@ export class BlrInputFieldNumber extends LitElementCustom {
   }
 
   protected render() {
-    const hasUnit = this.unit !== undefined && this.unit.length > 0;
-
     if (this.sizeVariant) {
       const dynamicStyles =
         this.theme === 'Light'
@@ -242,12 +241,14 @@ export class BlrInputFieldNumber extends LitElementCustom {
 
       const inputClasses = classMap({
         [this.sizeVariant]: this.sizeVariant,
-        prepend: hasUnit && !!this.prependUnit,
+        prepend: this.unitPosition === 'prefix',
+        suffix: this.unitPosition === 'suffix',
       });
 
       const unitClasses = classMap({
         unit: true,
-        prepend: hasUnit && !!this.prependUnit,
+        prepend: this.unitPosition === 'prefix',
+        suffix: this.unitPosition === 'suffix',
         [`${this.sizeVariant}`]: this.sizeVariant,
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
@@ -258,40 +259,39 @@ export class BlrInputFieldNumber extends LitElementCustom {
         [`${this.sizeVariant}`]: this.sizeVariant,
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
         'error-input': this.hasError || false,
-        'prepend': hasUnit && !!this.prependUnit,
         'readonly': this.readonly || false,
       });
 
       const inputAndUnitContainer = classMap({
         'input-unit-container': true,
-        'prepend': hasUnit && !!this.prependUnit,
+        'prepend': this.unitPosition === 'prefix' || this.unitPosition === 'suffix',
         [`${this.sizeVariant}`]: this.sizeVariant,
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
 
       const captionContent = html`
-        ${this.hasHint && (this.hintMessage || this.hintIcon)
+        ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? html`
               <div class="hint-wrapper">
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
                   sizeVariant: this.sizeVariant,
                   message: this.hintMessage,
-                  icon: this.hintIcon,
+                  icon: this.hintMessageIcon,
                 })}
               </div>
             `
           : nothing}
-        ${this.hasError && (this.errorMessage || this.errorIcon)
+        ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? html`
               <div class="error-wrapper">
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
                   sizeVariant: this.sizeVariant,
                   message: this.errorMessage,
-                  icon: this.errorIcon,
+                  icon: this.errorMessageIcon,
                 })}
               </div>
             `
@@ -336,7 +336,9 @@ export class BlrInputFieldNumber extends LitElementCustom {
                 @select=${this.handleSelect}
                 placeholder=${this.placeholder || ''}
               />
-              ${hasUnit ? html` <div class="${unitClasses}">${this.unit}</div> ` : nothing}
+              ${this.unitPosition === 'prefix' || this.unitPosition === 'suffix'
+                ? html`<div class="${unitClasses}">${this.unit}</div>`
+                : nothing}
             </div>
             ${this.renderMode()}
           </div>

packages/ui-library/src/globals/constants.ts

@@ -31,6 +31,7 @@ export const ActionVariants = ['primary', 'secondary', 'cta', 'silent', 'destruc
 export const FeedbackVariants = ['default', 'inverted'] as const;
 export const CaptionVariants = ['hint', 'error'] as const;
 export const CounterVariants = ['neutral', 'warn', 'error'] as const;
+export const UnitVariants = ['prefix', 'suffix'] as const;
 export const DividerVariations = ['vertical', 'horizontal'] as const;
 export const TabVariants = ['standard', 'fullWidth'] as const;
 export const TabContentVariants = ['labelOnly', 'iconOnly', 'labelAndIcon'] as const;

packages/ui-library/src/globals/types.ts

@@ -21,6 +21,7 @@ import {
   ActionSizes,
   ButtonGroupAlignmentVariants,
   ButtonDisplayOptions,
+  UnitVariants,
 } from './constants';
 
 export type SizesType = (typeof Sizes)[number];
@@ -29,6 +30,7 @@ export type ActionVariantType = (typeof ActionVariants)[number];
 export type FeedbackVariantType = (typeof FeedbackVariants)[number];
 export type CaptionVariantType = (typeof CaptionVariants)[number];
 export type CounterVariantType = (typeof CounterVariants)[number];
+export type UnitVariantType = (typeof UnitVariants)[number];
 
 export type ActionSizesType = (typeof ActionSizes)[number];
 export type FeedbackSizesType = (typeof FeedbackSizes)[number];