From 516dabe5b47913619c40179e44c0983b5439d73a Mon Sep 17 00:00:00 2001 From: musingh Date: Tue, 25 Sep 2018 16:04:27 -0700 Subject: [PATCH 1/7] Fixing endMedia hover issue for ListItem --- .../Content/ListExampleEndMedia.shorthand.tsx | 2 +- .../List/Content/ListExampleEndMedia.tsx | 5 ++- src/components/List/ListItem.tsx | 38 +++---------------- .../teams/components/List/listItemStyles.ts | 21 +++++++--- .../components/List/listItemVariables.ts | 6 ++- .../teams/components/Menu/menuItemStyles.ts | 6 +-- types/theme.d.ts | 1 + 7 files changed, 34 insertions(+), 45 deletions(-) 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..cb094bc099 100644 --- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx +++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx @@ -4,18 +4,21 @@ import { List } from '@stardust-ui/react' const ellipsis = … const ListExample = () => ( - + ) diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index c8dc20e7a9..f709db1f64 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -96,14 +96,6 @@ class ListItem extends UIComponent, any> { state: any = {} - handleMouseEnter = () => { - this.setState({ isHovering: true }) - } - - handleMouseLeave = () => { - this.setState({ isHovering: false }) - } - renderComponent({ ElementType, classes, accessibility, rest, styles }) { const { as, @@ -119,33 +111,15 @@ class ListItem extends UIComponent, 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 ( , any> { 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} /> diff --git a/src/themes/teams/components/List/listItemStyles.ts b/src/themes/teams/components/List/listItemStyles.ts index 4b90ef5407..d15b633746 100644 --- a/src/themes/teams/components/List/listItemStyles.ts +++ b/src/themes/teams/components/List/listItemStyles.ts @@ -3,14 +3,27 @@ import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/t import { IListItemProps } from '../../../../components/List/ListItem' const listItemStyles: IComponentPartStylesInput = { - root: ({ props: { selection, important } }): ICSSInJSStyle => ({ + root: ({ props: { selection, important }, variables }): ICSSInJSStyle => ({ ...(selection && { position: 'relative', + // show the end media on hover + '& .ui-item-layout__endMedia': { display: 'none' }, + ':hover': { - background: 'rgba(98, 100, 167, .8)', - color: '#fff', + 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' }, }, }), ...(important && { @@ -37,12 +50,10 @@ const listItemStyles: IComponentPartStylesInput = { 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 38d28cf073..5f61abfd30 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.fontSizeMedium, // Header Media - headerMediaColor: siteVariables.gray02, headerMediaFontSize: siteVariables.fontSizeSmall, // TODO: prod app uses 17.5px here, it should be 16px per the design guide! headerMediaLineHeight: siteVariables.lineHeightSmall, // Content - contentColor: siteVariables.gray02, contentFontSize: siteVariables.fontSizeSmall, contentLineHeight: siteVariables.lineHeightSmall, + + // Selection + selectionHoverColor: siteVariables.white, + selectionHoverBackgroundColor: siteVariables.brand08, }) diff --git a/src/themes/teams/components/Menu/menuItemStyles.ts b/src/themes/teams/components/Menu/menuItemStyles.ts index b3531aa9dd..e9d793a9f8 100644 --- a/src/themes/teams/components/Menu/menuItemStyles.ts +++ b/src/themes/teams/components/Menu/menuItemStyles.ts @@ -1,6 +1,6 @@ import { pxToRem } from '../../../../lib' import { - ComponentPartStyle, + ComponentPartStyleFunction, IComponentPartStylesInput, ICSSInJSStyle, } from '../../../../../types/theme' @@ -12,7 +12,7 @@ const underlinedItem = (color): ICSSInJSStyle => ({ transition: 'color .1s ease', }) -const itemSeparator: ComponentPartStyle = ({ +const itemSeparator: ComponentPartStyleFunction = ({ props, variables, }): ICSSInJSStyle => { @@ -44,7 +44,7 @@ const itemSeparator: ComponentPartStyle = ({ } } -const pointingBeak: ComponentPartStyle = ({ +const pointingBeak: ComponentPartStyleFunction = ({ props, variables, }): ICSSInJSStyle => { diff --git a/types/theme.d.ts b/types/theme.d.ts index bf27ce8685..b900bdaee7 100644 --- a/types/theme.d.ts +++ b/types/theme.d.ts @@ -54,6 +54,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' From 7f70b3a1b776590731d6cf445f707aaa696e9b5f Mon Sep 17 00:00:00 2001 From: musingh Date: Tue, 25 Sep 2018 16:36:13 -0700 Subject: [PATCH 2/7] Updating changelog --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f41196eff..67404432af 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` ([#278](https://github.com/stardust-ui/react/pull/278)) + ## [v0.7.0](https://github.com/stardust-ui/react/tree/v0.7.0) (2018-09-25) [Compare changes](https://github.com/stardust-ui/react/compare/v0.6.0...v0.7.0) From 7e186cc46906ba827993c01e18c0b450c2e262ef Mon Sep 17 00:00:00 2001 From: Mukul Singh Date: Wed, 26 Sep 2018 09:37:41 -0700 Subject: [PATCH 3/7] Add focus styles (#284) --- .../teams/components/List/listItemStyles.ts | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/src/themes/teams/components/List/listItemStyles.ts b/src/themes/teams/components/List/listItemStyles.ts index d15b633746..2278245088 100644 --- a/src/themes/teams/components/List/listItemStyles.ts +++ b/src/themes/teams/components/List/listItemStyles.ts @@ -2,6 +2,22 @@ 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 = { root: ({ props: { selection, important }, variables }): ICSSInJSStyle => ({ ...(selection && { @@ -10,21 +26,8 @@ const listItemStyles: IComponentPartStylesInput = { // show the end media on hover '& .ui-item-layout__endMedia': { display: 'none' }, - ':hover': { - 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' }, - }, + '&:hover': hoverStyle(variables), + '&:focus': hoverStyle(variables), }), ...(important && { fontWeight: 'bold', From 753bb374d9f699b947a65ae175779de81aef2b28 Mon Sep 17 00:00:00 2001 From: musingh Date: Wed, 3 Oct 2018 17:01:13 -0700 Subject: [PATCH 4/7] merging from master --- .github/CONTRIBUTING.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index c11d6e2cad..6e5e37f285 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -11,6 +11,7 @@ CONTRIBUTING - [Accessibility](#accessibility) - [Role and aria props](#role-and-aria-props) - [Focus](#focus) + - [Keyboard handling](#keyboard-handling) From 4a47b86c44f792e3b67fa980123818bc39d3f51a Mon Sep 17 00:00:00 2001 From: musingh Date: Wed, 17 Oct 2018 14:19:32 -0700 Subject: [PATCH 5/7] Resolving PR comments --- .../List/Variations/ListExampleTruncate.shorthand.tsx | 3 +++ src/components/List/ListItem.tsx | 2 -- src/themes/teams/components/List/listItemStyles.ts | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) 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 b0b800b040..d584d993e7 100644 --- a/src/components/List/ListItem.tsx +++ b/src/components/List/ListItem.tsx @@ -113,7 +113,6 @@ class ListItem extends UIComponent, IListItemState> { contentMedia, header, headerMedia, - selection, truncateContent, truncateHeader, } = this.props @@ -131,7 +130,6 @@ class ListItem extends UIComponent, IListItemState> { headerMedia={headerMedia} media={media} mediaCSS={styles.media} - selection={selection} truncateContent={truncateContent} truncateHeader={truncateHeader} headerCSS={styles.header} diff --git a/src/themes/teams/components/List/listItemStyles.ts b/src/themes/teams/components/List/listItemStyles.ts index 2278245088..f5851deafd 100644 --- a/src/themes/teams/components/List/listItemStyles.ts +++ b/src/themes/teams/components/List/listItemStyles.ts @@ -15,7 +15,7 @@ const hoverStyle = variables => ({ '& .ui-item-layout__contentMedia': { display: 'none', color: 'inherit' }, // show the end media on hover - '& .ui-item-layout__endMedia': { display: 'unset', color: 'inherit' }, + '& .ui-item-layout__endMedia': { display: 'block', color: 'inherit' }, }) const listItemStyles: IComponentPartStylesInput = { @@ -23,7 +23,7 @@ const listItemStyles: IComponentPartStylesInput = { ...(selection && { position: 'relative', - // show the end media on hover + // hide the end media by default '& .ui-item-layout__endMedia': { display: 'none' }, '&:hover': hoverStyle(variables), From ff49338cf1132d3d3c0c7c174569e445ed7666ad Mon Sep 17 00:00:00 2001 From: musingh Date: Wed, 17 Oct 2018 14:51:27 -0700 Subject: [PATCH 6/7] Reverting endmedia example change --- .../List/Content/ListExampleEndMedia.shorthand.tsx | 2 +- .../examples/components/List/Content/ListExampleEndMedia.tsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx b/docs/src/examples/components/List/Content/ListExampleEndMedia.shorthand.tsx index 3955f2f76a..05816d5c1d 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 cb094bc099..502ba05338 100644 --- a/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx +++ b/docs/src/examples/components/List/Content/ListExampleEndMedia.tsx @@ -4,21 +4,18 @@ import { List } from '@stardust-ui/react' const ellipsis = … const ListExample = () => ( - + ) From 001d878f4942dea8e980514db33dae0a853b8b83 Mon Sep 17 00:00:00 2001 From: musingh Date: Mon, 29 Oct 2018 15:20:32 -0700 Subject: [PATCH 7/7] Updating the endMedia example --- CHANGELOG.md | 2 +- .../List/Content/ListExampleEndMedia.shorthand.tsx | 2 +- .../components/List/Content/ListExampleEndMedia.tsx | 3 +++ src/components/List/ListItem.tsx | 11 +++-------- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5225921c4b..e9eae7e02f 100644 --- a/CHANGELOG.md +++ b/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)) @@ -54,7 +55,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix for cropped rounded corners in `Menu` component @Bugaa92 ([#360](https://github.com/stardust-ui/react/pull/360)) - Remove hardcoded `status` size calculations in `Avatar` component @Bugaa92 ([#358](https://github.com/stardust-ui/react/pull/358)) - Remove necessity to use `skipLibCheck` flag for client's typescript projects that consume Stardust @kuzhelov ([#367](https://github.com/stardust-ui/react/pull/367)) -- Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278)) ### Features - Add `target` prop to `Popup` @kuzhelog ([#356](https://github.com/stardust-ui/react/pull/356)) 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/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx index 1d20d19923..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,10 +93,9 @@ class ListItem extends UIComponent, ListItemState> { private itemRef = React.createRef() - private focusableItem = FocusableItem.create(this) - 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 }) {