From a23199147ccf0329200e5b536b9fd9defbb5b6d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20C=C3=A1mera?= Date: Tue, 12 Nov 2024 21:00:05 -0300 Subject: [PATCH] Improve input, label and textarea mixins and classes naming 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 --- packages/unanimo/src/base/_form-controls.scss | 64 ++++++++----------- .../unanimo/src/components/_checkbox.scss | 2 +- .../unanimo/src/components/_combo-box.scss | 6 +- .../unanimo/src/components/_dropdown.scss | 2 +- .../components/_query-viewer-pivot-table.scss | 10 +-- .../unanimo/src/components/_radio-group.scss | 2 +- packages/unanimo/src/components/_switch.scss | 2 +- packages/unanimo/src/unanimo.scss | 8 +-- 8 files changed, 43 insertions(+), 53 deletions(-) diff --git a/packages/unanimo/src/base/_form-controls.scss b/packages/unanimo/src/base/_form-controls.scss index 804f384b2..4715c2c8e 100644 --- a/packages/unanimo/src/base/_form-controls.scss +++ b/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 { diff --git a/packages/unanimo/src/components/_checkbox.scss b/packages/unanimo/src/components/_checkbox.scss index f5529456b..e720b0101 100644 --- a/packages/unanimo/src/components/_checkbox.scss +++ b/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; diff --git a/packages/unanimo/src/components/_combo-box.scss b/packages/unanimo/src/components/_combo-box.scss index f6ca081e0..d699049a1 100644 --- a/packages/unanimo/src/components/_combo-box.scss +++ b/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} { diff --git a/packages/unanimo/src/components/_dropdown.scss b/packages/unanimo/src/components/_dropdown.scss index 7f22308f1..148d6c6f4 100644 --- a/packages/unanimo/src/components/_dropdown.scss +++ b/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); diff --git a/packages/unanimo/src/components/_query-viewer-pivot-table.scss b/packages/unanimo/src/components/_query-viewer-pivot-table.scss index d6acd0f18..02dfd7938 100644 --- a/packages/unanimo/src/components/_query-viewer-pivot-table.scss +++ b/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; } diff --git a/packages/unanimo/src/components/_radio-group.scss b/packages/unanimo/src/components/_radio-group.scss index 5908c5358..0f9ebbc48 100644 --- a/packages/unanimo/src/components/_radio-group.scss +++ b/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; diff --git a/packages/unanimo/src/components/_switch.scss b/packages/unanimo/src/components/_switch.scss index 9def00d80..393bbf9cc 100644 --- a/packages/unanimo/src/components/_switch.scss +++ b/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 { diff --git a/packages/unanimo/src/unanimo.scss b/packages/unanimo/src/unanimo.scss index ab0708c0a..60b19c5d5 100644 --- a/packages/unanimo/src/unanimo.scss +++ b/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 {