feat(ui-library): made ids optional and provided fallback

packages/ui-library/src/components/actions/buttons/icon-button/index.stories.ts

@@ -43,7 +43,6 @@ const args: BlrIconButtonType = {
   icon: 'blr360',
   loading: false,
   disabled: false,
-  buttonId: 'button-id',
   loadingStatus: 'Loading',
 };
 

packages/ui-library/src/components/actions/buttons/icon-button/index.ts

@@ -13,6 +13,7 @@ import { BlrLoaderRenderFunction } from '../../../feedback/loader';
 import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
 import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
+import { generateId } from '../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-icon-button';
 
@@ -26,7 +27,7 @@ export class BlrIconButton extends LitElement {
   @property() onBlur?: HTMLButtonElement['onblur'];
   @property() loading?: boolean;
   @property() disabled!: boolean;
-  @property() buttonId?: string;
+  @property() buttonId?: string = generateId();
   @property() variant: ActionVariantType = 'primary';
   @property() size?: FormSizesType = 'md';
   @property() loadingStatus!: string;

packages/ui-library/src/components/actions/buttons/text-button/index.stories.ts

@@ -51,7 +51,6 @@ const args: BlrTextButtonType = {
   icon: 'blr360',
   loading: false,
   disabled: false,
-  buttonId: 'button-id',
   loadingStatus: 'Loading',
 };
 

packages/ui-library/src/components/actions/buttons/text-button/index.ts

@@ -21,6 +21,7 @@ import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-
 
 const TAG_NAME = 'blr-text-button';
 import { getComponentConfigToken } from '../../../../utils/get-component-config-token';
+import { generateId } from '../../../../utils/generate-html-Id';
 
 @customElement('blr-text-button')
 export class BlrTextButton extends LitElement {
@@ -34,7 +35,7 @@ export class BlrTextButton extends LitElement {
   @property() icon?: SizelessIconType;
   @property() loading!: boolean;
   @property() disabled!: boolean;
-  @property() buttonId?: string;
+  @property() buttonId?: string = generateId();
   @property() variant: ActionVariantType = 'primary';
   @property() size?: ActionSizesType = 'md';
   @property() loadingStatus!: string;

packages/ui-library/src/components/forms/checkbox/index.stories.ts

@@ -73,7 +73,6 @@ const args: BlrCheckboxType = {
   hintMessage: 'This is a sample hint',
   hintIcon: undefined,
 
-  checkInputId: 'Checky',
   disabled: false,
   checked: false,
   indeterminate: false,

packages/ui-library/src/components/forms/checkbox/index.ts

@@ -16,6 +16,7 @@ import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-com
 import { BlrIconRenderFunction } from '../../ui/icon';
 import { calculateIconName } from '../../../utils/calculate-icon-name';
 import { getComponentConfigToken } from '../../../utils/get-component-config-token';
+import { generateId } from '../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-checkbox';
 
@@ -27,7 +28,7 @@ export class BlrCheckbox extends LitElement {
   protected _checkboxNode!: HTMLInputElement;
 
   @property() label!: string;
-  @property() checkInputId?: string;
+  @property() checkInputId?: string = generateId();
 
   @property() disabled?: boolean;
   @property() checked?: boolean;

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

@@ -64,7 +64,6 @@ const args: BlrNumberInputType = {
   hasError: false,
   errorMessage: 'This is error message',
   labelAppendix: '(Optional)',
-  numberInputId: 'Input ID',
   showHint: true,
   hintText: 'Field is used for hint',
   hintIcon: 'blrInfo',

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

@@ -2,7 +2,7 @@ import { BlrNumberInputRenderFunction, BlrNumberInputType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { getRandomString } from '../../../utils/get-random-string';
 
 const sampleParams: BlrNumberInputType = {
   placeholder: 'Type your message here ..',

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

@@ -13,6 +13,7 @@ import { SizelessIconType } from '@boiler/icons';
 import { actionDark, actionLight } from '../../../foundation/semantic-tokens/action.css';
 import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 import { BlrFormInfoRenderFunction } from '../../internal-components/form-info';
+import { generateId } from '../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-number-input';
 
@@ -23,7 +24,7 @@ export class BlrNumberInput extends LitElement {
   @query('input')
   protected _numberFieldNode!: HTMLInputElement;
 
-  @property() numberInputId!: string;
+  @property() numberInputId?: string = generateId();
   @property() variant: 'mode1' | 'mode2' | 'mode3' = 'mode1';
   @property() label!: string;
   @property() disabled?: boolean;
@@ -190,6 +191,7 @@ export class BlrNumberInput extends LitElement {
           : nothing}
         <div class="${wrapperClasses}">
           <input
+            id=${this.numberInputId || nothing}
             class="${inputClasses}"
             type="number"
             .value=${!this.readonly

packages/ui-library/src/components/forms/radio/radio-input-group/index.test.ts

@@ -1,6 +1,6 @@
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../../utils/get-random.string';
+import { getRandomString } from '../../../../utils/get-random-string';
 import { BlrRadioGroupType, BlrRadioGroupRenderFunction } from './index';
 
 const sampleParams: BlrRadioGroupType = {

packages/ui-library/src/components/forms/radio/radio-input/index.ts

@@ -10,6 +10,7 @@ import { BlrFormHintRenderFunction } from '../../../internal-components/form-hin
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-radio';
 
@@ -34,6 +35,7 @@ export class BlrRadio extends LitElement {
   @property() showHint?: boolean;
   @property() hintMessage?: string;
   @property() hintIcon?: SizelessIconType;
+  @property() radioInputId?: string = generateId();
 
   @property() theme: ThemeType = 'Light';
 
@@ -55,7 +57,7 @@ export class BlrRadio extends LitElement {
         </style>
         <div class="blr-radio ${classes}">
           <input
-            id=${this.optionId || nothing}
+            id=${this.radioInputId || nothing}
             class="${classes} input-control"
             type="radio"
             name=${this.name}

packages/ui-library/src/components/forms/select/index.stories.ts

@@ -81,7 +81,6 @@ const args: BlrSelectType = {
   errorIcon: 'blrInfo',
   disabled: false,
   required: false,
-  selectId: 'Peter',
   icon: 'blrChevronDown',
   options: [
     { value: 'uschi', label: 'Uschi', disabled: true },

packages/ui-library/src/components/forms/select/index.ts

@@ -15,6 +15,7 @@ import { getComponentConfigToken } from '../../../utils/get-component-config-tok
 import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
 
 import { BlrFormInfoRenderFunction } from '../../internal-components/form-info';
+import { generateId } from '../../../utils/generate-html-Id';
 
 type Option = {
   value: string;
@@ -30,7 +31,7 @@ export class BlrSelect extends LitElement {
   static styles = [styleCustom];
 
   @property() arialabel?: string;
-  @property() selectId!: string;
+  @property() selectId?: string = generateId();
   @property() labelAppendix?: string;
   @property() name!: string;
   @property() label?: string;

packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.stories.ts

@@ -56,7 +56,6 @@ const args: BlrRangeLegendSliderType = {
   theme: 'Light',
   onClickMinMax: btnEventType,
   onChange: logEventType,
-  rangeInputId: 'range-cmpt',
   initialValue: '300 $',
   list: ['100 $', '200 $', '300 $', '400 $', '500 $', '600 $'],
   stepFactor: 1,

packages/ui-library/src/components/forms/slider/slider-single-value/range-legend-slider/index.ts

@@ -14,6 +14,7 @@ import { RenderBtnProps } from '../../../../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-range-legend-slider';
 
@@ -24,7 +25,7 @@ export class BlrRangeLegendSlider extends LitElement {
   @property() onClickMinMax?: (param: number) => void;
   @property() onChange!: (val: number, event: Event) => HTMLButtonElement['onchange'];
 
-  @property() rangeInputId!: string;
+  @property() rangeInputId?: string = generateId();
 
   @property() initialValue!: string;
   @property() list!: Array<string>;

packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.test.ts

@@ -5,7 +5,6 @@ import { querySelectorDeep, querySelectorAllDeep } from 'query-selector-shadow-d
 
 const sampleParams: BlrRangeSliderType = {
   theme: 'Light',
-  rangeInputId: 'range-id',
   initialValue: 80,
   minValue: 75,
   maxValue: 130,

packages/ui-library/src/components/forms/slider/slider-single-value/range-slider/index.ts

@@ -17,6 +17,7 @@ import { RenderBtnProps } from '../../../../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-range-slider';
 
@@ -27,7 +28,7 @@ export class BlrRangeSlider extends LitElement {
   @property() onClickMinMax?: (param: number) => void;
   @property() onChange!: (val: number, event: Event) => HTMLButtonElement['onchange'];
 
-  @property() rangeInputId!: string;
+  @property() rangeInputId?: string = generateId();
 
   @property() initialValue!: number;
   @property() minValue!: number;

packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.stories.ts

@@ -60,7 +60,6 @@ const args: BlrRangeLegendMinMaxSliderType = {
   theme: 'Light',
   onBtnClick: btnEventType,
   onChange: logEventType,
-  rangeInputId: 'range-cmpt',
   startValue: '200 $',
   endValue: '400 $',
   list: ['100 $', '200 $', '300 $', '400 $', '500 $', '600 $', '700 $'],

packages/ui-library/src/components/forms/slider/slider-two-values/range-legend-min-max-slider/index.ts

@@ -13,6 +13,7 @@ import { RenderBtnProps } from '../../../../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-range-legend-min-max-slider';
 
@@ -23,7 +24,7 @@ export class BlrRangeLegendMinMaxSlider extends LitElement {
   @property() onBtnClick?: (min: number, max: number) => void;
   @property() onChange!: (minVal: number, maxVal: number, event: Event) => HTMLButtonElement['onchange'];
 
-  @property() rangeInputId!: string;
+  @property() rangeInputId?: string = generateId();
 
   @property() startValue!: string;
   @property() endValue!: string;

packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.stories.ts

@@ -59,7 +59,6 @@ const args: BlrRangeMinMaxSliderType = {
   theme: 'Light',
   onBtnClick: btnEventType,
   onChange: logEventType,
-  rangeInputId: 'range-cmpt',
   startValue: 80,
   endValue: 85,
   minValue: 30,

packages/ui-library/src/components/forms/slider/slider-two-values/range-min-max-slider/index.ts

@@ -17,6 +17,7 @@ import { RenderBtnProps } from '../../../../../globals/types';
 import { SizelessIconType } from '@boiler/icons';
 import { ThemeType } from '../../../../../foundation/_tokens-generated/index.themes';
 import { genericBlrComponentRenderer } from '../../../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-range-min-max-slider';
 
@@ -27,7 +28,7 @@ export class BlrRangeMinMaxSlider extends LitElement {
   @property() onBtnClick?: (min: number, max: number) => void;
   @property() onChange!: (minVal: number, maxVal: number, event: Event) => HTMLButtonElement['onchange'];
 
-  @property() rangeInputId!: string;
+  @property() rangeInputId?: string = generateId();
 
   @property() startValue!: number;
   @property() endValue!: number;

packages/ui-library/src/components/forms/text-input/index.stories.ts

@@ -51,7 +51,6 @@ BlrTextInput.storyName = 'TextInput';
 
 const args: BlrTextInputType = {
   theme: 'Light',
-  textInputId: 'Input ID',
   label: 'Label',
   hasLabel: true,
   labelAppendix: '(Optional)',

packages/ui-library/src/components/forms/text-input/index.test.ts

@@ -2,7 +2,7 @@ import { BlrTextInputRenderFunction, BlrTextInputType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { getRandomString } from '../../../utils/get-random-string';
 
 const sampleParams: BlrTextInputType = {
   textInputId: '#1',

packages/ui-library/src/components/forms/text-input/index.ts

@@ -15,12 +15,13 @@ import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-com
 const TAG_NAME = 'blr-text-input';
 import { getComponentConfigToken } from '../../../utils/get-component-config-token';
 import { BlrFormInfoRenderFunction } from '../../internal-components/form-info';
+import { generateId } from '../../../utils/generate-html-Id';
 
 @customElement(TAG_NAME)
 export class BlrTextInput extends LitElement {
   static styles = [styleCustom];
 
-  @property() textInputId!: string;
+  @property() textInputId?: string = generateId();
   @property() type: InputTypes = 'text';
   @property() label!: string;
   @property() labelAppendix?: string;

packages/ui-library/src/components/forms/textarea/index.stories.ts

@@ -41,7 +41,6 @@
   name: '',
   showCounter: false,
   theme: 'Light',
-  textareaId: '',
   warningLimitType: 'warningLimitInt',
   warningLimitInt: 105,
   warningLimitPer: 75,
@@ -786,7 +785,7 @@
 Required.storyName = 'Validation';
 
 // Validation hasError Todo add interactive Story with Button to show the State
 export const hasError = () => {
   return html`
     ${sharedStyles}
     <div class="wrapper">

packages/ui-library/src/components/forms/textarea/index.test.ts

@@ -2,7 +2,7 @@ import { BlrTextareaRenderFunction, BlrTextareaType } from '.';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorDeep } from 'query-selector-shadow-dom';
-import { getRandomString } from '../../../utils/get-random.string';
+import { getRandomString } from '../../../utils/get-random-string';
 
 const sampleParams: BlrTextareaType = {
   theme: 'Light',

packages/ui-library/src/components/forms/textarea/index.ts

@@ -11,14 +11,15 @@ import { BlrFormInfoRenderFunction } from '../../internal-components/form-info';
 import { formDark, formLight } from '../../../foundation/semantic-tokens/form.css';
 
 import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-component-renderer';
+import { generateId } from '../../../utils/generate-html-Id';
 
 const TAG_NAME = 'blr-textarea';
 
 @customElement(TAG_NAME)
 export class BlrTextarea extends LitElement {
   static styles = [styleCustom];
 
-  @property() textareaId!: string;
+  @property() textareaId?: string = generateId();
   @property() label!: string;
   @property() labelAppendix?: string;
   @property() arialabel?: string;

packages/ui-library/src/components/forms/toggle-switch/index.ts

@@ -16,6 +16,7 @@ import { genericBlrComponentRenderer } from '../../../utils/typesafe-generic-com
 const TAG_NAME = 'blr-label-toggleswitch';
 import { BlrIconRenderFunction } from '../../ui/icon';
 import { calculateIconName } from '../../../utils/calculate-icon-name';
+import { generateId } from '../../../utils/generate-html-Id';
 
 @customElement(TAG_NAME)
 export class BlrToggleSwitch extends LitElement {
@@ -28,7 +29,7 @@ export class BlrToggleSwitch extends LitElement {
   @property() onLabel!: string;
   @property() offLabel!: string;
   @property() showStateLabel?: boolean;
-  @property() checkInputId!: string;
+  @property() checkInputId?: string = generateId();
 
   @property() disabled?: boolean;
   @property() readonly?: boolean;

packages/ui-library/src/utils/generate-html-Id.ts

@@ -0,0 +1,25 @@
+const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+const charactersLength = characters.length;
+
+const validFirstCharactersLength = charactersLength - 10;
+
+const getRandomCharacter = (validFirstChar: boolean) => {
+  // the bitwise OR replaces Math.floor which is much faster,
+  // but will fail on very large numbers, which is not the case here
+  if (validFirstChar) {
+    return characters.charAt((Math.random() * validFirstCharactersLength) | 0);
+  } else {
+    return characters.charAt((Math.random() * charactersLength) | 0);
+  }
+};
+
+export const generateId = (length?: number) => {
+  length = length || 12;
+  let result = getRandomCharacter(true);
+
+  for (let i = 0, l = length - 1; i < l; i++) {
+    result += getRandomCharacter(false);
+  }
+
+  return result;
+};