feat(QUV-2366): icon variables and mixins styles improvements (#6)

* QUV-2366: Utils vs Base order in mixins and functions * QUV-2366: icon-status mixin created * QUV-2366: icon font family variables have been moved to icons variables. fonts variables have been removed. * QUV-2366: icon-font mixin from genesys-icon * QUV-2366: icon variables change * QUV-2366: Genesys base styles update
DevoInc · Jun 28, 2024 · a001554 · a001554
1 parent b676049
commit a001554
Show file tree

Hide file tree

Showing 18 changed files with 51 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "ts-node": "^10.9.2"
   },
   "peerDependencies": {
-    "@devoinc/genesys-base-styles": "^2.0.0",
+    "@devoinc/genesys-base-styles": "^2.0.1",
     "@devoinc/genesys-brand-devo": "^6.5.0",
     "@devoinc/genesys-icons": "^5.0.0"
   },

diff --git a/src/components/_icon-button.scss b/src/components/_icon-button.scss
@@ -132,8 +132,8 @@
 
     &::after {
       @include icon-font;
-      position: relative;
       content: $gi-exit_close;
+      position: relative;
       font-weight: bold;
     }
   }
@@ -151,8 +151,8 @@
 
     &::after {
       @include icon-font;
-      position: relative;
       content: $gi-exit_close;
+      position: relative;
       font-weight: bold;
     }
   }
@@ -169,8 +169,8 @@
 
     &::after {
       @include icon-font;
-      position: relative;
       content: $gi-arrow_down_fat;
+      position: relative;
       font-weight: bold;
     }
 

diff --git a/src/components/box-message/_box-message.scss b/src/components/box-message/_box-message.scss
@@ -18,7 +18,6 @@
   border-radius: 0.4rem;
 
   &::before {
-    @include icon-font;
     @include position(1.2rem, null, null, 1.2rem);
     position: absolute;
     font-size: 1.6rem;
@@ -109,7 +108,7 @@
       background-color: map-deep-get($box-message-status-map, $status, bg-color);
 
       &::before {
-        content: icon-status($status);
+        @include icon-status($status);
         color: map-deep-get($box-message-status-map, $status, icon-color);
       }
     }

diff --git a/src/components/inline-message/_panel-inline-message.scss b/src/components/inline-message/_panel-inline-message.scss
@@ -206,7 +206,8 @@
 
       &::before {
         @include spacing(margin, right, sm, component);
-        font-family: $icon-font;
+        // TODO: lt-icon font because lt-icon classes are used in InlineMessage jQuery component
+        @include icon-font("lt-iconfont, sans-serif");
         font-size: 1.8rem;
         font-weight: 500;
       }

diff --git a/src/components/modal/_mixins-modal.scss b/src/components/modal/_mixins-modal.scss
@@ -7,8 +7,9 @@
 
     #{$parent}__icon {
       &::before {
-        content: icon-status($status);
+        @include icon-status($status);
       }
+
       color: map-deep-get($modal-status-map, $status, icon-bg-color);
     }
   }

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -85,11 +85,11 @@
       background-color: $cmp-table-row-color-background-odd-base;
 
       &::before {
-        @include icon-font;
         @include text-color($color: weak);
+        @include icon-font;
+        content: $gi-row_drag_drop;
         position: relative;
         left: calc(map-deep-get($spacing-size-map, xs, component) * -1);
-        content: $gi-row_drag_drop;
         font-size: 1.8rem;
         transition: all .3s ease;
       }
@@ -305,13 +305,13 @@
       cursor: move;
 
       &::after {
-        @include icon-font;
         @include text-color($color: weak);
+        @include icon-font;
+        content: $gi-row_drag_drop;
         position: absolute;
         top: 50%;
         left: calc(#{$draggable-icon-width} * -1);
         transform: translateY(-50%);
-        content: $gi-row_drag_drop;
         width: $draggable-icon-width;
         font-size: 1.8rem;
         visibility: hidden;

diff --git a/src/components/toast/_item-toast.scss b/src/components/toast/_item-toast.scss
@@ -29,10 +29,6 @@
       flex-shrink: 0;
       margin-right: $cmp-toast-header-icon-space-margin-right;
       font-size: $cmp-toast-header-icon-typo-font-size-md;
-
-      &::before {
-        @include icon-font;
-      }
     }
 
     #{$toast}__heading {
@@ -190,7 +186,7 @@
         color: map-deep-get($toast-status-map, $status, icon-text-color);
 
         &::before {
-          content: icon-status($status);
+          @include icon-status($status);
         }
       }
 

diff --git a/src/components/validation/_mixins-validation.scss b/src/components/validation/_mixins-validation.scss
@@ -23,7 +23,7 @@
 
     &::before {
       @include text-color-status($status);
-      content: icon-status($status);
+      @include icon-status($status);
 
       @if ($status == warning) {
         @include text-color-status(warning-weak);

diff --git a/src/components/validation/_validation.scss b/src/components/validation/_validation.scss
@@ -11,7 +11,6 @@
 
   &::before {
     @include inline-flex(null, center, center);
-    @include icon-font;
   }
 
   &:empty {

diff --git a/src/utils/functions/_index.scss b/src/utils/functions/_index.scss
@@ -1,12 +1,12 @@
 // -------------------------- FUNCTIONS - UTILS ----------------------------- //
 
 
-// Base - Functions
-
-@import "./base-functions/icons-functions";
-
 // Utils - Functions
 
 @import "./utils-functions/important-functions";
 @import "./utils-functions/map-deep-functions";
 @import "./utils-functions/selectors-functions";
+
+// Base - Functions
+
+@import "./base-functions/icons-functions";
diff --git a/src/utils/functions/base-functions/_icons-functions.scss b/src/utils/functions/base-functions/_icons-functions.scss
@@ -3,7 +3,7 @@
 
 // STATUS - ICONS - BASE - FUNCTIONS ---------------------------------------- //
 
-@function icon-status($status, $filled: true) {
+@function get-icon-status($status, $filled: true) {
   $type: filled;
 
   @if ($filled == false) {

diff --git a/src/utils/mixins/base-mixins/_icons-mixins.scss b/src/utils/mixins/base-mixins/_icons-mixins.scss
@@ -3,8 +3,8 @@
 
 // ICON FONT - ICONS - BASE - MIXINS ---------------------------------------- //
 
-@mixin icon-font($font: $icon-font) {
-  font-family: $font, sans-serif;
+@mixin icon-font($font-family: $gi-icon-font-family) {
+  font-family: $font-family;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -14,3 +14,11 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+
+// ICON STATUS - ICONS - BASE - MIXINS -------------------------------------- //
+
+@mixin icon-status($status, $filled: true) {
+  @include icon-font;
+  content: get-icon-status($status);
+}
diff --git a/src/utils/mixins/components-mixins/_button-mixins.scss b/src/utils/mixins/components-mixins/_button-mixins.scss
@@ -101,7 +101,7 @@
 
   @if $has-bold-icon {
     &::before,
-    [class*=#{$icon-class-prefix}] {
+    [class*=#{$gi-icon-class-prefix}] {
       font-weight: bold;
     }
   }

diff --git a/src/utils/variables/_index.scss b/src/utils/variables/_index.scss
@@ -3,17 +3,16 @@
 
 $theme: light !default;
 
+// Utils - Variables
+
+@import "./utils-variables/spacing-variables";
+
 // Base - Variables
 
-@import "./base-variables/fonts-variables";
 @import "./base-variables/icons-variables";
 @import "./base-variables/images-variables";
 @import "./base-variables/typography-variables";
 
-// Utils - Variables
-
-@import "./utils-variables/spacing-variables";
-
 // Components - Variables
 
 @import "./components-variables/badge-variables";

diff --git a/src/utils/variables/base-variables/_fonts-variables.scss b/src/utils/variables/base-variables/_fonts-variables.scss
diff --git a/src/utils/variables/base-variables/_icons-variables.scss b/src/utils/variables/base-variables/_icons-variables.scss
@@ -1,5 +1,13 @@
 // ------------------------ ICONS - BASE - VARIABLES ------------------------ //
 
+
+// FONT FAMILIES - ICONS - BASE - VARIABLES --------------------------------- //
+
+$gi-icon-font-name: "gi";
+$gi-icon-font-family: $gi-icon-font-name, sans-serif;
+$gi-icon-class-prefix: "gi-";
+
+
 // STATUS - ICONS - BASE - VARIABLES ---------------------------------------- //
 
 $icon-status-list: error, help, info, success, warning;
@@ -27,6 +35,7 @@ $icon-status-map: (
   ),
 );
 
+
 // SIZE - ICONS - BASE - VARIABLES ------------------------------------------ //
 
 $icon-size-list: xxxs, xxxs, xxs, xs, sm, md, lg, xl, xxl, xxxl, xxxxl;

diff --git a/src/vendors/custom-vendors/_select2-custom.scss b/src/vendors/custom-vendors/_select2-custom.scss
@@ -76,8 +76,8 @@
       width: map-deep-get($select-size-map, md, arrow-width);
 
       &::before {
-        @include icon-font;
         @include field-control-typo($props: font-size);
+        @include icon-font;
         content: $gi-arrow_down_fat;
         font-weight: bold;
       }
@@ -372,7 +372,7 @@
       font-weight: 500;
 
       &::before {
-        content: icon-status(success);
+        @include icon-status(success);
         color: $alias-color-text-feedback-success-weak;
       }
     }
@@ -382,7 +382,7 @@
       font-weight: 500;
 
       &::before {
-        content: icon-status(warning);
+        @include icon-status(warning);
         color: $alias-color-text-feedback-warning-base;
       }
     }