diff --git a/CHANGELOG.md b/CHANGELOG.md
index 770d31598a..f5f64e16b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
## [Unreleased]
+### Fixes
+- Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))
+
## [v0.11.0](https://github.com/stardust-ui/react/tree/v0.11.0) (2018-10-30)
[Compare changes](https://github.com/stardust-ui/react/compare/v0.10.0...v0.11.0)
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
index 05816d5c1d..3955f2f76a 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx
@@ -21,6 +21,6 @@ const items = [
},
]
-const ListExample = () =>
+const ListExample = () =>
export default ListExample
diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
index 502ba05338..6b7a375791 100644
--- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
+++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx
@@ -8,14 +8,17 @@ const ListExample = () => (
)
diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
index 482c9fa09b..53ef0761ce 100644
--- a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx
@@ -3,6 +3,7 @@ import { List, Image } from '@stardust-ui/react'
const items = [
{
+ key: 'irving',
media: ,
header: 'Irving Kuhic - Super long title here',
headerMedia: '7:26:56 AM',
@@ -10,6 +11,7 @@ const items = [
contentMedia: '!!',
},
{
+ key: 'skyler',
media: ,
header: 'Skyler Parks - Super long title here',
headerMedia: '11:30:17 PM',
@@ -17,6 +19,7 @@ const items = [
contentMedia: '!!',
},
{
+ key: 'dante',
media: ,
header: 'Dante Schneider - Super long title here',
headerMedia: '5:22:40 PM',
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 239ea159e7..3e5710bc3e 100644
--- a/src/components/List/ListItem.tsx
+++ b/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, ListItemState> {
private itemRef = React.createRef()
- 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, 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 (
({
+ 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 = {
- 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 = {
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,
}),
diff --git a/src/themes/teams/components/List/listItemVariables.ts b/src/themes/teams/components/List/listItemVariables.ts
index 0bdf2e022c..5edc096d03 100644
--- a/src/themes/teams/components/List/listItemVariables.ts
+++ b/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,
})