[terra-form-select] - Fix select option width and styling

packages/terra-form-select/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+* Changed
+  * Changed --terra-form-select-option-padding value to match with the orion-fusion-theme for consistency.
+  * Changed onHover style.
+
 ## 6.55.0 - (February 15, 2024)
 
 * Changed

packages/terra-form-select/src/clinical-lowlight-theme/Option.module.scss

@@ -6,13 +6,17 @@
     --terra-form-select-option-font-size: 1.143rem;
     --terra-form-select-option-line-height: 1.125;
     --terra-form-select-option-padding: 0.286rem 0.714rem;
+    --terra-form-select-option-hover-background-color: #1e3a49;
+    --terra-form-select-option-hover-background-image: none;
+    --terra-form-select-option-hover-box-shadow: none;
     --terra-form-select-default-option-active-background-color: #004c76;
     --terra-form-select-default-option-active-color: #b2b5b6;
     --terra-form-select-default-option-active-font-weight: normal;
     --terra-form-select-default-option-selected-background-color: #004c76;
     --terra-form-select-default-option-selected-color: #b2b5b6;
     --terra-form-select-default-option-selected-font-weight: normal;
     --terra-form-select-default-option-selected-active-background-color: #004165;
+    --terra-form-select-default-option-selected-hover-background-color: #004165;
     --terra-form-select-option-icon-height: 1.143rem;
     --terra-form-select-option-icon-margin-right: 0.714rem;
     --terra-form-select-option-icon-width: 1.143rem;

packages/terra-form-select/src/combobox/Menu.jsx

@@ -109,7 +109,6 @@ class Menu extends React.Component {
 
     this.clearScrollTimeout = this.clearScrollTimeout.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.scrollIntoView = this.scrollIntoView.bind(this);
   }
@@ -275,26 +274,6 @@ class Menu extends React.Component {
     }
   }
 
-  /**
-   * Sets the hovered option as the active value.
-   * @param {event} event - The mouse enter event.
-   * @param {ReactNode} option - The option that received the mouse enter event.
-   */
-  handleMouseEnter(event, option) {
-    // Prevents setting the active option on mouse enter if the keyboard scrolled the view.
-    if (this.scrollTimeout) {
-      return;
-    }
-
-    if (!option.props.disabled) {
-      this.setState({ active: option.props.value });
-    }
-
-    if (option.props.onMouseEnter) {
-      option.props.onMouseEnter(event);
-    }
-  }
-
   isActiveSelected() {
     return this.state.active === this.props.value;
   }
@@ -407,7 +386,6 @@ class Menu extends React.Component {
           variant: 'combobox',
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),
-          onMouseEnter: event => this.handleMouseEnter(event, option),
           ...(option.props.value === this.state.active) && { 'data-select-active': true },
         });
       } if (option.type.isOptGroup) {

packages/terra-form-select/src/multiple/Menu.jsx

@@ -148,7 +148,6 @@ class Menu extends React.Component {
 
     this.clearScrollTimeout = this.clearScrollTimeout.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.scrollIntoView = this.scrollIntoView.bind(this);
   }
@@ -321,26 +320,6 @@ class Menu extends React.Component {
     }
   }
 
-  /**
-   * Sets the hovered option as the active value.
-   * @param {event} event - The mouse enter event.
-   * @param {ReactNode} option - The option that received the mouse enter event.
-   */
-  handleMouseEnter(event, option) {
-    // Prevents setting the active option on mouse enter if the keyboard scrolled the view.
-    if (this.scrollTimeout) {
-      return;
-    }
-
-    if (!option.props.disabled) {
-      this.setState({ active: option.props.value });
-    }
-
-    if (option.props.onMouseEnter) {
-      option.props.onMouseEnter(event);
-    }
-  }
-
   isActiveSelected() {
     return this.props.value.includes(this.state.active);
   }
@@ -444,7 +423,6 @@ class Menu extends React.Component {
           variant: 'multiple',
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),
-          onMouseEnter: event => this.handleMouseEnter(event, option),
           ...(option.props.value === this.state.active) && { 'data-select-active': true },
         });
       } if (option.type.isOptGroup) {

packages/terra-form-select/src/orion-fusion-theme/Option.module.scss

@@ -5,14 +5,18 @@
     --terra-form-select-option-color: #1c1f21;
     --terra-form-select-option-font-size: 1rem;
     --terra-form-select-option-line-height: 1.41667;
-    --terra-form-select-option-padding: 0.5rem 1rem;
+    --terra-form-select-option-padding: 0.286rem 0.714rem;
     --terra-form-select-default-option-active-background-color: #0079be;
+    --terra-form-select-option-hover-background-color: #ebf6fd;
+    --terra-form-select-option-hover-background-image: none;
+    --terra-form-select-option-hover-box-shadow: none;
     --terra-form-select-default-option-active-color: #fff;
     --terra-form-select-default-option-active-font-weight: normal;
     --terra-form-select-default-option-selected-background-color: #0079be;
     --terra-form-select-default-option-selected-color: #fff;
     --terra-form-select-default-option-selected-font-weight: normal;
     --terra-form-select-default-option-selected-active-background-color: #0065a3;
+    --terra-form-select-default-option-selected-hover-background-color: #0065a3;
     --terra-form-select-option-icon-height: 1rem;
     --terra-form-select-option-icon-margin-right: 0.75rem;
     --terra-form-select-option-icon-width: 1rem;

packages/terra-form-select/src/search/Menu.jsx

@@ -97,7 +97,6 @@ class Menu extends React.Component {
 
     this.clearScrollTimeout = this.clearScrollTimeout.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.scrollIntoView = this.scrollIntoView.bind(this);
   }
@@ -244,26 +243,6 @@ class Menu extends React.Component {
     }
   }
 
-  /**
-   * Sets the hovered option as the active value.
-   * @param {event} event - The mouse enter event.
-   * @param {ReactNode} option - The option that received the mouse enter event.
-   */
-  handleMouseEnter(event, option) {
-    // Prevents setting the active option on mouse enter if the keyboard scrolled the view.
-    if (this.scrollTimeout) {
-      return;
-    }
-
-    if (!option.props.disabled) {
-      this.setState({ active: option.props.value });
-    }
-
-    if (option.props.onMouseEnter) {
-      option.props.onMouseEnter(event);
-    }
-  }
-
   isActiveSelected() {
     return this.state.active === this.props.value;
   }
@@ -369,7 +348,6 @@ class Menu extends React.Component {
           variant: 'search',
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),
-          onMouseEnter: event => this.handleMouseEnter(event, option),
           ...(option.props.value === this.state.active) && { 'data-select-active': true },
         });
       } if (option.type.isOptGroup) {

packages/terra-form-select/src/shared/_Option.module.scss

@@ -13,19 +13,42 @@
     outline: none;
     padding: var(--terra-form-select-option-padding, 0.286rem 0.714rem);
     user-select: none;
+
+    &:hover {
+      background-color: var(--terra-form-select-option-hover-background-color, #f4fafe);
+      background-image: var(--terra-form-select-option-hover-background-image, linear-gradient(to bottom, #e1f2fd 2%, #ebf6fe 30%, #f4fafe 80%));
+      box-shadow: var(--terra-form-select-option-hover-box-shadow, inset 0 0 0 1px #e1f2fd);
+      outline: none;
+      z-index: 1;
+    }
+
+    &.is-active {
+      background-color: var(--terra-form-select-option-active-background-color, #ebf6fd);
+      outline: var(--terra-form-select-option-active-color-outline, 2px dashed #000);
+      outline-offset: -2px;
+      z-index: 2;
+    }
   }
 
   .is-default {
     &:active:not(.is-disabled) {
       background-color: var(--terra-form-select-default-option-active-background-color, #0079be);
       color: var(--terra-form-select-default-option-active-color, #fff);
       font-weight: var(--terra-form-select-default-option-active-font-weight, normal);
+      background-image: none;
+      box-shadow: none;
     }
 
     &.is-selected {
       background-color: var(--terra-form-select-default-option-selected-background-color, #0079be);
       color: var(--terra-form-select-default-option-selected-color, #fff);
       font-weight: var(--terra-form-select-default-option-selected-font-weight, normal);
+
+      &:hover {
+        background-color: var(--terra-form-select-default-option-selected-hover-background-color, #0065a3);
+        background-image: none;
+        box-shadow: none;
+      }
     }
 
     &.is-selected.is-active {
@@ -75,12 +98,6 @@
     visibility: visible;
   }
 
-  .is-active {
-    background-color: var(--terra-form-select-option-active-background-color, #ebf6fd);
-    outline: var(--terra-form-select-option-active-color-outline, 2px dashed #000);
-    outline-offset: -2px;
-  }
-
   .is-disabled {
     color: var(--terra-form-select-option-disabled-color, rgba(28, 31, 33, 0.25));
     cursor: not-allowed;

packages/terra-form-select/src/single/Menu.jsx

@@ -104,7 +104,6 @@ class Menu extends React.Component {
     this.clearSearch = this.clearSearch.bind(this);
     this.clearScrollTimeout = this.clearScrollTimeout.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.scrollIntoView = this.scrollIntoView.bind(this);
   }
@@ -265,26 +264,6 @@ class Menu extends React.Component {
     }
   }
 
-  /**
-   * Sets the hovered option as the active value.
-   * @param {event} event - The mouse enter event.
-   * @param {ReactNode} option - The option that received the mouse enter event.
-   */
-  handleMouseEnter(event, option) {
-    // Prevents setting the active option on mouse enter if the keyboard scrolled the view.
-    if (this.scrollTimeout) {
-      return;
-    }
-
-    if (!option.props.disabled) {
-      this.setState({ active: option.props.value });
-    }
-
-    if (option.props.onMouseEnter) {
-      option.props.onMouseEnter(event);
-    }
-  }
-
   isActiveSelected() {
     return this.state.active === this.props.value;
   }
@@ -400,7 +379,6 @@ class Menu extends React.Component {
           ofText: this.props.intl.formatMessage({ id: 'Terra.form.select.of' }),
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),
-          onMouseEnter: event => this.handleMouseEnter(event, option),
           ...(option.props.value === this.state.active) && { 'data-select-active': true },
         });
       } if (option.type.isOptGroup) {

packages/terra-form-select/src/tag/Menu.jsx

@@ -126,7 +126,6 @@ class Menu extends React.Component {
 
     this.clearScrollTimeout = this.clearScrollTimeout.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.scrollIntoView = this.scrollIntoView.bind(this);
   }
@@ -296,26 +295,6 @@ class Menu extends React.Component {
     }
   }
 
-  /**
-   * Sets the hovered option as the active value.
-   * @param {event} event - The mouse enter event.
-   * @param {ReactNode} option - The option that received the mouse enter event.
-   */
-  handleMouseEnter(event, option) {
-    // Prevents setting the active option on mouse enter if the keyboard scrolled the view.
-    if (this.scrollTimeout) {
-      return;
-    }
-
-    if (!option.props.disabled) {
-      this.setState({ active: option.props.value });
-    }
-
-    if (option.props.onMouseEnter) {
-      option.props.onMouseEnter(event);
-    }
-  }
-
   isActiveSelected() {
     return this.props.value.includes(this.state.active);
   }
@@ -416,7 +395,6 @@ class Menu extends React.Component {
           variant: 'tag',
           onMouseDown: () => { this.downOption = option; },
           onMouseUp: event => this.handleOptionClick(event, option),
-          onMouseEnter: event => this.handleMouseEnter(event, option),
           ...(option.props.value === this.state.active) && { 'data-select-active': true },
         });
       } if (option.type.isOptGroup) {

packages/terra-form-select/tests/jest/__snapshots__/Menu.test.jsx.snap

@@ -102,7 +102,6 @@ exports[`Menu correctly applies the theme context className 1`] = `
           key=".$.$.0"
           ofText="Terra.form.select.of"
           onMouseDown={[Function]}
-          onMouseEnter={[Function]}
           onMouseUp={[Function]}
           totalOptions={1}
           value="value"
@@ -118,7 +117,6 @@ exports[`Menu correctly applies the theme context className 1`] = `
             disabled={false}
             id="terra-select-option-value"
             onMouseDown={[Function]}
-            onMouseEnter={[Function]}
             onMouseUp={[Function]}
             role="option"
             tabIndex="0"