fix(ui-library): prop alignment select (872) (#983)

* fix(Storybook): aligne props * fix(Storybook): aligne props --------- Co-authored-by: Christian Hoffmann <112889877+ChristianHoffmannS2@users.noreply.github.com>
deven-org · Mar 8, 2024 · 6470282 · 6470282
1 parent 791f0a8
commit 6470282
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 38 deletions.
diff --git a/packages/ui-library/src/components/select/index.stories.ts b/packages/ui-library/src/components/select/index.stories.ts
@@ -20,13 +20,13 @@ const sharedStyles = html`
 `;
 const defaultParams: BlrSelectType = {
   theme: 'Light',
-  size: 'md',
+  sizeVariant: 'md',
   label: 'Label-text',
   labelAppendix: '(Appendix)',
   icon: 'blrChevronDown',
   hasHint: false,
   hintMessage: 'This is a small hint message',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   disabled: false,
   required: false,
   hasError: false,
@@ -42,7 +42,7 @@ export default {
   title: 'Components/Select',
   argTypes: {
     // Appearance
-    size: {
+    sizeVariant: {
       name: 'sizeVariant',
       description: 'Choose size of the component.',
       options: FormSizes,
@@ -103,7 +103,7 @@ export default {
         category: 'Content / Settings',
       },
     },
-    hintIcon: {
+    hintMessageIcon: {
       name: 'hintMessageIcon',
       description: 'Select an icon which is displayed in front of the hint message.',
       options: [undefined, ...PureIconKeys],
@@ -193,23 +193,22 @@ export default {
       },
     },
     // Events
-    onChange: {
-      action: 'onChange',
+    blrSelectedValueChange: {
+      action: 'blrSelectedValueChange',
       description: 'Fires when the value changes.',
       table: {
         category: 'Events',
       },
     },
-    onFocus: {
-      name: 'onFocus',
-      action: 'onFocus',
+    blrFocus: {
+      action: 'blrFocus',
       description: 'Fires when the component is focused.',
       table: {
         category: 'Events',
       },
     },
-    onBlur: {
-      action: 'onBlur',
+    blrBlur: {
+      action: 'blrBlur',
       description: 'Fires when the component lost focus.',
       table: {
         category: 'Events',
@@ -264,14 +263,14 @@ BlrSelect.args = defaultParams;
 //disabledArgTypesTable to deactivate the controls-Panel for a story in storybook
 const argTypesToDisable = [
   'theme',
-  'size',
+  'sizeVariant',
   'hasIcon',
   'hasLabel',
   'label',
   'labelAppendix',
   'hasHint',
   'hintText',
-  'hintIcon',
+  'hintMessageIcon',
   'disabled',
   'required',
   'hasError',
@@ -310,7 +309,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'sm',
+          sizeVariant: 'sm',
           label: 'Select SM',
           labelAppendix: '',
         },
@@ -319,7 +318,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'md',
+          sizeVariant: 'md',
           label: 'Select MD',
           labelAppendix: '',
         },
@@ -328,7 +327,7 @@ export const SizeVariant = () => {
       ${BlrSelectRenderFunction(
         {
           ...defaultParams,
-          size: 'lg',
+          sizeVariant: 'lg',
           label: 'Select LG',
           labelAppendix: '',
         },

diff --git a/packages/ui-library/src/components/select/index.test.ts b/packages/ui-library/src/components/select/index.test.ts
@@ -11,11 +11,11 @@ const sampleParams: BlrSelectType = {
   name: 'Text Input',
   label: 'Label',
   labelAppendix: '(Optional)',
-  size: 'md',
+  sizeVariant: 'md',
   errorMessage: 'This is error message',
   hasHint: true,
   hintMessage: 'Field is used for hint',
-  hintIcon: 'blrInfo',
+  hintMessageIcon: 'blrInfo',
   selectId: 'Peter',
   errorMessageIcon: 'blrErrorFilled',
   theme: 'Light',
@@ -46,7 +46,7 @@ describe('blr-select', () => {
       BlrSelectRenderFunction({
         ...sampleParams,
         hasHint: true,
-        hintIcon: 'blrInfo',
+        hintMessageIcon: 'blrInfo',
         hasError: true,
         errorMessageIcon: 'blrErrorFilled',
       })
@@ -76,7 +76,7 @@ describe('blr-select', () => {
   });
 
   it('has a size sm when "size" is set to "sm" ', async () => {
-    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, size: 'sm' }));
+    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, sizeVariant: 'sm' }));
 
     const selectWrapper = querySelectorDeep('.blr-select-wrapper', element.getRootNode() as HTMLElement);
     const className = selectWrapper?.className;
@@ -85,7 +85,7 @@ describe('blr-select', () => {
   });
 
   it('is rendering options inside slot', async () => {
-    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, size: 'sm' }, optionsAsChildren));
+    const element = await fixture(BlrSelectRenderFunction({ ...sampleParams, sizeVariant: 'sm' }, optionsAsChildren));
     const options = querySelectorAllDeep('.blr-select-option', element?.getRootNode() as HTMLElement);
     const optionsLength = optionsAsChildren.strings[0].trim().split('</option>').filter(Boolean).length;
     expect(options).to.be.lengthOf(optionsLength);

diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -34,15 +34,15 @@ export class BlrSelect extends LitElement {
   @property() hasLabel?: boolean;
   @property() label!: string;
   @property() disabled?: boolean;
-  @property() size?: FormSizesType = 'md';
+  @property() sizeVariant?: FormSizesType = 'md';
   @property() required?: boolean;
-  @property() onBlur?: HTMLElement['blur'];
-  @property() onFocus?: HTMLElement['focus'];
+  @property() blrBlur?: HTMLElement['blur'];
+  @property() blrFocus?: HTMLElement['focus'];
 
   @property() hasError?: boolean;
   @property() errorMessage?: string;
   @property() hintMessage?: string;
-  @property() hintIcon?: SizelessIconType;
+  @property() hintMessageIcon?: SizelessIconType;
   @property() errorMessageIcon?: SizelessIconType;
   @property() hasHint?: boolean;
   @property() icon?: SizelessIconType = 'blrChevronDown';
@@ -73,14 +73,14 @@ export class BlrSelect extends LitElement {
   }
 
   protected renderIcon(classes: DirectiveResult<typeof ClassMapDirective>) {
-    if (this.size) {
+    if (this.sizeVariant) {
       const iconSizeVariant = getComponentConfigToken([
         'sem',
         'forms',
         'inputfield',
         'icon',
         'sizevariant',
-        this.size,
+        this.sizeVariant,
       ]).toLowerCase() as SizesType;
 
       if (this.hasError) {
@@ -113,36 +113,36 @@ export class BlrSelect extends LitElement {
   }
 
   protected render() {
-    if (this.size) {
+    if (this.sizeVariant) {
       const dynamicStyles = this.theme === 'Light' ? [formLight, selectInputLight] : [formDark, selectInputDark];
 
       const inputClasses = classMap({
         'error': this.hasError || false,
         'error-input': this.hasError || false,
-        [`${this.size}`]: this.size,
+        [`${this.sizeVariant}`]: this.sizeVariant,
         'disabled': this.disabled || false,
         'focus': this.isFocused || false,
       });
 
       const iconClasses = classMap({
         'blr-input-icon': true,
-        [this.size]: this.size,
+        [this.sizeVariant]: this.sizeVariant,
       });
       const captionContent = html`
-        ${this.hasHint && (this.hintMessage || this.hintIcon)
+        ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.size,
+              size: this.sizeVariant,
               message: this.hintMessage,
-              icon: this.hintIcon,
+              icon: this.hintMessageIcon,
             })
           : nothing}
         ${this.hasError && (this.errorMessage || this.errorMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.size,
+              size: this.sizeVariant,
               message: this.errorMessage,
               icon: this.errorMessageIcon,
             })
@@ -156,14 +156,14 @@ export class BlrSelect extends LitElement {
 
         <slot @slotchange=${this.handleSlotChange}></slot>
 
-        <div class="blr-select ${this.size}">
+        <div class="blr-select ${this.sizeVariant}">
           ${this.hasLabel
             ? html`
                 <div class="label-wrapper">
                   ${BlrFormLabelRenderFunction({
                     label: this.label,
                     labelAppendix: this.labelAppendix,
-                    sizeVariant: this.size,
+                    sizeVariant: this.sizeVariant,
                     forValue: this.selectId,
                     theme: this.theme,
                     hasError: Boolean(this.hasError),
@@ -174,7 +174,7 @@ export class BlrSelect extends LitElement {
           <div class="blr-select-wrapper ${inputClasses}">
             <div class="blr-select-inner-container">
               <select
-                aria-label=${this.arialabel || nothing}
+                aria-label=${this.ariaLabel || nothing}
                 class="blr-form-select ${inputClasses}"
                 id=${this.selectId || nothing}
                 name=${this.name || nothing}
@@ -201,7 +201,7 @@ export class BlrSelect extends LitElement {
             ${this.renderIcon(iconClasses)}
           </div>
           ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+            ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
             : nothing}
         </div>
       `;