refactor: tweak cellMenu/contextMenu with a smaller min-width

ghiscoding · Nov 13, 2020 · 11a9c24 · 11a9c24
1 parent cb137e7
commit 11a9c24
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 7 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -221,7 +221,7 @@ export class Example3 {
         },
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -273,7 +273,7 @@ export class Example4 {
         },
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -249,7 +249,7 @@ export class Example11 {
         formatter: () => `<div class="fake-hyperlink">Action <span class="font-12px">&#9660;</span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
@@ -283,7 +283,7 @@ export class Example12 {
         formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts
@@ -41,7 +41,10 @@ export interface CellMenuOption {
   /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
   maxHeight?: number | string;
 
-  /** Width that the drop menu can have */
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$cell-menu-min-width`
+   */
   width?: number | string;
 
   /** Array of Option Items (title, option, disabled, ...) */

diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts
@@ -86,7 +86,10 @@ export interface ContextMenuOption {
   /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
   maxHeight?: number | string;
 
-  /** Width that the drop menu can have */
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$context-menu-min-width`
+   */
   width?: number | string;
 
   /** Array of Option Items (title, option, disabled, ...) */

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -81,6 +81,7 @@ $column-picker-title-font-size:                 18px !default;
 $cell-menu-icon-margin-right:                   6px !default;
 $cell-menu-close-btn-height:                    14px !default;
 $cell-menu-close-btn-margin:                    -4px 1px 1px 1px !default;
+$cell-menu-min-width:                           75px !default;
 $cell-menu-title-font-size:                     18px !default;
 $context-menu-item-font-size:                   16px !default;
 $context-menu-icon-font-size:                   16px !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -364,7 +364,7 @@ $cell-menu-close-btn-width:                           15px !default;
 $cell-menu-close-btn-margin:                          1px !default;
 $cell-menu-close-btn-padding:                         0px !default;
 $cell-menu-close-btn-opacity:                         0.9 !default;
-$cell-menu-min-width:                                 175px !default;
+$cell-menu-min-width:                                 125px !default;
 $cell-menu-padding:                                   6px !default;
 $cell-menu-item-border:                               1px solid transparent !default;
 $cell-menu-item-border-radius:                        0px !default;