fix(styles): menu command with & without icons aren't aligned (#1180)

- add a `$slick-menu-icon-min-width` to align icon containers so that they are always aligned with and without icons Co-authored-by: ghiscoding <[email protected]>
ghiscoding · Nov 7, 2023 · 35f040d · 35f040d
1 parent d0c751c
commit 35f040d
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 5 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts
@@ -79,7 +79,7 @@ export default class Example1 {
             { command: '', divider: true, positionOrder: 98 },
             {
               // we can also have multiple nested sub-menus
-              command: 'export', title: 'Exports', positionOrder: 99,
+              command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99,
               commandItems: [
                 { command: 'exports-txt', title: 'Text (tab delimited)' },
                 {
@@ -92,7 +92,7 @@ export default class Example1 {
               ]
             },
             {
-              command: 'feedback', title: 'Feedback', positionOrder: 100,
+              command: 'feedback', title: 'Feedback', iconCssClass: 'mdi mdi-information-outline', positionOrder: 100,
               commandItems: [
                 { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
                 'divider',

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example04.ts b/examples/vite-demo-vanilla-bundle/src/examples/example04.ts
@@ -432,7 +432,7 @@ export default class Example4 {
           { command: '', divider: true, positionOrder: 98 },
           {
             // we can also have multiple nested sub-menus
-            command: 'export', title: 'Exports', positionOrder: 99,
+            command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99,
             commandItems: [
               { command: 'exports-txt', title: 'Text (tab delimited)' },
               {
@@ -445,7 +445,7 @@ export default class Example4 {
             ]
           },
           {
-            command: 'feedback', title: 'Feedback', positionOrder: 100,
+            command: 'feedback', title: 'Feedback', iconCssClass: 'mdi mdi-information-outline', positionOrder: 100,
             commandItems: [
               { command: 'request-update', title: 'Request update from supplier', iconCssClass: 'mdi mdi-star', tooltip: 'this will automatically send an alert to the shipping team to contact the user for an update' },
               'divider',

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -98,7 +98,7 @@ export default class Example7 {
             { command: '', divider: true, positionOrder: 98 },
             {
               // we can also have multiple nested sub-menus
-              command: 'export', title: 'Exports', positionOrder: 99,
+              command: 'export', title: 'Exports', iconCssClass: 'mdi mdi-download', positionOrder: 99,
               commandItems: [
                 { command: 'exports-txt', title: 'Text (tab delimited)' },
                 {

diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -69,6 +69,7 @@ $slick-column-picker-title-font-size:                       17px !default;
 $slick-menu-item-font-size:                                 14px !default;
 $slick-menu-item-height:                                    26px !default;
 $slick-menu-icon-line-height:                               18px !default;
+$slick-menu-icon-min-width:                                 18px !default;
 $slick-menu-icon-width:                                     18px !default;
 $slick-menu-title-font-size:                                17px !default;
 $slick-icon-group-width:                                    22px !default;

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -86,6 +86,7 @@ $slick-column-picker-title-font-size:                         17px !default;
 $slick-menu-item-font-size:                                   14px !default;
 $slick-menu-item-height:                                      26px !default;
 $slick-menu-icon-line-height:                                 18px !default;
+$slick-menu-icon-min-width:                                   18px !default;
 $slick-menu-icon-width:                                       18px !default;
 $slick-menu-title-font-size:                                  17px !default;
 $slick-icon-group-color:                                      $slick-primary-color !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -365,6 +365,7 @@ $slick-menu-icon-font-size:                                 $slick-icon-font-siz
 $slick-menu-icon-line-height:                               calc(#{$slick-menu-icon-font-size} + 2px) !default;
 $slick-menu-item-width-when-button:                         calc(100% - #{$slick-menu-close-btn-width}) !default;
 $slick-menu-icon-margin-right:                              4px !default;
+$slick-menu-icon-min-width:                                 16px !default;
 $slick-menu-icon-width:                                     16px !default;
 $slick-menu-line-height:                                    24px !default;
 $slick-menu-min-width:                                      140px !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -325,6 +325,7 @@ li.hidden {
       line-height: var(--slick-menu-icon-line-height, $slick-menu-icon-line-height);
       margin-right: var(--slick-menu-icon-margin-right, $slick-menu-icon-margin-right);
       vertical-align: middle;
+      min-width: var(--slick-menu-icon-min-width, $slick-menu-icon-min-width);
       width: var(--slick-menu-icon-width, $slick-menu-icon-width);
     }