Improve input, label and textarea mixins and classes naming (#389)

Breaking changes:
 - The following mixin were renamed:
  + form-input -> input
  + form-textarea -> textarea
  + form-input__label -> label
  + form-input__helper -> input__helper

 - The following mixin were renamed:
  + .form-input -> .input
  + .form-textarea -> .textarea
  + .form-input__label -> .label
  + .form-input__helper -> .input__helper

Author: ncamera

packages/unanimo/src/base/_form-controls.scss

@@ -1,30 +1,30 @@
-%form-input__text {
+%input__text {
   font-size: 14px;
   line-height: 18px; // 128.571%
   letter-spacing: 0.2px;
 }
 
-@mixin form-input__label-base {
+@mixin label-base {
   font-weight: 600;
   font-size: 14px;
   line-height: 18px; // 128.571%
   letter-spacing: 0.2px;
 }
 
-%form-input__label {
+%label {
   @include label-common-styles();
   gap: var(--spacing--m); // Used for images
-  @include form-input__label-base();
+  @include label-base();
 }
 
-%form-input__helper {
+%input__helper {
   font-size: 11px;
   line-height: 13px; // 118.182%
   letter-spacing: 0.2px;
 }
 
-%form-input {
-  @extend %form-input__text;
+%input {
+  @extend %input__text;
   --ch-placeholder-color: var(--body-m__font-color--gray);
   --ch-edit-gap: var(--spacing--s);
   --ch-edit__image-size: var(--spacing--xl);
@@ -48,8 +48,8 @@
   }
 }
 
-%form-textarea {
-  @extend %form-input__text;
+%textarea {
+  @extend %input__text;
   --ch-placeholder-color: var(--body-m__font-color--gray);
   --ch-edit-gap: var(--spacing--s);
   --ch-edit__image-size: var(--spacing--xl);
@@ -64,34 +64,30 @@
   color: var(--body-m__font-color--positive);
 }
 
-%form-input__placeholder {
+%input__placeholder {
   color: var(--body-m__font-color--gray);
 }
 
 /// @group Form
-/// @param {String} $selector [".form-input"] -
+/// @param {String} $selector [".input"] -
 /// @param {Boolean} $add--disabled [true] -
 /// @param {Boolean} $add--placeholder [true] -
 /// @param {Boolean} $add--placeholder-var [true] -
 /// @param {Boolean} $add--error [true] -
-@mixin form-input(
-  $selector: ".form-input",
-  $add--disabled: true,
-  $add--error: true
-) {
+@mixin input($selector: ".input", $add--disabled: true, $add--error: true) {
   // TODO: IMPROVE STYLE. Unanimo's implementation does not work well in Sidebar Menus
 
   #{$selector} {
-    @extend %form-input;
+    @extend %input;
 
     &:focus {
-      @extend %form-input--focus;
+      @extend %input--focus;
     }
 
     @if $add--disabled {
       &:disabled,
       &--disabled {
-        @extend %form-input--disabled;
+        @extend %input--disabled;
       }
     }
 
@@ -123,27 +119,27 @@
 }
 
 /// @group Form
-/// @param {String} $selector [".form-textarea"] -
+/// @param {String} $selector [".textarea"] -
 /// @param {Boolean} $add--disabled [true] -
 /// @param {Boolean} $add--error [true] -
-@mixin form-textarea(
-  $selector: ".form-textarea",
+@mixin textarea(
+  $selector: ".textarea",
   $add--disabled: true,
   $add--error: true
 ) {
   // TODO: IMPROVE STYLE. Unanimo's implementation does not work well in Sidebar Menus
 
   #{$selector} {
-    @extend %form-textarea;
+    @extend %textarea;
 
     &:focus {
-      @extend %form-input--focus;
+      @extend %input--focus;
     }
 
     @if $add--disabled {
       &:disabled,
       &--disabled {
-        @extend %form-input--disabled;
+        @extend %input--disabled;
       }
     }
 
@@ -175,14 +171,11 @@
 }
 
 /// @group Form
-/// @param {String} $selector [".form-input__label"] -
+/// @param {String} $selector [".label"] -
 /// @param {Boolean} $add--disabled [true] -
-@mixin form-input__label(
-  $selector: ".form-input__label",
-  $add--disabled: true
-) {
+@mixin label($selector: ".label", $add--disabled: true) {
   #{$selector} {
-    @extend %form-input__label;
+    @extend %label;
 
     @if $add--disabled {
       &--disabled {
@@ -193,14 +186,11 @@
 }
 
 /// @group Form
-/// @param {String} $selector [".form-input__helper"] -
+/// @param {String} $selector [".input__helper"] -
 /// @param {Boolean} $add--disabled [true] -
-@mixin form-input__helper(
-  $selector: ".form-input__helper",
-  $add--disabled: true
-) {
+@mixin input__helper($selector: ".input__helper", $add--disabled: true) {
   #{$selector} {
-    @extend %form-input__helper;
+    @extend %input__helper;
 
     @if $add--disabled {
       &--disabled {

packages/unanimo/src/components/_checkbox.scss

@@ -1,5 +1,5 @@
 %checkbox {
-  @extend %form-input__text;
+  @extend %input__text;
 
   --ch-checkbox__container-size: 16px;
   --ch-checkbox__option-size: 10px;

packages/unanimo/src/components/_combo-box.scss

@@ -84,17 +84,17 @@
   // TODO: IMPROVE STYLE. Unanimo's implementation does not work well in Sidebar Menus
 
   #{$combo-box-selector} {
-    @extend %form-input;
+    @extend %input;
     @extend %combo-box;
 
     &:focus {
-      @extend %form-input--focus;
+      @extend %input--focus;
     }
   }
 
   @if $add--disabled {
     #{$combo-box--disabled-selector} {
-      @extend %form-input--disabled;
+      @extend %input--disabled;
     }
 
     #{$group__header--disabled-selector} {

packages/unanimo/src/components/_dropdown.scss

@@ -78,7 +78,7 @@
   --ch-dropdown-item__image-size: 24px;
   padding-block: var(--spacing--xs);
   gap: var(--spacing--s);
-  @include form-input__label-base();
+  @include label-base();
 
   &--focus {
     @include focus-style($outline: true);

packages/unanimo/src/components/_query-viewer-pivot-table.scss

@@ -28,7 +28,7 @@
 
   .inner_filter_div {
     & > select {
-      @extend %form-input;
+      @extend %input;
       padding: 5px;
     }
 
@@ -127,14 +127,14 @@
   }
 
   #tablePagination_perPage > select {
-    @extend %form-input;
+    @extend %input;
     padding-inline: 4px;
     block-size: 24px;
   }
 
   .div_filter_input {
     & > .search_input {
-      @extend %form-input;
+      @extend %input;
       background: no-repeat 4px /
         var(--gx-query-viewer-pivot__icon-mask-size, 20px)
         url("#{$icons-path}search.svg");
@@ -217,7 +217,7 @@
 
   .pivot_pag_div span:nth-child(2),
   #tablePagination_perPage {
-    @extend %form-input__helper;
+    @extend %input__helper;
   }
 
   .check_item_img i,
@@ -277,7 +277,7 @@
     border-end-start-radius: var(--border-radius--m);
     border-end-end-radius: var(--border-radius--m);
     & input {
-      @extend %form-input;
+      @extend %input;
       padding-inline: unset;
       block-size: 24px;
     }

packages/unanimo/src/components/_radio-group.scss

@@ -1,5 +1,5 @@
 %radio-group {
-  @extend %form-input__text;
+  @extend %input__text;
 
   --ch-radio-group__radio-container-size: 16px;
   --ch-radio-group__radio-option-size: 8px;

packages/unanimo/src/components/_switch.scss

@@ -39,7 +39,7 @@
 
   // Label
   &__caption {
-    @extend %form-input__text;
+    @extend %input__text;
     margin-inline-start: var(--spacing--m);
 
     &--disabled {

packages/unanimo/src/unanimo.scss

@@ -298,8 +298,8 @@
     }
 
     @if $form-controls-classes {
-      @include form-input__label();
-      @include form-input__helper();
+      @include label();
+      @include input__helper();
     }
 
     @if $hyperlink-classes {
@@ -377,8 +377,8 @@
     }
 
     @if $edit {
-      @include form-input();
-      @include form-textarea();
+      @include input();
+      @include textarea();
     }
 
     @if $flexible-layout {