Custom fields in React demo call deprecated getColourBorder

[moniika]

Category

Examples

Component

blockly-react

Describe the bug
The custom fields in the react demo call the deprecated method getColourBorder.

To Reproduce

Steps to reproduce the behavior:

1. Run the react demo
2. Click on a field on any of the two custom blocks
3. Observe warning:

BlockSvg.prototype.getColourBorder was deprecated on January 2020 and will be deleted on January 2021.

Expected behavior

The react demo should not trigger any deprecation warnings and we should not be using any deprecated methods.

[maribethb]

This issue would be a good first issue for new contributors. To help you get started, I'll outline the steps you should take to solve this issue. If you have any questions, please ask us!

1. In your clone of blockly-samples, navigate to examples/blockly-react
2. Run npm install and npm run start to start up the demo. This should open a Chrome window with the React demo
3. Open the JavaScript console. Drag the "custom field" and "date field" blocks to the workspace and click on the fields to edit them. In the console, you should see the message Monica mentioned about the deprecated message.
4. In your text editor, open the file examples/blockly-react/src/fields/BlocklyReactField.jsx. This is one of the fields emitting that warning. The other field inherits from this field, so fixing it here will fix it for both of them in this case.
5. Find the line that has the deprecated method: var border = this.sourceBlock_.getColourBorder(); The message says to use style.colourTertiary instead, so update the line accordingly (please note the spelling of colour here).
6. Save, and refresh the Chrome window with the demo running. Repeat the steps to click on the field. Check the console, and the warning should not appear this time.
7. Open a PR and address any PR comments. You can run npm run lint before doing so to make sure you're following the style guide.

[lazy-geek]

@moniika i would like to work on this issue

[rachel-fenichel]

@lazy-geek Go for it!