2.1.4 release

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [2.1.4] - 2018-09-17
+
+### Fixed
+
+- `moonstone/Button` and `moonstone/IconButton` to style image-based icons correctly when focused and disabled
+- `moonstone/FormCheckboxItem` styling when focused and disabled
+- `moonstone/Panels` to always blur breadcrumbs when transitioning to a new panel
+- `moonstone/Scroller` to correctly set scroll position when nested item is focused
+- `moonstone/Scroller` to not adjust `scrollTop` when nested item is focused
+- `moonstone/VideoPlayer` to show correct playback rate feedback on play or pause
+- `spotlight/Spottable` to respect paused state when it becomes enabled
+- `ui/ViewManager` to emit `onWillTransition` when views are either added or removed
+
 ## [2.1.3] - 2018-09-10
 
 ### Fixed

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.8.0",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "command": {
     "bootstrap": {
       "npmClientArgs": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "enact",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Monorepo for all Enact front end libraries.",
   "private": true,
   "scripts": {

packages/core/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
+## [2.1.4] - 2018-09-17
+
+No significant changes.
+
 ## [2.1.3] - 2018-09-10
 
 No significant changes.

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Enact is an open source JavaScript framework containing everything you need to create a fast, scalable mobile or web application.",
   "main": "index.js",
   "scripts": {

packages/i18n/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact i18n module, newest changes on the top.
 
+## [2.1.4] - 2018-09-17
+
+No significant changes.
+
 ## [2.1.3] - 2018-09-10
 
 No significant changes.

packages/i18n/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@enact/i18n",
   "main": "./src/index.js",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Internationalization support for Enact using iLib",
   "scripts": {
     "clean": "enact clean",
@@ -34,7 +34,7 @@
     "extends": "enact/strict"
   },
   "dependencies": {
-    "@enact/core": "^2.1.3",
+    "@enact/core": "^2.1.4",
     "prop-types": "^15.6.0",
     "ramda": "^0.24.1",
     "react": "^16.3.2",

packages/moonstone/Button/Button.less

@@ -193,6 +193,11 @@
 
 			.disabled({
 				color: @moon-spotlight-disabled-text-color;
+
+				.icon {
+					.vendor-opacity(0.6);
+					color: @moon-spotlight-text-color;
+				}
 			});
 		});
 

packages/moonstone/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
+## [2.1.4] - 2018-09-17
+
+### Fixed
+
+- `moonstone/Button` and `moonstone/IconButton` to style image-based icons correctly when focused and disabled
+- `moonstone/FormCheckboxItem` styling when focused and disabled
+- `moonstone/Panels` to always blur breadcrumbs when transitioning to a new panel
+- `moonstone/Scroller` to correctly set scroll position when nested item is focused
+- `moonstone/Scroller` to not adjust `scrollTop` when nested item is focused
+- `moonstone/VideoPlayer` to show correct playback rate feedback on play or pause
+
 ## [2.1.3] - 2018-09-10
 
 ### Fixed

packages/moonstone/FormCheckbox/FormCheckbox.less

@@ -55,10 +55,9 @@
 		// Skin colors
 		.applySkins({
 			box-shadow: none;
+			background-color: @moon-spotlight-color;
 
 			&:not([disabled]) {
-				background-color: @moon-spotlight-color;
-
 				.icon {
 					color: @moon-spotlight-text-color;
 				}
@@ -78,4 +77,3 @@
 		}
 	}, parent);
 }, parent);
-

packages/moonstone/FormCheckboxItem/FormCheckboxItem.less

@@ -13,8 +13,9 @@
 	// Skin colors
 	.applySkins({
 		.focus({
+			background-color: transparent;
+
 			&:not([disabled]) {
-				background-color: transparent;
 				color: @moon-text-color;
 			}
 		});

packages/moonstone/IconButton/IconButton.less

@@ -3,6 +3,7 @@
 @import "../styles/mixins.less";
 @import "../styles/variables.less";
 @import "../styles/text.less";
+@import "../styles/skin.less";
 
 .iconButton {
 	.moon-taparea(@moon-icon-button-size);
@@ -57,4 +58,17 @@
 	.selected {
 		/* Exported for customization*/
 	}
+
+	.applySkins({
+		.focus({
+			.disabled({
+				color: @moon-spotlight-disabled-text-color;
+
+				.icon {
+					.vendor-opacity(0.6);
+					color: @moon-spotlight-text-color;
+				}
+			});
+		});
+	});
 }

packages/moonstone/Panels/Breadcrumb.js

@@ -1,9 +1,11 @@
+import {handle, forward, adaptEvent} from '@enact/core/handle';
 import kind from '@enact/core/kind';
 import Spottable from '@enact/spotlight/Spottable';
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import $L from '../internal/$L';
+
 import css from './Panels.less';
 
 // Since we expose `onSelect` to handle breadcrumb selection, we need that handler to be set on a
@@ -69,13 +71,10 @@ const BreadcrumbBase = kind({
 	},
 
 	handlers: {
-		onSelect: (ev, {index, onSelect, onClick}) => {
-			// clear Spotlight focus
-			ev.target.blur();
-
-			if (onClick) onClick(ev);
-			if (onSelect) onSelect({index});
-		}
+		onSelect: handle(
+			forward('onClick'),
+			adaptEvent((ev, {index}) => ({type: 'onSelect', index}), forward('onSelect'))
+		)
 	},
 
 	render: ({children, index, onSelect, ...rest}) => (

packages/moonstone/Panels/BreadcrumbDecorator.js

@@ -1,10 +1,11 @@
-import {coerceFunction} from '@enact/core/util';
 import hoc from '@enact/core/hoc';
-import invariant from 'invariant';
 import kind from '@enact/core/kind';
+import {coerceFunction} from '@enact/core/util';
 import ViewManager from '@enact/ui/ViewManager';
-import React from 'react';
+import Spotlight from '@enact/spotlight';
+import invariant from 'invariant';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 import IdProvider from '../internal/IdProvider';
 import Skinnable from '../Skinnable';
@@ -152,6 +153,18 @@ const BreadcrumbDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			className: cfgClassName
 		},
 
+		handlers: {
+			handleBreadcrumbWillTransition: (ev, {id}) => {
+				const current = Spotlight.getCurrent();
+				if (!current) return;
+
+				const breadcrumbs = document.querySelector(`#${id} .${css.breadcrumbs}`);
+				if (breadcrumbs && breadcrumbs.contains(current)) {
+					current.blur();
+				}
+			}
+		},
+
 		computed: {
 			// Invokes the breadcrumb generator, if provided
 			breadcrumbs: ({breadcrumbs, id, index, onSelectBreadcrumb}) => {
@@ -202,7 +215,7 @@ const BreadcrumbDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			}
 		},
 
-		render: ({breadcrumbs, childProps, children, className, generateId, id, index, noAnimation, ...rest}) => {
+		render: ({breadcrumbs, childProps, children, className, generateId, handleBreadcrumbWillTransition, id, index, noAnimation, ...rest}) => {
 			delete rest.onSelectBreadcrumb;
 
 			const count = React.Children.count(children);
@@ -220,6 +233,7 @@ const BreadcrumbDecorator = hoc(defaultConfig, (config, Wrapped) => {
 						end={calcMax()}
 						index={index - 1}
 						noAnimation={noAnimation}
+						onWillTransition={handleBreadcrumbWillTransition}
 						start={0}
 					>
 						{breadcrumbs}

packages/moonstone/Scrollable/ScrollButton.js

@@ -6,13 +6,6 @@ import IconButton from '../IconButton';
 
 import css from './Scrollbar.less';
 
-const classNameMap = {
-	down: css.scrollbarBottomButton,
-	left: css.scrollbarLeftButton,
-	right: css.scrollbarRightButton,
-	up: css.scrollbarUpButton
-};
-
 /**
  * An [IconButton]{@link moonstone/IconButton.IconButton} used within
  * a [Scrollbar]{@link moonstone/Scrollable.Scrollbar}.
@@ -36,21 +29,6 @@ const ScrollButton = kind({
 		 */
 		children: PropTypes.string.isRequired,
 
-		/**
-		 * Scroll direction for this button.
-		 *
-		 * Valid values are:
-		 * * `'down'`,
-		 * * `'left'`,
-		 * * `'right'`, and
-		 * * `'up'`.
-		 *
-		 * @type {String}
-		 * @required
-		 * @public
-		 */
-		direction: PropTypes.oneOf(['down', 'left', 'right', 'up']).isRequired,
-
 		/**
 		* Sets the hint string read when focusing the scroll bar button.
 		*
@@ -84,13 +62,11 @@ const ScrollButton = kind({
 	},
 
 	computed: {
-		'aria-label': ({active, 'aria-label': ariaLabel}) => (active ? null : ariaLabel),
-		className: ({direction, styler}) => styler.append(classNameMap[direction])
+		'aria-label': ({active, 'aria-label': ariaLabel}) => (active ? null : ariaLabel)
 	},
 
 	render: ({children, disabled, ...rest}) => {
 		delete rest.active;
-		delete rest.direction;
 
 		return (
 			<IconButton

packages/moonstone/Scrollable/ScrollButtons.js

@@ -316,7 +316,6 @@ class ScrollButtons extends Component {
 			<ScrollButton
 				aria-label={rtl && !vertical ? nextButtonAriaLabel : previousButtonAriaLabel}
 				data-spotlight-overflow="ignore"
-				direction={vertical ? 'up' : 'left'}
 				disabled={disabled || prevButtonDisabled}
 				key="prevButton"
 				onClick={this.onClickPrev}
@@ -335,7 +334,6 @@ class ScrollButtons extends Component {
 			<ScrollButton
 				aria-label={rtl && !vertical ? previousButtonAriaLabel : nextButtonAriaLabel}
 				data-spotlight-overflow="ignore"
-				direction={vertical ? 'down' : 'right'}
 				disabled={disabled || nextButtonDisabled}
 				key="nextButton"
 				onClick={this.onClickNext}

packages/moonstone/Scroller/Scroller.js

@@ -189,18 +189,18 @@ class ScrollerBase extends Component {
 				newScrollTop += nestedItemBottom - scrollBottom;
 			} else if (nestedItemTop - currentScrollTop < epsilon) {
 				// Caculate when 5-way focus up past the top.
-				newScrollTop += nestedItemTop - currentScrollTop;
+				if (newItemTop > newScrollTop) {
+					// Ensure that the adjusted scrollTop would at least scroll the container to the top of
+					// the viewport (e.g. because the container is at the bottom of the scroller and the
+					// nested item is at the top of the container)
+					newScrollTop = newItemTop;
+				} else {
+					newScrollTop += nestedItemTop - currentScrollTop;
+				}
 			} else if (newItemTop - nestedItemHeight - currentScrollTop > epsilon) {
 				// set scroll position so that the top of the container is at least on the top as a fallback.
 				newScrollTop = newItemTop - nestedItemHeight;
 			}
-
-			// Ensure that the adjusted scrollTop would at least scroll the container to the top of
-			// the viewport (e.g. because the container is at the bottom of the scroller and the
-			// nested item is at the top of the container)
-			if (newItemTop > newScrollTop) {
-				newScrollTop = newItemTop;
-			}
 		} else if (itemBottom - scrollBottom > epsilon) {
 			// Caculate when 5-way focus down past the bottom.
 			newScrollTop += itemBottom - scrollBottom;

packages/moonstone/VideoPlayer/MediaControls.js

@@ -23,7 +23,6 @@ import {countReactChildren} from './util';
 import css from './VideoPlayer.less';
 
 const OuterContainer = SpotlightContainerDecorator({
-	enterTo: 'default-element',
 	defaultElement: [
 		`.${css.leftComponents} .${spotlightDefaultClass}`,
 		`.${css.rightComponents} .${spotlightDefaultClass}`,

packages/moonstone/VideoPlayer/VideoPlayer.js

@@ -50,7 +50,14 @@ import Video from './Video';
 import css from './VideoPlayer.less';
 
 const SpottableDiv = Touchable(Spottable('div'));
-const RootContainer = SpotlightContainerDecorator('div');
+const RootContainer = SpotlightContainerDecorator(
+	{
+		enterTo: 'default-element',
+		defaultElement: [`.${css.controlsHandleAbove}`, `.${css.controlsFrame}`]
+	},
+	'div'
+);
+
 const ControlsContainer = SpotlightContainerDecorator(
 	{
 		enterTo: '',
@@ -1205,9 +1212,11 @@ const VideoPlayerBase = class extends React.Component {
 		}
 
 		this.speedIndex = 0;
+		// must happen before send() to ensure feedback uses the right value
+		// TODO: refactor into this.state member
+		this.prevCommand = 'play';
 		this.setPlaybackRate(1);
 		this.send('play');
-		this.prevCommand = 'play';
 		this.announce($L('Play'));
 		this.startDelayedMiniFeedbackHide(5000);
 	}
@@ -1225,9 +1234,11 @@ const VideoPlayerBase = class extends React.Component {
 		}
 
 		this.speedIndex = 0;
+		// must happen before send() to ensure feedback uses the right value
+		// TODO: refactor into this.state member
+		this.prevCommand = 'pause';
 		this.setPlaybackRate(1);
 		this.send('pause');
-		this.prevCommand = 'pause';
 		this.announce($L('Pause'));
 		this.stopDelayedMiniFeedbackHide();
 	}