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

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384))
 - Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402))
 - Add Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408))
+- Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))
 
 ### Features
 - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))

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

@@ -8,14 +8,17 @@ const ListExample = () => (
     <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>
 )

docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx

@@ -3,20 +3,23 @@ import { List, Image } from '@stardust-ui/react'
 
 const items = [
   {
+    key: 'irving',
     media: <Image src="public/images/avatar/small/matt.jpg" avatar />,
     header: 'Irving Kuhic - Super long title here',
     headerMedia: '7:26:56 AM',
     content: 'Program the sensor to the SAS alarm through the haptic SQL card!',
     contentMedia: '!!',
   },
   {
+    key: 'skyler',
     media: <Image src="public/images/avatar/small/steve.jpg" avatar />,
     header: 'Skyler Parks - Super long title here',
     headerMedia: '11:30:17 PM',
     content: 'Use the online FTP application to input the multi-byte application!',
     contentMedia: '!!',
   },
   {
+    key: 'dante',
     media: <Image src="public/images/avatar/small/nom.jpg" avatar />,
     header: 'Dante Schneider - Super long title here',
     headerMedia: '5:22:40 PM',

src/components/List/ListItem.tsx

@@ -1,15 +1,11 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
 
 import * as PropTypes from 'prop-types'
 import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import ItemLayout from '../ItemLayout/ItemLayout'
 import { listItemBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-import {
-  FocusableItem,
-  FocusableItemProps,
-} from '../../lib/accessibility/FocusHandling/FocusableItem'
+import { FocusableItemProps } from '../../lib/accessibility/FocusHandling/FocusableItem'
 import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
 import { Extendable } from '../../../types/utils'
 
@@ -97,18 +93,9 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
 
   private itemRef = React.createRef<HTMLElement>()
 
-  private focusableItem = FocusableItem.create(this)
-
-  handleMouseEnter = () => {
-    this.setState({ isHovering: true })
-  }
-
-  handleMouseLeave = () => {
-    this.setState({ isHovering: false })
-  }
-
   componentDidUpdate() {
-    this.focusableItem.tryFocus(ReactDOM.findDOMNode(this.itemRef.current) as HTMLElement)
+    // This needs to be as part of issue https://github.com/stardust-ui/react/issues/370
+    // this.focusableItem.tryFocus(ReactDOM.findDOMNode(this.itemRef.current) as HTMLElement)
   }
 
   renderComponent({ ElementType, classes, accessibility, rest, styles }) {
@@ -121,50 +108,28 @@ class ListItem extends UIComponent<Extendable<ListItemProps>, ListItemState> {
       contentMedia,
       header,
       headerMedia,
-      selection,
       truncateContent,
       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}
         ref={this.itemRef}
         {...accessibility.attributes.root}
         {...rest}

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

@@ -2,16 +2,32 @@ import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { ListItemProps } 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: 'block', color: 'inherit' },
+})
+
 const listItemStyles: ComponentSlotStylesInput<ListItemProps, 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',
-      },
+      // hide the end media by default
+      '& .ui-item-layout__endMedia': { display: 'none' },
+
+      '&:hover': hoverStyle(variables),
+      '&:focus': hoverStyle(variables),
     }),
     ...(important && {
       fontWeight: 'bold',
@@ -37,12 +53,10 @@ const listItemStyles: ComponentSlotStylesInput<ListItemProps, 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,
 })