2.4.0 release

Author: JayCanuck

.travis.yml

@@ -8,11 +8,13 @@ cache:
 install:
     - npm config set prefer-offline true
     - npm install -g enactjs/cli#develop
+    - npm install -g codecov
     - npm install
     - npm run bootstrap
 script:
     - echo -e "\x1b\x5b35;1m*** Starting tests...\x1b\x5b0m"
-    - npm test -- -- -- --maxWorkers=4
+    - npm test -- -- -- --runInBand --coverage
+    - codecov
     - echo -e "\x1b\x5b35;1m*** Tests complete\x1b\x5b0m"
     - echo -e "\x1b\x5b35;1m*** Starting eslint...\x1b\x5b0m"
     - npm run lerna -- run lint -- -- -- --max-warnings 0 .

CHANGELOG.md

@@ -2,6 +2,30 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [2.4.0] - 2019-03-04
+
+- `moonstone` `line-height` rule to base text CSS for both latin and non-latin locales
+- `moonstone` support for high contrast colors in dark and light skin
+- `moonstone/BodyText` prop `noWrap` which automatically adds `moonstone/Marquee` support as well as limits the content to only display one line of text
+- `ui/BodyText` prop `component` to allow customization of the tag/component used to render its base element
+- `ui/Repeater` prop `component` to allow customization of its base element
+- `ui/Spinner` prop `paused` to halt the animation. Previously this was hard-coded "on", but now it can be toggled.
+
+### Changed
+
+- `moonstone/Spinner` visuals from 3 spinning balls to an energetic flexing line
+- `ui/Changeable` and `ui/Toggleable` to warn when both `[defaultProp]` and `[prop]` are provided
+
+### Fixed
+
+- `moonstone/Panels` to set child's `autoFocus` prop to `default-element` when `index` increases
+- `moonstone/Slider` to prevent gaining focus when clicked when disabled
+- `moonstone/Slider` to prevent default browser scroll behavior when 5-way directional key is pressed on an active knob
+- `moonstone/DatePicker` and `moonstone/TimePicker` to close with back/ESC
+- `moonstone/DatePicker` and `moonstone/TimePicker` value handling when open on mount
+- `moonstone/ContextualPopupDecorator` to correctly focus on popup content when opened
+- `spotlight/Spottable` to prevent unnecessary updates due to focus changes
+
 ## [2.3.0] - 2019-02-11
 
 ### Deprecated

docs/interoperability.md

@@ -8,10 +8,11 @@ Enact is a fantastic way to build apps. However, you're not limited to developin
 only Enact components, nor are you prevented from using pieces of Enact in other React apps.  You
 can mix and match third-party libraries with Enact easily.
 
-## Using Third-Party Components inside of Enact
+## Using Third-Party Components Inside of Enact
+
 When creating an app using `enact create`, it creates app boilerplate that is set up for a
 `Moonstone` styled app. However, if you want to use another UI library like
-[`material-ui`](https://material-ui.com/), [`reactstrap`](https://reactstrap.github.io/), or [`react-router`](https://reacttraining.com/react-router/), just use `npm install`.
+[`material-ui`](https://material-ui.com/) (see: [Moonstone + material-ui example](https://codesandbox.io/s/l5my52r299)), [`reactstrap`](https://reactstrap.github.io/), or [`react-router`](https://reacttraining.com/react-router/), just use `npm install`.
 
 You can include components just like you normally would by using `import`.
 
@@ -37,7 +38,10 @@ For libraries like bootstrap, you can also import the css in your `App.less` fil
 
 The advantage of this is you get to use Enact's `cli` to develop, test, and build applications.
 
-## Using Enact outside of Enact
+There is also a [Moonstone starter template](https://codesandbox.io/s/z2wnj3jznx) on CodeSandbox that can be used to quickly test
+how third-party libraries and components can be used with Enact.
+
+## Using Enact Outside of Enact
 If you're using something like `create-react-app`, it's pretty easy to use Enact as a module.
 
 You can create a new application, as follows:
@@ -64,6 +68,102 @@ const App = kind({
 });
 ```
 
+You can even use `Moonstone` themed components after installing `@enact/moonstone`.
+
+```javascript
+import BodyText from '@enact/moonstone/BodyText';
+import Button from '@enact/moonstone/Button';
+import { MoonstoneDecorator } from '@enact/moonstone/MoonstoneDecorator';
+import React, { Component } from 'react';
+
+class App extends Component {
+	render() {
+		return (
+			<div>
+				<BodyText centered>
+					These are Enact Moonstone components in a CRA app
+				</BodyText>
+				<Button>Click me</Button>
+			</div>
+		);
+	};
+}
+
+export default MoonstoneDecorator(App);
+```
+
+### Styling Enact Components Outside of Enact
+
+Behind the scenes, Enact supports using CSS modules and most Enact components provide public class
+names that can be overridden to easily change their style.
+
+#### CRA Example
+
+If you are using `react-scripts` version `2.0.0` or later, you can import style overrides by using
+the `[component].module.css` filename convention.  For earlier versions, you will need to eject
+the CRA app and modify the webpack configuration to enable CSS modules.  This [article](https://medium.com/nulogy/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2)
+is a good reference for enabling CSS modules prior to `2.0.0`. 
+
+```css
+/* Button.module.css */
+.bg { /* public class name in Moonstone/Button */
+    background-color: #a4939d !important;
+}
+```
+
+```javascript
+// App.js
+import Button from '@enact/moonstone/Button';
+import { MoonstoneDecorator } from '@enact/moonstone/MoonstoneDecorator';
+import React, { Component } from 'react';
+
+import buttonCss from './Button.module.css';
+
+class App extends Component {
+	render() {
+		return (
+			<div>
+				<Button css={buttonCss}>Click me</Button>
+			</div>
+		);
+	};
+}
+
+export default MoonstoneDecorator(App);
+```
+
+### Internationalization Outside of Enact
+
+#### CRA Example
+In order to use the [`@enact/i18n`](../../developer-guide/i18n) library for internationalization, you can [eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject)
+your CRA app, install your required Enact libraries (plus, `@enact/dev-utils`), and update the webpack configuration.
+
+```
+// package.json
+
+...
+"devDependencies" : {
+  "@enact/dev-utils": "2.0.0"
+},
+"dependencies": {
+  ...
+  "@enact/i18n": "2.3.0",
+  "@enact/moonstone": "2.3.0",
+  ...
+}
+...
+
+// webpack.config.js
+...
+const {GracefulFsPlugin, ILibPlugin} = require('@enact/dev-utils');
+...
+plugins: [
+  // new GracefulFsPlugin(), // use on Windows OS if you run into filesystem handler problems
+  new ILibPlugin()
+]
+...
+```
+
 ## Theming
 
 Enact also has support theming. This way you can take our components and style them to best fit

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

@@ -22,7 +22,7 @@ The `factory` module has been replaced by the `css` override feature.
 import factory from '@enact/core/factory';
 import kind from '@enact/core/kind';
 
-import componentCss from './Button.less';
+import componentCss from './Button.module.less';
 
 const ButtonFactory = factory({css: componentCss}, ({css}) => {
 	return kind({

docs/theming.md

@@ -14,10 +14,10 @@ Components built with the `kind` feature can use the `publicClassNames` key in t
 
 Sometimes, behavior is built into a component, but no visual qualities are assigned to that behavior. For example, Enact handles the `selected` state of a `Button`, and it's implemented in our `ui` package, so it's universally available to all themes. `ui` has no opinion on how this state is visually represented, so it simply exports a blank class that the consuming theme can style to its liking.
 
-Here's a simplified example of `ui/Button/Button.less`:
+Here's a simplified example of `ui/Button/Button.module.less`:
 
 ```css
-// Button.less
+// Button.module.less
 //
 @import "../styles/mixins.less";
 
@@ -52,7 +52,7 @@ import React from 'react';
 import kind from '@enact/core/kind';
 import UiButton from '@enact/ui/Button';
 
-import componentCss from './Button.less';
+import componentCss from './Button.module.less';
 
 const Button = kind({
 	name: 'CustomizedButton',
@@ -110,7 +110,7 @@ When creating customizable components it may be helpful to understand how the th
 When a LESS or CSS file is imported, the classes are inventoried and a hash map is generated of original class names to obfuscated modularized class names: `{original: obfuscated}`. Your module now has a map of all of the class names you referenced. Normally, when using `kind()` you simply pass this into the `styles` block, and indicate which one is your base class, with the `className` key.
 
 ```javascript
-import css from './Button.less';
+import css from './Button.module.less';
 ...
 {
 	css,	// Via ES6, the `css` variable is converted to {'css': css}
@@ -156,7 +156,7 @@ import React from 'react';
 import kind from '@enact/core/kind';
 import UiButton from '@enact/ui/Button';
 
-import componentCss from './Button.less';
+import componentCss from './Button.module.less';
 
 const Button = kind({
 	name: 'CustomizedButton',

lerna.json

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

package-lock.json

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

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.4.0] - 2019-03-04
+
+No significant changes.
+
 ## [2.3.0] - 2019-02-11
 
 ### Deprecated

packages/core/CHANGELOG.md

@@ -1,5 +1,3 @@
-/* globals describe, it, expect */
-
 import computed from '../computed';
 
 describe('computed', () => {

packages/core/kind/tests/computed-specs.js

@@ -1,5 +1,3 @@
-/* globals describe, it, expect */
-
 import styles from '../styles';
 
 describe('styles', () => {

packages/core/kind/tests/styles-specs.js

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "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.4.0] - 2019-03-04
+
+No significant changes.
+
 ## [2.3.0] - 2019-02-11
 
 ### Added

packages/i18n/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@enact/i18n",
   "main": "./src/index.js",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Internationalization support for Enact using iLib",
   "scripts": {
     "clean": "enact clean",
@@ -33,8 +33,15 @@
   "eslintConfig": {
     "extends": "enact/strict"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "**/*.{js,jsx,ts,tsx}",
+      "!**/*.d.ts",
+      "!ilib/**/*"
+    ]
+  },
   "dependencies": {
-    "@enact/core": "^2.3.0",
+    "@enact/core": "^2.4.0",
     "prop-types": "15.6.2",
     "ramda": "^0.24.1",
     "react": "^16.7.0",