fix: (ListItem) - Fix endMedia to not be removed from DOM on mouseleave for ListItem

.github/CONTRIBUTING.md

@@ -11,6 +11,7 @@ CONTRIBUTING
 - [Accessibility](#accessibility)
   - [Role and aria props](#role-and-aria-props)
   - [Focus](#focus)
+  - [Keyboard handling](#keyboard-handling)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Ensure `Popup` is rendered as direct child of `body` element in the DOM tree @kuzhelov ([#302](https://github.com/stardust-ui/react/pull/302))
 - Fix toggle logic of `Popup` as reaction on key press events @kuzhelov ([#304](https://github.com/stardust-ui/react/pull/304))
 - Fix for `RadioGroup`: made `label` accept react nodes as value and fixed keyboard navigation @Bugaa92 ([#287](https://github.com/stardust-ui/react/pull/287))
+- Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))
 
 ### Features
 - Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))

docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx

@@ -21,6 +21,6 @@ const items = [
   },
 ]
 
-const ListExample = () => <List items={items} />
+const ListExample = () => <List items={items} selection />
 
 export default ListExample

docs/src/examples/components/List/Content/ListExampleEndMedia.tsx

@@ -4,18 +4,21 @@ import { List } from '@stardust-ui/react'
 const ellipsis = <span>&hellip;</span>
 
 const ListExample = () => (
-  <List>
+  <List selection>
     <List.Item
       content="Program the sensor to the SAS alarm through the haptic SQL card!"
       endMedia={ellipsis}
+      selection
     />
     <List.Item
       content="Use the online FTP application to input the multi-byte application!"
       endMedia={ellipsis}
+      selection
     />
     <List.Item
       content="The GB pixel is down, navigate the virtual interface!"
       endMedia={ellipsis}
+      selection
     />
   </List>
 )

src/components/List/ListItem.tsx

@@ -77,14 +77,6 @@ class ListItem extends UIComponent<Extendable<IListItemProps>, any> {
 
   state: any = {}
 
-  handleMouseEnter = () => {
-    this.setState({ isHovering: true })
-  }
-
-  handleMouseLeave = () => {
-    this.setState({ isHovering: false })
-  }
-
   renderComponent({ ElementType, classes, accessibility, rest, styles }) {
     const {
       as,
@@ -100,45 +92,25 @@ class ListItem extends UIComponent<Extendable<IListItemProps>, any> {
       truncateHeader,
     } = this.props
 
-    const { isHovering } = this.state
-    const endArea = isHovering && endMedia
-
-    const hoveringSelectionCSS = selection && isHovering ? { color: 'inherit' } : {}
-
-    const headerCSS = {
-      ...styles.header,
-      ...hoveringSelectionCSS,
-    }
-    const headerMediaCSS = {
-      ...styles.headerMedia,
-      ...hoveringSelectionCSS,
-    }
-    const contentCSS = {
-      ...styles.content,
-      ...hoveringSelectionCSS,
-    }
-
     return (
       <ItemLayout
         as={as}
         className={classes.root}
         rootCSS={styles.root}
         content={content}
-        contentMedia={!isHovering && contentMedia}
+        contentMedia={contentMedia}
         debug={debug}
-        endMedia={endArea}
+        endMedia={endMedia}
         header={header}
         headerMedia={headerMedia}
         media={media}
         mediaCSS={styles.media}
         selection={selection}
         truncateContent={truncateContent}
         truncateHeader={truncateHeader}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-        headerCSS={headerCSS}
-        headerMediaCSS={headerMediaCSS}
-        contentCSS={contentCSS}
+        headerCSS={styles.header}
+        headerMediaCSS={styles.headerMedia}
+        contentCSS={styles.content}
         {...accessibility.attributes.root}
         {...rest}
       />

src/themes/teams/components/List/listItemStyles.ts

@@ -2,16 +2,32 @@ import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
 import { IListItemProps } from '../../../../components/List/ListItem'
 
+const hoverStyle = variables => ({
+  background: variables.selectionHoverBackgroundColor,
+  color: variables.selectionHoverColor,
+  cursor: 'pointer',
+
+  '& .ui-item-layout__header': { color: 'inherit' },
+  '& .ui-item-layout__content': { color: 'inherit' },
+
+  // hide the header media and content media on hover
+  '& .ui-item-layout__headerMedia': { display: 'none', color: 'inherit' },
+  '& .ui-item-layout__contentMedia': { display: 'none', color: 'inherit' },
+
+  // show the end media on hover
+  '& .ui-item-layout__endMedia': { display: 'unset', color: 'inherit' },
+})
+
 const listItemStyles: IComponentPartStylesInput<IListItemProps, any> = {
-  root: ({ props: { selection, important } }): ICSSInJSStyle => ({
+  root: ({ props: { selection, important }, variables }): ICSSInJSStyle => ({
     ...(selection && {
       position: 'relative',
 
-      ':hover': {
-        background: 'rgba(98, 100, 167, .8)',
-        color: '#fff',
-        cursor: 'pointer',
-      },
+      // show the end media on hover
+      '& .ui-item-layout__endMedia': { display: 'none' },
+
+      '&:hover': hoverStyle(variables),
+      '&:focus': hoverStyle(variables),
     }),
     ...(important && {
       fontWeight: 'bold',
@@ -37,12 +53,10 @@ const listItemStyles: IComponentPartStylesInput<IListItemProps, any> = {
     lineHeight: variables.headerLineHeight,
   }),
   headerMedia: ({ variables }): ICSSInJSStyle => ({
-    color: variables.headerMediaColor,
     fontSize: variables.headerMediaFontSize,
     lineHeight: variables.headerMediaLineHeight,
   }),
   content: ({ variables }) => ({
-    color: variables.contentColor,
     fontSize: variables.contentFontSize,
     lineHeight: variables.contentLineHeight,
   }),

src/themes/teams/components/List/listItemVariables.ts

@@ -5,13 +5,15 @@ export default siteVariables => ({
   headerFontSize: siteVariables.fontSizes.medium,
 
   // Header Media
-  headerMediaColor: siteVariables.gray02,
   headerMediaFontSize: siteVariables.fontSizes.small,
   // TODO: prod app uses 17.5px here, it should be 16px per the design guide!
   headerMediaLineHeight: siteVariables.lineHeightSmall,
 
   // Content
-  contentColor: siteVariables.gray02,
   contentFontSize: siteVariables.fontSizes.small,
   contentLineHeight: siteVariables.lineHeightSmall,
+
+  // Selection
+  selectionHoverColor: siteVariables.white,
+  selectionHoverBackgroundColor: siteVariables.brand08,
 })

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -1,6 +1,6 @@
 import { pxToRem } from '../../../../lib'
 import {
-  ComponentPartStyle,
+  ComponentPartStyleFunction,
   IComponentPartStylesInput,
   ICSSInJSStyle,
 } from '../../../../../types/theme'
@@ -39,7 +39,7 @@ const getActionStyles = ({
           background: v.defaultActiveBackgroundColor,
         }
 
-const itemSeparator: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
+const itemSeparator: ComponentPartStyleFunction<IMenuItemProps, IMenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {
@@ -72,7 +72,7 @@ const itemSeparator: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
   )
 }
 
-const pointingBeak: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
+const pointingBeak: ComponentPartStyleFunction<IMenuItemProps, IMenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {

types/theme.d.ts

@@ -60,6 +60,7 @@ export interface ICSSPseudoElementStyle extends ICSSInJSStyle {
 }
 
 export interface ICSSInJSStyle extends React.CSSProperties {
+  [key: string]: any
   // missing React.CSSProperties
   speak?: CSSType.Globals | 'none' | 'normal' | 'spell-out'