2.5.2 release

Author: JayCanuck

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [2.5.2] - 2019-04-23
+
+### Fixed
+
+- `moonstone/EditableIntegerPicker` text alignment when not editing the value
+- `moonstone/Scroller` to scroll via dragging when the platform has touch support
+- `moonstone/VideoPlayer` to continue to display the thumbnail image while the slider is focused
+- `ui/Skinnable` to allow overriding default `skinVariant` values
+- `ui/Touchable` to prevent events firing on different nodes for the same touch action
+- `ui/Touchable` to neither force focus to components nor blur components after they are touched
+
 ## [2.5.1] - 2019-04-09
 
 ### Fixed

lerna.json

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

package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "enact",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Monorepo for all Enact front end libraries.",
   "private": true,
   "scripts": {
     "lerna": "lerna",
     "bootstrap": "lerna bootstrap --concurrency 1",
     "publish": "lerna publish --skip-npm --skip-git",
-    "link-all": "lerna --concurrency 1 exec -- npm --loglevel error link",
-    "unlink-all": "lerna --concurrency 1 exec -- npm --loglevel error unlink",
+    "link-all": "lerna --concurrency 1 --ignore enact-sampler exec -- npm --loglevel error link",
+    "unlink-all": "lerna --concurrency 1 --ignore enact-sampler exec -- npm --loglevel error unlink",
     "test": "lerna --concurrency 1 run test",
     "clean": "lerna clean"
   },

package.json

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
+## [2.5.2] - 2019-04-23
+
+No significant changes.
+
 ## [2.5.1] - 2019-04-09
 
 ### Fixed

packages/core/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "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/core/package.json

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact i18n module, newest changes on the top.
 
+## [2.5.2] - 2019-04-23
+
+No significant changes.
+
 ## [2.5.1] - 2019-04-09
 
 No significant changes.

packages/i18n/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@enact/i18n",
   "main": "./src/index.js",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Internationalization support for Enact using iLib",
   "scripts": {
     "clean": "enact clean",
@@ -41,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@enact/core": "^2.5.1",
+    "@enact/core": "^2.5.2",
     "prop-types": "15.6.2",
     "ramda": "^0.24.1",
     "react": "^16.7.0",

packages/i18n/package.json

@@ -146,7 +146,10 @@
 
 	// Skin colors
 	.applySkins({
-		color: @moon-button-text-color;
+		&,
+		:global(.enact-a11y-high-contrast) & {
+			color: @moon-button-text-color;
+		}
 
 		.bg {
 			background-color: @moon-button-bg-color;
@@ -183,8 +186,15 @@
 		}
 
 		.focus({
-			color: @moon-spotlight-text-color;
-			background-color: transparent;
+			// The complexity below overrides the default high-contrast rules and applies
+			// non-high-contrast rules. The precedence for the general rule is too high for the
+			// basic button override rule to take effect, so we must overcome it by stacking more
+			// classes here.
+			&,
+			:global(.enact-a11y-high-contrast) &:not(:global(.highContrast)) {
+				color: @moon-spotlight-text-color;
+				background-color: transparent;
+			}
 
 			.bg {
 				background-color: @moon-spotlight-border-color;

packages/moonstone/Button/Button.module.less

@@ -2,6 +2,14 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
+## [2.5.2] - 2019-04-23
+
+### Fixed
+
+- `moonstone/EditableIntegerPicker` text alignment when not editing the value
+- `moonstone/Scroller` to scroll via dragging when the platform has touch support
+- `moonstone/VideoPlayer` to continue to display the thumbnail image while the slider is focused
+
 ## [2.5.1] - 2019-04-09
 
 ### Fixed

packages/moonstone/CHANGELOG.md

@@ -269,12 +269,17 @@ const EditableIntegerPickerBase = kind({
 				);
 			}
 
+			let children = label;
+			if (unit) {
+				children = `${label} ${unit}`;
+			}
+
 			return (
 				<PickerItem
 					key={value}
 					onClick={onPickerItemClick}
 				>
-					{`${label} ${unit}`}
+					{children}
 				</PickerItem>
 			);
 		},

packages/moonstone/EditableIntegerPicker/EditableIntegerPicker.js

@@ -753,7 +753,7 @@ class ScrollableBase extends Component {
 
 		return (
 			<UiScrollableBase
-				noScrollByDrag
+				noScrollByDrag={!platform.touch}
 				{...rest}
 				addEventListeners={this.addEventListeners}
 				applyOverscrollEffect={this.applyOverscrollEffect}

packages/moonstone/Scrollable/Scrollable.js

@@ -265,9 +265,6 @@ class ScrollableBaseNative extends Component {
 		vertical: {before: null, after: null}
 	}
 
-	// browser native scrolling
-	resetPosition = null // prevent auto-scroll on focus by Spotlight
-
 	onMouseDown = (ev) => {
 		if (this.props['data-spotlight-container-disabled']) {
 			ev.preventDefault();
@@ -292,20 +289,6 @@ class ScrollableBaseNative extends Component {
 		}
 	}
 
-	onMouseOver = () => {
-		this.resetPosition = this.uiRef.current.childRefCurrent.containerRef.current.scrollTop;
-	}
-
-	onMouseMove = () => {
-		if (this.resetPosition !== null) {
-			const childContainerRef = this.uiRef.current.childRefCurrent.containerRef;
-			childContainerRef.current.style.scrollBehavior = null;
-			childContainerRef.current.scrollTop = this.resetPosition;
-			childContainerRef.current.style.scrollBehavior = 'smooth';
-			this.resetPosition = null;
-		}
-	}
-
 	/*
 	 * wheel event handler;
 	 * - for horizontal scroll, supports wheel action on any children nodes since web engine cannot support this
@@ -704,8 +687,6 @@ class ScrollableBaseNative extends Component {
 	// FIXME setting event handlers directly to work on the V8 snapshot.
 	addEventListeners = (childContainerRef) => {
 		if (childContainerRef.current && childContainerRef.current.addEventListener) {
-			childContainerRef.current.addEventListener('mouseover', this.onMouseOver, {capture: true});
-			childContainerRef.current.addEventListener('mousemove', this.onMouseMove, {capture: true});
 			childContainerRef.current.addEventListener('focusin', this.onFocus);
 			if (platform.webos) {
 				childContainerRef.current.addEventListener('webOSVoice', this.onVoice);
@@ -717,8 +698,6 @@ class ScrollableBaseNative extends Component {
 	// FIXME setting event handlers directly to work on the V8 snapshot.
 	removeEventListeners = (childContainerRef) => {
 		if (childContainerRef.current && childContainerRef.current.removeEventListener) {
-			childContainerRef.current.removeEventListener('mouseover', this.onMouseOver, {capture: true});
-			childContainerRef.current.removeEventListener('mousemove', this.onMouseMove, {capture: true});
 			childContainerRef.current.removeEventListener('focusin', this.onFocus);
 			if (platform.webos) {
 				childContainerRef.current.removeEventListener('webOSVoice', this.onVoice);
@@ -823,7 +802,7 @@ class ScrollableBaseNative extends Component {
 
 		return (
 			<UiScrollableBaseNative
-				noScrollByDrag
+				noScrollByDrag={!platform.touch}
 				{...rest}
 				addEventListeners={this.addEventListeners}
 				applyOverscrollEffect={this.applyOverscrollEffect}

packages/moonstone/Scrollable/ScrollableNative.js

@@ -106,16 +106,28 @@ const TooltipDecorator = hoc(defaultConfig, (config, Wrapped) => {
 			tooltipDelay: PropTypes.number,
 
 			/**
-			 * Position of the tooltip with respect to the activating control.
+			 * Position of the tooltip with respect to the wrapped component.
 			 *
-			 * * Values: `'above'`, `'above center'`, `'above left'`, `'above right'`, `'below'`,
-			 * `'below center'`, `'below left'`, `'below right'`, `'left bottom'`, `'left middle'`,
-			 * `'left top'`, `'right bottom'`, `'right middle'`, `'right top'`
+			 * | *Value* | *Tooltip Direction* |
+			 * |---|---|
+			 * | `'above'` | Above component, flowing to the right |
+			 * | `'above center'` | Above component, centered |
+			 * | `'above left'` | Above component, flowing to the left |
+			 * | `'above right'` | Above component, flowing to the right |
+			 * | `'below'` | Below component, flowing to the right |
+			 * | `'below center'` | Below component, centered |
+			 * | `'below left'` | Below component, flowing to the right |
+			 * | `'below right'` | Below component, flowing to the right |
+			 * | `'left bottom'` | Left of the component, contents at the bottom |
+			 * | `'left middle'` | Left of the component, contents middle aligned |
+			 * | `'left top'` | Left of the component, contents at the top |
+			 * | `'right bottom'` | Right of the component, contents at the bottom |
+			 * | `'right middle'` | Right of the component, contents middle aligned |
+			 * | `'right top'` | Right of the component, contents at the top |
 			 *
-			 * The values starting with `'left`' and `'right'` place the tooltip on the side
-			 * (sideways tooltip) with two additional positions available, `'top'` and `'bottom'`,
-			 * which place the tooltip content toward the top or bottom, with the tooltip pointer
-			 * middle-aligned to the activator.
+			 * `TooltipDectorator` attempts to choose the best direction to meet layout and language
+			 * requirements. Left and right directions will reverse for RTL languages. Additionally,
+			 * the tooltip will reverse direction if it will prevent overflowing off the viewport
 			 *
 			 * @type {String}
 			 * @default 'above'

packages/moonstone/TooltipDecorator/TooltipDecorator.js

@@ -1017,7 +1017,7 @@ const VideoPlayerBase = class extends React.Component {
 	}
 
 	hideFeedback = () => {
-		if (this.state.feedbackVisible) {
+		if (this.state.feedbackVisible && this.state.feedbackAction !== 'focus') {
 			this.setState({
 				feedbackVisible: false,
 				feedbackAction: 'idle'