From a8bce4c65db0353a5a878bc77fa8c03557f9983b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 16 Apr 2019 10:50:21 +0100 Subject: [PATCH 1/2] Add the default eslint react hooks config to the wordpress eslint package --- package-lock.json | 7 ++++ .../src/components/contrast-checker/index.js | 34 +++++++++++++------ packages/eslint-plugin/CHANGELOG.md | 1 + packages/eslint-plugin/configs/react.js | 3 ++ packages/eslint-plugin/package.json | 1 + 5 files changed, 35 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index bcc60655c7a96..efa0fa578d8e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3289,6 +3289,7 @@ "babel-eslint": "^8.0.3", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.12.4", + "eslint-plugin-react-hooks": "^1.6.0", "requireindex": "^1.2.0" } }, @@ -8485,6 +8486,12 @@ } } }, + "eslint-plugin-react-hooks": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz", + "integrity": "sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==", + "dev": true + }, "eslint-scope": { "version": "3.7.3", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.3.tgz", diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js index 0542164f1dbc7..308572e55531a 100644 --- a/packages/block-editor/src/components/contrast-checker/index.js +++ b/packages/block-editor/src/components/contrast-checker/index.js @@ -11,6 +11,22 @@ import { __ } from '@wordpress/i18n'; import { Notice } from '@wordpress/components'; import { useEffect } from '@wordpress/element'; +function ContrastCheckerMessage( { tinyBackgroundColor, tinyTextColor, backgroundColor, textColor } ) { + const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ? + __( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) : + __( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' ); + useEffect( () => { + speak( __( 'This color combination may be hard for people to read.' ) ); + }, [ backgroundColor, textColor ] ); + return ( +
+ + { msg } + +
+ ); +} + function ContrastChecker( { backgroundColor, fallbackBackgroundColor, @@ -33,18 +49,14 @@ function ContrastChecker( { ) ) { return null; } - const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ? - __( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) : - __( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' ); - useEffect( () => { - speak( __( 'This color combination may be hard for people to read.' ) ); - }, [ backgroundColor, textColor ] ); + return ( -
- - { msg } - -
+ ); } diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md index b13a52316a882..57443b156bb3b 100644 --- a/packages/eslint-plugin/CHANGELOG.md +++ b/packages/eslint-plugin/CHANGELOG.md @@ -3,6 +3,7 @@ ### New Features - New Rule: [`@wordpress/react-no-unsafe-timeout`](https://github.com/WordPress/gutenberg/blob/master/packages/eslint-plugin/docs/rules/react-no-unsafe-timeout.md) +- Add [React Hooks Rules](https://reactjs.org/docs/hooks-rules.html) config. ## 2.1.0 (2019-03-20) diff --git a/packages/eslint-plugin/configs/react.js b/packages/eslint-plugin/configs/react.js index 05c09b7e16809..4947d15fb5746 100644 --- a/packages/eslint-plugin/configs/react.js +++ b/packages/eslint-plugin/configs/react.js @@ -9,6 +9,7 @@ module.exports = { }, plugins: [ 'react', + 'react-hooks', ], rules: { 'react/display-name': 'off', @@ -24,5 +25,7 @@ module.exports = { 'react/no-children-prop': 'off', 'react/prop-types': 'off', 'react/react-in-jsx-scope': 'off', + 'react-hooks/rules-of-hooks': 'error', + 'react-hooks/exhaustive-deps': 'warn', }, }; diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index cc731ab72be5c..68784f5c29894 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -21,6 +21,7 @@ "babel-eslint": "^8.0.3", "eslint-plugin-jsx-a11y": "^6.2.1", "eslint-plugin-react": "^7.12.4", + "eslint-plugin-react-hooks": "^1.6.0", "requireindex": "^1.2.0" }, "publishConfig": { From 4f3a05a171516779fb6009ded93145d3dc4d8d08 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 16 Apr 2019 12:15:00 +0100 Subject: [PATCH 2/2] Update the contrast checker snapshots --- .../test/__snapshots__/index.js.snap | 341 ++++++++++++++---- 1 file changed, 269 insertions(+), 72 deletions(-) diff --git a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap index 16bb2d6c05044..49f7c916e7151 100644 --- a/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/contrast-checker/test/__snapshots__/index.js.snap @@ -8,24 +8,57 @@ exports[`ContrastChecker should render component when the colors do not meet AA isLargeText={true} textColor="#666" > -
- -
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
-
- -
+ + + `; @@ -37,24 +70,57 @@ exports[`ContrastChecker should render different message matching snapshot when isLargeText={false} textColor="#666" > -
- -
- This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color. +
+ This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color. +
-
- -
+ + + `; @@ -63,24 +129,56 @@ exports[`ContrastChecker should render messages when the textColor is valid, but fallbackBackgroundColor="#000000" textColor="#000000" > -
- -
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
-
- -
+ + + `; @@ -90,24 +188,57 @@ exports[`ContrastChecker should take into consideration the font size passed 1`] fontSize={23} textColor="#000000" > -
- -
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
-
- -
+ + + `; @@ -117,24 +248,57 @@ exports[`ContrastChecker should take into consideration wherever text is large o isLargeText={false} textColor="#000000" > -
- -
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
-
- -
+ + + `; @@ -145,23 +309,56 @@ exports[`ContrastChecker should use isLargeText to make decisions if both isLarg isLargeText={false} textColor="#000000" > -
- -
- This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
+ This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color. +
-
- -
+ + + `;