@atlaskit/textarea - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

 # @atlaskit/textarea
 
+## 0.2.6
+- [patch] [1b952c437d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/1b952c437d):
+
+  - Change order of props spread to fix textarea focus glow, and smart resizing when onChange passed in
+
 ## 0.2.5
@@ -4,0 +9,0 @@ - Updated dependencies [76299208e6](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/76299208e6):

dist/es2015/components/TextArea.js

@@ -56,3 +56,3 @@ import * as tslib_1 from "tslib";
                 React.createElement(Theme.Consumer, { appearance: appearance, mode: mode }, function (tokens) { return (React.createElement(TextAreaWrapper, tslib_1.__assign({ resize: resize, maxHeight: maxHeight, appearance: appearance, isDisabled: isDisabled, isReadOnly: isReadOnly, isMonospaced: isMonospaced, isFocused: isFocused, isInvalid: isInvalid, minimumRows: minimumRows, forwardedRef: function () { } }, tokens),
-                    React.createElement(TextareaElement, tslib_1.__assign({ forwardedRef: forwardedRef, resize: resize, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, onFocus: _this.handleOnFocus, onBlur: _this.handleOnBlur }, rest)))); })));
+                    React.createElement(TextareaElement, tslib_1.__assign({ forwardedRef: forwardedRef, resize: resize, disabled: isDisabled, readOnly: isReadOnly, required: isRequired }, rest, { onFocus: _this.handleOnFocus, onBlur: _this.handleOnBlur })))); })));
         }));
@@ -59,0 +59,0 @@ };

dist/es2015/components/TextAreaElement.js

@@ -48,5 +48,5 @@ import * as tslib_1 from "tslib";
         if (resize === 'smart') {
-            return (React.createElement("textarea", tslib_1.__assign({ onChange: this.handleOnChange, ref: this.getTextAreaRef, style: { height: height } }, rest)));
+            return (React.createElement("textarea", tslib_1.__assign({ ref: this.getTextAreaRef, style: { height: height } }, rest, { onChange: this.handleOnChange })));
         }
-        return (React.createElement("textarea", tslib_1.__assign({ style: { height: '100%' }, ref: this.getTextAreaRef }, rest)));
+        return (React.createElement("textarea", tslib_1.__assign({ ref: this.getTextAreaRef, style: { height: '100%' } }, rest)));
     };
@@ -53,0 +53,0 @@ return TextAreaElement;

dist/es5/components/TextArea.js

@@ -58,3 +58,3 @@ "use strict";
                 React.createElement(theme_2.Theme.Consumer, { appearance: appearance, mode: mode }, function (tokens) { return (React.createElement(styled_1.TextAreaWrapper, tslib_1.__assign({ resize: resize, maxHeight: maxHeight, appearance: appearance, isDisabled: isDisabled, isReadOnly: isReadOnly, isMonospaced: isMonospaced, isFocused: isFocused, isInvalid: isInvalid, minimumRows: minimumRows, forwardedRef: function () { } }, tokens),
-                    React.createElement(TextAreaElement_1.default, tslib_1.__assign({ forwardedRef: forwardedRef, resize: resize, disabled: isDisabled, readOnly: isReadOnly, required: isRequired, onFocus: _this.handleOnFocus, onBlur: _this.handleOnBlur }, rest)))); })));
+                    React.createElement(TextAreaElement_1.default, tslib_1.__assign({ forwardedRef: forwardedRef, resize: resize, disabled: isDisabled, readOnly: isReadOnly, required: isRequired }, rest, { onFocus: _this.handleOnFocus, onBlur: _this.handleOnBlur })))); })));
         }));
@@ -61,0 +61,0 @@ };

dist/es5/components/TextAreaElement.js

@@ -50,5 +50,5 @@ "use strict";
         if (resize === 'smart') {
-            return (React.createElement("textarea", tslib_1.__assign({ onChange: this.handleOnChange, ref: this.getTextAreaRef, style: { height: height } }, rest)));
+            return (React.createElement("textarea", tslib_1.__assign({ ref: this.getTextAreaRef, style: { height: height } }, rest, { onChange: this.handleOnChange })));
         }
-        return (React.createElement("textarea", tslib_1.__assign({ style: { height: '100%' }, ref: this.getTextAreaRef }, rest)));
+        return (React.createElement("textarea", tslib_1.__assign({ ref: this.getTextAreaRef, style: { height: '100%' } }, rest)));
     };
@@ -55,0 +55,0 @@ return TextAreaElement;

dist/package.json

 {
 	"name": "@atlaskit/textarea",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/textarea",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Textarea Component",
@@ -33,2 +33,3 @@ "license": "Apache-2.0",
     "@atlaskit/build-utils": "^2.0.0",
+    "@atlaskit/ssr": "^0.0.1",
     "@atlaskit/button": "^10.1.3",
@@ -45,2 +46,2 @@ "@atlaskit/docs": "^7.0.0",
   ]
-}
+}

src/__tests__/visual-regression/textAreaSnapshotTest.ts

 import {
   getExampleUrl,
   takeScreenShot,
+  takeElementScreenShot,
 } from '@atlaskit/visual-regression/helper';
 
-describe('Snapshot Test', () => {
-  it('Textfield basic should match production example', async () => {
-    const url = getExampleUrl(
+describe('TextArea', () => {
+  let page: any;
+  let url: string;
+
+  beforeAll(async () => {
+    // @ts-ignore
+    page = global.page;
+    url = getExampleUrl(
       'core',
@@ -15,6 +21,25 @@ 'textarea',
     );
+  });
+
+  it('basic example should match production', async () => {
     // @ts-ignore
-    const image = await takeScreenShot(global.page, url);
+    const image = await takeScreenShot(page, url);
     expect(image).toMatchProdImageSnapshot();
   });
+
+  it('should become blue and white onFocus', async () => {
+    await page.waitForSelector('button');
+    await page.click('button');
+
+    /**
+     * This is required because the CSS transition in the styled component
+     * is set to 0.2s, meaning the blue glow will only be fully displayed
+     * after 0.2s. 500ms chosen to allow for some leeway in browser behaviour.
+     */
+    await page.waitFor(500);
+
+    const image = await takeElementScreenShot(page, 'div#smart');
+    // @ts-ignore
+    expect(image).toMatchProdImageSnapshot();
+  });
 });

version.json

 {
 	"name": "@atlaskit/textarea",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"sideEffects": false
 }

No alert changes

Improved metrics

Total package byte prevSize

120037

increased by1.53%

Number of package files

60

increased by3.45%

Lines of code

2397

increased by1.7%

Worsened metrics

Dev dependency count

7

increased by16.67%

No dependency changes