From 70b10562da16837e9c15d900a8095a76fce04330 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 7 Nov 2023 16:50:23 -0500 Subject: [PATCH] fix(styles): menu command with & without icons aren't aligned - add a `$slick-menu-icon-min-width` to align icon containers so that they are always aligned with and without icons --- examples/vite-demo-vanilla-bundle/src/examples/example01.ts | 4 ++-- examples/vite-demo-vanilla-bundle/src/examples/example04.ts | 4 ++-- examples/vite-demo-vanilla-bundle/src/examples/example07.ts | 2 +- packages/common/src/styles/_variables-theme-material.scss | 1 + packages/common/src/styles/_variables-theme-salesforce.scss | 1 + packages/common/src/styles/_variables.scss | 1 + packages/common/src/styles/slick-plugins.scss | 1 + 7 files changed, 9 insertions(+), 5 deletions(-) diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts index 5ba909e09..d490ec9f3 100644 --- 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 index 19c52bb71..bb092fb67 100644 --- 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 index b83d73a33..009d70cc4 100644 --- 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 index fc7d2a6d6..0099ebca7 100644 --- 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 index 510335c10..8318a83bf 100644 --- 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 index d348b0478..40d8f6e11 100644 --- 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 index ddff061a8..616be10eb 100644 --- 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); }