Fix/597 form label padding (#855)

* feat(ui-library): adding label wrapper to each consuming component and applying padding
deven-org · Feb 1, 2024 · 390b8c7 · 390b8c7
1 parent fcda4c1
commit 390b8c7
Show file tree

Hide file tree

Showing 17 changed files with 2,351 additions and 2,229 deletions.
diff --git a/.yarn/releases/yarn-4.0.2.cjs → .yarn/releases/yarn-4.1.0.cjs b/.yarn/releases/yarn-4.0.2.cjs → .yarn/releases/yarn-4.1.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs
diff --git a/README.md b/README.md
@@ -114,7 +114,7 @@ In addition, you might need to install Corepack. For more information checkout [
    $ git clone https://github.com/deven-org/B01LER-Kitchen.git
    ```
 
-3. now we enable corepack for yarn and chooose right version
+3. now we enable corepack for yarn and choose right version
 
    ```sh
    $ corepack enable

diff --git a/package.json b/package.json
@@ -111,7 +111,6 @@
   },
   "engines": {
     "node": "^18",
-    "yarn": "^4.0.2"
-  },
-  "packageManager": "yarn@4.0.2"
+    "yarn": "^4.1.0"
+  }
 }
diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts
@@ -7,6 +7,27 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
   const { NumberInput } = componentTokens.Forms;
 
   return typeSafeNestedCss`
+  .blr-number-input {
+    &.sm {
+      & > .label-wrapper {
+        display: flex;
+        padding: ${SM.LabelSlot.Padding};
+      }
+    }
+    &.md {
+      & > .label-wrapper {
+        display: flex;
+        padding: ${MD.LabelSlot.Padding};
+      }
+    }
+    &.lg {
+      & > .label-wrapper {
+        display: flex;
+        padding: ${LG.LabelSlot.Padding};
+      }
+    }
+  }
+
     .noPointerEvents {
       pointer-events: none;
     }

diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/forms/number-input/index.ts
@@ -229,37 +229,41 @@ export class BlrNumberInput extends LitElement {
         <style>
           ${dynamicStyles}
         </style>
-        ${this.hasLabel
-          ? BlrFormLabelRenderFunction({
-              labelText: this.label,
-              labelSize: this.size,
-              labelAppendix: this.labelAppendix,
-              forValue: this.numberInputId,
-              theme: this.theme,
-              variant: this.hasError ? 'error' : 'label',
-            })
-          : nothing}
-        <div class="${wrapperClasses}">
-          <div class="${inputAndUnitContainer}">
-            <input
-              class="${inputClasses}"
-              type="number"
-              .value=${this.currentValue != 0
-                ? this.customFormat(this.currentValue || 0, this.decimals || 0, this.leadingZeros || 0)
-                : nothing}
-              step="${this.step || nothing}"
-              ?disabled="${this.disabled}"
-              ?readonly="${this.readonly}"
-              ?required="${this.required}"
-              hasError="${this.hasError}"
-              @change=${this.handleChange}
-              placeholder=${this.placeholder || nothing}
-            />
-            ${this.unit !== undefined && this.unit.length
-              ? html` <div class="${unitClasses}">${this.unit}</div> `
-              : nothing}
+        <div class="blr-number-input ${this.size}">
+          ${this.hasLabel
+            ? html`
+                <div class="label-wrapper">
+                  ${BlrFormLabelRenderFunction({
+                    labelText: this.label,
+                    labelSize: this.size,
+                    labelAppendix: this.labelAppendix,
+                    forValue: this.numberInputId,
+                    theme: this.theme,
+                    variant: this.hasError ? 'error' : 'label',
+                  })}
+                </div>
+              `
+            : nothing}
+          <div class="${wrapperClasses}">
+            <div class="${inputAndUnitContainer}">
+              <input
+                class="${inputClasses}"
+                type="number"
+                .value=${this.currentValue != 0
+                  ? this.customFormat(this.currentValue || 0, this.decimals || 0, this.leadingZeros || 0)
+                  : nothing}
+                step="${this.step || nothing}"
+                ?disabled="${this.disabled}"
+                ?readonly="${this.readonly}"
+                ?required="${this.required}"
+                hasError="${this.hasError}"
+                @change=${this.handleChange}
+                placeholder=${this.placeholder || nothing}
+              />
+              ${hasUnit ? html` <div class="${unitClasses}">${this.unit}</div> ` : nothing}
+            </div>
+            ${this.renderMode()}
           </div>
-          ${this.renderMode()}
         </div>
 
         ${this.hasHint || this.hasError

diff --git a/packages/ui-library/src/components/forms/radio/index.stories.ts b/packages/ui-library/src/components/forms/radio/index.stories.ts
@@ -138,7 +138,7 @@ export default {
       if: { arg: 'hasError', eq: true },
     },
     ariaLabel: {
-      name: 'araiaLabel',
+      name: 'ariaLabel',
       description:
         'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.',
       table: {

diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-group/index.stories.ts
@@ -38,15 +38,15 @@ export default {
     //     type: 'radio',
     //   },
     // },
-    showLegend: {
-      description: 'Choose if component has a legend. ',
+    hasGroupLabel: {
+      description: 'Choose if component has a group label. ',
       table: {
         category: 'Content / Settings',
       },
       control: { type: 'boolean' },
     },
-    legend: {
-      description: 'Enter string used as legend text.',
+    groupLabel: {
+      description: 'Enter string used as a group label.',
       control: { type: 'text' },
       table: {
         category: 'Content / Settings',
@@ -136,7 +136,7 @@ export default {
       if: { arg: 'hasError', eq: true },
     },
     ariaLabel: {
-      name: 'araiaLabel',
+      name: 'ariaLabel',
       description:
         'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.',
       table: {
@@ -207,7 +207,7 @@ export default {
           - [**Size Variant**](#size-variant)
       
         - [**Content / Settings**](#content--settings)
-          - [**Has Legend**](#has-legend)
+          - [**Has Group Label**](#has-group-label)
         - [**States**](#states)
           - [**Disabled**](#disabled)
           - [**Readonly**](#readonly)
@@ -235,8 +235,8 @@ const defaultParams: BlrRadioGroupType & {
   theme: 'Light',
   size: 'md',
   // direction: 'horizontal',
-  showLegend: true,
-  legend: 'Legend-text',
+  hasGroupLabel: true,
+  groupLabel: 'Group Label Text',
   hasHint: false,
   groupHintMessage: 'This is a small hint',
   groupHintIcon: 'blrInfo',
@@ -298,21 +298,21 @@ export const SizeVariant = () => {
       ${BlrRadioGroup({
         ...defaultParams,
         size: 'sm',
-        legend: 'Radio Group SM',
+        groupLabel: 'Radio Group SM',
       })}
     </div>
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
         size: 'md',
-        legend: 'Radio Group MD',
+        groupLabel: 'Radio Group MD',
       })}
     </div>
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
         size: 'lg',
-        legend: 'Radio Group LG',
+        groupLabel: 'Radio Group LG',
       })}
     </div>
   `;
@@ -345,28 +345,28 @@ SizeVariant.story = { name: ' ' };
 
 /**
  * ## Content / Settings
- * ### Has Legend
- *The Radio Group component can display a legend or no legend.
+ * ### Has Group Label
+ *The Radio Group component can display a label or no label.
  */
 
-export const HasLegend = () =>
+export const HasGroupLabel = () =>
   html`
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
-        showLegend: true,
-        legend: 'With Legend',
+        hasGroupLabel: true,
+        groupLabel: 'With Group Label',
       })}
     </div>
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
-        showLegend: false,
+        hasGroupLabel: false,
       })}
     </div>
   `;
 
-HasLegend.story = { name: ' ' };
+HasGroupLabel.story = { name: ' ' };
 
 /**
  * ## States
@@ -380,7 +380,7 @@ export const Disabled = () => {
     ${sharedStyles}
     ${BlrRadioGroup({
       ...defaultParams,
-      legend: 'Disabled',
+      groupLabel: 'Disabled',
       disabled: true,
     })}
   `;
@@ -396,7 +396,7 @@ export const Readonly = () => {
     ${sharedStyles}
     ${BlrRadioGroup({
       ...defaultParams,
-      legend: 'Readonly',
+      groupLabel: 'Readonly',
       readonly: true,
     })}
   `;
@@ -413,7 +413,7 @@ export const Required = () => {
     ${sharedStyles}
     ${BlrRadioGroup({
       ...defaultParams,
-      legend: 'Required',
+      groupLabel: 'Required',
       required: true,
     })}
   `;
@@ -428,8 +428,7 @@ export const HasError = () => {
     ${sharedStyles}
     ${BlrRadioGroup({
       ...defaultParams,
-      legend: 'Error',
-
+      groupLabel: 'Error',
       hasError: true,
     })}
   `;
@@ -446,14 +445,14 @@ export const FormCaptionGroup = () => {
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
-        legend: 'Hint message',
+        groupLabel: 'Hint message',
         hasHint: true,
       })}
     </div>
     <div class="wrapper">
       ${BlrRadioGroup({
         ...defaultParams,
-        legend: 'Hint and error message',
+        groupLabel: 'Hint and error message',
         errorIcon: 'blr360',
         groupErrorMessage: "OMG it's an error",
         hasHint: true,

diff --git a/packages/ui-library/src/components/forms/radio/radio-group/index.ts b/packages/ui-library/src/components/forms/radio/radio-group/index.ts
@@ -28,15 +28,14 @@ export class BlrRadioGroup extends LitElement {
   @property() onFocus?: HTMLElement['focus'];
   @property() hasError?: boolean;
   @property() errorIcon?: SizelessIconType;
-  @property() hideLabel?: boolean;
+  @property() hasGroupLabel?: boolean;
   @property() options!: RadioOption[];
   @property() hasHint = true;
   @property() groupHintIcon?: SizelessIconType;
   @property() groupErrorMessage?: string;
   @property() groupHintMessage?: string;
   @property() groupErrorIcon?: SizelessIconType;
-  @property() showLegend?: boolean = true;
-  @property() legend?: string;
+  @property() groupLabel?: string;
   @property() direction?: 'vertical' | 'horizontal';
 
   @property() theme: ThemeType = 'Light';
@@ -93,8 +92,8 @@ export class BlrRadioGroup extends LitElement {
     return html`<style>
         ${dynamicStyles.map((style) => style)}
       </style>
-      ${this.showLegend
-        ? html`<div class="${legendWrapperClasses}"><legend class="${legendClasses}">${this.legend}</legend></div>`
+      ${this.hasGroupLabel
+        ? html`<div class="${legendWrapperClasses}"><legend class="${legendClasses}">${this.groupLabel}</legend></div>`
         : nothing}
 
       <div class="blr-radio-group ${classes}">

diff --git a/packages/ui-library/src/components/forms/select/index.css.ts b/packages/ui-library/src/components/forms/select/index.css.ts
@@ -15,6 +15,30 @@ export const { tokenizedLight: selectInputLight, tokenizedDark: selectInputDark
     const { UserInput, SurfaceFill, SM, MD, LG, Input, InputBorderRadius, Placeholder, InputIcon } = semanticTokens.Forms;
 
     return typeSafeNestedCss`
+
+    :host {
+      .blr-select {
+        &.sm {
+          & > .label-wrapper {
+            display: flex;
+            padding: ${SM.LabelSlot.Padding};
+          }
+        }
+        &.md {
+          & > .label-wrapper {
+            display: flex;
+            padding: ${MD.LabelSlot.Padding};
+          }
+        }
+        &.lg {
+          & > .label-wrapper {
+            display: flex;
+            padding: ${LG.LabelSlot.Padding};
+          }
+        }
+      }
+    }
+
       slot {
         display: none;
       }

diff --git a/packages/ui-library/src/components/forms/select/index.stories.ts b/packages/ui-library/src/components/forms/select/index.stories.ts
@@ -37,6 +37,7 @@ const defaultParams: BlrSelectType = {
   arialabel: 'Select',
   selectId: 'selectId',
   name: 'select',
+  hasLabel: true,
 };
 
 export default {
@@ -60,11 +61,21 @@ export default {
       },
     },
     // Content / Settings
+    hasLabel: {
+      name: 'hasLabel',
+      description: 'Choose if component has a label.',
+      defaultValue: true,
+      control: { type: 'boolean' },
+      table: {
+        category: 'Content / Settings',
+      },
+    },
     label: {
       description: 'Enter string used as label text.',
       table: {
         category: 'Content / Settings',
       },
+      if: { arg: 'hasLabel', eq: true },
     },
     labelAppendix: {
       description: