fix(ui-library): props alignment form label (#949)

deven-org · Mar 26, 2024 · ca16e6b · ca16e6b
1 parent 7b56150
commit ca16e6b
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 16 deletions.
diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import { Themes } from '../../foundation/_tokens-generated/index.themes';
-import { FormSizes, LabelVariants } from '../../globals/constants';
+import { FormSizes } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
@@ -54,11 +54,9 @@ export default {
         category: 'Content / Settings',
       },
     },
-
     hasError: {
       description: 'Choose if component has an error.',
-      options: LabelVariants,
-      control: { type: 'select' },
+      defaultValue: false,
       table: {
         category: 'Validation',
       },
@@ -86,10 +84,8 @@ export default {
 
         - [**Appearance**](#appearance)
           - [**Size Variant**](#size-variant)
-        
         - [**Content / Settings**](#content--settings)
           - [**Label Appendix**](#label-appendix)
-        
         - [**Validation**](#validation)
           - [**Has Error**](#has-error)
         
@@ -139,7 +135,7 @@ BlrFormLabel.args = defaultParams;
 
 /**
  * ## Appearance
- *  ### Size Variant
+ * ### Size Variant
  * The Form Label component comes in 3 sizes: SM, MD and LG.
  */
 export const SizeVariant = () => {
@@ -180,19 +176,19 @@ export const LabelAppendix = () => {
   return html`
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: '(required)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: '(optional)',
     })}
     ${WrappedBlrFormLabelRenderFunction({
       ...defaultParams,
-      sizeVariant: 'lg',
+      sizeVariant: 'md',
       label: 'Form label',
       labelAppendix: ' ',
     })}

diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts
@@ -107,7 +107,7 @@ describe('blr-form-label', () => {
     );
     const blrLabel = querySelectorDeep('label.blr-form-label', element.getRootNode() as HTMLElement);
     const errorLabel = blrLabel?.getAttribute('class');
-    expect(errorLabel).to.contain('true');
+    expect(errorLabel).to.contain('error');
   });
 
   it('has a size md by default', async () => {

diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts
@@ -48,7 +48,7 @@ export class BlrFormLabel extends LitElement {
       const labelClasses = classMap({
         'blr-form-label': true,
         [`${this.sizeVariant}`]: this.sizeVariant,
-        [`${this.hasError}`]: this.hasError,
+        'error': this.hasError,
       });
 
       const spanClasses = classMap({

diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts
@@ -249,7 +249,7 @@ export class BlrNumberInput extends LitElement {
                     labelAppendix: this.labelAppendix,
                     forValue: this.numberInputId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -164,7 +164,7 @@ export class BlrSelect extends LitElement {
                     sizeVariant: this.size,
                     forValue: this.selectId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts
@@ -174,7 +174,7 @@ export class BlrTextInput extends LitElement {
                     labelAppendix: this.labelAppendix,
                     forValue: this.textInputId,
                     theme: this.theme,
-                    hasError: Boolean(this.label),
+                    hasError: Boolean(this.hasError),
                   })}
                 </div>
               `

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -205,7 +205,7 @@ export class BlrTextarea extends LitElement {
                   labelAppendix: this.labelAppendix,
                   forValue: this.textareaId,
                   theme: this.theme,
-                  hasError: Boolean(this.label),
+                  hasError: Boolean(this.hasError),
                 })}
               </div>`
             : nothing}