From f6bb5afaa1195ba34bf2e0b508506b4da722a56c Mon Sep 17 00:00:00 2001 From: Yevhen Martynenko Date: Fri, 18 Aug 2023 15:29:00 +0300 Subject: [PATCH 1/2] *feat PasswordField hideToggle property --- packages/ui/__stories__/PasswordField.stories.tsx | 1 + packages/ui/src/PasswordField.module.scss | 6 ++++++ packages/ui/src/PasswordField.tsx | 11 +++++++++-- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/ui/__stories__/PasswordField.stories.tsx b/packages/ui/__stories__/PasswordField.stories.tsx index 73d1aa67e..f5a0884d0 100644 --- a/packages/ui/__stories__/PasswordField.stories.tsx +++ b/packages/ui/__stories__/PasswordField.stories.tsx @@ -35,6 +35,7 @@ const Template: Story = ({ value: initValue, ...args }) => { setValue(e.target.value)} /> setValue(e.target.value)} size="small" /> setValue(e.target.value)} size="large" /> + setValue(e.target.value)} hideToggle size="large" /> ) } diff --git a/packages/ui/src/PasswordField.module.scss b/packages/ui/src/PasswordField.module.scss index 1b4e370ac..84046abf0 100644 --- a/packages/ui/src/PasswordField.module.scss +++ b/packages/ui/src/PasswordField.module.scss @@ -17,4 +17,10 @@ $inputMargin: c.$iconSizeSmall + $buttonMargin * 2; top: 50%; transform: translateY(-50%); } + + &.withoutToggle { + > input { + margin-right: 0; + } + } } diff --git a/packages/ui/src/PasswordField.tsx b/packages/ui/src/PasswordField.tsx index 37191e870..f8cd36f22 100644 --- a/packages/ui/src/PasswordField.tsx +++ b/packages/ui/src/PasswordField.tsx @@ -1,6 +1,7 @@ import { DataTestProp } from '@hazelcast/helpers' import React, { FC, FocusEvent, ChangeEvent, InputHTMLAttributes, useMemo, useState } from 'react' import { Eye, EyeOff, Lock } from 'react-feather' +import cls from 'classnames' import { TextField, TextFieldSize, TextFieldVariant } from './TextField' import { IconButton, IconButtonDisabledProps, IconButtonNotDisabledProps } from './IconButton' @@ -14,6 +15,7 @@ type PasswordFieldCoreProps = { onBlur?: (e: FocusEvent) => void onChange: (e: ChangeEvent) => void error?: string + hideToggle?: boolean } export type PasswordFieldExtraProps = { showIconLabel?: string @@ -39,11 +41,16 @@ export const PasswordField: FC = ({ withIcon, disabled, initiallyVisible = false, + hideToggle = false, ...props }) => { const [visible, setVisible] = useState(initiallyVisible) const overlay = useMemo(() => { + if (hideToggle) { + return undefined + } + let disabledProps: IconButtonDisabledProps | IconButtonNotDisabledProps = {} if (disabled) { // The IconButton is disabled only when the entire input is disabled. No need for a tooltip. @@ -67,14 +74,14 @@ export const PasswordField: FC = ({ {...disabledProps} /> ) - }, [visible, hideIconLabel, showIconLabel, disabled]) + }, [visible, hideToggle, hideIconLabel, showIconLabel, disabled]) return ( Date: Fri, 18 Aug 2023 16:05:59 +0300 Subject: [PATCH 2/2] *feat PasswordField hideToggle property --- ...omponents_PasswordField_Without_Toggle.png | Bin 0 -> 9479 bytes .../ui/__stories__/PasswordField.stories.tsx | 6 +++++- packages/ui/__tests__/PasswordField.test.tsx | 20 ++++++++++++++++++ 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 packages/ui/.loki/reference/chrome_minimal_Components_PasswordField_Without_Toggle.png diff --git a/packages/ui/.loki/reference/chrome_minimal_Components_PasswordField_Without_Toggle.png b/packages/ui/.loki/reference/chrome_minimal_Components_PasswordField_Without_Toggle.png new file mode 100644 index 0000000000000000000000000000000000000000..b5c5846849b6f4e9bc50d2671aebe62e20dd58bf GIT binary patch literal 9479 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 E0Jc>L1^@s6 literal 0 HcmV?d00001 diff --git a/packages/ui/__stories__/PasswordField.stories.tsx b/packages/ui/__stories__/PasswordField.stories.tsx index f5a0884d0..b41e17066 100644 --- a/packages/ui/__stories__/PasswordField.stories.tsx +++ b/packages/ui/__stories__/PasswordField.stories.tsx @@ -35,7 +35,6 @@ const Template: Story = ({ value: initValue, ...args }) => { setValue(e.target.value)} /> setValue(e.target.value)} size="small" /> setValue(e.target.value)} size="large" /> - setValue(e.target.value)} hideToggle size="large" /> ) } @@ -117,3 +116,8 @@ export const WrappedInFormik = () => { return } + +export const WithoutToggle = Template.bind({}) +WithoutToggle.args = { + hideToggle: true, +} diff --git a/packages/ui/__tests__/PasswordField.test.tsx b/packages/ui/__tests__/PasswordField.test.tsx index cafe2aef9..59e42f306 100644 --- a/packages/ui/__tests__/PasswordField.test.tsx +++ b/packages/ui/__tests__/PasswordField.test.tsx @@ -137,4 +137,24 @@ describe('PasswordField', () => { expect(wrapper.find(IconButton).prop('disabled')).toBe(true) }) + + it('hides toggle button', async () => { + const onBlur = jest.fn() + const onChange = jest.fn() + + const wrapper = await mountAndCheckA11Y( + , + ) + + expect(wrapper.findDataTestFirst('password-field-toggle').exists()).toBeFalsy() + }) })