2.0.0-alpha.6 release

CHANGELOG.md

@@ -2,6 +2,57 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [2.0.0-alpha.6] - 2018-03-22
+
+### Removed
+
+- `core/factory` module, replaced by the `css` override feature
+- `moonstone/Slider` exports `SliderFactory` and `SliderBaseFactory`
+- `moonstone/IncrementSlider` exports `IncrementSliderFactory` and `IncrementSliderBaseFactory`
+- `moonstone/ProgressBar`, `moonstone/Slider`, `moonstone/Slider.SliderTooltip`, `moonstone/IncrementSlider` components' `vertical` property and replaced it with `orientation`
+- `spotlight/SpotlightContainerDecorator` prop `containerId`, to be replaced by `spotlightId`
+- `ui/Transition` property `clipHeight`
+- `ui/ProgressBar` property `vertical` and replaced it with `orientation`
+
+### Added
+
+- `moonstone/VideoPlayer` property `component` to handle custom video element
+- `moonstone/IncrementSlider` properties `incrementAriaLabel` and `decrementAriaLabel` to configure the label set on each button
+- `moonstone/Input` support for `small` prop
+- `moonstone/ProgressBar` support for `tooltip` and `tooltipForceSide`
+- `moonstone/ProgressBar`, `moonstone/Slider`, `moonstone/Slider.SliderTooltip`, `moonstone/IncrementSlider` property `orientation` to accept orientation strings like "vertical" and "horizontal" (replaced old `vertical` prop)
+- `spotlight/Pause` module which acts as a semaphore for spotlight pause state
+- `spotlight/Spottable` prop `spotlightId` to simplify focusing components
+- `ui/Scrollable` support for scrolling by touch
+- `ui/ProgressBar` property `orientation` to accept orientation strings like `"vertical"` and `"horizontal"`
+
+### Changed
+
+- `moonstone/Input` input `height`, `vertical-align`, and `margins`. Please verify your layouts to ensure everything lines up correctly; this change may require removal of old sizing and positioning CSS which is no longer necessary.
+- `moonstone/FormCheckbox` to have a small border around the circle, according to new GUI designs
+- `moonstone/RadioItem` dot size and added an inner-dot to selected-focused state, according to new GUI designs
+- `moonstone/ContextualPopup` prop `popupContainerId` to `popupSpotlightId`
+- `moonstone/Popup` prop `containerId` to `spotlightId`
+- `moonstone/VideoPlayer` prop `containerId` to `spotlightId`
+- `moonstone/VirtualList.VirtualList` and `moonstone/VirtualList.VirtualGridList` prop `component` to be replaced by `itemRenderer`
+- `spotlight/Spotlight.focus` to support focusing by `spotlightId`
+- `spotlight` container attributes `data-container-disabled` and `data-container-muted` to be `data-spotlight-container-disabled` and `data-spotlight-container-muted`, respectively
+- `ui/VirtualList.VirtualList` and `ui/VirtualList.VirtualGridList` prop `component` to be replaced by `itemRenderer`
+
+### Fixed
+
+- `moonstone/ExpandableItem` to be more performant when animating
+- `moonstone/GridListImageItem` to hide overlay checkmark icon on focus when unselected
+- `moonstone/GridListImageItem` to use `ui/GridListImageItem`
+- `moonstone/VirtualList`, `moonstone/VirtualGridList` and `moonstone/Scroller` components to use their base UI components
+- `moonstone/VirtualList` to show the selected state on hovered paging controls properly
+- `moonstone/Slider` to highlight knob when selected
+- `moonstone/Slider` to handle updates to its `value` prop correctly
+- `moonstone/ToggleItem` to accept HTML DOM node tag names as strings for its `component` property
+- `moonstone/Popup` to properly pause and resume spotlight when animating
+- `ui/Transition` animation for `clip` for `"up"`, `"left"`, and `"right"` directions. This includes a DOM addition to the Transition markup.
+- `ui/ComponentOverride` and `ui/ToggleItem` to accept HTML DOM node tag names as strings for its `component` property
+
 ## [2.0.0-alpha.5] - 2018-03-07
 
 ### Removed

lerna.json

@@ -1,4 +1,4 @@
 {
   "lerna": "2.8.0",
-  "version": "2.0.0-alpha.5"
+  "version": "2.0.0-alpha.6"
 }

package.json

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

packages/core/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
-## [unreleased]
+## [2.0.0-alpha.6] - 2018-03-22
 
 ### Removed
 
-- `core/factory` module replaced by the `css` override feature
+- `core/factory` module, replaced by the `css` override feature
 
 ## [2.0.0-alpha.5] - 2018-03-07
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "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.0.0-alpha.6] - 2018-03-22
+
+No significant changes.
+
 ## [2.0.0-alpha.5] - 2018-03-07
 
 No significant changes.

packages/i18n/package.json

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

packages/moonstone/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
-## [unreleased]
+## [2.0.0-alpha.6] - 2018-03-22
 
 ### Removed
 
@@ -26,9 +26,6 @@ The following is a curated list of changes in the Enact moonstone module, newest
 - `moonstone/ContextualPopup` prop `popupContainerId` to `popupSpotlightId`
 - `moonstone/Popup` prop `containerId` to `spotlightId`
 - `moonstone/VideoPlayer` prop `containerId` to `spotlightId`
-
-### Changed
-
 - `moonstone/VirtualList.VirtualList` and `moonstone/VirtualList.VirtualGridList` prop `component` to be replaced by `itemRenderer`
 
 ### Fixed
@@ -41,6 +38,7 @@ The following is a curated list of changes in the Enact moonstone module, newest
 - `moonstone/Slider` to highlight knob when selected
 - `moonstone/Slider` to handle updates to its `value` prop correctly
 - `moonstone/ToggleItem` to accept HTML DOM node tag names as strings for its `component` property
+- `moonstone/Popup` to properly pause and resume spotlight when animating
 
 ## [2.0.0-alpha.5] - 2018-03-07
 

packages/moonstone/Input/InputSpotlightDecorator.js

@@ -160,14 +160,14 @@ const InputSpotlightDecorator = hoc((config, Wrapped) => {
 			}
 
 			const focusChanged = this.state.focused !== prevState.focused;
-			if (focusChanged && this.state.focused === 'input') {
-				forward('onActivate', {type: 'onActivate'}, this.props);
-				this.paused.pause();
-			} else {
-				if (focusChanged && prevState.focused === 'input') {
+			if (focusChanged) {
+				if (this.state.focused === 'input') {
+					forward('onActivate', {type: 'onActivate'}, this.props);
+					this.paused.pause();
+				} else if (prevState.focused === 'input') {
 					forward('onDeactivate', {type: 'onDeactivate'}, this.props);
+					this.paused.resume();
 				}
-				this.paused.resume();
 			}
 		}
 

packages/moonstone/Popup/Popup.js

@@ -423,7 +423,7 @@ class Popup extends React.Component {
 			activator: null
 		});
 
-		if (ev.target.getAttribute('data-spotlight-id') === this.state.containerId) {
+		if (ev.currentTarget.getAttribute('data-spotlight-id') === this.state.containerId) {
 			this.paused.resume();
 
 			if (!this.props.open) {
@@ -436,7 +436,7 @@ class Popup extends React.Component {
 	handlePopupShow = (ev) => {
 		forwardShow(ev, this.props);
 
-		if (ev.target.getAttribute('data-spotlight-id') === this.state.containerId) {
+		if (ev.currentTarget.getAttribute('data-spotlight-id') === this.state.containerId) {
 			this.paused.resume();
 
 			if (this.props.open) {

packages/moonstone/ProgressBar/ProgressBar.js

@@ -48,6 +48,17 @@ const ProgressBarBase = kind({
 		 */
 		css: PropTypes.object,
 
+		/**
+		 * Sets the orientation of the slider, whether the progress-bar depicts its progress value
+		 * in a left and right orientation or up and down onientation.
+		 * Must be either `'horizontal'` or `'vertical'`.
+		 *
+		 * @type {String}
+		 * @default 'horizontal'
+		 * @public
+		 */
+		orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
 		/**
 		 * The proportion of the filled portion of the progress bar. Valid values are
 		 * between `0` and `1`.
@@ -76,16 +87,7 @@ const ProgressBarBase = kind({
 		 * @type {Boolean}
 		 * @public
 		 */
-		tooltipForceSide: PropTypes.bool,
-
-		/**
-		 * If `true` the progress bar will be oriented vertically.
-		 *
-		 * @type {Boolean}
-		 * @default false
-		 * @public
-		 */
-		vertical: PropTypes.bool
+		tooltipForceSide: PropTypes.bool
 	},
 
 	styles: {
@@ -94,32 +96,35 @@ const ProgressBarBase = kind({
 	},
 
 	computed: {
-		tooltipComponent: ({progress, tooltip, tooltipForceSide, vertical}) => {
+		tooltipComponent: ({progress, tooltip, tooltipForceSide, orientation}) => {
 			if (tooltip) {
 				const progressAfterMidpoint = progress > 0.5;
 				const progressPercentage = Math.min(parseInt(progress * 100), 100);
 				const percentageText = `${progressPercentage}%`;
-				const tooltipVerticalPosition = {
-					top: `${100 - progressPercentage}%`,
-					right: tooltipForceSide ? 'auto' : ri.unit(-36, 'rem'),
-					left: tooltipForceSide ? ri.unit(72, 'rem') : null
-				};
-				const tooltipHorizontalPosition = progressAfterMidpoint ? {
-					right: `${100 - progressPercentage}%`,
-					bottom: ri.unit(24, 'rem')
-				} : {
-					left: percentageText,
-					bottom: ri.unit(24, 'rem')
-				};
-
-				const tooltipPosition = vertical ? tooltipVerticalPosition : tooltipHorizontalPosition;
+
+				let tooltipPosition;
+				if (orientation === 'vertical') {
+					tooltipPosition = {
+						top: `${100 - progressPercentage}%`,
+						right: tooltipForceSide ? 'auto' : ri.unit(ri.scale(-36), 'rem'),
+						left: tooltipForceSide ? ri.unit(ri.scale(72), 'rem') : null
+					};
+				} else {
+					tooltipPosition = progressAfterMidpoint ? {
+						right: `${100 - progressPercentage}%`,
+						bottom: ri.unit(ri.scale(24), 'rem')
+					} : {
+						left: percentageText,
+						bottom: ri.unit(ri.scale(24), 'rem')
+					};
+				}
 
 				return (
 					<ProgressBarTooltip
 						forceSide={tooltipForceSide}
 						knobAfterMidpoint={progressAfterMidpoint}
 						style={tooltipPosition}
-						vertical={vertical}
+						orientation={orientation}
 					>
 						{percentageText}
 					</ProgressBarTooltip>

packages/moonstone/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/moonstone",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.6",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "main": "index.js",
   "scripts": {
@@ -28,10 +28,10 @@
     "extends": "enact/strict"
   },
   "dependencies": {
-    "@enact/core": "^2.0.0-alpha.5",
-    "@enact/i18n": "^2.0.0-alpha.5",
-    "@enact/spotlight": "^2.0.0-alpha.5",
-    "@enact/ui": "^2.0.0-alpha.5",
+    "@enact/core": "^2.0.0-alpha.6",
+    "@enact/i18n": "^2.0.0-alpha.6",
+    "@enact/spotlight": "^2.0.0-alpha.6",
+    "@enact/ui": "^2.0.0-alpha.6",
     "classnames": "^2.2.5",
     "eases": "^1.0.8",
     "invariant": "^2.2.2",

packages/sampler/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact Sampler, newest changes on the top.
 
+## [2.0.0-alpha.6] - 2018-03-22
+
+No significant changes.
+
 ## [2.0.0-alpha.5] - 2018-03-07
 
 No significant changes.