3.0.0-beta.1 release

Author: JayCanuck

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [3.0.0-beta.1] - 2019-07-15
+
+### Removed
+
+- `core/kind` config property `contextTypes`
+- `i18n/ilib` embedded copy of iLib in favour of the NPM package `ilib`
+- `small` prop in `moonstone/Input`, `moonstone/ToggleButton`, `moonstone/Button`, `moonstone/Icon`, `moonstone/IconButton`, and `moonstone/LabeledIcon`, replaced by `size` prop, which accepts `"small"` or `"large"`
+- `moonstone/Divider`, replaced by `moonstone/Heading`
+
+### Added
+
+- `ilib@^14.2.0` package as a peer dependency for `@enact/i18n` and `@enact/moonstone`, which apps will need to include
+- `moonstone/Dropdown` widths `tiny`, and `huge`
+- `ui/VirtualList.VirtualGridList` and `ui/VirtualList.VirtualList` support for resizing a window
+
+### Fixed
+
+- Moonstone Fonts to use the updated names of global fonts available in the system
+- `core/platform` logic for webOS detection
+- `moonstone/Popup` to properly handle closing in mid-transition
+- `moonstone/Scroller` to properly move focus out of the container
+- `moonstone/VirtualList` to allow keydown events to bubble up when not handled by the component
+- `moonstone/IncrementSlider` to support aria-label when disabled
+- `moonstone/LabeledItem` to not clip the bottom of descender glyphs in large text mode
+- `moonstone/VirtualList.VirtualGridList` and `moonstone/VirtualList.VirtualList` to focus an item properly after an update
+- `moonstone/Scroller`, `moonstone/VirtualList.VirtualGridList`, and `moonstone/VirtualList.VirtualList` not to scroll too far by page up/down keys
+- `spotlight/SpotlightContainerDecorator` to correctly forward `onFocusCapture` and `onBlurCapture` events
+- `ui/Icon` to support arbitrary icon name strings, like in material icons
+
 ## [3.0.0-alpha.7] - 2019-06-24
 
 ### Changed

docs/migration/enact/migrating-to-enact-3.md

@@ -10,6 +10,40 @@ this guide.
 
 ## General Changes
 
+### cli
+`cli` must be upgraded to version `2.4.1`.
+
+### i18n
+Apps that use `@enact/i18n` must install `ilib` as a dependency.  This includes apps that do not require `@enact/i18n` directly, but use themes or modules that do (list may or may not be complete, check module requirements):
+* `@enact/analytics`
+* `@enact/i18n` (of course!)
+* `@enact/moonstone`
+
+#### Example
+```
+npm install ilib@^14.2.0 --save
+```
+webOS TV developers can optionally use an alias for `ilib` that will provide the webOS-specific locale data for local development.  It is not required as the webOS build tools will automatically provide the correct locale data at build time.  Alias support is in `npm` version `6.9.0` or greater.
+
+#### Example
+```
+npm install ilib@ilib-webos-tv@^14.2.0-webostv.1 --save
+```
+
+Import references using `@enact/i18n/ilib` must be updated to use `ilib`.
+
+#### Example
+##### 2.x
+```
+import DateFactory from '@enact/i18n/ilib/lib/DateFactory';
+import ilib from '@enact/i18n/ilib/lib/ilib';
+```
+##### 3.0
+```
+import DateFactory from 'ilib/lib/DateFactory';
+import ilib from 'ilib/lib/ilib';
+```
+
 ### spotlight
 `spotlight` will now focus disabled items.  You can use the `spotlightDisabled` prop on `spotlight/Spottable`
 and `spotlight/SpotlightContainerDecorator` instances if focus absolutely must be prevented.
@@ -19,6 +53,9 @@ Enact 3.0 no longer supports the 2019 TV platform or earlier versions.
 
 ## moonstone
 
+### General
+Many of the Moonstone components are affected by the change from using the `small` boolean prop to the `size` text prop.  Most of them are `size="small"` by default and have larger versions when using `size="large"`.
+
 ### Style
 Various styling changes have been made to support new UI/UX designs for the webOS TV platform.  In
 addition, some LESS variables have been changed or removed.  If you were importing `moonstone/styles/*.less`

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.8.0",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-beta.1",
   "command": {
     "bootstrap": {
       "npmClientArgs": [

package-lock.json

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

package.json

@@ -2,7 +2,7 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
-## [unreleased]
+## [3.0.0-beta.1] - 2019-07-15
 
 ### Removed
 

packages/core/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "3.0.0-alpha.7",
+  "version": "3.0.0-beta.1",
   "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,11 +2,11 @@
 
 The following is a curated list of changes in the Enact i18n module, newest changes on the top.
 
-## [unreleased]
+## [3.0.0-beta.1] - 2019-07-15
 
 ## Removed
 
--  `i18n/ilib` embedded copy of iLib in favour of the NPM package `ilib`
+- `i18n/ilib` embedded copy of iLib in favour of the NPM package `ilib`
 
 ### Added
 

packages/i18n/CHANGELOG.md

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

packages/i18n/package.json

@@ -2,7 +2,7 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
-## [unreleased]
+## [3.0.0-beta.1] - 2019-07-15
 
 ### Removed
 
@@ -16,11 +16,11 @@ The following is a curated list of changes in the Enact moonstone module, newest
 
 ### Fixed
 
+- Fonts to use the updated names of global fonts available in the system
 - `moonstone/Popup` to properly handle closing in mid-transition
 - `moonstone/Scroller` to properly move focus out of the container
 - `moonstone/VirtualList` to allow keydown events to bubble up when not handled by the component
 - `moonstone/IncrementSlider` to support aria-label when disabled
-- Fonts to use the updated names of global fonts available in the system
 - `moonstone/LabeledItem` to not clip the bottom of descender glyphs in large text mode
 - `moonstone/VirtualList.VirtualGridList` and `moonstone/VirtualList.VirtualList` to focus an item properly after an update
 - `moonstone/Scroller`, `moonstone/VirtualList.VirtualGridList`, and `moonstone/VirtualList.VirtualList` not to scroll too far by page up/down keys

packages/moonstone/CHANGELOG.md

@@ -16,48 +16,49 @@ const fonts = {
 		bold:    'LG Smart UI AR HE TH SemiBold"), local("LGSmartUIARHETH-SemiBold'
 	},
 	'am': {
-		regular: 'LG Display_Amharic'
+		regular: 'LG Smart UI Amharic'
 	},
-	// 'bn': {
-	// 	regular: 'LG Display_Bengali'
-	// },
-	'en-JP': {
-		regular: 'LG Display_JP'
+	'bn': {
+		regular: 'LG Smart UI Bengali'
+	},
+	'gu': {
+		regular: 'LG Smart UI Gujarati'
 	},
-	// 'gu': {
-	// 	regular: 'LG Display_Gujarati'
-	// },
 	'ja': {
-		regular: 'LG Display_JP'
+		regular: 'LG Smart UI JP',
+		bold: 'LG Display_JP_Bold'
+	},
+	'kn': {
+		regular: 'LG Smart UI Kannada'
+	},
+	'hi': {
+		regular: 'LG Smart UI Devanagari'
 	},
-	// 'kn': {
-	// 	regular: 'LG Display_Kannada'
-	// },
-	// 'ks': {
-	// 	regular: 'LG Display_Devanagari'
-	// },
 	'or': {
-		regular: 'LG Display_Oriya'
+		regular: 'LG Smart UI Oriya'
+	},
+	'pa': {
+		regular: 'LG Smart UI Gurmukhi'
 	},
 	'ml': {
-		regular: 'LG Display_ML'
+		regular: 'LG Smart UI Malayalam'
+	},
+	'ta': {
+		regular: 'LG Smart UI Tamil'
+	},
+	'te': {
+		regular: 'LG Smart UI Telugu'
 	},
-	// 'ta': {
-	// 	regular: 'LG Display_Tamil'
-	// },
-	// 'te': {
-	// 	regular: 'LG Display_Telugu'
-	// },
 	'ur': {
-		regular: 'LG Display_Urdu',
+		regular: 'LG Smart UI Urdu',
 		unicodeRange:
 			'U+600-6FF,' +
 			'U+FE70-FEFE,' +
 			'U+FB50-FDFF'
 	},
 	'zh-HK': {
-		regular: 'LG Display GP4_HK',
-		bold:    'LG Display GP4_HK',
+		regular: 'LG Smart UI TC',
+		bold:    'LG Smart UI TC',
 		unicodeRange:
 			'U+0-FF,' +
 			'U+2E80-2EFF,' +
@@ -71,6 +72,9 @@ const fonts = {
 };
 
 // Duplications and alternate locale names
+fonts['as'] = fonts['bn'];
+fonts['en-JP'] = fonts['ja'];
+fonts['mr'] = fonts['hi'];
 fonts['zh-TW'] = fonts['zh-HK'];
 
 addLocalizedFont(fontName, fonts);

packages/moonstone/MoonstoneDecorator/fontGenerator.js

@@ -64,7 +64,7 @@ const offsetForBreadcrumbs = (node) => {
  */
 export const ActivityArranger = {
 	enter: (config) => {
-		const {node, reverse, to, from} = config;
+		const {node, reverse} = config;
 
 		return arrange(config, [
 			{transform: `${offsetForBreadcrumbs(node)} translateX(100%)`, offset: 0},
@@ -75,7 +75,7 @@ export const ActivityArranger = {
 		], animationOptions);
 	},
 	leave: (config) => {
-		const {node, reverse, to, from} = config;
+		const {node, reverse} = config;
 
 		return arrange(config, [
 			{transform: offsetForBreadcrumbs(node), offset: 0},

packages/moonstone/Panels/Arrangers.js

@@ -350,6 +350,15 @@ class ScrollableBase extends Component {
 		}
 	}
 
+	isScrollButtonFocused () {
+		const {horizontalScrollbarRef: h, verticalScrollbarRef: v} = this.uiRef.current;
+
+		return (
+			h.current && h.current.isOneOfScrollButtonsFocused() ||
+			v.current && v.current.isOneOfScrollButtonsFocused()
+		);
+	}
+
 	onFlick = ({direction}) => {
 		const bounds = this.uiRef.current.getScrollBounds();
 		const focusedItem = Spotlight.getCurrent();
@@ -373,24 +382,17 @@ class ScrollableBase extends Component {
 	}
 
 	onTouchStart = () => {
-		const
-			focusedItem = Spotlight.getCurrent(),
-			{horizontalScrollbarRef, verticalScrollbarRef} = this.uiRef.current,
-			isHorizontalScrollButtonFocused = horizontalScrollbarRef.current && horizontalScrollbarRef.current.isOneOfScrollButtonsFocused(),
-			isVerticalScrollButtonFocused = verticalScrollbarRef.current && verticalScrollbarRef.current.isOneOfScrollButtonsFocused();
+		const focusedItem = Spotlight.getCurrent();
 
-		if (!Spotlight.isPaused() && focusedItem && !isHorizontalScrollButtonFocused && !isVerticalScrollButtonFocused) {
+		if (!Spotlight.isPaused() && focusedItem && !this.isScrollButtonFocused()) {
 			focusedItem.blur();
 		}
 	}
 
-	onWheel = ({delta, horizontalScrollbarRef, verticalScrollbarRef}) => {
-		const
-			focusedItem = Spotlight.getCurrent(),
-			isHorizontalScrollButtonFocused = horizontalScrollbarRef.current && horizontalScrollbarRef.current.isOneOfScrollButtonsFocused(),
-			isVerticalScrollButtonFocused = verticalScrollbarRef.current && verticalScrollbarRef.current.isOneOfScrollButtonsFocused();
+	onWheel = ({delta}) => {
+		const focusedItem = Spotlight.getCurrent();
 
-		if (focusedItem && !isHorizontalScrollButtonFocused && !isVerticalScrollButtonFocused) {
+		if (focusedItem && !this.isScrollButtonFocused()) {
 			focusedItem.blur();
 		}
 
@@ -578,7 +580,7 @@ class ScrollableBase extends Component {
 
 		forward('onKeyDown', ev, this.props);
 
-		if (isPageUp(keyCode) || isPageDown(keyCode)) {
+		if ((isPageUp(keyCode) || isPageDown(keyCode)) && !this.isScrollButtonFocused()) {
 			ev.stopPropagation();
 			ev.preventDefault();
 		}

packages/moonstone/Scrollable/Scrollable.js

@@ -332,6 +332,16 @@ class ScrollableBaseNative extends Component {
 		}
 	}
 
+
+	isScrollButtonFocused () {
+		const {horizontalScrollbarRef: h, verticalScrollbarRef: v} = this.uiRef.current;
+
+		return (
+			h.current && h.current.isOneOfScrollButtonsFocused() ||
+			v.current && v.current.isOneOfScrollButtonsFocused()
+		);
+	}
+
 	onFlick = ({direction}) => {
 		const bounds = this.uiRef.current.getScrollBounds();
 		const focusedItem = Spotlight.getCurrent();
@@ -357,13 +367,9 @@ class ScrollableBaseNative extends Component {
 	}
 
 	onTouchStart = () => {
-		const
-			focusedItem = Spotlight.getCurrent(),
-			{horizontalScrollbarRef, verticalScrollbarRef} = this.uiRef.current,
-			isHorizontalScrollButtonFocused = horizontalScrollbarRef.current && horizontalScrollbarRef.current.isOneOfScrollButtonsFocused(),
-			isVerticalScrollButtonFocused = verticalScrollbarRef.current && verticalScrollbarRef.current.isOneOfScrollButtonsFocused();
+		const focusedItem = Spotlight.getCurrent();
 
-		if (!Spotlight.isPaused() && focusedItem && !isHorizontalScrollButtonFocused && !isVerticalScrollButtonFocused) {
+		if (!Spotlight.isPaused() && focusedItem && !this.isScrollButtonFocused()) {
 			focusedItem.blur();
 		}
 	}
@@ -639,7 +645,7 @@ class ScrollableBaseNative extends Component {
 
 		forward('onKeyDown', ev, this.props);
 
-		if (isPageUp(keyCode) || isPageDown(keyCode)) {
+		if ((isPageUp(keyCode) || isPageDown(keyCode)) && !this.isScrollButtonFocused()) {
 			ev.stopPropagation();
 			ev.preventDefault();
 		}