From 8696f40c03eae21608d9810bc04ee1a872b0a284 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Mon, 25 Mar 2019 16:55:41 +0500 Subject: [PATCH 1/5] fix(Input): fix placeholder width for masked input #1272 --- .../retail-ui/components/internal/MaskedInput/MaskedInput.less | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/retail-ui/components/internal/MaskedInput/MaskedInput.less b/packages/retail-ui/components/internal/MaskedInput/MaskedInput.less index e1e03a074a1..2faec27813c 100644 --- a/packages/retail-ui/components/internal/MaskedInput/MaskedInput.less +++ b/packages/retail-ui/components/internal/MaskedInput/MaskedInput.less @@ -13,6 +13,7 @@ /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ font-family: kontur-mask-char, Segoe UI, Helevetica Neue; /* IE use Times New Roman as default font */ font-size: inherit; + flex: 100% 1 1; } .inputMask { From d8b73982df1f9883bcd79ac36597a05f65c45560 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Mon, 25 Mar 2019 16:56:40 +0500 Subject: [PATCH 2/5] test(Input): test input with mask, placeholder and width --- .../Input/__stories__/Input.stories.tsx | 107 +++++++++++++++--- 1 file changed, 89 insertions(+), 18 deletions(-) diff --git a/packages/retail-ui/components/Input/__stories__/Input.stories.tsx b/packages/retail-ui/components/Input/__stories__/Input.stories.tsx index 90cc892ad82..1264184f374 100644 --- a/packages/retail-ui/components/Input/__stories__/Input.stories.tsx +++ b/packages/retail-ui/components/Input/__stories__/Input.stories.tsx @@ -123,24 +123,95 @@ storiesOf('Input', module) )) - .add('Input with mask', () => ( - -

- Mask: +7 999 999-99-99{' '} - -

-

- Mask: 99aa9999{' '} - -

- + .add('Placeholder and Mask', () => ( +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ width: "auto"width: 100pxwidth: 350px
placeholder + + + + + +
mask + + + + + +
placeholder and mask + + + + + +
+ + + + + + + + + + +
+ focusedblured
placeholder and mask + + + +
+
)) .add('Input with phone mask', () => ( From 1c40f1dd7651e32fc57b179fdf9e430752d49d05 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Tue, 26 Mar 2019 08:39:57 +0500 Subject: [PATCH 3/5] fix(Input): don't show placeholder if mask is visible --- packages/retail-ui/components/Input/Input.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/retail-ui/components/Input/Input.tsx b/packages/retail-ui/components/Input/Input.tsx index 0e60f35139e..5c8667657b3 100644 --- a/packages/retail-ui/components/Input/Input.tsx +++ b/packages/retail-ui/components/Input/Input.tsx @@ -193,6 +193,12 @@ class Input extends React.Component { this.input.setSelectionRange(start, end); } + public get isMaskVisible(): boolean { + const { mask, alwaysShowMask } = this.props; + const { focused } = this.state; + return Boolean(mask && (focused || alwaysShowMask)); + } + public render(): JSX.Element { const { onMouseEnter, @@ -255,7 +261,7 @@ class Input extends React.Component { style: { textAlign: align }, ref: this.refInput, type: 'text', - placeholder: !polyfillPlaceholder ? placeholder : undefined, + placeholder: !this.isMaskVisible && !polyfillPlaceholder ? placeholder : undefined, disabled, }; @@ -333,7 +339,7 @@ class Input extends React.Component { private renderPlaceholder() { let placeholder = null; - if (this.state.polyfillPlaceholder && this.props.placeholder && !this.props.alwaysShowMask && !this.props.value) { + if (this.state.polyfillPlaceholder && this.props.placeholder && !this.isMaskVisible && !this.props.value) { placeholder = (
{this.props.placeholder} From dadb9f81b9e04b85fe2d23458a29aaaa2e1bb87d Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Tue, 26 Mar 2019 08:53:12 +0500 Subject: [PATCH 4/5] test(Input): add screenshots for Input with placeholder and mask --- packages/react-ui-screenshot-tests/gemini/input.js | 7 +++++++ .../Input with placeholder and mask/Plain/chrome.png | 3 +++ .../Input with placeholder and mask/Plain/firefox.png | 3 +++ .../screens/Input with placeholder and mask/Plain/ie11.png | 3 +++ 4 files changed, 16 insertions(+) create mode 100644 packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/chrome.png create mode 100644 packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/firefox.png create mode 100644 packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/ie11.png diff --git a/packages/react-ui-screenshot-tests/gemini/input.js b/packages/react-ui-screenshot-tests/gemini/input.js index bbcac25206b..b46f66c120e 100644 --- a/packages/react-ui-screenshot-tests/gemini/input.js +++ b/packages/react-ui-screenshot-tests/gemini/input.js @@ -124,6 +124,13 @@ gemini.suite('Input with mask', suite => { }); }); +gemini.suite('Input with placeholder and mask', suite => { + suite + .before(renderStory('Input', 'Placeholder and Mask')) + .setCaptureElements('#test-element') + .capture('Plain'); +}); + gemini.suite('Input with prefix and suffix', () => { gemini.suite('Size small', suite => { suite diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/chrome.png b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/chrome.png new file mode 100644 index 00000000000..7608d8635e6 --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/chrome.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c61358508f92bbfa410ee38cf7056602d23575d20e7d0d2f1d948a9225f38bf8 +size 13316 diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/firefox.png b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/firefox.png new file mode 100644 index 00000000000..dedb7fefe4a --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/firefox.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04f62819c0d3ef3a6cdeb0ca34443211b68edf9d955207d0e070ff0b519c757c +size 9276 diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/ie11.png b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/ie11.png new file mode 100644 index 00000000000..db22bb3d285 --- /dev/null +++ b/packages/react-ui-screenshot-tests/gemini/screens/Input with placeholder and mask/Plain/ie11.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:60c9f9287a50a1445ba00ca60fa957d115f37dff8f1bc8bad0be065d9d96ece9 +size 13959 From 4987f03de22fbdaa6d149763714e8b71e407d64c Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Tue, 26 Mar 2019 11:56:53 +0500 Subject: [PATCH 5/5] test(Input): update screenshots with both placeholder and mask --- .../gemini/screens/Input with mask/Plain/chrome.png | 4 ++-- .../gemini/screens/Input with mask/Plain/firefox.png | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/chrome.png b/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/chrome.png index 017d0526188..de20851c039 100644 --- a/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/chrome.png +++ b/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/chrome.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9ff522803b9e64af3464cf2063b977dfc5af957ffcbcdc2b07feb70a612b646d -size 633 +oid sha256:834187f230a042d905a2e33bb7dac53b625a56bd787ba39daf360d0e29ace773 +size 615 diff --git a/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/firefox.png b/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/firefox.png index 08a07594971..7198cc2a984 100644 --- a/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/firefox.png +++ b/packages/react-ui-screenshot-tests/gemini/screens/Input with mask/Plain/firefox.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6f63cef9f2c1865e99399793ebe3ca7811ef33171547da2c7b9a818d61c2b428 -size 548 +oid sha256:c4e180b9920c4710f99d0c1133edf480f5b8a99373e0b7a1017de02db34a1faf +size 519