From 6c089b8a52c48cbeb068ff84e46befcf88b80d1e Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 11 Apr 2019 12:38:02 -0700 Subject: [PATCH 1/6] feat(notched-outline): update to v1.1.1 --- package-lock.json | 159 ++++++++++--- package.json | 3 +- packages/notched-outline/README.md | 21 +- packages/notched-outline/index.tsx | 167 ++++++++------ packages/notched-outline/package.json | 2 +- packages/select/index.tsx | 6 +- packages/text-field/index.tsx | 13 +- test/screenshot/notched-outline/index.scss | 3 +- test/screenshot/notched-outline/index.tsx | 14 +- test/screenshot/select/index.tsx | 4 +- test/screenshot/text-field/index.tsx | 5 +- test/unit/notched-outline/index.test.tsx | 250 +++++++++------------ 12 files changed, 374 insertions(+), 273 deletions(-) diff --git a/package-lock.json b/package-lock.json index 015e3dc0e..8c2797622 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1279,23 +1279,66 @@ } }, "@material/notched-outline": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.41.0.tgz", - "integrity": "sha512-nQBkOXvkd5G9FeJ9UuecZh88WRgTsnGVvfj7UFJZEkvkzZwLBGUiJS6fF9FYraih3ZFgmphdbJxXEd9af3cqyQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-1.1.1.tgz", + "integrity": "sha512-HekxMWgIEGlmmdiCATfEJPjAWz2jlyXnfGUiBOkAzI25/OyOgcCd3rLzcMT5DUqItbKoNk1M/9kOmzTSNSt/CA==", "dev": true, "requires": { - "@material/animation": "^0.41.0", - "@material/base": "^0.41.0", - "@material/rtl": "^0.40.1", - "@material/shape": "^0.41.0", - "@material/theme": "^0.41.0" + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/floating-label": "^1.1.0", + "@material/rtl": "^0.42.0", + "@material/shape": "^1.1.1", + "@material/theme": "^1.1.0", + "tslib": "^1.9.3" }, "dependencies": { - "@material/base": { - "version": "0.41.0", - "resolved": "https://registry.npmjs.org/@material/base/-/base-0.41.0.tgz", - "integrity": "sha512-tEyzwBRu3d1H120SfKsDVYZHcqT5lKohh/7cWKR93aAaPDkSvjpKJIjyu2yuSkjpDduVZGzVocYbOvhUKhhzXQ==", + "@material/animation": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@material/animation/-/animation-1.0.0.tgz", + "integrity": "sha512-Ed5/vggn6ZhSJ87yn3ZS1d826VJNFz73jHF2bSsgRtHDoB8KCuOwQMfdgAgDa4lKDF6CDIPCKBZPKrs2ubehdw==", + "dev": true, + "requires": { + "tslib": "^1.9.3" + } + }, + "@material/floating-label": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-1.1.0.tgz", + "integrity": "sha512-7q7V+9o9XesgMnK11up9z+BcRFwtLIAIqVTCL3liKRARNHuzw9FGrGMKhTJUKvLZ3z0bM1+FmmVlA3q9FJWehQ==", + "dev": true, + "requires": { + "@material/animation": "^1.0.0", + "@material/base": "^1.0.0", + "@material/rtl": "^0.42.0", + "@material/theme": "^1.1.0", + "@material/typography": "^1.0.0", + "tslib": "^1.9.3" + } + }, + "@material/rtl": { + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-0.42.0.tgz", + "integrity": "sha512-VrnrKJzhmspsN8WXHuxxBZ69yM5IwhCUqWr1t1eNfw3ZEvEj7i1g3P31HGowKThIN1dc1Wh4LE14rCISWCtv5w==", "dev": true + }, + "@material/shape": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@material/shape/-/shape-1.1.1.tgz", + "integrity": "sha512-Jge/h1XBLjdLlam4QMSzVgM99e/N8+elQROPkltqVP7eyLc17BwM3aP5cLVfZDgrJgvsjUxbgAP1H1j8sqmUyg==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } + }, + "@material/theme": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@material/theme/-/theme-1.1.0.tgz", + "integrity": "sha512-YYUV9Rhbx4r/EMb/zoOYJUWjhXChNaLlH1rqt3vpNVyxRcxGqoVMGp5u1XALBCFiD9dACPKLIkKyRYa928nmPQ==", + "dev": true, + "requires": { + "@material/feature-targeting": "^0.44.1" + } } } }, @@ -1993,6 +2036,19 @@ "@material/theme": "^0.41.0" } }, + "@material/notched-outline": { + "version": "0.41.0", + "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-0.41.0.tgz", + "integrity": "sha512-nQBkOXvkd5G9FeJ9UuecZh88WRgTsnGVvfj7UFJZEkvkzZwLBGUiJS6fF9FYraih3ZFgmphdbJxXEd9af3cqyQ==", + "dev": true, + "requires": { + "@material/animation": "^0.41.0", + "@material/base": "^0.41.0", + "@material/rtl": "^0.40.1", + "@material/shape": "^0.41.0", + "@material/theme": "^0.41.0" + } + }, "@material/ripple": { "version": "0.41.0", "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-0.41.0.tgz", @@ -2358,6 +2414,7 @@ "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", "dev": true, + "optional": true, "requires": { "es6-promisify": "^5.0.0" } @@ -4487,7 +4544,8 @@ "version": "0.0.2", "resolved": "https://registry.npmjs.org/buffer-more-ints/-/buffer-more-ints-0.0.2.tgz", "integrity": "sha1-JrOIXRD6E9t/wBquOquHAZngEkw=", - "dev": true + "dev": true, + "optional": true }, "buffer-xor": { "version": "1.0.3", @@ -5058,7 +5116,8 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", @@ -5086,6 +5145,7 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -10087,6 +10147,7 @@ "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", "dev": true, + "optional": true, "requires": { "agent-base": "4", "debug": "3.1.0" @@ -10097,6 +10158,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "dev": true, + "optional": true, "requires": { "ms": "2.0.0" } @@ -10148,6 +10210,7 @@ "resolved": "https://registry.npmjs.org/httpntlm/-/httpntlm-1.6.1.tgz", "integrity": "sha1-rQFScUOi6Hc8+uapb1hla7UqNLI=", "dev": true, + "optional": true, "requires": { "httpreq": ">=0.4.22", "underscore": "~1.7.0" @@ -10157,7 +10220,8 @@ "version": "0.4.24", "resolved": "https://registry.npmjs.org/httpreq/-/httpreq-0.4.24.tgz", "integrity": "sha1-QzX/2CzZaWaKOUZckprGHWOTYn8=", - "dev": true + "dev": true, + "optional": true }, "https-browserify": { "version": "1.0.0", @@ -10170,6 +10234,7 @@ "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz", "integrity": "sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==", "dev": true, + "optional": true, "requires": { "agent-base": "^4.1.0", "debug": "^3.1.0" @@ -10180,6 +10245,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "dev": true, + "optional": true, "requires": { "ms": "2.0.0" } @@ -10526,7 +10592,8 @@ "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=", - "dev": true + "dev": true, + "optional": true }, "ipaddr.js": { "version": "1.6.0", @@ -12133,13 +12200,15 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/libbase64/-/libbase64-0.1.0.tgz", "integrity": "sha1-YjUag5VjrF/1vSbxL2Dpgwu3UeY=", - "dev": true + "dev": true, + "optional": true }, "libmime": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/libmime/-/libmime-3.0.0.tgz", "integrity": "sha1-UaGp50SOy9Ms2lRCFnW7IbwJPaY=", "dev": true, + "optional": true, "requires": { "iconv-lite": "0.4.15", "libbase64": "0.1.0", @@ -12150,7 +12219,8 @@ "version": "0.4.15", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz", "integrity": "sha1-/iZaIYrGpXz+hUkn6dBMGYJe3es=", - "dev": true + "dev": true, + "optional": true } } }, @@ -12158,7 +12228,8 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/libqp/-/libqp-1.1.0.tgz", "integrity": "sha1-9ebgatdLeU+1tbZpiL9yjvHe2+g=", - "dev": true + "dev": true, + "optional": true }, "load-json-file": { "version": "1.1.0", @@ -12421,6 +12492,7 @@ "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz", "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=", "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -12484,7 +12556,8 @@ "version": "2.16.3", "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz", "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=", - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -13588,13 +13661,15 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/nodemailer-fetch/-/nodemailer-fetch-1.6.0.tgz", "integrity": "sha1-ecSQihwPXzdbc/6IjamCj23JY6Q=", - "dev": true + "dev": true, + "optional": true }, "nodemailer-shared": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/nodemailer-shared/-/nodemailer-shared-1.1.0.tgz", "integrity": "sha1-z1mU4v0mjQD1zw+nZ6CBae2wfsA=", "dev": true, + "optional": true, "requires": { "nodemailer-fetch": "1.6.0" } @@ -13627,7 +13702,8 @@ "version": "0.1.10", "resolved": "https://registry.npmjs.org/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz", "integrity": "sha1-WG24EB2zDLRDjrVGc3pBqtDPE9U=", - "dev": true + "dev": true, + "optional": true }, "nomnom": { "version": "1.6.2", @@ -16659,6 +16735,7 @@ "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-2.12.0.tgz", "integrity": "sha1-1275EnyyPCJZ7bHoNJwujV4tdME=", "dev": true, + "optional": true, "requires": { "httpntlm": "1.6.1", "nodemailer-shared": "1.1.0" @@ -18008,7 +18085,7 @@ }, "ts-loader": { "version": "3.5.0", - "resolved": "http://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-3.5.0.tgz", "integrity": "sha512-JTia3kObhTk36wPFgy0RnkZReiusYx7Le9IhcUWRrCTcFcr6Dy1zGsFd3x8DG4gevlbN65knI8W50FfoykXcng==", "dev": true, "requires": { @@ -18539,7 +18616,8 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz", "integrity": "sha1-a7rwh3UA02vjTsqlhODbn+8DUgk=", - "dev": true + "dev": true, + "optional": true }, "union-value": { "version": "1.0.0", @@ -20097,7 +20175,8 @@ "version": "2.1.1", "resolved": false, "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -20146,7 +20225,8 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -20159,7 +20239,8 @@ "version": "1.1.0", "resolved": false, "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -20290,7 +20371,8 @@ "version": "2.0.3", "resolved": false, "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -20304,6 +20386,7 @@ "resolved": false, "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -20329,13 +20412,15 @@ "version": "0.0.8", "resolved": false, "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "resolved": false, "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -20356,6 +20441,7 @@ "resolved": false, "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -20444,7 +20530,8 @@ "version": "1.0.1", "resolved": false, "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -20458,6 +20545,7 @@ "resolved": false, "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -20553,7 +20641,8 @@ "version": "5.1.1", "resolved": false, "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -20595,6 +20684,7 @@ "resolved": false, "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -20616,6 +20706,7 @@ "resolved": false, "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -20664,13 +20755,15 @@ "version": "1.0.2", "resolved": false, "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "resolved": false, "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=", - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index 45d08f7bc..bf52c2f49 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "linear-progress", "list", "menu-surface", + "notched-outline", "radio", "ripple", "select", @@ -77,7 +78,7 @@ "@material/linear-progress": "^1.1.0", "@material/list": "^1.0.0", "@material/menu-surface": "^1.0.1", - "@material/notched-outline": "^0.41.0", + "@material/notched-outline": "^1.1.1", "@material/radio": "^1.1.0", "@material/ripple": "^1.0.0", "@material/select": "^0.40.1", diff --git a/packages/notched-outline/README.md b/packages/notched-outline/README.md index aff821fd5..1e136dab6 100644 --- a/packages/notched-outline/README.md +++ b/packages/notched-outline/README.md @@ -26,10 +26,28 @@ import '@material/react-notched-outline/dist/notched-outline.css'; ```js import NotchedOutline from '@material/react-notched-outline'; +import FloatingLabel from '@material/react-floating-label'; const MyComponent = () => { return ( - + + My Label + + ); +} +``` + +#### Variant with No Notch + +```js +import NotchedOutline from '@material/react-notched-outline'; + +const MyComponent = () => { + return ( + + + + ); } ``` @@ -39,7 +57,6 @@ const MyComponent = () => { Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the root element. -isRtl | Boolean | Shifts notch to right side if true. notch | Boolean | Toggles between notched outline and idle outline state. notchWidth | Number | Width of the notch in the outline. diff --git a/packages/notched-outline/index.tsx b/packages/notched-outline/index.tsx index 72f76263f..92fb27914 100644 --- a/packages/notched-outline/index.tsx +++ b/packages/notched-outline/index.tsx @@ -19,121 +19,148 @@ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN // THE SOFTWARE. + import * as React from 'react'; import classnames from 'classnames'; -// @ts-ignore no .d.ts file -import {MDCNotchedOutlineFoundation} from '@material/notched-outline/dist/mdc.notchedOutline'; - -export interface NotchedOutlineProps { - className?: string, - isRtl?: boolean, - notch?: boolean, - notchWidth?: number +import {MDCNotchedOutlineFoundation} from '@material/notched-outline/foundation'; +import {MDCNotchedOutlineAdapter} from '@material/notched-outline/adapter'; +import {MDCFloatingLabelFoundation} from '@material/floating-label/foundation'; +const {cssClasses} = MDCNotchedOutlineFoundation; + +export interface NotchedOutlineProps extends React.HTMLProps { + className?: string; + notchWidth?: number; + notch?: boolean; }; interface NotchedOutlineState { - classList: Set + classList: Set; + foundationNotchWidth?: number; }; export default class NotchedOutline extends React.Component< NotchedOutlineProps, NotchedOutlineState > { - foundation_: MDCNotchedOutlineFoundation; - outlineElement_: React.RefObject = React.createRef(); - pathElement_: React.RefObject = React.createRef(); - idleElement_: React.RefObject = React.createRef(); + foundation?: MDCNotchedOutlineFoundation; + notchedEl = React.createRef(); static defaultProps: Partial = { className: '', - isRtl: false, - notch: false, notchWidth: 0, + notch: false, }; state: NotchedOutlineState = { classList: new Set(), + foundationNotchWidth: undefined, }; componentDidMount() { - this.foundation_ = new MDCNotchedOutlineFoundation(this.adapter); - this.foundation_.init(); - const {notch, notchWidth, isRtl} = this.props; - if (notch) { - this.foundation_.notch(notchWidth, isRtl); + this.foundation = new MDCNotchedOutlineFoundation(this.adapter); + this.foundation.init(); + this.notch(); + + if (this.label) { + this.label.style.transitionDuration = '0s'; + this.addClass(cssClasses.OUTLINE_UPGRADED); + requestAnimationFrame(() => { + if (this.label) { + this.label.style.transitionDuration = ''; + } + }); } } componentWillUnmount() { - this.foundation_.destroy(); + if (this.foundation) { + this.foundation.destroy(); + } } componentDidUpdate(prevProps: NotchedOutlineProps) { - const hasToggledNotch = this.props.notch !== prevProps.notch; - const hasToggleRtl = this.props.isRtl !== prevProps.isRtl; - const notchWidthUpdated = this.props.notchWidth !== prevProps.notchWidth; - const shouldUpdateNotch = - notchWidthUpdated || hasToggleRtl || hasToggledNotch; - if (!shouldUpdateNotch) { - return; - } - if (this.props.notch) { - const {notchWidth, isRtl} = this.props; - this.foundation_.notch(notchWidth, isRtl); - } else { - this.foundation_.closeNotch(); + if (this.props.notchWidth !== prevProps.notchWidth + || this.props.notch !== prevProps.notch) { + this.notch(); } } get classes() { const {classList} = this.state; const {className} = this.props; - return classnames('mdc-notched-outline', Array.from(classList), className); + return classnames('mdc-notched-outline', Array.from(classList), className, { + [cssClasses.NO_LABEL]: !this.label, + }); + } + + get label() { + if (!this.notchedEl.current) { + return null; + } + return this.notchedEl.current.querySelector(`.${MDCFloatingLabelFoundation.cssClasses.ROOT}`); } - get adapter() { + get adapter(): MDCNotchedOutlineAdapter { return { - getWidth: () => this.outlineElement_.current ? this.outlineElement_.current.offsetWidth : 0, - getHeight: () => this.outlineElement_.current ? this.outlineElement_.current.offsetHeight : 0, - addClass: (className: string) => - this.setState({classList: this.state.classList.add(className)}), + addClass: this.addClass, removeClass: (className: string) => { - const {classList} = this.state; - classList.delete(className); - this.setState({classList}); - }, - setOutlinePathAttr: (value: string) => { - if (this.pathElement_.current) { - this.pathElement_.current.setAttribute('d', value); - } - }, - getIdleOutlineStyleValue: (propertyName: string) => { - if (!this.idleElement_.current) return; - return window - .getComputedStyle(this.idleElement_.current) - .getPropertyValue(propertyName); + this.setState((prevState: NotchedOutlineState) => { + const classList = new Set(prevState.classList); + classList.delete(className); + return {classList}; + }); }, + setNotchWidthProperty: (foundationNotchWidth) => this.setState({foundationNotchWidth}), + removeNotchWidthProperty: () => this.setState({foundationNotchWidth: undefined}), }; } + addClass = (className: string) => { + this.setState((prevState: NotchedOutlineState) => { + const classList = new Set(prevState.classList); + classList.add(className); + return {classList}; + }); + } + + notch = () => { + const {notchWidth, notch} = this.props; + if (!this.foundation) return; + if (notch) { + this.foundation.notch(notchWidth!); + } else { + this.foundation.closeNotch(); + } + } + render() { + const { + children, + className, + notchWidth, + notch, + ...otherProps + } = this.props; + const {foundationNotchWidth} = this.state; + + const notchStyle = { + width: foundationNotchWidth ? `${foundationNotchWidth}px`: undefined + }; + return ( - -
- - - -
-
- +
+
+ {children ? +
+ {React.Children.only(children)} +
+ : null} +
+
); } } diff --git a/packages/notched-outline/package.json b/packages/notched-outline/package.json index 48fed9d21..7f1400dcf 100644 --- a/packages/notched-outline/package.json +++ b/packages/notched-outline/package.json @@ -17,7 +17,7 @@ "url": "https://github.com/material-components/material-components-web-react.git" }, "dependencies": { - "@material/notched-outline": "^0.41.0", + "@material/notched-outline": "^1.1.1", "classnames": "^2.2.6", "react": "^16.4.2" }, diff --git a/packages/select/index.tsx b/packages/select/index.tsx index 4e2267560..6c18d059e 100644 --- a/packages/select/index.tsx +++ b/packages/select/index.tsx @@ -275,13 +275,11 @@ export default class Select extends React.Component { } renderNotchedOutline() { - const {isRtl, notchedOutlineClassName} = this.props; - const {outlineIsNotched, labelWidth} = this.state; + const {notchedOutlineClassName} = this.props; + const {labelWidth} = this.state; return ( ); diff --git a/packages/text-field/index.tsx b/packages/text-field/index.tsx index 353931083..46ab0b51e 100644 --- a/packages/text-field/index.tsx +++ b/packages/text-field/index.tsx @@ -330,7 +330,7 @@ class TextField extends React.Componen > {leadingIcon ? this.renderIcon(leadingIcon, onLeadingIconSelect) : null} {foundation ? this.renderInput() : null} - {label && !fullWidth ? this.renderLabel() : null} + {label && !outlined && !fullWidth ? this.renderLabel() : null} {outlined ? this.renderNotchedOutline() : null} {!fullWidth && !textarea && !outlined ? this.renderLineRipple() : null} {trailingIcon ? this.renderIcon(trailingIcon, onTrailingIconSelect) : null} @@ -385,15 +385,16 @@ class TextField extends React.Componen } renderNotchedOutline() { - const {isRtl, notchedOutlineClassName} = this.props; - const {outlineIsNotched, notchedLabelWidth} = this.state; + const {label, notchedOutlineClassName} = this.props; + const {notchedLabelWidth, outlineIsNotched} = this.state; return ( + notch={outlineIsNotched} + > + {label ? this.renderLabel(): null} + ); } diff --git a/test/screenshot/notched-outline/index.scss b/test/screenshot/notched-outline/index.scss index dcac3b7c7..476088c45 100644 --- a/test/screenshot/notched-outline/index.scss +++ b/test/screenshot/notched-outline/index.scss @@ -1,8 +1,9 @@ @import '@material/notched-outline/mixins'; .notched-outline-container { - width: 200px; + width: 300px; height: 50px; + position: relative; &:not(first-child) { diff --git a/test/screenshot/notched-outline/index.tsx b/test/screenshot/notched-outline/index.tsx index c08859fa5..f479617ca 100644 --- a/test/screenshot/notched-outline/index.tsx +++ b/test/screenshot/notched-outline/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import NotchedOutline from '../../../packages/notched-outline/index'; +import FloatingLabel from '../../../packages/floating-label/index'; import '../../../packages/notched-outline/index.scss'; import './index.scss'; @@ -11,11 +12,20 @@ const NotchedOutlineScreenshotTest = () => {
- + + Not Notched Outline +
- + + Notched outline + +
+ +
+ Label outside of notched outline +
); diff --git a/test/screenshot/select/index.tsx b/test/screenshot/select/index.tsx index 25101e985..992072283 100644 --- a/test/screenshot/select/index.tsx +++ b/test/screenshot/select/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Select, {SelectProps} from '../../../packages/select/index'; -import '../../../packages/select/index.scss'; -import './index.scss'; +// import '../../../packages/select/index.scss'; +// import './index.scss'; interface SelectTestState { value: any diff --git a/test/screenshot/text-field/index.tsx b/test/screenshot/text-field/index.tsx index 05b4fd1f6..7809576bd 100644 --- a/test/screenshot/text-field/index.tsx +++ b/test/screenshot/text-field/index.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import {Link} from 'react-router-dom'; import textFieldVariants from './variants'; -import '../../../packages/floating-label/index.scss'; -import '../../../packages/line-ripple/index.scss'; -import '../../../packages/notched-outline/index.scss'; -import '../../../packages/text-field/index.scss'; +// import '../../../packages/text-field/index.scss'; const TextFieldHomePage = () => { return ( diff --git a/test/unit/notched-outline/index.test.tsx b/test/unit/notched-outline/index.test.tsx index 4d7ffd661..e5df10068 100644 --- a/test/unit/notched-outline/index.test.tsx +++ b/test/unit/notched-outline/index.test.tsx @@ -3,187 +3,143 @@ import {assert} from 'chai'; import * as td from 'testdouble'; import {mount, shallow} from 'enzyme'; import NotchedOutline from '../../../packages/notched-outline/index'; +import {MDCNotchedOutlineFoundation} from '@material/notched-outline/foundation'; +import { coerceForTesting } from '../helpers/types'; -suite('NotchedOutline'); +const {cssClasses} = MDCNotchedOutlineFoundation; + + +const getFoundation = (instance: NotchedOutline) => { + return coerceForTesting(instance.foundation!); +}; + +const getAdapter = (instance: NotchedOutline) => { + // @ts-ignore adapter_ property is protection, we need to override it for testing purposes + return getFoundation(instance).adapter_; +}; + +const floatingLabel = () => ( + +); + +suite.only('NotchedOutline'); test('classNames adds classes', () => { const wrapper = shallow(); - assert.isTrue(wrapper.children().first().hasClass('mdc-notched-outline')); - assert.isTrue(wrapper.children().first().hasClass('test-class-name')); + assert.isTrue(wrapper.hasClass('mdc-notched-outline')); + assert.isTrue(wrapper.hasClass('test-class-name')); }); -test('creates outlineElement_', () => { - const wrapper = mount(); - assert.exists(wrapper.instance().outlineElement_.current); +test('has no label class if there is no label', () => { + const wrapper = mount(); + assert.isTrue(wrapper.childAt(0).hasClass('mdc-notched-outline')); + assert.isTrue(wrapper.childAt(0).hasClass(cssClasses.NO_LABEL)); }); -test('creates pathElement_', () => { - const wrapper = mount(); - assert.exists(wrapper.instance().pathElement_.current); +test('has upgraded class if label is present', () => { + const wrapper = mount({floatingLabel()}); + assert.isTrue(wrapper.childAt(0).hasClass('mdc-notched-outline')); + assert.isTrue(wrapper.childAt(0).hasClass(cssClasses.OUTLINE_UPGRADED)); }); -test('creates idleElement_', () => { - const wrapper = mount(); - assert.exists(wrapper.instance().idleElement_.current); +test('label should not have any style transitionDuration', () => { + const wrapper = mount({floatingLabel()}); + const floatingLabelElement = wrapper.find('.mdc-floating-label'); + assert.notExists(floatingLabelElement.props().style); }); -test('initializes foundation', () => { - const wrapper = shallow(); - assert.exists(wrapper.instance().foundation_); +test('should call foundation.notch if props.notchWidth changes and props.notch is true', () => { + const wrapper = shallow(); + getFoundation(wrapper.instance()).notch = td.func<() => void>(); + wrapper.setProps({notchWidth: 50}); + td.verify(getFoundation(wrapper.instance()).notch(50), {times: 1}); }); -test('calls #foundation.notch if notch adds the notched class', () => { - const wrapper = mount(); - wrapper - .first() - .first() - .hasClass('mdc-notched-outline--notched'); +test('should not call foundation.notch if props.notchWidth changes and props.notch is false', () => { + const wrapper = shallow(); + getFoundation(wrapper.instance()).notch = td.func<() => void>(); + wrapper.setProps({notchWidth: 50}); + td.verify(getFoundation(wrapper.instance()).notch(50), {times: 0}); }); -test('#componentDidUpdate updating notch to true calls #foundation.notch', () => { +test('should call foundation.closeNotch if props.notchWidth changes and props.notch is false', () => { const wrapper = shallow(); - wrapper.instance().foundation_.notch = td.func(); - wrapper.setProps({notch: true}); - td.verify(wrapper.instance().foundation_.notch(0, false), {times: 1}); -}); - -test( - '#componentDidUpdate updating notch to false calls ' + - '#foundation.closeNotch', - () => { - const wrapper = mount(); - wrapper.instance().foundation_.closeNotch = td.func(); - td.when( - wrapper.instance().foundation_.adapter_.getIdleOutlineStyleValue - ).thenReturn('0px'); - wrapper.setProps({notch: false}); - td.verify(wrapper.instance().foundation_.closeNotch(), {times: 1}); - } -); + getFoundation(wrapper.instance()).closeNotch = td.func<() => void>(); + wrapper.setProps({notchWidth: 50}); + td.verify(getFoundation(wrapper.instance()).closeNotch(), {times: 1}); +}); -test( - '#componentDidUpdate updating notchWidth calls ' + - '#foundation.notch with correct arguments', - () => { - const wrapper = mount(); - wrapper.instance().foundation_.notch = td.func(); - td.when( - wrapper.instance().foundation_.adapter_.getIdleOutlineStyleValue - ).thenReturn('0px'); - wrapper.setProps({notchWidth: 100}); - td.verify(wrapper.instance().foundation_.notch(100, false), {times: 1}); - } -); +test('should not call foundation.closeNotch if props.notchWidth changes and props.notch is true', () => { + const wrapper = shallow(); + getFoundation(wrapper.instance()).closeNotch = td.func<() => void>(); + wrapper.setProps({notchWidth: 50}); + td.verify(getFoundation(wrapper.instance()).closeNotch(), {times: 0}); +}); -test('#componentDidUpdate updating isRtl calls #foundation.notch', () => { - const wrapper = mount(); - wrapper.instance().foundation_.notch = td.func(); - td.when( - wrapper.instance().foundation_.adapter_.getIdleOutlineStyleValue - ).thenReturn('0px'); - wrapper.setProps({isRtl: true}); - td.verify(wrapper.instance().foundation_.notch(0, true), {times: 1}); -}); -test( - '#componentDidUpdate updating notch to true with and initial ' + - 'notchWidth calls #foundation.notch with correct arguments', - () => { - const wrapper = mount(); - wrapper.instance().foundation_.notch = td.func(); - wrapper.setProps({notch: true}); - td.verify(wrapper.instance().foundation_.notch(100, false), {times: 1}); - } -); -test( - '#componentDidUpdate shouldn\'t call #foundation notch or closeNotch' + - 'if another prop changes', - () => { - const wrapper = shallow(); - wrapper.setProps({className: 'test-class-name'}); - wrapper.instance().foundation_.notch = td.func(); - wrapper.instance().foundation_.closeNotch = td.func(); - td.verify( - wrapper - .instance() - .foundation_.notch(td.matchers.isA(Number), td.matchers.isA(Boolean)), - {times: 0} - ); - td.verify(wrapper.instance().foundation_.closeNotch(), {times: 0}); - } -); +test('should call foundation.notch if props.notch changes from false to true', () => { + const wrapper = shallow(); + getFoundation(wrapper.instance()).notch = td.func<() => void>(); + wrapper.setProps({notch: true}); + td.verify(getFoundation(wrapper.instance()).notch(50), {times: 1}); +}); + +test('should call foundation.closeNotch if props.notch changes from true to false', () => { + const wrapper = shallow(); + getFoundation(wrapper.instance()).closeNotch = td.func<() => void>(); + wrapper.setProps({notch: false}); + td.verify(getFoundation(wrapper.instance()).closeNotch(), {times: 1}); +}); -test('#adapter.getWidth returns width of outlineElement_', () => { - const div = document.createElement('div'); - // needs to be attached to real DOM to get width - // https://github.com/airbnb/enzyme/issues/1525 - document.body.append(div); - div.style.width = '150px'; - div.style.height = '50px'; - div.style.position = 'relative'; - const options = {attachTo: div}; - const wrapper = mount(, options); - const notchedOutlineElement = wrapper.find('.mdc-notched-outline').instance() as any; - const outlineWidth = notchedOutlineElement.offsetWidth; - assert.equal( - wrapper.instance().foundation_.adapter_.getWidth(), - outlineWidth - ); - div.remove(); -}); - -test('#adapter.getHeight returns height of outlineElement_', () => { - const div = document.createElement('div'); - document.body.append(div); - div.style.width = '150px'; - div.style.height = '50px'; - div.style.position = 'relative'; - const options = {attachTo: div}; - const wrapper = mount(, options); - const notchedOutlineElement = wrapper.find('.mdc-notched-outline').instance() as any; - const outlineHeight = notchedOutlineElement.offsetHeight; - assert.equal( - wrapper.instance().foundation_.adapter_.getHeight(), - outlineHeight - ); - div.remove(); -}); - -test('#adapter.addClass adds class to classList', () => { +test('#adapter.addClass should update state.classList', () => { const wrapper = shallow(); - wrapper.instance().foundation_.adapter_.addClass('test-class-name'); + getAdapter(wrapper.instance()).addClass('test-class-name'); assert.isTrue(wrapper.state().classList.has('test-class-name')); }); -test('#adapter.removeClass adds class to classList', () => { +test('#adapter.removeClass should update state.classList', () => { const wrapper = shallow(); - const classList = new Set(); - classList.add('test-class-name'); - wrapper.setState({classList}); - wrapper.instance().foundation_.adapter_.removeClass('test-class-name'); + wrapper.setState({classList: new Set(['test-class-name'])}) + getAdapter(wrapper.instance()).removeClass('test-class-name'); assert.isFalse(wrapper.state().classList.has('test-class-name')); }); -test('#adapter.setOutlinePathAttr add attr to pathElement_', () => { - const wrapper = mount(); - wrapper.instance().foundation_.adapter_.setOutlinePathAttr('M10 10'); - const path = wrapper.instance().pathElement_.current; - assert.equal(path!.getAttribute('d'), 'M10 10'); +test('#adapter.setNotchWidthProperty should update state.foundationNotchWidth', () => { + const wrapper = shallow(); + getAdapter(wrapper.instance()).setNotchWidthProperty(10); + assert.equal(wrapper.state().foundationNotchWidth, 10); +}); + +test('#adapter.removeNotchWidthProperty should update state.foundationNotchWidth to null', () => { + const wrapper = shallow(); + getAdapter(wrapper.instance()).removeNotchWidthProperty(); + assert.equal(wrapper.state().foundationNotchWidth, null); +}); + +test('renders __notch element if children exist', () => { + const wrapper = shallow({floatingLabel()}); + assert.equal(wrapper.find('.mdc-notched-outline__notch').length, 1); +}); + +test('does not render __notch element if children do not exist', () => { + const wrapper = shallow(); + assert.equal(wrapper.find('.mdc-notched-outline__notch').length, 0); +}); + +test('renders style.width on __notch element if state.foundationNotchWidth is set', () => { + const wrapper = shallow({floatingLabel()}); + wrapper.setState({foundationNotchWidth: 10}); + assert.equal(wrapper.find('.mdc-notched-outline__notch').props().style!.width, '10px'); }); -test('#adapter.getIdleOutlineStyleValue add attr to pathElement_', () => { - const div = document.createElement('div'); - document.body.append(div); - const options = {attachTo: div}; - const wrapper = mount(, options); - wrapper.instance().idleElement_.current!.style.borderRadius = '5px'; - const {adapter_} = wrapper.instance().foundation_; - assert.equal(adapter_.getIdleOutlineStyleValue('border-radius'), '5px'); +test('does not render style.width on __notch element if state.foundationNotchWidth is not set', () => { + const wrapper = shallow({floatingLabel()}); + assert.equal(wrapper.find('.mdc-notched-outline__notch').props().style!.width, undefined); }); test('#componentWillUnmount destroys foundation', () => { const wrapper = shallow(); - const foundation = wrapper.instance().foundation_; - foundation.destroy = td.func(); + const foundation = getFoundation(wrapper.instance()); + foundation.destroy = td.func<() => void>(); wrapper.unmount(); td.verify(foundation.destroy(), {times: 1}); }); From 409b61a9db3ba965ff3384134da60497455d6195 Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 11 Apr 2019 12:40:33 -0700 Subject: [PATCH 2/6] fix: lint --- packages/notched-outline/index.tsx | 6 ++++-- test/unit/notched-outline/index.test.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/notched-outline/index.tsx b/packages/notched-outline/index.tsx index 92fb27914..f1aa67a62 100644 --- a/packages/notched-outline/index.tsx +++ b/packages/notched-outline/index.tsx @@ -92,7 +92,7 @@ export default class NotchedOutline extends React.Component< [cssClasses.NO_LABEL]: !this.label, }); } - + get label() { if (!this.notchedEl.current) { return null; @@ -136,15 +136,17 @@ export default class NotchedOutline extends React.Component< render() { const { children, + /* eslint-disable no-unused-vars */ className, notchWidth, notch, + /* eslint-enable no-unused-vars */ ...otherProps } = this.props; const {foundationNotchWidth} = this.state; const notchStyle = { - width: foundationNotchWidth ? `${foundationNotchWidth}px`: undefined + width: foundationNotchWidth ? `${foundationNotchWidth}px`: undefined, }; return ( diff --git a/test/unit/notched-outline/index.test.tsx b/test/unit/notched-outline/index.test.tsx index e5df10068..d5b541d48 100644 --- a/test/unit/notched-outline/index.test.tsx +++ b/test/unit/notched-outline/index.test.tsx @@ -4,7 +4,7 @@ import * as td from 'testdouble'; import {mount, shallow} from 'enzyme'; import NotchedOutline from '../../../packages/notched-outline/index'; import {MDCNotchedOutlineFoundation} from '@material/notched-outline/foundation'; -import { coerceForTesting } from '../helpers/types'; +import {coerceForTesting} from '../helpers/types'; const {cssClasses} = MDCNotchedOutlineFoundation; @@ -98,7 +98,7 @@ test('#adapter.addClass should update state.classList', () => { test('#adapter.removeClass should update state.classList', () => { const wrapper = shallow(); - wrapper.setState({classList: new Set(['test-class-name'])}) + wrapper.setState({classList: new Set(['test-class-name'])}); getAdapter(wrapper.instance()).removeClass('test-class-name'); assert.isFalse(wrapper.state().classList.has('test-class-name')); }); From f32cbf17861c2d1808b4c01a6153b6f5dc90fdce Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 11 Apr 2019 12:49:02 -0700 Subject: [PATCH 3/6] fix: test --- test/screenshot/golden.json | 14 +++++++------- test/unit/notched-outline/index.test.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 95dca4480..440ea6d3c 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -12,9 +12,9 @@ "list": "e633e9536eeadfe7bbb46cdf3d42c5ebf40a8974420f6183057b6f7ddcbeca21", "material-icon": "442b39fb22d2c7a74efb23ca098429b471501ce21df8662327bbf9871fe0bcb0", "menu-surface": "f5face1a24fe166e86e8a3dc35ea85b2d4431469a3d06bf6fc1a30fbdc175aff", - "notched-outline": "7770dd381c27608a1f43b6f83da92507fe53963f5e4409bd73184b86275538fe", + "notched-outline": "865a22a9679baafe22b42bfa3b3ff8547c33614c0df30db1c781dc64a25cc553", "radio": "adfce0bbfa2711c67a52e1c3c3c7e980314be0147e340dac733152c80c385765", - "select": "10b82843806ddc961e85192d231ba5c3bc5aef7c20c14ffda7dd1e857b5a8c9f", + "select": "c6fefd2edf5ea84ce1847d9fa508f3b7f4afeff6543dba95eb581e5c0496e16b", "snackbar": "3da3c11708088eb563f403f808e0db4d45096e8a098700f95bfcfca13b1c2773", "switch": "dd8a3ec00447e0c586b5bbefdc633681d29e6f04ff8b517a68209bd1f4a6a4e4", "tab": "0e53fa0ca9b2de4ff7941169a9b6a929a83b18e517c18404adeb40f7e644a2f1", @@ -23,11 +23,11 @@ "tab-scroller": "468866dd0c222b36b55485ab44a5760133a4ddfb2a6cf81e6ae4672d7e02a447", "text-field/helper-text": "59604d0f39e0846fc97aae7573d317dded215282a677e4641c5e33426e3a2a1e", "text-field/icon": "0bbc8c762d27071e55983e5742548d166864b6fcebc0b9f1e413523fb93b7075", - "text-field/textArea": "871b32d2fd1982e191e9d5f6ac32e8eb4d82f9fbb1a83359bce8e8f2e9edd027", - "text-field/standard": "be2ea75813583dac8d3ad988282cfa19fa7266a29b095cbd60a34912a1900251", - "text-field/fullWidth": "7c854723b1b4ce7e6df614f44f7b7845bef6098ac30714da5c5128bbd57eb51f", - "text-field/outlined": "5d7fd01cfe503a0651daeb7acdf8163dd39a3b3f0ce3d872613bb15db30400ec", - "text-field/refTest": "8a9597a622fb5735dc4f29c918338940d2a28122e543486c02543151bd77751c", + "text-field/textArea": "b4c009f5f7637f7103380a2dd93bd6387d1ccc22d031323e6f0472949ce35881", + "text-field/standard": "61cf0ebade2a09263d3a015c26cde28b3b3e67ab9d9bb4c494ac4823b9e8000b", + "text-field/fullWidth": "26fa1e96054939384efb6427d93967bdbbc05ecc00bf7e4f13ab17cbe3e367fb", + "text-field/outlined": "d0d316e7a76fa25be0450c27c35f1575c5c6ebe7886ef2799f531cbc21a41c6f", + "text-field/refTest": "742fe55ba0f3ca11c74beef5ea9737e2eaec37d9c8524552f3b06c6cb25f4157", "top-app-bar/fixed": "7a2dd6318d62ac2eabd66f1b28100db7c15840ccb753660065fa9524db6435d6", "top-app-bar/prominent": "2506ed2dd5f370c7bab69315d2daebd58b443d2b9e32bbaec762e40a8736309b", "top-app-bar/short": "90dba9623f16d58cfc4a24b2a3ab652c7e0cc6d5ccfd030566a170a55d6bce0c", diff --git a/test/unit/notched-outline/index.test.tsx b/test/unit/notched-outline/index.test.tsx index d5b541d48..cb4ada240 100644 --- a/test/unit/notched-outline/index.test.tsx +++ b/test/unit/notched-outline/index.test.tsx @@ -22,7 +22,7 @@ const floatingLabel = () => ( ); -suite.only('NotchedOutline'); +suite('NotchedOutline'); test('classNames adds classes', () => { const wrapper = shallow(); From 17d904c4077f5d508113bd9a0cde90b0d31ffd28 Mon Sep 17 00:00:00 2001 From: Matt Goo Date: Thu, 11 Apr 2019 14:36:12 -0700 Subject: [PATCH 4/6] fix: tests --- packages/select/index.tsx | 3 ++- test/screenshot/floating-label/index.tsx | 1 + test/unit/select/index.test.tsx | 6 ------ 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/select/index.tsx b/packages/select/index.tsx index 6c18d059e..1631918e9 100644 --- a/packages/select/index.tsx +++ b/packages/select/index.tsx @@ -276,10 +276,11 @@ export default class Select extends React.Component { renderNotchedOutline() { const {notchedOutlineClassName} = this.props; - const {labelWidth} = this.state; + const {outlineIsNotched, labelWidth} = this.state; return ( ); diff --git a/test/screenshot/floating-label/index.tsx b/test/screenshot/floating-label/index.tsx index 3bcc74a22..7741d3eb6 100644 --- a/test/screenshot/floating-label/index.tsx +++ b/test/screenshot/floating-label/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import FloatingLabel from '../../../packages/floating-label/index'; import '../../../packages/floating-label/index.scss'; import './index.scss'; + const FloatingLabelScreenshotTest = () => { return (
diff --git a/test/unit/select/index.test.tsx b/test/unit/select/index.test.tsx index 65781a321..689be5c78 100644 --- a/test/unit/select/index.test.tsx +++ b/test/unit/select/index.test.tsx @@ -370,9 +370,3 @@ test('updates notchWidth prop with state.labelWidth', () => { wrapper.setState({labelWidth: 55}); assert.equal(wrapper.childAt(2).props().notchWidth, 55); }); - -test('notchedOutline props.isRtl updates with parent element dir attribute', () => { - const wrapper = mount(